@fluentui/react-motion 0.0.0-nightly-20260107-0408.1 → 0.0.0-nightly-20260109-0406.1

package/CHANGELOG.md

@@ -1,19 +1,19 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 07 Jan 2026 04:23:01 GMT and should not be manually modified.
+This log was last generated on Fri, 09 Jan 2026 04:21:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20260107-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20260107-0408.1)
+## [0.0.0-nightly-20260109-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20260109-0406.1)
 
-Wed, 07 Jan 2026 04:23:01 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.5..@fluentui/react-motion_v0.0.0-nightly-20260107-0408.1)
+Fri, 09 Jan 2026 04:21:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.5..@fluentui/react-motion_v0.0.0-nightly-20260109-0406.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20260107-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/75336894f73db3313297e6ed46a89e63a6e001a7) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20260107-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/75336894f73db3313297e6ed46a89e63a6e001a7) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20260109-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/6b02cd49b3424ef75f31d84a4046598222f63e65) by beachball)
 
 ## [9.11.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.5)
 

package/lib/factories/createPresenceComponent.js

@@ -131,6 +131,20 @@ export function createPresenceComponent(value) {
             handleMotionCancel,
             visible
         ]);
+        React.useEffect(()=>{
+            // Heads up!
+            //
+            // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
+            // effect to ensure that the component is unmounted.
+            if (unmountOnExit && !mounted) {
+                var _handleRef_current;
+                (_handleRef_current = handleRef.current) === null || _handleRef_current === void 0 ? void 0 : _handleRef_current.dispose();
+            }
+        }, [
+            handleRef,
+            unmountOnExit,
+            mounted
+        ]);
         if (mounted) {
             return child;
         }

package/lib/factories/createPresenceComponent.js.map

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

package/lib/hooks/useAnimateAtoms.js

@@ -9,6 +9,73 @@ export const DEFAULT_ANIMATION_OPTIONS = {
 const DEFAULT_REDUCED_MOTION_ATOM = {
     duration: 1
 };
+/**
+ * Creates an animation handle that controls multiple animations.
+ * Is used to avoid leaking "element" references from the hook.
+ *
+ * @param animations
+ */ function createHandle(animations) {
+    return {
+        set playbackRate (rate){
+            animations.forEach((animation)=>{
+                animation.playbackRate = rate;
+            });
+        },
+        setMotionEndCallbacks (onfinish, oncancel) {
+            // Heads up!
+            // This could use "Animation:finished", but it's causing a memory leak in Chromium.
+            // See: https://issues.chromium.org/u/2/issues/383016426
+            const promises = animations.map((animation)=>{
+                return new Promise((resolve, reject)=>{
+                    animation.onfinish = ()=>resolve();
+                    animation.oncancel = ()=>reject();
+                });
+            });
+            Promise.all(promises).then(()=>{
+                onfinish();
+            }).catch(()=>{
+                oncancel();
+            });
+        },
+        isRunning () {
+            return animations.some((animation)=>isAnimationRunning(animation));
+        },
+        dispose: ()=>{
+            animations.length = 0;
+        },
+        cancel: ()=>{
+            animations.forEach((animation)=>{
+                animation.cancel();
+            });
+        },
+        pause: ()=>{
+            animations.forEach((animation)=>{
+                animation.pause();
+            });
+        },
+        play: ()=>{
+            animations.forEach((animation)=>{
+                animation.play();
+            });
+        },
+        finish: ()=>{
+            animations.forEach((animation)=>{
+                animation.finish();
+            });
+        },
+        reverse: ()=>{
+            // Heads up!
+            //
+            // This is used for the interruptible motion. If the animation is running, we need to reverse it.
+            //
+            // TODO: what do with animations that have "delay"?
+            // TODO: what do with animations that have different "durations"?
+            animations.forEach((animation)=>{
+                animation.reverse();
+            });
+        }
+    };
+}
 function useAnimateAtomsInSupportedEnvironment() {
     var _window_Animation;
     // eslint-disable-next-line @nx/workspace-no-restricted-globals
@@ -48,63 +115,7 @@ function useAnimateAtomsInSupportedEnvironment() {
                 return null;
             }
         }).filter((animation)=>!!animation);
