@fluentui/react-motion 9.12.0 → 9.14.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 25 Feb 2026 13:28:18 GMT and should not be manually modified.
+This log was last generated on Mon, 30 Mar 2026 14:35:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.14.0)
+
+Mon, 30 Mar 2026 14:35:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.13.0..@fluentui/react-motion_v9.14.0)
+
+### Minor changes
+
+- feat: add motionSlot() as parallel to presenceMotionSlot() ([PR #35888](https://github.com/microsoft/fluentui/pull/35888) by robertpenner@microsoft.com)
+- feat: add motionSlot() as parallel to presenceMotionSlot() ([PR #35883](https://github.com/microsoft/fluentui/pull/35883) by robertpenner@microsoft.com)
+
+## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.13.0)
+
+Tue, 03 Mar 2026 09:43:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.12.0..@fluentui/react-motion_v9.13.0)
+
+### Minor changes
+
+- fix: make children optional in MotionRefForwarder to resolve type issue ([PR #35763](https://github.com/microsoft/fluentui/pull/35763) by robertpenner@microsoft.com)
+
+### Patches
+
+- fix: add MotionRefForwarderReset to prevent context leaking to descendants ([PR #35807](https://github.com/microsoft/fluentui/pull/35807) by olfedias@microsoft.com)
+
 ## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.12.0)
 
-Wed, 25 Feb 2026 13:28:18 GMT 
+Wed, 25 Feb 2026 13:32:23 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.6..@fluentui/react-motion_v9.12.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -80,7 +80,9 @@ export declare const durations: {
 };
 
 /**
- * @internal A private symbol to store the motion definition on the component for variants.
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
  */
 declare const MOTION_DEFINITION: unique symbol;
 
@@ -144,9 +146,42 @@ export declare type MotionParam = boolean | number | string;
  * @internal
  */
 export declare const MotionRefForwarder: React_2.ForwardRefExoticComponent<{
-    children: React_2.ReactElement;
+    children?: React_2.ReactElement;
 } & React_2.RefAttributes<HTMLElement>>;
 
+/**
+ * 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 declare const MotionRefForwarderReset: React_2.FC<{
+    children: React_2.ReactElement;
+}>;
+
+export declare function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: MotionSlotProps<MotionParams> | null | undefined, options: {
+    elementType: React_2.FC<MotionComponentProps & MotionParams>;
+    defaultProps: MotionSlotRenderProps & MotionParams;
+}): SlotComponentType<MotionSlotRenderProps & MotionParams>;
+
+export declare type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<MotionComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'> & {
+    /**
+     * @deprecated Do not use. Motion Slots do not support intrinsic elements.
+     *
+     * If you want to override the animation, use the children render function instead.
+     */
+    as?: JSXIntrinsicElementKeys;
+    children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & {
+        children: JSXElement;
+    }>;
+};
+
+/**
+ * @internal
+ */
+declare type MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;
+
 export declare const motionTokens: {
     curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
     curveAccelerateMid: "cubic-bezier(1,0,1,1)";
@@ -168,7 +203,9 @@ export declare const motionTokens: {
 };
 
 /**
- * @internal A private symbol to store the motion definition on the component for variants.
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
  */
 declare const PRESENCE_MOTION_DEFINITION: unique symbol;
 

package/lib/components/MotionRefForwarder.js

@@ -21,3 +21,15 @@ const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
     }, props.children);
 });
 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 = (props)=>{
+    return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
+        value: undefined
+    }, props.children);
+};
+MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

package/lib/components/MotionRefForwarder.js.map

@@ -1 +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"}
+{"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\n/**\n * Resets the MotionRefForwarder context to `undefined` for its children.\n * Render this in components that consume `useMotionForwardedRef()` and render\n * arbitrary user content, to prevent the context from leaking to descendants.\n *\n * @internal\n */\nexport const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {\n  return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;\n};\n\nMotionRefForwarderReset.displayName = 'MotionRefForwarderReset';\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children","displayName","MotionRefForwarderReset"],"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,CAAiD,CAACC,OAAOC;IACzG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG;AAEHN,mBAAmBO,WAAW,GAAG;AAEjC;;;;;;CAMC,GACD,OAAO,MAAMC,0BAAsEN,CAAAA;IACjF,qBAAO,oBAACP,0BAA0BS,QAAQ;QAACC,OAAOR;OAAYK,MAAMI,QAAQ;AAC9E,EAAE;AAEFE,wBAAwBD,WAAW,GAAG"}

