chore: deprecates ComponentState.components property

bsunderhus · mainframev · commit 55de57f914ec · 2025-03-26T20:26:29.000+01:00
diff --git a/change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json b/change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-drawer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json b/change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-search",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json b/change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json b/change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts
@@ -35,6 +35,11 @@ export const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleStat
 
   const styles = useStyles();
 
+  // We should not use components to pass along the base element type of a slot
+  // but there's no way to retrieve the element type of a slot from the slot definition
+  // right now without using SLOT_ELEMENT_TYPE_SYMBOL
+  // TODO: create a method to retrieve the element type of a slot
+  // eslint-disable-next-line deprecation/deprecation
   const { heading: root = {}, action, components } = state;
 
   useDialogTitleStyles_unstable({
diff --git a/packages/react-components/react-jsx-runtime/src/createElement.test.tsx b/packages/react-components/react-jsx-runtime/src/createElement.test.tsx
@@ -70,7 +70,6 @@ describe('createElement with getSlotsNext', () => {
   describe('custom behavior tests', () => {
     it('keeps children from "defaultProps" in a render callback', () => {
       type TestComponentSlots = { slot: Slot<'div'> };
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
@@ -114,7 +113,6 @@ describe('createElement with getSlotsNext', () => {
 
     it('keeps children from a render template in a render callback', () => {
       type TestComponentSlots = { outer: Slot<'div'>; inner: Slot<'div'> };
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
diff --git a/packages/react-components/react-jsx-runtime/src/interop.test.tsx b/packages/react-components/react-jsx-runtime/src/interop.test.tsx
@@ -14,7 +14,6 @@ describe('resolveShorthand with assertSlots', () => {
         someSlot: NonNullable<Slot<'div'>>;
       };
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
 
       const TestComponent = (props: TestComponentProps) => {
@@ -59,7 +58,6 @@ describe('resolveShorthand with assertSlots', () => {
     it('keeps children from a render template in a render callback', () => {
       const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
       type TestComponentSlots = { outer: NonNullable<Slot<'div'>>; inner: NonNullable<Slot<'div'>> };
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
@@ -121,7 +119,6 @@ describe('resolveShorthand with assertSlots', () => {
     it("should support 'as' property to opt-out of base element type", () => {
       const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
       type TestComponentSlots = { slot: NonNullable<Slot<'div', 'span'>> };
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
@@ -174,6 +171,7 @@ describe('resolveShorthand with assertSlots', () => {
       const TestComponent = (props: TestComponentProps) => {
         const higherOrderState = useHigherOrderStateHook(props);
         const state: TestComponentState = {
+          // eslint-disable-next-line deprecation/deprecation
           components: { ...higherOrderState.components, slot: 'span' },
           slot: {
             ...higherOrderState.slot,
diff --git a/packages/react-components/react-jsx-runtime/src/jsx-runtime.test.tsx b/packages/react-components/react-jsx-runtime/src/jsx-runtime.test.tsx
@@ -64,7 +64,6 @@ describe('createElement with getSlotsNext', () => {
   describe('custom behavior tests', () => {
     it('keeps children from "defaultProps" in a render callback', () => {
       type TestComponentSlots = { slot: Slot<'div'> };
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
@@ -108,7 +107,6 @@ describe('createElement with getSlotsNext', () => {
 
     it('keeps children from a render template in a render callback', () => {
       type TestComponentSlots = { outer: Slot<'div'>; inner: Slot<'div'> };
-      // eslint-disable-next-line deprecation/deprecation
       type TestComponentState = ComponentState<TestComponentSlots>;
       type TestComponentProps = ComponentProps<Partial<TestComponentSlots>>;
 
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
@@ -27,6 +27,7 @@ export const useMenuItemLink_unstable = (
   return {
     ...baseState,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...baseState.components,
       root: 'a',
     },
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx
@@ -29,6 +29,7 @@ export const useMenuItemSwitch_unstable = (
       },
     }),
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...baseState.components,
       switchIndicator: 'span',
     },
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts
@@ -135,6 +135,7 @@ export const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): Me
   useMenuItemStyles_unstable({
     ...state,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...state.components,
       checkmark: 'span',
       submenuIndicator: 'span',
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx b/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx
@@ -111,6 +111,7 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
   const state: SearchBoxState = {
     ...inputState,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...inputState.components,
       dismiss: 'span',
     },
diff --git a/packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx b/packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx
@@ -72,6 +72,7 @@ export const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<
   return {
     ...baseState,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...baseState.components,
       selectionCell: DataGridSelectionCell,
     },
diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx b/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
@@ -34,6 +34,7 @@ export const useTableSelectionCell_unstable = (
   return {
     ...tableCellState,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...tableCellState.components,
       checkboxIndicator: Checkbox,
       radioIndicator: Radio,
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
@@ -19,6 +19,7 @@ export const useTagPickerOption_unstable = (
   const optionState = useOption_unstable(props, ref);
   const state: TagPickerOptionState = {
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...optionState.components,
       media: 'div',
       secondaryContent: 'span',
diff --git a/packages/react-components/react-utilities/src/compose/assertSlots.ts b/packages/react-components/react-utilities/src/compose/assertSlots.ts
@@ -34,6 +34,7 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
    */
   if (process.env.NODE_ENV !== 'production') {
     const typedState = state as ComponentState<Slots>;
+    // eslint-disable-next-line deprecation/deprecation
     for (const slotName of Object.keys(typedState.components)) {
       const slotElement = typedState[slotName];
       if (slotElement === undefined) {
@@ -44,6 +45,7 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
       // FIXME: this slot will still fail to support child render function scenario
       if (!isSlot(slotElement)) {
         typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {
+          // eslint-disable-next-line deprecation/deprecation
           elementType: typedState.components[slotName] as React.ComponentType<{}>,
         }) as ComponentState<Slots>[keyof ComponentState<Slots>];
         // eslint-disable-next-line no-console
@@ -56,13 +58,15 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
         // This means a slot is being declared by using resolveShorthand on the state hook,
         // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
         const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
+        // eslint-disable-next-line deprecation/deprecation
         if (elementType !== typedState.components[slotName]) {
+          // eslint-disable-next-line deprecation/deprecation
           slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;
           // eslint-disable-next-line no-console
           console.warn(/** #__DE-INDENT__ */ `
             @fluentui/react-utilities [${assertSlots.name}]:
             "state.${slotName}" element type differs from "state.components.${slotName}",
-            ${elementType} !== ${typedState.components[slotName]}.
+            ${elementType} !== ${typedState.components[slotName] /* eslint-disable-line deprecation/deprecation */}.
             Be sure to create slots properly by using "slot.always" or "slot.optional" with the correct elementType.
           `);
         }
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts b/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts
@@ -69,6 +69,7 @@ export function getSlots<R extends SlotPropsRecord>(
   const slots = {} as Slots<R>;
   const slotProps = {} as R;
 
+  // eslint-disable-next-line deprecation/deprecation
   const slotNames: (keyof R)[] = Object.keys(typeState.components);
   for (const slotName of slotNames) {
     const [slot, props] = getSlot(typeState, slotName);
@@ -97,9 +98,13 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
   const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
 
   const slot = (
-    state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
-      ? asProp || state.components?.[slotName] || 'div'
-      : state.components[slotName]
+    state.components?.[slotName] === undefined || // eslint-disable-line deprecation/deprecation
+    // eslint-disable-next-line deprecation/deprecation
+    typeof state.components[slotName] === 'string'
+      ? // eslint-disable-next-line deprecation/deprecation
+        asProp || state.components?.[slotName] || 'div'
+      : // eslint-disable-next-line deprecation/deprecation
+        state.components[slotName]
   ) as React.ElementType<R[K]>;
 
   if (renderFunction || typeof children === 'function') {
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts
@@ -25,6 +25,7 @@ export function getSlotsNext<R extends SlotPropsRecord>(
   const slots = {} as Slots<R>;
   const slotProps = {} as R;
 
+  // eslint-disable-next-line deprecation/deprecation
   const slotNames: (keyof R)[] = Object.keys(typedState.components);
   for (const slotName of slotNames) {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -55,9 +56,13 @@ function getSlotNext<R extends SlotPropsRecord, K extends keyof R>(
   const { as: asProp, ...propsWithoutAs } = props as NonUndefined<typeof props>;
 
   const slot = (
-    state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
-      ? asProp || state.components?.[slotName] || 'div'
-      : state.components[slotName]
+    state.components?.[slotName] === undefined || // eslint-disable-line deprecation/deprecation
+    // eslint-disable-next-line deprecation/deprecation
+    typeof state.components[slotName] === 'string'
+      ? // eslint-disable-next-line deprecation/deprecation
+        asProp || state.components?.[slotName] || 'div'
+      : // eslint-disable-next-line deprecation/deprecation
+        state.components[slotName]
   ) as React.ElementType<R[K]>;
 
   const shouldOmitAsProp = typeof slot === 'string' && asProp;
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/resolveShorthand.ts b/packages/react-components/react-utilities/src/compose/deprecated/resolveShorthand.ts
@@ -30,7 +30,7 @@ export type ResolveShorthandFunction<Props extends SlotPropsDataType = SlotProps
  * @param value - the base shorthand props
  * @param options - options to resolve shorthand props
  *
- * @deprecated use slot.always or slot.optional combined with assertSlots instead
+ * @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
  */
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 export const resolveShorthand: ResolveShorthandFunction<SlotPropsDataType> = (value, options) =>
diff --git a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/useVirtualizerScrollView.ts b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/useVirtualizerScrollView.ts
@@ -68,6 +68,7 @@ export function useVirtualizerScrollView_unstable(props: VirtualizerScrollViewPr
   return {
     ...virtualizerState,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...virtualizerState.components,
       container: 'div',
     },
diff --git a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx
@@ -183,6 +183,7 @@ export function useVirtualizerScrollViewDynamic_unstable(
   return {
     ...virtualizerState,
     components: {
+      // eslint-disable-next-line deprecation/deprecation
       ...virtualizerState.components,
       container: 'div',
     },
