@fluentui/react-motion 9.11.6 → 9.12.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Thu, 22 Jan 2026 17:01:15 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Feb 2026 13:28:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.12.0)
+
+Wed, 25 Feb 2026 13:28:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.6..@fluentui/react-motion_v9.12.0)
+
+### Minor changes
+
+- feat: export MotionRefForwarder and useMotionForwardedRef for shared motion ref forwarding ([PR #35774](https://github.com/microsoft/fluentui/pull/35774) by robertpenner@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+
 ## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.6)
 
-Thu, 22 Jan 2026 17:01:15 GMT 
+Thu, 22 Jan 2026 17:06:32 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.5..@fluentui/react-motion_v9.11.6)
 
 ### Patches

package/dist/index.d.ts

@@ -136,6 +136,17 @@ export declare type MotionImperativeRef = {
  */
 export declare type MotionParam = boolean | number | string;
 
+/**
+ * A component that forwards a ref to its children via a React context.
+ * This is used to pass a motion component's ref through to the actual surface element,
+ * since motion components wrap their children and the ref needs to reach the inner element.
+ *
+ * @internal
+ */
+export declare const MotionRefForwarder: React_2.ForwardRefExoticComponent<{
+    children: React_2.ReactElement;
+} & React_2.RefAttributes<HTMLElement>>;
+
 export declare const motionTokens: {
     curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
     curveAccelerateMid: "cubic-bezier(1,0,1,1)";
@@ -283,6 +294,14 @@ export declare type PresenceMotionSlotProps<MotionParams extends Record<string,
  */
 declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
 
+/**
+ * A hook that reads the ref forwarded by `MotionRefForwarder` from context.
+ * Used in child components to merge the motion ref into the root slot ref.
+ *
+ * @internal
+ */
+export declare function useMotionForwardedRef(): React_2.Ref<HTMLElement> | undefined;
+
 export declare const usePresenceGroupChildContext: () => PresenceGroupChildContextValue | undefined;
 
 export { }

package/lib/components/MotionRefForwarder.js

@@ -0,0 +1,23 @@
+'use client';
+import * as React from 'react';
+const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
+/**
+ * A hook that reads the ref forwarded by `MotionRefForwarder` from context.
+ * Used in child components to merge the motion ref into the root slot ref.
+ *
+ * @internal
+ */ export function useMotionForwardedRef() {
+    return React.useContext(MotionRefForwarderContext);
+}
+/**
+ * A component that forwards a ref to its children via a React context.
+ * This is used to pass a motion component's ref through to the actual surface element,
+ * since motion components wrap their children and the ref needs to reach the inner element.
+ *
+ * @internal
+ */ export const MotionRefForwarder = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
+        value: ref
+    }, props.children);
+});
+MotionRefForwarder.displayName = 'MotionRefForwarder';

package/lib/components/MotionRefForwarder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * A hook that reads the ref forwarded by `MotionRefForwarder` from context.\n * Used in child components to merge the motion ref into the root slot ref.\n *\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n  return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n * This is used to pass a motion component's ref through to the actual surface element,\n * since motion components wrap their children and the ref needs to reach the inner element.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n\nMotionRefForwarder.displayName = 'MotionRefForwarder';\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;;;;CAKC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;;;CAMC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG;AAEHN,mBAAmBO,WAAW,GAAG"}

package/lib/index.js

