feat(react-headless): add a new package to export Fluent UI base state hooks and render functions

.github/CODEOWNERS

@@ -331,6 +331,8 @@ packages/react-components/component-selector-preview/library @microsoft/teams-pr
 packages/react-components/component-selector-preview/stories @microsoft/teams-prg
 packages/react-components/react-menu-grid-preview/library @microsoft/teams-prg
 packages/react-components/react-menu-grid-preview/stories @microsoft/teams-prg
+packages/react-components/react-headless/library @microsoft/cxe-prg
+packages/react-components/react-headless/stories @microsoft/cxe-prg
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 # Deprecated v9 packages - exposed as part of `/unstable` api

change/@fluentui-react-headless-e353fbc0-1423-4a34-ba93-1d47bf2afae3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: introduce new package for creating base components",
+  "packageName": "@fluentui/react-headless",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-avatar/library/src/components/AvatarGroupPopover/useAvatarGroupPopover.tsx

@@ -5,19 +5,8 @@ import { useAvatarGroupContext_unstable } from '../../contexts/AvatarGroupContex
 import { defaultAvatarGroupSize } from '../AvatarGroup/useAvatarGroup';
 import { useControllableState, slot } from '@fluentui/react-utilities';
 import { MoreHorizontalRegular } from '@fluentui/react-icons';
