@fluentui/react-motion 9.16.1 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 24 Jun 2026 11:03:37 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jul 2026 17:34:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
+
+Thu, 09 Jul 2026 17:34:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.16.1..@fluentui/react-motion_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
+
+### Changes
+
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+
 ## [9.16.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.16.1)
 
-Wed, 24 Jun 2026 11:03:37 GMT 
+Wed, 24 Jun 2026 11:09:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.16.0..@fluentui/react-motion_v9.16.1)
 
 ### Patches

package/dist/index.d.cts

@@ -0,0 +1,368 @@
+import type { JSXElement } from '@fluentui/react-utilities';
+import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { SlotComponentType } from '@fluentui/react-utilities';
+import type { SlotRenderFunction } from '@fluentui/react-utilities';
+
+declare type AtomCore = {
+    keyframes: Keyframe[];
+} & KeyframeEffectOptions;
+
+export declare type AtomMotion = AtomCore & {
+    /**
+     * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
+     * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is
+     * active). If not provided, the duration of the animation will be overridden to be 1ms.
+     *
+     * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.
+     */
+    reducedMotion?: Partial<AtomCore>;
+};
+
+export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
+    element: HTMLElement;
+} & MotionParams) => AtomMotion | AtomMotion[];
+
+/**
+ * Creates a component that will animate the children using the provided motion.
+ *
+ * @param value - A motion definition.
+ */
+export declare function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>): MotionComponent<MotionParams>;
+
+/**
+ * Create a new motion component based on another motion component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createMotionComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new motion component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
+ */
+export declare function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: MotionComponent<MotionParams>, variantParams: Partial<MotionParams>): MotionComponent<MotionParams>;
+
+export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;
+
+/**
+ * Create a new presence component based on another presence component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createPresenceComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new presence component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
+ */
+export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, variantParams: Partial<MotionParams>): PresenceComponent<MotionParams>;
+
+export declare const curves: {
+    readonly curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
+    readonly curveAccelerateMid: "cubic-bezier(1,0,1,1)";
+    readonly curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
+    readonly curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
+    readonly curveDecelerateMid: "cubic-bezier(0,0,0,1)";
+    readonly curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
+    readonly curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
+    readonly curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
+    readonly curveLinear: "cubic-bezier(0,0,1,1)";
+};
+
+export declare const durations: {
+    readonly durationUltraFast: 50;
+    readonly durationFaster: 100;
+    readonly durationFast: 150;
+    readonly durationNormal: 200;
+    readonly durationGentle: 250;
+    readonly durationSlow: 300;
+    readonly durationSlower: 400;
+    readonly durationUltraSlow: 500;
+};
+
+/**
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
+ */
+declare const MOTION_DEFINITION: unique symbol;
+
+export declare const MotionBehaviourProvider: React_2.Provider<MotionBehaviourType | undefined>;
+
+/**
+ * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.
+ */
+declare type MotionBehaviourType = 'skip' | 'default';
+
+export declare type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React_2.FC<MotionComponentProps & MotionParams> & {
+    [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;
+};
+
+export declare type MotionComponentProps = {
+    children: JSXElement;
+    /** Provides imperative controls for the animation. */
+    imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
+    /**
+     * Callback that is called when the whole motion finishes.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
+     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionFinish?: (ev: null) => void;
+    /**
+     * Callback that is called when the whole motion is cancelled.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "cancel" events. The callback is
+     * triggered once all animations have been cancelled with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionCancel?: (ev: null) => void;
+    /**
+     * Callback that is called when the whole motion starts.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
+     * triggered when the first animation is started. There is no official "start" event with the Web Animations API.
+     * so the callback is triggered with "null".
+     */
+    onMotionStart?: (ev: null) => void;
+    /**
+     * When this value changes, the animation replays from the start on the same DOM element,
+     * cancelling any in-progress animation, without remounting the component or its children.
+     *
+     * **Why not just use a React `key`?** Changing a React `key` forces a full unmount and
+     * remount of the subtree: DOM nodes are destroyed and recreated, focus is lost, and any
+     * child state is reset. `replayKey` avoids all of that — only the animation effect reruns
+     * while the DOM and component state remain intact.
+     *
+     * Use this when you want to retrigger a motion in response to a state change (e.g. a user
+     * action or a data update) while preserving DOM continuity. It is the declarative equivalent
+     * of calling `imperativeRef.current.play()` but driven by a prop rather than a ref call.
+     *
+     * @example
+     * ```tsx
+     * // Replay a Fade.In each time the user clicks "Refresh"
+     * const [replayKey, setReplayKey] = React.useState(0);
+     * <Fade.In replayKey={replayKey}>
+     *   <div>Content</div>
+     * </Fade.In>
+     * <button onClick={() => setReplayKey(k => k + 1)}>Refresh</button>
+     * ```
+     */
+    replayKey?: string | number;
+};
+
+export declare type MotionImperativeRef = {
+    /** Sets the playback rate of the animation, where 1 is normal speed. */
+    setPlaybackRate: (rate: number) => void;
+    /** Sets the state of the animation to running or paused. */
+    setPlayState: (state: 'running' | 'paused') => void;
+};
+
+/**
+ * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain
+ * dependency for React hooks.
+ */
+export declare type MotionParam = boolean | number | string;
+
+/**
+ * A component that forwards a ref to its children via a React context.
+ * This is used to pass a motion component's ref through to the actual surface element,
+ * since motion components wrap their children and the ref needs to reach the inner element.
+ *
+ * @internal
+ */
+export declare const MotionRefForwarder: React_2.ForwardRefExoticComponent<{
+    children?: React_2.ReactElement;
+} & React_2.RefAttributes<HTMLElement>>;
+
+/**
+ * Resets the MotionRefForwarder context to `undefined` for its children.
+ * Render this in components that consume `useMotionForwardedRef()` and render
+ * arbitrary user content, to prevent the context from leaking to descendants.
+ *
+ * @internal
+ */
+export declare const MotionRefForwarderReset: React_2.FC<{
+    children: React_2.ReactElement;
+}>;
+
+export declare function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: MotionSlotProps<MotionParams> | null | undefined, options: {
+    elementType: React_2.FC<MotionComponentProps & MotionParams>;
+    defaultProps: MotionSlotRenderProps & MotionParams;
+}): SlotComponentType<MotionSlotRenderProps & MotionParams>;
+
+export declare type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<MotionComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'> & Partial<MotionParams> & {
+    /**
+     * @deprecated Do not use. Motion Slots do not support intrinsic elements.
+     *
+     * If you want to override the animation, use the children render function instead.
+     */
+    as?: JSXIntrinsicElementKeys;
+    children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & {
+        children: JSXElement;
+    }>;
+};
+
+/**
+ * @internal
+ */
+declare type MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;
+
+export declare const motionTokens: {
+    curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
+    curveAccelerateMid: "cubic-bezier(1,0,1,1)";
+    curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
+    curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
+    curveDecelerateMid: "cubic-bezier(0,0,0,1)";
+    curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
+    curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
+    curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
+    curveLinear: "cubic-bezier(0,0,1,1)";
+    durationUltraFast: 50;
+    durationFaster: 100;
+    durationFast: 150;
+    durationNormal: 200;
+    durationGentle: 250;
+    durationSlow: 300;
+    durationSlower: 400;
+    durationUltraSlow: 500;
+};
+
+/**
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
+ */
+declare const PRESENCE_MOTION_DEFINITION: unique symbol;
+
+export declare type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React_2.FC<PresenceComponentProps & MotionParams> & {
+    (props: PresenceComponentProps & MotionParams): JSXElement | null;
+    [PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
+    In: MotionComponent<MotionParams>;
+    Out: MotionComponent<MotionParams>;
+};
+
+export declare type PresenceComponentProps = {
+    /**
+     * By default, the child component won't execute the "enter" motion when it initially mounts, regardless of the value
+     * of "visible". If you desire this behavior, ensure both "appear" and "visible" are set to "true".
+     */
+    appear?: boolean;
+    /** A React element that will be cloned and will have motion effects applied to it. */
+    children: JSXElement;
+    /** Provides imperative controls for the animation. */
+    imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
+    /**
+     * Callback that is called when the whole motion finishes.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
+     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionFinish?: (ev: null, data: {
+        direction: PresenceDirection;
+    }) => void;
+    /**
+     * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
+     * emit a finish event but a specific cancel event
+     *
+     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
+     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionCancel?: (ev: null, data: {
+        direction: PresenceDirection;
+    }) => void;
+    /**
+     * Callback that is called when the whole motion starts.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
+     * triggered when the first animation is started. There is no official "start" event with the Web Animations API.
+     * so the callback is triggered with "null".
+     */
+    onMotionStart?: (ev: null, data: {
+        direction: PresenceDirection;
+    }) => void;
+    /** Defines whether a component is visible; triggers the "enter" or "exit" motions. */
+    visible?: boolean;
+    /**
+     * By default, the child component remains mounted after it reaches the "finished" state. Set "unmountOnExit" if
+     * you prefer to unmount the component after it finishes exiting.
+     */
+    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): PresenceGroupState;
+    constructor(props: PresenceGroupProps, context?: unknown);
+    private handleExit;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSXElement;
+}
+
+declare type PresenceGroupChild = {
+    element: JSXElement;
+    appear: boolean;
+    visible: boolean;
+    unmountOnExit: boolean;
+};
+
+export declare type PresenceGroupChildContextValue = {
+    appear: boolean;
+    visible: boolean;
+    unmountOnExit: boolean;
+    onExit: () => void;
+};
+
+declare type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;
+
+export declare const PresenceGroupChildProvider: React_2.Provider<PresenceGroupChildContextValue | undefined>;
+
+declare type PresenceGroupProps = {
+    children: React_2.ReactNode;
+};
+
+declare type PresenceGroupState = {
+    childMapping: PresenceGroupChildMapping;
+    firstRender: boolean;
+};
+
+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'> & Partial<MotionParams> & {
+    /**
+     * @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?: JSXIntrinsicElementKeys;
+    children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
+        children: JSXElement;
+    }>;
+};
+
+/**
+ * @internal
+ */
+declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
+
+/**
+ * A hook that reads the ref forwarded by `MotionRefForwarder` from context.
+ * Used in child components to merge the motion ref into the root slot ref.
+ *
+ * @internal
+ */
+export declare function useMotionForwardedRef(): React_2.Ref<HTMLElement> | undefined;
+
+export declare const usePresenceGroupChildContext: () => PresenceGroupChildContextValue | undefined;
+
+export { }

package/lib/components/MotionRefForwarder.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
 /**
  * A hook that reads the ref forwarded by `MotionRefForwarder` from context.

package/lib/components/PresenceGroup.js

@@ -1,9 +1,9 @@
 'use client';
 import { _ as _define_property } from "@swc/helpers/_/_define_property";
-import * as React from 'react';
-import { getNextChildMapping } from '../utils/groups/getNextChildMapping';
-import { getChildMapping } from '../utils/groups/getChildMapping';
-import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
+import * as React from "react";
+import { getNextChildMapping } from "../utils/groups/getNextChildMapping.js";
+import { getChildMapping } from "../utils/groups/getChildMapping.js";
+import { PresenceGroupItemProvider } from "./PresenceGroupItemProvider.js";
 /* eslint-disable @typescript-eslint/explicit-member-accessibility */ /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/member-ordering */ export class PresenceGroup extends React.Component {
     static getDerivedStateFromProps(nextProps, { childMapping: prevChildMapping, firstRender }) {
         const nextChildMapping = getChildMapping(nextProps.children);

package/lib/components/PresenceGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n  children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n  childMapping: PresenceGroupChildMapping;\n  firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n  private mounted: boolean = false;\n\n  static getDerivedStateFromProps(\n    nextProps: PresenceGroupProps,\n    { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n  ): PresenceGroupState {\n    const nextChildMapping = getChildMapping(nextProps.children);\n\n    return {\n      childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n      firstRender: false,\n    };\n  }\n\n  constructor(props: PresenceGroupProps, context?: unknown) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore - React.Component constructor has only one argument in React 19\n    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string): void => {\n    const currentChildMapping = getChildMapping(this.props.children);\n\n    if (childKey in currentChildMapping) {\n      return;\n    }\n\n    if (this.mounted) {\n      this.setState(state => {\n        const childMapping = { ...state.childMapping };\n        delete childMapping[childKey];\n\n        return { childMapping };\n      });\n    }\n  };\n\n  componentDidMount(): void {\n    this.mounted = true;\n  }\n\n  componentWillUnmount(): void {\n    this.mounted = false;\n  }\n  render(): JSXElement {\n    return (\n      <>\n        {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n          <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n            {childProps.element}\n          </PresenceGroupItemProvider>\n        ))}\n      </>\n    );\n  }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,8BAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EAC/C;QACpB,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA8BAG,oBAA0B;QACxB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAA6B;QAC3B,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,6DAA6D;QAC7D,6EAA6E;QAC7E,KAAK,CAACD,OAAOC,UAjBf,uBAAQf,WAAmB,QAyB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}
+{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n  children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n  childMapping: PresenceGroupChildMapping;\n  firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n  private mounted: boolean = false;\n\n  static getDerivedStateFromProps(\n    nextProps: PresenceGroupProps,\n    { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n  ): PresenceGroupState {\n    const nextChildMapping = getChildMapping(nextProps.children);\n\n    return {\n      childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n      firstRender: false,\n    };\n  }\n\n  constructor(props: PresenceGroupProps, context?: unknown) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore - React.Component constructor has only one argument in React 19\n    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string): void => {\n    const currentChildMapping = getChildMapping(this.props.children);\n\n    if (childKey in currentChildMapping) {\n      return;\n    }\n\n    if (this.mounted) {\n      this.setState(state => {\n        const childMapping = { ...state.childMapping };\n        delete childMapping[childKey];\n\n        return { childMapping };\n      });\n    }\n  };\n\n  componentDidMount(): void {\n    this.mounted = true;\n  }\n\n  componentWillUnmount(): void {\n    this.mounted = false;\n  }\n  render(): JSXElement {\n    return (\n      <>\n        {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n          <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n            {childProps.element}\n          </PresenceGroupItemProvider>\n        ))}\n      </>\n    );\n  }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,yCAAsC;AAC1E,SAASC,eAAe,QAAQ,qCAAkC;AAElE,SAASC,yBAAyB,QAAQ,iCAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EAC/C;QACpB,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA8BAG,oBAA0B;QACxB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAA6B;QAC3B,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,6DAA6D;QAC7D,6EAA6E;QAC7E,KAAK,CAACD,OAAOC,UAjBf,uBAAQf,WAAmB,QAyB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}

