fix(Dialog): do not require ref forwarding (microsoft#32095)

change/@fluentui-react-dialog-d29eacce-56a3-4174-8f78-b577f330c2d0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: do not require ref forwarding",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/library/src/components/Dialog/renderDialog.tsx

@@ -4,6 +4,7 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import * as React from 'react';
 
+import { MotionRefForwarder } from '../MotionRefForwarder';
 import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
 import type { DialogState, DialogContextValues, DialogSlots } from './Dialog.types';
 
@@ -19,9 +20,11 @@ export const renderDialog_unstable = (state: DialogState, contextValues: DialogC
         {state.trigger}
         {state.content && (
           <state.surfaceMotion>
-            {/* Casting here as content should be equivalent to <DialogSurface/> */}
-            {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}
-            {state.content as React.ReactElement}
+            <MotionRefForwarder>
+              {/* Casting here as content should be equivalent to <DialogSurface/> */}
+              {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}
+              {state.content as React.ReactElement}
+            </MotionRefForwarder>
           </state.surfaceMotion>
         )}
       </DialogSurfaceProvider>

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

@@ -13,6 +13,7 @@ import * as React from 'react';
 import { useDialogContext_unstable } from '../../contexts';
 import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
 import { DialogBackdropMotion } from '../DialogBackdropMotion';
+import { useMotionForwardedRef } from '../MotionRefForwarder';
 import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
 
 /**
@@ -28,6 +29,8 @@ export const useDialogSurface_unstable = (
   props: DialogSurfaceProps,
   ref: React.Ref<DialogSurfaceElement>,
 ): DialogSurfaceState => {
+  const contextRef = useMotionForwardedRef();
+
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
   const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);
 
@@ -116,7 +119,7 @@ export const useDialogSurface_unstable = (
         // FIXME:
         // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
         // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-        ref: useMergedRefs(ref, dialogRef) as React.Ref<HTMLDivElement>,
+        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,
       }),
       { elementType: 'div' },
     ),

packages/react-components/react-dialog/library/src/components/MotionRefForwarder.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);
+
+/**
+ * @internal
+ */
+export function useMotionForwardedRef() {
+  return React.useContext(MotionRefForwarderContext);
+}
+
+/**
+ * A component that forwards a ref to its children via a React context.
+ *
+ * @internal
+ */
+export const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {
+  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;
+});