-        return {
-            set playbackRate (rate){
-                animations.forEach((animation)=>{
-                    animation.playbackRate = rate;
-                });
-            },
-            setMotionEndCallbacks (onfinish, oncancel) {
-                // Heads up!
-                // This could use "Animation:finished", but it's causing a memory leak in Chromium.
-                // See: https://issues.chromium.org/u/2/issues/383016426
-                const promises = animations.map((animation)=>{
-                    return new Promise((resolve, reject)=>{
-                        animation.onfinish = ()=>resolve();
-                        animation.oncancel = ()=>reject();
-                    });
-                });
-                Promise.all(promises).then(()=>{
-                    onfinish();
-                }).catch(()=>{
-                    oncancel();
-                });
-            },
-            isRunning () {
-                return animations.some((animation)=>isAnimationRunning(animation));
-            },
-            cancel: ()=>{
-                animations.forEach((animation)=>{
-                    animation.cancel();
-                });
-            },
-            pause: ()=>{
-                animations.forEach((animation)=>{
-                    animation.pause();
-                });
-            },
-            play: ()=>{
-                animations.forEach((animation)=>{
-                    animation.play();
-                });
-            },
-            finish: ()=>{
-                animations.forEach((animation)=>{
-                    animation.finish();
-                });
-            },
-            reverse: ()=>{
-                // Heads up!
-                //
-                // This is used for the interruptible motion. If the animation is running, we need to reverse it.
-                //
-                // TODO: what do with animations that have "delay"?
-                // TODO: what do with animations that have different "durations"?
-                animations.forEach((animation)=>{
-                    animation.reverse();
-                });
-            }
-        };
+        return createHandle(animations);
     }, [
         SUPPORTS_PERSIST
     ]);
