@fluentui/react-motion 9.6.6 → 9.6.8

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 08 Jan 2025 18:29:14 GMT and should not be manually modified.
+This log was last generated on Tue, 11 Mar 2025 18:54:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.8)
+
+Tue, 11 Mar 2025 18:54:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.7..@fluentui/react-motion_v9.6.8)
+
+### Patches
+
+- fix: apply initial styles consistently ([PR #33810](https://github.com/microsoft/fluentui/pull/33810) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
+
+## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.7)
+
+Wed, 22 Jan 2025 14:00:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.6..@fluentui/react-motion_v9.6.7)
+
+### Patches
+
+- feat: add extended support for reduced motion ([PR #33353](https://github.com/microsoft/fluentui/pull/33353) by olfedias@microsoft.com)
+- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+
 ## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.6)
 
-Wed, 08 Jan 2025 18:29:14 GMT 
+Wed, 08 Jan 2025 18:33:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.5..@fluentui/react-motion_v9.6.6)
 
 ### Patches

package/dist/index.d.ts

@@ -2,10 +2,21 @@ import * as React_2 from 'react';
 import { SlotComponentType } from '@fluentui/react-utilities';
 import { SlotRenderFunction } from '@fluentui/react-utilities';
 
-export declare type AtomMotion = {
+declare type AtomCore = {
     keyframes: Keyframe[];
 } & KeyframeEffectOptions;
 
+export declare type AtomMotion = AtomCore & {
+    /**
+     * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
+     * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is
+     * active). If not provided, the duration of the animation will be overridden to be 1ms.
+     *
+     * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.
+     */
+    reducedMotion?: Partial<AtomCore>;
+};
+
 export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
     element: HTMLElement;
 } & MotionParams) => AtomMotion | AtomMotion[];

package/lib/factories/createPresenceComponent.js

@@ -10,9 +10,6 @@ import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
 /**
  * @internal A private symbol to store the motion definition on the component for variants.
  */ export const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
-function shouldSkipAnimation(appear, isFirstMount, visible) {
-    return !appear && isFirstMount && !!visible;
-}
 export function createPresenceComponent(value) {
     return Object.assign((props)=>{
         'use no memo';
@@ -67,7 +64,7 @@ export function createPresenceComponent(value) {
         });
         useIsomorphicLayoutEffect(()=>{
             const element = elementRef.current;
-            if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {
+            if (!element) {
                 return;
             }
             const presenceMotion = typeof value === 'function' ? value({
@@ -76,8 +73,10 @@ export function createPresenceComponent(value) {
             }) : value;
             const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
             const direction = visible ? 'enter' : 'exit';
-            const applyInitialStyles = !visible && isFirstMount;
-            const skipAnimation = optionsRef.current.skipMotions;
+            // Heads up!
+            // Initial styles are applied when the component is mounted for the first time and "appear" is set to "false" (otherwise animations are triggered)
+            const applyInitialStyles = !optionsRef.current.appear && isFirstMount;
+            const skipAnimationByConfig = optionsRef.current.skipMotions;
             if (!applyInitialStyles) {
                 handleMotionStart(direction);
             }
@@ -92,7 +91,7 @@ export function createPresenceComponent(value) {
             }
             handleRef.current = handle;
             handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
-            if (skipAnimation) {
+            if (skipAnimationByConfig) {
                 handle.finish();
             }
             return ()=>{

package/lib/factories/createPresenceComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } 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 { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type 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: React.ReactElement;\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> = {}> = {\n  (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n  [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n  return !appear && isFirstMount && !!visible;\n}\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 = getChildElement(children);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const elementRef = React.useRef<HTMLElement>();\n      const ref = useMergedRefs(elementRef, child.ref);\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 = elementRef.current;\n\n          if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n            return;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n          const applyInitialStyles = !visible && isFirstMount;\n          const skipAnimation = optionsRef.current.skipMotions;\n\n          if (!applyInitialStyles) {\n            handleMotionStart(direction);\n          }\n\n          const 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            return;\n          }\n\n          handleRef.current = handle;\n          handle.setMotionEndCallbacks(\n            () => handleMotionFinish(direction),\n            () => handleMotionCancel(direction),\n          );\n\n          if (skipAnimation) {\n            handle.finish();\n          }\n\n          return () => {\n            handle.cancel();\n          };\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        [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n      );\n\n      if (mounted) {\n        return React.cloneElement(child, { ref });\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n  );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","getChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","animateAtoms","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimation","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,aAAa,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAClF,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E;;CAEC,GACD,OAAO,MAAMC,oBAAoBC,OAAO,qBAAqB;AA2D7D,SAASC,oBAAoBC,MAA2B,EAAEC,YAAqB,EAAEC,OAA4B;IAC3G,OAAO,CAACF,UAAUC,gBAAgB,CAAC,CAACC;AACtC;AAEA,OAAO,SAASC,wBACdC,KAAsD;IAEtD,OAAOC,OAAOC,MAAM,CAClB,CAACC;QACC;QAEA,MAAMC,cAAcnB,MAAMoB,UAAU,CAACnB;QACrC,MAAMoB,SAAS;YAAE,GAAGF,WAAW;YAAE,GAAGD,KAAK;QAAC;QAC1C,MAAMI,cAAcf,gCAAgC;QAEpD,MAAM,EACJI,MAAM,EACNY,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdf,OAAO,EACPgB,aAAa,EACb,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QAEf,MAAM,CAACE,SAASC,WAAW,GAAG7B,gBAAgBS,SAASgB;QACvD,MAAMK,QAAQ5B,gBAAgBiB;QAE9B,MAAMY,YAAYhC,uBAAuBqB;QACzC,MAAMY,aAAapC,MAAMqC,MAAM;QAC/B,MAAMC,MAAMvC,cAAcqC,YAAYF,MAAMI,GAAG;QAC/C,MAAMC,aAAavC,MAAMqC,MAAM,CAAmE;YAChG1B;YACAoB;YACAT;QACF;QAEA,MAAMkB,eAAetC;QACrB,MAAMU,eAAef;QACrB,MAAM4C,kBAAkBpC;QAExB,MAAMqC,oBAAoB9C,iBAAiB,CAAC+C;YAC1ChB,0BAAAA,oCAAAA,cAAgB,MAAM;gBAAEgB;YAAU;QACpC;QACA,MAAMC,qBAAqBhD,iBAAiB,CAAC+C;YAC3CjB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEiB;YAAU;YAEnC,IAAIA,cAAc,UAAUd,eAAe;gBACzCI,WAAW;gBACXR,mBAAAA,6BAAAA;YACF;QACF;QAEA,MAAMoB,qBAAqBjD,iBAAiB,CAAC+C;YAC3Cf,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEe;YAAU;QACrC;QAEA7C,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3FyC,WAAWO,OAAO,GAAG;gBAAEnC;gBAAQoB;gBAAQT;YAAY;QACrD;QAEAxB,0BACE;YACE,MAAMiD,UAAUX,WAAWU,OAAO;YAElC,IAAI,CAACC,WAAWrC,oBAAoB6B,WAAWO,OAAO,CAACnC,MAAM,EAAEC,cAAcC,UAAU;gBACrF;YACF;YAEA,MAAMmC,iBACJ,OAAOjC,UAAU,aAAaA,MAAM;gBAAEgC;gBAAS,GAAGR,WAAWO,OAAO,CAACf,MAAM;YAAC,KAAMhB;YACpF,MAAMkC,QAAQpC,UAAUmC,eAAeE,KAAK,GAAGF,eAAeG,IAAI;YAElE,MAAMR,YAA+B9B,UAAU,UAAU;YACzD,MAAMuC,qBAAqB,CAACvC,WAAWD;YACvC,MAAMyC,gBAAgBd,WAAWO,OAAO,CAACxB,WAAW;YAEpD,IAAI,CAAC8B,oBAAoB;gBACvBV,kBAAkBC;YACpB;YAEA,MAAMW,SAASd,aAAaO,SAASE,OAAO;gBAAER,iBAAiBA;YAAkB;YAEjF,IAAIW,oBAAoB;gBACtB,YAAY;gBACZ,0FAA0F;gBAC1FE,OAAOC,MAAM;gBACb;YACF;YAEApB,UAAUW,OAAO,GAAGQ;YACpBA,OAAOE,qBAAqB,CAC1B,IAAMZ,mBAAmBD,YACzB,IAAME,mBAAmBF;YAG3B,IAAIU,eAAe;gBACjBC,OAAOC,MAAM;YACf;YAEA,OAAO;gBACLD,OAAOG,MAAM;YACf;QACF,GACA,kGAAkG;QAClG,uDAAuD;QACvD;YAACjB;YAAcL;YAAWM;YAAiBG;YAAoBF;YAAmBG;YAAoBhC;SAAQ;QAGhH,IAAImB,SAAS;YACX,OAAOhC,MAAM0D,YAAY,CAACxB,OAAO;gBAAEI;YAAI;QACzC;QAEA,OAAO;IACT,GACA;QACE,YAAY;QACZ,sDAAsD;QACtD,CAAC9B,kBAAkB,EAAE,OAAOO,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AAEJ"}
+{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } 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 { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type 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: React.ReactElement;\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> = {}> = {\n  (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n  [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\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 = getChildElement(children);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const elementRef = React.useRef<HTMLElement>();\n      const ref = useMergedRefs(elementRef, child.ref);\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 = elementRef.current;\n\n          if (!element) {\n            return;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\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          const 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            return;\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 () => {\n            handle.cancel();\n          };\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        [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n      );\n\n      if (mounted) {\n        return React.cloneElement(child, { ref });\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n  );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","getChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","animateAtoms","isFirstMount","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,aAAa,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAClF,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E;;CAEC,GACD,OAAO,MAAMC,oBAAoBC,OAAO,qBAAqB;AA2D7D,OAAO,SAASC,wBACdC,KAAsD;IAEtD,OAAOC,OAAOC,MAAM,CAClB,CAACC;QACC;QAEA,MAAMC,cAAcf,MAAMgB,UAAU,CAACf;QACrC,MAAMgB,SAAS;YAAE,GAAGF,WAAW;YAAE,GAAGD,KAAK;QAAC;QAC1C,MAAMI,cAAcX,gCAAgC;QAEpD,MAAM,EACJY,MAAM,EACNC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdC,OAAO,EACPC,aAAa,EACb,GAAGC,OACJ,GAAGX;QACJ,MAAMY,SAASD;QAEf,MAAM,CAACE,SAASC,WAAW,GAAG3B,gBAAgBsB,SAASC;QACvD,MAAMK,QAAQ1B,gBAAgBc;QAE9B,MAAMa,YAAY9B,uBAAuBkB;QACzC,MAAMa,aAAalC,MAAMmC,MAAM;QAC/B,MAAMC,MAAMrC,cAAcmC,YAAYF,MAAMI,GAAG;QAC/C,MAAMC,aAAarC,MAAMmC,MAAM,CAAmE;YAChGhB;YACAU;YACAX;QACF;QAEA,MAAMoB,eAAepC;QACrB,MAAMqC,eAAe1C;QACrB,MAAM2C,kBAAkBnC;QAExB,MAAMoC,oBAAoB7C,iBAAiB,CAAC8C;YAC1ClB,0BAAAA,oCAAAA,cAAgB,MAAM;gBAAEkB;YAAU;QACpC;QACA,MAAMC,qBAAqB/C,iBAAiB,CAAC8C;YAC3CnB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEmB;YAAU;YAEnC,IAAIA,cAAc,UAAUf,eAAe;gBACzCI,WAAW;gBACXT,mBAAAA,6BAAAA;YACF;QACF;QAEA,MAAMsB,qBAAqBhD,iBAAiB,CAAC8C;YAC3CjB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEiB;YAAU;QACrC;QAEA5C,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3FuC,WAAWQ,OAAO,GAAG;gBAAE1B;gBAAQU;gBAAQX;YAAY;QACrD;QAEApB,0BACE;YACE,MAAMgD,UAAUZ,WAAWW,OAAO;YAElC,IAAI,CAACC,SAAS;gBACZ;YACF;YAEA,MAAMC,iBACJ,OAAOpC,UAAU,aAAaA,MAAM;gBAAEmC;gBAAS,GAAGT,WAAWQ,OAAO,CAAChB,MAAM;YAAC,KAAMlB;YAEpF,MAAMqC,QAAQtB,UAAUqB,eAAeE,KAAK,GAAGF,eAAeG,IAAI;YAClE,MAAMR,YAA+BhB,UAAU,UAAU;YAEzD,YAAY;YACZ,kJAAkJ;YAClJ,MAAMyB,qBAAqB,CAACd,WAAWQ,OAAO,CAAC1B,MAAM,IAAIoB;YACzD,MAAMa,wBAAwBf,WAAWQ,OAAO,CAAC3B,WAAW;YAE5D,IAAI,CAACiC,oBAAoB;gBACvBV,kBAAkBC;YACpB;YAEA,MAAMW,SAASf,aAAaQ,SAASE,OAAO;gBAAER,iBAAiBA;YAAkB;YAEjF,IAAIW,oBAAoB;gBACtB,YAAY;gBACZ,0FAA0F;gBAC1FE,OAAOC,MAAM;gBACb;YACF;YAEArB,UAAUY,OAAO,GAAGQ;YACpBA,OAAOE,qBAAqB,CAC1B,IAAMZ,mBAAmBD,YACzB,IAAME,mBAAmBF;YAG3B,IAAIU,uBAAuB;gBACzBC,OAAOC,MAAM;YACf;YAEA,OAAO;gBACLD,OAAOG,MAAM;YACf;QACF,GACA,kGAAkG;QAClG,uDAAuD;QACvD;YAAClB;YAAcL;YAAWO;YAAiBG;YAAoBF;YAAmBG;YAAoBlB;SAAQ;QAGhH,IAAII,SAAS;YACX,OAAO9B,MAAMyD,YAAY,CAACzB,OAAO;gBAAEI;YAAI;QACzC;QAEA,OAAO;IACT,GACA;QACE,YAAY;QACZ,sDAAsD;QACtD,CAAC5B,kBAAkB,EAAE,OAAOG,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AAEJ"}

package/lib/hooks/useAnimateAtoms.js

@@ -1,4 +1,12 @@
 import * as React from 'react';
+export const DEFAULT_ANIMATION_OPTIONS = {
+    fill: 'forwards'
+};
+// A motion atom's default reduced motion is a simple 1 ms duration.
+// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
+const DEFAULT_REDUCED_MOTION_ATOM = {
+    duration: 1
+};
 function useAnimateAtomsInSupportedEnvironment() {
     var _window_Animation;
     // eslint-disable-next-line @nx/workspace-no-restricted-globals
@@ -9,18 +17,22 @@ function useAnimateAtomsInSupportedEnvironment() {
         ];
         const { isReducedMotion } = options;
         const animations = atoms.map((motion)=>{
-            const { keyframes, ...params } = motion;
-            const animation = element.animate(keyframes, {
-                fill: 'forwards',
+            // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+            const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+            // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+            const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
+            const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
+            const animationParams = {
+                ...DEFAULT_ANIMATION_OPTIONS,
                 ...params,
-                ...isReducedMotion && {
-                    duration: 1
-                }
-            });
+                // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+                ...isReducedMotion && reducedMotionParams
+            };
+            const animation = element.animate(animationKeyframes, animationParams);
             if (SUPPORTS_PERSIST) {
                 animation.persist();
             } else {
-                const resultKeyframe = keyframes[keyframes.length - 1];
+                const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
                 var _element_style;
                 Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
             }

package/lib/hooks/useAnimateAtoms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\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.map(motion => {\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n          fill: 'forwards',\n\n          ...params,\n          ...(isReducedMotion && { duration: 1 }),\n        });\n\n        if (SUPPORTS_PERSIST) {\n          animation.persist();\n        } else {\n          const resultKeyframe = keyframes[keyframes.length - 1];\n          Object.assign(element.style ?? {}, resultKeyframe);\n        }\n\n        return animation;\n      });\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\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      };\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>();\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        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\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","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","resultKeyframe","length","Object","assign","style","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC;QAE0DC;IADjE,+DAA+D;IAC/D,MAAMC,mBAAmB,OAAOD,WAAW,eAAe,SAAOA,oBAAAA,OAAOE,SAAS,cAAhBF,wCAAAA,kBAAkBG,SAAS,CAACC,OAAO,MAAK;IAEzG,OAAON,MAAMO,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQa,OAAO,CAACH,WAAW;gBAC3CI,MAAM;gBAEN,GAAGH,MAAM;gBACT,GAAIL,mBAAmB;oBAAES,UAAU;gBAAE,CAAC;YACxC;YAEA,IAAIpB,kBAAkB;gBACpBiB,UAAUd,OAAO;YACnB,OAAO;gBACL,MAAMkB,iBAAiBN,SAAS,CAACA,UAAUO,MAAM,GAAG,EAAE;oBACxCjB;gBAAdkB,OAAOC,MAAM,CAACnB,CAAAA,iBAAAA,QAAQoB,KAAK,cAAbpB,4BAAAA,iBAAiB,CAAC,GAAGgB;YACrC;YAEA,OAAOJ;QACT;QAEA,OAAO;YACL,IAAIS,cAAaC,KAAc;gBAC7Bf,WAAWgB,OAAO,CAACX,CAAAA;oBACjBA,UAAUS,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9D,YAAY;gBACZ,mFAAmF;gBACnF,wDAAwD;gBACxD,MAAMC,WAAWpB,WAAWC,GAAG,CAACI,CAAAA;oBAC9B,OAAO,IAAIgB,QAAc,CAACC,SAASC;wBACjClB,UAAUa,QAAQ,GAAG,IAAMI;wBAC3BjB,UAAUc,QAAQ,GAAG,IAAMI;oBAC7B;gBACF;gBAEAF,QAAQG,GAAG,CAACJ,UACTK,IAAI,CAAC;oBACJP;gBACF,GACCQ,KAAK,CAAC;oBACLP;gBACF;YACJ;YAEAQ,QAAQ;gBACN3B,WAAWgB,OAAO,CAACX,CAAAA;oBACjBA,UAAUsB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACL5B,WAAWgB,OAAO,CAACX,CAAAA;oBACjBA,UAAUuB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJ7B,WAAWgB,OAAO,CAACX,CAAAA;oBACjBA,UAAUwB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACN9B,WAAWgB,OAAO,CAACX,CAAAA;oBACjBA,UAAUyB,MAAM;gBAClB;YACF;QACF;IACF,GACA;QAAC1C;KAAiB;AAEtB;AAEA;;;;;CAKC,GACD,SAAS2C;IACP,MAAM,CAACC,OAAOC,SAAS,GAAGhD,MAAMiD,QAAQ,CAAC;IACzC,MAAMC,cAAclD,MAAMmD,MAAM;IAEhC,MAAMC,mBAAmBnD;IAEzBD,MAAMqD,SAAS,CAAC;QACd,IAAIN,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAO/C,MAAMO,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAM6C,kCAAkC,OAAO/C,QAAQa,OAAO,KAAK;QAEnE,YAAY;QACZ,wFAAwF;QACxF,IAAIkC,iCAAiC;YACnC,OAAOH,iBAAiB5C,SAASC,OAAOC;QAC1C;QAEA,OAAO;YACLsB,uBAAsBC,QAAoB;gBACxCiB,YAAYI,OAAO,GAAGrB;gBACtBe,SAASQ,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAI3B,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAY;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;QACF;IACF,GACA;QAACO;KAAiB;AAEtB;AAEA;;CAEC,GACD,OAAO,SAASK;IACd;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnC,sDAAsD;QACtD,OAAOd;IACT;IAEA,sDAAsD;IACtD,OAAO7C;AACT"}
+{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\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.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        const animation = element.animate(animationKeyframes, animationParams);\n\n        if (SUPPORTS_PERSIST) {\n          animation.persist();\n        } else {\n          const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n          Object.assign(element.style ?? {}, resultKeyframe);\n        }\n\n        return animation;\n      });\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\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      };\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>();\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        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\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","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","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/slots/presenceMotionSlot.js

@@ -1,7 +1,7 @@
 import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
 import * as React from 'react';
 export function presenceMotionSlot(motion, options) {
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
     if (process.env.NODE_ENV !== 'production') {
         if (typeof as !== 'undefined') {

package/lib/slots/presenceMotionSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n  SLOT_ELEMENT_TYPE_SYMBOL,\n  SLOT_RENDER_FUNCTION_SYMBOL,\n  type SlotComponentType,\n  type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: keyof JSX.IntrinsicElements;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line deprecation/deprecation\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n    > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAGtB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}
+{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n  SLOT_ELEMENT_TYPE_SYMBOL,\n  SLOT_RENDER_FUNCTION_SYMBOL,\n  type SlotComponentType,\n  type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: keyof JSX.IntrinsicElements;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n    > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAGtB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\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'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => 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":[],"rangeMappings":"","mappings":"AA0BA,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'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => 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":[],"rangeMappings":"","mappings":"AAqCA,WAME"}

package/lib-commonjs/factories/createPresenceComponent.js

@@ -27,9 +27,6 @@ const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
 const _getChildElement = require("../utils/getChildElement");
 const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
 const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
-function shouldSkipAnimation(appear, isFirstMount, visible) {
-    return !appear && isFirstMount && !!visible;
-}
 function createPresenceComponent(value) {
     return Object.assign((props)=>{
         'use no memo';
@@ -84,7 +81,7 @@ function createPresenceComponent(value) {
         });
         (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
             const element = elementRef.current;
-            if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {
+            if (!element) {
                 return;
             }
             const presenceMotion = typeof value === 'function' ? value({
@@ -93,8 +90,10 @@ function createPresenceComponent(value) {
             }) : value;
             const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
             const direction = visible ? 'enter' : 'exit';
-            const applyInitialStyles = !visible && isFirstMount;
-            const skipAnimation = optionsRef.current.skipMotions;
+            // Heads up!
+            // Initial styles are applied when the component is mounted for the first time and "appear" is set to "false" (otherwise animations are triggered)
+            const applyInitialStyles = !optionsRef.current.appear && isFirstMount;
+            const skipAnimationByConfig = optionsRef.current.skipMotions;
             if (!applyInitialStyles) {
                 handleMotionStart(direction);
             }
@@ -109,7 +108,7 @@ function createPresenceComponent(value) {
             }
             handleRef.current = handle;
             handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
-            if (skipAnimation) {
+            if (skipAnimationByConfig) {
                 handle.finish();
             }
             return ()=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } 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 { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type 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: React.ReactElement;\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> = {}> = {\n  (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n  [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n  return !appear && isFirstMount && !!visible;\n}\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 = getChildElement(children);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const elementRef = React.useRef<HTMLElement>();\n      const ref = useMergedRefs(elementRef, child.ref);\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 = elementRef.current;\n\n          if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n            return;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n          const applyInitialStyles = !visible && isFirstMount;\n          const skipAnimation = optionsRef.current.skipMotions;\n\n          if (!applyInitialStyles) {\n            handleMotionStart(direction);\n          }\n\n          const 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            return;\n          }\n\n          handleRef.current = handle;\n          handle.setMotionEndCallbacks(\n            () => handleMotionFinish(direction),\n            () => handleMotionCancel(direction),\n          );\n\n          if (skipAnimation) {\n            handle.finish();\n          }\n\n          return () => {\n            handle.cancel();\n          };\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        [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n      );\n\n      if (mounted) {\n        return React.cloneElement(child, { ref });\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n  );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","animateAtoms","useAnimateAtoms","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimation","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } 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 { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type 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: React.ReactElement;\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> = {}> = {\n  (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n  [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\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 = getChildElement(children);\n\n      const handleRef = useMotionImperativeRef(imperativeRef);\n      const elementRef = React.useRef<HTMLElement>();\n      const ref = useMergedRefs(elementRef, child.ref);\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 = elementRef.current;\n\n          if (!element) {\n            return;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\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          const 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            return;\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 () => {\n            handle.cancel();\n          };\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        [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n      );\n\n      if (mounted) {\n        return React.cloneElement(child, { ref });\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n  );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","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","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","animateAtoms","useAnimateAtoms","isFirstMount","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/hooks/useAnimateAtoms.js

@@ -2,14 +2,30 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useAnimateAtoms", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_ANIMATION_OPTIONS: function() {
+        return DEFAULT_ANIMATION_OPTIONS;
+    },
+    useAnimateAtoms: function() {
         return useAnimateAtoms;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const DEFAULT_ANIMATION_OPTIONS = {
+    fill: 'forwards'
+};
+// A motion atom's default reduced motion is a simple 1 ms duration.
+// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
+const DEFAULT_REDUCED_MOTION_ATOM = {
+    duration: 1
+};
 function useAnimateAtomsInSupportedEnvironment() {
     var _window_Animation;
     // eslint-disable-next-line @nx/workspace-no-restricted-globals
@@ -20,18 +36,22 @@ function useAnimateAtomsInSupportedEnvironment() {
         ];
         const { isReducedMotion } = options;
         const animations = atoms.map((motion)=>{
-            const { keyframes, ...params } = motion;
-            const animation = element.animate(keyframes, {
-                fill: 'forwards',
+            // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+            const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+            // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+            const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
+            const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
+            const animationParams = {
+                ...DEFAULT_ANIMATION_OPTIONS,
                 ...params,
-                ...isReducedMotion && {
-                    duration: 1
-                }
-            });
+                // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+                ...isReducedMotion && reducedMotionParams
+            };
+            const animation = element.animate(animationKeyframes, animationParams);
             if (SUPPORTS_PERSIST) {
                 animation.persist();
             } else {
-                const resultKeyframe = keyframes[keyframes.length - 1];
+                const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
                 var _element_style;
                 Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
             }

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\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.map(motion => {\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n          fill: 'forwards',\n\n          ...params,\n          ...(isReducedMotion && { duration: 1 }),\n        });\n\n        if (SUPPORTS_PERSIST) {\n          animation.persist();\n        } else {\n          const resultKeyframe = keyframes[keyframes.length - 1];\n          Object.assign(element.style ?? {}, resultKeyframe);\n        }\n\n        return animation;\n      });\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\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      };\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>();\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        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\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":["useAnimateAtoms","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","resultKeyframe","length","Object","assign","style","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\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.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        const animation = element.animate(animationKeyframes, animationParams);\n\n        if (SUPPORTS_PERSIST) {\n          animation.persist();\n        } else {\n          const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n          Object.assign(element.style ?? {}, resultKeyframe);\n        }\n\n        return animation;\n      });\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\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      };\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>();\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        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\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","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/slots/presenceMotionSlot.js

@@ -12,7 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function presenceMotionSlot(motion, options) {
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
     if (process.env.NODE_ENV !== 'production') {
         if (typeof as !== 'undefined') {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n  SLOT_ELEMENT_TYPE_SYMBOL,\n  SLOT_RENDER_FUNCTION_SYMBOL,\n  type SlotComponentType,\n  type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: keyof JSX.IntrinsicElements;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line deprecation/deprecation\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n    > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}
+{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n  SLOT_ELEMENT_TYPE_SYMBOL,\n  SLOT_RENDER_FUNCTION_SYMBOL,\n  type SlotComponentType,\n  type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: keyof JSX.IntrinsicElements;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n    > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.6.6",
+  "version": "9.6.8",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,8 +25,8 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.21.2",
-    "@fluentui/react-utilities": "^9.18.19",
+    "@fluentui/react-shared-contexts": "^9.22.0",
+    "@fluentui/react-utilities": "^9.18.21",
     "@swc/helpers": "^0.5.1",
     "react-is": "^17.0.2"
   },