fix(react-motion): add MotionRefForwarderReset to prevent context leaking

change/@fluentui-react-dialog-a46d2003-8da8-4831-bc23-7d14c95e2291.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: reset MotionRefForwarder context in renderDialogSurface to prevent child components from corrupting Dialog's motion ref",
+  "packageName": "@fluentui/react-dialog",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-motion-7148f909-0b8d-446f-a9dc-2b71d6b33fd0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: add MotionRefForwarderReset to prevent context leaking to descendants",
+  "packageName": "@fluentui/react-motion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-dialog/library/src/components/DialogSurface/renderDialogSurface.tsx

@@ -1,6 +1,7 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource @fluentui/react-jsx-runtime */
 
+import { MotionRefForwarderReset } from '@fluentui/react-motion';
 import { Portal } from '@fluentui/react-portal';
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
@@ -27,9 +28,11 @@ export const renderDialogSurface_unstable = (
             <state.backdrop />
           </state.backdropMotion>
         )}
-      <DialogSurfaceProvider value={contextValues.dialogSurface}>
-        <state.root />
-      </DialogSurfaceProvider>
+      <MotionRefForwarderReset>
+        <DialogSurfaceProvider value={contextValues.dialogSurface}>
+          <state.root />
+        </DialogSurfaceProvider>
+      </MotionRefForwarderReset>
     </Portal>
   );
 };

packages/react-components/react-motion/library/etc/react-motion.api.md

@@ -88,6 +88,11 @@ export const MotionRefForwarder: React_2.ForwardRefExoticComponent<{
     children: React_2.ReactElement;
 } & React_2.RefAttributes<HTMLElement>>;
 
+// @internal
+export const MotionRefForwarderReset: React_2.FC<{
+    children: React_2.ReactElement;
+}>;
+
 // @public (undocumented)
 export const motionTokens: {
     curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";

packages/react-components/react-motion/library/src/components/MotionRefForwarder.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
 
-import { MotionRefForwarder, useMotionForwardedRef } from './MotionRefForwarder';
+import { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './MotionRefForwarder';
 
 const TestConsumer: React.FC = () => {
   const ref = useMotionForwardedRef();
@@ -49,3 +49,57 @@ describe('MotionRefForwarder', () => {
     expect(callbackRef).toHaveBeenCalledWith(element);
   });
 });
+
+describe('MotionRefForwarderReset', () => {
+  it('should reset context to undefined for its children', () => {
+    let capturedRef: React.Ref<HTMLElement> | undefined = 'not-set' as unknown as React.Ref<HTMLElement>;
+
+    const RefCapture: React.FC = () => {
+      capturedRef = useMotionForwardedRef();
+      return null;
+    };
+
+    const ref = React.createRef<HTMLElement>();
+
+    render(
+      <MotionRefForwarder ref={ref}>
+        <MotionRefForwarderReset>
+          <RefCapture />
+        </MotionRefForwarderReset>
+      </MotionRefForwarder>,
+    );
+
+    expect(capturedRef).toBeUndefined();
+  });
+
+  it('should not affect consumers outside the reset boundary', () => {
+    let innerRef: React.Ref<HTMLElement> | undefined;
+    let outerRef: React.Ref<HTMLElement> | undefined;
+
+    const InnerCapture: React.FC = () => {
+      innerRef = useMotionForwardedRef();
+      return null;
+    };
+
+    const OuterCapture: React.FC = () => {
+      outerRef = useMotionForwardedRef();
+      return <div data-testid="outer" ref={outerRef as React.Ref<HTMLDivElement>} />;
+    };
+
+    const ref = React.createRef<HTMLElement>();
+
+    render(
+      <MotionRefForwarder ref={ref}>
+        <>
+          <OuterCapture />
+          <MotionRefForwarderReset>
+            <InnerCapture />
+          </MotionRefForwarderReset>
+        </>
+      </MotionRefForwarder>,
+    );
+
+    expect(innerRef).toBeUndefined();
+    expect(outerRef).toBe(ref);
+  });
+});

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

@@ -26,3 +26,16 @@ export const MotionRefForwarder = React.forwardRef<HTMLElement, { children: Reac
 });
 
 MotionRefForwarder.displayName = 'MotionRefForwarder';
+
+/**
+ * Resets the MotionRefForwarder context to `undefined` for its children.
+ * Render this in components that consume `useMotionForwardedRef()` and render
+ * arbitrary user content, to prevent the context from leaking to descendants.
+ *
+ * @internal
+ */
+export const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {
+  return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;
+};
+
+MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

packages/react-components/react-motion/library/src/index.ts

@@ -14,7 +14,7 @@ export {
 export { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';
 
 export { PresenceGroup } from './components/PresenceGroup';
-export { MotionRefForwarder, useMotionForwardedRef } from './components/MotionRefForwarder';
+export { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';
 
 export { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';