@@ -143,6 +154,8 @@ function useAnimateAtomsInSupportedEnvironment() {
             isRunning () {
                 return false;
             },
+            dispose () {
+            /* no-op */ },
             cancel () {
             /* no-op */ },
             pause () {

package/lib/hooks/useAnimateAtoms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n  fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n  duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n  // eslint-disable-next-line @nx/workspace-no-restricted-globals\n  const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms\n        .map(motion => {\n          // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n          const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n          // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n          const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n          const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n          const animationParams: KeyframeEffectOptions = {\n            ...DEFAULT_ANIMATION_OPTIONS,\n            ...params,\n\n            // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n            ...(isReducedMotion && reducedMotionParams),\n          };\n\n          try {\n            // Firefox can throw an error when calling `element.animate()`.\n            // See: https://github.com/microsoft/fluentui/issues/33902\n            const animation = element.animate(animationKeyframes, animationParams);\n\n            if (SUPPORTS_PERSIST) {\n              // Chromium browsers can return null when calling `element.animate()`.\n              // See: https://github.com/microsoft/fluentui/issues/33902\n              animation?.persist();\n            } else {\n              const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n              Object.assign(element.style ?? {}, resultKeyframe);\n            }\n\n            return animation;\n          } catch (e) {\n            return null;\n          }\n        })\n        .filter(animation => !!animation) as Animation[];\n\n      return {\n        set playbackRate(rate: number) {\n          animations.forEach(animation => {\n            animation.playbackRate = rate;\n          });\n        },\n        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n          // Heads up!\n          // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n          // See: https://issues.chromium.org/u/2/issues/383016426\n          const promises = animations.map(animation => {\n            return new Promise<void>((resolve, reject) => {\n              animation.onfinish = () => resolve();\n              animation.oncancel = () => reject();\n            });\n          });\n\n          Promise.all(promises)\n            .then(() => {\n              onfinish();\n            })\n            .catch(() => {\n              oncancel();\n            });\n        },\n        isRunning() {\n          return animations.some(animation => isAnimationRunning(animation));\n        },\n\n        cancel: () => {\n          animations.forEach(animation => {\n            animation.cancel();\n          });\n        },\n        pause: () => {\n          animations.forEach(animation => {\n            animation.pause();\n          });\n        },\n        play: () => {\n          animations.forEach(animation => {\n            animation.play();\n          });\n        },\n        finish: () => {\n          animations.forEach(animation => {\n            animation.finish();\n          });\n        },\n        reverse: () => {\n          // Heads up!\n          //\n          // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n          //\n          // TODO: what do with animations that have \"delay\"?\n          // TODO: what do with animations that have different \"durations\"?\n\n          animations.forEach(animation => {\n            animation.reverse();\n          });\n        },\n      };\n    },\n    [SUPPORTS_PERSIST],\n  );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n  const [count, setCount] = React.useState(0);\n  const callbackRef = React.useRef<() => void>(undefined);\n\n  const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n      // Heads up!\n      // If the environment supports Web Animations API, we can use the native implementation.\n      if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n        return realAnimateAtoms(element, value, options);\n      }\n\n      return {\n        setMotionEndCallbacks(onfinish: () => void) {\n          callbackRef.current = onfinish;\n          setCount(v => v + 1);\n        },\n\n        set playbackRate(rate: number) {\n          /* no-op */\n        },\n        isRunning() {\n          return false;\n        },\n\n        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n        reverse() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms(): (\n  element: HTMLElement,\n  value: AtomMotion | AtomMotion[],\n  options: { isReducedMotion: boolean },\n) => AnimationHandle {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useAnimateAtomsInTestEnvironment();\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","isAnimationRunning","DEFAULT_ANIMATION_OPTIONS","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","e","filter","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","isRunning","some","cancel","pause","play","finish","reverse","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","undefined","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n  fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n  duration: 1,\n};\n\n/**\n * Creates an animation handle that controls multiple animations.\n * Is used to avoid leaking \"element\" references from the hook.\n *\n * @param animations\n */\nfunction createHandle(animations: Animation[]): AnimationHandle {\n  return {\n    set playbackRate(rate: number) {\n      animations.forEach(animation => {\n        animation.playbackRate = rate;\n      });\n    },\n    setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n      // Heads up!\n      // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n      // See: https://issues.chromium.org/u/2/issues/383016426\n      const promises = animations.map(animation => {\n        return new Promise<void>((resolve, reject) => {\n          animation.onfinish = () => resolve();\n          animation.oncancel = () => reject();\n        });\n      });\n\n      Promise.all(promises)\n        .then(() => {\n          onfinish();\n        })\n        .catch(() => {\n          oncancel();\n        });\n    },\n    isRunning() {\n      return animations.some(animation => isAnimationRunning(animation));\n    },\n\n    dispose: () => {\n      animations.length = 0;\n    },\n\n    cancel: () => {\n      animations.forEach(animation => {\n        animation.cancel();\n      });\n    },\n    pause: () => {\n      animations.forEach(animation => {\n        animation.pause();\n      });\n    },\n    play: () => {\n      animations.forEach(animation => {\n        animation.play();\n      });\n    },\n    finish: () => {\n      animations.forEach(animation => {\n        animation.finish();\n      });\n    },\n    reverse: () => {\n      // Heads up!\n      //\n      // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n      //\n      // TODO: what do with animations that have \"delay\"?\n      // TODO: what do with animations that have different \"durations\"?\n\n      animations.forEach(animation => {\n        animation.reverse();\n      });\n    },\n  };\n}\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n  // eslint-disable-next-line @nx/workspace-no-restricted-globals\n  const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms\n        .map(motion => {\n          // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n          const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n          // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n          const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n          const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n          const animationParams: KeyframeEffectOptions = {\n            ...DEFAULT_ANIMATION_OPTIONS,\n            ...params,\n\n            // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n            ...(isReducedMotion && reducedMotionParams),\n          };\n\n          try {\n            // Firefox can throw an error when calling `element.animate()`.\n            // See: https://github.com/microsoft/fluentui/issues/33902\n            const animation = element.animate(animationKeyframes, animationParams);\n\n            if (SUPPORTS_PERSIST) {\n              // Chromium browsers can return null when calling `element.animate()`.\n              // See: https://github.com/microsoft/fluentui/issues/33902\n              animation?.persist();\n            } else {\n              const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n              Object.assign(element.style ?? {}, resultKeyframe);\n            }\n\n            return animation;\n          } catch (e) {\n            return null;\n          }\n        })\n        .filter(animation => !!animation) as Animation[];\n\n      return createHandle(animations);\n    },\n    [SUPPORTS_PERSIST],\n  );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n  const [count, setCount] = React.useState(0);\n  const callbackRef = React.useRef<() => void>(undefined);\n\n  const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n      // Heads up!\n      // If the environment supports Web Animations API, we can use the native implementation.\n      if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n        return realAnimateAtoms(element, value, options);\n      }\n\n      return {\n        setMotionEndCallbacks(onfinish: () => void) {\n          callbackRef.current = onfinish;\n          setCount(v => v + 1);\n        },\n\n        set playbackRate(rate: number) {\n          /* no-op */\n        },\n        isRunning() {\n          return false;\n        },\n\n        dispose() {\n          /* no-op */\n        },\n\n        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n        reverse() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms(): (\n  element: HTMLElement,\n  value: AtomMotion | AtomMotion[],\n  options: { isReducedMotion: boolean },\n) => AnimationHandle {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useAnimateAtomsInTestEnvironment();\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","isAnimationRunning","DEFAULT_ANIMATION_OPTIONS","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","createHandle","animations","playbackRate","rate","forEach","animation","setMotionEndCallbacks","onfinish","oncancel","promises","map","Promise","resolve","reject","all","then","catch","isRunning","some","dispose","length","cancel","pause","play","finish","reverse","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animate","resultKeyframe","Object","assign","style","e","filter","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","undefined","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"mappings":"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"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n  /**\n   * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n   * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n   * active). If not provided, the duration of the animation will be overridden to be 1ms.\n   *\n   * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n   */\n  reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n  isRunning: () => boolean;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"mappings":"AAsCA,WAME"}
+{"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n  /**\n   * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n   * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n   * active). If not provided, the duration of the animation will be overridden to be 1ms.\n   *\n   * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n   */\n  reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n  isRunning: () => boolean;\n  dispose: () => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"mappings":"AAuCA,WAME"}

package/lib-commonjs/factories/createPresenceComponent.js

@@ -148,6 +148,20 @@ function createPresenceComponent(value) {
             handleMotionCancel,
             visible
         ]);
+        _react.useEffect(()=>{
+            // Heads up!
+            //
+            // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
+            // effect to ensure that the component is unmounted.
+            if (unmountOnExit && !mounted) {
+                var _handleRef_current;
+                (_handleRef_current = handleRef.current) === null || _handleRef_current === void 0 ? void 0 : _handleRef_current.dispose();
+            }
+        }, [
+            handleRef,
+            unmountOnExit,
+            mounted
+        ]);
         if (mounted) {
             return child;
         }

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

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

package/lib-commonjs/hooks/useAnimateAtoms.js

@@ -28,6 +28,73 @@ const DEFAULT_ANIMATION_OPTIONS = {
 const DEFAULT_REDUCED_MOTION_ATOM = {
     duration: 1
 };
+/**
+ * Creates an animation handle that controls multiple animations.
+ * Is used to avoid leaking "element" references from the hook.
+ *
+ * @param animations
+ */ function createHandle(animations) {
+    return {
+        set playbackRate (rate){
+            animations.forEach((animation)=>{
+                animation.playbackRate = rate;
+            });
+        },
+        setMotionEndCallbacks (onfinish, oncancel) {
+            // Heads up!
+            // This could use "Animation:finished", but it's causing a memory leak in Chromium.
+            // See: https://issues.chromium.org/u/2/issues/383016426
+            const promises = animations.map((animation)=>{
+                return new Promise((resolve, reject)=>{
+                    animation.onfinish = ()=>resolve();
+                    animation.oncancel = ()=>reject();
+                });
+            });
+            Promise.all(promises).then(()=>{
+                onfinish();
+            }).catch(()=>{
+                oncancel();
+            });
+        },
+        isRunning () {
+            return animations.some((animation)=>(0, _isAnimationRunning.isAnimationRunning)(animation));
+        },
+        dispose: ()=>{
+            animations.length = 0;
+        },
+        cancel: ()=>{
+            animations.forEach((animation)=>{
+                animation.cancel();
+            });
+        },
+        pause: ()=>{
+            animations.forEach((animation)=>{
+                animation.pause();
+            });
+        },
+        play: ()=>{
+            animations.forEach((animation)=>{
+                animation.play();
+            });
+        },
+        finish: ()=>{
+            animations.forEach((animation)=>{
+                animation.finish();
+            });
+        },
+        reverse: ()=>{
+            // Heads up!
+            //
+            // This is used for the interruptible motion. If the animation is running, we need to reverse it.
+            //
+            // TODO: what do with animations that have "delay"?
+            // TODO: what do with animations that have different "durations"?
+            animations.forEach((animation)=>{
+                animation.reverse();
+            });
+        }
+    };
+}
 function useAnimateAtomsInSupportedEnvironment() {
     var _window_Animation;
     // eslint-disable-next-line @nx/workspace-no-restricted-globals
@@ -67,63 +134,7 @@ function useAnimateAtomsInSupportedEnvironment() {
                 return null;
             }
         }).filter((animation)=>!!animation);
-        return {
-            set playbackRate (rate){
-                animations.forEach((animation)=>{
-                    animation.playbackRate = rate;
-                });
-            },
-            setMotionEndCallbacks (onfinish, oncancel) {
-                // Heads up!
-                // This could use "Animation:finished", but it's causing a memory leak in Chromium.
-                // See: https://issues.chromium.org/u/2/issues/383016426
-                const promises = animations.map((animation)=>{
-                    return new Promise((resolve, reject)=>{
-                        animation.onfinish = ()=>resolve();
-                        animation.oncancel = ()=>reject();
-                    });
-                });
-                Promise.all(promises).then(()=>{
-                    onfinish();
-                }).catch(()=>{
-                    oncancel();
-                });
-            },
-            isRunning () {
-                return animations.some((animation)=>(0, _isAnimationRunning.isAnimationRunning)(animation));
-            },
-            cancel: ()=>{
-                animations.forEach((animation)=>{
-                    animation.cancel();
-                });
-            },
-            pause: ()=>{
-                animations.forEach((animation)=>{
-                    animation.pause();
-                });
-            },
-            play: ()=>{
-                animations.forEach((animation)=>{
-                    animation.play();
-                });
-            },
-            finish: ()=>{
-                animations.forEach((animation)=>{
-                    animation.finish();
-                });
-            },
-            reverse: ()=>{
-                // Heads up!
-                //
-                // This is used for the interruptible motion. If the animation is running, we need to reverse it.
-                //
-                // TODO: what do with animations that have "delay"?
-                // TODO: what do with animations that have different "durations"?
-                animations.forEach((animation)=>{
-                    animation.reverse();
-                });
-            }
-        };
+        return createHandle(animations);
     }, [
         SUPPORTS_PERSIST
     ]);
