@fluentui/react-motion 9.10.3 → 9.11.0

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

package/lib-commonjs/hooks/useIsReducedMotion.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n  const { targetDocument } = useFluent();\n  const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n  const queryValue = React.useRef<boolean>(false);\n  const isEnabled = React.useCallback(() => queryValue.current, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n      return;\n    }\n\n    const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n    if (queryMatch.matches) {\n      queryValue.current = true;\n    }\n\n    const matchListener = (e: MediaQueryListEvent) => {\n      queryValue.current = e.matches;\n    };\n\n    queryMatch.addEventListener('change', matchListener);\n\n    return () => {\n      queryMatch.removeEventListener('change', matchListener);\n    };\n  }, [targetWindow]);\n\n  return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useIsomorphicLayoutEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;qCARgC;gCACN;iEACnB;AAEvB,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;QACAD;IAApC,MAAME,eAA8BF,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBG,WAAW,cAA3BH,yCAAAA,8BAA+B;IAEnE,MAAMI,aAAaC,OAAMC,MAAM,CAAU;IACzC,MAAMC,YAAYF,OAAMG,WAAW,CAAC,IAAMJ,WAAWK,OAAO,EAAE,EAAE;IAEhEC,IAAAA,yCAAyB,EAAC;QACxB,IAAIR,iBAAiB,QAAQ,OAAOA,aAAaS,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaV,aAAaS,UAAU,CAACZ;QAE3C,IAAIa,WAAWC,OAAO,EAAE;YACtBT,WAAWK,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBX,WAAWK,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACZ;KAAa;IAEjB,OAAOK;AACT"}
+{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n  const { targetDocument } = useFluent();\n  const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n  const queryValue = React.useRef<boolean>(false);\n  const isEnabled = React.useCallback(() => queryValue.current, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n      return;\n    }\n\n    const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n    if (queryMatch.matches) {\n      queryValue.current = true;\n    }\n\n    const matchListener = (e: MediaQueryListEvent) => {\n      queryValue.current = e.matches;\n    };\n\n    queryMatch.addEventListener('change', matchListener);\n\n    return () => {\n      queryMatch.removeEventListener('change', matchListener);\n    };\n  }, [targetWindow]);\n\n  return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useIsomorphicLayoutEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA;;;;;+BAUgBA;;;eAAAA;;;;qCARgC;gCACN;iEACnB;AAEvB,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;QACAD;IAApC,MAAME,eAA8BF,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBG,WAAW,cAA3BH,yCAAAA,8BAA+B;IAEnE,MAAMI,aAAaC,OAAMC,MAAM,CAAU;IACzC,MAAMC,YAAYF,OAAMG,WAAW,CAAC,IAAMJ,WAAWK,OAAO,EAAE,EAAE;IAEhEC,IAAAA,yCAAyB,EAAC;QACxB,IAAIR,iBAAiB,QAAQ,OAAOA,aAAaS,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaV,aAAaS,UAAU,CAACZ;QAE3C,IAAIa,WAAWC,OAAO,EAAE;YACtBT,WAAWK,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBX,WAAWK,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACZ;KAAa;IAEjB,OAAOK;AACT"}

