feat(react-components): add react 18 support

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

@@ -48,7 +48,6 @@ import type {
   type AppSplitButtonSlots = {
     root: NonNullable<Slot<'div'>>;
     menuButton: NonNullable<Slot<AppMenuButtonSlot>>;
-    // @ts-expect-error - Slot type mismatch
     menu: NonNullable<Slot<ContextualMenuSlotType>>;
   };
   type ValidAppSplitButtonSlots = {

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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "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": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "minor"
+}

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": "dmytrokirpa@microsoft.com",
+  "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-motion/library/src/slots/presenceMotionSlot.test.tsx

@@ -21,11 +21,7 @@ const TestMotion = jest.fn(
 const TestComponent: React.FC<TestComponentProps> = props => {
   const state: TestComponentState = {
     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`
-      presenceMotion: TestMotion as React.FC<PresenceMotionSlotProps>,
+      presenceMotion: TestMotion,
     },
     presenceMotion: presenceMotionSlot(props.presenceMotion, {
       elementType: TestMotion,

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 @typescript-eslint/no-deprecated
       ...inputState.components,
       dismiss: 'span',
     },

packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.tsx

@@ -10,14 +10,16 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
  * DataGridBody component
  */
 export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
-  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridBody_unstable(props, ref);
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef<HTMLElement, DataGridBodyProps>(
+  (props, ref) => {
+    const state = useDataGridBody_unstable(props, ref);
 
-  useDataGridBodyStyles_unstable(state);
+    useDataGridBodyStyles_unstable(state);
 
-  useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
+    useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
 
-  return renderDataGridBody_unstable(state);
-}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
+    return renderDataGridBody_unstable(state);
+  },
+) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';

packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.tsx

@@ -10,14 +10,16 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
  * DataGridRow component
  */
 export const DataGridRow: ForwardRefComponent<DataGridRowProps> &
-  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridRow_unstable(props, ref);
+  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef<HTMLElement, DataGridRowProps>(
+  (props, ref) => {
+    const state = useDataGridRow_unstable(props, ref);
 
-  useDataGridRowStyles_unstable(state);
+    useDataGridRowStyles_unstable(state);
 
-  useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);
+    useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);
 
-  return renderDataGridRow_unstable(state);
-}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
+    return renderDataGridRow_unstable(state);
+  },
+) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 DataGridRow.displayName = 'DataGridRow';

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