@@ -162,6 +173,8 @@ function useAnimateAtomsInSupportedEnvironment() {
             isRunning () {
                 return false;
             },
+            dispose () {
+            /* no-op */ },
             cancel () {
             /* no-op */ },
             pause () {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n  fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n  duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n  // eslint-disable-next-line @nx/workspace-no-restricted-globals\n  const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms\n        .map(motion => {\n          // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n          const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n          // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n          const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n          const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n          const animationParams: KeyframeEffectOptions = {\n            ...DEFAULT_ANIMATION_OPTIONS,\n            ...params,\n\n            // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n            ...(isReducedMotion && reducedMotionParams),\n          };\n\n          try {\n            // Firefox can throw an error when calling `element.animate()`.\n            // See: https://github.com/microsoft/fluentui/issues/33902\n            const animation = element.animate(animationKeyframes, animationParams);\n\n            if (SUPPORTS_PERSIST) {\n              // Chromium browsers can return null when calling `element.animate()`.\n              // See: https://github.com/microsoft/fluentui/issues/33902\n              animation?.persist();\n            } else {\n              const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n              Object.assign(element.style ?? {}, resultKeyframe);\n            }\n\n            return animation;\n          } catch (e) {\n            return null;\n          }\n        })\n        .filter(animation => !!animation) as Animation[];\n\n      return {\n        set playbackRate(rate: number) {\n          animations.forEach(animation => {\n            animation.playbackRate = rate;\n          });\n        },\n        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n          // Heads up!\n          // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n          // See: https://issues.chromium.org/u/2/issues/383016426\n          const promises = animations.map(animation => {\n            return new Promise<void>((resolve, reject) => {\n              animation.onfinish = () => resolve();\n              animation.oncancel = () => reject();\n            });\n          });\n\n          Promise.all(promises)\n            .then(() => {\n              onfinish();\n            })\n            .catch(() => {\n              oncancel();\n            });\n        },\n        isRunning() {\n          return animations.some(animation => isAnimationRunning(animation));\n        },\n\n        cancel: () => {\n          animations.forEach(animation => {\n            animation.cancel();\n          });\n        },\n        pause: () => {\n          animations.forEach(animation => {\n            animation.pause();\n          });\n        },\n        play: () => {\n          animations.forEach(animation => {\n            animation.play();\n          });\n        },\n        finish: () => {\n          animations.forEach(animation => {\n            animation.finish();\n          });\n        },\n        reverse: () => {\n          // Heads up!\n          //\n          // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n          //\n          // TODO: what do with animations that have \"delay\"?\n          // TODO: what do with animations that have different \"durations\"?\n\n          animations.forEach(animation => {\n            animation.reverse();\n          });\n        },\n      };\n    },\n    [SUPPORTS_PERSIST],\n  );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n  const [count, setCount] = React.useState(0);\n  const callbackRef = React.useRef<() => void>(undefined);\n\n  const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n      // Heads up!\n      // If the environment supports Web Animations API, we can use the native implementation.\n      if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n        return realAnimateAtoms(element, value, options);\n      }\n\n      return {\n        setMotionEndCallbacks(onfinish: () => void) {\n          callbackRef.current = onfinish;\n          setCount(v => v + 1);\n        },\n\n        set playbackRate(rate: number) {\n          /* no-op */\n        },\n        isRunning() {\n          return false;\n        },\n\n        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n        reverse() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms(): (\n  element: HTMLElement,\n  value: AtomMotion | AtomMotion[],\n  options: { isReducedMotion: boolean },\n) => AnimationHandle {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useAnimateAtomsInTestEnvironment();\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["DEFAULT_ANIMATION_OPTIONS","useAnimateAtoms","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","e","filter","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","isRunning","some","isAnimationRunning","cancel","pause","play","finish","reverse","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","undefined","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"mappings":"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"}
+{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n  fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n  duration: 1,\n};\n\n/**\n * Creates an animation handle that controls multiple animations.\n * Is used to avoid leaking \"element\" references from the hook.\n *\n * @param animations\n */\nfunction createHandle(animations: Animation[]): AnimationHandle {\n  return {\n    set playbackRate(rate: number) {\n      animations.forEach(animation => {\n        animation.playbackRate = rate;\n      });\n    },\n    setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n      // Heads up!\n      // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n      // See: https://issues.chromium.org/u/2/issues/383016426\n      const promises = animations.map(animation => {\n        return new Promise<void>((resolve, reject) => {\n          animation.onfinish = () => resolve();\n          animation.oncancel = () => reject();\n        });\n      });\n\n      Promise.all(promises)\n        .then(() => {\n          onfinish();\n        })\n        .catch(() => {\n          oncancel();\n        });\n    },\n    isRunning() {\n      return animations.some(animation => isAnimationRunning(animation));\n    },\n\n    dispose: () => {\n      animations.length = 0;\n    },\n\n    cancel: () => {\n      animations.forEach(animation => {\n        animation.cancel();\n      });\n    },\n    pause: () => {\n      animations.forEach(animation => {\n        animation.pause();\n      });\n    },\n    play: () => {\n      animations.forEach(animation => {\n        animation.play();\n      });\n    },\n    finish: () => {\n      animations.forEach(animation => {\n        animation.finish();\n      });\n    },\n    reverse: () => {\n      // Heads up!\n      //\n      // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n      //\n      // TODO: what do with animations that have \"delay\"?\n      // TODO: what do with animations that have different \"durations\"?\n\n      animations.forEach(animation => {\n        animation.reverse();\n      });\n    },\n  };\n}\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n  // eslint-disable-next-line @nx/workspace-no-restricted-globals\n  const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms\n        .map(motion => {\n          // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n          const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n          // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n          const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n          const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n          const animationParams: KeyframeEffectOptions = {\n            ...DEFAULT_ANIMATION_OPTIONS,\n            ...params,\n\n            // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n            ...(isReducedMotion && reducedMotionParams),\n          };\n\n          try {\n            // Firefox can throw an error when calling `element.animate()`.\n            // See: https://github.com/microsoft/fluentui/issues/33902\n            const animation = element.animate(animationKeyframes, animationParams);\n\n            if (SUPPORTS_PERSIST) {\n              // Chromium browsers can return null when calling `element.animate()`.\n              // See: https://github.com/microsoft/fluentui/issues/33902\n              animation?.persist();\n            } else {\n              const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n              Object.assign(element.style ?? {}, resultKeyframe);\n            }\n\n            return animation;\n          } catch (e) {\n            return null;\n          }\n        })\n        .filter(animation => !!animation) as Animation[];\n\n      return createHandle(animations);\n    },\n    [SUPPORTS_PERSIST],\n  );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n  const [count, setCount] = React.useState(0);\n  const callbackRef = React.useRef<() => void>(undefined);\n\n  const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n      // Heads up!\n      // If the environment supports Web Animations API, we can use the native implementation.\n      if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n        return realAnimateAtoms(element, value, options);\n      }\n\n      return {\n        setMotionEndCallbacks(onfinish: () => void) {\n          callbackRef.current = onfinish;\n          setCount(v => v + 1);\n        },\n\n        set playbackRate(rate: number) {\n          /* no-op */\n        },\n        isRunning() {\n          return false;\n        },\n\n        dispose() {\n          /* no-op */\n        },\n\n        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n        reverse() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms(): (\n  element: HTMLElement,\n  value: AtomMotion | AtomMotion[],\n  options: { isReducedMotion: boolean },\n) => AnimationHandle {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useAnimateAtomsInTestEnvironment();\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["DEFAULT_ANIMATION_OPTIONS","useAnimateAtoms","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","createHandle","animations","playbackRate","rate","forEach","animation","setMotionEndCallbacks","onfinish","oncancel","promises","map","Promise","resolve","reject","all","then","catch","isRunning","some","isAnimationRunning","dispose","length","cancel","pause","play","finish","reverse","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animate","resultKeyframe","Object","assign","style","e","filter","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","undefined","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "0.0.0-nightly-20260107-0408.1",
+  "version": "0.0.0-nightly-20260109-0406.1",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -17,16 +17,9 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20260107-0408.0",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20260107-0408.0",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-cypress": "*"
-  },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20260107-0408.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20260107-0408.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20260109-0406.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20260109-0406.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {