fix(Dialog): do not require ref forwarding

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,17 @@
+import * as React from 'react';
+
+const MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);
+
+/**
+ * @internal
+ */
+export function useMotionForwardedRef() {
+  return React.useContext(MotionRefForwarderContext);
+}
+
+/**
+ * @internal
+ */
+export const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {
+  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;
+});

packages/react-components/react-dialog/stories/src/Dialog/DialogDefault.stories.tsx

@@ -10,28 +10,34 @@ import {
   Button,
 } from '@fluentui/react-components';
 
+function Content() {
+  return (
+    <DialogSurface>
+      <DialogBody>
+        <DialogTitle>Dialog title</DialogTitle>
+        <DialogContent>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque est
+          dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure cumque
+          eaque?
+        </DialogContent>
+        <DialogActions>
+          <DialogTrigger disableButtonEnhancement>
+            <Button appearance="secondary">Close</Button>
+          </DialogTrigger>
+          <Button appearance="primary">Do Something</Button>
+        </DialogActions>
+      </DialogBody>
+    </DialogSurface>
+  );
+}
+
 export const Default = () => {
   return (
     <Dialog>
       <DialogTrigger disableButtonEnhancement>
         <Button>Open dialog</Button>
       </DialogTrigger>
-      <DialogSurface>
-        <DialogBody>
-          <DialogTitle>Dialog title</DialogTitle>
-          <DialogContent>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
-            est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
-            cumque eaque?
-          </DialogContent>
-          <DialogActions>
-            <DialogTrigger disableButtonEnhancement>
-              <Button appearance="secondary">Close</Button>
-            </DialogTrigger>
-            <Button appearance="primary">Do Something</Button>
-          </DialogActions>
-        </DialogBody>
-      </DialogSurface>
+      <Content />
     </Dialog>
   );
 };