chore: modifications to support motion

Author: bsunderhus

change/@fluentui-react-dialog-237cafe3-9fa1-45dc-b20f-602b7de1fd4c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "\u0002chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-bbf27d86-dd78-4b8e-907f-f1ba2d458f88.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-motion",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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-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-table/library/etc/react-table.api.md

@@ -405,7 +405,7 @@ export interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<
     getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
     selection: TableSelectionState;
     sort: TableSortState<TItem>;
-    tableRef: React_2.Ref<HTMLDivElement>;
+    tableRef: React_2.Ref<HTMLDivElement & HTMLTableElement>;
 }
 
 // @public

packages/react-components/react-table/library/src/hooks/types.ts

@@ -142,7 +142,7 @@ export interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<
    * A React.Ref object to be set as a ref for the table.
    * Used with column resizing.
    */
-  tableRef: React.Ref<HTMLDivElement>;
+  tableRef: React.Ref<HTMLDivElement & HTMLTableElement>;
 }
 
 export interface UseTableSortOptions {

packages/react-components/react-table/library/src/hooks/useTableFeatures.ts

@@ -22,7 +22,7 @@ export const defaultTableState: TableFeaturesState<unknown> = {
   columns: [],
   // eslint-disable-next-line @typescript-eslint/naming-convention
   columnSizing_unstable: defaultColumnSizingState,
-  tableRef: React.createRef<HTMLDivElement>(),
+  tableRef: React.createRef<HTMLDivElement & HTMLTableElement>(),
 };
 
 export function useTableFeatures<TItem>(

packages/react-components/react-utilities/etc/react-utilities.api.md

@@ -277,7 +277,7 @@ export type SlotClassNames<Slots> = {
 };
 
 // @public
-export type SlotComponentType<Props extends SlotPropsDataType> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
+export type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
     children?: ReactNode;
 }> & {
     [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;

packages/react-components/react-utilities/src/compose/types.ts

@@ -263,7 +263,7 @@ export type SlotClassNames<Slots> = {
  * A definition of a slot, as a component, very similar to how a React component is declared,
  * but with some additional metadata that is used to determine how to render the slot.
  */
-export type SlotComponentType<Props extends SlotPropsDataType> = WithoutSlotRenderFunction<Props> &
+export type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> &
   FunctionComponent<{ children?: ReactNode }> & {
     /**
      * @internal