package/lib/components/PresenceGroupItemProvider.js

@@ -1,6 +1,6 @@
 'use client';
-import * as React from 'react';
-import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
+import * as React from "react";
+import { PresenceGroupChildContext } from "../contexts/PresenceGroupChildContext.js";
 /**
  * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.
  * Not intended for direct use.

package/lib/components/PresenceGroupItemProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}
+{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,2CAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}

package/lib/contexts/MotionBehaviourContext.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 const MotionBehaviourContext = React.createContext(undefined);
 export const MotionBehaviourProvider = MotionBehaviourContext.Provider;
 export const useMotionBehaviourContext = ()=>{

package/lib/contexts/PresenceGroupChildContext.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 /**
  * @internal
  */ export const PresenceGroupChildContext = React.createContext(undefined);

package/lib/factories/createMotionComponent.js

@@ -1,11 +1,11 @@
 'use client';
-import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
-import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
-import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
-import { useChildElement } from '../utils/useChildElement';
-import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
+import { useEventCallback, useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
+import * as React from "react";
+import { useAnimateAtoms } from "../hooks/useAnimateAtoms.js";
+import { useMotionImperativeRef } from "../hooks/useMotionImperativeRef.js";
+import { useIsReducedMotion } from "../hooks/useIsReducedMotion.js";
+import { useChildElement } from "../utils/useChildElement.js";
+import { useMotionBehaviourContext } from "../contexts/MotionBehaviourContext.js";
 /**
  * A private symbol to store the motion definition on the component for variants.
  *

package/lib/factories/createMotionComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["'use client';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef, AnimationHandle } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * A private symbol to store the motion definition on the component for variants.\n *\n * @internal\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type MotionComponentProps = {\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n\n  /**\n   * When this value changes, the animation replays from the start on the same DOM element,\n   * cancelling any in-progress animation, without remounting the component or its children.\n   *\n   * **Why not just use a React `key`?** Changing a React `key` forces a full unmount and\n   * remount of the subtree: DOM nodes are destroyed and recreated, focus is lost, and any\n   * child state is reset. `replayKey` avoids all of that — only the animation effect reruns\n   * while the DOM and component state remain intact.\n   *\n   * Use this when you want to retrigger a motion in response to a state change (e.g. a user\n   * action or a data update) while preserving DOM continuity. It is the declarative equivalent\n   * of calling `imperativeRef.current.play()` but driven by a prop rather than a ref call.\n   *\n   * @example\n   * ```tsx\n   * // Replay a Fade.In each time the user clicks \"Refresh\"\n   * const [replayKey, setReplayKey] = React.useState(0);\n   * <Fade.In replayKey={replayKey}>\n   *   <div>Content</div>\n   * </Fade.In>\n   * <button onClick={() => setReplayKey(k => k + 1)}>Refresh</button>\n   * ```\n   */\n  replayKey?: string | number;\n};\n\nexport type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  MotionComponentProps & MotionParams\n> & {\n  [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n): MotionComponent<MotionParams> {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      replayKey,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const [child, childRef] = useChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const isInitialRender = React.useRef(true);\n    const skipMotions = useMotionBehaviourContext() === 'skip';\n    const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n      skipMotions,\n      params,\n    });\n\n    const animateAtoms = useAnimateAtoms();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    // Stable callback (all deps are refs or useEventCallback) that activates a handle for a new playback cycle.\n    //\n    // TODO: consider moving the cancel+play+rewire sequence into a handle.replay() method on AnimationHandle,\n    // keeping pure animation sequencing on the handle and React callbacks here in the component.\n    const activateAnimationHandle = React.useCallback(\n      (handle: AnimationHandle) => {\n        onMotionStart();\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n      },\n      [onMotionStart, onMotionFinish, onMotionCancel],\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 = { skipMotions, params };\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = childRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        activateAnimationHandle(handle);\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, activateAnimationHandle]);\n\n    // Skips initial mount; on replayKey changes, reuses existing Animation objects via cancel+play\n    // rather than recreating them, preserving DOM continuity.\n    useIsomorphicLayoutEffect(() => {\n      if (isInitialRender.current) {\n        return;\n      }\n\n      const handle = handleRef.current;\n      if (handle) {\n        handle.cancel();\n        handle.play();\n        activateAnimationHandle(handle);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- replayKey is intentionally the only trigger; other deps are stable refs/callbacks\n    }, [replayKey]);\n\n    useIsomorphicLayoutEffect(() => {\n      isInitialRender.current = false;\n\n      return () => {\n        isInitialRender.current = true;\n      };\n    }, []);\n\n    return child;\n  };\n\n  return Object.assign(Atom, {\n    // Heads up!\n    // Always normalize it to a function to simplify types\n    [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n  });\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","useChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","replayKey","_rest","params","child","childRef","handleRef","isInitialRender","useRef","skipMotions","optionsRef","animateAtoms","isReducedMotion","activateAnimationHandle","useCallback","handle","setMotionEndCallbacks","current","finish","element","atoms","cancel","play","Object","assign"],"mappings":"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"}
+{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["'use client';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef, AnimationHandle } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * A private symbol to store the motion definition on the component for variants.\n *\n * @internal\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type MotionComponentProps = {\n  children: JSXElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion is cancelled.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"cancel\" events. The callback is\n   * triggered once all animations have been cancelled with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionCancel?: (ev: null) => void;\n\n  /**\n   * Callback that is called when the whole motion starts.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n   * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n   * so the callback is triggered with \"null\".\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionStart?: (ev: null) => void;\n\n  /**\n   * When this value changes, the animation replays from the start on the same DOM element,\n   * cancelling any in-progress animation, without remounting the component or its children.\n   *\n   * **Why not just use a React `key`?** Changing a React `key` forces a full unmount and\n   * remount of the subtree: DOM nodes are destroyed and recreated, focus is lost, and any\n   * child state is reset. `replayKey` avoids all of that — only the animation effect reruns\n   * while the DOM and component state remain intact.\n   *\n   * Use this when you want to retrigger a motion in response to a state change (e.g. a user\n   * action or a data update) while preserving DOM continuity. It is the declarative equivalent\n   * of calling `imperativeRef.current.play()` but driven by a prop rather than a ref call.\n   *\n   * @example\n   * ```tsx\n   * // Replay a Fade.In each time the user clicks \"Refresh\"\n   * const [replayKey, setReplayKey] = React.useState(0);\n   * <Fade.In replayKey={replayKey}>\n   *   <div>Content</div>\n   * </Fade.In>\n   * <button onClick={() => setReplayKey(k => k + 1)}>Refresh</button>\n   * ```\n   */\n  replayKey?: string | number;\n};\n\nexport type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React.FC<\n  MotionComponentProps & MotionParams\n> & {\n  [MOTION_DEFINITION]: AtomMotionFn<MotionParams>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(\n  value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>,\n): MotionComponent<MotionParams> {\n  const Atom: React.FC<MotionComponentProps & MotionParams> = props => {\n    const {\n      children,\n      imperativeRef,\n      onMotionFinish: onMotionFinishProp,\n      onMotionStart: onMotionStartProp,\n      onMotionCancel: onMotionCancelProp,\n      replayKey,\n      ..._rest\n    } = props;\n    const params = _rest as Exclude<typeof props, MotionComponentProps>;\n    const [child, childRef] = useChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const isInitialRender = React.useRef(true);\n    const skipMotions = useMotionBehaviourContext() === 'skip';\n    const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n      skipMotions,\n      params,\n    });\n\n    const animateAtoms = useAnimateAtoms();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onMotionStart = useEventCallback(() => {\n      onMotionStartProp?.(null);\n    });\n\n    const onMotionFinish = useEventCallback(() => {\n      onMotionFinishProp?.(null);\n    });\n\n    const onMotionCancel = useEventCallback(() => {\n      onMotionCancelProp?.(null);\n    });\n\n    // Stable callback (all deps are refs or useEventCallback) that activates a handle for a new playback cycle.\n    //\n    // TODO: consider moving the cancel+play+rewire sequence into a handle.replay() method on AnimationHandle,\n    // keeping pure animation sequencing on the handle and React callbacks here in the component.\n    const activateAnimationHandle = React.useCallback(\n      (handle: AnimationHandle) => {\n        onMotionStart();\n        handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n        if (optionsRef.current.skipMotions) {\n          handle.finish();\n        }\n      },\n      [onMotionStart, onMotionFinish, onMotionCancel],\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 = { skipMotions, params };\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      const element = childRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n        handleRef.current = handle;\n        activateAnimationHandle(handle);\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [animateAtoms, childRef, handleRef, isReducedMotion, activateAnimationHandle]);\n\n    // Skips initial mount; on replayKey changes, reuses existing Animation objects via cancel+play\n    // rather than recreating them, preserving DOM continuity.\n    useIsomorphicLayoutEffect(() => {\n      if (isInitialRender.current) {\n        return;\n      }\n\n      const handle = handleRef.current;\n      if (handle) {\n        handle.cancel();\n        handle.play();\n        activateAnimationHandle(handle);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps -- replayKey is intentionally the only trigger; other deps are stable refs/callbacks\n    }, [replayKey]);\n\n    useIsomorphicLayoutEffect(() => {\n      isInitialRender.current = false;\n\n      return () => {\n        isInitialRender.current = true;\n      };\n    }, []);\n\n    return child;\n  };\n\n  return Object.assign(Atom, {\n    // Heads up!\n    // Always normalize it to a function to simplify types\n    [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n  });\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","useChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","replayKey","_rest","params","child","childRef","handleRef","isInitialRender","useRef","skipMotions","optionsRef","animateAtoms","isReducedMotion","activateAnimationHandle","useCallback","handle","setMotionEndCallbacks","current","finish","element","atoms","cancel","play","Object","assign"],"mappings":"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"}

