@fluentui/react-motion 9.1.0 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 12 Jun 2024 13:16:08 GMT and should not be manually modified.
+This log was last generated on Mon, 17 Jun 2024 07:31:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.0)
+
+Mon, 17 Jun 2024 07:31:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.1.0..@fluentui/react-motion_v9.2.0)
+
+### Minor changes
+
+- feat: Implement `onMotionCancel` callback handler ([PR #31698](https://github.com/microsoft/fluentui/pull/31698) by lingfangao@hotmail.com)
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.1.0)
 
-Wed, 12 Jun 2024 13:16:08 GMT 
+Wed, 12 Jun 2024 13:17:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.0.0..@fluentui/react-motion_v9.1.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -51,6 +51,13 @@ export declare type MotionComponentProps = {
      * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
      */
     onMotionFinish?: (ev: null) => void;
+    /**
+     * Callback that is called when the whole motion is cancelled.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "cancel" events. The callback is
+     * triggered once all animations have been cancelled with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionCancel?: (ev: null) => void;
     /**
      * Callback that is called when the whole motion starts.
      *
@@ -115,6 +122,16 @@ export declare type PresenceComponentProps = {
     onMotionFinish?: (ev: null, data: {
         direction: 'enter' | 'exit';
     }) => void;
+    /**
+     * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
+     * emit a finish event but a specific cancel event
+     *
+     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
+     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionCancel?: (ev: null, data: {
+        direction: 'enter' | 'exit';
+    }) => void;
     /**
      * Callback that is called when the whole motion starts.
      *

package/lib/factories/createMotionComponent.js

@@ -10,7 +10,7 @@ import { getChildElement } from '../utils/getChildElement';
  * @param value - A motion definition.
  */ export function createMotionComponent(value) {
     const Atom = (props)=>{
-        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, ..._rest } = props;
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
         const params = _rest;
         const child = getChildElement(children);
         const handleRef = useMotionImperativeRef(imperativeRef);
@@ -23,6 +23,9 @@ import { getChildElement } from '../utils/getChildElement';
         const onMotionFinish = useEventCallback(()=>{
             onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
         });
+        const onMotionCancel = useEventCallback(()=>{
+            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
+        });
         useIsomorphicLayoutEffect(()=>{
             // Heads up!
             // We store the params in a ref to avoid re-rendering the component when the params change.
@@ -39,7 +42,7 @@ import { getChildElement } from '../utils/getChildElement';
                 const handle = animateAtoms(element, atoms, {
                     isReducedMotion: isReducedMotion()
                 });
-                handle.onfinish = onMotionFinish;
+                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
                 handleRef.current = handle;
                 return ()=>{
                     handle.cancel();
@@ -49,7 +52,8 @@ import { getChildElement } from '../utils/getChildElement';
             handleRef,
             isReducedMotion,
             onMotionFinish,
-            onMotionStart
+            onMotionStart,
+            onMotionCancel
         ]);
         return React.cloneElement(children, {
             ref: useMergedRefs(elementRef, child.ref)

package/lib/factories/createMotionComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\n\nexport type MotionComponentProps = {\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) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n) {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const child = getChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const elementRef = React.useRef<HTMLElement>();\n    const paramsRef = React.useRef<MotionParams>(params);\n\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      // Heads up!\n      // We store the params in a ref to avoid re-rendering the component when the params change.\n      paramsRef.current = params;\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = elementRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...paramsRef.current }) : value;\n        onMotionStart();\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n        handle.onfinish = onMotionFinish;\n        handleRef.current = handle;\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [handleRef, isReducedMotion, onMotionFinish, onMotionStart]);\n\n    return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n  };\n\n  return Atom;\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useIsReducedMotion","useMotionImperativeRef","animateAtoms","getChildElement","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","_rest","params","child","handleRef","elementRef","useRef","paramsRef","isReducedMotion","current","element","atoms","handle","onfinish","cancel","cloneElement","ref"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACvG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,2BAA2B;AA6B3D;;;;CAIC,GACD,OAAO,SAASC,sBACdC,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChC,GAAGC,OACJ,GAAGP;QACJ,MAAMQ,SAASD;QACf,MAAME,QAAQb,gBAAgBK;QAE9B,MAAMS,YAAYhB,uBAAuBQ;QACzC,MAAMS,aAAanB,MAAMoB,MAAM;QAC/B,MAAMC,YAAYrB,MAAMoB,MAAM,CAAeJ;QAE7C,MAAMM,kBAAkBrB;QAExB,MAAMY,gBAAgBhB,iBAAiB;YACrCiB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBd,iBAAiB;YACtCe,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAd,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3FuB,UAAUE,OAAO,GAAGP;QACtB;QAEAlB,0BAA0B;YACxB,MAAM0B,UAAUL,WAAWI,OAAO;YAElC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOnB,UAAU,aAAaA,MAAM;oBAAEkB;oBAAS,GAAGH,UAAUE,OAAO;gBAAC,KAAKjB;gBACvFO;gBAEA,MAAMa,SAASvB,aAAaqB,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBAEjFI,OAAOC,QAAQ,GAAGhB;gBAClBO,UAAUK,OAAO,GAAGG;gBAEpB,OAAO;oBACLA,OAAOE,MAAM;gBACf;YACF;QACF,GAAG;YAACV;YAAWI;YAAiBX;YAAgBE;SAAc;QAE9D,OAAOb,MAAM6B,YAAY,CAACpB,UAAU;YAAEqB,KAAK/B,cAAcoB,YAAYF,MAAMa,GAAG;QAAE;IAClF;IAEA,OAAOvB;AACT"}
+{"version":3,"sources":["createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\n\nexport type MotionComponentProps = {\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) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n) {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const child = getChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const elementRef = React.useRef<HTMLElement>();\n    const paramsRef = React.useRef<MotionParams>(params);\n\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      // Heads up!\n      // We store the params in a ref to avoid re-rendering the component when the params change.\n      paramsRef.current = params;\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = elementRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...paramsRef.current }) : value;\n        onMotionStart();\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n        handleRef.current = handle;\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n    return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n  };\n\n  return Atom;\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useIsReducedMotion","useMotionImperativeRef","animateAtoms","getChildElement","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","handleRef","elementRef","useRef","paramsRef","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","cancel","cloneElement","ref"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACvG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,2BAA2B;AAsC3D;;;;CAIC,GACD,OAAO,SAASC,sBACdC,KAA6D;IAE7D,MAAMC,OAAsDC,CAAAA;QAC1D,MAAM,EACJC,QAAQ,EACRC,aAAa,EACbC,gBAAgBC,kBAAkB,EAClCC,eAAeC,iBAAiB,EAChCC,gBAAgBC,kBAAkB,EAClC,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QACf,MAAME,QAAQf,gBAAgBK;QAE9B,MAAMW,YAAYlB,uBAAuBQ;QACzC,MAAMW,aAAarB,MAAMsB,MAAM;QAC/B,MAAMC,YAAYvB,MAAMsB,MAAM,CAAeJ;QAE7C,MAAMM,kBAAkBvB;QAExB,MAAMY,gBAAgBhB,iBAAiB;YACrCiB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBd,iBAAiB;YACtCe,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBlB,iBAAiB;YACtCmB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAlB,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3FyB,UAAUE,OAAO,GAAGP;QACtB;QAEApB,0BAA0B;YACxB,MAAM4B,UAAUL,WAAWI,OAAO;YAElC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOrB,UAAU,aAAaA,MAAM;oBAAEoB;oBAAS,GAAGH,UAAUE,OAAO;gBAAC,KAAKnB;gBACvFO;gBAEA,MAAMe,SAASzB,aAAauB,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBAEjFI,OAAOC,qBAAqB,CAAClB,gBAAgBI;gBAC7CK,UAAUK,OAAO,GAAGG;gBAEpB,OAAO;oBACLA,OAAOE,MAAM;gBACf;YACF;QACF,GAAG;YAACV;YAAWI;YAAiBb;YAAgBE;YAAeE;SAAe;QAE9E,OAAOf,MAAM+B,YAAY,CAACtB,UAAU;YAAEuB,KAAKjC,cAAcsB,YAAYF,MAAMa,GAAG;QAAE;IAClF;IAEA,OAAOzB;AACT"}

package/lib/factories/createPresenceComponent.js

@@ -16,7 +16,7 @@ export function createPresenceComponent(value) {
             ...itemContext,
             ...props
         };
-        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, visible, unmountOnExit, ..._rest } = merged;
+        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
         const params = _rest;
         const [mounted, setMounted] = useMountedState(visible, unmountOnExit);
         const child = getChildElement(children);
@@ -43,6 +43,11 @@ export function createPresenceComponent(value) {
                 onExit === null || onExit === void 0 ? void 0 : onExit();
             }
         });
+        const handleMotionCancel = useEventCallback((direction)=>{
+            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
+                direction
+            });
+        });
         useIsomorphicLayoutEffect(()=>{
             // Heads up!
             // We store the params in a ref to avoid re-rendering the component when the params change.
@@ -76,9 +81,7 @@ export function createPresenceComponent(value) {
                 return;
             }
             handleRef.current = handle;
-            handle.onfinish = ()=>{
-                handleMotionFinish(direction);
-            };
+            handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
             return ()=>{
                 handle.cancel();
             };
@@ -89,6 +92,7 @@ export function createPresenceComponent(value) {
             isReducedMotion,
             handleMotionFinish,
             handleMotionStart,
+            handleMotionCancel,
             visible
         ]);
         if (mounted) {

package/lib/factories/createPresenceComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn } from '../types';\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: 'enter' | 'exit' }) => 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: 'enter' | 'exit' }) => 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\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) {\n  const Presence: React.FC<PresenceComponentProps & MotionParams> = props => {\n    const itemContext = React.useContext(PresenceGroupChildContext);\n    const merged = { ...itemContext, ...props };\n\n    const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, visible, unmountOnExit, ..._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 }>({ appear, params });\n\n    const isFirstMount = useFirstMount();\n    const isReducedMotion = useIsReducedMotion();\n\n    const handleMotionStart = useEventCallback((direction: 'enter' | 'exit') => {\n      onMotionStart?.(null, { direction });\n    });\n    const handleMotionFinish = useEventCallback((direction: 'enter' | 'exit') => {\n      onMotionFinish?.(null, { direction });\n\n      if (direction === 'exit' && unmountOnExit) {\n        setMounted(false);\n        onExit?.();\n      }\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 };\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 = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n        const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n        const direction = visible ? 'enter' : 'exit';\n        const forceFinishMotion = !visible && isFirstMount;\n\n        if (!forceFinishMotion) {\n          handleMotionStart(direction);\n        }\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n        if (forceFinishMotion) {\n          // Heads up!\n          // .finish() is used there to skip animation on first mount, but apply animation styles immediately\n          handle.finish();\n          return;\n        }\n\n        handleRef.current = handle;\n        handle.onfinish = () => {\n          handleMotionFinish(direction);\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      [handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, visible],\n    );\n\n    if (mounted) {\n      return React.cloneElement(child, { ref });\n    }\n\n    return null;\n  };\n\n  return Presence;\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useIsReducedMotion","useMotionImperativeRef","useMountedState","animateAtoms","getChildElement","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Presence","props","itemContext","useContext","merged","children","imperativeRef","onExit","onMotionFinish","onMotionStart","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","isReducedMotion","handleMotionStart","direction","handleMotionFinish","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","finish","onfinish","cancel","cloneElement"],"mappings":"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"}
+{"version":3,"sources":["createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn } from '../types';\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: 'enter' | 'exit' }) => 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: 'enter' | 'exit' }) => 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: 'enter' | 'exit' }) => 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\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) {\n  const Presence: React.FC<PresenceComponentProps & MotionParams> = props => {\n    const itemContext = React.useContext(PresenceGroupChildContext);\n    const merged = { ...itemContext, ...props };\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 }>({ appear, params });\n\n    const isFirstMount = useFirstMount();\n    const isReducedMotion = useIsReducedMotion();\n\n    const handleMotionStart = useEventCallback((direction: 'enter' | 'exit') => {\n      onMotionStart?.(null, { direction });\n    });\n    const handleMotionFinish = useEventCallback((direction: 'enter' | 'exit') => {\n      onMotionFinish?.(null, { direction });\n\n      if (direction === 'exit' && unmountOnExit) {\n        setMounted(false);\n        onExit?.();\n      }\n    });\n\n    const handleMotionCancel = useEventCallback((direction: 'enter' | 'exit') => {\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 };\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 = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n        const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n        const direction = visible ? 'enter' : 'exit';\n        const forceFinishMotion = !visible && isFirstMount;\n\n        if (!forceFinishMotion) {\n          handleMotionStart(direction);\n        }\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n        if (forceFinishMotion) {\n          // Heads up!\n          // .finish() is used there to skip animation on first mount, but 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        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      [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  return Presence;\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useIsReducedMotion","useMotionImperativeRef","useMountedState","animateAtoms","getChildElement","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Presence","props","itemContext","useContext","merged","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"mappings":"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"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceMotion = {\n  enter: AtomMotion | AtomMotion[];\n  exit: AtomMotion | AtomMotion[];\n};\n\n/**\n * @internal\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[];\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  onfinish: () => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"mappings":"AAAA,WAkCE"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceMotion = {\n  enter: AtomMotion | AtomMotion[];\n  exit: AtomMotion | AtomMotion[];\n};\n\n/**\n * @internal\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[];\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":[],"mappings":"AAAA,WAkCE"}

package/lib/utils/animateAtoms.js

@@ -25,7 +25,7 @@ export function animateAtoms(element, value, options) {
                 animation.playbackRate = rate;
             });
         },
-        set onfinish (callback){
+        setMotionEndCallbacks (onfinish, oncancel) {
             // Heads up!
             // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is
             // necessary to avoid errors in tests.
@@ -34,17 +34,18 @@ export function animateAtoms(element, value, options) {
             // See https://github.com/jsdom/jsdom/issues/3429
             if (process.env.NODE_ENV === 'test') {
                 if (animations.length === 0) {
-                    callback();
+                    onfinish();
                     return;
                 }
             }
             Promise.all(animations.map((animation)=>animation.finished)).then(()=>{
-                callback();
+                onfinish();
             }).catch((err)=>{
                 var _element_ownerDocument_defaultView;
                 const DOMException = (_element_ownerDocument_defaultView = element.ownerDocument.defaultView) === null || _element_ownerDocument_defaultView === void 0 ? void 0 : _element_ownerDocument_defaultView.DOMException;
                 // Ignores "DOMException: The user aborted a request" that appears if animations are cancelled
-                if (DOMException && err instanceof DOMException) {
+                if (DOMException && err instanceof DOMException && err.name === 'AbortError') {
+                    oncancel();
                     return;
                 }
                 throw err;

package/lib/utils/animateAtoms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["animateAtoms.ts"],"sourcesContent":["import type { AnimationHandle, AtomMotion } from '../types';\n\nexport function animateAtoms(\n  element: HTMLElement,\n  value: AtomMotion | AtomMotion[],\n  options: {\n    isReducedMotion: boolean;\n  },\n): AnimationHandle {\n  // Heads up!\n  // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. The same is true for\n  // older browsers that are out of browser support matrix. In these cases, the animation will be a no-op.\n  const SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n  const atoms = Array.isArray(value) ? value : [value];\n  const { isReducedMotion } = options;\n\n  const animations = SUPPORTS_WEB_ANIMATIONS\n    ? 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        animation.persist();\n\n        return animation;\n      })\n    : [];\n\n  return {\n    set playbackRate(rate: number) {\n      animations.forEach(animation => {\n        animation.playbackRate = rate;\n      });\n    },\n    set onfinish(callback: () => void) {\n      // Heads up!\n      // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is\n      // necessary to avoid errors in tests.\n      //\n      // See https://github.com/microsoft/fluentui/issues/31593\n      // See https://github.com/jsdom/jsdom/issues/3429\n      if (process.env.NODE_ENV === 'test') {\n        if (animations.length === 0) {\n          callback();\n          return;\n        }\n      }\n\n      Promise.all(animations.map(animation => animation.finished))\n        .then(() => {\n          callback();\n        })\n        .catch((err: unknown) => {\n          const DOMException = element.ownerDocument.defaultView?.DOMException;\n\n          // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n          if (DOMException && err instanceof DOMException) {\n            return;\n          }\n\n          throw err;\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"],"names":["animateAtoms","element","value","options","SUPPORTS_WEB_ANIMATIONS","animate","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","fill","duration","persist","playbackRate","rate","forEach","onfinish","callback","process","env","NODE_ENV","length","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","cancel","pause","play","finish"],"mappings":"AAEA,OAAO,SAASA,aACdC,OAAoB,EACpBC,KAAgC,EAChCC,OAEC;IAED,YAAY;IACZ,iHAAiH;IACjH,wGAAwG;IACxG,MAAMC,0BAA0B,OAAOH,QAAQI,OAAO,KAAK;IAE3D,MAAMC,QAAQC,MAAMC,OAAO,CAACN,SAASA,QAAQ;QAACA;KAAM;IACpD,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAE5B,MAAMO,aAAaN,0BACfE,MAAMK,GAAG,CAACC,CAAAA;QACR,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;QACjC,MAAMG,YAAYd,QAAQI,OAAO,CAACQ,WAAW;YAC3CG,MAAM;YAEN,GAAGF,MAAM;YACT,GAAIL,mBAAmB;gBAAEQ,UAAU;YAAE,CAAC;QACxC;QAEAF,UAAUG,OAAO;QAEjB,OAAOH;IACT,KACA,EAAE;IAEN,OAAO;QACL,IAAII,cAAaC,KAAc;YAC7BV,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUI,YAAY,GAAGC;YAC3B;QACF;QACA,IAAIE,UAASC,SAAsB;YACjC,YAAY;YACZ,0GAA0G;YAC1G,sCAAsC;YACtC,EAAE;YACF,yDAAyD;YACzD,iDAAiD;YACjD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;gBACnC,IAAIhB,WAAWiB,MAAM,KAAK,GAAG;oBAC3BJ;oBACA;gBACF;YACF;YAEAK,QAAQC,GAAG,CAACnB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUe,QAAQ,GACvDC,IAAI,CAAC;gBACJR;YACF,GACCS,KAAK,CAAC,CAACC;oBACehC;gBAArB,MAAMiC,gBAAejC,qCAAAA,QAAQkC,aAAa,CAACC,WAAW,cAAjCnC,yDAAAA,mCAAmCiC,YAAY;gBAEpE,8FAA8F;gBAC9F,IAAIA,gBAAgBD,eAAeC,cAAc;oBAC/C;gBACF;gBAEA,MAAMD;YACR;QACJ;QAEAI,QAAQ;YACN3B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUsB,MAAM;YAClB;QACF;QACAC,OAAO;YACL5B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUuB,KAAK;YACjB;QACF;QACAC,MAAM;YACJ7B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUwB,IAAI;YAChB;QACF;QACAC,QAAQ;YACN9B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUyB,MAAM;YAClB;QACF;IACF;AACF"}
+{"version":3,"sources":["animateAtoms.ts"],"sourcesContent":["import type { AnimationHandle, AtomMotion } from '../types';\n\nexport function animateAtoms(\n  element: HTMLElement,\n  value: AtomMotion | AtomMotion[],\n  options: {\n    isReducedMotion: boolean;\n  },\n): AnimationHandle {\n  // Heads up!\n  // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. The same is true for\n  // older browsers that are out of browser support matrix. In these cases, the animation will be a no-op.\n  const SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n  const atoms = Array.isArray(value) ? value : [value];\n  const { isReducedMotion } = options;\n\n  const animations = SUPPORTS_WEB_ANIMATIONS\n    ? 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        animation.persist();\n\n        return animation;\n      })\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      // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is\n      // necessary to avoid errors in tests.\n      //\n      // See https://github.com/microsoft/fluentui/issues/31593\n      // See https://github.com/jsdom/jsdom/issues/3429\n      if (process.env.NODE_ENV === 'test') {\n        if (animations.length === 0) {\n          onfinish();\n          return;\n        }\n      }\n\n      Promise.all(animations.map(animation => animation.finished))\n        .then(() => {\n          onfinish();\n        })\n        .catch((err: unknown) => {\n          const DOMException = element.ownerDocument.defaultView?.DOMException;\n\n          // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n          if (DOMException && err instanceof DOMException && err.name === 'AbortError') {\n            oncancel();\n            return;\n          }\n\n          throw err;\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"],"names":["animateAtoms","element","value","options","SUPPORTS_WEB_ANIMATIONS","animate","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","process","env","NODE_ENV","length","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish"],"mappings":"AAEA,OAAO,SAASA,aACdC,OAAoB,EACpBC,KAAgC,EAChCC,OAEC;IAED,YAAY;IACZ,iHAAiH;IACjH,wGAAwG;IACxG,MAAMC,0BAA0B,OAAOH,QAAQI,OAAO,KAAK;IAE3D,MAAMC,QAAQC,MAAMC,OAAO,CAACN,SAASA,QAAQ;QAACA;KAAM;IACpD,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAE5B,MAAMO,aAAaN,0BACfE,MAAMK,GAAG,CAACC,CAAAA;QACR,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;QACjC,MAAMG,YAAYd,QAAQI,OAAO,CAACQ,WAAW;YAC3CG,MAAM;YAEN,GAAGF,MAAM;YACT,GAAIL,mBAAmB;gBAAEQ,UAAU;YAAE,CAAC;QACxC;QAEAF,UAAUG,OAAO;QAEjB,OAAOH;IACT,KACA,EAAE;IAEN,OAAO;QACL,IAAII,cAAaC,KAAc;YAC7BV,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUI,YAAY,GAAGC;YAC3B;QACF;QACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;YAC9D,YAAY;YACZ,0GAA0G;YAC1G,sCAAsC;YACtC,EAAE;YACF,yDAAyD;YACzD,iDAAiD;YACjD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;gBACnC,IAAIjB,WAAWkB,MAAM,KAAK,GAAG;oBAC3BL;oBACA;gBACF;YACF;YAEAM,QAAQC,GAAG,CAACpB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUgB,QAAQ,GACvDC,IAAI,CAAC;gBACJT;YACF,GACCU,KAAK,CAAC,CAACC;oBACejC;gBAArB,MAAMkC,gBAAelC,qCAAAA,QAAQmC,aAAa,CAACC,WAAW,cAAjCpC,yDAAAA,mCAAmCkC,YAAY;gBAEpE,8FAA8F;gBAC9F,IAAIA,gBAAgBD,eAAeC,gBAAgBD,IAAII,IAAI,KAAK,cAAc;oBAC5Ed;oBACA;gBACF;gBAEA,MAAMU;YACR;QACJ;QAEAK,QAAQ;YACN7B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUwB,MAAM;YAClB;QACF;QACAC,OAAO;YACL9B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAUyB,KAAK;YACjB;QACF;QACAC,MAAM;YACJ/B,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAU0B,IAAI;YAChB;QACF;QACAC,QAAQ;YACNhC,WAAWW,OAAO,CAACN,CAAAA;gBACjBA,UAAU2B,MAAM;YAClB;QACF;IACF;AACF"}

package/lib-commonjs/factories/createMotionComponent.js

@@ -17,7 +17,7 @@ const _animateAtoms = require("../utils/animateAtoms");
 const _getChildElement = require("../utils/getChildElement");
 function createMotionComponent(value) {
     const Atom = (props)=>{
-        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, ..._rest } = props;
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
         const params = _rest;
         const child = (0, _getChildElement.getChildElement)(children);
         const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
@@ -30,6 +30,9 @@ function createMotionComponent(value) {
         const onMotionFinish = (0, _reactutilities.useEventCallback)(()=>{
             onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
         });
+        const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
+            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
+        });
         (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
             // Heads up!
             // We store the params in a ref to avoid re-rendering the component when the params change.
@@ -46,7 +49,7 @@ function createMotionComponent(value) {
                 const handle = (0, _animateAtoms.animateAtoms)(element, atoms, {
                     isReducedMotion: isReducedMotion()
                 });
-                handle.onfinish = onMotionFinish;
+                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
                 handleRef.current = handle;
                 return ()=>{
                     handle.cancel();
@@ -56,7 +59,8 @@ function createMotionComponent(value) {
             handleRef,
             isReducedMotion,
             onMotionFinish,
-            onMotionStart
+            onMotionStart,
+            onMotionCancel
         ]);
         return /*#__PURE__*/ _react.cloneElement(children, {
             ref: (0, _reactutilities.useMergedRefs)(elementRef, child.ref)

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

@@ -1 +1 @@
-{"version":3,"sources":["createMotionComponent.js"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */ export function createMotionComponent(value) {\n    const Atom = (props)=>{\n        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, ..._rest } = props;\n        const params = _rest;\n        const child = getChildElement(children);\n        const handleRef = useMotionImperativeRef(imperativeRef);\n        const elementRef = React.useRef();\n        const paramsRef = React.useRef(params);\n        const isReducedMotion = useIsReducedMotion();\n        const onMotionStart = useEventCallback(()=>{\n            onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);\n        });\n        const onMotionFinish = useEventCallback(()=>{\n            onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);\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            paramsRef.current = params;\n        });\n        useIsomorphicLayoutEffect(()=>{\n            const element = elementRef.current;\n            if (element) {\n                const atoms = typeof value === 'function' ? value({\n                    element,\n                    ...paramsRef.current\n                }) : value;\n                onMotionStart();\n                const handle = animateAtoms(element, atoms, {\n                    isReducedMotion: isReducedMotion()\n                });\n                handle.onfinish = onMotionFinish;\n                handleRef.current = handle;\n                return ()=>{\n                    handle.cancel();\n                };\n            }\n        }, [\n            handleRef,\n            isReducedMotion,\n            onMotionFinish,\n            onMotionStart\n        ]);\n        return React.cloneElement(children, {\n            ref: useMergedRefs(elementRef, child.ref)\n        });\n    };\n    return Atom;\n}\n"],"names":["createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","_rest","params","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","React","useRef","paramsRef","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","animateAtoms","onfinish","cancel","cloneElement","ref","useMergedRefs"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;gCAVuD;iEACpD;oCACY;wCACI;8BACV;iCACG;AAKrB,SAASA,sBAAsBC,KAAK;IAC3C,MAAMC,OAAO,CAACC;QACV,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,gBAAgBC,kBAAkB,EAAEC,eAAeC,iBAAiB,EAAE,GAAGC,OAAO,GAAGP;QACpH,MAAMQ,SAASD;QACf,MAAME,QAAQC,IAAAA,gCAAe,EAACT;QAC9B,MAAMU,YAAYC,IAAAA,8CAAsB,EAACV;QACzC,MAAMW,aAAaC,OAAMC,MAAM;QAC/B,MAAMC,YAAYF,OAAMC,MAAM,CAACP;QAC/B,MAAMS,kBAAkBC,IAAAA,sCAAkB;QAC1C,MAAMb,gBAAgBc,IAAAA,gCAAgB,EAAC;YACnCb,sBAAsB,QAAQA,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkB;QAC5F;QACA,MAAMH,iBAAiBgB,IAAAA,gCAAgB,EAAC;YACpCf,uBAAuB,QAAQA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB;QAC/F;QACAgB,IAAAA,yCAAyB,EAAC;YACtB,YAAY;YACZ,2FAA2F;YAC3FJ,UAAUK,OAAO,GAAGb;QACxB;QACAY,IAAAA,yCAAyB,EAAC;YACtB,MAAME,UAAUT,WAAWQ,OAAO;YAClC,IAAIC,SAAS;gBACT,MAAMC,QAAQ,OAAOzB,UAAU,aAAaA,MAAM;oBAC9CwB;oBACA,GAAGN,UAAUK,OAAO;gBACxB,KAAKvB;gBACLO;gBACA,MAAMmB,SAASC,IAAAA,0BAAY,EAACH,SAASC,OAAO;oBACxCN,iBAAiBA;gBACrB;gBACAO,OAAOE,QAAQ,GAAGvB;gBAClBQ,UAAUU,OAAO,GAAGG;gBACpB,OAAO;oBACHA,OAAOG,MAAM;gBACjB;YACJ;QACJ,GAAG;YACChB;YACAM;YACAd;YACAE;SACH;QACD,qBAAOS,OAAMc,YAAY,CAAC3B,UAAU;YAChC4B,KAAKC,IAAAA,6BAAa,EAACjB,YAAYJ,MAAMoB,GAAG;QAC5C;IACJ;IACA,OAAO9B;AACX"}
+{"version":3,"sources":["createMotionComponent.js"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */ export function createMotionComponent(value) {\n    const Atom = (props)=>{\n        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;\n        const params = _rest;\n        const child = getChildElement(children);\n        const handleRef = useMotionImperativeRef(imperativeRef);\n        const elementRef = React.useRef();\n        const paramsRef = React.useRef(params);\n        const isReducedMotion = useIsReducedMotion();\n        const onMotionStart = useEventCallback(()=>{\n            onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);\n        });\n        const onMotionFinish = useEventCallback(()=>{\n            onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);\n        });\n        const onMotionCancel = useEventCallback(()=>{\n            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);\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            paramsRef.current = params;\n        });\n        useIsomorphicLayoutEffect(()=>{\n            const element = elementRef.current;\n            if (element) {\n                const atoms = typeof value === 'function' ? value({\n                    element,\n                    ...paramsRef.current\n                }) : value;\n                onMotionStart();\n                const handle = animateAtoms(element, atoms, {\n                    isReducedMotion: isReducedMotion()\n                });\n                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n                handleRef.current = handle;\n                return ()=>{\n                    handle.cancel();\n                };\n            }\n        }, [\n            handleRef,\n            isReducedMotion,\n            onMotionFinish,\n            onMotionStart,\n            onMotionCancel\n        ]);\n        return React.cloneElement(children, {\n            ref: useMergedRefs(elementRef, child.ref)\n        });\n    };\n    return Atom;\n}\n"],"names":["createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","React","useRef","paramsRef","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","animateAtoms","setMotionEndCallbacks","cancel","cloneElement","ref","useMergedRefs"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;gCAVuD;iEACpD;oCACY;wCACI;8BACV;iCACG;AAKrB,SAASA,sBAAsBC,KAAK;IAC3C,MAAMC,OAAO,CAACC;QACV,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,gBAAgBC,kBAAkB,EAAEC,eAAeC,iBAAiB,EAAEC,gBAAgBC,kBAAkB,EAAE,GAAGC,OAAO,GAAGT;QACxJ,MAAMU,SAASD;QACf,MAAME,QAAQC,IAAAA,gCAAe,EAACX;QAC9B,MAAMY,YAAYC,IAAAA,8CAAsB,EAACZ;QACzC,MAAMa,aAAaC,OAAMC,MAAM;QAC/B,MAAMC,YAAYF,OAAMC,MAAM,CAACP;QAC/B,MAAMS,kBAAkBC,IAAAA,sCAAkB;QAC1C,MAAMf,gBAAgBgB,IAAAA,gCAAgB,EAAC;YACnCf,sBAAsB,QAAQA,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkB;QAC5F;QACA,MAAMH,iBAAiBkB,IAAAA,gCAAgB,EAAC;YACpCjB,uBAAuB,QAAQA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB;QAC/F;QACA,MAAMG,iBAAiBc,IAAAA,gCAAgB,EAAC;YACpCb,uBAAuB,QAAQA,uBAAuB,KAAK,IAAI,KAAK,IAAIA,mBAAmB;QAC/F;QACAc,IAAAA,yCAAyB,EAAC;YACtB,YAAY;YACZ,2FAA2F;YAC3FJ,UAAUK,OAAO,GAAGb;QACxB;QACAY,IAAAA,yCAAyB,EAAC;YACtB,MAAME,UAAUT,WAAWQ,OAAO;YAClC,IAAIC,SAAS;gBACT,MAAMC,QAAQ,OAAO3B,UAAU,aAAaA,MAAM;oBAC9C0B;oBACA,GAAGN,UAAUK,OAAO;gBACxB,KAAKzB;gBACLO;gBACA,MAAMqB,SAASC,IAAAA,0BAAY,EAACH,SAASC,OAAO;oBACxCN,iBAAiBA;gBACrB;gBACAO,OAAOE,qBAAqB,CAACzB,gBAAgBI;gBAC7CM,UAAUU,OAAO,GAAGG;gBACpB,OAAO;oBACHA,OAAOG,MAAM;gBACjB;YACJ;QACJ,GAAG;YACChB;YACAM;YACAhB;YACAE;YACAE;SACH;QACD,qBAAOS,OAAMc,YAAY,CAAC7B,UAAU;YAChC8B,KAAKC,IAAAA,6BAAa,EAACjB,YAAYJ,MAAMoB,GAAG;QAC5C;IACJ;IACA,OAAOhC;AACX"}

package/lib-commonjs/factories/createPresenceComponent.js

@@ -27,7 +27,7 @@ function createPresenceComponent(value) {
             ...itemContext,
             ...props
         };
-        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, visible, unmountOnExit, ..._rest } = merged;
+        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
         const params = _rest;
         const [mounted, setMounted] = (0, _useMountedState.useMountedState)(visible, unmountOnExit);
         const child = (0, _getChildElement.getChildElement)(children);
@@ -54,6 +54,11 @@ function createPresenceComponent(value) {
                 onExit === null || onExit === void 0 ? void 0 : onExit();
             }
         });
+        const handleMotionCancel = (0, _reactutilities.useEventCallback)((direction)=>{
+            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
+                direction
+            });
+        });
         (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
             // Heads up!
             // We store the params in a ref to avoid re-rendering the component when the params change.
@@ -87,9 +92,7 @@ function createPresenceComponent(value) {
                 return;
             }
             handleRef.current = handle;
-            handle.onfinish = ()=>{
-                handleMotionFinish(direction);
-            };
+            handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
             return ()=>{
                 handle.cancel();
             };
@@ -99,6 +102,7 @@ function createPresenceComponent(value) {
             isReducedMotion,
             handleMotionFinish,
             handleMotionStart,
+            handleMotionCancel,
             visible
         ]);
         if (mounted) {

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

@@ -1 +1 @@
-{"version":3,"sources":["createPresenceComponent.js"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nfunction shouldSkipAnimation(appear, isFirstMount, visible) {\n    return !appear && isFirstMount && !!visible;\n}\nexport function createPresenceComponent(value) {\n    const Presence = (props)=>{\n        const itemContext = React.useContext(PresenceGroupChildContext);\n        const merged = {\n            ...itemContext,\n            ...props\n        };\n        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, visible, unmountOnExit, ..._rest } = merged;\n        const params = _rest;\n        const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n        const child = getChildElement(children);\n        const handleRef = useMotionImperativeRef(imperativeRef);\n        const elementRef = React.useRef();\n        const ref = useMergedRefs(elementRef, child.ref);\n        const optionsRef = React.useRef({\n            appear,\n            params\n        });\n        const isFirstMount = useFirstMount();\n        const isReducedMotion = useIsReducedMotion();\n        const handleMotionStart = useEventCallback((direction)=>{\n            onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {\n                direction\n            });\n        });\n        const handleMotionFinish = useEventCallback((direction)=>{\n            onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {\n                direction\n            });\n            if (direction === 'exit' && unmountOnExit) {\n                setMounted(false);\n                onExit === null || onExit === void 0 ? void 0 : onExit();\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 = {\n                appear,\n                params\n            };\n        });\n        useIsomorphicLayoutEffect(()=>{\n            const element = elementRef.current;\n            if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n                return;\n            }\n            const presenceMotion = typeof value === 'function' ? value({\n                element,\n                ...optionsRef.current.params\n            }) : value;\n            const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n            const direction = visible ? 'enter' : 'exit';\n            const forceFinishMotion = !visible && isFirstMount;\n            if (!forceFinishMotion) {\n                handleMotionStart(direction);\n            }\n            const handle = animateAtoms(element, atoms, {\n                isReducedMotion: isReducedMotion()\n            });\n            if (forceFinishMotion) {\n                // Heads up!\n                // .finish() is used there to skip animation on first mount, but apply animation styles immediately\n                handle.finish();\n                return;\n            }\n            handleRef.current = handle;\n            handle.onfinish = ()=>{\n                handleMotionFinish(direction);\n            };\n            return ()=>{\n                handle.cancel();\n            };\n        }, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n            handleRef,\n            isReducedMotion,\n            handleMotionFinish,\n            handleMotionStart,\n            visible\n        ]);\n        if (mounted) {\n            return React.cloneElement(child, {\n                ref\n            });\n        }\n        return null;\n    };\n    return Presence;\n}\n"],"names":["createPresenceComponent","shouldSkipAnimation","appear","isFirstMount","visible","value","Presence","props","itemContext","React","useContext","PresenceGroupChildContext","merged","children","imperativeRef","onExit","onMotionFinish","onMotionStart","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","animateAtoms","finish","onfinish","cancel","cloneElement"],"mappings":"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"}
+{"version":3,"sources":["createPresenceComponent.js"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nfunction shouldSkipAnimation(appear, isFirstMount, visible) {\n    return !appear && isFirstMount && !!visible;\n}\nexport function createPresenceComponent(value) {\n    const Presence = (props)=>{\n        const itemContext = React.useContext(PresenceGroupChildContext);\n        const merged = {\n            ...itemContext,\n            ...props\n        };\n        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;\n        const params = _rest;\n        const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n        const child = getChildElement(children);\n        const handleRef = useMotionImperativeRef(imperativeRef);\n        const elementRef = React.useRef();\n        const ref = useMergedRefs(elementRef, child.ref);\n        const optionsRef = React.useRef({\n            appear,\n            params\n        });\n        const isFirstMount = useFirstMount();\n        const isReducedMotion = useIsReducedMotion();\n        const handleMotionStart = useEventCallback((direction)=>{\n            onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {\n                direction\n            });\n        });\n        const handleMotionFinish = useEventCallback((direction)=>{\n            onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {\n                direction\n            });\n            if (direction === 'exit' && unmountOnExit) {\n                setMounted(false);\n                onExit === null || onExit === void 0 ? void 0 : onExit();\n            }\n        });\n        const handleMotionCancel = useEventCallback((direction)=>{\n            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {\n                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 = {\n                appear,\n                params\n            };\n        });\n        useIsomorphicLayoutEffect(()=>{\n            const element = elementRef.current;\n            if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n                return;\n            }\n            const presenceMotion = typeof value === 'function' ? value({\n                element,\n                ...optionsRef.current.params\n            }) : value;\n            const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n            const direction = visible ? 'enter' : 'exit';\n            const forceFinishMotion = !visible && isFirstMount;\n            if (!forceFinishMotion) {\n                handleMotionStart(direction);\n            }\n            const handle = animateAtoms(element, atoms, {\n                isReducedMotion: isReducedMotion()\n            });\n            if (forceFinishMotion) {\n                // Heads up!\n                // .finish() is used there to skip animation on first mount, but apply animation styles immediately\n                handle.finish();\n                return;\n            }\n            handleRef.current = handle;\n            handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));\n            return ()=>{\n                handle.cancel();\n            };\n        }, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        [\n            handleRef,\n            isReducedMotion,\n            handleMotionFinish,\n            handleMotionStart,\n            handleMotionCancel,\n            visible\n        ]);\n        if (mounted) {\n            return React.cloneElement(child, {\n                ref\n            });\n        }\n        return null;\n    };\n    return Presence;\n}\n"],"names":["createPresenceComponent","shouldSkipAnimation","appear","isFirstMount","visible","value","Presence","props","itemContext","React","useContext","PresenceGroupChildContext","merged","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","animateAtoms","finish","setMotionEndCallbacks","cancel","cloneElement"],"mappings":"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"}

package/lib-commonjs/utils/animateAtoms.js

@@ -35,7 +35,7 @@ function animateAtoms(element, value, options) {
                 animation.playbackRate = rate;
             });
         },
-        set onfinish (callback){
+        setMotionEndCallbacks (onfinish, oncancel) {
             // Heads up!
             // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is
             // necessary to avoid errors in tests.
@@ -44,17 +44,18 @@ function animateAtoms(element, value, options) {
             // See https://github.com/jsdom/jsdom/issues/3429
             if (process.env.NODE_ENV === 'test') {
                 if (animations.length === 0) {
-                    callback();
+                    onfinish();
                     return;
                 }
             }
             Promise.all(animations.map((animation)=>animation.finished)).then(()=>{
-                callback();
+                onfinish();
             }).catch((err)=>{
                 var _element_ownerDocument_defaultView;
                 const DOMException = (_element_ownerDocument_defaultView = element.ownerDocument.defaultView) === null || _element_ownerDocument_defaultView === void 0 ? void 0 : _element_ownerDocument_defaultView.DOMException;
                 // Ignores "DOMException: The user aborted a request" that appears if animations are cancelled
-                if (DOMException && err instanceof DOMException) {
+                if (DOMException && err instanceof DOMException && err.name === 'AbortError') {
+                    oncancel();
                     return;
                 }
                 throw err;

package/lib-commonjs/utils/animateAtoms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["animateAtoms.js"],"sourcesContent":["export function animateAtoms(element, value, options) {\n    // Heads up!\n    // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. The same is true for\n    // older browsers that are out of browser support matrix. In these cases, the animation will be a no-op.\n    const SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n    const atoms = Array.isArray(value) ? value : [\n        value\n    ];\n    const { isReducedMotion } = options;\n    const animations = SUPPORTS_WEB_ANIMATIONS ? atoms.map((motion)=>{\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n            fill: 'forwards',\n            ...params,\n            ...isReducedMotion && {\n                duration: 1\n            }\n        });\n        animation.persist();\n        return animation;\n    }) : [];\n    return {\n        set playbackRate (rate){\n            animations.forEach((animation)=>{\n                animation.playbackRate = rate;\n            });\n        },\n        set onfinish (callback){\n            // Heads up!\n            // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is\n            // necessary to avoid errors in tests.\n            //\n            // See https://github.com/microsoft/fluentui/issues/31593\n            // See https://github.com/jsdom/jsdom/issues/3429\n            if (process.env.NODE_ENV === 'test') {\n                if (animations.length === 0) {\n                    callback();\n                    return;\n                }\n            }\n            Promise.all(animations.map((animation)=>animation.finished)).then(()=>{\n                callback();\n            }).catch((err)=>{\n                var _element_ownerDocument_defaultView;\n                const DOMException = (_element_ownerDocument_defaultView = element.ownerDocument.defaultView) === null || _element_ownerDocument_defaultView === void 0 ? void 0 : _element_ownerDocument_defaultView.DOMException;\n                // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n                if (DOMException && err instanceof DOMException) {\n                    return;\n                }\n                throw err;\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"],"names":["animateAtoms","element","value","options","SUPPORTS_WEB_ANIMATIONS","animate","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","fill","duration","persist","playbackRate","rate","forEach","onfinish","callback","process","env","NODE_ENV","length","Promise","all","finished","then","catch","err","_element_ownerDocument_defaultView","DOMException","ownerDocument","defaultView","cancel","pause","play","finish"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,aAAaC,OAAO,EAAEC,KAAK,EAAEC,OAAO;IAChD,YAAY;IACZ,iHAAiH;IACjH,wGAAwG;IACxG,MAAMC,0BAA0B,OAAOH,QAAQI,OAAO,KAAK;IAC3D,MAAMC,QAAQC,MAAMC,OAAO,CAACN,SAASA,QAAQ;QACzCA;KACH;IACD,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAC5B,MAAMO,aAAaN,0BAA0BE,MAAMK,GAAG,CAAC,CAACC;QACpD,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;QACjC,MAAMG,YAAYd,QAAQI,OAAO,CAACQ,WAAW;YACzCG,MAAM;YACN,GAAGF,MAAM;YACT,GAAGL,mBAAmB;gBAClBQ,UAAU;YACd,CAAC;QACL;QACAF,UAAUG,OAAO;QACjB,OAAOH;IACX,KAAK,EAAE;IACP,OAAO;QACH,IAAII,cAAcC,KAAK;YACnBV,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAUI,YAAY,GAAGC;YAC7B;QACJ;QACA,IAAIE,UAAUC,SAAS;YACnB,YAAY;YACZ,0GAA0G;YAC1G,sCAAsC;YACtC,EAAE;YACF,yDAAyD;YACzD,iDAAiD;YACjD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;gBACjC,IAAIhB,WAAWiB,MAAM,KAAK,GAAG;oBACzBJ;oBACA;gBACJ;YACJ;YACAK,QAAQC,GAAG,CAACnB,WAAWC,GAAG,CAAC,CAACI,YAAYA,UAAUe,QAAQ,GAAGC,IAAI,CAAC;gBAC9DR;YACJ,GAAGS,KAAK,CAAC,CAACC;gBACN,IAAIC;gBACJ,MAAMC,eAAe,AAACD,CAAAA,qCAAqCjC,QAAQmC,aAAa,CAACC,WAAW,AAAD,MAAO,QAAQH,uCAAuC,KAAK,IAAI,KAAK,IAAIA,mCAAmCC,YAAY;gBAClN,8FAA8F;gBAC9F,IAAIA,gBAAgBF,eAAeE,cAAc;oBAC7C;gBACJ;gBACA,MAAMF;YACV;QACJ;QACAK,QAAQ;YACJ5B,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAUuB,MAAM;YACpB;QACJ;QACAC,OAAO;YACH7B,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAUwB,KAAK;YACnB;QACJ;QACAC,MAAM;YACF9B,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAUyB,IAAI;YAClB;QACJ;QACAC,QAAQ;YACJ/B,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAU0B,MAAM;YACpB;QACJ;IACJ;AACJ"}
+{"version":3,"sources":["animateAtoms.js"],"sourcesContent":["export function animateAtoms(element, value, options) {\n    // Heads up!\n    // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. The same is true for\n    // older browsers that are out of browser support matrix. In these cases, the animation will be a no-op.\n    const SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n    const atoms = Array.isArray(value) ? value : [\n        value\n    ];\n    const { isReducedMotion } = options;\n    const animations = SUPPORTS_WEB_ANIMATIONS ? atoms.map((motion)=>{\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n            fill: 'forwards',\n            ...params,\n            ...isReducedMotion && {\n                duration: 1\n            }\n        });\n        animation.persist();\n        return animation;\n    }) : [];\n    return {\n        set playbackRate (rate){\n            animations.forEach((animation)=>{\n                animation.playbackRate = rate;\n            });\n        },\n        setMotionEndCallbacks (onfinish, oncancel) {\n            // Heads up!\n            // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is\n            // necessary to avoid errors in tests.\n            //\n            // See https://github.com/microsoft/fluentui/issues/31593\n            // See https://github.com/jsdom/jsdom/issues/3429\n            if (process.env.NODE_ENV === 'test') {\n                if (animations.length === 0) {\n                    onfinish();\n                    return;\n                }\n            }\n            Promise.all(animations.map((animation)=>animation.finished)).then(()=>{\n                onfinish();\n            }).catch((err)=>{\n                var _element_ownerDocument_defaultView;\n                const DOMException = (_element_ownerDocument_defaultView = element.ownerDocument.defaultView) === null || _element_ownerDocument_defaultView === void 0 ? void 0 : _element_ownerDocument_defaultView.DOMException;\n                // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n                if (DOMException && err instanceof DOMException && err.name === 'AbortError') {\n                    oncancel();\n                    return;\n                }\n                throw err;\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"],"names":["animateAtoms","element","value","options","SUPPORTS_WEB_ANIMATIONS","animate","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","process","env","NODE_ENV","length","Promise","all","finished","then","catch","err","_element_ownerDocument_defaultView","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish"],"mappings":";;;;+BAAgBA;;;eAAAA;;;AAAT,SAASA,aAAaC,OAAO,EAAEC,KAAK,EAAEC,OAAO;IAChD,YAAY;IACZ,iHAAiH;IACjH,wGAAwG;IACxG,MAAMC,0BAA0B,OAAOH,QAAQI,OAAO,KAAK;IAC3D,MAAMC,QAAQC,MAAMC,OAAO,CAACN,SAASA,QAAQ;QACzCA;KACH;IACD,MAAM,EAAEO,eAAe,EAAE,GAAGN;IAC5B,MAAMO,aAAaN,0BAA0BE,MAAMK,GAAG,CAAC,CAACC;QACpD,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;QACjC,MAAMG,YAAYd,QAAQI,OAAO,CAACQ,WAAW;YACzCG,MAAM;YACN,GAAGF,MAAM;YACT,GAAGL,mBAAmB;gBAClBQ,UAAU;YACd,CAAC;QACL;QACAF,UAAUG,OAAO;QACjB,OAAOH;IACX,KAAK,EAAE;IACP,OAAO;QACH,IAAII,cAAcC,KAAK;YACnBV,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAUI,YAAY,GAAGC;YAC7B;QACJ;QACAE,uBAAuBC,QAAQ,EAAEC,QAAQ;YACrC,YAAY;YACZ,0GAA0G;YAC1G,sCAAsC;YACtC,EAAE;YACF,yDAAyD;YACzD,iDAAiD;YACjD,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;gBACjC,IAAIjB,WAAWkB,MAAM,KAAK,GAAG;oBACzBL;oBACA;gBACJ;YACJ;YACAM,QAAQC,GAAG,CAACpB,WAAWC,GAAG,CAAC,CAACI,YAAYA,UAAUgB,QAAQ,GAAGC,IAAI,CAAC;gBAC9DT;YACJ,GAAGU,KAAK,CAAC,CAACC;gBACN,IAAIC;gBACJ,MAAMC,eAAe,AAACD,CAAAA,qCAAqClC,QAAQoC,aAAa,CAACC,WAAW,AAAD,MAAO,QAAQH,uCAAuC,KAAK,IAAI,KAAK,IAAIA,mCAAmCC,YAAY;gBAClN,8FAA8F;gBAC9F,IAAIA,gBAAgBF,eAAeE,gBAAgBF,IAAIK,IAAI,KAAK,cAAc;oBAC1Ef;oBACA;gBACJ;gBACA,MAAMU;YACV;QACJ;QACAM,QAAQ;YACJ9B,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAUyB,MAAM;YACpB;QACJ;QACAC,OAAO;YACH/B,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAU0B,KAAK;YACnB;QACJ;QACAC,MAAM;YACFhC,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAU2B,IAAI;YAClB;QACJ;QACAC,QAAQ;YACJjC,WAAWW,OAAO,CAAC,CAACN;gBAChBA,UAAU4B,MAAM;YACpB;QACJ;IACJ;AACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,14 +25,17 @@
     "start": "yarn storybook",
     "storybook": "yarn --cwd ../stories storybook",
     "test": "jest --passWithNoTests",
-    "type-check": "just-scripts type-check"
+    "type-check": "just-scripts type-check",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
     "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.19.0",