address review comments

Author: dmytrokirpa

packages/react-components/react-headless-components-preview/library/.babelrc.json

@@ -23,7 +23,7 @@
         "useSpread": true
       }
     },
-    "target": "es2019"
+    "target": "es2022"
   },
   "minify": false,
   "sourceMaps": true

packages/react-components/react-headless-components-preview/library/.swcrc

@@ -1,5 +1,7 @@
 # @fluentui/react-headless-components-preview
 
-**React Headless Components components for [Fluent UI React](https://react.fluentui.dev/)**
+**React Headless Components for [Fluent UI React](https://react.fluentui.dev/)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+> [!WARNING] > **This package is in preview and not production-ready.** APIs may change without notice before final release. **Do not use in production.**
+>
+> This package exposes unstyled, headless Fluent UI v9 primitives for teams building custom design systems. For most teams, [`@fluentui/react-components`](https://www.npmjs.com/package/@fluentui/react-components) remains the recommended default.

packages/react-components/react-headless-components-preview/library/README.md

@@ -20,8 +20,6 @@ import type { AccordionPanelBaseProps } from '@fluentui/react-accordion';
 import type { AccordionPanelBaseState } from '@fluentui/react-accordion';
 import type { AccordionPanelSlots as AccordionPanelSlots_2 } from '@fluentui/react-accordion';
 import type { AccordionSlots as AccordionSlots_2 } from '@fluentui/react-accordion';
-import { AnnounceContextValue } from '@fluentui/react-shared-contexts';
-import { AnnounceProvider } from '@fluentui/react-shared-contexts';
 import { assertSlots } from '@fluentui/react-utilities';
 import type { ButtonBaseProps } from '@fluentui/react-button';
 import { ButtonBaseState } from '@fluentui/react-button';
@@ -34,10 +32,8 @@ import { DividerBaseState } from '@fluentui/react-divider';
 import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider';
 import { ForwardRefComponent } from '@fluentui/react-utilities';
 import { getIntrinsicElementProps } from '@fluentui/react-utilities';
-import { getNativeElementProps } from '@fluentui/react-utilities';
 import { getPartitionedNativeProps } from '@fluentui/react-utilities';
-import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
-import { getSlots } from '@fluentui/react-utilities';
+import { getSlotClassNameProp_unstable as getSlotClassNameProp } from '@fluentui/react-utilities';
 import { IdPrefixProvider } from '@fluentui/react-utilities';
 import { isHTMLElement } from '@fluentui/react-utilities';
 import { JSXElement } from '@fluentui/react-utilities';
@@ -46,12 +42,8 @@ import { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
 import { mergeCallbacks } from '@fluentui/react-utilities';
 import { OnSelectionChangeCallback } from '@fluentui/react-utilities';
 import { OnSelectionChangeData } from '@fluentui/react-utilities';
-import { PortalMountNodeProvider } from '@fluentui/react-shared-contexts';
 import type * as React_2 from 'react';
 import { resetIdsForTests } from '@fluentui/react-utilities';
-import { resolveShorthand } from '@fluentui/react-utilities';
-import { ResolveShorthandFunction } from '@fluentui/react-utilities';
-import { ResolveShorthandOptions } from '@fluentui/react-utilities';
 import { SelectionHookParams } from '@fluentui/react-utilities';
 import { SelectionItemId } from '@fluentui/react-utilities';
 import { SelectionMethods } from '@fluentui/react-utilities';
@@ -65,20 +57,15 @@ import { SlotPropsRecord } from '@fluentui/react-utilities';
 import { SlotRenderFunction } from '@fluentui/react-utilities';
 import { SSRProvider } from '@fluentui/react-utilities';
 import { useAnimationFrame } from '@fluentui/react-utilities';
-import { useAnnounce } from '@fluentui/react-shared-contexts';
 import { useApplyScrollbarWidth } from '@fluentui/react-utilities';
 import { useEventCallback } from '@fluentui/react-utilities';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useId } from '@fluentui/react-utilities';
 import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useIsSSR } from '@fluentui/react-utilities';
 import { useMergedRefs } from '@fluentui/react-utilities';
-import { usePortalMountNode } from '@fluentui/react-shared-contexts';
 import { useScrollbarWidth } from '@fluentui/react-utilities';
 import { useSelection } from '@fluentui/react-utilities';
-import { useThemeClassName_unstable as useThemeClassName } from '@fluentui/react-shared-contexts';
 import { useTimeout } from '@fluentui/react-utilities';
-import { useTooltipVisibility_unstable as useTooltipVisibility } from '@fluentui/react-shared-contexts';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
@@ -131,10 +118,6 @@ export type AccordionSlots = AccordionSlots_2;
 // @public (undocumented)
 export type AccordionState = AccordionBaseState;
 
-export { AnnounceContextValue }
-
-export { AnnounceProvider }
-
 export { assertSlots }
 
 // @public
@@ -169,13 +152,9 @@ export { ForwardRefComponent }
 
 export { getIntrinsicElementProps }
 
-export { getNativeElementProps }
-
 export { getPartitionedNativeProps }
 
-export { getSlotClassNameProp_unstable }
-
-export { getSlots }
+export { getSlotClassNameProp }
 
 export { IdPrefixProvider }
 
@@ -193,8 +172,6 @@ export { OnSelectionChangeCallback }
 
 export { OnSelectionChangeData }
 
-export { PortalMountNodeProvider }
-
 // @public
 export const renderAccordion: (state: AccordionBaseState, contextValues: AccordionContextValues_2) => JSXElement;
 
@@ -215,12 +192,6 @@ export const renderDivider: (state: DividerBaseState) => JSXElement;
 
 export { resetIdsForTests }
 
-export { resolveShorthand }
-
-export { ResolveShorthandFunction }
-
-export { ResolveShorthandOptions }
-
 export { SelectionHookParams }
 
 export { SelectionItemId }
@@ -265,8 +236,6 @@ export const useAccordionPanel: (props: AccordionPanelProps, ref: React_2.Ref<HT
 
 export { useAnimationFrame }
 
-export { useAnnounce }
-
 export { useApplyScrollbarWidth }
 
 // @public
@@ -277,8 +246,6 @@ export const useDivider: (props: DividerProps, ref: React_2.Ref<HTMLElement>) =>
 
 export { useEventCallback }
 
-export { useFluent }
-
 export { useId }
 
 export { useIsomorphicLayoutEffect }
@@ -287,18 +254,12 @@ export { useIsSSR }
 
 export { useMergedRefs }
 
-export { usePortalMountNode }
-
 export { useScrollbarWidth }
 
 export { useSelection }
 
-export { useThemeClassName }
-
 export { useTimeout }
 
-export { useTooltipVisibility }
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-components/react-headless-components-preview/library/bundle-size/webpack.analyze.js

@@ -30,5 +30,4 @@ module.exports = {
   },
   coverageDirectory: './coverage',
   setupFilesAfterEnv: ['./config/tests.js'],
-  snapshotSerializers: ['@griffel/jest-serializer'],
 };

packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md

@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-accordion';
 
 import type { AccordionItemProps, AccordionItemState, AccordionItemContextValues } from './AccordionItem.types';
-import { mapStateToDataAttributes } from '../../../utils/mapStateToDataAttributes';
+import { stringifyDataAttribute } from '../../../utils';
 
 /**
  * Returns the state for an AccordionItem component, given its props and ref.
@@ -17,7 +17,10 @@ import { mapStateToDataAttributes } from '../../../utils/mapStateToDataAttribute
 export const useAccordionItem = (props: AccordionItemProps, ref: React.Ref<HTMLElement>): AccordionItemState => {
   const state = useAccordionItem_unstable(props, ref);
 
-  Object.assign(state.root, mapStateToDataAttributes(state, ['disabled', 'open']));
+  Object.assign(state.root, {
+    'data-disabled': stringifyDataAttribute(state.disabled),
+    'data-open': stringifyDataAttribute(state.open),
+  });
 
   return state;
 };

packages/react-components/react-headless-components-preview/library/jest.config.js

@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-accordion';
 
 import type { AccordionProps, AccordionState, AccordionContextValues } from './Accordion.types';
-import { mapStateToDataAttributes } from '../../utils/mapStateToDataAttributes';
+import { stringifyDataAttribute } from '../../utils';
 
 /**
  * Returns the state for an Accordion component, given its props and ref.
@@ -17,7 +17,10 @@ import { mapStateToDataAttributes } from '../../utils/mapStateToDataAttributes';
 export const useAccordion = (props: AccordionProps, ref: React.Ref<HTMLElement>): AccordionState => {
   const state = useAccordionBase_unstable(props, ref);
 
-  Object.assign(state.root, mapStateToDataAttributes(state, ['collapsible', 'multiple']));
+  Object.assign(state.root, {
+    'data-collapsible': stringifyDataAttribute(state.collapsible),
+    'data-multiple': stringifyDataAttribute(state.multiple),
+  });
 
   return state;
 };

packages/react-components/react-headless-components-preview/library/src/components/Accordion/AccordionItem/useAccordionItem.ts

@@ -4,7 +4,7 @@ import type * as React from 'react';
 import { useButtonBase_unstable } from '@fluentui/react-button';
 
 import type { ButtonProps, ButtonState } from './Button.types';
-import { mapStateToDataAttributes } from '../../utils/mapStateToDataAttributes';
+import { stringifyDataAttribute } from '../../utils';
 
 /**
  * Returns the state for a Button component, given its props and ref.
@@ -13,7 +13,11 @@ import { mapStateToDataAttributes } from '../../utils/mapStateToDataAttributes';
 export const useButton = (props: ButtonProps, ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>): ButtonState => {
   const state = useButtonBase_unstable(props, ref);
 
-  Object.assign(state.root, mapStateToDataAttributes(state, ['disabled', 'disabledFocusable', 'iconOnly']));
+  Object.assign(state.root, {
+    'data-disabled': stringifyDataAttribute(state.disabled),
+    'data-disabled-focusable': stringifyDataAttribute(state.disabledFocusable),
+    'data-icon-only': stringifyDataAttribute(state.iconOnly),
+  });
 
   return state;
 };

packages/react-components/react-headless-components-preview/library/src/components/Accordion/useAccordion.ts

@@ -1,30 +1,11 @@
 export {
-  AnnounceProvider,
-  PortalMountNodeProvider,
-  useAnnounce,
-  useFluent_unstable as useFluent,
-  usePortalMountNode,
-  useTooltipVisibility_unstable as useTooltipVisibility,
-  useThemeClassName_unstable as useThemeClassName,
-} from '@fluentui/react-shared-contexts';
-export type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
-export {
-  // getNativeElementProps is deprecated but removing it would be a breaking change
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  getNativeElementProps,
   getIntrinsicElementProps,
   getPartitionedNativeProps,
-  getSlotClassNameProp_unstable,
-  // getSlots is deprecated but removing it would be a breaking change
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  getSlots,
+  getSlotClassNameProp_unstable as getSlotClassNameProp,
   slot,
   assertSlots,
   IdPrefixProvider,
   resetIdsForTests,
-  // resolveShorthand is deprecated but removing it would be a breaking change
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  resolveShorthand,
   SSRProvider,
   useAnimationFrame,
   useId,
@@ -46,12 +27,6 @@ export type {
   JSXElement,
   JSXIntrinsicElement,
   JSXIntrinsicElementKeys,
-  // ResolveShorthandFunction is deprecated but removing it would be a breaking change
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  ResolveShorthandFunction,
-  // ResolveShorthandOptions is deprecated but removing it would be a breaking change
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  ResolveShorthandOptions,
   Slot,
   SlotOptions,
   SlotComponentType,