package/lib/factories/createMotionComponentVariant.js

@@ -1,4 +1,4 @@
-import { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';
+import { MOTION_DEFINITION, createMotionComponent } from "./createMotionComponent.js";
 /**
  * Create a variant function that wraps a motion function to customize it.
  * The new motion function has the supplied variant params as defaults,

package/lib/factories/createMotionComponentVariant.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport type { MotionComponent } from './createMotionComponent';\nimport { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AAEA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAQ,0BAA0B;AAEnF;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}
+{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport type { MotionComponent } from './createMotionComponent';\nimport { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AAEA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAQ,6BAA0B;AAEnF;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}

package/lib/factories/createPresenceComponent.js

@@ -1,14 +1,14 @@
 'use client';
-import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
-import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
-import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
-import { useMountedState } from '../hooks/useMountedState';
-import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
-import { useChildElement } from '../utils/useChildElement';
-import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
-import { createMotionComponent } from './createMotionComponent';
+import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from "@fluentui/react-utilities";
+import * as React from "react";
+import { PresenceGroupChildContext } from "../contexts/PresenceGroupChildContext.js";
+import { useAnimateAtoms } from "../hooks/useAnimateAtoms.js";
+import { useMotionImperativeRef } from "../hooks/useMotionImperativeRef.js";
+import { useMountedState } from "../hooks/useMountedState.js";
+import { useIsReducedMotion } from "../hooks/useIsReducedMotion.js";
+import { useChildElement } from "../utils/useChildElement.js";
+import { useMotionBehaviourContext } from "../contexts/MotionBehaviourContext.js";
+import { createMotionComponent } from "./createMotionComponent.js";
 /**
  * A private symbol to store the motion definition on the component for variants.
  *