package/lib-commonjs/hooks/useMotionImperativeRef.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -11,7 +12,7 @@ Object.defineProperty(exports, "useMotionImperativeRef", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useMotionImperativeRef(imperativeRef) {
-    const animationRef = _react.useRef();
+    const animationRef = _react.useRef(undefined);
     _react.useImperativeHandle(imperativeRef, ()=>({
             setPlayState: (state)=>{
                 if (state === 'running') {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n  const animationRef = React.useRef<AnimationHandle | undefined>();\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    setPlayState: state => {\n      if (state === 'running') {\n        animationRef.current?.play();\n      }\n\n      if (state === 'paused') {\n        animationRef.current?.pause();\n      }\n    },\n    setPlaybackRate: rate => {\n      if (animationRef.current) {\n        animationRef.current.playbackRate = rate;\n      }\n    },\n  }));\n\n  return animationRef;\n}\n"],"names":["useMotionImperativeRef","imperativeRef","animationRef","React","useRef","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,uBAAuBC,aAAqE;IAC1G,MAAMC,eAAeC,OAAMC,MAAM;IAEjCD,OAAME,mBAAmB,CAACJ,eAAe,IAAO,CAAA;YAC9CK,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBL;qBAAAA,wBAAAA,aAAaM,OAAO,cAApBN,4CAAAA,sBAAsBO,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBL;qBAAAA,yBAAAA,aAAaM,OAAO,cAApBN,6CAAAA,uBAAsBQ,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIV,aAAaM,OAAO,EAAE;oBACxBN,aAAaM,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOV;AACT"}
+{"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(\n  imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined,\n): React.MutableRefObject<AnimationHandle | undefined> {\n  const animationRef = React.useRef<AnimationHandle | undefined>(undefined);\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    setPlayState: state => {\n      if (state === 'running') {\n        animationRef.current?.play();\n      }\n\n      if (state === 'paused') {\n        animationRef.current?.pause();\n      }\n    },\n    setPlaybackRate: rate => {\n      if (animationRef.current) {\n        animationRef.current.playbackRate = rate;\n      }\n    },\n  }));\n\n  return animationRef;\n}\n"],"names":["useMotionImperativeRef","imperativeRef","animationRef","React","useRef","undefined","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":"AAAA;;;;;+BAKgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,uBACdC,aAAqE;IAErE,MAAMC,eAAeC,OAAMC,MAAM,CAA8BC;IAE/DF,OAAMG,mBAAmB,CAACL,eAAe,IAAO,CAAA;YAC9CM,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBN;qBAAAA,wBAAAA,aAAaO,OAAO,cAApBP,4CAAAA,sBAAsBQ,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBN;qBAAAA,yBAAAA,aAAaO,OAAO,cAApBP,6CAAAA,uBAAsBS,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIX,aAAaO,OAAO,EAAE;oBACxBP,aAAaO,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOX;AACT"}

package/lib-commonjs/hooks/useMountedState.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

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

package/lib-commonjs/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     createMotionComponent: function() {
         return _createMotionComponent.createMotionComponent;
     },
+    createMotionComponentVariant: function() {
+        return _createMotionComponentVariant.createMotionComponentVariant;
+    },
     createPresenceComponent: function() {
         return _createPresenceComponent.createPresenceComponent;
     },
@@ -45,6 +48,7 @@ _export(exports, {
 });
 const _motionTokens = require("./motions/motionTokens");
 const _createMotionComponent = require("./factories/createMotionComponent");
+const _createMotionComponentVariant = require("./factories/createMotionComponentVariant");
 const _createPresenceComponent = require("./factories/createPresenceComponent");
 const _createPresenceComponentVariant = require("./factories/createPresenceComponentVariant");
 const _PresenceGroup = require("./components/PresenceGroup");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n  createPresenceComponent,\n  type PresenceComponentProps,\n  type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n  PresenceGroupChildProvider,\n  usePresenceGroupChildContext,\n  type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n  MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IA8BSA,uBAAuB;eAAvBA,+CAAuB;;IApBvBC,aAAa;eAAbA,4BAAa;;IAKpBC,0BAA0B;eAA1BA,qDAA0B;;IAbnBC,qBAAqB;eAArBA,4CAAqB;;IAE5BC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IARLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAYZC,kBAAkB;eAAlBA,sCAAkB;;IAIzBC,4BAA4B;eAA5BA,uDAA4B;;;8BAhBkB;uCAEiB;yCAK1D;gDACwC;+BAEjB;oCAEmC;2CAM1D;wCAYiC"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n  createMotionComponent,\n  type MotionComponentProps,\n  type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n  createPresenceComponent,\n  type PresenceComponentProps,\n  type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n  PresenceGroupChildProvider,\n  usePresenceGroupChildContext,\n  type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n  MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IAmCSA,uBAAuB;eAAvBA,+CAAuB;;IApBvBC,aAAa;eAAbA,4BAAa;;IAKpBC,0BAA0B;eAA1BA,qDAA0B;;IAjB1BC,qBAAqB;eAArBA,4CAAqB;;IAIdC,4BAA4B;eAA5BA,0DAA4B;;IAEnCC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IAbLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAiBZC,kBAAkB;eAAlBA,sCAAkB;;IAIzBC,4BAA4B;eAA5BA,uDAA4B;;;8BArBkB;uCAMzC;8CACsC;yCAKtC;gDACwC;+BAEjB;oCAEmC;2CAM1D;wCAYiC"}

package/lib-commonjs/slots/presenceMotionSlot.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "presenceMotionSlot", {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
 function presenceMotionSlot(motion, options) {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};

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

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

package/lib-commonjs/utils/groups/getChildMapping.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n  const childMapping: PresenceGroupChildMapping = {};\n\n  if (children) {\n    React.Children.toArray(children).forEach(child => {\n      if (React.isValidElement(child)) {\n        childMapping[child.key ?? ''] = {\n          appear: false,\n          element: child,\n          visible: true,\n          unmountOnExit: true,\n        };\n      }\n    });\n  }\n\n  return childMapping;\n}\n"],"names":["getChildMapping","children","childMapping","React","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;AAMhB,SAASA,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZE,OAAMC,QAAQ,CAACC,OAAO,CAACJ,UAAUK,OAAO,CAACC,CAAAA;YACvC,IAAIJ,OAAMK,cAAc,CAACD,QAAQ;oBAClBA;gBAAbL,YAAY,CAACK,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOX;AACT"}
+{"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined): PresenceGroupChildMapping {\n  const childMapping: PresenceGroupChildMapping = {};\n\n  if (children) {\n    React.Children.toArray(children).forEach(child => {\n      if (React.isValidElement(child)) {\n        childMapping[child.key ?? ''] = {\n          appear: false,\n          element: child,\n          visible: true,\n          unmountOnExit: true,\n        };\n      }\n    });\n  }\n\n  return childMapping;\n}\n"],"names":["getChildMapping","children","childMapping","React","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;AAMhB,SAASA,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZE,OAAMC,QAAQ,CAACC,OAAO,CAACJ,UAAUK,OAAO,CAACC,CAAAA;YACvC,IAAIJ,OAAMK,cAAc,CAACD,QAAQ;oBAClBA;gBAAbL,YAAY,CAACK,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOX;AACT"}

package/lib-commonjs/utils/groups/getNextChildMapping.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n  prevChildMapping: PresenceGroupChildMapping,\n  nextChildMapping: PresenceGroupChildMapping,\n) {\n  const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n  Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n    const hasPrev = key in prevChildMapping;\n    const hasNext = key in nextChildMapping;\n\n    if (hasNext) {\n      // Case 1: item hasn't changed transition states\n      if (hasPrev) {\n        childrenMapping[key] = { ...childDefinition };\n        return;\n      }\n\n      // Case 2: item is new (entering)\n      childrenMapping[key] = {\n        ...childDefinition,\n        appear: true,\n        visible: true,\n      };\n      return;\n    }\n\n    // Case 3: item is leaving\n    childrenMapping[key] = {\n      ...childDefinition,\n      visible: false,\n    };\n  });\n\n  return childrenMapping;\n}\n"],"names":["getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","mergeChildMappings","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":";;;;+BAGgBA;;;eAAAA;;;oCAHmB;AAG5B,SAASA,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAACH,kBAAkBC;IAE7DG,OAAOC,OAAO,CAACH,iBAAiBI,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAOP;QACvB,MAAMU,UAAUH,OAAON;QAEvB,IAAIS,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXP,eAAe,CAACK,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCN,eAAe,CAACK,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BV,eAAe,CAACK,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOV;AACT"}
+{"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n  prevChildMapping: PresenceGroupChildMapping,\n  nextChildMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n  const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n  Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n    const hasPrev = key in prevChildMapping;\n    const hasNext = key in nextChildMapping;\n\n    if (hasNext) {\n      // Case 1: item hasn't changed transition states\n      if (hasPrev) {\n        childrenMapping[key] = { ...childDefinition };\n        return;\n      }\n\n      // Case 2: item is new (entering)\n      childrenMapping[key] = {\n        ...childDefinition,\n        appear: true,\n        visible: true,\n      };\n      return;\n    }\n\n    // Case 3: item is leaving\n    childrenMapping[key] = {\n      ...childDefinition,\n      visible: false,\n    };\n  });\n\n  return childrenMapping;\n}\n"],"names":["getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","mergeChildMappings","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":";;;;+BAGgBA;;;eAAAA;;;oCAHmB;AAG5B,SAASA,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAACH,kBAAkBC;IAE7DG,OAAOC,OAAO,CAACH,iBAAiBI,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAOP;QACvB,MAAMU,UAAUH,OAAON;QAEvB,IAAIS,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXP,eAAe,CAACK,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCN,eAAe,CAACK,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BV,eAAe,CAACK,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOV;AACT"}

package/lib-commonjs/utils/groups/types.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/utils/groups/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n  element: React.ReactElement;\n\n  appear: boolean;\n  visible: boolean;\n  unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":[],"mappings":";;;;;iEAAuB"}
+{"version":3,"sources":[],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }) {\n  if (animation.playState === 'running') {\n    // Heads up!\n    //\n    // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n    // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n    // glitch.\n\n    // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n    // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n    if (animation.overallProgress !== undefined) {\n      const overallProgress = animation.overallProgress ?? 0;\n\n      return overallProgress > 0 && overallProgress < 1;\n    }\n\n    const currentTime = Number(animation.currentTime ?? 0);\n    const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n    return currentTime > 0 && currentTime < totalTime;\n  }\n\n  return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }): boolean {\n  if (animation.playState === 'running') {\n    // Heads up!\n    //\n    // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n    // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n    // glitch.\n\n    // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n    // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n    if (animation.overallProgress !== undefined) {\n      const overallProgress = animation.overallProgress ?? 0;\n\n      return overallProgress > 0 && overallProgress < 1;\n    }\n\n    const currentTime = Number(animation.currentTime ?? 0);\n    const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n    return currentTime > 0 && currentTime < totalTime;\n  }\n\n  return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}

package/lib-commonjs/utils/useChildElement.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n  '@fluentui/react-motion: Invalid child element.',\n  '\\n',\n  'Motion factories require a single child element to be passed. ',\n  'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n  children: React.ReactElement,\n  mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n  const childRef = React.useRef<HTMLElement>(null);\n\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (mounted && !childRef.current) {\n        // eslint-disable-next-line no-console\n        console.error(CHILD_ERROR_MESSAGE);\n      }\n    }\n  }, [mounted]);\n\n  try {\n    const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n    if (React.isValidElement(child)) {\n      return [\n        React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n          ref: useMergedRefs(childRef, getReactElementRef(child)),\n        }),\n        childRef,\n      ];\n    }\n  } catch {\n    /* empty */\n  }\n\n  throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["useChildElement","CHILD_ERROR_MESSAGE","join","children","mounted","childRef","React","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","useMergedRefs","getReactElementRef","Error"],"mappings":";;;;+BAgBgBA;;;eAAAA;;;;iEAhBO;gCAC2B;AAElD,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAQA,SAASF,gBACdG,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWC,OAAMC,MAAM,CAAc;IAE3CD,OAAME,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIP,WAAW,CAACC,SAASO,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACG;KAAQ;IAEZ,IAAI;QACF,MAAMW,QAAQT,OAAMU,QAAQ,CAACC,IAAI,CAACd;QAElC,IAAIG,OAAMY,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLT,OAAMa,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKC,IAAAA,6BAAa,EAAChB,UAAUiB,IAAAA,kCAAkB,EAACP;gBAClD;gBACAV;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIkB,MAAMtB;AAClB"}
+{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n  '@fluentui/react-motion: Invalid child element.',\n  '\\n',\n  'Motion factories require a single child element to be passed. ',\n  'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n  children: JSXElement,\n  mounted: boolean = true,\n): [JSXElement, React.RefObject<HTMLElement | null>] {\n  const childRef = React.useRef<HTMLElement>(null);\n\n  React.useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      if (mounted && !childRef.current) {\n        // eslint-disable-next-line no-console\n        console.error(CHILD_ERROR_MESSAGE);\n      }\n    }\n  }, [mounted]);\n\n  try {\n    const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n    if (React.isValidElement(child)) {\n      return [\n        React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n          ref: useMergedRefs(childRef, getReactElementRef(child)),\n        }),\n        childRef,\n      ];\n    }\n  } catch {\n    /* empty */\n  }\n\n  throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["useChildElement","CHILD_ERROR_MESSAGE","join","children","mounted","childRef","React","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","useMergedRefs","getReactElementRef","Error"],"mappings":"AAAA;;;;;+BAmBgBA;;;eAAAA;;;;iEAjBO;gCAC2B;AAGlD,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAQA,SAASF,gBACdG,QAAoB,EACpBC,UAAmB,IAAI;IAEvB,MAAMC,WAAWC,OAAMC,MAAM,CAAc;IAE3CD,OAAME,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIP,WAAW,CAACC,SAASO,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACG;KAAQ;IAEZ,IAAI;QACF,MAAMW,QAAQT,OAAMU,QAAQ,CAACC,IAAI,CAACd;QAElC,IAAIG,OAAMY,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLT,OAAMa,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKC,IAAAA,6BAAa,EAAChB,UAAUiB,IAAAA,kCAAkB,EAACP;gBAClD;gBACAV;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIkB,MAAMtB;AAClB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.10.3",
+  "version": "9.11.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -25,15 +25,15 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-utilities": "^9.25.0",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@types/react": ">=16.8.0 <20.0.0",
+    "@types/react-dom": ">=16.8.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.8.0 <20.0.0"
   },
   "exports": {
     ".": {