feat(react-components): add react 18 support

.github/workflows/bundle-size.yml

@@ -45,7 +45,9 @@ jobs:
         run: yarn nx affected -t bundle-size --nxBail
 
       - name: Compare bundle size with base
-        run: npx monosize compare-reports --branch=${{ github.event.pull_request.base.ref }} --output=markdown --quiet > ./monosize-report.md
+        # FIXME: undo this before PR to master
+        run: npx monosize compare-reports --branch=master --output=markdown --quiet > ./monosize-report.md
+        # run: npx monosize compare-reports --branch=${{ github.event.pull_request.base.ref }} --output=markdown --quiet > ./monosize-report.md
 
       - name: Save PR number
         run: echo ${{ github.event.number }} > pr.txt

apps/react-17-tests-v9/src/issues.tsx

@@ -74,6 +74,7 @@ import type {
 
   slot.always(props.menuButton, {
     defaultProps: menuButtonDefaultProps,
+    // @ts-expect-error - Slot type mismatch
     elementType: AppSplitButtonMenuButton,
   });
 

apps/react-18-tests-v9/src/issues.tsx

@@ -72,6 +72,7 @@ import type {
     ...defaultMenuProps,
   };
 
+  // @ts-expect-error - Slot type mismatch
   slot.always(props.menuButton, {
     defaultProps: menuButtonDefaultProps,
     elementType: AppSplitButtonMenuButton,

apps/react-18-tests-v9/tsconfig.react-18.json

@@ -11,7 +11,7 @@
     "isolatedModules": true,
     "importHelpers": true,
     "jsx": "react",
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "preserveConstEnums": true,
     "skipLibCheck": true,
     "typeRoots": ["./node_modules/@types"],

change/@fluentui-react-accordion-2de760f2-7636-41b8-8ab0-e6a55b5ff229.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-accordion",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-aria-d7e86c4f-8c88-472c-857b-eb965ca8c6f5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-497dfa26-d4be-4d88-929e-31341160b876.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-drawer-41054add-b39c-4c7a-87cb-ae3ea4dfd636.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-menu-e78245da-217b-4e5a-8c8e-d31a93877289.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-migration-v0-v9-221b1a2f-4a9f-42e5-bec7-292bb66d0f97.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-migration-v8-v9-f26c0071-2672-4ed3-aa8b-f08d261b31e3.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-search-b4c782b6-95bb-4f7a-9760-392ba37dd275.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-search",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-table-eb6a8a2f-feda-4c22-b9ae-3600c83d6c7a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-table",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tag-picker-d8d7ef7d-3238-445f-bea9-28ff422edace.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-toast-f7778328-a1b7-4a92-abdd-d734a8f34c0b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-toast",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-tree-cbf08b3f-9f37-4cd7-8705-89d94929be2c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-tree",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-5ab41c91-a073-432c-8f39-66f353eb3d81.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: react 18 support for slots api",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-virtualizer-7ea733da-c8b9-4629-abd7-3b8a128a5063.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: adjust types to support react 18",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
-import { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
 import { Collapse } from '@fluentui/react-motion-components-preview';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';
@@ -24,11 +24,7 @@ export const useAccordionPanel_unstable = (
     open,
     components: {
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,
+      collapseMotion: Collapse,
     },
     root: slot.always(
       getIntrinsicElementProps('div', {

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

@@ -5,6 +5,7 @@
 ```ts
 
 import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
@@ -73,7 +74,7 @@ export type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = H
 export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<ARIAButtonElement<AlternateAs>>;
 
 // @public
-export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React_2.PropsWithRef<JSX.IntrinsicElements[Type]> & {
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<React_2.PropsWithRef<JSX.IntrinsicElements[Type]>, 'children'> & {
     disabled?: boolean;
     disabledFocusable?: boolean;
 };

packages/react-components/react-aria/library/src/button/types.ts

@@ -1,4 +1,4 @@
-import type { ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';
+import type { DistributiveOmit, ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 export type ARIAButtonType = 'button' | 'a' | 'div';
@@ -18,8 +18,9 @@ export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a'
 /**
  * Props expected by `useARIAButtonProps` hooks
  */
-export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<
-  JSX.IntrinsicElements[Type]
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<
+  React.PropsWithRef<JSX.IntrinsicElements[Type]>,
+  'children'
 > & {
   disabled?: boolean;
   /**

packages/react-components/react-aria/library/src/button/useARIAButtonShorthand.ts

@@ -14,10 +14,10 @@ import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './typ
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
  * where no attribute addition is required.
  */
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (value, options) => {
+export const useARIAButtonShorthand = ((value, options) => {
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   const shorthand = resolveShorthand(value, options);
   const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);
   return shorthand && shorthandARIAButton;
-};
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+}) as ResolveShorthandFunction<ARIAButtonSlotProps>;

packages/react-components/react-dialog/library/src/components/Dialog/useDialog.ts

@@ -1,6 +1,6 @@
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useModalAttributes } from '@fluentui/react-tabster';
-import { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
 import { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';
 import * as React from 'react';
 
@@ -48,11 +48,7 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
 
   return {
     components: {
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      surfaceMotion: DialogSurfaceMotion as React.FC<PresenceMotionSlotProps>,
+      surfaceMotion: DialogSurfaceMotion,
     },
     inertTrapFocus,
     open,

packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts

@@ -1,5 +1,5 @@
 import { Escape } from '@fluentui/keyboard-keys';
-import { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
 import {
   useEventCallback,
   useMergedRefs,
@@ -97,11 +97,7 @@ export const useDialogSurface_unstable = (
     components: {
       backdrop: 'div',
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      backdropMotion: DialogBackdropMotion as React.FC<PresenceMotionSlotProps>,
+      backdropMotion: DialogBackdropMotion,
     },
     open,
     backdrop,

packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts

@@ -35,7 +35,16 @@ export const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleStat
 
   const styles = useStyles();
 
-  const { heading: root = {}, action, components } = state;
+  const {
+    heading: root = {},
+    action,
+    // 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 @typescript-eslint/no-deprecated
+    components,
+  } = state;
 
   useDialogTitleStyles_unstable({
     components: {

packages/react-components/react-jsx-runtime/src/interop.test.tsx

@@ -171,6 +171,7 @@ describe('resolveShorthand with assertSlots', () => {
       const TestComponent = (props: TestComponentProps) => {
         const higherOrderState = useHigherOrderStateHook(props);
         const state: TestComponentState = {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           components: { ...higherOrderState.components, slot: 'span' },
           slot: {
             ...higherOrderState.slot,

packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx

@@ -37,7 +37,14 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {
   const isSubmenuTrigger = useMenuTriggerContext_unstable();
   const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
-  const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
+  const {
+    as = 'div',
+    disabled = false,
+    hasSubmenu = isSubmenuTrigger,
+    persistOnClick = persistOnClickContext,
+    content: _content, // `content` is a slot and it's type clashes with the HTMLElement `content` attribute
+    ...rest
+  } = props;
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });
@@ -64,7 +71,7 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
         as,
         useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {
           role: 'menuitem',
-          ...props,
+          ...rest,
           disabled: false,
           disabledFocusable: disabled,
           ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,

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 @typescript-eslint/no-deprecated
       ...baseState.components,
       root: 'a',
     },

packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx

@@ -29,6 +29,7 @@ export const useMenuItemSwitch_unstable = (
       },
     }),
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...baseState.components,
       switchIndicator: 'span',
     },

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 @typescript-eslint/no-deprecated
       ...state.components,
       checkmark: 'span',
       submenuIndicator: 'span',

packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md

@@ -157,9 +157,9 @@ export const input: {
 // @public (undocumented)
 export const ItemLayout: React_2.ForwardRefExoticComponent<Omit<ItemLayoutSlots, "root"> & Omit<{
     as?: "div" | undefined;
-} & Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "children"> & {
     children?: React_2.ReactNode | SlotRenderFunction<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
     }>;

packages/react-components/react-migration-v8-v9/library/src/components/Button/ActionButtonShim.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { IButtonProps } from '@fluentui/react';
 
 import { Button } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 
@@ -18,5 +19,5 @@ export const ActionButtonShim: React.ForwardRefExoticComponent<IButtonProps & Re
 
     const shimProps = shimButtonProps(variantProps);
 
-    return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} appearance="transparent" />;
+    return <Button {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} appearance="transparent" />;
   });

packages/react-components/react-migration-v8-v9/library/src/components/Button/ButtonShim.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import type { IBaseButtonProps } from '@fluentui/react';
 
 import { Button } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 import { ToggleButtonShim } from './ToggleButtonShim';
@@ -19,5 +20,5 @@ export const ButtonShim: React.ForwardRefExoticComponent<IBaseButtonProps & Reac
       return <CompoundButtonShim {...props} />;
     }
 
-    return <Button {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+    return <Button {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} />;
   });

packages/react-components/react-migration-v8-v9/library/src/components/Button/CompoundButtonShim.tsx

@@ -4,6 +4,7 @@ import type { IButtonProps } from '@fluentui/react';
 
 import { CompoundButton } from '@fluentui/react-components';
 import type { CompoundButtonProps } from '@fluentui/react-components';
+import type { RefAttributes } from '@fluentui/react-utilities';
 
 import { shimButtonProps } from './shimButtonProps';
 
@@ -23,5 +24,5 @@ export const CompoundButtonShim: React.ForwardRefExoticComponent<
     secondaryContent: props.secondaryText || props.onRenderDescription?.(props),
   };
 
-  return <CompoundButton {...(props as React.RefAttributes<HTMLButtonElement>)} {...shimProps} />;
+  return <CompoundButton {...(props as RefAttributes<HTMLButtonElement>)} {...shimProps} />;
 });