chore: slot api react v17/18 support

change/@fluentui-react-accordion-70e37d4f-804b-494a-9d94-31840668c018.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-accordion",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-aria-7315db23-bdae-4372-8c87-60449326a492.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-aria",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-dialog-ca8b08cc-1dd4-48ef-bca4-dbc92125076d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-dialog",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-drawer-e41fbdeb-e121-4581-b878-3e5b347014d2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-drawer",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-menu-0ff32a7c-9022-4bb0-a248-a264c594dd8d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-menu",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-migration-v0-v9-cd6b824f-ed5f-42f2-a7f1-7dc092156272.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-144e4fd8-32af-4d8f-884f-0fc35f3fc444.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-motion",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-search-85a9961d-3d0a-436a-95a5-ebf0cc3e8078.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-search",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-table-23e6ee8d-8a67-46de-b73b-f91e33ff9620.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-table",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tabs-82a0e2be-25f8-446a-ad2f-0a7eea97d9b3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-tabs",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tag-picker-8e7b7750-4364-47ef-882a-6a1fe583a08f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-toast-b8edc307-0cbe-4c48-a497-983989809ad7.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-toast",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tree-050271d4-8526-4aaa-a0ec-3f009240b858.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-tree",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-158b5bca-5551-4171-a402-6023509a0626.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot api react v17/18 support",
+  "packageName": "@fluentui/react-utilities",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-virtualizer-66488148-0108-4253-a5e2-c4b61e9dc30b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: slot api react v17/18 support",
+  "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,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 @typescript-eslint/no-deprecated
   const { heading: root = {}, action, components } = state;
 
   useDialogTitleStyles_unstable({

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

@@ -5,6 +5,7 @@ import {
   getIntrinsicElementProps,
   slot,
   useIsomorphicLayoutEffect,
+  omit,
 } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
@@ -37,7 +38,13 @@ 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,
+    ...rest
+  } = props;
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });
@@ -60,11 +67,12 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
       subText: 'span',
     },
     root: slot.always(
-      getIntrinsicElementProps(
+      getIntrinsicElementProps<MenuItemProps, 'content'>(
         as,
         useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {
           role: 'menuitem',
-          ...props,
+          // `content` is a slot and it's type clashes with the HTMLElement `content` attribute
+          ...omit(rest, ['content']),
           disabled: false,
           disabledFocusable: disabled,
           ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,
@@ -96,6 +104,7 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
             props.onClick?.(event);
           }),
         }),
+        ['content'],
       ),
       { elementType: '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

@@ -21,7 +21,6 @@ import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities
 import { Slot } from '@fluentui/react-components';
 import { Slot as Slot_2 } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { SlotRenderFunction } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const Attachment: React_2.ForwardRefExoticComponent<AttachmentProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -157,12 +156,10 @@ 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?: 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;
-    }>;
+}, "children"> & {
+    children?: any;
 }, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 // @public (undocumented)

packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx

@@ -30,8 +30,6 @@ export type PresenceMotionSlotProps<MotionParams extends Record<string, MotionPa
    */
   as?: keyof JSX.IntrinsicElements;
 
-  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a
-  //       possible value for children
   children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;
 };
 

packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.stories.tsx

@@ -53,7 +53,7 @@ const FrameRenderer: React.FunctionComponent<FrameRendererProps> = ({ children }
   );
 };
 
-const Example: React.FC = props => {
+const Example: React.FC<React.PropsWithChildren<{}>> = props => {
   const styles = useExampleStyles();
 
   return (

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';