@fluentui/react-motion 9.6.10 → 9.7.1

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Thu, 20 Mar 2025 09:34:07 GMT and should not be manually modified.
+This log was last generated on Thu, 27 Mar 2025 21:08:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.1)
+
+Thu, 27 Mar 2025 21:08:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.7.0..@fluentui/react-motion_v9.7.1)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.0)
+
+Wed, 26 Mar 2025 21:47:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.10..@fluentui/react-motion_v9.7.0)
+
+### Minor changes
+
+- fix(motion): make createPresenceComponentVariant support motion arrays ([PR #33996](https://github.com/microsoft/fluentui/pull/33996) by robertpenner@microsoft.com)
+
+### Patches
+
+- fix: handle error cases in "element.animate()" ([PR #34096](https://github.com/microsoft/fluentui/pull/34096) by seanmonahan@microsoft.com)
+
 ## [9.6.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.10)
 
-Thu, 20 Mar 2025 09:34:07 GMT 
+Thu, 20 Mar 2025 09:34:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.9..@fluentui/react-motion_v9.6.10)
 
 ### Patches

package/dist/index.d.ts

@@ -30,7 +30,17 @@ export declare function createMotionComponent<MotionParams extends Record<string
 
 export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;
 
-export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, override: PresenceOverride): PresenceComponent<MotionParams>;
+/**
+ * Create a new presence component based on another presence component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createPresenceComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new presence component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
+ */
+export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, variantParams: Partial<MotionParams>): PresenceComponent<MotionParams>;
 
 export declare const curves: {
     readonly curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
@@ -242,33 +252,4 @@ export declare type PresenceMotionSlotProps<MotionParams extends Record<string,
  */
 declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
 
-/**
- * @internal
- *
- * Override properties for presence transitions.
- *
- * @example <caption>Override duration for all transitions</caption>
- * ```
- * const override: PresenceOverride = {
- *  all: { duration: 1000 },
- * };
- * ```
- *
- * @example <caption>Override easing for exit transition</caption>
- * ```
- * const override: PresenceOverride = {
- *  exit: { easing: 'ease-out' },
- * };
- * ```
- */
-declare type PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;
-
-/**
- * @internal
- */
-declare type PresenceOverrideFields = {
-    duration: KeyframeEffectOptions['duration'];
-    easing: KeyframeEffectOptions['easing'];
-};
-
 export { }

package/lib/factories/createPresenceComponentVariant.js

@@ -1,23 +1,29 @@
 import { MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
 /**
  * @internal
- */ export function overridePresenceMotion(presenceMotion, override) {
-    return (...args)=>{
-        const { enter, exit } = presenceMotion(...args);
-        return {
-            enter: {
-                ...enter,
-                ...override.all,
-                ...override.enter
-            },
-            exit: {
-                ...exit,
-                ...override.all,
-                ...override.exit
-            }
-        };
-    };
+ *
+ * Create a variant function that wraps a presence function to customize it.
+ * The new presence function has the supplied variant params as defaults,
+ * but these can still be overridden by runtime params when the new function is called.
+ */ export function createPresenceFnVariant(presenceFn, variantParams) {
+    const variantFn = (runtimeParams)=>presenceFn({
+            ...variantParams,
+            ...runtimeParams
+        });
+    return variantFn;
 }
-export function createPresenceComponentVariant(component, override) {
-    return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));
+/**
+ * Create a new presence component based on another presence component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createPresenceComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new presence component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
+ */ export function createPresenceComponentVariant(component, variantParams) {
+    const originalFn = component[MOTION_DEFINITION];
+    // The variant params become new defaults, but they can still be be overridden by runtime params.
+    const variantFn = createPresenceFnVariant(originalFn, variantParams);
+    return createPresenceComponent(variantFn);
 }

package/lib/factories/createPresenceComponentVariant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n  duration: KeyframeEffectOptions['duration'];\n  easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n *  all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n *  exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceMotion: PresenceMotionFn<MotionParams>,\n  override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n  return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n    const { enter, exit } = presenceMotion(...args);\n\n    return {\n      enter: { ...enter, ...override.all, ...override.enter },\n      exit: { ...exit, ...override.all, ...override.exit },\n    };\n  };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n  return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","createPresenceComponentVariant","component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AA+B1G;;CAEC,GACD,OAAO,SAASC,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEA,OAAO,SAASE,+BACdC,SAA0C,EAC1CN,QAA0B;IAE1B,OAAOH,wBAAwBC,uBAAuBQ,SAAS,CAACV,kBAAkB,EAAEI;AACtF"}
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AAE1G;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,iGAAiG;IACjG,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}

package/lib/hooks/useAnimateAtoms.js

@@ -29,16 +29,24 @@ function useAnimateAtomsInSupportedEnvironment() {
                 // 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 = animationKeyframes[animationKeyframes.length - 1];
-                var _element_style;
-                Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
+            try {
+                // Firefox can throw an error when calling `element.animate()`.
+                // See: https://github.com/microsoft/fluentui/issues/33902
+                const animation = element.animate(animationKeyframes, animationParams);
+                if (SUPPORTS_PERSIST) {
+                    // Chromium browsers can return null when calling `element.animate()`.
+                    // See: https://github.com/microsoft/fluentui/issues/33902
+                    animation === null || animation === void 0 ? void 0 : animation.persist();
+                } else {
+                    const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
+                    var _element_style;
+                    Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
+                }
+                return animation;
+            } catch (e) {
+                return null;
             }
-            return animation;
-        });
+        }).filter((animation)=>!!animation);
         return {
             set playbackRate (rate){
                 animations.forEach((animation)=>{

package/lib/hooks/useAnimateAtoms.js.map

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

package/lib-commonjs/factories/createPresenceComponentVariant.js

@@ -12,28 +12,21 @@ _export(exports, {
     createPresenceComponentVariant: function() {
         return createPresenceComponentVariant;
     },
-    overridePresenceMotion: function() {
-        return overridePresenceMotion;
+    createPresenceFnVariant: function() {
+        return createPresenceFnVariant;
     }
 });
 const _createPresenceComponent = require("./createPresenceComponent");
-function overridePresenceMotion(presenceMotion, override) {
-    return (...args)=>{
-        const { enter, exit } = presenceMotion(...args);
-        return {
-            enter: {
-                ...enter,
-                ...override.all,
-                ...override.enter
-            },
-            exit: {
-                ...exit,
-                ...override.all,
-                ...override.exit
-            }
-        };
-    };
+function createPresenceFnVariant(presenceFn, variantParams) {
+    const variantFn = (runtimeParams)=>presenceFn({
+            ...variantParams,
+            ...runtimeParams
+        });
+    return variantFn;
 }
-function createPresenceComponentVariant(component, override) {
-    return (0, _createPresenceComponent.createPresenceComponent)(overridePresenceMotion(component[_createPresenceComponent.MOTION_DEFINITION], override));
+function createPresenceComponentVariant(component, variantParams) {
+    const originalFn = component[_createPresenceComponent.MOTION_DEFINITION];
+    // The variant params become new defaults, but they can still be be overridden by runtime params.
+    const variantFn = createPresenceFnVariant(originalFn, variantParams);
+    return (0, _createPresenceComponent.createPresenceComponent)(variantFn);
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n  duration: KeyframeEffectOptions['duration'];\n  easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n *  all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n *  exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceMotion: PresenceMotionFn<MotionParams>,\n  override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n  return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n    const { enter, exit } = presenceMotion(...args);\n\n    return {\n      enter: { ...enter, ...override.all, ...override.enter },\n      exit: { ...exit, ...override.all, ...override.exit },\n    };\n  };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n  return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["createPresenceComponentVariant","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","component","createPresenceComponent","MOTION_DEFINITION"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDgBA,8BAA8B;eAA9BA;;IAdAC,sBAAsB;eAAtBA;;;yCAlC8D;AAkCvE,SAASA,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEO,SAASN,+BACdQ,SAA0C,EAC1CL,QAA0B;IAE1B,OAAOM,IAAAA,gDAAuB,EAACR,uBAAuBO,SAAS,CAACE,0CAAiB,CAAC,EAAEP;AACtF"}
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCAT8D;AASvE,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,0CAAiB,CAAC;IAC/C,iGAAiG;IACjG,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}

package/lib-commonjs/hooks/useAnimateAtoms.js

@@ -48,16 +48,24 @@ function useAnimateAtomsInSupportedEnvironment() {
                 // 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 = animationKeyframes[animationKeyframes.length - 1];
-                var _element_style;
-                Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
+            try {
+                // Firefox can throw an error when calling `element.animate()`.
+                // See: https://github.com/microsoft/fluentui/issues/33902
+                const animation = element.animate(animationKeyframes, animationParams);
+                if (SUPPORTS_PERSIST) {
+                    // Chromium browsers can return null when calling `element.animate()`.
+                    // See: https://github.com/microsoft/fluentui/issues/33902
+                    animation === null || animation === void 0 ? void 0 : animation.persist();
+                } else {
+                    const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
+                    var _element_style;
+                    Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
+                }
+                return animation;
+            } catch (e) {
+                return null;
             }
-            return animation;
-        });
+        }).filter((animation)=>!!animation);
         return {
             set playbackRate (rate){
                 animations.forEach((animation)=>{

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.6.10",
+  "version": "9.7.1",
   "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.23.0",
-    "@fluentui/react-utilities": "^9.18.22",
+    "@fluentui/react-shared-contexts": "^9.23.1",
+    "@fluentui/react-utilities": "^9.18.23",
     "@swc/helpers": "^0.5.1",
     "react-is": "^17.0.2"
   },