@fluentui/react-motion 9.2.0 → 9.2.2

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Mon, 17 Jun 2024 07:31:07 GMT and should not be manually modified.
+This log was last generated on Thu, 04 Jul 2024 15:13:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.2)
+
+Thu, 04 Jul 2024 15:13:31 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.1..@fluentui/react-motion_v9.2.2)
+
+### Patches
+
+- fix: Check if DOM is available before using Element global to avoid breaks in build. ([PR #31907](https://github.com/microsoft/fluentui/pull/31907) by estebanmu@microsoft.com)
+
+## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.1)
+
+Mon, 01 Jul 2024 20:30:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.0..@fluentui/react-motion_v9.2.1)
+
+### Patches
+
+- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
+- fix: improve Jest compat ([PR #31715](https://github.com/microsoft/fluentui/pull/31715) by olfedias@microsoft.com)
+- chore: adds 'use no memo' directive ([PR #31787](https://github.com/microsoft/fluentui/pull/31787) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
+
 ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.0)
 
-Mon, 17 Jun 2024 07:31:07 GMT 
+Mon, 17 Jun 2024 07:34:16 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.1.0..@fluentui/react-motion_v9.2.0)
 
 ### Minor changes

package/lib/components/PresenceGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\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  ) {\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    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string) => {\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() {\n    this.mounted = true;\n  }\n\n  componentWillUnmount() {\n    this.mounted = false;\n  }\n\n  render() {\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,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,EACnE;QACA,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,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;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAff,uBAAQf,WAAmB;QAuB3B,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;AAsCF"}
+{"version":3,"sources":["PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\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  ) {\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    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string) => {\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() {\n    this.mounted = true;\n  }\n\n  componentWillUnmount() {\n    this.mounted = false;\n  }\n\n  render() {\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,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,EACnE;QACA,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,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;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAff,uBAAQf,WAAmB;QAuB3B,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;AAsCF"}

package/lib/components/PresenceGroupItemProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PresenceGroupItemProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: React.ReactElement;\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 * @internal\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 */\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,YAAYA,WAAW,QAAQ;AAE/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":["PresenceGroupItemProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: React.ReactElement;\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 * @internal\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 */\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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/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"}

package/lib/contexts/PresenceGroupChildContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n  appear: boolean;\n  visible: boolean;\n  unmountOnExit: boolean;\n\n  onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW"}
+{"version":3,"sources":["PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n  appear: boolean;\n  visible: boolean;\n  unmountOnExit: boolean;\n\n  onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined"],"rangeMappings":";;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW"}

package/lib/factories/createMotionComponent.js

@@ -1,8 +1,8 @@
 import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
+import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
 import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
-import { animateAtoms } from '../utils/animateAtoms';
+import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
 import { getChildElement } from '../utils/getChildElement';
 /**
  * Creates a component that will animate the children using the provided motion.
@@ -10,12 +10,14 @@ import { getChildElement } from '../utils/getChildElement';
  * @param value - A motion definition.
  */ export function createMotionComponent(value) {
     const Atom = (props)=>{
+        'use no memo';
         const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
         const params = _rest;
         const child = getChildElement(children);
         const handleRef = useMotionImperativeRef(imperativeRef);
         const elementRef = React.useRef();
         const paramsRef = React.useRef(params);
+        const animateAtoms = useAnimateAtoms();
         const isReducedMotion = useIsReducedMotion();
         const onMotionStart = useEventCallback(()=>{
             onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
@@ -49,6 +51,7 @@ import { getChildElement } from '../utils/getChildElement';
                 };
             }
         }, [
+            animateAtoms,
             handleRef,
             isReducedMotion,
             onMotionFinish,

package/lib/factories/createMotionComponent.js.map

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

package/lib/factories/createPresenceComponent.js

@@ -1,16 +1,17 @@
 import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
-import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
+import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
 import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
 import { useMountedState } from '../hooks/useMountedState';
-import { animateAtoms } from '../utils/animateAtoms';
+import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
 import { getChildElement } from '../utils/getChildElement';
 function shouldSkipAnimation(appear, isFirstMount, visible) {
     return !appear && isFirstMount && !!visible;
 }
 export function createPresenceComponent(value) {
     const Presence = (props)=>{
+        'use no memo';
         const itemContext = React.useContext(PresenceGroupChildContext);
         const merged = {
             ...itemContext,
@@ -27,6 +28,7 @@ export function createPresenceComponent(value) {
             appear,
             params
         });
+        const animateAtoms = useAnimateAtoms();
         const isFirstMount = useFirstMount();
         const isReducedMotion = useIsReducedMotion();
         const handleMotionStart = useEventCallback((direction)=>{
@@ -88,6 +90,7 @@ export function createPresenceComponent(value) {
         }, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [
+            animateAtoms,
             handleRef,
             isReducedMotion,
             handleMotionFinish,

package/lib/factories/createPresenceComponent.js.map

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

package/lib/hooks/useAnimateAtoms.js

@@ -0,0 +1,110 @@
+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
+    return React.useCallback((element, value, options)=>{
+        const atoms = Array.isArray(value) ? value : [
+            value
+        ];
+        const { isReducedMotion } = options;
+        const animations = atoms.map((motion)=>{
+            const { keyframes, ...params } = motion;
+            const animation = element.animate(keyframes, {
+                fill: 'forwards',
+                ...params,
+                ...isReducedMotion && {
+                    duration: 1
+                }
+            });
+            animation.persist();
+            return animation;
+        });
+        return {
+            set playbackRate (rate){
+                animations.forEach((animation)=>{
+                    animation.playbackRate = rate;
+                });
+            },
+            setMotionEndCallbacks (onfinish, oncancel) {
+                Promise.all(animations.map((animation)=>animation.finished)).then(()=>{
+                    onfinish();
+                }).catch((err)=>{
+                    var _element_ownerDocument_defaultView;
+                    const DOMException = (_element_ownerDocument_defaultView = element.ownerDocument.defaultView) === null || _element_ownerDocument_defaultView === void 0 ? void 0 : _element_ownerDocument_defaultView.DOMException;
+                    // Ignores "DOMException: The user aborted a request" that appears if animations are cancelled
+                    if (DOMException && err instanceof DOMException && err.name === 'AbortError') {
+                        oncancel();
+                        return;
+                    }
+                    throw err;
+                });
+            },
+            cancel: ()=>{
+                animations.forEach((animation)=>{
+                    animation.cancel();
+                });
+            },
+            pause: ()=>{
+                animations.forEach((animation)=>{
+                    animation.pause();
+                });
+            },
+            play: ()=>{
+                animations.forEach((animation)=>{
+                    animation.play();
+                });
+            },
+            finish: ()=>{
+                animations.forEach((animation)=>{
+                    animation.finish();
+                });
+            }
+        };
+    }, []);
+}

package/lib/hooks/useAnimateAtoms.js.map

@@ -0,0 +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":"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"}

package/lib/hooks/useIsReducedMotion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n  const { targetDocument } = useFluent();\n  const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n  const queryValue = React.useRef<boolean>(false);\n  const isEnabled = React.useCallback(() => queryValue.current, []);\n\n  React.useEffect(() => {\n    if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n      return;\n    }\n\n    const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n    if (queryMatch.matches) {\n      queryValue.current = true;\n    }\n\n    const matchListener = (e: MediaQueryListEvent) => {\n      queryValue.current = e.matches;\n    };\n\n    queryMatch.addEventListener('change', matchListener);\n\n    return () => {\n      queryMatch.removeEventListener('change', matchListener);\n    };\n  }, [targetWindow]);\n\n  return isEnabled;\n}\n"],"names":["React","useFluent_unstable","useFluent","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;QACSG;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaR,MAAMS,MAAM,CAAU;IACzC,MAAMC,YAAYV,MAAMW,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEZ,MAAMa,SAAS,CAAC;QACd,IAAIP,iBAAiB,QAAQ,OAAOA,aAAaQ,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaT,aAAaQ,UAAU,CAACX;QAE3C,IAAIY,WAAWC,OAAO,EAAE;YACtBR,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBV,WAAWI,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACX;KAAa;IAEjB,OAAOI;AACT"}
+{"version":3,"sources":["useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n  const { targetDocument } = useFluent();\n  const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n  const queryValue = React.useRef<boolean>(false);\n  const isEnabled = React.useCallback(() => queryValue.current, []);\n\n  React.useEffect(() => {\n    if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n      return;\n    }\n\n    const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n    if (queryMatch.matches) {\n      queryValue.current = true;\n    }\n\n    const matchListener = (e: MediaQueryListEvent) => {\n      queryValue.current = e.matches;\n    };\n\n    queryMatch.addEventListener('change', matchListener);\n\n    return () => {\n      queryMatch.removeEventListener('change', matchListener);\n    };\n  }, [targetWindow]);\n\n  return isEnabled;\n}\n"],"names":["React","useFluent_unstable","useFluent","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;QACSG;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaR,MAAMS,MAAM,CAAU;IACzC,MAAMC,YAAYV,MAAMW,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEZ,MAAMa,SAAS,CAAC;QACd,IAAIP,iBAAiB,QAAQ,OAAOA,aAAaQ,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaT,aAAaQ,UAAU,CAACX;QAE3C,IAAIY,WAAWC,OAAO,EAAE;YACtBR,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBV,WAAWI,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACX;KAAa;IAEjB,OAAOI;AACT"}

package/lib/hooks/useMotionImperativeRef.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n  const animationRef = React.useRef<AnimationHandle | undefined>();\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    setPlayState: state => {\n      if (state === 'running') {\n        animationRef.current?.play();\n      }\n\n      if (state === 'paused') {\n        animationRef.current?.pause();\n      }\n    },\n    setPlaybackRate: rate => {\n      if (animationRef.current) {\n        animationRef.current.playbackRate = rate;\n      }\n    },\n  }));\n\n  return animationRef;\n}\n"],"names":["React","useMotionImperativeRef","imperativeRef","animationRef","useRef","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uBAAuBC,aAAqE;IAC1G,MAAMC,eAAeH,MAAMI,MAAM;IAEjCJ,MAAMK,mBAAmB,CAACH,eAAe,IAAO,CAAA;YAC9CI,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBJ;qBAAAA,wBAAAA,aAAaK,OAAO,cAApBL,4CAAAA,sBAAsBM,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBJ;qBAAAA,yBAAAA,aAAaK,OAAO,cAApBL,6CAAAA,uBAAsBO,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIT,aAAaK,OAAO,EAAE;oBACxBL,aAAaK,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOT;AACT"}
+{"version":3,"sources":["useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n  const animationRef = React.useRef<AnimationHandle | undefined>();\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    setPlayState: state => {\n      if (state === 'running') {\n        animationRef.current?.play();\n      }\n\n      if (state === 'paused') {\n        animationRef.current?.pause();\n      }\n    },\n    setPlaybackRate: rate => {\n      if (animationRef.current) {\n        animationRef.current.playbackRate = rate;\n      }\n    },\n  }));\n\n  return animationRef;\n}\n"],"names":["React","useMotionImperativeRef","imperativeRef","animationRef","useRef","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uBAAuBC,aAAqE;IAC1G,MAAMC,eAAeH,MAAMI,MAAM;IAEjCJ,MAAMK,mBAAmB,CAACH,eAAe,IAAO,CAAA;YAC9CI,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBJ;qBAAAA,wBAAAA,aAAaK,OAAO,cAApBL,4CAAAA,sBAAsBM,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBJ;qBAAAA,yBAAAA,aAAaK,OAAO,cAApBL,6CAAAA,uBAAsBO,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIT,aAAaK,OAAO,EAAE;oBACxBL,aAAaK,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOT;AACT"}

package/lib/hooks/useMountedState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}
+{"version":3,"sources":["useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}

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"],"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 { 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"}

package/lib/motions/motionTokens.js.map

@@ -1 +1 @@
-{"version":3,"sources":["motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n  durationUltraFast: 50,\n  durationFaster: 100,\n  durationFast: 150,\n  durationNormal: 200,\n  durationGentle: 250,\n  durationSlow: 300,\n  durationSlower: 400,\n  durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n  curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n  curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n  curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n  curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n  curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n  curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n  curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n  curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n  curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n  ...durations,\n  ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["durations","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curves","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear","motionTokens"],"mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;AAC/B,OAAO,MAAMA,YAAY;IACvBC,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB,EAAW;AAEX,mDAAmD;AACnD,yCAAyC;AACzC,OAAO,MAAMC,SAAS;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf,EAAW;AAEX,uCAAuC;AACvC,OAAO,MAAMC,eAAe;IAC1B,GAAGnB,SAAS;IACZ,GAAGS,MAAM;AACX,EAAE,CAEF;;;;;;;;;AASA"}
+{"version":3,"sources":["motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n  durationUltraFast: 50,\n  durationFaster: 100,\n  durationFast: 150,\n  durationNormal: 200,\n  durationGentle: 250,\n  durationSlow: 300,\n  durationSlower: 400,\n  durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n  curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n  curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n  curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n  curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n  curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n  curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n  curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n  curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n  curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n  ...durations,\n  ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["durations","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curves","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear","motionTokens"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;AAC/B,OAAO,MAAMA,YAAY;IACvBC,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB,EAAW;AAEX,mDAAmD;AACnD,yCAAyC;AACzC,OAAO,MAAMC,SAAS;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf,EAAW;AAEX,uCAAuC;AACvC,OAAO,MAAMC,eAAe;IAC1B,GAAGnB,SAAS;IACZ,GAAGS,MAAM;AACX,EAAE,CAEF;;;;;;;;;AASA"}

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":[],"mappings":"AAAA,WAkCE"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceMotion = {\n  enter: AtomMotion | AtomMotion[];\n  exit: AtomMotion | AtomMotion[];\n};\n\n/**\n * @internal\n *\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n  params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate'> & {\n  setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n};\n\nexport type MotionImperativeRef = {\n  /** Sets the playback rate of the animation, where 1 is normal speed. */\n  setPlaybackRate: (rate: number) => void;\n\n  /** Sets the state of the animation to running or paused. */\n  setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA4BA,WAME"}

package/lib/utils/getChildElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactIs from 'react-is';\n\nexport function getChildElement(children: React.ReactElement) {\n  try {\n    const child = React.Children.only(children) as React.ReactElement & { ref: React.Ref<HTMLElement> };\n\n    if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {\n      return child as React.ReactElement & { ref: React.Ref<HTMLElement> };\n    }\n\n    // We don't need to do anything here: we catch the exception from React to throw a more meaningful error\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  throw new Error(\n    [\n      '@fluentui/react-motion: Invalid child element.',\n      '\\n',\n      'Motion factories require a single child element to be passed. ',\n      'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n    ].join(''),\n  );\n}\n"],"names":["React","ReactIs","getChildElement","children","child","Children","only","type","isForwardRef","Error","join"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,aAAa,WAAW;AAEpC,OAAO,SAASC,gBAAgBC,QAA4B;IAC1D,IAAI;QACF,MAAMC,QAAQJ,MAAMK,QAAQ,CAACC,IAAI,CAACH;QAElC,IAAI,OAAOC,MAAMG,IAAI,KAAK,YAAYN,QAAQO,YAAY,CAACJ,QAAQ;YACjE,OAAOA;QACT;IAEA,wGAAwG;IACxG,oCAAoC;IACtC,EAAE,OAAM,CAAC;IAET,MAAM,IAAIK,MACR;QACE;QACA;QACA;QACA;KACD,CAACC,IAAI,CAAC;AAEX"}
+{"version":3,"sources":["getChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactIs from 'react-is';\n\nexport function getChildElement(children: React.ReactElement) {\n  try {\n    const child = React.Children.only(children) as React.ReactElement & { ref: React.Ref<HTMLElement> };\n\n    if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {\n      return child as React.ReactElement & { ref: React.Ref<HTMLElement> };\n    }\n\n    // We don't need to do anything here: we catch the exception from React to throw a more meaningful error\n    // eslint-disable-next-line no-empty\n  } catch {}\n\n  throw new Error(\n    [\n      '@fluentui/react-motion: Invalid child element.',\n      '\\n',\n      'Motion factories require a single child element to be passed. ',\n      'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n    ].join(''),\n  );\n}\n"],"names":["React","ReactIs","getChildElement","children","child","Children","only","type","isForwardRef","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,aAAa,WAAW;AAEpC,OAAO,SAASC,gBAAgBC,QAA4B;IAC1D,IAAI;QACF,MAAMC,QAAQJ,MAAMK,QAAQ,CAACC,IAAI,CAACH;QAElC,IAAI,OAAOC,MAAMG,IAAI,KAAK,YAAYN,QAAQO,YAAY,CAACJ,QAAQ;YACjE,OAAOA;QACT;IAEA,wGAAwG;IACxG,oCAAoC;IACtC,EAAE,OAAM,CAAC;IAET,MAAM,IAAIK,MACR;QACE;QACA;QACA;QACA;KACD,CAACC,IAAI,CAAC;AAEX"}

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

@@ -1 +1 @@
-{"version":3,"sources":["getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n  const childMapping: PresenceGroupChildMapping = {};\n\n  if (children) {\n    React.Children.toArray(children).forEach(child => {\n      if (React.isValidElement(child)) {\n        childMapping[child.key ?? ''] = {\n          appear: false,\n          element: child,\n          visible: true,\n          unmountOnExit: true,\n        };\n      }\n    });\n  }\n\n  return childMapping;\n}\n"],"names":["React","getChildMapping","children","childMapping","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZF,MAAMI,QAAQ,CAACC,OAAO,CAACH,UAAUI,OAAO,CAACC,CAAAA;YACvC,IAAIP,MAAMQ,cAAc,CAACD,QAAQ;oBAClBA;gBAAbJ,YAAY,CAACI,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOV;AACT"}
+{"version":3,"sources":["getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n  const childMapping: PresenceGroupChildMapping = {};\n\n  if (children) {\n    React.Children.toArray(children).forEach(child => {\n      if (React.isValidElement(child)) {\n        childMapping[child.key ?? ''] = {\n          appear: false,\n          element: child,\n          visible: true,\n          unmountOnExit: true,\n        };\n      }\n    });\n  }\n\n  return childMapping;\n}\n"],"names":["React","getChildMapping","children","childMapping","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZF,MAAMI,QAAQ,CAACC,OAAO,CAACH,UAAUI,OAAO,CAACC,CAAAA;YACvC,IAAIP,MAAMQ,cAAc,CAACD,QAAQ;oBAClBA;gBAAbJ,YAAY,CAACI,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOV;AACT"}

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

@@ -1 +1 @@
-{"version":3,"sources":["getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n  prevChildMapping: PresenceGroupChildMapping,\n  nextChildMapping: PresenceGroupChildMapping,\n) {\n  const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n  Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n    const hasPrev = key in prevChildMapping;\n    const hasNext = key in nextChildMapping;\n\n    if (hasNext) {\n      // Case 1: item hasn't changed transition states\n      if (hasPrev) {\n        childrenMapping[key] = { ...childDefinition };\n        return;\n      }\n\n      // Case 2: item is new (entering)\n      childrenMapping[key] = {\n        ...childDefinition,\n        appear: true,\n        visible: true,\n      };\n      return;\n    }\n\n    // Case 3: item is leaving\n    childrenMapping[key] = {\n      ...childDefinition,\n      visible: false,\n    };\n  });\n\n  return childrenMapping;\n}\n"],"names":["mergeChildMappings","getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAG1D,OAAO,SAASC,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBJ,mBAAmBE,kBAAkBC;IAE7DE,OAAOC,OAAO,CAACF,iBAAiBG,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAON;QACvB,MAAMS,UAAUH,OAAOL;QAEvB,IAAIQ,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXN,eAAe,CAACI,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCL,eAAe,CAACI,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BT,eAAe,CAACI,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOT;AACT"}
+{"version":3,"sources":["getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n  prevChildMapping: PresenceGroupChildMapping,\n  nextChildMapping: PresenceGroupChildMapping,\n) {\n  const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n  Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n    const hasPrev = key in prevChildMapping;\n    const hasNext = key in nextChildMapping;\n\n    if (hasNext) {\n      // Case 1: item hasn't changed transition states\n      if (hasPrev) {\n        childrenMapping[key] = { ...childDefinition };\n        return;\n      }\n\n      // Case 2: item is new (entering)\n      childrenMapping[key] = {\n        ...childDefinition,\n        appear: true,\n        visible: true,\n      };\n      return;\n    }\n\n    // Case 3: item is leaving\n    childrenMapping[key] = {\n      ...childDefinition,\n      visible: false,\n    };\n  });\n\n  return childrenMapping;\n}\n"],"names":["mergeChildMappings","getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAG1D,OAAO,SAASC,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBJ,mBAAmBE,kBAAkBC;IAE7DE,OAAOC,OAAO,CAACF,iBAAiBG,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAON;QACvB,MAAMS,UAAUH,OAAOL;QAEvB,IAAIQ,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXN,eAAe,CAACI,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCL,eAAe,CAACI,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BT,eAAe,CAACI,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOT;AACT"}

package/lib/utils/groups/mergeChildMappings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n  prevMapping: PresenceGroupChildMapping,\n  nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n  function getValueForKey(key: string) {\n    return key in nextMapping ? nextMapping[key] : prevMapping[key];\n  }\n\n  // For each key of `next`, the list of keys to insert before that key in\n  // the combined list\n  const nextKeysPending: Record<string, string[]> = {};\n  let pendingKeys: string[] = [];\n\n  // eslint-disable-next-line guard-for-in\n  for (const prevKey in prevMapping) {\n    if (prevKey in nextMapping) {\n      if (pendingKeys.length) {\n        nextKeysPending[prevKey] = pendingKeys;\n        pendingKeys = [];\n      }\n\n      continue;\n    }\n\n    pendingKeys.push(prevKey);\n  }\n\n  const childMapping: PresenceGroupChildMapping = {};\n\n  // eslint-disable-next-line guard-for-in\n  for (const nextKey in nextMapping) {\n    if (nextKeysPending[nextKey]) {\n      for (const pendingNextKey of nextKeysPending[nextKey]) {\n        childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n      }\n    }\n\n    childMapping[nextKey] = getValueForKey(nextKey);\n  }\n\n  // Finally, add the keys which didn't appear before any key in `next`\n  for (const pendingKey of pendingKeys) {\n    childMapping[pendingKey] = getValueForKey(pendingKey);\n  }\n\n  return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,mBACdC,WAAsC,EACtCC,WAAsC;IAEtC,SAASC,eAAeC,GAAW;QACjC,OAAOA,OAAOF,cAAcA,WAAW,CAACE,IAAI,GAAGH,WAAW,CAACG,IAAI;IACjE;IAEA,wEAAwE;IACxE,oBAAoB;IACpB,MAAMC,kBAA4C,CAAC;IACnD,IAAIC,cAAwB,EAAE;IAE9B,wCAAwC;IACxC,IAAK,MAAMC,WAAWN,YAAa;QACjC,IAAIM,WAAWL,aAAa;YAC1B,IAAII,YAAYE,MAAM,EAAE;gBACtBH,eAAe,CAACE,QAAQ,GAAGD;gBAC3BA,cAAc,EAAE;YAClB;YAEA;QACF;QAEAA,YAAYG,IAAI,CAACF;IACnB;IAEA,MAAMG,eAA0C,CAAC;IAEjD,wCAAwC;IACxC,IAAK,MAAMC,WAAWT,YAAa;QACjC,IAAIG,eAAe,CAACM,QAAQ,EAAE;YAC5B,KAAK,MAAMC,kBAAkBP,eAAe,CAACM,QAAQ,CAAE;gBACrDD,YAAY,CAACE,eAAe,GAAGT,eAAeS;YAChD;QACF;QAEAF,YAAY,CAACC,QAAQ,GAAGR,eAAeQ;IACzC;IAEA,qEAAqE;IACrE,KAAK,MAAME,cAAcP,YAAa;QACpCI,YAAY,CAACG,WAAW,GAAGV,eAAeU;IAC5C;IAEA,OAAOH;AACT"}
+{"version":3,"sources":["mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n  prevMapping: PresenceGroupChildMapping,\n  nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n  function getValueForKey(key: string) {\n    return key in nextMapping ? nextMapping[key] : prevMapping[key];\n  }\n\n  // For each key of `next`, the list of keys to insert before that key in\n  // the combined list\n  const nextKeysPending: Record<string, string[]> = {};\n  let pendingKeys: string[] = [];\n\n  // eslint-disable-next-line guard-for-in\n  for (const prevKey in prevMapping) {\n    if (prevKey in nextMapping) {\n      if (pendingKeys.length) {\n        nextKeysPending[prevKey] = pendingKeys;\n        pendingKeys = [];\n      }\n\n      continue;\n    }\n\n    pendingKeys.push(prevKey);\n  }\n\n  const childMapping: PresenceGroupChildMapping = {};\n\n  // eslint-disable-next-line guard-for-in\n  for (const nextKey in nextMapping) {\n    if (nextKeysPending[nextKey]) {\n      for (const pendingNextKey of nextKeysPending[nextKey]) {\n        childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n      }\n    }\n\n    childMapping[nextKey] = getValueForKey(nextKey);\n  }\n\n  // Finally, add the keys which didn't appear before any key in `next`\n  for (const pendingKey of pendingKeys) {\n    childMapping[pendingKey] = getValueForKey(pendingKey);\n  }\n\n  return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,mBACdC,WAAsC,EACtCC,WAAsC;IAEtC,SAASC,eAAeC,GAAW;QACjC,OAAOA,OAAOF,cAAcA,WAAW,CAACE,IAAI,GAAGH,WAAW,CAACG,IAAI;IACjE;IAEA,wEAAwE;IACxE,oBAAoB;IACpB,MAAMC,kBAA4C,CAAC;IACnD,IAAIC,cAAwB,EAAE;IAE9B,wCAAwC;IACxC,IAAK,MAAMC,WAAWN,YAAa;QACjC,IAAIM,WAAWL,aAAa;YAC1B,IAAII,YAAYE,MAAM,EAAE;gBACtBH,eAAe,CAACE,QAAQ,GAAGD;gBAC3BA,cAAc,EAAE;YAClB;YAEA;QACF;QAEAA,YAAYG,IAAI,CAACF;IACnB;IAEA,MAAMG,eAA0C,CAAC;IAEjD,wCAAwC;IACxC,IAAK,MAAMC,WAAWT,YAAa;QACjC,IAAIG,eAAe,CAACM,QAAQ,EAAE;YAC5B,KAAK,MAAMC,kBAAkBP,eAAe,CAACM,QAAQ,CAAE;gBACrDD,YAAY,CAACE,eAAe,GAAGT,eAAeS;YAChD;QACF;QAEAF,YAAY,CAACC,QAAQ,GAAGR,eAAeQ;IACzC;IAEA,qEAAqE;IACrE,KAAK,MAAME,cAAcP,YAAa;QACpCI,YAAY,CAACG,WAAW,GAAGV,eAAeU;IAC5C;IAEA,OAAOH;AACT"}

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

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

package/lib-commonjs/components/PresenceGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PresenceGroup.js"],"sourcesContent":["import { _ as _define_property } from \"@swc/helpers/_/_define_property\";\nimport * as React from 'react';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n/* 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 {\n    static getDerivedStateFromProps(nextProps, { childMapping: prevChildMapping, firstRender }) {\n        const nextChildMapping = getChildMapping(nextProps.children);\n        return {\n            childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n            firstRender: false\n        };\n    }\n    componentDidMount() {\n        this.mounted = true;\n    }\n    componentWillUnmount() {\n        this.mounted = false;\n    }\n    render() {\n        return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ React.createElement(PresenceGroupItemProvider, {\n                ...childProps,\n                childKey: childKey,\n                key: childKey,\n                onExit: this.handleExit\n            }, childProps.element)));\n    }\n    constructor(props, context){\n        super(props, context);\n        _define_property(this, \"mounted\", false);\n        _define_property(this, \"handleExit\", (childKey)=>{\n            const currentChildMapping = getChildMapping(this.props.children);\n            if (childKey in currentChildMapping) {\n                return;\n            }\n            if (this.mounted) {\n                this.setState((state)=>{\n                    const childMapping = {\n                        ...state.childMapping\n                    };\n                    delete childMapping[childKey];\n                    return {\n                        childMapping\n                    };\n                });\n            }\n        });\n        this.state = {\n            childMapping: {},\n            firstRender: true\n        };\n    }\n}\n"],"names":["PresenceGroup","React","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","getChildMapping","children","getNextChildMapping","componentDidMount","mounted","componentWillUnmount","render","createElement","Fragment","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","_define_property","currentChildMapping","setState"],"mappings":";;;;+BAKqMA;;;eAAAA;;;;iCAL/J;iEACf;qCACa;iCACJ;2CACU;AACqJ,MAAMA,sBAAsBC,OAAMC,SAAS;IACtO,OAAOC,yBAAyBC,SAAS,EAAE,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAE,EAAE;QACxF,MAAMC,mBAAmBC,IAAAA,gCAAe,EAACL,UAAUM,QAAQ;QAC3D,OAAO;YACHL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAmB,EAACL,kBAAkBE;YACrFD,aAAa;QACjB;IACJ;IACAK,oBAAoB;QAChB,IAAI,CAACC,OAAO,GAAG;IACnB;IACAC,uBAAuB;QACnB,IAAI,CAACD,OAAO,GAAG;IACnB;IACAE,SAAS;QACL,OAAO,WAAW,GAAGd,OAAMe,aAAa,CAACf,OAAMgB,QAAQ,EAAE,MAAMC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACf,YAAY,EAAEgB,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,GAAG,WAAW,GAAGtB,OAAMe,aAAa,CAACQ,oDAAyB,EAAE;gBAC1L,GAAGD,UAAU;gBACbD,UAAUA;gBACVG,KAAKH;gBACLI,QAAQ,IAAI,CAACC,UAAU;YAC3B,GAAGJ,WAAWK,OAAO;IAC7B;IACAC,YAAYC,KAAK,EAAEC,OAAO,CAAC;QACvB,KAAK,CAACD,OAAOC;QACbC,IAAAA,kBAAgB,EAAC,IAAI,EAAE,WAAW;QAClCA,IAAAA,kBAAgB,EAAC,IAAI,EAAE,cAAc,CAACV;YAClC,MAAMW,sBAAsBxB,IAAAA,gCAAe,EAAC,IAAI,CAACqB,KAAK,CAACpB,QAAQ;YAC/D,IAAIY,YAAYW,qBAAqB;gBACjC;YACJ;YACA,IAAI,IAAI,CAACpB,OAAO,EAAE;gBACd,IAAI,CAACqB,QAAQ,CAAC,CAACd;oBACX,MAAMf,eAAe;wBACjB,GAAGe,MAAMf,YAAY;oBACzB;oBACA,OAAOA,YAAY,CAACiB,SAAS;oBAC7B,OAAO;wBACHjB;oBACJ;gBACJ;YACJ;QACJ;QACA,IAAI,CAACe,KAAK,GAAG;YACTf,cAAc,CAAC;YACfE,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\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  ) {\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    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string) => {\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() {\n    this.mounted = true;\n  }\n\n  componentWillUnmount() {\n    this.mounted = false;\n  }\n\n  render() {\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":["PresenceGroup","React","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","getChildMapping","children","getNextChildMapping","componentDidMount","mounted","componentWillUnmount","render","createElement","Fragment","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","_define_property","currentChildMapping","setState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBaA;;;eAAAA;;;;;iEApBU;qCAEa;iCACJ;2CAEU;AAenC,MAAMA,sBAAsBC,OAAMC,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBC,IAAAA,gCAAAA,EAAgBL,UAAUM,QAAQ;QAE3D,OAAO;YACLL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAAA,EAAoBL,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAK,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,OAAA,WAAA,GACEd,OAAAe,aAAA,CAAAf,OAAAgB,QAAA,EAAA,MACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACf,YAAY,EAAEgB,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,GAAA,WAAA,GAClEtB,OAAAe,aAAA,CAACQ,oDAAAA,EAAAA;gBAA2B,GAAGD,UAAU;gBAAED,UAAUA;gBAAUG,KAAKH;gBAAUI,QAAQ,IAAI,CAACC,UAAU;eAClGJ,WAAWK,OAAO;IAK7B;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAffC,IAAAA,kBAAA,EAAA,IAAA,EAAQnB,WAAmB;QAuB3BmB,IAAAA,kBAAA,EAAA,IAAA,EAAQL,cAAa,CAACL;YACpB,MAAMW,sBAAsBxB,IAAAA,gCAAAA,EAAgB,IAAI,CAACqB,KAAK,CAACpB,QAAQ;YAE/D,IAAIY,YAAYW,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAACpB,OAAO,EAAE;gBAChB,IAAI,CAACqB,QAAQ,CAACd,CAAAA;oBACZ,MAAMf,eAAe;wBAAE,GAAGe,MAAMf,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACiB,SAAS;oBAE7B,OAAO;wBAAEjB;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACe,KAAK,GAAG;YACXf,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAsCF"}

package/lib-commonjs/components/PresenceGroupItemProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PresenceGroupItemProvider.js"],"sourcesContent":["import * as React from 'react';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\n/**\n * @internal\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 */ export const PresenceGroupItemProvider = (props)=>{\n    const { appear, childKey, onExit, visible, unmountOnExit } = props;\n    const contextValue = React.useMemo(()=>({\n            appear,\n            visible,\n            onExit: ()=>onExit(childKey),\n            unmountOnExit\n        }), [\n        appear,\n        childKey,\n        onExit,\n        visible,\n        unmountOnExit\n    ]);\n    return /*#__PURE__*/ React.createElement(PresenceGroupChildContext.Provider, {\n        value: contextValue\n    }, props.children);\n};\n"],"names":["PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","React","useMemo","createElement","PresenceGroupChildContext","Provider","value","children"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;2CACmB;AAM/B,MAAMA,4BAA4B,CAACC;IAC1C,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAChCP;YACAG;YACAD,QAAQ,IAAIA,OAAOD;YACnBG;QACJ,CAAA,GAAI;QACJJ;QACAC;QACAC;QACAC;QACAC;KACH;IACD,OAAO,WAAW,GAAGE,OAAME,aAAa,CAACC,oDAAyB,CAACC,QAAQ,EAAE;QACzEC,OAAON;IACX,GAAGN,MAAMa,QAAQ;AACrB"}
+{"version":3,"sources":["PresenceGroupItemProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: React.ReactElement;\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 * @internal\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 */\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":["PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","React","useMemo","createElement","PresenceGroupChildContext","Provider","value","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;;iEAnBU;2CAEmB;AAiBnC,MAAMA,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeC,OAAMC,OAAO,CAChC,IAAO,CAAA;YACLP;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,OAAA,WAAA,GAAOE,OAAAE,aAAA,CAACC,oDAAAA,CAA0BC,QAAQ,EAAA;QAACC,OAAON;OAAeN,MAAMa,QAAQ;AACjF"}

package/lib-commonjs/contexts/PresenceGroupChildContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PresenceGroupChildContext.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n */ export const PresenceGroupChildContext = React.createContext(undefined);\n"],"names":["PresenceGroupChildContext","React","createContext","undefined"],"mappings":";;;;+BAGiBA;;;eAAAA;;;;iEAHM;AAGZ,MAAMA,0CAA4BC,OAAMC,aAAa,CAACC"}
+{"version":3,"sources":["PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n  appear: boolean;\n  visible: boolean;\n  unmountOnExit: boolean;\n\n  onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["PresenceGroupChildContext","React","createContext","undefined"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;AAgBhB,MAAMA,0CAA4BC,OAAMC,aAAa,CAA6CC"}