@fluentui/react-motion 9.2.2 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,43 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Thu, 04 Jul 2024 15:13:31 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Jul 2024 20:09:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.4.0)
+
+Tue, 23 Jul 2024 20:09:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.3.0..@fluentui/react-motion_v9.4.0)
+
+### Minor changes
+
+- feat: add presenceMotionSlot() API ([PR #31984](https://github.com/microsoft/fluentui/pull/31984) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+
+### Patches
+
+- fix: improve Web Animations API detection in tests ([PR #32029](https://github.com/microsoft/fluentui/pull/32029) by olfedias@microsoft.com)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.3.0)
+
+Mon, 15 Jul 2024 17:25:35 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.2..@fluentui/react-motion_v9.3.0)
+
+### Minor changes
+
+- feat(motion): add PresenceDirection type ([PR #31958](https://github.com/microsoft/fluentui/pull/31958) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.19.1 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+- Bump @fluentui/react-utilities to v9.18.12 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
+
+### Patches
+
+- fix: revert incorectly set npm versions in all packages ([PR #31937](https://github.com/microsoft/fluentui/pull/31937) by martinhochel@microsoft.com)
+- feat: add createPresenceComponentVariant() ([PR #31943](https://github.com/microsoft/fluentui/pull/31943) by olfedias@microsoft.com)
+
 ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.2)
 
-Thu, 04 Jul 2024 15:13:31 GMT 
+Thu, 04 Jul 2024 15:14:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.1..@fluentui/react-motion_v9.2.2)
 
 ### Patches

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import * as React_2 from 'react';
+import { SlotComponentType } from '@fluentui/react-utilities';
+import { SlotRenderFunction } from '@fluentui/react-utilities';
 
 export declare type AtomMotion = {
     keyframes: Keyframe[];
@@ -15,7 +17,9 @@ export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam
  */
 export declare function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>): React_2.FC<MotionComponentProps & MotionParams>;
 
-export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): React_2.FC<PresenceComponentProps & MotionParams>;
+export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;
+
+export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, override: PresenceOverride): PresenceComponent<MotionParams>;
 
 export declare const curves: {
     readonly curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
@@ -40,6 +44,11 @@ export declare const durations: {
     readonly durationUltraSlow: 500;
 };
 
+/**
+ * @internal A private symbol to store the motion definition on the component for variants.
+ */
+declare const MOTION_DEFINITION: unique symbol;
+
 export declare type MotionComponentProps = {
     children: React_2.ReactElement;
     /** Provides imperative controls for the animation. */
@@ -103,6 +112,11 @@ export declare const motionTokens: {
     durationUltraSlow: 500;
 };
 
+export declare type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {
+    (props: PresenceComponentProps & MotionParams): React_2.ReactElement | null;
+    [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
+};
+
 export declare type PresenceComponentProps = {
     /**
      * By default, the child component won't execute the "enter" motion when it initially mounts, regardless of the value
@@ -120,7 +134,7 @@ export declare type PresenceComponentProps = {
      * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
      */
     onMotionFinish?: (ev: null, data: {
-        direction: 'enter' | 'exit';
+        direction: PresenceDirection;
     }) => void;
     /**
      * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
@@ -130,7 +144,7 @@ export declare type PresenceComponentProps = {
      * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
      */
     onMotionCancel?: (ev: null, data: {
-        direction: 'enter' | 'exit';
+        direction: PresenceDirection;
     }) => void;
     /**
      * Callback that is called when the whole motion starts.
@@ -140,7 +154,7 @@ export declare type PresenceComponentProps = {
      * so the callback is triggered with "null".
      */
     onMotionStart?: (ev: null, data: {
-        direction: 'enter' | 'exit';
+        direction: PresenceDirection;
     }) => void;
     /** Defines whether a component is visible; triggers the "enter" or "exit" motions. */
     visible?: boolean;
@@ -151,6 +165,8 @@ export declare type PresenceComponentProps = {
     unmountOnExit?: boolean;
 };
 
+export declare type PresenceDirection = 'enter' | 'exit';
+
 export declare class PresenceGroup extends React_2.Component<PresenceGroupProps, PresenceGroupState> {
     private mounted;
     static getDerivedStateFromProps(nextProps: PresenceGroupProps, { childMapping: prevChildMapping, firstRender }: PresenceGroupState): {
@@ -182,13 +198,61 @@ declare type PresenceGroupState = {
     firstRender: boolean;
 };
 
-export declare type PresenceMotion = {
-    enter: AtomMotion | AtomMotion[];
-    exit: AtomMotion | AtomMotion[];
-};
+export declare type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;
 
 export declare type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
     element: HTMLElement;
 } & MotionParams) => PresenceMotion;
 
+export declare function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: PresenceMotionSlotProps<MotionParams> | null | undefined, options: {
+    elementType: React_2.FC<PresenceComponentProps & MotionParams>;
+    defaultProps: PresenceMotionSlotRenderProps & MotionParams;
+}): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;
+
+export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
+    /**
+     * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
+     *
+     * If you want to override the animation, use the children render function instead.
+     */
+    as?: keyof JSX.IntrinsicElements;
+    children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
+        children: React_2.ReactElement;
+    }>;
+};
+
+/**
+ * @internal
+ */
+declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
+
+/**
+ * @internal
+ *
+ * Override properties for presence transitions.
+ *
+ * @example <caption>Override duration for all transitions</caption>
+ * ```
+ * const override: PresenceOverride = {
+ *  all: { duration: 1000 },
+ * };
+ * ```
+ *
+ * @example <caption>Override easing for exit transition</caption>
+ * ```
+ * const override: PresenceOverride = {
+ *  exit: { easing: 'ease-out' },
+ * };
+ * ```
+ */
+declare type PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;
+
+/**
+ * @internal
+ */
+declare type PresenceOverrideFields = {
+    duration: KeyframeEffectOptions['duration'];
+    easing: KeyframeEffectOptions['easing'];
+};
+
 export { }

package/lib/factories/createPresenceComponent.js

@@ -6,11 +6,14 @@ import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
 import { useMountedState } from '../hooks/useMountedState';
 import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
 import { getChildElement } from '../utils/getChildElement';
+/**
+ * @internal A private symbol to store the motion definition on the component for variants.
+ */ export const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
 function shouldSkipAnimation(appear, isFirstMount, visible) {
     return !appear && isFirstMount && !!visible;
 }
 export function createPresenceComponent(value) {
-    const Presence = (props)=>{
+    return Object.assign((props)=>{
         'use no memo';
         const itemContext = React.useContext(PresenceGroupChildContext);
         const merged = {
@@ -104,6 +107,9 @@ export function createPresenceComponent(value) {
             });
         }
         return null;
-    };
-    return Presence;
+    }, {
+        // Heads up!
+        // Always normalize it to a function to simplify types
+        [MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
+    });
 }

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 { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn } 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    'use no memo';\n\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 animateAtoms = useAnimateAtoms();\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      [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n    );\n\n    if (mounted) {\n      return React.cloneElement(child, { ref });\n    }\n\n    return null;\n  };\n\n  return Presence;\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","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","animateAtoms","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: React.ReactElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n   * emit a finish event but a specific cancel event\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n  (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n  [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n  return !appear && isFirstMount && !!visible;\n}\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n  return Object.assign(\n    (props: PresenceComponentProps & MotionParams) => {\n      'use no memo';\n\n      const itemContext = React.useContext(PresenceGroupChildContext);\n      const merged = { ...itemContext, ...props };\n\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 animateAtoms = useAnimateAtoms();\n      const isFirstMount = useFirstMount();\n      const isReducedMotion = useIsReducedMotion();\n\n      const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n        onMotionStart?.(null, { direction });\n      });\n      const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n        onMotionFinish?.(null, { direction });\n\n        if (direction === 'exit' && unmountOnExit) {\n          setMounted(false);\n          onExit?.();\n        }\n      });\n\n      const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n        onMotionCancel?.(null, { direction });\n      });\n\n      useIsomorphicLayoutEffect(() => {\n        // Heads up!\n        // We store the params in a ref to avoid re-rendering the component when the params change.\n        optionsRef.current = { appear, params };\n      });\n\n      useIsomorphicLayoutEffect(\n        () => {\n          const element = elementRef.current;\n\n          if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n            return;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n          const 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        [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n      );\n\n      if (mounted) {\n        return React.cloneElement(child, { ref });\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n  );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","getChildElement","MOTION_DEFINITION","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","animateAtoms","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib/factories/createPresenceComponentVariant.js

@@ -0,0 +1,23 @@
+import { MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
+/**
+ * @internal
+ */ export function overridePresenceMotion(presenceMotion, override) {
+    return (...args)=>{
+        const { enter, exit } = presenceMotion(...args);
+        return {
+            enter: {
+                ...enter,
+                ...override.all,
+                ...override.enter
+            },
+            exit: {
+                ...exit,
+                ...override.all,
+                ...override.exit
+            }
+        };
+    };
+}
+export function createPresenceComponentVariant(component, override) {
+    return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));
+}

package/lib/factories/createPresenceComponentVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n  duration: KeyframeEffectOptions['duration'];\n  easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n *  all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n *  exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceMotion: PresenceMotionFn<MotionParams>,\n  override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n  return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n    const { enter, exit } = presenceMotion(...args);\n\n    return {\n      enter: { ...enter, ...override.all, ...override.enter },\n      exit: { ...exit, ...override.all, ...override.exit },\n    };\n  };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n  return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","createPresenceComponentVariant","component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AA+B1G;;CAEC,GACD,OAAO,SAASC,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEA,OAAO,SAASE,+BACdC,SAA0C,EAC1CN,QAA0B;IAE1B,OAAOH,wBAAwBC,uBAAuBQ,SAAS,CAACV,kBAAkB,EAAEI;AACtF"}

package/lib/hooks/useAnimateAtoms.js

@@ -1,53 +1,5 @@
-var _document_defaultView;
 import * as React from 'react';
-// eslint-disable-next-line no-restricted-globals
-const win = typeof document === 'object' ? (_document_defaultView = document.defaultView) === null || _document_defaultView === void 0 ? void 0 : _document_defaultView.window : undefined;
-// Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
-const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.prototype.animate === 'function')();
-/**
- * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
- * to ensure that the callback is not executed synchronously, which would cause the test to fail.
- *
- * @see https://github.com/microsoft/fluentui/issues/31701
- */ function useAnimateAtomsInTestEnvironment() {
-    const [count, setCount] = React.useState(0);
-    const callbackRef = React.useRef();
-    React.useEffect(()=>{
-        if (count > 0) {
-            var _callbackRef_current;
-            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
-        }
-    }, [
-        count
-    ]);
-    return React.useCallback(()=>{
-        return {
-            setMotionEndCallbacks (onfinish) {
-                callbackRef.current = onfinish;
-                setCount((v)=>v + 1);
-            },
-            set playbackRate (rate){
-            /* no-op */ },
-            cancel () {
-            /* no-op */ },
-            pause () {
-            /* no-op */ },
-            play () {
-            /* no-op */ },
-            finish () {
-            /* no-op */ }
-        };
-    }, []);
-}
-/**
- * @internal
- */ export function useAnimateAtoms() {
-    'use no memo';
-    if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useAnimateAtomsInTestEnvironment();
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+function useAnimateAtomsInSupportedEnvironment() {
     return React.useCallback((element, value, options)=>{
         const atoms = Array.isArray(value) ? value : [
             value
@@ -108,3 +60,58 @@ const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.pro
         };
     }, []);
 }
+/**
+ * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
+ * to ensure that the callback is not executed synchronously, which would cause the test to fail.
+ *
+ * @see https://github.com/microsoft/fluentui/issues/31701
+ */ function useAnimateAtomsInTestEnvironment() {
+    const [count, setCount] = React.useState(0);
+    const callbackRef = React.useRef();
+    const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
+    React.useEffect(()=>{
+        if (count > 0) {
+            var _callbackRef_current;
+            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
+        }
+    }, [
+        count
+    ]);
+    return React.useCallback((element, value, options)=>{
+        const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
+        // Heads up!
+        // If the environment supports Web Animations API, we can use the native implementation.
+        if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
+            return realAnimateAtoms(element, value, options);
+        }
+        return {
+            setMotionEndCallbacks (onfinish) {
+                callbackRef.current = onfinish;
+                setCount((v)=>v + 1);
+            },
+            set playbackRate (rate){
+            /* no-op */ },
+            cancel () {
+            /* no-op */ },
+            pause () {
+            /* no-op */ },
+            play () {
+            /* no-op */ },
+            finish () {
+            /* no-op */ }
+        };
+    }, [
+        realAnimateAtoms
+    ]);
+}
+/**
+ * @internal
+ */ export function useAnimateAtoms() {
+    'use no memo';
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useAnimateAtomsInTestEnvironment();
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useAnimateAtomsInSupportedEnvironment();
+}

package/lib/hooks/useAnimateAtoms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\n// eslint-disable-next-line no-restricted-globals\nconst win = typeof document === 'object' ? document.defaultView?.window : undefined;\n\n// Heads up! \"Element.\" is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.\nconst SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (() => win && typeof win.Element.prototype.animate === 'function')();\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  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback((): AnimationHandle => {\n    return {\n      setMotionEndCallbacks(onfinish: () => void) {\n        callbackRef.current = onfinish;\n        setCount(v => v + 1);\n      },\n\n      set playbackRate(rate: number) {\n        /* no-op */\n      },\n      cancel() {\n        /* no-op */\n      },\n      pause() {\n        /* no-op */\n      },\n      play() {\n        /* no-op */\n      },\n      finish() {\n        /* no-op */\n      },\n    };\n  }, []);\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {\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 React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms.map(motion => {\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n          fill: 'forwards',\n\n          ...params,\n          ...(isReducedMotion && { duration: 1 }),\n        });\n\n        animation.persist();\n\n        return animation;\n      });\n\n      return {\n        set playbackRate(rate: number) {\n          animations.forEach(animation => {\n            animation.playbackRate = rate;\n          });\n        },\n        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n          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    [],\n  );\n}\n"],"names":["document","React","win","defaultView","window","undefined","SUPPORTS_WEB_ANIMATIONS","Element","prototype","animate","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","useEffect","current","useCallback","setMotionEndCallbacks","onfinish","v","playbackRate","rate","cancel","pause","play","finish","useAnimateAtoms","process","env","NODE_ENV","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","fill","duration","persist","forEach","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"IAI2CA;AAJ3C,YAAYC,WAAW,QAAQ;AAG/B,iDAAiD;AACjD,MAAMC,MAAM,OAAOF,aAAa,YAAWA,wBAAAA,SAASG,WAAW,cAApBH,4CAAAA,sBAAsBI,MAAM,GAAGC;AAE1E,mHAAmH;AACnH,MAAMC,0BAAwC,AAAd,WAAW,GAAI,CAAA,IAAMJ,OAAO,OAAOA,IAAIK,OAAO,CAACC,SAAS,CAACC,OAAO,KAAK,UAAS;AAE9G;;;;;CAKC,GACD,SAASC;IACP,MAAM,CAACC,OAAOC,SAAS,GAAGX,MAAMY,QAAQ,CAAC;IACzC,MAAMC,cAAcb,MAAMc,MAAM;IAEhCd,MAAMe,SAAS,CAAC;QACd,IAAIL,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYG,OAAO,cAAnBH,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAOV,MAAMiB,WAAW,CAAC;QACvB,OAAO;YACLC,uBAAsBC,QAAoB;gBACxCN,YAAYG,OAAO,GAAGG;gBACtBR,SAASS,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAIC,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;QACF;IACF,GAAG,EAAE;AACP;AAEA;;CAEC,GACD,OAAO,SAASC;IACd;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,UAAU,CAACzB,yBAAyB;QAC/D,sDAAsD;QACtD,OAAOI;IACT;IAEA,sDAAsD;IACtD,OAAOT,MAAMiB,WAAW,CACtB,CACEc,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQvB,OAAO,CAACiC,WAAW;gBAC3CG,MAAM;gBAEN,GAAGF,MAAM;gBACT,GAAIL,mBAAmB;oBAAEQ,UAAU;gBAAE,CAAC;YACxC;YAEAF,UAAUG,OAAO;YAEjB,OAAOH;QACT;QAEA,OAAO;YACL,IAAItB,cAAaC,KAAc;gBAC7BgB,WAAWS,OAAO,CAACJ,CAAAA;oBACjBA,UAAUtB,YAAY,GAAGC;gBAC3B;YACF;YACAJ,uBAAsBC,QAAoB,EAAE6B,QAAoB;gBAC9DC,QAAQC,GAAG,CAACZ,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUQ,QAAQ,GACvDC,IAAI,CAAC;oBACJjC;gBACF,GACCkC,KAAK,CAAC,CAACC;wBACevB;oBAArB,MAAMwB,gBAAexB,qCAAAA,QAAQyB,aAAa,CAACtD,WAAW,cAAjC6B,yDAAAA,mCAAmCwB,YAAY;oBAEpE,8FAA8F;oBAC9F,IAAIA,gBAAgBD,eAAeC,gBAAgBD,IAAIG,IAAI,KAAK,cAAc;wBAC5ET;wBACA;oBACF;oBAEA,MAAMM;gBACR;YACJ;YAEA/B,QAAQ;gBACNe,WAAWS,OAAO,CAACJ,CAAAA;oBACjBA,UAAUpB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACLc,WAAWS,OAAO,CAACJ,CAAAA;oBACjBA,UAAUnB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJa,WAAWS,OAAO,CAACJ,CAAAA;oBACjBA,UAAUlB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACNY,WAAWS,OAAO,CAACJ,CAAAA;oBACjBA,UAAUjB,MAAM;gBAClB;YACF;QACF;IACF,GACA,EAAE;AAEN"}
+{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms.map(motion => {\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n          fill: 'forwards',\n\n          ...params,\n          ...(isReducedMotion && { duration: 1 }),\n        });\n\n        animation.persist();\n\n        return animation;\n      });\n\n      return {\n        set playbackRate(rate: number) {\n          animations.forEach(animation => {\n            animation.playbackRate = rate;\n          });\n        },\n        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n          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    [],\n  );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n  const [count, setCount] = React.useState(0);\n  const callbackRef = React.useRef<() => void>();\n\n  const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n      // Heads up!\n      // If the environment supports Web Animations API, we can use the native implementation.\n      if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n        return realAnimateAtoms(element, value, options);\n      }\n\n      return {\n        setMotionEndCallbacks(onfinish: () => void) {\n          callbackRef.current = onfinish;\n          setCount(v => v + 1);\n        },\n\n        set playbackRate(rate: number) {\n          /* no-op */\n        },\n        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useAnimateAtomsInTestEnvironment();\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","useAnimateAtomsInSupportedEnvironment","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC;IACP,OAAOD,MAAME,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQa,OAAO,CAACH,WAAW;gBAC3CI,MAAM;gBAEN,GAAGH,MAAM;gBACT,GAAIL,mBAAmB;oBAAES,UAAU;gBAAE,CAAC;YACxC;YAEAH,UAAUI,OAAO;YAEjB,OAAOJ;QACT;QAEA,OAAO;YACL,IAAIK,cAAaC,KAAc;gBAC7BX,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUK,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9DC,QAAQC,GAAG,CAACjB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUa,QAAQ,GACvDC,IAAI,CAAC;oBACJL;gBACF,GACCM,KAAK,CAAC,CAACC;wBACe5B;oBAArB,MAAM6B,gBAAe7B,qCAAAA,QAAQ8B,aAAa,CAACC,WAAW,cAAjC/B,yDAAAA,mCAAmC6B,YAAY;oBAEpE,8FAA8F;oBAC9F,IAAIA,gBAAgBD,eAAeC,gBAAgBD,IAAII,IAAI,KAAK,cAAc;wBAC5EV;wBACA;oBACF;oBAEA,MAAMM;gBACR;YACJ;YAEAK,QAAQ;gBACN1B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUqB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACL3B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUsB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJ5B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUuB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACN7B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUwB,MAAM;gBAClB;YACF;QACF;IACF,GACA,EAAE;AAEN;AAEA;;;;;CAKC,GACD,SAASC;IACP,MAAM,CAACC,OAAOC,SAAS,GAAG1C,MAAM2C,QAAQ,CAAC;IACzC,MAAMC,cAAc5C,MAAM6C,MAAM;IAEhC,MAAMC,mBAAmB7C;IAEzBD,MAAM+C,SAAS,CAAC;QACd,IAAIN,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAOzC,MAAME,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAM4C,kCAAkC,OAAO9C,QAAQa,OAAO,KAAK;QAEnE,YAAY;QACZ,wFAAwF;QACxF,IAAIiC,iCAAiC;YACnC,OAAOH,iBAAiB3C,SAASC,OAAOC;QAC1C;QAEA,OAAO;YACLkB,uBAAsBC,QAAoB;gBACxCoB,YAAYI,OAAO,GAAGxB;gBACtBkB,SAASQ,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAI9B,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAe;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;QACF;IACF,GACA;QAACO;KAAiB;AAEtB;AAEA;;CAEC,GACD,OAAO,SAASK;IACd;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnC,sDAAsD;QACtD,OAAOd;IACT;IAEA,sDAAsD;IACtD,OAAOvC;AACT"}

package/lib/index.js

@@ -1,4 +1,6 @@
 export { motionTokens, durations, curves } from './motions/motionTokens';
 export { createMotionComponent } from './factories/createMotionComponent';
 export { createPresenceComponent } from './factories/createPresenceComponent';
+export { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';
 export { PresenceGroup } from './components/PresenceGroup';
+export { presenceMotionSlot } from './slots/presenceMotionSlot';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport { createPresenceComponent, type PresenceComponentProps } from './factories/createPresenceComponent';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport type { AtomMotion, AtomMotionFn, PresenceMotion, PresenceMotionFn, MotionImperativeRef } from './types';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","PresenceGroup"],"rangeMappings":";;;","mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SAASC,qBAAqB,QAAmC,oCAAoC;AACrG,SAASC,uBAAuB,QAAqC,sCAAsC;AAE3G,SAASC,aAAa,QAAQ,6BAA6B"}
+{"version":3,"sources":["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 type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n} from './types';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","presenceMotionSlot"],"rangeMappings":";;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SAASC,qBAAqB,QAAmC,oCAAoC;AACrG,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAE3D,SAASC,kBAAkB,QAAsC,6BAA6B"}

package/lib/slots/presenceMotionSlot.js

@@ -0,0 +1,40 @@
+import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
+import * as React from 'react';
+export function presenceMotionSlot(motion, options) {
+    // eslint-disable-next-line deprecation/deprecation
+    const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof as !== 'undefined') {
+            throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
+        }
+    }
+    if (motion === null) {
+        // Heads up!
+        // Render function is used there to avoid rendering a motion component and handle unmounting logic
+        const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
+        const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
+        /**
+     * Casting is required here as SlotComponentType is a function, not an object.
+     * Although SlotComponentType has a function signature, it is still just an object.
+     * This is required to make a slot callable (JSX compatible), this is the exact same approach
+     * that is used on `@types/react` components
+     */ return {
+            [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
+            [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+        };
+    }
+    /**
+   * Casting is required here as SlotComponentType is a function, not an object.
+   * Although SlotComponentType has a function signature, it is still just an object.
+   * This is required to make a slot callable (JSX compatible), this is the exact same approach
+   * that is used on `@types/react` components
+   */ const propsWithMetadata = {
+        ...options.defaultProps,
+        ...rest,
+        [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+    };
+    if (typeof children === 'function') {
+        propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
+    }
+    return propsWithMetadata;
+}

package/lib/slots/presenceMotionSlot.js.map

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

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  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4BA,WAME"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * @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[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4BA,WAME"}

package/lib-commonjs/factories/createPresenceComponent.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "createPresenceComponent", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    MOTION_DEFINITION: function() {
+        return MOTION_DEFINITION;
+    },
+    createPresenceComponent: function() {
         return createPresenceComponent;
     }
 });
@@ -17,11 +25,12 @@ const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
 const _useMountedState = require("../hooks/useMountedState");
 const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
 const _getChildElement = require("../utils/getChildElement");
+const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
 function shouldSkipAnimation(appear, isFirstMount, visible) {
     return !appear && isFirstMount && !!visible;
 }
 function createPresenceComponent(value) {
-    const Presence = (props)=>{
+    return Object.assign((props)=>{
         'use no memo';
         const itemContext = _react.useContext(_PresenceGroupChildContext.PresenceGroupChildContext);
         const merged = {
@@ -114,6 +123,9 @@ function createPresenceComponent(value) {
             });
         }
         return null;
-    };
-    return Presence;
+    }, {
+        // Heads up!
+        // Always normalize it to a function to simplify types
+        [MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
+    });
 }

package/lib-commonjs/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 { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn } 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    'use no memo';\n\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 animateAtoms = useAnimateAtoms();\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      [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n    );\n\n    if (mounted) {\n      return React.cloneElement(child, { ref });\n    }\n\n    return null;\n  };\n\n  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","animateAtoms","useAnimateAtoms","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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 { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: React.ReactElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n   * emit a finish event but a specific cancel event\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n  (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n  [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n  return !appear && isFirstMount && !!visible;\n}\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n  return Object.assign(\n    (props: PresenceComponentProps & MotionParams) => {\n      'use no memo';\n\n      const itemContext = React.useContext(PresenceGroupChildContext);\n      const merged = { ...itemContext, ...props };\n\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 animateAtoms = useAnimateAtoms();\n      const isFirstMount = useFirstMount();\n      const isReducedMotion = useIsReducedMotion();\n\n      const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n        onMotionStart?.(null, { direction });\n      });\n      const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n        onMotionFinish?.(null, { direction });\n\n        if (direction === 'exit' && unmountOnExit) {\n          setMounted(false);\n          onExit?.();\n        }\n      });\n\n      const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n        onMotionCancel?.(null, { direction });\n      });\n\n      useIsomorphicLayoutEffect(() => {\n        // Heads up!\n        // We store the params in a ref to avoid re-rendering the component when the params change.\n        optionsRef.current = { appear, params };\n      });\n\n      useIsomorphicLayoutEffect(\n        () => {\n          const element = elementRef.current;\n\n          if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n            return;\n          }\n\n          const presenceMotion =\n            typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n          const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n          const direction: PresenceDirection = visible ? 'enter' : 'exit';\n          const 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        [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n      );\n\n      if (mounted) {\n        return React.cloneElement(child, { ref });\n      }\n\n      return null;\n    },\n    {\n      // Heads up!\n      // Always normalize it to a function to simplify types\n      [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n    },\n  );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","animateAtoms","useAnimateAtoms","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","forceFinishMotion","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/factories/createPresenceComponentVariant.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    createPresenceComponentVariant: function() {
+        return createPresenceComponentVariant;
+    },
+    overridePresenceMotion: function() {
+        return overridePresenceMotion;
+    }
+});
+const _createPresenceComponent = require("./createPresenceComponent");
+function overridePresenceMotion(presenceMotion, override) {
+    return (...args)=>{
+        const { enter, exit } = presenceMotion(...args);
+        return {
+            enter: {
+                ...enter,
+                ...override.all,
+                ...override.enter
+            },
+            exit: {
+                ...exit,
+                ...override.all,
+                ...override.exit
+            }
+        };
+    };
+}
+function createPresenceComponentVariant(component, override) {
+    return (0, _createPresenceComponent.createPresenceComponent)(overridePresenceMotion(component[_createPresenceComponent.MOTION_DEFINITION], override));
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n  duration: KeyframeEffectOptions['duration'];\n  easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n *  all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n *  exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceMotion: PresenceMotionFn<MotionParams>,\n  override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n  return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n    const { enter, exit } = presenceMotion(...args);\n\n    return {\n      enter: { ...enter, ...override.all, ...override.enter },\n      exit: { ...exit, ...override.all, ...override.exit },\n    };\n  };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n  return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["createPresenceComponentVariant","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","component","createPresenceComponent","MOTION_DEFINITION"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDgBA,8BAAAA;eAAAA;;IAdAC,sBAAAA;eAAAA;;;yCAlC8D;AAkCvE,SAASA,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEO,SAASN,+BACdQ,SAA0C,EAC1CL,QAA0B;IAE1B,OAAOM,IAAAA,gDAAAA,EAAwBR,uBAAuBO,SAAS,CAACE,0CAAAA,CAAkB,EAAEP;AACtF"}

package/lib-commonjs/hooks/useAnimateAtoms.js

@@ -10,53 +10,7 @@ Object.defineProperty(exports, "useAnimateAtoms", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _document_defaultView;
-// eslint-disable-next-line no-restricted-globals
-const win = typeof document === 'object' ? (_document_defaultView = document.defaultView) === null || _document_defaultView === void 0 ? void 0 : _document_defaultView.window : undefined;
-// Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
-const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.prototype.animate === 'function')();
-/**
- * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
- * to ensure that the callback is not executed synchronously, which would cause the test to fail.
- *
- * @see https://github.com/microsoft/fluentui/issues/31701
- */ function useAnimateAtomsInTestEnvironment() {
-    const [count, setCount] = _react.useState(0);
-    const callbackRef = _react.useRef();
-    _react.useEffect(()=>{
-        if (count > 0) {
-            var _callbackRef_current;
-            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
-        }
-    }, [
-        count
-    ]);
-    return _react.useCallback(()=>{
-        return {
-            setMotionEndCallbacks (onfinish) {
-                callbackRef.current = onfinish;
-                setCount((v)=>v + 1);
-            },
-            set playbackRate (rate){
-            /* no-op */ },
-            cancel () {
-            /* no-op */ },
-            pause () {
-            /* no-op */ },
-            play () {
-            /* no-op */ },
-            finish () {
-            /* no-op */ }
-        };
-    }, []);
-}
-function useAnimateAtoms() {
-    'use no memo';
-    if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useAnimateAtomsInTestEnvironment();
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+function useAnimateAtomsInSupportedEnvironment() {
     return _react.useCallback((element, value, options)=>{
         const atoms = Array.isArray(value) ? value : [
             value
@@ -117,3 +71,56 @@ function useAnimateAtoms() {
         };
     }, []);
 }
+/**
+ * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
+ * to ensure that the callback is not executed synchronously, which would cause the test to fail.
+ *
+ * @see https://github.com/microsoft/fluentui/issues/31701
+ */ function useAnimateAtomsInTestEnvironment() {
+    const [count, setCount] = _react.useState(0);
+    const callbackRef = _react.useRef();
+    const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
+    _react.useEffect(()=>{
+        if (count > 0) {
+            var _callbackRef_current;
+            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
+        }
+    }, [
+        count
+    ]);
+    return _react.useCallback((element, value, options)=>{
+        const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
+        // Heads up!
+        // If the environment supports Web Animations API, we can use the native implementation.
+        if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
+            return realAnimateAtoms(element, value, options);
+        }
+        return {
+            setMotionEndCallbacks (onfinish) {
+                callbackRef.current = onfinish;
+                setCount((v)=>v + 1);
+            },
+            set playbackRate (rate){
+            /* no-op */ },
+            cancel () {
+            /* no-op */ },
+            pause () {
+            /* no-op */ },
+            play () {
+            /* no-op */ },
+            finish () {
+            /* no-op */ }
+        };
+    }, [
+        realAnimateAtoms
+    ]);
+}
+function useAnimateAtoms() {
+    'use no memo';
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useAnimateAtomsInTestEnvironment();
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useAnimateAtomsInSupportedEnvironment();
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\n// eslint-disable-next-line no-restricted-globals\nconst win = typeof document === 'object' ? document.defaultView?.window : undefined;\n\n// Heads up! \"Element.\" is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.\nconst SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (() => win && typeof win.Element.prototype.animate === 'function')();\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  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback((): AnimationHandle => {\n    return {\n      setMotionEndCallbacks(onfinish: () => void) {\n        callbackRef.current = onfinish;\n        setCount(v => v + 1);\n      },\n\n      set playbackRate(rate: number) {\n        /* no-op */\n      },\n      cancel() {\n        /* no-op */\n      },\n      pause() {\n        /* no-op */\n      },\n      play() {\n        /* no-op */\n      },\n      finish() {\n        /* no-op */\n      },\n    };\n  }, []);\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {\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 React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms.map(motion => {\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n          fill: 'forwards',\n\n          ...params,\n          ...(isReducedMotion && { duration: 1 }),\n        });\n\n        animation.persist();\n\n        return animation;\n      });\n\n      return {\n        set playbackRate(rate: number) {\n          animations.forEach(animation => {\n            animation.playbackRate = rate;\n          });\n        },\n        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n          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    [],\n  );\n}\n"],"names":["useAnimateAtoms","document","win","defaultView","window","undefined","SUPPORTS_WEB_ANIMATIONS","Element","prototype","animate","useAnimateAtomsInTestEnvironment","count","setCount","React","useState","callbackRef","useRef","useEffect","current","useCallback","setMotionEndCallbacks","onfinish","v","playbackRate","rate","cancel","pause","play","finish","process","env","NODE_ENV","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","fill","duration","persist","forEach","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","name"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const atoms = Array.isArray(value) ? value : [value];\n      const { isReducedMotion } = options;\n\n      const animations = atoms.map(motion => {\n        const { keyframes, ...params } = motion;\n        const animation = element.animate(keyframes, {\n          fill: 'forwards',\n\n          ...params,\n          ...(isReducedMotion && { duration: 1 }),\n        });\n\n        animation.persist();\n\n        return animation;\n      });\n\n      return {\n        set playbackRate(rate: number) {\n          animations.forEach(animation => {\n            animation.playbackRate = rate;\n          });\n        },\n        setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n          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    [],\n  );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n  const [count, setCount] = React.useState(0);\n  const callbackRef = React.useRef<() => void>();\n\n  const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n  React.useEffect(() => {\n    if (count > 0) {\n      callbackRef.current?.();\n    }\n  }, [count]);\n\n  return React.useCallback(\n    (\n      element: HTMLElement,\n      value: AtomMotion | AtomMotion[],\n      options: {\n        isReducedMotion: boolean;\n      },\n    ): AnimationHandle => {\n      const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n      // Heads up!\n      // If the environment supports Web Animations API, we can use the native implementation.\n      if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n        return realAnimateAtoms(element, value, options);\n      }\n\n      return {\n        setMotionEndCallbacks(onfinish: () => void) {\n          callbackRef.current = onfinish;\n          setCount(v => v + 1);\n        },\n\n        set playbackRate(rate: number) {\n          /* no-op */\n        },\n        cancel() {\n          /* no-op */\n        },\n        pause() {\n          /* no-op */\n        },\n        play() {\n          /* no-op */\n        },\n        finish() {\n          /* no-op */\n        },\n      };\n    },\n    [realAnimateAtoms],\n  );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n  'use no memo';\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useAnimateAtomsInTestEnvironment();\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["useAnimateAtoms","useAnimateAtomsInSupportedEnvironment","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     createPresenceComponent: function() {
         return _createPresenceComponent.createPresenceComponent;
     },
+    createPresenceComponentVariant: function() {
+        return _createPresenceComponentVariant.createPresenceComponentVariant;
+    },
     curves: function() {
         return _motionTokens.curves;
     },
@@ -26,9 +29,14 @@ _export(exports, {
     },
     motionTokens: function() {
         return _motionTokens.motionTokens;
+    },
+    presenceMotionSlot: function() {
+        return _presenceMotionSlot.presenceMotionSlot;
     }
 });
 const _motionTokens = require("./motions/motionTokens");
 const _createMotionComponent = require("./factories/createMotionComponent");
 const _createPresenceComponent = require("./factories/createPresenceComponent");
+const _createPresenceComponentVariant = require("./factories/createPresenceComponentVariant");
 const _PresenceGroup = require("./components/PresenceGroup");
+const _presenceMotionSlot = require("./slots/presenceMotionSlot");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport { createPresenceComponent, type PresenceComponentProps } from './factories/createPresenceComponent';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport type { AtomMotion, AtomMotionFn, PresenceMotion, PresenceMotionFn, MotionImperativeRef } from './types';\n"],"names":["PresenceGroup","createMotionComponent","createPresenceComponent","curves","durations","motionTokens"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKSA,aAAa;eAAbA,4BAAa;;IAHbC,qBAAqB;eAArBA,4CAAqB;;IACrBC,uBAAuB;eAAvBA,gDAAuB;;IAHEC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;;8BAA2B;uCAEiB;yCACI;+BAEvC"}
+{"version":3,"sources":["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 type {\n  AtomMotion,\n  AtomMotionFn,\n  PresenceMotion,\n  PresenceMotionFn,\n  PresenceDirection,\n  MotionImperativeRef,\n} from './types';\n"],"names":["PresenceGroup","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUSA,aAAa;eAAbA,4BAAa;;IARbC,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;;;8BAZqB;uCAEiB;yCAK1D;gDACwC;+BAEjB;oCAEmC"}

package/lib-commonjs/slots/presenceMotionSlot.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "presenceMotionSlot", {
+    enumerable: true,
+    get: function() {
+        return 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"));
+function presenceMotionSlot(motion, options) {
+    // eslint-disable-next-line deprecation/deprecation
+    const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof as !== 'undefined') {
+            throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
+        }
+    }
+    if (motion === null) {
+        // Heads up!
+        // Render function is used there to avoid rendering a motion component and handle unmounting logic
+        const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
+        const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, props.children);
+        /**
+     * Casting is required here as SlotComponentType is a function, not an object.
+     * Although SlotComponentType has a function signature, it is still just an object.
+     * This is required to make a slot callable (JSX compatible), this is the exact same approach
+     * that is used on `@types/react` components
+     */ return {
+            [_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
+            [_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+        };
+    }
+    /**
+   * Casting is required here as SlotComponentType is a function, not an object.
+   * Although SlotComponentType has a function signature, it is still just an object.
+   * This is required to make a slot callable (JSX compatible), this is the exact same approach
+   * that is used on `@types/react` components
+   */ const propsWithMetadata = {
+        ...options.defaultProps,
+        ...rest,
+        [_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+    };
+    if (typeof children === 'function') {
+        propsWithMetadata[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL] = children;
+    }
+    return propsWithMetadata;
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["presenceMotionSlot.tsx"],"sourcesContent":["import {\n  SLOT_ELEMENT_TYPE_SYMBOL,\n  SLOT_RENDER_FUNCTION_SYMBOL,\n  type SlotComponentType,\n  type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n  PresenceComponentProps,\n  'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  PresenceComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: keyof JSX.IntrinsicElements;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<PresenceComponentProps & MotionParams>;\n    defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line deprecation/deprecation\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and handle unmounting logic\n    const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n    const renderFn: SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n    > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      PresenceMotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","React","createElement","Fragment","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,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,OAAA,WAAA,GAAOO,OAAAC,aAAA,CAAAD,OAAAE,QAAA,EAAA,MAAGH,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACgB,2CAAAA,CAA4B,EAAEN;YAC/B,CAACO,wCAAAA,CAAyB,EAAEnB,QAAQoB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGrB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACgB,wCAAAA,CAAyB,EAAEnB,QAAQoB,WAAW;IACjD;IAEA,IAAI,OAAOlB,aAAa,YAAY;QAClCmB,iBAAiB,CAACH,2CAAAA,CAA4B,GAAGhB;IAGnD;IAEA,OAAOmB;AACT"}

package/lib-commonjs/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  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":["types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * @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[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"rangeMappings":"","mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.2.2",
+  "version": "9.4.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -39,15 +39,15 @@
     "@fluentui/scripts-cypress": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-utilities": "^9.18.11",
+    "@fluentui/react-shared-contexts": "^9.20.0",
+    "@fluentui/react-utilities": "^9.18.13",
     "@swc/helpers": "^0.5.1",
     "react-is": "^17.0.2"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
+    "react": ">=16.14.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0"
   },
   "exports": {