@fluentui/react-motion 9.14.0 → 9.16.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Mon, 30 Mar 2026 14:35:48 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.16.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.16.0)
+
+Tue, 26 May 2026 09:33:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.15.0..@fluentui/react-motion_v9.16.0)
+
+### Minor changes
+
+- feat(react-motion): add replayKey prop to replay motion without remounting ([PR #36108](https://github.com/microsoft/fluentui/pull/36108) by robertpenner@microsoft.com)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.15.0)
+
+Thu, 23 Apr 2026 14:21:02 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.14.0..@fluentui/react-motion_v9.15.0)
+
+### Minor changes
+
+- feat: expose motion params as direct props on motion slot types ([PR #36011](https://github.com/microsoft/fluentui/pull/36011) by robertpenner@microsoft.com)
+- fix(react-motion): apply MotionComponent type to presence definition ([PR #35952](https://github.com/microsoft/fluentui/pull/35952) by robertpenner@microsoft.com)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.14.0)
 
-Mon, 30 Mar 2026 14:35:48 GMT 
+Mon, 30 Mar 2026 14:37:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.13.0..@fluentui/react-motion_v9.14.0)
 
 ### Minor changes

package/README.md

@@ -1,5 +1,63 @@
 # @fluentui/react-motion
 
-**React Motions components for [Fluent UI React](https://react.fluentui.dev/)**
+**React Motion components for [Fluent UI React](https://react.fluentui.dev/)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+A lightweight, performant animation library for React that brings Fluent UI experiences to life using the Web Animations API (WAAPI).
+
+## Features
+
+- ⚡ **Performance** — Animations run on the compositor thread for smooth 60fps motion
+- 📦 **Lightweight** — ~3KB gzipped, leverages native browser capabilities
+- 🎯 **Simple by default** — Common UI animations with minimal code
+- 🔧 **Powerful on demand** — Full customization with keyframes, timing, and callbacks
+
+## Installation
+
+```bash
+npm install @fluentui/react-motion
+# or
+yarn add @fluentui/react-motion
+```
+
+## Quick Start
+
+```tsx
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motion';
+
+// Create a custom fade presence component
+const Fade = createPresenceComponent({
+  enter: {
+    keyframes: [{ opacity: 0 }, { opacity: 1 }],
+    duration: motionTokens.durationNormal,
+  },
+  exit: {
+    keyframes: [{ opacity: 1 }, { opacity: 0 }],
+    duration: motionTokens.durationFast,
+  },
+});
+
+// Use it in your app
+function App() {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <Fade visible={visible}>
+      <div>Animated content</div>
+    </Fade>
+  );
+}
+```
+
+## Documentation
+
+📚 **[Full documentation](https://react.fluentui.dev/?path=/docs/motion-introduction--docs)**
+
+- [Introduction](https://react.fluentui.dev/?path=/docs/motion-introduction--docs) — Overview and key concepts
+- [createPresenceComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createpresencecomponent--docs) — Two-way enter/exit animations
+- [createMotionComponent](https://react.fluentui.dev/?path=/docs/motion-apis-createmotioncomponent--docs) — One-way animations
+- [Motion Tokens](https://react.fluentui.dev/?path=/docs/motion-tokens--docs) — Duration and easing values
+- [Migration Guide](https://react.fluentui.dev/?path=/docs/motion-migration--docs) — Coming from Framer Motion, GSAP, etc.
+
+## Pre-built Components
+
+For ready-to-use motion components (Fade, Scale, Slide, Collapse, etc.), see **[@fluentui/react-motion-components-preview](https://www.npmjs.com/package/@fluentui/react-motion-components-preview)**.

package/dist/index.d.ts

@@ -123,6 +123,30 @@ export declare type MotionComponentProps = {
      * so the callback is triggered with "null".
      */
     onMotionStart?: (ev: null) => void;
+    /**
+     * When this value changes, the animation replays from the start on the same DOM element,
+     * cancelling any in-progress animation, without remounting the component or its children.
+     *
+     * **Why not just use a React `key`?** Changing a React `key` forces a full unmount and
+     * remount of the subtree: DOM nodes are destroyed and recreated, focus is lost, and any
+     * child state is reset. `replayKey` avoids all of that — only the animation effect reruns
+     * while the DOM and component state remain intact.
+     *
+     * Use this when you want to retrigger a motion in response to a state change (e.g. a user
+     * action or a data update) while preserving DOM continuity. It is the declarative equivalent
+     * of calling `imperativeRef.current.play()` but driven by a prop rather than a ref call.
+     *
+     * @example
+     * ```tsx
+     * // Replay a Fade.In each time the user clicks "Refresh"
+     * const [replayKey, setReplayKey] = React.useState(0);
+     * <Fade.In replayKey={replayKey}>
+     *   <div>Content</div>
+     * </Fade.In>
+     * <button onClick={() => setReplayKey(k => k + 1)}>Refresh</button>
+     * ```
+     */
+    replayKey?: string | number;
 };
 
 export declare type MotionImperativeRef = {
@@ -165,7 +189,7 @@ export declare function motionSlot<MotionParams extends Record<string, MotionPar
     defaultProps: MotionSlotRenderProps & MotionParams;
 }): SlotComponentType<MotionSlotRenderProps & MotionParams>;
 
-export declare type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<MotionComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'> & {
+export declare type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<MotionComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'> & Partial<MotionParams> & {
     /**
      * @deprecated Do not use. Motion Slots do not support intrinsic elements.
      *
@@ -212,8 +236,8 @@ declare const PRESENCE_MOTION_DEFINITION: unique symbol;
 export declare type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React_2.FC<PresenceComponentProps & MotionParams> & {
     (props: PresenceComponentProps & MotionParams): JSXElement | null;
     [PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
-    In: React_2.FC<MotionComponentProps & MotionParams>;
-    Out: React_2.FC<MotionComponentProps & MotionParams>;
+    In: MotionComponent<MotionParams>;
+    Out: MotionComponent<MotionParams>;
 };
 
 export declare type PresenceComponentProps = {
@@ -314,7 +338,7 @@ export declare function presenceMotionSlot<MotionParams extends Record<string, M
     defaultProps: PresenceMotionSlotRenderProps & MotionParams;
 }): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;
 
-export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
+export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & Partial<MotionParams> & {
     /**
      * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
      *

package/lib/factories/createMotionComponent.js

@@ -18,10 +18,11 @@ import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
  */ export function createMotionComponent(value) {
     const Atom = (props)=>{
         'use no memo';
-        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, replayKey, ..._rest } = props;
         const params = _rest;
         const [child, childRef] = useChildElement(children);
         const handleRef = useMotionImperativeRef(imperativeRef);
+        const isInitialRender = React.useRef(true);
         const skipMotions = useMotionBehaviourContext() === 'skip';
         const optionsRef = React.useRef({
             skipMotions,
@@ -38,6 +39,21 @@ import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
         const onMotionCancel = useEventCallback(()=>{
             onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
         });
+        // Stable callback (all deps are refs or useEventCallback) that activates a handle for a new playback cycle.
+        //
+        // TODO: consider moving the cancel+play+rewire sequence into a handle.replay() method on AnimationHandle,
+        // keeping pure animation sequencing on the handle and React callbacks here in the component.
+        const activateAnimationHandle = React.useCallback((handle)=>{
+            onMotionStart();
+            handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
+            if (optionsRef.current.skipMotions) {
+                handle.finish();
+            }
+        }, [
+            onMotionStart,
+            onMotionFinish,
+            onMotionCancel
+        ]);
         useIsomorphicLayoutEffect(()=>{
             // Heads up!
             // We store the params in a ref to avoid re-rendering the component when the params change.
@@ -53,15 +69,11 @@ import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
                     element,
                     ...optionsRef.current.params
                 }) : value;
-                onMotionStart();
                 const handle = animateAtoms(element, atoms, {
                     isReducedMotion: isReducedMotion()
                 });
                 handleRef.current = handle;
-                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
-                if (optionsRef.current.skipMotions) {
-                    handle.finish();
-                }
+                activateAnimationHandle(handle);
                 return ()=>{
                     handle.cancel();
                 };
@@ -71,10 +83,30 @@ import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
             childRef,
             handleRef,
             isReducedMotion,
-            onMotionFinish,
-            onMotionStart,
-            onMotionCancel
+            activateAnimationHandle
+        ]);
+        // Skips initial mount; on replayKey changes, reuses existing Animation objects via cancel+play
+        // rather than recreating them, preserving DOM continuity.
+        useIsomorphicLayoutEffect(()=>{
+            if (isInitialRender.current) {
+                return;
+            }
+            const handle = handleRef.current;
+            if (handle) {
+                handle.cancel();
+                handle.play();
+                activateAnimationHandle(handle);
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- replayKey is intentionally the only trigger; other deps are stable refs/callbacks
+        }, [
+            replayKey
         ]);
+        useIsomorphicLayoutEffect(()=>{
+            isInitialRender.current = false;
+            return ()=>{
+                isInitialRender.current = true;
+            };
+        }, []);
         return child;
     };
     return Object.assign(Atom, {

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 * 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"}
+{"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, AnimationHandle } 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  /**\n   * When this value changes, the animation replays from the start on the same DOM element,\n   * cancelling any in-progress animation, without remounting the component or its children.\n   *\n   * **Why not just use a React `key`?** Changing a React `key` forces a full unmount and\n   * remount of the subtree: DOM nodes are destroyed and recreated, focus is lost, and any\n   * child state is reset. `replayKey` avoids all of that — only the animation effect reruns\n   * while the DOM and component state remain intact.\n   *\n   * Use this when you want to retrigger a motion in response to a state change (e.g. a user\n   * action or a data update) while preserving DOM continuity. It is the declarative equivalent\n   * of calling `imperativeRef.current.play()` but driven by a prop rather than a ref call.\n   *\n   * @example\n   * ```tsx\n   * // Replay a Fade.In each time the user clicks \"Refresh\"\n   * const [replayKey, setReplayKey] = React.useState(0);\n   * <Fade.In replayKey={replayKey}>\n   *   <div>Content</div>\n   * </Fade.In>\n   * <button onClick={() => setReplayKey(k => k + 1)}>Refresh</button>\n   * ```\n   */\n  replayKey?: string | number;\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      replayKey,\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 isInitialRender = React.useRef(true);\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    // Stable callback (all deps are refs or useEventCallback) that activates a handle for a new playback cycle.\n    //\n    // TODO: consider moving the cancel+play+rewire sequence into a handle.replay() method on AnimationHandle,\n    // keeping pure animation sequencing on the handle and React callbacks here in the component.\n    const activateAnimationHandle = React.useCallback(\n      (handle: AnimationHandle) => {\n        onMotionStart();\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n      },\n      [onMotionStart, onMotionFinish, onMotionCancel],\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        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        activateAnimationHandle(handle);\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, activateAnimationHandle]);\n\n    // Skips initial mount; on replayKey changes, reuses existing Animation objects via cancel+play\n    // rather than recreating them, preserving DOM continuity.\n    useIsomorphicLayoutEffect(() => {\n      if (isInitialRender.current) {\n        return;\n      }\n\n      const handle = handleRef.current;\n      if (handle) {\n        handle.cancel();\n        handle.play();\n        activateAnimationHandle(handle);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- replayKey is intentionally the only trigger; other deps are stable refs/callbacks\n    }, [replayKey]);\n\n    useIsomorphicLayoutEffect(() => {\n      isInitialRender.current = false;\n\n      return () => {\n        isInitialRender.current = true;\n      };\n    }, []);\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","replayKey","_rest","params","child","childRef","handleRef","isInitialRender","useRef","skipMotions","optionsRef","animateAtoms","isReducedMotion","activateAnimationHandle","useCallback","handle","setMotionEndCallbacks","current","finish","element","atoms","cancel","play","Object","assign"],"mappings":"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"}

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 * 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"}
+{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport type { MotionComponent } from './createMotionComponent';\nimport { MOTION_DEFINITION, createMotionComponent } 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":"AAEA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAQ,0BAA0B;AAEnF;;;;;;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.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 * 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":"AAAA;AAEA,SAASA,gBAAgB,EAAEC,aAAa,EAAEC,yBAAyB,QAAQ,4BAA4B;AAEvG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAClF,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAS3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAC/E,SAASC,qBAAqB,QAA8B,0BAA0B;AAEtF;;;;CAIC,GACD,OAAO,MAAMC,6BAA6BC,OAAO,8BAA8B;AA+D/E,MAAMC,8BAA8BD,OAAOE,GAAG,CAAC;AAE/C,OAAO,SAASC,wBACdC,KAAsD;IAEtD,OAAOC,OAAOC,MAAM,CAClB,CAACC;QACC;QAEA,MAAMC,cAAclB,MAAMmB,UAAU,CAAClB;QACrC,MAAMmB,SAAS;YAAE,GAAGF,WAAW;YAAE,GAAGD,KAAK;QAAC;QAC1C,MAAMI,cAAcd,gCAAgC;QAEpD,MAAM,EACJe,MAAM,EACNC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdC,OAAO,EACPC,aAAa,EACb,GAAGC,OACJ,GAAGX;QACJ,MAAMY,SAASD;QAEf,MAAM,CAACE,SAASC,WAAW,GAAG9B,gBAAgByB,SAASC;QACvD,MAAM,CAACK,OAAOC,SAAS,GAAG9B,gBAAgBiB,UAAUU;QAEpD,MAAMI,YAAYlC,uBAAuBqB;QACzC,MAAMc,aAAatC,MAAMuC,MAAM,CAAmE;YAChGjB;YACAU;YACAX;QACF;QAEA,MAAMmB,eAAetC;QACrB,MAAMuC,eAAe3C;QACrB,MAAM4C,kBAAkBrC;QAExB,MAAMsC,oBAAoB9C,iBAAiB,CAAC+C;YAC1CjB,0BAAAA,oCAAAA,cAAgB,MAAM;gBAAEiB;YAAU;QACpC;QACA,MAAMC,qBAAqBhD,iBAAiB,CAAC+C;YAC3ClB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEkB;YAAU;YAEnC,IAAIA,cAAc,UAAUd,eAAe;gBACzCI,WAAW;gBACXT,mBAAAA,6BAAAA;YACF;QACF;QAEA,MAAMqB,qBAAqBjD,iBAAiB,CAAC+C;YAC3ChB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEgB;YAAU;QACrC;QAEA7C,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3FuC,WAAWS,OAAO,GAAG;gBAAEzB;gBAAQU;gBAAQX;YAAY;QACrD;QAEAtB,0BACE;YACE,MAAMiD,UAAUZ,SAASW,OAAO;YAEhC,IAAI,CAACC,SAAS;gBACZ;YACF;YAEA,IAAIC;YAEJ,SAASC;gBACP,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEA,YAAY;gBACZ,EAAE;gBACF,uGAAuG;gBACvG,mBAAmB;gBACnB,IAAIE,wCAAwCF,OAAOG,SAAS,IAAI;oBAC9D;gBACF;gBAEAH,OAAOI,MAAM;gBACbhB,UAAUU,OAAO,GAAGO;YACtB;YAEA,MAAMC,iBACJ,OAAOzC,UAAU,aAAaA,MAAM;gBAAEkC;gBAAS,GAAGV,WAAWS,OAAO,CAACf,MAAM;YAAC,KAAMlB;YACpF,MAAMqC,uCAAuC,AAC3CI,cACD,CAAC5C,4BAA4B;YAE9B,IAAIwC,sCAAsC;gBACxCF,SAASZ,UAAUU,OAAO;gBAE1B,IAAIE,UAAUA,OAAOG,SAAS,IAAI;oBAChCH,OAAOO,OAAO;oBAEd,OAAON;gBACT;YACF;YAEA,MAAMO,QAAQ5B,UAAU0B,eAAeG,KAAK,GAAGH,eAAeI,IAAI;YAClE,MAAMf,YAA+Bf,UAAU,UAAU;YAEzD,YAAY;YACZ,kJAAkJ;YAClJ,MAAM+B,qBAAqB,CAACtB,WAAWS,OAAO,CAACzB,MAAM,IAAImB;YACzD,MAAMoB,wBAAwBvB,WAAWS,OAAO,CAAC1B,WAAW;YAE5D,IAAI,CAACuC,oBAAoB;gBACvBjB,kBAAkBC;YACpB;YAEAK,SAAST,aAAaQ,SAASS,OAAO;gBAAEf,iBAAiBA;YAAkB;YAE3E,IAAIkB,oBAAoB;gBACtB,YAAY;gBACZ,0FAA0F;gBAC1FX,OAAOa,MAAM;gBAEb,OAAOZ;YACT;YAEAb,UAAUU,OAAO,GAAGE;YACpBA,OAAOc,qBAAqB,CAC1B,IAAMlB,mBAAmBD,YACzB,IAAME,mBAAmBF;YAG3B,IAAIiB,uBAAuB;gBACzBZ,OAAOa,MAAM;YACf;YAEA,OAAOZ;QACT,GACA,kGAAkG;QAClG,uDAAuD;QACvD;YACEV;YACAJ;YACAC;YACAK;YACAG;YACAF;YACAG;YACAjB;SACD;QAGH7B,MAAMgE,SAAS,CAAC;YACd,YAAY;YACZ,EAAE;YACF,2GAA2G;YAC3G,oDAAoD;YAEpD,IAAIlC,iBAAiB,CAACG,SAAS;oBAC7BI;iBAAAA,qBAAAA,UAAUU,OAAO,cAAjBV,yCAAAA,mBAAmB4B,OAAO;YAC5B;QACF,GAAG;YAAC5B;YAAWP;YAAeG;SAAQ;QAEtC,IAAIA,SAAS;YACX,OAAOE;QACT;QAEA,OAAO;IACT,GACA;QACE,YAAY;QACZ,sDAAsD;QACtD,CAAC1B,2BAA2B,EAAE,OAAOK,UAAU,aAAaA,QAAQ,IAAMA;IAC5E,GACA;QACE,8EAA8E;QAC9EoD,IAAI1D,sBACF,wFAAwF;QACxF,sDAAsD;QACtD,OAAOM,UAAU,aAAa,CAAC,GAAGqD,OAAmCrD,SAASqD,MAAMT,KAAK,GAAG5C,MAAM4C,KAAK;QAGzG,8EAA8E;QAC9EU,KAAK5D,sBACH,uFAAuF;QACvF,qDAAqD;QACrD,OAAOM,UAAU,aAAa,CAAC,GAAGqD,OAAmCrD,SAASqD,MAAMR,IAAI,GAAG7C,MAAM6C,IAAI;IAEzG;AAEJ"}
+{"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 type { MotionComponent } from './createMotionComponent';\nimport { createMotionComponent } 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: MotionComponent<MotionParams>;\n  Out: MotionComponent<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.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 * 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"}
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport type { PresenceComponent } from './createPresenceComponent';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent } 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":"AAEA,SAASA,0BAA0B,EAAEC,uBAAuB,QAAQ,4BAA4B;AAEhG;;;;;;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/hooks/useMountedState.js

@@ -20,6 +20,7 @@ import * as React from 'react';
             mountedRef.current = visible;
         }
     });
+    // eslint-disable-next-line react-hooks/refs
     return [
         visible || mountedRef.current,
         setMounted

package/lib/hooks/useMountedState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}
+{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  // eslint-disable-next-line react-hooks/refs\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,4CAA4C;IAC5C,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}

package/lib/slots/motionSlot.js.map

@@ -1 +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"}
+{"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  Partial<MotionParams> & {\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;AAmClG,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/slots/presenceMotionSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slots/presenceMotionSlot.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 { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\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. Presence 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<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & 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 handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => (isUnmounted ? null : <>{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<PresenceMotionSlotRenderProps & 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<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,4BAA4B;AAqClG,OAAO,SAASC,mBACdC,MAAgE,EAChEC,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,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAAwG,CAC5GC,GACAC,QACIN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAE5C;;;;;KAKC,GACD,OAAO;YACL,CAACL,4BAA4B,EAAEe;YAC/B,CAAChB,yBAAyB,EAAEI,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACP,yBAAyB,EAAEI,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACnB,4BAA4B,GAAGK;IAGnD;IAEA,OAAOc;AACT"}
+{"version":3,"sources":["../src/slots/presenceMotionSlot.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 { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> &\n  Partial<MotionParams> & {\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. Presence 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<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n  };\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & 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 handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => (isUnmounted ? null : <>{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<PresenceMotionSlotRenderProps & 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<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,4BAA4B;AAsClG,OAAO,SAASC,mBACdC,MAAgE,EAChEC,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,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAAwG,CAC5GC,GACAC,QACIN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAE5C;;;;;KAKC,GACD,OAAO;YACL,CAACL,4BAA4B,EAAEe;YAC/B,CAAChB,yBAAyB,EAAEI,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACP,yBAAyB,EAAEI,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACnB,4BAA4B,GAAGK;IAGnD;IAEA,OAAOc;AACT"}

package/lib-commonjs/factories/createMotionComponent.js

@@ -29,10 +29,11 @@ const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
 function createMotionComponent(value) {
     const Atom = (props)=>{
         'use no memo';
-        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, replayKey, ..._rest } = props;
         const params = _rest;
         const [child, childRef] = (0, _useChildElement.useChildElement)(children);
         const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
+        const isInitialRender = _react.useRef(true);
         const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
         const optionsRef = _react.useRef({
             skipMotions,
@@ -49,6 +50,21 @@ function createMotionComponent(value) {
         const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
             onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
         });
+        // Stable callback (all deps are refs or useEventCallback) that activates a handle for a new playback cycle.
+        //
+        // TODO: consider moving the cancel+play+rewire sequence into a handle.replay() method on AnimationHandle,
+        // keeping pure animation sequencing on the handle and React callbacks here in the component.
+        const activateAnimationHandle = _react.useCallback((handle)=>{
+            onMotionStart();
+            handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
+            if (optionsRef.current.skipMotions) {
+                handle.finish();
+            }
+        }, [
+            onMotionStart,
+            onMotionFinish,
+            onMotionCancel
+        ]);
         (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
             // Heads up!
             // We store the params in a ref to avoid re-rendering the component when the params change.
@@ -64,15 +80,11 @@ function createMotionComponent(value) {
                     element,
                     ...optionsRef.current.params
                 }) : value;
-                onMotionStart();
                 const handle = animateAtoms(element, atoms, {
                     isReducedMotion: isReducedMotion()
                 });
                 handleRef.current = handle;
-                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
-                if (optionsRef.current.skipMotions) {
-                    handle.finish();
-                }
+                activateAnimationHandle(handle);
                 return ()=>{
                     handle.cancel();
                 };
@@ -82,10 +94,30 @@ function createMotionComponent(value) {
             childRef,
             handleRef,
             isReducedMotion,
-            onMotionFinish,
-            onMotionStart,
-            onMotionCancel
+            activateAnimationHandle
+        ]);
+        // Skips initial mount; on replayKey changes, reuses existing Animation objects via cancel+play
+        // rather than recreating them, preserving DOM continuity.
+        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+            if (isInitialRender.current) {
+                return;
+            }
+            const handle = handleRef.current;
+            if (handle) {
+                handle.cancel();
+                handle.play();
+                activateAnimationHandle(handle);
+            }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- replayKey is intentionally the only trigger; other deps are stable refs/callbacks
+        }, [
+            replayKey
         ]);
+        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+            isInitialRender.current = false;
+            return ()=>{
+                isInitialRender.current = true;
+            };
+        }, []);
         return child;
     };
     return Object.assign(Atom, {

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 * 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"}
+{"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, AnimationHandle } 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  /**\n   * When this value changes, the animation replays from the start on the same DOM element,\n   * cancelling any in-progress animation, without remounting the component or its children.\n   *\n   * **Why not just use a React `key`?** Changing a React `key` forces a full unmount and\n   * remount of the subtree: DOM nodes are destroyed and recreated, focus is lost, and any\n   * child state is reset. `replayKey` avoids all of that — only the animation effect reruns\n   * while the DOM and component state remain intact.\n   *\n   * Use this when you want to retrigger a motion in response to a state change (e.g. a user\n   * action or a data update) while preserving DOM continuity. It is the declarative equivalent\n   * of calling `imperativeRef.current.play()` but driven by a prop rather than a ref call.\n   *\n   * @example\n   * ```tsx\n   * // Replay a Fade.In each time the user clicks \"Refresh\"\n   * const [replayKey, setReplayKey] = React.useState(0);\n   * <Fade.In replayKey={replayKey}>\n   *   <div>Content</div>\n   * </Fade.In>\n   * <button onClick={() => setReplayKey(k => k + 1)}>Refresh</button>\n   * ```\n   */\n  replayKey?: string | number;\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      replayKey,\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 isInitialRender = React.useRef(true);\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    // Stable callback (all deps are refs or useEventCallback) that activates a handle for a new playback cycle.\n    //\n    // TODO: consider moving the cancel+play+rewire sequence into a handle.replay() method on AnimationHandle,\n    // keeping pure animation sequencing on the handle and React callbacks here in the component.\n    const activateAnimationHandle = React.useCallback(\n      (handle: AnimationHandle) => {\n        onMotionStart();\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n      },\n      [onMotionStart, onMotionFinish, onMotionCancel],\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        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        activateAnimationHandle(handle);\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, activateAnimationHandle]);\n\n    // Skips initial mount; on replayKey changes, reuses existing Animation objects via cancel+play\n    // rather than recreating them, preserving DOM continuity.\n    useIsomorphicLayoutEffect(() => {\n      if (isInitialRender.current) {\n        return;\n      }\n\n      const handle = handleRef.current;\n      if (handle) {\n        handle.cancel();\n        handle.play();\n        activateAnimationHandle(handle);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- replayKey is intentionally the only trigger; other deps are stable refs/callbacks\n    }, [replayKey]);\n\n    useIsomorphicLayoutEffect(() => {\n      isInitialRender.current = false;\n\n      return () => {\n        isInitialRender.current = true;\n      };\n    }, []);\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","replayKey","_rest","params","child","childRef","useChildElement","handleRef","useMotionImperativeRef","isInitialRender","React","useRef","skipMotions","useMotionBehaviourContext","optionsRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","activateAnimationHandle","useCallback","handle","setMotionEndCallbacks","current","finish","useIsomorphicLayoutEffect","element","atoms","cancel","play","Object","assign"],"mappings":"AAAA;;;;;;;;;;;;IAkBaA,iBAAiB;eAAjBA;;IAyEGC,qBAAqB;eAArBA;;;;gCAxF4C;iEACrC;iCAES;wCACO;oCACJ;iCACH;wCAEU;AAOnC,MAAMD,oBAAoBE,OAAO;AAyEjC,SAASD,sBACdE,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D;QAEA,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChCC,gBAAgBC,kBAAkB,EAClCC,SAAS,EACT,GAAGC,OACJ,GAAGV;QACJ,MAAMW,SAASD;QACf,MAAM,CAACE,OAAOC,SAAS,GAAGC,IAAAA,gCAAe,EAACb;QAE1C,MAAMc,YAAYC,IAAAA,8CAAsB,EAACd;QACzC,MAAMe,kBAAkBC,OAAMC,MAAM,CAAC;QACrC,MAAMC,cAAcC,IAAAA,iDAAyB,QAAO;QACpD,MAAMC,aAAaJ,OAAMC,MAAM,CAAiD;YAC9EC;YACAT;QACF;QAEA,MAAMY,eAAeC,IAAAA,gCAAe;QACpC,MAAMC,kBAAkBC,IAAAA,sCAAkB;QAE1C,MAAMrB,gBAAgBsB,IAAAA,gCAAgB,EAAC;YACrCrB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBwB,IAAAA,gCAAgB,EAAC;YACtCvB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBoB,IAAAA,gCAAgB,EAAC;YACtCnB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,4GAA4G;QAC5G,EAAE;QACF,0GAA0G;QAC1G,6FAA6F;QAC7F,MAAMoB,0BAA0BV,OAAMW,WAAW,CAC/C,CAACC;YACCzB;YACAyB,OAAOC,qBAAqB,CAAC5B,gBAAgBI;YAC7C,IAAIe,WAAWU,OAAO,CAACZ,WAAW,EAAE;gBAClCU,OAAOG,MAAM;YACf;QACF,GACA;YAAC5B;YAAeF;YAAgBI;SAAe;QAGjD2B,IAAAA,yCAAyB,EAAC;YACxB,YAAY;YACZ,2FAA2F;YAC3FZ,WAAWU,OAAO,GAAG;gBAAEZ;gBAAaT;YAAO;QAC7C;QAEAuB,IAAAA,yCAAyB,EAAC;YACxB,MAAMC,UAAUtB,SAASmB,OAAO;YAEhC,IAAIG,SAAS;gBACX,MAAMC,QAAQ,OAAOtC,UAAU,aAAaA,MAAM;oBAAEqC;oBAAS,GAAGb,WAAWU,OAAO,CAACrB,MAAM;gBAAC,KAAKb;gBAE/F,MAAMgC,SAASP,aAAaY,SAASC,OAAO;oBAAEX,iBAAiBA;gBAAkB;gBACjFV,UAAUiB,OAAO,GAAGF;gBACpBF,wBAAwBE;gBAExB,OAAO;oBACLA,OAAOO,MAAM;gBACf;YACF;QACF,GAAG;YAACd;YAAcV;YAAUE;YAAWU;YAAiBG;SAAwB;QAEhF,+FAA+F;QAC/F,0DAA0D;QAC1DM,IAAAA,yCAAyB,EAAC;YACxB,IAAIjB,gBAAgBe,OAAO,EAAE;gBAC3B;YACF;YAEA,MAAMF,SAASf,UAAUiB,OAAO;YAChC,IAAIF,QAAQ;gBACVA,OAAOO,MAAM;gBACbP,OAAOQ,IAAI;gBACXV,wBAAwBE;YAC1B;QACA,4IAA4I;QAC9I,GAAG;YAACrB;SAAU;QAEdyB,IAAAA,yCAAyB,EAAC;YACxBjB,gBAAgBe,OAAO,GAAG;YAE1B,OAAO;gBACLf,gBAAgBe,OAAO,GAAG;YAC5B;QACF,GAAG,EAAE;QAEL,OAAOpB;IACT;IAEA,OAAO2B,OAAOC,MAAM,CAACzC,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 * 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"}
+{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport type { MotionComponent } from './createMotionComponent';\nimport { MOTION_DEFINITION, createMotionComponent } 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":";;;;;;;;;;;IA6BgBA,4BAA4B;eAA5BA;;IAlBAC,qBAAqB;eAArBA;;;uCATyC;AASlD,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 * 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":"AAAA;;;;;;;;;;;;IA4BaA,0BAA0B;eAA1BA;;IAiEGC,uBAAuB;eAAvBA;;;;gCA3F2D;iEAEpD;2CAEmB;iCACV;wCACO;iCACP;oCACG;iCACH;wCASU;uCACkB;AAOrD,MAAMD,6BAA6BE,OAAO;AA+DjD,MAAMC,8BAA8BD,OAAOE,GAAG,CAAC;AAExC,SAASH,wBACdI,KAAsD;IAEtD,OAAOC,OAAOC,MAAM,CAClB,CAACC;QACC;QAEA,MAAMC,cAAcC,OAAMC,UAAU,CAACC,oDAAyB;QAC9D,MAAMC,SAAS;YAAE,GAAGJ,WAAW;YAAE,GAAGD,KAAK;QAAC;QAC1C,MAAMM,cAAcC,IAAAA,iDAAyB,QAAO;QAEpD,MAAM,EACJC,MAAM,EACNC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdC,OAAO,EACPC,aAAa,EACb,GAAGC,OACJ,GAAGZ;QACJ,MAAMa,SAASD;QAEf,MAAM,CAACE,SAASC,WAAW,GAAGC,IAAAA,gCAAe,EAACN,SAASC;QACvD,MAAM,CAACM,OAAOC,SAAS,GAAGC,IAAAA,gCAAe,EAACf,UAAUU;QAEpD,MAAMM,YAAYC,IAAAA,8CAAsB,EAAChB;QACzC,MAAMiB,aAAazB,OAAM0B,MAAM,CAAmE;YAChGpB;YACAU;YACAZ;QACF;QAEA,MAAMuB,eAAeC,IAAAA,gCAAe;QACpC,MAAMC,eAAeC,IAAAA,6BAAa;QAClC,MAAMC,kBAAkBC,IAAAA,sCAAkB;QAE1C,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAAC,CAACC;YAC1CxB,0BAAAA,oCAAAA,cAAgB,MAAM;gBAAEwB;YAAU;QACpC;QACA,MAAMC,qBAAqBF,IAAAA,gCAAgB,EAAC,CAACC;YAC3CzB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEyB;YAAU;YAEnC,IAAIA,cAAc,UAAUrB,eAAe;gBACzCI,WAAW;gBACXT,mBAAAA,6BAAAA;YACF;QACF;QAEA,MAAM4B,qBAAqBH,IAAAA,gCAAgB,EAAC,CAACC;YAC3CvB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEuB;YAAU;QACrC;QAEAG,IAAAA,yCAAyB,EAAC;YACxB,YAAY;YACZ,2FAA2F;YAC3Fb,WAAWc,OAAO,GAAG;gBAAEjC;gBAAQU;gBAAQZ;YAAY;QACrD;QAEAkC,IAAAA,yCAAyB,EACvB;YACE,MAAME,UAAUnB,SAASkB,OAAO;YAEhC,IAAI,CAACC,SAAS;gBACZ;YACF;YAEA,IAAIC;YAEJ,SAASC;gBACP,IAAI,CAACD,QAAQ;oBACX;gBACF;gBAEA,YAAY;gBACZ,EAAE;gBACF,uGAAuG;gBACvG,mBAAmB;gBACnB,IAAIE,wCAAwCF,OAAOG,SAAS,IAAI;oBAC9D;gBACF;gBAEAH,OAAOI,MAAM;gBACbtB,UAAUgB,OAAO,GAAGO;YACtB;YAEA,MAAMC,iBACJ,OAAOpD,UAAU,aAAaA,MAAM;gBAAE6C;gBAAS,GAAGf,WAAWc,OAAO,CAACvB,MAAM;YAAC,KAAMrB;YACpF,MAAMgD,uCAAuC,AAC3CI,cACD,CAACtD,4BAA4B;YAE9B,IAAIkD,sCAAsC;gBACxCF,SAASlB,UAAUgB,OAAO;gBAE1B,IAAIE,UAAUA,OAAOG,SAAS,IAAI;oBAChCH,OAAOO,OAAO;oBAEd,OAAON;gBACT;YACF;YAEA,MAAMO,QAAQpC,UAAUkC,eAAeG,KAAK,GAAGH,eAAeI,IAAI;YAClE,MAAMhB,YAA+BtB,UAAU,UAAU;YAEzD,YAAY;YACZ,kJAAkJ;YAClJ,MAAMuC,qBAAqB,CAAC3B,WAAWc,OAAO,CAACjC,MAAM,IAAIuB;YACzD,MAAMwB,wBAAwB5B,WAAWc,OAAO,CAACnC,WAAW;YAE5D,IAAI,CAACgD,oBAAoB;gBACvBnB,kBAAkBE;YACpB;YAEAM,SAASd,aAAaa,SAASS,OAAO;gBAAElB,iBAAiBA;YAAkB;YAE3E,IAAIqB,oBAAoB;gBACtB,YAAY;gBACZ,0FAA0F;gBAC1FX,OAAOa,MAAM;gBAEb,OAAOZ;YACT;YAEAnB,UAAUgB,OAAO,GAAGE;YACpBA,OAAOc,qBAAqB,CAC1B,IAAMnB,mBAAmBD,YACzB,IAAME,mBAAmBF;YAG3B,IAAIkB,uBAAuB;gBACzBZ,OAAOa,MAAM;YACf;YAEA,OAAOZ;QACT,GACA,kGAAkG;QAClG,uDAAuD;QACvD;YACEf;YACAN;YACAE;YACAQ;YACAK;YACAH;YACAI;YACAxB;SACD;QAGHb,OAAMwD,SAAS,CAAC;YACd,YAAY;YACZ,EAAE;YACF,2GAA2G;YAC3G,oDAAoD;YAEpD,IAAI1C,iBAAiB,CAACG,SAAS;oBAC7BM;iBAAAA,qBAAAA,UAAUgB,OAAO,cAAjBhB,yCAAAA,mBAAmBkC,OAAO;YAC5B;QACF,GAAG;YAAClC;YAAWT;YAAeG;SAAQ;QAEtC,IAAIA,SAAS;YACX,OAAOG;QACT;QAEA,OAAO;IACT,GACA;QACE,YAAY;QACZ,sDAAsD;QACtD,CAAC9B,2BAA2B,EAAE,OAAOK,UAAU,aAAaA,QAAQ,IAAMA;IAC5E,GACA;QACE,8EAA8E;QAC9E+D,IAAIC,IAAAA,4CAAqB,EACvB,wFAAwF;QACxF,sDAAsD;QACtD,OAAOhE,UAAU,aAAa,CAAC,GAAGiE,OAAmCjE,SAASiE,MAAMV,KAAK,GAAGvD,MAAMuD,KAAK;QAGzG,8EAA8E;QAC9EW,KAAKF,IAAAA,4CAAqB,EACxB,uFAAuF;QACvF,qDAAqD;QACrD,OAAOhE,UAAU,aAAa,CAAC,GAAGiE,OAAmCjE,SAASiE,MAAMT,IAAI,GAAGxD,MAAMwD,IAAI;IAEzG;AAEJ"}
+{"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 type { MotionComponent } from './createMotionComponent';\nimport { createMotionComponent } 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: MotionComponent<MotionParams>;\n  Out: MotionComponent<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 * 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"}
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport type { PresenceComponent } from './createPresenceComponent';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent } 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":";;;;;;;;;;;IA6BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCAToD;AAS7D,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/hooks/useMountedState.js

@@ -28,6 +28,7 @@ function useMountedState(visible = false, unmountOnExit = false) {
             mountedRef.current = visible;
         }
     });
+    // eslint-disable-next-line react-hooks/refs
     return [
         visible || mountedRef.current,
         setMounted

package/lib-commonjs/hooks/useMountedState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useMountedState","visible","unmountOnExit","mountedRef","React","useRef","forceUpdate","useForceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;;;;;+BASgBA;;;eAAAA;;;;gCAPe;iEACR;AAMhB,SAASA,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaC,OAAMC,MAAM,CAAUH,gBAAgBD,UAAU;IACnE,MAAMK,cAAcC,IAAAA,8BAAc;IAElC,MAAMC,aAAaJ,OAAMK,WAAW,CAClC,CAACC;QACC,IAAIP,WAAWQ,OAAO,KAAKD,UAAU;YACnCP,WAAWQ,OAAO,GAAGD;YACrBJ;QACF;IACF,GACA;QAACA;KAAY;IAGfF,OAAMQ,SAAS,CAAC;QACd,IAAIX,SAAS;YACXE,WAAWQ,OAAO,GAAGV;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWQ,OAAO;QAAEH;KAAW;AACpD"}
+{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  // eslint-disable-next-line react-hooks/refs\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useMountedState","visible","unmountOnExit","mountedRef","React","useRef","forceUpdate","useForceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;;;;;+BASgBA;;;eAAAA;;;;gCAPe;iEACR;AAMhB,SAASA,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaC,OAAMC,MAAM,CAAUH,gBAAgBD,UAAU;IACnE,MAAMK,cAAcC,IAAAA,8BAAc;IAElC,MAAMC,aAAaJ,OAAMK,WAAW,CAClC,CAACC;QACC,IAAIP,WAAWQ,OAAO,KAAKD,UAAU;YACnCP,WAAWQ,OAAO,GAAGD;YACrBJ;QACF;IACF,GACA;QAACA;KAAY;IAGfF,OAAMQ,SAAS,CAAC;QACd,IAAIX,SAAS;YACXE,WAAWQ,OAAO,GAAGV;QACvB;IACF;IAEA,4CAA4C;IAC5C,OAAO;QAACA,WAAWE,WAAWQ,OAAO;QAAEH;KAAW;AACpD"}

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

@@ -1 +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"}
+{"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  Partial<MotionParams> & {\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":";;;;+BAoCgBA;;;eAAAA;;;;iEApCO;gCAC+C;AAmC/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/lib-commonjs/slots/presenceMotionSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slots/presenceMotionSlot.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 { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\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. Presence 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<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & 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 handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => (isUnmounted ? null : <>{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<PresenceMotionSlotRenderProps & 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<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"mappings":";;;;+BAsCgBA;;;eAAAA;;;;iEAtCO;gCAC+C;AAqC/D,SAASA,mBACdC,MAAgE,EAChEC,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,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAAwG,CAC5GC,GACAC,QACIN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAE5C;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}
+{"version":3,"sources":["../src/slots/presenceMotionSlot.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 { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> &\n  Partial<MotionParams> & {\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. Presence 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<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n  };\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & 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 handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => (isUnmounted ? null : <>{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<PresenceMotionSlotRenderProps & 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<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"mappings":";;;;+BAuCgBA;;;eAAAA;;;;iEAvCO;gCAC+C;AAsC/D,SAASA,mBACdC,MAAgE,EAChEC,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,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAAwG,CAC5GC,GACAC,QACIN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAE5C;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}

package/package.json

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