-import {
-  OnOpenChangeData,
-  OpenPopoverEvents,
-  Popover,
-  type PopoverProps,
-  PopoverSurface,
-} from '@fluentui/react-popover';
-import type {
-  AvatarGroupPopoverBaseProps,
-  AvatarGroupPopoverBaseState,
-  AvatarGroupPopoverProps,
-  AvatarGroupPopoverState,
-} from './AvatarGroupPopover.types';
+import { OnOpenChangeData, OpenPopoverEvents, Popover, PopoverSurface } from '@fluentui/react-popover';
+import type { AvatarGroupPopoverProps, AvatarGroupPopoverState } from './AvatarGroupPopover.types';
 import { Tooltip } from '@fluentui/react-tooltip';
 
 /**
@@ -31,52 +20,12 @@ import { Tooltip } from '@fluentui/react-tooltip';
 export const useAvatarGroupPopover_unstable = (props: AvatarGroupPopoverProps): AvatarGroupPopoverState => {
   const size = useAvatarGroupContext_unstable(ctx => ctx.size) ?? defaultAvatarGroupSize;
   const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
-  const { indicator = size < 24 ? 'icon' : 'count', ...baseProps } = props;
-
-  const state = useAvatarGroupPopoverBase_unstable({
-    indicator,
-    ...baseProps,
-  });
-
-  if (layout === 'pie') {
-    state.triggerButton.children = null;
-  } else if (indicator === 'icon') {
-    state.triggerButton.children = <MoreHorizontalRegular />;
-  }
-
-  return {
-    size,
-    ...state,
-
-    components: {
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      ...state.components,
-      root: Popover,
-      popoverSurface: PopoverSurface,
-      tooltip: Tooltip,
-    },
-    root: slot.always(state.root as PopoverProps, { elementType: Popover }),
-    popoverSurface: slot.always(props.popoverSurface, {
-      defaultProps: state.popoverSurface,
-      elementType: PopoverSurface,
-    }),
-    tooltip: slot.always(props.tooltip, {
-      defaultProps: state.tooltip,
-      elementType: Tooltip,
-    }),
-  };
-};
-
-/**
- * Handles popover open/closed state, indicator display, and slot configuration.
- * Use directly for custom implementations or use useAvatarGroupPopover_unstable for defaults.
- *
- * @param props - AvatarGroupPopover props
- * @returns AvatarGroupPopover state
- */
-export const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBaseProps): AvatarGroupPopoverBaseState => {
-  const layout = useAvatarGroupContext_unstable(ctx => ctx.layout);
-  const { indicator = 'count', count = React.Children.count(props.children), children, ...restOfProps } = props;
+  const {
+    indicator = size < 24 ? 'icon' : 'count',
+    count = React.Children.count(props.children),
+    children,
+    ...restOfProps
+  } = props;
 
   const [popoverOpen, setPopoverOpen] = useControllableState({
     state: props.open,
@@ -92,7 +41,9 @@ export const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBase
   let triggerButtonChildren;
   if (layout === 'pie') {
     triggerButtonChildren = null;
-  } else if (indicator === 'count') {
+  } else if (indicator === 'icon') {
+    triggerButtonChildren = <MoreHorizontalRegular />;
+  } else {
     triggerButtonChildren = count > 99 ? '99+' : `+${count}`;
   }
 
@@ -101,6 +52,7 @@ export const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBase
     indicator,
     layout,
     popoverOpen,
+    size,
 
     components: {
       root: Popover,
@@ -119,7 +71,7 @@ export const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBase
         open: popoverOpen,
         onOpenChange: handleOnPopoverChange,
       },
-      { elementType: 'div' },
+      { elementType: Popover },
     ),
     triggerButton: slot.always(props.triggerButton, {
       defaultProps: {
@@ -140,14 +92,14 @@ export const useAvatarGroupPopoverBase_unstable = (props: AvatarGroupPopoverBase
         'aria-label': 'Overflow',
         tabIndex: 0,
       },
-      elementType: 'div',
+      elementType: PopoverSurface,
     }),
     tooltip: slot.always(props.tooltip, {
       defaultProps: {
         content: 'View more people.',
         relationship: 'label',
       },
-      elementType: 'div',
+      elementType: Tooltip,
     }),
   };
 };

packages/react-components/react-breadcrumb/library/etc/react-breadcrumb.api.md

@@ -14,26 +14,13 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { TabsterDOMAttribute } from '@fluentui/react-tabster';
 
 // @public
 export const Breadcrumb: ForwardRefComponent<BreadcrumbProps>;
 
-// @public (undocumented)
-export type BreadcrumbBaseProps = Omit<BreadcrumbProps, 'size'>;
-
-// @public (undocumented)
-export type BreadcrumbBaseState = Omit<BreadcrumbState, 'size'>;
-
 // @public
 export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
 
-// @public (undocumented)
-export type BreadcrumbButtonBaseProps = Omit<BreadcrumbButtonProps, 'size'>;
-
-// @public (undocumented)
-export type BreadcrumbButtonBaseState = Omit<BreadcrumbButtonState, 'size'>;
-
 // @public
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
 
@@ -57,12 +44,6 @@ export type BreadcrumbContextValues = Required<Pick<BreadcrumbProps, 'size'>>;
 // @public
 export const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps>;
 
-// @public
-export type BreadcrumbDividerBaseProps = BreadcrumbDividerProps;
-
-// @public
-export type BreadcrumbDividerBaseState = Omit<BreadcrumbDividerState, 'size'>;
-
 // @public (undocumented)
 export const breadcrumbDividerClassNames: SlotClassNames<BreadcrumbDividerSlots>;
 
@@ -80,12 +61,6 @@ export type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots> & Pi
 // @public
 export const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps>;
 
-// @public
-export type BreadcrumbItemBaseProps = Omit<BreadcrumbItemProps, 'size'>;
-
-// @public
-export type BreadcrumbItemBaseState = Omit<BreadcrumbItemState, 'size'>;
-
 // @public (undocumented)
 export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots>;
 
@@ -159,18 +134,9 @@ export const truncateBreadcrumLongTooltip: (content: string, maxLength?: number)
 // @public
 export const useBreadcrumb_unstable: (props: BreadcrumbProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbState;
 
-// @public
-export const useBreadcrumbA11yBehavior_unstable: ({ focusMode, }: Pick<BreadcrumbBaseProps, "focusMode">) => Partial<TabsterDOMAttribute>;
-
-// @public
-export const useBreadcrumbBase_unstable: (props: BreadcrumbBaseProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbBaseState;
-
 // @public
 export const useBreadcrumbButton_unstable: (props: BreadcrumbButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => BreadcrumbButtonState;
 
-// @public
-export const useBreadcrumbButtonBase_unstable: (props: BreadcrumbButtonBaseProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => BreadcrumbButtonBaseState;
-
 // @public
 export const useBreadcrumbButtonStyles_unstable: (state: BreadcrumbButtonState) => BreadcrumbButtonState;
 
@@ -180,18 +146,12 @@ export const useBreadcrumbContext_unstable: () => BreadcrumbContextValues;
 // @public
 export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbDividerState;
 
-// @public
-export const useBreadcrumbDividerBase_unstable: (props: BreadcrumbDividerBaseProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbDividerBaseState;
-
 // @public
 export const useBreadcrumbDividerStyles_unstable: (state: BreadcrumbDividerState) => BreadcrumbDividerState;
 
 // @public
 export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbItemState;
 
-// @public
-export const useBreadcrumbItemBase_unstable: (props: BreadcrumbItemBaseProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbItemBaseState;
-
 // @public
 export const useBreadcrumbItemStyles_unstable: (state: BreadcrumbItemState) => BreadcrumbItemState;
 

packages/react-components/react-breadcrumb/library/src/Breadcrumb.ts

@@ -3,8 +3,6 @@ export type {
   BreadcrumbProps,
   BreadcrumbSlots,
   BreadcrumbState,
-  BreadcrumbBaseProps,
-  BreadcrumbBaseState,
 } from './components/Breadcrumb/index';
 export {
   Breadcrumb,
@@ -15,6 +13,4 @@ export {
   useBreadcrumbContext_unstable,
   useBreadcrumbStyles_unstable,
   useBreadcrumb_unstable,
-  useBreadcrumbBase_unstable,
-  useBreadcrumbA11yBehavior_unstable,
 } from './components/Breadcrumb/index';

packages/react-components/react-breadcrumb/library/src/components/Breadcrumb/index.ts

@@ -1,17 +1,6 @@
 export { Breadcrumb } from './Breadcrumb';
-export type {
-  BreadcrumbBaseProps,
-  BreadcrumbBaseState,
-  BreadcrumbContextValues,
-  BreadcrumbProps,
-  BreadcrumbSlots,
-  BreadcrumbState,
-} from './Breadcrumb.types';
+export type { BreadcrumbContextValues, BreadcrumbProps, BreadcrumbSlots, BreadcrumbState } from './Breadcrumb.types';
 export { BreadcrumbProvider, breadcrumbDefaultValue, useBreadcrumbContext_unstable } from './BreadcrumbContext';
 export { renderBreadcrumb_unstable } from './renderBreadcrumb';
-export {
-  useBreadcrumb_unstable,
-  useBreadcrumbBase_unstable,
-  useBreadcrumbA11yBehavior_unstable,
-} from './useBreadcrumb';
+export { useBreadcrumb_unstable } from './useBreadcrumb';
 export { breadcrumbClassNames, useBreadcrumbStyles_unstable } from './useBreadcrumbStyles.styles';

packages/react-components/react-breadcrumb/library/src/index.ts

@@ -2,48 +2,26 @@ export {
   Breadcrumb,
   renderBreadcrumb_unstable,
   useBreadcrumb_unstable,
-  useBreadcrumbBase_unstable,
-  useBreadcrumbA11yBehavior_unstable,
   useBreadcrumbStyles_unstable,
   breadcrumbClassNames,
 } from './Breadcrumb';
-export type {
-  BreadcrumbSlots,
-  BreadcrumbProps,
-  BreadcrumbState,
-  BreadcrumbBaseProps,
-  BreadcrumbBaseState,
-} from './Breadcrumb';
+export type { BreadcrumbSlots, BreadcrumbProps, BreadcrumbState } from './Breadcrumb';
 export {
   BreadcrumbDivider,
   breadcrumbDividerClassNames,
   renderBreadcrumbDivider_unstable,
   useBreadcrumbDividerStyles_unstable,
   useBreadcrumbDivider_unstable,
-  useBreadcrumbDividerBase_unstable,
-} from './BreadcrumbDivider';
-export type {
-  BreadcrumbDividerProps,
-  BreadcrumbDividerSlots,
-  BreadcrumbDividerState,
-  BreadcrumbDividerBaseProps,
-  BreadcrumbDividerBaseState,
 } from './BreadcrumbDivider';
+export type { BreadcrumbDividerProps, BreadcrumbDividerSlots, BreadcrumbDividerState } from './BreadcrumbDivider';
 export {
   BreadcrumbItem,
   breadcrumbItemClassNames,
   renderBreadcrumbItem_unstable,
   useBreadcrumbItemStyles_unstable,
   useBreadcrumbItem_unstable,
-  useBreadcrumbItemBase_unstable,
-} from './BreadcrumbItem';
-export type {
-  BreadcrumbItemProps,
-  BreadcrumbItemSlots,
-  BreadcrumbItemState,
-  BreadcrumbItemBaseProps,
-  BreadcrumbItemBaseState,
 } from './BreadcrumbItem';
+export type { BreadcrumbItemProps, BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem';
 export {
   partitionBreadcrumbItems,
   truncateBreadcrumbLongName,
@@ -57,14 +35,7 @@ export {
   renderBreadcrumbButton_unstable,
   useBreadcrumbButtonStyles_unstable,
   useBreadcrumbButton_unstable,
-  useBreadcrumbButtonBase_unstable,
-} from './BreadcrumbButton';
-export type {
-  BreadcrumbButtonProps,
-  BreadcrumbButtonSlots,
-  BreadcrumbButtonState,
-  BreadcrumbButtonBaseProps,
-  BreadcrumbButtonBaseState,
 } from './BreadcrumbButton';
+export type { BreadcrumbButtonProps, BreadcrumbButtonSlots, BreadcrumbButtonState } from './BreadcrumbButton';
 export { BreadcrumbProvider, useBreadcrumbContext_unstable } from './Breadcrumb';
 export type { BreadcrumbContextValues } from './Breadcrumb';