package/lib/components/PresenceGroupItemProvider.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
 /**
- * @internal
- *
  * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.
  * Not intended for direct use.
+ *
+ * @internal
  */ export const PresenceGroupItemProvider = (props)=>{
     const { appear, childKey, onExit, visible, unmountOnExit } = props;
     const contextValue = React.useMemo(()=>({

package/lib/components/PresenceGroupItemProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * @internal\n *\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}
+{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}

package/lib/factories/createMotionComponent.js

@@ -7,7 +7,9 @@ import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
 import { useChildElement } from '../utils/useChildElement';
 import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
 /**
- * @internal A private symbol to store the motion definition on the component for variants.
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
  */ export const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
 /**
  * Creates a component that will animate the children using the provided motion.

package/lib/factories/createMotionComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["'use client';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type MotionComponentProps = {\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n};\n\nexport type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  MotionComponentProps & MotionParams\n> & {\n  [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n): MotionComponent<MotionParams> {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    'use no memo';\n\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const [child, childRef] = useChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const skipMotions = useMotionBehaviourContext() === 'skip';\n    const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n      skipMotions,\n      params,\n    });\n\n    const animateAtoms = useAnimateAtoms();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      // Heads up!\n      // We store the params in a ref to avoid re-rendering the component when the params change.\n      optionsRef.current = { skipMotions, params };\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = childRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n        onMotionStart();\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n    return child;\n  };\n\n  return Object.assign(Atom, {\n    // Heads up!\n    // Always normalize it to a function to simplify types\n    [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n  });\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","useChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","handleRef","skipMotions","optionsRef","useRef","animateAtoms","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","Object","assign"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E;;CAEC,GACD,OAAO,MAAMC,oBAAoBC,OAAO,qBAAqB;AA2C7D;;;;CAIC,GACD,OAAO,SAASC,sBACdC,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D;QAEA,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChCC,gBAAgBC,kBAAkB,EAClC,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QACf,MAAM,CAACE,OAAOC,SAAS,GAAGnB,gBAAgBQ;QAE1C,MAAMY,YAAYtB,uBAAuBW;QACzC,MAAMY,cAAcpB,gCAAgC;QACpD,MAAMqB,aAAa1B,MAAM2B,MAAM,CAAiD;YAC9EF;YACAJ;QACF;QAEA,MAAMO,eAAe3B;QACrB,MAAM4B,kBAAkB1B;QAExB,MAAMa,gBAAgBlB,iBAAiB;YACrCmB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBhB,iBAAiB;YACtCiB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBpB,iBAAiB;YACtCqB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEApB,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3F2B,WAAWI,OAAO,GAAG;gBAAEL;gBAAaJ;YAAO;QAC7C;QAEAtB,0BAA0B;YACxB,MAAMgC,UAAUR,SAASO,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOvB,UAAU,aAAaA,MAAM;oBAAEsB;oBAAS,GAAGL,WAAWI,OAAO,CAACT,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMiB,SAASL,aAAaG,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBACjFL,UAAUM,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAACpB,gBAAgBI;gBAE7C,IAAIQ,WAAWI,OAAO,CAACL,WAAW,EAAE;oBAClCQ,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAcL;YAAUC;YAAWK;YAAiBf;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOe,OAAOC,MAAM,CAAC5B,MAAM;QACzB,YAAY;QACZ,sDAAsD;QACtD,CAACJ,kBAAkB,EAAE,OAAOG,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AACF"}
+{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["'use client';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * A private symbol to store the motion definition on the component for variants.\n *\n * @internal\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type MotionComponentProps = {\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n};\n\nexport type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  MotionComponentProps & MotionParams\n> & {\n  [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n): MotionComponent<MotionParams> {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    'use no memo';\n\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const [child, childRef] = useChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const skipMotions = useMotionBehaviourContext() === 'skip';\n    const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n      skipMotions,\n      params,\n    });\n\n    const animateAtoms = useAnimateAtoms();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      // Heads up!\n      // We store the params in a ref to avoid re-rendering the component when the params change.\n      optionsRef.current = { skipMotions, params };\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = childRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n        onMotionStart();\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n    return child;\n  };\n\n  return Object.assign(Atom, {\n    // Heads up!\n    // Always normalize it to a function to simplify types\n    [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n  });\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","useChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","handleRef","skipMotions","optionsRef","useRef","animateAtoms","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","Object","assign"],"mappings":"AAAA;AAGA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E;;;;CAIC,GACD,OAAO,MAAMC,oBAAoBC,OAAO,qBAAqB;AA2C7D;;;;CAIC,GACD,OAAO,SAASC,sBACdC,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D;QAEA,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChCC,gBAAgBC,kBAAkB,EAClC,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QACf,MAAM,CAACE,OAAOC,SAAS,GAAGnB,gBAAgBQ;QAE1C,MAAMY,YAAYtB,uBAAuBW;QACzC,MAAMY,cAAcpB,gCAAgC;QACpD,MAAMqB,aAAa1B,MAAM2B,MAAM,CAAiD;YAC9EF;YACAJ;QACF;QAEA,MAAMO,eAAe3B;QACrB,MAAM4B,kBAAkB1B;QAExB,MAAMa,gBAAgBlB,iBAAiB;YACrCmB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBhB,iBAAiB;YACtCiB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBpB,iBAAiB;YACtCqB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEApB,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3F2B,WAAWI,OAAO,GAAG;gBAAEL;gBAAaJ;YAAO;QAC7C;QAEAtB,0BAA0B;YACxB,MAAMgC,UAAUR,SAASO,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOvB,UAAU,aAAaA,MAAM;oBAAEsB;oBAAS,GAAGL,WAAWI,OAAO,CAACT,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMiB,SAASL,aAAaG,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBACjFL,UAAUM,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAACpB,gBAAgBI;gBAE7C,IAAIQ,WAAWI,OAAO,CAACL,WAAW,EAAE;oBAClCQ,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAcL;YAAUC;YAAWK;YAAiBf;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOe,OAAOC,MAAM,CAAC5B,MAAM;QACzB,YAAY;QACZ,sDAAsD;QACtD,CAACJ,kBAAkB,EAAE,OAAOG,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AACF"}

package/lib/factories/createMotionComponentVariant.js

@@ -1,10 +1,10 @@
 import { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';
 /**
- * @internal
- *
  * Create a variant function that wraps a motion function to customize it.
  * The new motion function has the supplied variant params as defaults,
  * but these can still be overridden by runtime params when the new function is called.
+ *
+ * @internal
  */ export function createMotionFnVariant(motionFn, variantParams) {
     const variantFn = (runtimeParams)=>motionFn({
             ...variantParams,

package/lib/factories/createMotionComponentVariant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAyB,0BAA0B;AAEpG;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}
+{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAyB,0BAA0B;AAEpG;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}

package/lib/factories/createPresenceComponent.js

@@ -10,7 +10,9 @@ import { useChildElement } from '../utils/useChildElement';
 import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
 import { createMotionComponent } from './createMotionComponent';
 /**
- * @internal A private symbol to store the motion definition on the component for variants.
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
  */ export const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');
 const INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');
 export function createPresenceComponent(value) {

package/lib/factories/createPresenceComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type {\n  MotionParam,\n  PresenceMotion,\n  MotionImperativeRef,\n  PresenceMotionFn,\n  PresenceDirection,\n  AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n   * emit a finish event but a specific cancel event\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  PresenceComponentProps & MotionParams\n> & {\n  (props: PresenceComponentProps & MotionParams): JSXElement | null;\n  [PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n  In: React.FC<MotionComponentProps & MotionParams>;\n  Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n  return Object.assign(\n    (props: PresenceComponentProps & MotionParams) => {\n      'use no memo';\n\n      const itemContext = React.useContext(PresenceGroupChildContext);\n      const merged = { ...itemContext, ...props };\n      const skipMotions = useMotionBehaviourContext() === 'skip';\n\n      const {\n        appear,\n        children,\n        imperativeRef,\n        onExit,\n        onMotionFinish,\n        onMotionStart,\n        onMotionCancel,\n        visible,\n        unmountOnExit,\n        ..._rest\n      } = merged;\n      const params = _rest as Exclude<typeof merged, PresenceComponentProps | typeof itemContext>;\n\n      const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n      const [child, childRef] = useChildElement(children, mounted);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n        appear,\n        params,\n        skipMotions,\n      });\n\n      const animateAtoms = useAnimateAtoms();\n      const isFirstMount = useFirstMount();\n      const isReducedMotion = useIsReducedMotion();\n\n      const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n        onMotionStart?.(null, { direction });\n      });\n      const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n        onMotionFinish?.(null, { direction });\n\n        if (direction === 'exit' && unmountOnExit) {\n          setMounted(false);\n          onExit?.();\n        }\n      });\n\n      const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n        onMotionCancel?.(null, { direction });\n      });\n\n      useIsomorphicLayoutEffect(() => {\n        // Heads up!\n        // We store the params in a ref to avoid re-rendering the component when the params change.\n        optionsRef.current = { appear, params, skipMotions };\n      });\n\n      useIsomorphicLayoutEffect(\n        () => {\n          const element = childRef.current;\n\n          if (!element) {\n            return;\n          }\n\n          let handle: AnimationHandle | undefined;\n\n          function cleanup() {\n            if (!handle) {\n              return;\n            }\n\n            // Heads up!\n            //\n            // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n            // the next effect.\n            if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n              return;\n            }\n\n            handle.cancel();\n            handleRef.current = undefined;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n            presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n          )[INTERRUPTABLE_MOTION_SYMBOL];\n\n          if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n            handle = handleRef.current;\n\n            if (handle && handle.isRunning()) {\n              handle.reverse();\n\n              return cleanup;\n            }\n          }\n\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n          // Heads up!\n          // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n          const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n          const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n          if (!applyInitialStyles) {\n            handleMotionStart(direction);\n          }\n\n          handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n          if (applyInitialStyles) {\n            // Heads up!\n            // .finish() is used in this case to skip animation and apply animation styles immediately\n            handle.finish();\n\n            return cleanup;\n          }\n\n          handleRef.current = handle;\n          handle.setMotionEndCallbacks(\n            () => handleMotionFinish(direction),\n            () => handleMotionCancel(direction),\n          );\n\n          if (skipAnimationByConfig) {\n            handle.finish();\n          }\n\n          return cleanup;\n        },\n        // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n          animateAtoms,\n          childRef,\n          handleRef,\n          isReducedMotion,\n          handleMotionFinish,\n          handleMotionStart,\n          handleMotionCancel,\n          visible,\n        ],\n      );\n\n      React.useEffect(() => {\n        // Heads up!\n        //\n        // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate\n        // effect to ensure that the component is unmounted.\n\n        if (unmountOnExit && !mounted) {\n          handleRef.current?.dispose();\n        }\n      }, [handleRef, unmountOnExit, mounted]);\n\n      if (mounted) {\n        return child;\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n    {\n      // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n      In: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n        // Otherwise, pass the `enter` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n      ),\n\n      // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n      Out: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n        // Otherwise, pass the `exit` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n      ),\n    },\n  );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","useChildElement","useMotionBehaviourContext","createMotionComponent","PRESENCE_MOTION_DEFINITION","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","child","childRef","handleRef","optionsRef","useRef","animateAtoms","isFirstMount","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","useEffect","dispose","In","args","Out"],"mappings":"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"}
+{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type {\n  MotionParam,\n  PresenceMotion,\n  MotionImperativeRef,\n  PresenceMotionFn,\n  PresenceDirection,\n  AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * A private symbol to store the motion definition on the component for variants.\n *\n * @internal\n */\nexport const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n   * emit a finish event but a specific cancel event\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  PresenceComponentProps & MotionParams\n> & {\n  (props: PresenceComponentProps & MotionParams): JSXElement | null;\n  [PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n  In: React.FC<MotionComponentProps & MotionParams>;\n  Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n  return Object.assign(\n    (props: PresenceComponentProps & MotionParams) => {\n      'use no memo';\n\n      const itemContext = React.useContext(PresenceGroupChildContext);\n      const merged = { ...itemContext, ...props };\n      const skipMotions = useMotionBehaviourContext() === 'skip';\n\n      const {\n        appear,\n        children,\n        imperativeRef,\n        onExit,\n        onMotionFinish,\n        onMotionStart,\n        onMotionCancel,\n        visible,\n        unmountOnExit,\n        ..._rest\n      } = merged;\n      const params = _rest as Exclude<typeof merged, PresenceComponentProps | typeof itemContext>;\n\n      const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n      const [child, childRef] = useChildElement(children, mounted);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n        appear,\n        params,\n        skipMotions,\n      });\n\n      const animateAtoms = useAnimateAtoms();\n      const isFirstMount = useFirstMount();\n      const isReducedMotion = useIsReducedMotion();\n\n      const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n        onMotionStart?.(null, { direction });\n      });\n      const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n        onMotionFinish?.(null, { direction });\n\n        if (direction === 'exit' && unmountOnExit) {\n          setMounted(false);\n          onExit?.();\n        }\n      });\n\n      const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n        onMotionCancel?.(null, { direction });\n      });\n\n      useIsomorphicLayoutEffect(() => {\n        // Heads up!\n        // We store the params in a ref to avoid re-rendering the component when the params change.\n        optionsRef.current = { appear, params, skipMotions };\n      });\n\n      useIsomorphicLayoutEffect(\n        () => {\n          const element = childRef.current;\n\n          if (!element) {\n            return;\n          }\n\n          let handle: AnimationHandle | undefined;\n\n          function cleanup() {\n            if (!handle) {\n              return;\n            }\n\n            // Heads up!\n            //\n            // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n            // the next effect.\n            if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n              return;\n            }\n\n            handle.cancel();\n            handleRef.current = undefined;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n            presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n          )[INTERRUPTABLE_MOTION_SYMBOL];\n\n          if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n            handle = handleRef.current;\n\n            if (handle && handle.isRunning()) {\n              handle.reverse();\n\n              return cleanup;\n            }\n          }\n\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n          // Heads up!\n          // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n          const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n          const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n          if (!applyInitialStyles) {\n            handleMotionStart(direction);\n          }\n\n          handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n          if (applyInitialStyles) {\n            // Heads up!\n            // .finish() is used in this case to skip animation and apply animation styles immediately\n            handle.finish();\n\n            return cleanup;\n          }\n\n          handleRef.current = handle;\n          handle.setMotionEndCallbacks(\n            () => handleMotionFinish(direction),\n            () => handleMotionCancel(direction),\n          );\n\n          if (skipAnimationByConfig) {\n            handle.finish();\n          }\n\n          return cleanup;\n        },\n        // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n          animateAtoms,\n          childRef,\n          handleRef,\n          isReducedMotion,\n          handleMotionFinish,\n          handleMotionStart,\n          handleMotionCancel,\n          visible,\n        ],\n      );\n\n      React.useEffect(() => {\n        // Heads up!\n        //\n        // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate\n        // effect to ensure that the component is unmounted.\n\n        if (unmountOnExit && !mounted) {\n          handleRef.current?.dispose();\n        }\n      }, [handleRef, unmountOnExit, mounted]);\n\n      if (mounted) {\n        return child;\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n    {\n      // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n      In: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n        // Otherwise, pass the `enter` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n      ),\n\n      // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n      Out: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n        // Otherwise, pass the `exit` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n      ),\n    },\n  );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","useChildElement","useMotionBehaviourContext","createMotionComponent","PRESENCE_MOTION_DEFINITION","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","child","childRef","handleRef","optionsRef","useRef","animateAtoms","isFirstMount","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","useEffect","dispose","In","args","Out"],"mappings":"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"}

package/lib/factories/createPresenceComponentVariant.js

@@ -1,10 +1,10 @@
 import { PRESENCE_MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
 /**
- * @internal
- *
  * Create a variant function that wraps a presence function to customize it.
  * The new presence function has the supplied variant params as defaults,
  * but these can still be overridden by runtime params when the new function is called.
+ *
+ * @internal
  */ export function createPresenceFnVariant(presenceFn, variantParams) {
     const variantFn = (runtimeParams)=>presenceFn({
             ...variantParams,

package/lib/factories/createPresenceComponentVariant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[PRESENCE_MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,0BAA0B,EAAEC,uBAAuB,QAA2B,4BAA4B;AAEnH;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,2BAA2B;IACxD,8FAA8F;IAC9F,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[PRESENCE_MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,0BAA0B,EAAEC,uBAAuB,QAA2B,4BAA4B;AAEnH;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,2BAA2B;IACxD,8FAA8F;IAC9F,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}

package/lib/index.js

@@ -4,7 +4,8 @@ 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 { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';
+export { motionSlot } from './slots/motionSlot';
 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';\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"}
+{"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, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { motionSlot, type MotionSlotProps } from './slots/motionSlot';\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","MotionRefForwarderReset","useMotionForwardedRef","motionSlot","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,uBAAuB,EAAEC,qBAAqB,QAAQ,kCAAkC;AAErH,SAASC,UAAU,QAA8B,qBAAqB;AACtE,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}

package/lib/slots/motionSlot.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
+export function motionSlot(motion, options) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof as !== 'undefined') {
+            throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
+        }
+    }
+    if (motion === null) {
+        // Heads up!
+        // Render function is used there to avoid rendering a motion component and render children directly
+        const renderFn = (_, props)=>/*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
+        /**
+     * Casting is required here as SlotComponentType is a function, not an object.
+     * Although SlotComponentType has a function signature, it is still just an object.
+     * This is required to make a slot callable (JSX compatible), this is the exact same approach
+     * that is used on `@types/react` components
+     */ return {
+            [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
+            [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+        };
+    }
+    /**
+   * Casting is required here as SlotComponentType is a function, not an object.
+   * Although SlotComponentType has a function signature, it is still just an object.
+   * This is required to make a slot callable (JSX compatible), this is the exact same approach
+   * that is used on `@types/react` components
+   */ const propsWithMetadata = {
+        ...options.defaultProps,
+        ...rest,
+        [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+    };
+    if (typeof children === 'function') {
+        propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
+    }
+    return propsWithMetadata;
+}

package/lib/slots/motionSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slots/motionSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';\nimport type {\n  JSXElement,\n  JSXIntrinsicElementKeys,\n  SlotComponentType,\n  SlotRenderFunction,\n} from '@fluentui/react-utilities';\n\nimport type { MotionComponentProps } from '../factories/createMotionComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;\n\nexport type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  MotionComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: JSXIntrinsicElementKeys;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: MotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<MotionComponentProps & MotionParams>;\n    defaultProps: MotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<MotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and render children directly\n    const renderFn: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => <>{props.children}</>;\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      MotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","motionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","renderFn","_","props","elementType","propsWithMetadata","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,4BAA4B;AAkClG,OAAO,SAASC,WACdC,MAAwD,EACxDC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,mGAAmG;QACnG,MAAMS,WAAgG,CACpGC,GACAC,sBACG,0CAAGA,MAAMR,QAAQ;QAEtB;;;;;KAKC,GACD,OAAO;YACL,CAACL,4BAA4B,EAAEW;YAC/B,CAACZ,yBAAyB,EAAEI,QAAQW,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGZ,QAAQa,YAAY;QACvB,GAAGV,IAAI;QACP,CAACP,yBAAyB,EAAEI,QAAQW,WAAW;IACjD;IAEA,IAAI,OAAOT,aAAa,YAAY;QAClCU,iBAAiB,CAACf,4BAA4B,GAAGK;IAGnD;IAEA,OAAOU;AACT"}

package/lib-commonjs/components/MotionRefForwarder.js

@@ -13,6 +13,9 @@ _export(exports, {
     MotionRefForwarder: function() {
         return MotionRefForwarder;
     },
+    MotionRefForwarderReset: function() {
+        return MotionRefForwarderReset;
+    },
     useMotionForwardedRef: function() {
         return useMotionForwardedRef;
     }
@@ -29,3 +32,9 @@ const MotionRefForwarder = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
     }, props.children);
 });
 MotionRefForwarder.displayName = 'MotionRefForwarder';
+const MotionRefForwarderReset = (props)=>{
+    return /*#__PURE__*/ _react.createElement(MotionRefForwarderContext.Provider, {
+        value: undefined
+    }, props.children);
+};
+MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

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

@@ -1 +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"}
+{"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\n/**\n * Resets the MotionRefForwarder context to `undefined` for its children.\n * Render this in components that consume `useMotionForwardedRef()` and render\n * arbitrary user content, to prevent the context from leaking to descendants.\n *\n * @internal\n */\nexport const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {\n  return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;\n};\n\nMotionRefForwarderReset.displayName = 'MotionRefForwarderReset';\n"],"names":["MotionRefForwarder","MotionRefForwarderReset","useMotionForwardedRef","MotionRefForwarderContext","React","createContext","undefined","useContext","forwardRef","props","ref","Provider","value","children","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAuBaA,kBAAkB;eAAlBA;;IAaAC,uBAAuB;eAAvBA;;IAxBGC,qBAAqB;eAArBA;;;;iEAVO;AAEvB,MAAMC,0CAA4BC,OAAMC,aAAa,CAAqCC;AAQnF,SAASJ;IACd,OAAOE,OAAMG,UAAU,CAACJ;AAC1B;AASO,MAAMH,mCAAqBI,OAAMI,UAAU,CAAiD,CAACC,OAAOC;IACzG,qBAAO,qBAACP,0BAA0BQ,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE;AAEAb,mBAAmBc,WAAW,GAAG;AAS1B,MAAMb,0BAAsEQ,CAAAA;IACjF,qBAAO,qBAACN,0BAA0BQ,QAAQ;QAACC,OAAON;OAAYG,MAAMI,QAAQ;AAC9E;AAEAZ,wBAAwBa,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * @internal\n *\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","React","useMemo","PresenceGroupChildContext","Provider","value","children"],"mappings":"AAAA;;;;;+BAsBaA;;;eAAAA;;;;iEApBU;2CAGmB;AAiBnC,MAAMA,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeC,OAAMC,OAAO,CAChC,IAAO,CAAA;YACLP;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,qBAACI,oDAAyB,CAACC,QAAQ;QAACC,OAAOL;OAAeN,MAAMY,QAAQ;AACjF"}
+{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","React","useMemo","PresenceGroupChildContext","Provider","value","children"],"mappings":"AAAA;;;;;+BAsBaA;;;eAAAA;;;;iEApBU;2CAGmB;AAiBnC,MAAMA,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeC,OAAMC,OAAO,CAChC,IAAO,CAAA;YACLP;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,qBAACI,oDAAyB,CAACC,QAAQ;QAACC,OAAOL;OAAeN,MAAMY,QAAQ;AACjF"}

package/lib-commonjs/factories/createMotionComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["'use client';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type MotionComponentProps = {\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n};\n\nexport type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  MotionComponentProps & MotionParams\n> & {\n  [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n): MotionComponent<MotionParams> {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    'use no memo';\n\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const [child, childRef] = useChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const skipMotions = useMotionBehaviourContext() === 'skip';\n    const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n      skipMotions,\n      params,\n    });\n\n    const animateAtoms = useAnimateAtoms();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      // Heads up!\n      // We store the params in a ref to avoid re-rendering the component when the params change.\n      optionsRef.current = { skipMotions, params };\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = childRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n        onMotionStart();\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n    return child;\n  };\n\n  return Object.assign(Atom, {\n    // Heads up!\n    // Always normalize it to a function to simplify types\n    [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n  });\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","Symbol","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","useChildElement","handleRef","useMotionImperativeRef","skipMotions","useMotionBehaviourContext","optionsRef","React","useRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","Object","assign"],"mappings":"AAAA;;;;;;;;;;;;IAgBaA,iBAAiB;eAAjBA;;IAgDGC,qBAAqB;eAArBA;;;;gCA7D4C;iEACrC;iCAES;wCACO;oCACJ;iCACH;wCAEU;AAKnC,MAAMD,oBAAoBE,OAAO;AAgDjC,SAASD,sBACdE,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D;QAEA,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChCC,gBAAgBC,kBAAkB,EAClC,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QACf,MAAM,CAACE,OAAOC,SAAS,GAAGC,IAAAA,gCAAe,EAACZ;QAE1C,MAAMa,YAAYC,IAAAA,8CAAsB,EAACb;QACzC,MAAMc,cAAcC,IAAAA,iDAAyB,QAAO;QACpD,MAAMC,aAAaC,OAAMC,MAAM,CAAiD;YAC9EJ;YACAN;QACF;QAEA,MAAMW,eAAeC,IAAAA,gCAAe;QACpC,MAAMC,kBAAkBC,IAAAA,sCAAkB;QAE1C,MAAMnB,gBAAgBoB,IAAAA,gCAAgB,EAAC;YACrCnB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBsB,IAAAA,gCAAgB,EAAC;YACtCrB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBkB,IAAAA,gCAAgB,EAAC;YACtCjB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAkB,IAAAA,yCAAyB,EAAC;YACxB,YAAY;YACZ,2FAA2F;YAC3FR,WAAWS,OAAO,GAAG;gBAAEX;gBAAaN;YAAO;QAC7C;QAEAgB,IAAAA,yCAAyB,EAAC;YACxB,MAAME,UAAUhB,SAASe,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAO/B,UAAU,aAAaA,MAAM;oBAAE8B;oBAAS,GAAGV,WAAWS,OAAO,CAACjB,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMyB,SAAST,aAAaO,SAASC,OAAO;oBAAEN,iBAAiBA;gBAAkB;gBACjFT,UAAUa,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAAC5B,gBAAgBI;gBAE7C,IAAIW,WAAWS,OAAO,CAACX,WAAW,EAAE;oBAClCc,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACZ;YAAcT;YAAUE;YAAWS;YAAiBpB;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOuB,OAAOC,MAAM,CAACpC,MAAM;QACzB,YAAY;QACZ,sDAAsD;QACtD,CAACJ,kBAAkB,EAAE,OAAOG,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AACF"}
+{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["'use client';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * A private symbol to store the motion definition on the component for variants.\n *\n * @internal\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type MotionComponentProps = {\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n};\n\nexport type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  MotionComponentProps & MotionParams\n> & {\n  [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n): MotionComponent<MotionParams> {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    'use no memo';\n\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const [child, childRef] = useChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const skipMotions = useMotionBehaviourContext() === 'skip';\n    const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n      skipMotions,\n      params,\n    });\n\n    const animateAtoms = useAnimateAtoms();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      // Heads up!\n      // We store the params in a ref to avoid re-rendering the component when the params change.\n      optionsRef.current = { skipMotions, params };\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = childRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n        onMotionStart();\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n    return child;\n  };\n\n  return Object.assign(Atom, {\n    // Heads up!\n    // Always normalize it to a function to simplify types\n    [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n  });\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","Symbol","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","useChildElement","handleRef","useMotionImperativeRef","skipMotions","useMotionBehaviourContext","optionsRef","React","useRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","Object","assign"],"mappings":"AAAA;;;;;;;;;;;;IAkBaA,iBAAiB;eAAjBA;;IAgDGC,qBAAqB;eAArBA;;;;gCA/D4C;iEACrC;iCAES;wCACO;oCACJ;iCACH;wCAEU;AAOnC,MAAMD,oBAAoBE,OAAO;AAgDjC,SAASD,sBACdE,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D;QAEA,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChCC,gBAAgBC,kBAAkB,EAClC,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QACf,MAAM,CAACE,OAAOC,SAAS,GAAGC,IAAAA,gCAAe,EAACZ;QAE1C,MAAMa,YAAYC,IAAAA,8CAAsB,EAACb;QACzC,MAAMc,cAAcC,IAAAA,iDAAyB,QAAO;QACpD,MAAMC,aAAaC,OAAMC,MAAM,CAAiD;YAC9EJ;YACAN;QACF;QAEA,MAAMW,eAAeC,IAAAA,gCAAe;QACpC,MAAMC,kBAAkBC,IAAAA,sCAAkB;QAE1C,MAAMnB,gBAAgBoB,IAAAA,gCAAgB,EAAC;YACrCnB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBsB,IAAAA,gCAAgB,EAAC;YACtCrB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBkB,IAAAA,gCAAgB,EAAC;YACtCjB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAkB,IAAAA,yCAAyB,EAAC;YACxB,YAAY;YACZ,2FAA2F;YAC3FR,WAAWS,OAAO,GAAG;gBAAEX;gBAAaN;YAAO;QAC7C;QAEAgB,IAAAA,yCAAyB,EAAC;YACxB,MAAME,UAAUhB,SAASe,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAO/B,UAAU,aAAaA,MAAM;oBAAE8B;oBAAS,GAAGV,WAAWS,OAAO,CAACjB,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMyB,SAAST,aAAaO,SAASC,OAAO;oBAAEN,iBAAiBA;gBAAkB;gBACjFT,UAAUa,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAAC5B,gBAAgBI;gBAE7C,IAAIW,WAAWS,OAAO,CAACX,WAAW,EAAE;oBAClCc,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACZ;YAAcT;YAAUE;YAAWS;YAAiBpB;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOuB,OAAOC,MAAM,CAACpC,MAAM;QACzB,YAAY;QACZ,sDAAsD;QACtD,CAACJ,kBAAkB,EAAE,OAAOG,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AACF"}

package/lib-commonjs/factories/createMotionComponentVariant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["createMotionComponentVariant","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createMotionComponent"],"mappings":";;;;;;;;;;;IA4BgBA,4BAA4B;eAA5BA;;IAlBAC,qBAAqB;eAArBA;;;uCAT0D;AASnE,SAASA,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAYO,SAASJ,6BACdM,SAAwC,EACxCH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,wCAAiB,CAAC;IAC/C,8FAA8F;IAC9F,MAAMJ,YAAYH,sBAAsBM,YAAYJ;IACpD,OAAOM,IAAAA,4CAAqB,EAACL;AAC/B"}
+{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["createMotionComponentVariant","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createMotionComponent"],"mappings":";;;;;;;;;;;IA4BgBA,4BAA4B;eAA5BA;;IAlBAC,qBAAqB;eAArBA;;;uCAT0D;AASnE,SAASA,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAYO,SAASJ,6BACdM,SAAwC,EACxCH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,wCAAiB,CAAC;IAC/C,8FAA8F;IAC9F,MAAMJ,YAAYH,sBAAsBM,YAAYJ;IACpD,OAAOM,IAAAA,4CAAqB,EAACL;AAC/B"}

package/lib-commonjs/factories/createPresenceComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type {\n  MotionParam,\n  PresenceMotion,\n  MotionImperativeRef,\n  PresenceMotionFn,\n  PresenceDirection,\n  AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n   * emit a finish event but a specific cancel event\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  PresenceComponentProps & MotionParams\n> & {\n  (props: PresenceComponentProps & MotionParams): JSXElement | null;\n  [PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n  In: React.FC<MotionComponentProps & MotionParams>;\n  Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n  return Object.assign(\n    (props: PresenceComponentProps & MotionParams) => {\n      'use no memo';\n\n      const itemContext = React.useContext(PresenceGroupChildContext);\n      const merged = { ...itemContext, ...props };\n      const skipMotions = useMotionBehaviourContext() === 'skip';\n\n      const {\n        appear,\n        children,\n        imperativeRef,\n        onExit,\n        onMotionFinish,\n        onMotionStart,\n        onMotionCancel,\n        visible,\n        unmountOnExit,\n        ..._rest\n      } = merged;\n      const params = _rest as Exclude<typeof merged, PresenceComponentProps | typeof itemContext>;\n\n      const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n      const [child, childRef] = useChildElement(children, mounted);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n        appear,\n        params,\n        skipMotions,\n      });\n\n      const animateAtoms = useAnimateAtoms();\n      const isFirstMount = useFirstMount();\n      const isReducedMotion = useIsReducedMotion();\n\n      const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n        onMotionStart?.(null, { direction });\n      });\n      const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n        onMotionFinish?.(null, { direction });\n\n        if (direction === 'exit' && unmountOnExit) {\n          setMounted(false);\n          onExit?.();\n        }\n      });\n\n      const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n        onMotionCancel?.(null, { direction });\n      });\n\n      useIsomorphicLayoutEffect(() => {\n        // Heads up!\n        // We store the params in a ref to avoid re-rendering the component when the params change.\n        optionsRef.current = { appear, params, skipMotions };\n      });\n\n      useIsomorphicLayoutEffect(\n        () => {\n          const element = childRef.current;\n\n          if (!element) {\n            return;\n          }\n\n          let handle: AnimationHandle | undefined;\n\n          function cleanup() {\n            if (!handle) {\n              return;\n            }\n\n            // Heads up!\n            //\n            // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n            // the next effect.\n            if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n              return;\n            }\n\n            handle.cancel();\n            handleRef.current = undefined;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n            presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n          )[INTERRUPTABLE_MOTION_SYMBOL];\n\n          if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n            handle = handleRef.current;\n\n            if (handle && handle.isRunning()) {\n              handle.reverse();\n\n              return cleanup;\n            }\n          }\n\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n          // Heads up!\n          // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n          const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n          const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n          if (!applyInitialStyles) {\n            handleMotionStart(direction);\n          }\n\n          handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n          if (applyInitialStyles) {\n            // Heads up!\n            // .finish() is used in this case to skip animation and apply animation styles immediately\n            handle.finish();\n\n            return cleanup;\n          }\n\n          handleRef.current = handle;\n          handle.setMotionEndCallbacks(\n            () => handleMotionFinish(direction),\n            () => handleMotionCancel(direction),\n          );\n\n          if (skipAnimationByConfig) {\n            handle.finish();\n          }\n\n          return cleanup;\n        },\n        // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n          animateAtoms,\n          childRef,\n          handleRef,\n          isReducedMotion,\n          handleMotionFinish,\n          handleMotionStart,\n          handleMotionCancel,\n          visible,\n        ],\n      );\n\n      React.useEffect(() => {\n        // Heads up!\n        //\n        // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate\n        // effect to ensure that the component is unmounted.\n\n        if (unmountOnExit && !mounted) {\n          handleRef.current?.dispose();\n        }\n      }, [handleRef, unmountOnExit, mounted]);\n\n      if (mounted) {\n        return child;\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n    {\n      // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n      In: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n        // Otherwise, pass the `enter` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n      ),\n\n      // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n      Out: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n        // Otherwise, pass the `exit` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n      ),\n    },\n  );\n}\n"],"names":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","childRef","useChildElement","handleRef","useMotionImperativeRef","optionsRef","useRef","animateAtoms","useAnimateAtoms","isFirstMount","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","useEffect","dispose","In","createMotionComponent","args","Out"],"mappings":"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"}
+{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["'use client';\n\nimport { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type {\n  MotionParam,\n  PresenceMotion,\n  MotionImperativeRef,\n  PresenceMotionFn,\n  PresenceDirection,\n  AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * A private symbol to store the motion definition on the component for variants.\n *\n * @internal\n */\nexport const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n   * emit a finish event but a specific cancel event\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  PresenceComponentProps & MotionParams\n> & {\n  (props: PresenceComponentProps & MotionParams): JSXElement | null;\n  [PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n  In: React.FC<MotionComponentProps & MotionParams>;\n  Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n  return Object.assign(\n    (props: PresenceComponentProps & MotionParams) => {\n      'use no memo';\n\n      const itemContext = React.useContext(PresenceGroupChildContext);\n      const merged = { ...itemContext, ...props };\n      const skipMotions = useMotionBehaviourContext() === 'skip';\n\n      const {\n        appear,\n        children,\n        imperativeRef,\n        onExit,\n        onMotionFinish,\n        onMotionStart,\n        onMotionCancel,\n        visible,\n        unmountOnExit,\n        ..._rest\n      } = merged;\n      const params = _rest as Exclude<typeof merged, PresenceComponentProps | typeof itemContext>;\n\n      const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n      const [child, childRef] = useChildElement(children, mounted);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n        appear,\n        params,\n        skipMotions,\n      });\n\n      const animateAtoms = useAnimateAtoms();\n      const isFirstMount = useFirstMount();\n      const isReducedMotion = useIsReducedMotion();\n\n      const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n        onMotionStart?.(null, { direction });\n      });\n      const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n        onMotionFinish?.(null, { direction });\n\n        if (direction === 'exit' && unmountOnExit) {\n          setMounted(false);\n          onExit?.();\n        }\n      });\n\n      const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n        onMotionCancel?.(null, { direction });\n      });\n\n      useIsomorphicLayoutEffect(() => {\n        // Heads up!\n        // We store the params in a ref to avoid re-rendering the component when the params change.\n        optionsRef.current = { appear, params, skipMotions };\n      });\n\n      useIsomorphicLayoutEffect(\n        () => {\n          const element = childRef.current;\n\n          if (!element) {\n            return;\n          }\n\n          let handle: AnimationHandle | undefined;\n\n          function cleanup() {\n            if (!handle) {\n              return;\n            }\n\n            // Heads up!\n            //\n            // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n            // the next effect.\n            if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n              return;\n            }\n\n            handle.cancel();\n            handleRef.current = undefined;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n            presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n          )[INTERRUPTABLE_MOTION_SYMBOL];\n\n          if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n            handle = handleRef.current;\n\n            if (handle && handle.isRunning()) {\n              handle.reverse();\n\n              return cleanup;\n            }\n          }\n\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n          // Heads up!\n          // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n          const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n          const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n          if (!applyInitialStyles) {\n            handleMotionStart(direction);\n          }\n\n          handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n          if (applyInitialStyles) {\n            // Heads up!\n            // .finish() is used in this case to skip animation and apply animation styles immediately\n            handle.finish();\n\n            return cleanup;\n          }\n\n          handleRef.current = handle;\n          handle.setMotionEndCallbacks(\n            () => handleMotionFinish(direction),\n            () => handleMotionCancel(direction),\n          );\n\n          if (skipAnimationByConfig) {\n            handle.finish();\n          }\n\n          return cleanup;\n        },\n        // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n          animateAtoms,\n          childRef,\n          handleRef,\n          isReducedMotion,\n          handleMotionFinish,\n          handleMotionStart,\n          handleMotionCancel,\n          visible,\n        ],\n      );\n\n      React.useEffect(() => {\n        // Heads up!\n        //\n        // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate\n        // effect to ensure that the component is unmounted.\n\n        if (unmountOnExit && !mounted) {\n          handleRef.current?.dispose();\n        }\n      }, [handleRef, unmountOnExit, mounted]);\n\n      if (mounted) {\n        return child;\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n    {\n      // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n      In: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n        // Otherwise, pass the `enter` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n      ),\n\n      // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n      Out: createMotionComponent(\n        // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n        // Otherwise, pass the `exit` motion object directly.\n        typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n      ),\n    },\n  );\n}\n"],"names":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","childRef","useChildElement","handleRef","useMotionImperativeRef","optionsRef","useRef","animateAtoms","useAnimateAtoms","isFirstMount","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","useEffect","dispose","In","createMotionComponent","args","Out"],"mappings":"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"}

package/lib-commonjs/factories/createPresenceComponentVariant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[PRESENCE_MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","PRESENCE_MOTION_DEFINITION","createPresenceComponent"],"mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCATuE;AAShF,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,mDAA0B,CAAC;IACxD,8FAA8F;IAC9F,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[PRESENCE_MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","PRESENCE_MOTION_DEFINITION","createPresenceComponent"],"mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCATuE;AAShF,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,mDAA0B,CAAC;IACxD,8FAA8F;IAC9F,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}

package/lib-commonjs/index.js

@@ -15,6 +15,9 @@ _export(exports, {
     MotionRefForwarder: function() {
         return _MotionRefForwarder.MotionRefForwarder;
     },
+    MotionRefForwarderReset: function() {
+        return _MotionRefForwarder.MotionRefForwarderReset;
+    },
     PresenceGroup: function() {
         return _PresenceGroup.PresenceGroup;
     },
@@ -39,6 +42,9 @@ _export(exports, {
     durations: function() {
         return _motionTokens.durations;
     },
+    motionSlot: function() {
+        return _motionSlot.motionSlot;
+    },
     motionTokens: function() {
         return _motionTokens.motionTokens;
     },
@@ -59,6 +65,7 @@ const _createPresenceComponent = require("./factories/createPresenceComponent");
 const _createPresenceComponentVariant = require("./factories/createPresenceComponentVariant");
 const _PresenceGroup = require("./components/PresenceGroup");
 const _MotionRefForwarder = require("./components/MotionRefForwarder");
+const _motionSlot = require("./slots/motionSlot");
 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';\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"}
+{"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, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { motionSlot, type MotionSlotProps } from './slots/motionSlot';\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","MotionRefForwarderReset","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionSlot","motionTokens","presenceMotionSlot","useMotionForwardedRef","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IAqCSA,uBAAuB;eAAvBA,+CAAuB;;IArBvBC,kBAAkB;eAAlBA,sCAAkB;;IAAEC,uBAAuB;eAAvBA,2CAAuB;;IAD3CC,aAAa;eAAbA,4BAAa;;IAOpBC,0BAA0B;eAA1BA,qDAA0B;;IAnB1BC,qBAAqB;eAArBA,4CAAqB;;IAIdC,4BAA4B;eAA5BA,0DAA4B;;IAEnCC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IAbLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAkBvBC,UAAU;eAAVA,sBAAU;;IAlBVC,YAAY;eAAZA,0BAAY;;IAmBZC,kBAAkB;eAAlBA,sCAAkB;;IAH2BC,qBAAqB;eAArBA,yCAAqB;;IAOzEC,4BAA4B;eAA5BA,uDAA4B;;;8BAvBkB;uCAMzC;8CACsC;yCAKtC;gDACwC;+BAEjB;oCACqD;4BAElC;oCACgB;2CAM1D;wCAYiC"}

package/lib-commonjs/slots/motionSlot.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "motionSlot", {
+    enumerable: true,
+    get: function() {
+        return motionSlot;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+function motionSlot(motion, options) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof as !== 'undefined') {
+            throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
+        }
+    }
+    if (motion === null) {
+        // Heads up!
+        // Render function is used there to avoid rendering a motion component and render children directly
+        const renderFn = (_, props)=>/*#__PURE__*/ _react.createElement(_react.Fragment, null, props.children);
+        /**
+     * Casting is required here as SlotComponentType is a function, not an object.
+     * Although SlotComponentType has a function signature, it is still just an object.
+     * This is required to make a slot callable (JSX compatible), this is the exact same approach
+     * that is used on `@types/react` components
+     */ return {
+            [_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
+            [_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+        };
+    }
+    /**
+   * Casting is required here as SlotComponentType is a function, not an object.
+   * Although SlotComponentType has a function signature, it is still just an object.
+   * This is required to make a slot callable (JSX compatible), this is the exact same approach
+   * that is used on `@types/react` components
+   */ const propsWithMetadata = {
+        ...options.defaultProps,
+        ...rest,
+        [_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+    };
+    if (typeof children === 'function') {
+        propsWithMetadata[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL] = children;
+    }
+    return propsWithMetadata;
+}

package/lib-commonjs/slots/motionSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slots/motionSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';\nimport type {\n  JSXElement,\n  JSXIntrinsicElementKeys,\n  SlotComponentType,\n  SlotRenderFunction,\n} from '@fluentui/react-utilities';\n\nimport type { MotionComponentProps } from '../factories/createMotionComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;\n\nexport type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  MotionComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: JSXIntrinsicElementKeys;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: MotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<MotionComponentProps & MotionParams>;\n    defaultProps: MotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<MotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and render children directly\n    const renderFn: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => <>{props.children}</>;\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      MotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["motionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata","defaultProps"],"mappings":";;;;+BAmCgBA;;;eAAAA;;;;iEAnCO;gCAC+C;AAkC/D,SAASA,WACdC,MAAwD,EACxDC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,mGAAmG;QACnG,MAAMS,WAAgG,CACpGC,GACAC,sBACG,4CAAGA,MAAMR,QAAQ;QAEtB;;;;;KAKC,GACD,OAAO;YACL,CAACS,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEZ,QAAQa,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGd,QAAQe,YAAY;QACvB,GAAGZ,IAAI;QACP,CAACS,wCAAwB,CAAC,EAAEZ,QAAQa,WAAW;IACjD;IAEA,IAAI,OAAOX,aAAa,YAAY;QAClCY,iBAAiB,CAACH,2CAA2B,CAAC,GAAGT;IAGnD;IAEA,OAAOY;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.12.0",
+  "version": "9.14.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",