@@ -4,6 +4,7 @@ export { createMotionComponentVariant } from './factories/createMotionComponentV
 export { createPresenceComponent } from './factories/createPresenceComponent';
 export { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';
 export { PresenceGroup } from './components/PresenceGroup';
+export { MotionRefForwarder, useMotionForwardedRef } from './components/MotionRefForwarder';
 export { presenceMotionSlot } from './slots/presenceMotionSlot';
 export { PresenceGroupChildProvider, usePresenceGroupChildContext } from './contexts/PresenceGroupChildContext';
 export { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n  createMotionComponent,\n  type MotionComponentProps,\n  type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n  createPresenceComponent,\n  type PresenceComponentProps,\n  type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n  PresenceGroupChildProvider,\n  usePresenceGroupChildContext,\n  type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n  MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","presenceMotionSlot","PresenceGroupChildProvider","usePresenceGroupChildContext","MotionBehaviourProvider"],"mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SACEC,qBAAqB,QAGhB,oCAAoC;AAC3C,SAASC,4BAA4B,QAAQ,2CAA2C;AACxF,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAE3D,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n  createMotionComponent,\n  type MotionComponentProps,\n  type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n  createPresenceComponent,\n  type PresenceComponentProps,\n  type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\nexport { MotionRefForwarder, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n  PresenceGroupChildProvider,\n  usePresenceGroupChildContext,\n  type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n  MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","MotionRefForwarder","useMotionForwardedRef","presenceMotionSlot","PresenceGroupChildProvider","usePresenceGroupChildContext","MotionBehaviourProvider"],"mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SACEC,qBAAqB,QAGhB,oCAAoC;AAC3C,SAASC,4BAA4B,QAAQ,2CAA2C;AACxF,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,kBAAkB,EAAEC,qBAAqB,QAAQ,kCAAkC;AAE5F,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}

package/lib-commonjs/components/MotionRefForwarder.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MotionRefForwarder: function() {
+        return MotionRefForwarder;
+    },
+    useMotionForwardedRef: function() {
+        return useMotionForwardedRef;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const MotionRefForwarderContext = /*#__PURE__*/ _react.createContext(undefined);
+function useMotionForwardedRef() {
+    return _react.useContext(MotionRefForwarderContext);
+}
+const MotionRefForwarder = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    return /*#__PURE__*/ _react.createElement(MotionRefForwarderContext.Provider, {
+        value: ref
+    }, props.children);
+});
+MotionRefForwarder.displayName = 'MotionRefForwarder';

package/lib-commonjs/components/MotionRefForwarder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * A hook that reads the ref forwarded by `MotionRefForwarder` from context.\n * Used in child components to merge the motion ref into the root slot ref.\n *\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n  return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n * This is used to pass a motion component's ref through to the actual surface element,\n * since motion components wrap their children and the ref needs to reach the inner element.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n\nMotionRefForwarder.displayName = 'MotionRefForwarder';\n"],"names":["MotionRefForwarder","useMotionForwardedRef","MotionRefForwarderContext","React","createContext","undefined","useContext","forwardRef","props","ref","Provider","value","children","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAuBaA,kBAAkB;eAAlBA;;IAXGC,qBAAqB;eAArBA;;;;iEAVO;AAEvB,MAAMC,0CAA4BC,OAAMC,aAAa,CAAqCC;AAQnF,SAASJ;IACd,OAAOE,OAAMG,UAAU,CAACJ;AAC1B;AASO,MAAMF,mCAAqBG,OAAMI,UAAU,CAAgD,CAACC,OAAOC;IACxG,qBAAO,qBAACP,0BAA0BQ,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE;AAEAZ,mBAAmBa,WAAW,GAAG"}

package/lib-commonjs/index.js

@@ -12,6 +12,9 @@ _export(exports, {
     MotionBehaviourProvider: function() {
         return _MotionBehaviourContext.MotionBehaviourProvider;
     },
+    MotionRefForwarder: function() {
+        return _MotionRefForwarder.MotionRefForwarder;
+    },
     PresenceGroup: function() {
         return _PresenceGroup.PresenceGroup;
     },
@@ -42,6 +45,9 @@ _export(exports, {
     presenceMotionSlot: function() {
         return _presenceMotionSlot.presenceMotionSlot;
     },
+    useMotionForwardedRef: function() {
+        return _MotionRefForwarder.useMotionForwardedRef;
+    },
     usePresenceGroupChildContext: function() {
         return _PresenceGroupChildContext.usePresenceGroupChildContext;
     }
@@ -52,6 +58,7 @@ const _createMotionComponentVariant = require("./factories/createMotionComponent
 const _createPresenceComponent = require("./factories/createPresenceComponent");
 const _createPresenceComponentVariant = require("./factories/createPresenceComponentVariant");
 const _PresenceGroup = require("./components/PresenceGroup");
+const _MotionRefForwarder = require("./components/MotionRefForwarder");
 const _presenceMotionSlot = require("./slots/presenceMotionSlot");
 const _PresenceGroupChildContext = require("./contexts/PresenceGroupChildContext");
 const _MotionBehaviourContext = require("./contexts/MotionBehaviourContext");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n  createMotionComponent,\n  type MotionComponentProps,\n  type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n  createPresenceComponent,\n  type PresenceComponentProps,\n  type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n  PresenceGroupChildProvider,\n  usePresenceGroupChildContext,\n  type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n  MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IAmCSA,uBAAuB;eAAvBA,+CAAuB;;IApBvBC,aAAa;eAAbA,4BAAa;;IAKpBC,0BAA0B;eAA1BA,qDAA0B;;IAjB1BC,qBAAqB;eAArBA,4CAAqB;;IAIdC,4BAA4B;eAA5BA,0DAA4B;;IAEnCC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IAbLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAiBZC,kBAAkB;eAAlBA,sCAAkB;;IAIzBC,4BAA4B;eAA5BA,uDAA4B;;;8BArBkB;uCAMzC;8CACsC;yCAKtC;gDACwC;+BAEjB;oCAEmC;2CAM1D;wCAYiC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n  createMotionComponent,\n  type MotionComponentProps,\n  type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n  createPresenceComponent,\n  type PresenceComponentProps,\n  type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\nexport { MotionRefForwarder, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n  PresenceGroupChildProvider,\n  usePresenceGroupChildContext,\n  type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n  MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","MotionRefForwarder","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot","useMotionForwardedRef","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IAoCSA,uBAAuB;eAAvBA,+CAAuB;;IApBvBC,kBAAkB;eAAlBA,sCAAkB;;IADlBC,aAAa;eAAbA,4BAAa;;IAMpBC,0BAA0B;eAA1BA,qDAA0B;;IAlB1BC,qBAAqB;eAArBA,4CAAqB;;IAIdC,4BAA4B;eAA5BA,0DAA4B;;IAEnCC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IAbLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAkBZC,kBAAkB;eAAlBA,sCAAkB;;IAFEC,qBAAqB;eAArBA,yCAAqB;;IAMhDC,4BAA4B;eAA5BA,uDAA4B;;;8BAtBkB;uCAMzC;8CACsC;yCAKtC;gDACwC;+BAEjB;oCAC4B;oCAEO;2CAM1D;wCAYiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.11.6",
+  "version": "9.12.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,8 +18,8 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.26.1",
-    "@fluentui/react-utilities": "^9.26.1",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.2",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {