@fluentui/react-motion 9.9.0 → 9.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/CHANGELOG.md +22 -2
  2. package/dist/index.d.ts +2 -1
  3. package/lib/components/PresenceGroup.js +2 -3
  4. package/lib/components/PresenceGroup.js.map +1 -1
  5. package/lib/components/PresenceGroupItemProvider.js.map +1 -1
  6. package/lib/contexts/MotionBehaviourContext.js.map +1 -1
  7. package/lib/contexts/PresenceGroupChildContext.js.map +1 -1
  8. package/lib/factories/createMotionComponent.js.map +1 -1
  9. package/lib/factories/createPresenceComponent.js.map +1 -1
  10. package/lib/factories/createPresenceComponentVariant.js.map +1 -1
  11. package/lib/hooks/useAnimateAtoms.js.map +1 -1
  12. package/lib/hooks/useIsReducedMotion.js.map +1 -1
  13. package/lib/hooks/useMotionImperativeRef.js.map +1 -1
  14. package/lib/hooks/useMountedState.js.map +1 -1
  15. package/lib/index.js.map +1 -1
  16. package/lib/motions/motionTokens.js.map +1 -1
  17. package/lib/slots/presenceMotionSlot.js.map +1 -1
  18. package/lib/types.js.map +1 -1
  19. package/lib/utils/groups/getChildMapping.js.map +1 -1
  20. package/lib/utils/groups/getNextChildMapping.js.map +1 -1
  21. package/lib/utils/groups/mergeChildMappings.js.map +1 -1
  22. package/lib/utils/groups/types.js.map +1 -1
  23. package/lib/utils/isAnimationRunning.js.map +1 -1
  24. package/lib/utils/useChildElement.js.map +1 -1
  25. package/lib-commonjs/components/PresenceGroup.js +2 -3
  26. package/lib-commonjs/components/PresenceGroup.js.map +1 -1
  27. package/lib-commonjs/components/PresenceGroupItemProvider.js.map +1 -1
  28. package/lib-commonjs/contexts/MotionBehaviourContext.js.map +1 -1
  29. package/lib-commonjs/contexts/PresenceGroupChildContext.js.map +1 -1
  30. package/lib-commonjs/factories/createMotionComponent.js.map +1 -1
  31. package/lib-commonjs/factories/createPresenceComponent.js.map +1 -1
  32. package/lib-commonjs/factories/createPresenceComponentVariant.js.map +1 -1
  33. package/lib-commonjs/hooks/useAnimateAtoms.js.map +1 -1
  34. package/lib-commonjs/hooks/useIsReducedMotion.js.map +1 -1
  35. package/lib-commonjs/hooks/useMotionImperativeRef.js.map +1 -1
  36. package/lib-commonjs/hooks/useMountedState.js.map +1 -1
  37. package/lib-commonjs/index.js.map +1 -1
  38. package/lib-commonjs/motions/motionTokens.js.map +1 -1
  39. package/lib-commonjs/slots/presenceMotionSlot.js.map +1 -1
  40. package/lib-commonjs/types.js.map +1 -1
  41. package/lib-commonjs/utils/groups/getChildMapping.js.map +1 -1
  42. package/lib-commonjs/utils/groups/getNextChildMapping.js.map +1 -1
  43. package/lib-commonjs/utils/groups/mergeChildMappings.js.map +1 -1
  44. package/lib-commonjs/utils/groups/types.js.map +1 -1
  45. package/lib-commonjs/utils/isAnimationRunning.js.map +1 -1
  46. package/lib-commonjs/utils/useChildElement.js.map +1 -1
  47. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,12 +1,32 @@
1
1
  # Change Log - @fluentui/react-motion
2
2
 
3
- This log was last generated on Thu, 26 Jun 2025 14:07:52 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 30 Jul 2025 08:41:07 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.1)
8
+
9
+ Wed, 30 Jul 2025 08:41:07 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.0..@fluentui/react-motion_v9.10.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
15
+ - Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
16
+
17
+ ## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.0)
18
+
19
+ Mon, 28 Jul 2025 18:48:20 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.9.0..@fluentui/react-motion_v9.10.0)
21
+
22
+ ### Minor changes
23
+
24
+ - feat: replace global JSX.IntrinsicElements with in house alternative to make types compatible across react major versions ([PR #34733](https://github.com/microsoft/fluentui/pull/34733) by martinhochel@microsoft.com)
25
+ - Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
26
+
7
27
  ## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.9.0)
8
28
 
9
- Thu, 26 Jun 2025 14:07:52 GMT
29
+ Thu, 26 Jun 2025 14:11:54 GMT
10
30
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.8.1..@fluentui/react-motion_v9.9.0)
11
31
 
12
32
  ### Minor changes
package/dist/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
1
2
  import * as React_2 from 'react';
2
3
  import { SlotComponentType } from '@fluentui/react-utilities';
3
4
  import { SlotRenderFunction } from '@fluentui/react-utilities';
@@ -252,7 +253,7 @@ export declare type PresenceMotionSlotProps<MotionParams extends Record<string,
252
253
  *
253
254
  * If you want to override the animation, use the children render function instead.
254
255
  */
255
- as?: keyof JSX.IntrinsicElements;
256
+ as?: JSXIntrinsicElementKeys;
256
257
  children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
257
258
  children: React_2.ReactElement;
258
259
  }>;
@@ -17,6 +17,7 @@ import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
17
17
  componentWillUnmount() {
18
18
  this.mounted = false;
19
19
  }
20
+ // eslint-disable-next-line @typescript-eslint/no-deprecated
20
21
  render() {
21
22
  return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ React.createElement(PresenceGroupItemProvider, {
22
23
  ...childProps,
@@ -27,9 +28,7 @@ import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
27
28
  }
28
29
  constructor(props, context){
29
30
  // eslint-disable-next-line @typescript-eslint/no-deprecated
30
- super(props, context);
31
- _define_property(this, "mounted", false);
32
- _define_property(this, "handleExit", (childKey)=>{
31
+ super(props, context), _define_property(this, "mounted", false), _define_property(this, "handleExit", (childKey)=>{
33
32
  const currentChildMapping = getChildMapping(this.props.children);
34
33
  if (childKey in currentChildMapping) {
35
34
  return;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\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;AAC/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;IA6BAG,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;IA7CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,4DAA4D;QAC5D,KAAK,CAACD,OAAOC;QAhBf,uBAAQf,WAAmB;QAwB3B,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"}
1
+ {"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\n render(): JSX.Element {\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;AAC/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;IA6BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEA,4DAA4D;IAC5DE,SAAsB;QACpB,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;IA9CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,4DAA4D;QAC5D,KAAK,CAACD,OAAOC,UAhBf,uBAAQf,WAAmB,QAwB3B,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;AAuCF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/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"}
1
+ {"version":3,"sources":["../src/components/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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["React","MotionBehaviourContext","createContext","undefined","MotionBehaviourProvider","Provider","useMotionBehaviourContext","useContext"],"rangeMappings":";;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,yBAAyBD,MAAME,aAAa,CAAkCC;AAEpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QAAMN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;AAAQ,EAAE"}
1
+ {"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["React","MotionBehaviourContext","createContext","undefined","MotionBehaviourProvider","Provider","useMotionBehaviourContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,yBAAyBD,MAAME,aAAa,CAAkCC;AAEpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QAAMN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;EAAU"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\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\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = () => React.useContext(PresenceGroupChildContext);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined","PresenceGroupChildProvider","Provider","usePresenceGroupChildContext","useContext"],"rangeMappings":";;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW;AAEpH,OAAO,MAAMC,6BAA6BH,0BAA0BI,QAAQ,CAAC;AAC7E,OAAO,MAAMC,+BAA+B,IAAMN,MAAMO,UAAU,CAACN,2BAA2B"}
1
+ {"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\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\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = () => React.useContext(PresenceGroupChildContext);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined","PresenceGroupChildProvider","Provider","usePresenceGroupChildContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAU/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW;AAEpH,OAAO,MAAMC,6BAA6BH,0BAA0BI,QAAQ,CAAC;AAC7E,OAAO,MAAMC,+BAA+B,IAAMN,MAAMO,UAAU,CAACN,2BAA2B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\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, childRef] = useChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const skipMotions = useMotionBehaviourContext() === 'skip';\n const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n skipMotions,\n params,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isReducedMotion = useIsReducedMotion();\n\n const onMotionStart = useEventCallback(() => {\n onMotionStartProp?.(null);\n });\n\n const onMotionFinish = useEventCallback(() => {\n onMotionFinishProp?.(null);\n });\n\n const onMotionCancel = useEventCallback(() => {\n onMotionCancelProp?.(null);\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { skipMotions, params };\n });\n\n useIsomorphicLayoutEffect(() => {\n const element = childRef.current;\n\n if (element) {\n const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n onMotionStart();\n const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n handleRef.current = handle;\n handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n if (optionsRef.current.skipMotions) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n }\n }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return child;\n };\n\n return Atom;\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","useChildElement","useMotionBehaviourContext","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","handleRef","skipMotions","optionsRef","useRef","animateAtoms","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAqC/E;;;;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,MAAM,CAACE,OAAOC,SAAS,GAAGjB,gBAAgBM;QAE1C,MAAMY,YAAYpB,uBAAuBS;QACzC,MAAMY,cAAclB,gCAAgC;QACpD,MAAMmB,aAAaxB,MAAMyB,MAAM,CAAiD;YAC9EF;YACAJ;QACF;QAEA,MAAMO,eAAezB;QACrB,MAAM0B,kBAAkBxB;QAExB,MAAMW,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,WAAWI,OAAO,GAAG;gBAAEL;gBAAaJ;YAAO;QAC7C;QAEApB,0BAA0B;YACxB,MAAM8B,UAAUR,SAASO,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOvB,UAAU,aAAaA,MAAM;oBAAEsB;oBAAS,GAAGL,WAAWI,OAAO,CAACT,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMiB,SAASL,aAAaG,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBACjFL,UAAUM,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAACpB,gBAAgBI;gBAE7C,IAAIQ,WAAWI,OAAO,CAACL,WAAW,EAAE;oBAClCQ,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAcL;YAAUC;YAAWK;YAAiBf;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOZ;AACT"}
1
+ {"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\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, childRef] = useChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const skipMotions = useMotionBehaviourContext() === 'skip';\n const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n skipMotions,\n params,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isReducedMotion = useIsReducedMotion();\n\n const onMotionStart = useEventCallback(() => {\n onMotionStartProp?.(null);\n });\n\n const onMotionFinish = useEventCallback(() => {\n onMotionFinishProp?.(null);\n });\n\n const onMotionCancel = useEventCallback(() => {\n onMotionCancelProp?.(null);\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { skipMotions, params };\n });\n\n useIsomorphicLayoutEffect(() => {\n const element = childRef.current;\n\n if (element) {\n const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n onMotionStart();\n const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n handleRef.current = handle;\n handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n if (optionsRef.current.skipMotions) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n }\n }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return child;\n };\n\n return Atom;\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","useChildElement","useMotionBehaviourContext","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","handleRef","skipMotions","optionsRef","useRef","animateAtoms","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,QAAQ,4BAA4B;AACxF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAqC/E;;;;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,MAAM,CAACE,OAAOC,SAAS,GAAGjB,gBAAgBM;QAE1C,MAAMY,YAAYpB,uBAAuBS;QACzC,MAAMY,cAAclB,gCAAgC;QACpD,MAAMmB,aAAaxB,MAAMyB,MAAM,CAAiD;YAC9EF;YACAJ;QACF;QAEA,MAAMO,eAAezB;QACrB,MAAM0B,kBAAkBxB;QAExB,MAAMW,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,WAAWI,OAAO,GAAG;gBAAEL;gBAAaJ;YAAO;QAC7C;QAEApB,0BAA0B;YACxB,MAAM8B,UAAUR,SAASO,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOvB,UAAU,aAAaA,MAAM;oBAAEsB;oBAAS,GAAGL,WAAWI,OAAO,CAACT,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMiB,SAASL,aAAaG,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBACjFL,UAAUM,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAACpB,gBAAgBI;gBAE7C,IAAIQ,WAAWI,OAAO,CAACL,WAAW,EAAE;oBAClCQ,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAcL;YAAUC;YAAWK;YAAiBf;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOZ;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } 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 { useChildElement } from '../utils/useChildElement';\nimport type {\n MotionParam,\n PresenceMotion,\n MotionImperativeRef,\n PresenceMotionFn,\n PresenceDirection,\n AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n In: React.FC<MotionComponentProps & MotionParams>;\n Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n const skipMotions = useMotionBehaviourContext() === 'skip';\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, childRef] = useChildElement(children, mounted);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n appear,\n params,\n skipMotions,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isFirstMount = useFirstMount();\n const isReducedMotion = useIsReducedMotion();\n\n const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n onMotionStart?.(null, { direction });\n });\n const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n onMotionFinish?.(null, { direction });\n\n if (direction === 'exit' && unmountOnExit) {\n setMounted(false);\n onExit?.();\n }\n });\n\n const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n onMotionCancel?.(null, { direction });\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { appear, params, skipMotions };\n });\n\n useIsomorphicLayoutEffect(\n () => {\n const element = childRef.current;\n\n if (!element) {\n return;\n }\n\n let handle: AnimationHandle | undefined;\n\n function cleanup() {\n if (!handle) {\n return;\n }\n\n // Heads up!\n //\n // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n // the next effect.\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n return;\n }\n\n handle.cancel();\n handleRef.current = undefined;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n )[INTERRUPTABLE_MOTION_SYMBOL];\n\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n handle = handleRef.current;\n\n if (handle && handle.isRunning()) {\n handle.reverse();\n\n return cleanup;\n }\n }\n\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n // Heads up!\n // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n if (applyInitialStyles) {\n // Heads up!\n // .finish() is used in this case to skip animation and apply animation styles immediately\n handle.finish();\n\n return cleanup;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimationByConfig) {\n handle.finish();\n }\n\n return cleanup;\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n animateAtoms,\n childRef,\n handleRef,\n isReducedMotion,\n handleMotionFinish,\n handleMotionStart,\n handleMotionCancel,\n visible,\n ],\n );\n\n if (mounted) {\n return child;\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n {\n // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n In: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n // Otherwise, pass the `enter` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n ),\n\n // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n Out: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n // Otherwise, pass the `exit` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n ),\n },\n );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","useChildElement","useMotionBehaviourContext","createMotionComponent","MOTION_DEFINITION","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","child","childRef","handleRef","optionsRef","useRef","animateAtoms","isFirstMount","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","In","args","Out"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } 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 { useChildElement } from '../utils/useChildElement';\nimport type {\n MotionParam,\n PresenceMotion,\n MotionImperativeRef,\n PresenceMotionFn,\n PresenceDirection,\n AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n In: React.FC<MotionComponentProps & MotionParams>;\n Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n const skipMotions = useMotionBehaviourContext() === 'skip';\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, childRef] = useChildElement(children, mounted);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n appear,\n params,\n skipMotions,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isFirstMount = useFirstMount();\n const isReducedMotion = useIsReducedMotion();\n\n const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n onMotionStart?.(null, { direction });\n });\n const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n onMotionFinish?.(null, { direction });\n\n if (direction === 'exit' && unmountOnExit) {\n setMounted(false);\n onExit?.();\n }\n });\n\n const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n onMotionCancel?.(null, { direction });\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { appear, params, skipMotions };\n });\n\n useIsomorphicLayoutEffect(\n () => {\n const element = childRef.current;\n\n if (!element) {\n return;\n }\n\n let handle: AnimationHandle | undefined;\n\n function cleanup() {\n if (!handle) {\n return;\n }\n\n // Heads up!\n //\n // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n // the next effect.\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n return;\n }\n\n handle.cancel();\n handleRef.current = undefined;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n )[INTERRUPTABLE_MOTION_SYMBOL];\n\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n handle = handleRef.current;\n\n if (handle && handle.isRunning()) {\n handle.reverse();\n\n return cleanup;\n }\n }\n\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n // Heads up!\n // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n if (applyInitialStyles) {\n // Heads up!\n // .finish() is used in this case to skip animation and apply animation styles immediately\n handle.finish();\n\n return cleanup;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimationByConfig) {\n handle.finish();\n }\n\n return cleanup;\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n animateAtoms,\n childRef,\n handleRef,\n isReducedMotion,\n handleMotionFinish,\n handleMotionStart,\n handleMotionCancel,\n visible,\n ],\n );\n\n if (mounted) {\n return child;\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n {\n // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n In: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n // Otherwise, pass the `enter` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n ),\n\n // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n Out: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n // Otherwise, pass the `exit` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n ),\n },\n );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","useChildElement","useMotionBehaviourContext","createMotionComponent","MOTION_DEFINITION","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","child","childRef","handleRef","optionsRef","useRef","animateAtoms","isFirstMount","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","In","args","Out"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AAE1G;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,iGAAiG;IACjG,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}
1
+ {"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AAE1G;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,iGAAiG;IACjG,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms\n .map(motion => {\n // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n const animationParams: KeyframeEffectOptions = {\n ...DEFAULT_ANIMATION_OPTIONS,\n ...params,\n\n // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n ...(isReducedMotion && reducedMotionParams),\n };\n\n try {\n // Firefox can throw an error when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n const animation = element.animate(animationKeyframes, animationParams);\n\n if (SUPPORTS_PERSIST) {\n // Chromium browsers can return null when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n animation?.persist();\n } else {\n const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\n\n return animation;\n } catch (e) {\n return null;\n }\n })\n .filter(animation => !!animation) as Animation[];\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n isRunning() {\n return animations.some(animation => isAnimationRunning(animation));\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n reverse: () => {\n // Heads up!\n //\n // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n //\n // TODO: what do with animations that have \"delay\"?\n // TODO: what do with animations that have different \"durations\"?\n\n animations.forEach(animation => {\n animation.reverse();\n });\n },\n };\n },\n [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n isRunning() {\n return false;\n },\n\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n reverse() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","isAnimationRunning","DEFAULT_ANIMATION_OPTIONS","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","e","filter","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","isRunning","some","cancel","pause","play","finish","reverse","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms\n .map(motion => {\n // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n const animationParams: KeyframeEffectOptions = {\n ...DEFAULT_ANIMATION_OPTIONS,\n ...params,\n\n // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n ...(isReducedMotion && reducedMotionParams),\n };\n\n try {\n // Firefox can throw an error when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n const animation = element.animate(animationKeyframes, animationParams);\n\n if (SUPPORTS_PERSIST) {\n // Chromium browsers can return null when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n animation?.persist();\n } else {\n const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\n\n return animation;\n } catch (e) {\n return null;\n }\n })\n .filter(animation => !!animation) as Animation[];\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n isRunning() {\n return animations.some(animation => isAnimationRunning(animation));\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n reverse: () => {\n // Heads up!\n //\n // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n //\n // TODO: what do with animations that have \"delay\"?\n // TODO: what do with animations that have different \"durations\"?\n\n animations.forEach(animation => {\n animation.reverse();\n });\n },\n };\n },\n [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n isRunning() {\n return false;\n },\n\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n reverse() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","isAnimationRunning","DEFAULT_ANIMATION_OPTIONS","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","e","filter","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","isRunning","some","cancel","pause","play","finish","reverse","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useFluent_unstable","useFluent","useIsomorphicLayoutEffect","React","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,YAAYC,WAAW,QAAQ;AAE/B,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGL;QACSK;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaN,MAAMO,MAAM,CAAU;IACzC,MAAMC,YAAYR,MAAMS,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEX,0BAA0B;QACxB,IAAIK,iBAAiB,QAAQ,OAAOA,aAAaO,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaR,aAAaO,UAAU,CAACV;QAE3C,IAAIW,WAAWC,OAAO,EAAE;YACtBP,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMI,gBAAgB,CAACC;YACrBT,WAAWI,OAAO,GAAGK,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACV;KAAa;IAEjB,OAAOI;AACT"}
1
+ {"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useFluent_unstable","useFluent","useIsomorphicLayoutEffect","React","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,YAAYC,WAAW,QAAQ;AAE/B,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGL;QACSK;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaN,MAAMO,MAAM,CAAU;IACzC,MAAMC,YAAYR,MAAMS,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEX,0BAA0B;QACxB,IAAIK,iBAAiB,QAAQ,OAAOA,aAAaO,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaR,aAAaO,UAAU,CAACV;QAE3C,IAAIW,WAAWC,OAAO,EAAE;YACtBP,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMI,gBAAgB,CAACC;YACrBT,WAAWI,OAAO,GAAGK,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACV;KAAa;IAEjB,OAAOI;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n const animationRef = React.useRef<AnimationHandle | undefined>();\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["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"}
1
+ {"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n const animationRef = React.useRef<AnimationHandle | undefined>();\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["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"}
1
+ {"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["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"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","presenceMotionSlot","PresenceGroupChildProvider","usePresenceGroupChildContext","MotionBehaviourProvider"],"rangeMappings":";;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SAASC,qBAAqB,QAAmC,oCAAoC;AACrG,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAE3D,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","presenceMotionSlot","PresenceGroupChildProvider","usePresenceGroupChildContext","MotionBehaviourProvider"],"mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SAASC,qBAAqB,QAAmC,oCAAoC;AACrG,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAE3D,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/motions/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"}
1
+ {"version":3,"sources":["../src/motions/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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAGtB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}
1
+ {"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n type JSXIntrinsicElementKeys,\n} from '@fluentui/react-utilities';\n\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: JSXIntrinsicElementKeys;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAItB,4BAA4B;AAEnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}
package/lib/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n /**\n * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n * active). If not provided, the duration of the animation will be overridden to be 1ms.\n *\n * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n */\n reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {\n setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n isRunning: () => boolean;\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":"AAsCA,WAME"}
1
+ {"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n /**\n * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n * active). If not provided, the duration of the animation will be overridden to be 1ms.\n *\n * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n */\n reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {\n setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n isRunning: () => boolean;\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":"AAsCA,WAME"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["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"}
1
+ {"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n) {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["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"}
1
+ {"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n) {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/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"}
1
+ {"version":3,"sources":["../src/utils/groups/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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n element: React.ReactElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
1
+ {"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n element: React.ReactElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }) {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}
1
+ {"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }) {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nconst IS_REACT_19 = React.version.startsWith('19.');\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * A backwards-compatible way to get the ref from a React element without console errors.\n */\nfunction getRefFromReactElement<T>(element: React.ReactElement): React.Ref<T> | undefined {\n if (IS_REACT_19) {\n return element.props.ref;\n }\n\n return (element as React.ReactElement & { ref: React.Ref<T> | undefined }).ref;\n}\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: React.ReactElement,\n mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getRefFromReactElement(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["React","useMergedRefs","IS_REACT_19","version","startsWith","CHILD_ERROR_MESSAGE","join","getRefFromReactElement","element","props","ref","useChildElement","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,MAAMC,cAAcF,MAAMG,OAAO,CAACC,UAAU,CAAC;AAC7C,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;CAEC,GACD,SAASC,uBAA0BC,OAA2B;IAC5D,IAAIN,aAAa;QACf,OAAOM,QAAQC,KAAK,CAACC,GAAG;IAC1B;IAEA,OAAO,AAACF,QAAmEE,GAAG;AAChF;AAEA;;;;;CAKC,GACD,OAAO,SAASC,gBACdC,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWd,MAAMe,MAAM,CAAc;IAE3Cf,MAAMgB,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACjB;YAChB;QACF;IACF,GAAG;QAACQ;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQvB,MAAMwB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIZ,MAAM0B,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLvB,MAAM2B,YAAY,CAACJ,OAA8D;oBAC/Eb,KAAKT,cAAca,UAAUP,uBAAuBgB;gBACtD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIc,MAAMvB;AAClB"}
1
+ {"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nconst IS_REACT_19 = React.version.startsWith('19.');\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * A backwards-compatible way to get the ref from a React element without console errors.\n */\nfunction getRefFromReactElement<T>(element: React.ReactElement): React.Ref<T> | undefined {\n if (IS_REACT_19) {\n return element.props.ref;\n }\n\n return (element as React.ReactElement & { ref: React.Ref<T> | undefined }).ref;\n}\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: React.ReactElement,\n mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getRefFromReactElement(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["React","useMergedRefs","IS_REACT_19","version","startsWith","CHILD_ERROR_MESSAGE","join","getRefFromReactElement","element","props","ref","useChildElement","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","Error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,MAAMC,cAAcF,MAAMG,OAAO,CAACC,UAAU,CAAC;AAC7C,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;CAEC,GACD,SAASC,uBAA0BC,OAA2B;IAC5D,IAAIN,aAAa;QACf,OAAOM,QAAQC,KAAK,CAACC,GAAG;IAC1B;IAEA,OAAO,AAACF,QAAmEE,GAAG;AAChF;AAEA;;;;;CAKC,GACD,OAAO,SAASC,gBACdC,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWd,MAAMe,MAAM,CAAc;IAE3Cf,MAAMgB,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACjB;YAChB;QACF;IACF,GAAG;QAACQ;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQvB,MAAMwB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIZ,MAAM0B,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLvB,MAAM2B,YAAY,CAACJ,OAA8D;oBAC/Eb,KAAKT,cAAca,UAAUP,uBAAuBgB;gBACtD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIc,MAAMvB;AAClB"}
@@ -28,6 +28,7 @@ class PresenceGroup extends _react.Component {
28
28
  componentWillUnmount() {
29
29
  this.mounted = false;
30
30
  }
31
+ // eslint-disable-next-line @typescript-eslint/no-deprecated
31
32
  render() {
32
33
  return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ _react.createElement(_PresenceGroupItemProvider.PresenceGroupItemProvider, {
33
34
  ...childProps,
@@ -38,9 +39,7 @@ class PresenceGroup extends _react.Component {
38
39
  }
39
40
  constructor(props, context){
40
41
  // eslint-disable-next-line @typescript-eslint/no-deprecated
41
- super(props, context);
42
- _define_property._(this, "mounted", false);
43
- _define_property._(this, "handleExit", (childKey)=>{
42
+ super(props, context), _define_property._(this, "mounted", false), _define_property._(this, "handleExit", (childKey)=>{
44
43
  const currentChildMapping = (0, _getChildMapping.getChildMapping)(this.props.children);
45
44
  if (childKey in currentChildMapping) {
46
45
  return;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\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","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;;;iEAnBU;qCACa;iCACJ;2CAEU;AAenC,MAAMA,sBAAsBC,OAAMC,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBC,IAAAA,gCAAe,EAACL,UAAUM,QAAQ;QAE3D,OAAO;YACLL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAmB,EAACL,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA6BAK,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,qBACE,4CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACb,YAAY,EAAEc,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,qBAACC,oDAAyB;gBAAE,GAAGD,UAAU;gBAAED,UAAUA;gBAAUG,KAAKH;gBAAUI,QAAQ,IAAI,CAACC,UAAU;eAClGJ,WAAWK,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,4DAA4D;QAC5D,KAAK,CAACD,OAAOC;QAhBf,yBAAQhB,WAAmB;QAwB3B,yBAAQY,cAAa,CAACL;YACpB,MAAMU,sBAAsBrB,IAAAA,gCAAe,EAAC,IAAI,CAACmB,KAAK,CAAClB,QAAQ;YAE/D,IAAIU,YAAYU,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAACjB,OAAO,EAAE;gBAChB,IAAI,CAACkB,QAAQ,CAACb,CAAAA;oBACZ,MAAMb,eAAe;wBAAE,GAAGa,MAAMb,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACe,SAAS;oBAE7B,OAAO;wBAAEf;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACa,KAAK,GAAG;YACXb,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAsCF"}
1
+ {"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\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 // eslint-disable-next-line @typescript-eslint/no-deprecated\n render(): JSX.Element {\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","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;iEAnBU;qCACa;iCACJ;2CAEU;AAenC,MAAMA,sBAAsBC,OAAMC,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBC,IAAAA,gCAAe,EAACL,UAAUM,QAAQ;QAE3D,OAAO;YACLL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAmB,EAACL,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA6BAK,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEA,4DAA4D;IAC5DE,SAAsB;QACpB,qBACE,4CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACb,YAAY,EAAEc,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,qBAACC,oDAAyB;gBAAE,GAAGD,UAAU;gBAAED,UAAUA;gBAAUG,KAAKH;gBAAUI,QAAQ,IAAI,CAACC,UAAU;eAClGJ,WAAWK,OAAO;IAK7B;IA9CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,4DAA4D;QAC5D,KAAK,CAACD,OAAOC,UAhBf,yBAAQhB,WAAmB,QAwB3B,yBAAQY,cAAa,CAACL;YACpB,MAAMU,sBAAsBrB,IAAAA,gCAAe,EAAC,IAAI,CAACmB,KAAK,CAAClB,QAAQ;YAE/D,IAAIU,YAAYU,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAACjB,OAAO,EAAE;gBAChB,IAAI,CAACkB,QAAQ,CAACb,CAAAA;oBACZ,MAAMb,eAAe;wBAAE,GAAGa,MAAMb,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACe,SAAS;oBAE7B,OAAO;wBAAEf;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACa,KAAK,GAAG;YACXb,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAuCF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/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","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,qBAAO,qBAACI,oDAAyB,CAACC,QAAQ;QAACC,OAAOL;OAAeN,MAAMY,QAAQ;AACjF"}
1
+ {"version":3,"sources":["../src/components/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","PresenceGroupChildContext","Provider","value","children"],"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,qBAAO,qBAACI,oDAAyB,CAACC,QAAQ;QAACC,OAAOL;OAAeN,MAAMY,QAAQ;AACjF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,uBAAuB;eAAvBA;;IACAC,yBAAyB;eAAzBA;;;;iEAVU;AAOvB,MAAMC,yBAAyBC,OAAMC,aAAa,CAAkCC;AAE7E,MAAML,0BAA0BE,uBAAuBI,QAAQ;AAC/D,MAAML,4BAA4B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,qCAAjBC,+BAAAA,oBAA4C;AAAQ"}
1
+ {"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"mappings":";;;;;;;;;;;IASaA,uBAAuB;eAAvBA;;IACAC,yBAAyB;eAAzBA;;;;iEAVU;AAOvB,MAAMC,yBAAyBC,OAAMC,aAAa,CAAkCC;AAE7E,MAAML,0BAA0BE,uBAAuBI,QAAQ;AAC/D,MAAML,4BAA4B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,qCAAjBC,+BAAAA,oBAA4C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\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\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = () => React.useContext(PresenceGroupChildContext);\n"],"names":["PresenceGroupChildContext","PresenceGroupChildProvider","usePresenceGroupChildContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAaaA,yBAAyB;eAAzBA;;IAEAC,0BAA0B;eAA1BA;;IACAC,4BAA4B;eAA5BA;;;;iEAhBU;AAahB,MAAMF,4BAA4BG,OAAMC,aAAa,CAA6CC;AAElG,MAAMJ,6BAA6BD,0BAA0BM,QAAQ;AACrE,MAAMJ,+BAA+B,IAAMC,OAAMI,UAAU,CAACP"}
1
+ {"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\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\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = () => React.useContext(PresenceGroupChildContext);\n"],"names":["PresenceGroupChildContext","PresenceGroupChildProvider","usePresenceGroupChildContext","React","createContext","undefined","Provider","useContext"],"mappings":";;;;;;;;;;;IAaaA,yBAAyB;eAAzBA;;IAEAC,0BAA0B;eAA1BA;;IACAC,4BAA4B;eAA5BA;;;;iEAhBU;AAahB,MAAMF,4BAA4BG,OAAMC,aAAa,CAA6CC;AAElG,MAAMJ,6BAA6BD,0BAA0BM,QAAQ;AACrE,MAAMJ,+BAA+B,IAAMC,OAAMI,UAAU,CAACP"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\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, childRef] = useChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const skipMotions = useMotionBehaviourContext() === 'skip';\n const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n skipMotions,\n params,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isReducedMotion = useIsReducedMotion();\n\n const onMotionStart = useEventCallback(() => {\n onMotionStartProp?.(null);\n });\n\n const onMotionFinish = useEventCallback(() => {\n onMotionFinishProp?.(null);\n });\n\n const onMotionCancel = useEventCallback(() => {\n onMotionCancelProp?.(null);\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { skipMotions, params };\n });\n\n useIsomorphicLayoutEffect(() => {\n const element = childRef.current;\n\n if (element) {\n const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n onMotionStart();\n const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n handleRef.current = handle;\n handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n if (optionsRef.current.skipMotions) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n }\n }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return child;\n };\n\n return Atom;\n}\n"],"names":["createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","useChildElement","handleRef","useMotionImperativeRef","skipMotions","useMotionBehaviourContext","optionsRef","React","useRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkDgBA;;;eAAAA;;;;gCAlD4C;iEACrC;iCAES;wCACO;oCACJ;iCACH;wCAEU;AA0CnC,SAASA,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,MAAM,CAACE,OAAOC,SAAS,GAAGC,IAAAA,gCAAe,EAACZ;QAE1C,MAAMa,YAAYC,IAAAA,8CAAsB,EAACb;QACzC,MAAMc,cAAcC,IAAAA,iDAAyB,QAAO;QACpD,MAAMC,aAAaC,OAAMC,MAAM,CAAiD;YAC9EJ;YACAN;QACF;QAEA,MAAMW,eAAeC,IAAAA,gCAAe;QACpC,MAAMC,kBAAkBC,IAAAA,sCAAkB;QAE1C,MAAMnB,gBAAgBoB,IAAAA,gCAAgB,EAAC;YACrCnB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBsB,IAAAA,gCAAgB,EAAC;YACtCrB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBkB,IAAAA,gCAAgB,EAAC;YACtCjB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAkB,IAAAA,yCAAyB,EAAC;YACxB,YAAY;YACZ,2FAA2F;YAC3FR,WAAWS,OAAO,GAAG;gBAAEX;gBAAaN;YAAO;QAC7C;QAEAgB,IAAAA,yCAAyB,EAAC;YACxB,MAAME,UAAUhB,SAASe,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAO/B,UAAU,aAAaA,MAAM;oBAAE8B;oBAAS,GAAGV,WAAWS,OAAO,CAACjB,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMyB,SAAST,aAAaO,SAASC,OAAO;oBAAEN,iBAAiBA;gBAAkB;gBACjFT,UAAUa,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAAC5B,gBAAgBI;gBAE7C,IAAIW,WAAWS,OAAO,CAACX,WAAW,EAAE;oBAClCc,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACZ;YAAcT;YAAUE;YAAWS;YAAiBpB;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOZ;AACT"}
1
+ {"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useChildElement } from '../utils/useChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\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, childRef] = useChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const skipMotions = useMotionBehaviourContext() === 'skip';\n const optionsRef = React.useRef<{ skipMotions: boolean; params: MotionParams }>({\n skipMotions,\n params,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isReducedMotion = useIsReducedMotion();\n\n const onMotionStart = useEventCallback(() => {\n onMotionStartProp?.(null);\n });\n\n const onMotionFinish = useEventCallback(() => {\n onMotionFinishProp?.(null);\n });\n\n const onMotionCancel = useEventCallback(() => {\n onMotionCancelProp?.(null);\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { skipMotions, params };\n });\n\n useIsomorphicLayoutEffect(() => {\n const element = childRef.current;\n\n if (element) {\n const atoms = typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : value;\n\n onMotionStart();\n const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n handleRef.current = handle;\n handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);\n\n if (optionsRef.current.skipMotions) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n }\n }, [animateAtoms, childRef, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return child;\n };\n\n return Atom;\n}\n"],"names":["createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","childRef","useChildElement","handleRef","useMotionImperativeRef","skipMotions","useMotionBehaviourContext","optionsRef","React","useRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel"],"mappings":";;;;+BAkDgBA;;;eAAAA;;;;gCAlD4C;iEACrC;iCAES;wCACO;oCACJ;iCACH;wCAEU;AA0CnC,SAASA,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,MAAM,CAACE,OAAOC,SAAS,GAAGC,IAAAA,gCAAe,EAACZ;QAE1C,MAAMa,YAAYC,IAAAA,8CAAsB,EAACb;QACzC,MAAMc,cAAcC,IAAAA,iDAAyB,QAAO;QACpD,MAAMC,aAAaC,OAAMC,MAAM,CAAiD;YAC9EJ;YACAN;QACF;QAEA,MAAMW,eAAeC,IAAAA,gCAAe;QACpC,MAAMC,kBAAkBC,IAAAA,sCAAkB;QAE1C,MAAMnB,gBAAgBoB,IAAAA,gCAAgB,EAAC;YACrCnB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBsB,IAAAA,gCAAgB,EAAC;YACtCrB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBkB,IAAAA,gCAAgB,EAAC;YACtCjB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAkB,IAAAA,yCAAyB,EAAC;YACxB,YAAY;YACZ,2FAA2F;YAC3FR,WAAWS,OAAO,GAAG;gBAAEX;gBAAaN;YAAO;QAC7C;QAEAgB,IAAAA,yCAAyB,EAAC;YACxB,MAAME,UAAUhB,SAASe,OAAO;YAEhC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAO/B,UAAU,aAAaA,MAAM;oBAAE8B;oBAAS,GAAGV,WAAWS,OAAO,CAACjB,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMyB,SAAST,aAAaO,SAASC,OAAO;oBAAEN,iBAAiBA;gBAAkB;gBACjFT,UAAUa,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAAC5B,gBAAgBI;gBAE7C,IAAIW,WAAWS,OAAO,CAACX,WAAW,EAAE;oBAClCc,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACZ;YAAcT;YAAUE;YAAWS;YAAiBpB;YAAgBE;YAAeE;SAAe;QAEtG,OAAOI;IACT;IAEA,OAAOZ;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } 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 { useChildElement } from '../utils/useChildElement';\nimport type {\n MotionParam,\n PresenceMotion,\n MotionImperativeRef,\n PresenceMotionFn,\n PresenceDirection,\n AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n In: React.FC<MotionComponentProps & MotionParams>;\n Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n const skipMotions = useMotionBehaviourContext() === 'skip';\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, childRef] = useChildElement(children, mounted);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n appear,\n params,\n skipMotions,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isFirstMount = useFirstMount();\n const isReducedMotion = useIsReducedMotion();\n\n const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n onMotionStart?.(null, { direction });\n });\n const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n onMotionFinish?.(null, { direction });\n\n if (direction === 'exit' && unmountOnExit) {\n setMounted(false);\n onExit?.();\n }\n });\n\n const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n onMotionCancel?.(null, { direction });\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { appear, params, skipMotions };\n });\n\n useIsomorphicLayoutEffect(\n () => {\n const element = childRef.current;\n\n if (!element) {\n return;\n }\n\n let handle: AnimationHandle | undefined;\n\n function cleanup() {\n if (!handle) {\n return;\n }\n\n // Heads up!\n //\n // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n // the next effect.\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n return;\n }\n\n handle.cancel();\n handleRef.current = undefined;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n )[INTERRUPTABLE_MOTION_SYMBOL];\n\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n handle = handleRef.current;\n\n if (handle && handle.isRunning()) {\n handle.reverse();\n\n return cleanup;\n }\n }\n\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n // Heads up!\n // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n if (applyInitialStyles) {\n // Heads up!\n // .finish() is used in this case to skip animation and apply animation styles immediately\n handle.finish();\n\n return cleanup;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimationByConfig) {\n handle.finish();\n }\n\n return cleanup;\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n animateAtoms,\n childRef,\n handleRef,\n isReducedMotion,\n handleMotionFinish,\n handleMotionStart,\n handleMotionCancel,\n visible,\n ],\n );\n\n if (mounted) {\n return child;\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n {\n // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n In: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n // Otherwise, pass the `enter` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n ),\n\n // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n Out: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n // Otherwise, pass the `exit` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n ),\n },\n );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","childRef","useChildElement","handleRef","useMotionImperativeRef","optionsRef","useRef","animateAtoms","useAnimateAtoms","isFirstMount","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","In","createMotionComponent","args","Out"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } 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 { useChildElement } from '../utils/useChildElement';\nimport type {\n MotionParam,\n PresenceMotion,\n MotionImperativeRef,\n PresenceMotionFn,\n PresenceDirection,\n AnimationHandle,\n} from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\nimport { createMotionComponent, MotionComponentProps } from './createMotionComponent';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n In: React.FC<MotionComponentProps & MotionParams>;\n Out: React.FC<MotionComponentProps & MotionParams>;\n};\n\nconst INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n const skipMotions = useMotionBehaviourContext() === 'skip';\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, childRef] = useChildElement(children, mounted);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; skipMotions: boolean }>({\n appear,\n params,\n skipMotions,\n });\n\n const animateAtoms = useAnimateAtoms();\n const isFirstMount = useFirstMount();\n const isReducedMotion = useIsReducedMotion();\n\n const handleMotionStart = useEventCallback((direction: PresenceDirection) => {\n onMotionStart?.(null, { direction });\n });\n const handleMotionFinish = useEventCallback((direction: PresenceDirection) => {\n onMotionFinish?.(null, { direction });\n\n if (direction === 'exit' && unmountOnExit) {\n setMounted(false);\n onExit?.();\n }\n });\n\n const handleMotionCancel = useEventCallback((direction: PresenceDirection) => {\n onMotionCancel?.(null, { direction });\n });\n\n useIsomorphicLayoutEffect(() => {\n // Heads up!\n // We store the params in a ref to avoid re-rendering the component when the params change.\n optionsRef.current = { appear, params, skipMotions };\n });\n\n useIsomorphicLayoutEffect(\n () => {\n const element = childRef.current;\n\n if (!element) {\n return;\n }\n\n let handle: AnimationHandle | undefined;\n\n function cleanup() {\n if (!handle) {\n return;\n }\n\n // Heads up!\n //\n // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in\n // the next effect.\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {\n return;\n }\n\n handle.cancel();\n handleRef.current = undefined;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = (\n presenceMotion as PresenceMotion & { [INTERRUPTABLE_MOTION_SYMBOL]?: boolean }\n )[INTERRUPTABLE_MOTION_SYMBOL];\n\n if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {\n handle = handleRef.current;\n\n if (handle && handle.isRunning()) {\n handle.reverse();\n\n return cleanup;\n }\n }\n\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n\n // Heads up!\n // Initial styles are applied when the component is mounted for the first time and \"appear\" is set to \"false\" (otherwise animations are triggered)\n const applyInitialStyles = !optionsRef.current.appear && isFirstMount;\n const skipAnimationByConfig = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n if (applyInitialStyles) {\n // Heads up!\n // .finish() is used in this case to skip animation and apply animation styles immediately\n handle.finish();\n\n return cleanup;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimationByConfig) {\n handle.finish();\n }\n\n return cleanup;\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n animateAtoms,\n childRef,\n handleRef,\n isReducedMotion,\n handleMotionFinish,\n handleMotionStart,\n handleMotionCancel,\n visible,\n ],\n );\n\n if (mounted) {\n return child;\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n {\n // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>\n In: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `enter`.\n // Otherwise, pass the `enter` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).enter : value.enter,\n ),\n\n // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>\n Out: createMotionComponent(\n // If we have a motion function, wrap it to forward the runtime params and pick `exit`.\n // Otherwise, pass the `exit` motion object directly.\n typeof value === 'function' ? (...args: Parameters<typeof value>) => value(...args).exit : value.exit,\n ),\n },\n );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","INTERRUPTABLE_MOTION_SYMBOL","for","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","appear","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","visible","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","childRef","useChildElement","handleRef","useMotionImperativeRef","optionsRef","useRef","animateAtoms","useAnimateAtoms","isFirstMount","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","handle","cleanup","IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION","isRunning","cancel","undefined","presenceMotion","reverse","atoms","enter","exit","applyInitialStyles","skipAnimationByConfig","finish","setMotionEndCallbacks","In","createMotionComponent","args","Out"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createPresenceComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCAT8D;AASvE,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,0CAAiB,CAAC;IAC/C,iGAAiG;IACjG,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}
1
+ {"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n *\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createPresenceComponent"],"mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCAT8D;AASvE,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,0CAAiB,CAAC;IAC/C,iGAAiG;IACjG,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms\n .map(motion => {\n // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n const animationParams: KeyframeEffectOptions = {\n ...DEFAULT_ANIMATION_OPTIONS,\n ...params,\n\n // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n ...(isReducedMotion && reducedMotionParams),\n };\n\n try {\n // Firefox can throw an error when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n const animation = element.animate(animationKeyframes, animationParams);\n\n if (SUPPORTS_PERSIST) {\n // Chromium browsers can return null when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n animation?.persist();\n } else {\n const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\n\n return animation;\n } catch (e) {\n return null;\n }\n })\n .filter(animation => !!animation) as Animation[];\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n isRunning() {\n return animations.some(animation => isAnimationRunning(animation));\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n reverse: () => {\n // Heads up!\n //\n // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n //\n // TODO: what do with animations that have \"delay\"?\n // TODO: what do with animations that have different \"durations\"?\n\n animations.forEach(animation => {\n animation.reverse();\n });\n },\n };\n },\n [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n isRunning() {\n return false;\n },\n\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n reverse() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["DEFAULT_ANIMATION_OPTIONS","useAnimateAtoms","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","e","filter","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","isRunning","some","isAnimationRunning","cancel","pause","play","finish","reverse","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { isAnimationRunning } from '../utils/isAnimationRunning';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms\n .map(motion => {\n // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n const animationParams: KeyframeEffectOptions = {\n ...DEFAULT_ANIMATION_OPTIONS,\n ...params,\n\n // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n ...(isReducedMotion && reducedMotionParams),\n };\n\n try {\n // Firefox can throw an error when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n const animation = element.animate(animationKeyframes, animationParams);\n\n if (SUPPORTS_PERSIST) {\n // Chromium browsers can return null when calling `element.animate()`.\n // See: https://github.com/microsoft/fluentui/issues/33902\n animation?.persist();\n } else {\n const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\n\n return animation;\n } catch (e) {\n return null;\n }\n })\n .filter(animation => !!animation) as Animation[];\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n isRunning() {\n return animations.some(animation => isAnimationRunning(animation));\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n reverse: () => {\n // Heads up!\n //\n // This is used for the interruptible motion. If the animation is running, we need to reverse it.\n //\n // TODO: what do with animations that have \"delay\"?\n // TODO: what do with animations that have different \"durations\"?\n\n animations.forEach(animation => {\n animation.reverse();\n });\n },\n };\n },\n [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n isRunning() {\n return false;\n },\n\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n reverse() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["DEFAULT_ANIMATION_OPTIONS","useAnimateAtoms","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","e","filter","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","isRunning","some","isAnimationRunning","cancel","pause","play","finish","reverse","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useIsomorphicLayoutEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;eAAAA;;;;qCARgC;gCACN;iEACnB;AAEvB,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;QACAD;IAApC,MAAME,eAA8BF,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBG,WAAW,cAA3BH,yCAAAA,8BAA+B;IAEnE,MAAMI,aAAaC,OAAMC,MAAM,CAAU;IACzC,MAAMC,YAAYF,OAAMG,WAAW,CAAC,IAAMJ,WAAWK,OAAO,EAAE,EAAE;IAEhEC,IAAAA,yCAAyB,EAAC;QACxB,IAAIR,iBAAiB,QAAQ,OAAOA,aAAaS,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaV,aAAaS,UAAU,CAACZ;QAE3C,IAAIa,WAAWC,OAAO,EAAE;YACtBT,WAAWK,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBX,WAAWK,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACZ;KAAa;IAEjB,OAAOK;AACT"}
1
+ {"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useIsomorphicLayoutEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":";;;;+BAQgBA;;;eAAAA;;;;qCARgC;gCACN;iEACnB;AAEvB,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;QACAD;IAApC,MAAME,eAA8BF,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBG,WAAW,cAA3BH,yCAAAA,8BAA+B;IAEnE,MAAMI,aAAaC,OAAMC,MAAM,CAAU;IACzC,MAAMC,YAAYF,OAAMG,WAAW,CAAC,IAAMJ,WAAWK,OAAO,EAAE,EAAE;IAEhEC,IAAAA,yCAAyB,EAAC;QACxB,IAAIR,iBAAiB,QAAQ,OAAOA,aAAaS,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaV,aAAaS,UAAU,CAACZ;QAE3C,IAAIa,WAAWC,OAAO,EAAE;YACtBT,WAAWK,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBX,WAAWK,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACZ;KAAa;IAEjB,OAAOK;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n const animationRef = React.useRef<AnimationHandle | undefined>();\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["useMotionImperativeRef","imperativeRef","animationRef","React","useRef","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,uBAAuBC,aAAqE;IAC1G,MAAMC,eAAeC,OAAMC,MAAM;IAEjCD,OAAME,mBAAmB,CAACJ,eAAe,IAAO,CAAA;YAC9CK,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBL;qBAAAA,wBAAAA,aAAaM,OAAO,cAApBN,4CAAAA,sBAAsBO,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBL;qBAAAA,yBAAAA,aAAaM,OAAO,cAApBN,6CAAAA,uBAAsBQ,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIV,aAAaM,OAAO,EAAE;oBACxBN,aAAaM,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOV;AACT"}
1
+ {"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n const animationRef = React.useRef<AnimationHandle | undefined>();\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["useMotionImperativeRef","imperativeRef","animationRef","React","useRef","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,uBAAuBC,aAAqE;IAC1G,MAAMC,eAAeC,OAAMC,MAAM;IAEjCD,OAAME,mBAAmB,CAACJ,eAAe,IAAO,CAAA;YAC9CK,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBL;qBAAAA,wBAAAA,aAAaM,OAAO,cAApBN,4CAAAA,sBAAsBO,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBL;qBAAAA,yBAAAA,aAAaM,OAAO,cAApBN,6CAAAA,uBAAsBQ,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIV,aAAaM,OAAO,EAAE;oBACxBN,aAAaM,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOV;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useMountedState","visible","unmountOnExit","mountedRef","React","useRef","forceUpdate","useForceUpdate","setMounted","useCallback","newValue","current","useEffect"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;;gCAPe;iEACR;AAMhB,SAASA,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaC,OAAMC,MAAM,CAAUH,gBAAgBD,UAAU;IACnE,MAAMK,cAAcC,IAAAA,8BAAc;IAElC,MAAMC,aAAaJ,OAAMK,WAAW,CAClC,CAACC;QACC,IAAIP,WAAWQ,OAAO,KAAKD,UAAU;YACnCP,WAAWQ,OAAO,GAAGD;YACrBJ;QACF;IACF,GACA;QAACA;KAAY;IAGfF,OAAMQ,SAAS,CAAC;QACd,IAAIX,SAAS;YACXE,WAAWQ,OAAO,GAAGV;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWQ,OAAO;QAAEH;KAAW;AACpD"}
1
+ {"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useMountedState","visible","unmountOnExit","mountedRef","React","useRef","forceUpdate","useForceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":";;;;+BAOgBA;;;eAAAA;;;;gCAPe;iEACR;AAMhB,SAASA,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaC,OAAMC,MAAM,CAAUH,gBAAgBD,UAAU;IACnE,MAAMK,cAAcC,IAAAA,8BAAc;IAElC,MAAMC,aAAaJ,OAAMK,WAAW,CAClC,CAACC;QACC,IAAIP,WAAWQ,OAAO,KAAKD,UAAU;YACnCP,WAAWQ,OAAO,GAAGD;YACrBJ;QACF;IACF,GACA;QAACA;KAAY;IAGfF,OAAMQ,SAAS,CAAC;QACd,IAAIX,SAAS;YACXE,WAAWQ,OAAO,GAAGV;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWQ,OAAO;QAAEH;KAAW;AACpD"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot","usePresenceGroupChildContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8BSA,uBAAuB;eAAvBA,+CAAuB;;IApBvBC,aAAa;eAAbA,4BAAa;;IAKpBC,0BAA0B;eAA1BA,qDAA0B;;IAbnBC,qBAAqB;eAArBA,4CAAqB;;IAE5BC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IARLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAYZC,kBAAkB;eAAlBA,sCAAkB;;IAIzBC,4BAA4B;eAA5BA,uDAA4B;;;8BAhBkB;uCAEiB;yCAK1D;gDACwC;+BAEjB;oCAEmC;2CAM1D;wCAYiC"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IA8BSA,uBAAuB;eAAvBA,+CAAuB;;IApBvBC,aAAa;eAAbA,4BAAa;;IAKpBC,0BAA0B;eAA1BA,qDAA0B;;IAbnBC,qBAAqB;eAArBA,4CAAqB;;IAE5BC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IARLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAYZC,kBAAkB;eAAlBA,sCAAkB;;IAIzBC,4BAA4B;eAA5BA,uDAA4B;;;8BAhBkB;uCAEiB;yCAK1D;gDACwC;+BAEjB;oCAEmC;2CAM1D;wCAYiC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/motions/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":["curves","durations","motionTokens","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;;;;;;;;;;;;IAclBA,MAAM;eAANA;;IAbAC,SAAS;eAATA;;IA0BAC,YAAY;eAAZA;;;AA1BN,MAAMD,YAAY;IACvBE,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB;AAIO,MAAMV,SAAS;IACpBW,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf;AAGO,MAAMjB,eAAe;IAC1B,GAAGD,SAAS;IACZ,GAAGD,MAAM;AACX,GAEA;;;;;;;;;AASA"}
1
+ {"version":3,"sources":["../src/motions/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":["curves","durations","motionTokens","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear"],"mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;;;;;;;;;;;;IAclBA,MAAM;eAANA;;IAbAC,SAAS;eAATA;;IA0BAC,YAAY;eAAZA;;;AA1BN,MAAMD,YAAY;IACvBE,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB;AAIO,MAAMV,SAAS;IACpBW,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf;AAGO,MAAMjB,eAAe;IAC1B,GAAGD,SAAS;IACZ,GAAGD,MAAM;AACX,GAEA;;;;;;;;;AASA"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}
1
+ {"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n type JSXIntrinsicElementKeys,\n} from '@fluentui/react-utilities';\n\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: JSXIntrinsicElementKeys;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"mappings":";;;;+BAuCgBA;;;eAAAA;;;;gCAjCT;iEAEgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["getChildMapping","children","childMapping","React","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;AAMhB,SAASA,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZE,OAAMC,QAAQ,CAACC,OAAO,CAACJ,UAAUK,OAAO,CAACC,CAAAA;YACvC,IAAIJ,OAAMK,cAAc,CAACD,QAAQ;oBAClBA;gBAAbL,YAAY,CAACK,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOX;AACT"}
1
+ {"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["getChildMapping","children","childMapping","React","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;AAMhB,SAASA,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZE,OAAMC,QAAQ,CAACC,OAAO,CAACJ,UAAUK,OAAO,CAACC,CAAAA;YACvC,IAAIJ,OAAMK,cAAc,CAACD,QAAQ;oBAClBA;gBAAbL,YAAY,CAACK,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOX;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n) {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","mergeChildMappings","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;oCAHmB;AAG5B,SAASA,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAACH,kBAAkBC;IAE7DG,OAAOC,OAAO,CAACH,iBAAiBI,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAOP;QACvB,MAAMU,UAAUH,OAAON;QAEvB,IAAIS,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXP,eAAe,CAACK,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCN,eAAe,CAACK,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BV,eAAe,CAACK,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOV;AACT"}
1
+ {"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n) {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","mergeChildMappings","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":";;;;+BAGgBA;;;eAAAA;;;oCAHmB;AAG5B,SAASA,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAACH,kBAAkBC;IAE7DG,OAAOC,OAAO,CAACH,iBAAiBI,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAOP;QACvB,MAAMU,UAAUH,OAAON;QAEvB,IAAIS,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXP,eAAe,CAACK,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCN,eAAe,CAACK,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BV,eAAe,CAACK,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOV;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/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":";;;;+BAOgBA;;;eAAAA;;;AAAT,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"}
1
+ {"version":3,"sources":["../src/utils/groups/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":";;;;+BAOgBA;;;eAAAA;;;AAAT,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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n element: React.ReactElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
1
+ {"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n element: React.ReactElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":[],"mappings":";;;;;iEAAuB"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }) {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;CAEC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}
1
+ {"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }) {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nconst IS_REACT_19 = React.version.startsWith('19.');\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * A backwards-compatible way to get the ref from a React element without console errors.\n */\nfunction getRefFromReactElement<T>(element: React.ReactElement): React.Ref<T> | undefined {\n if (IS_REACT_19) {\n return element.props.ref;\n }\n\n return (element as React.ReactElement & { ref: React.Ref<T> | undefined }).ref;\n}\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: React.ReactElement,\n mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getRefFromReactElement(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["useChildElement","IS_REACT_19","React","version","startsWith","CHILD_ERROR_MESSAGE","join","getRefFromReactElement","element","props","ref","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","useMergedRefs","Error"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BgBA;;;eAAAA;;;;iEA5BO;gCACO;AAE9B,MAAMC,cAAcC,OAAMC,OAAO,CAACC,UAAU,CAAC;AAC7C,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;CAEC,GACD,SAASC,uBAA0BC,OAA2B;IAC5D,IAAIP,aAAa;QACf,OAAOO,QAAQC,KAAK,CAACC,GAAG;IAC1B;IAEA,OAAO,AAACF,QAAmEE,GAAG;AAChF;AAQO,SAASV,gBACdW,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWX,OAAMY,MAAM,CAAc;IAE3CZ,OAAMa,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAChB;YAChB;QACF;IACF,GAAG;QAACO;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQpB,OAAMqB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIT,OAAMuB,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLpB,OAAMwB,YAAY,CAACJ,OAA8D;oBAC/EZ,KAAKiB,IAAAA,6BAAa,EAACd,UAAUN,uBAAuBe;gBACtD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIe,MAAMvB;AAClB"}
1
+ {"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nconst IS_REACT_19 = React.version.startsWith('19.');\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * A backwards-compatible way to get the ref from a React element without console errors.\n */\nfunction getRefFromReactElement<T>(element: React.ReactElement): React.Ref<T> | undefined {\n if (IS_REACT_19) {\n return element.props.ref;\n }\n\n return (element as React.ReactElement & { ref: React.Ref<T> | undefined }).ref;\n}\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: React.ReactElement,\n mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getRefFromReactElement(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["useChildElement","IS_REACT_19","React","version","startsWith","CHILD_ERROR_MESSAGE","join","getRefFromReactElement","element","props","ref","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","useMergedRefs","Error"],"mappings":";;;;+BA4BgBA;;;eAAAA;;;;iEA5BO;gCACO;AAE9B,MAAMC,cAAcC,OAAMC,OAAO,CAACC,UAAU,CAAC;AAC7C,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;CAEC,GACD,SAASC,uBAA0BC,OAA2B;IAC5D,IAAIP,aAAa;QACf,OAAOO,QAAQC,KAAK,CAACC,GAAG;IAC1B;IAEA,OAAO,AAACF,QAAmEE,GAAG;AAChF;AAQO,SAASV,gBACdW,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWX,OAAMY,MAAM,CAAc;IAE3CZ,OAAMa,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAAChB;YAChB;QACF;IACF,GAAG;QAACO;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQpB,OAAMqB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIT,OAAMuB,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLpB,OAAMwB,YAAY,CAACJ,OAA8D;oBAC/EZ,KAAKiB,IAAAA,6BAAa,EAACd,UAAUN,uBAAuBe;gBACtD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIe,MAAMvB;AAClB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-motion",
3
- "version": "9.9.0",
3
+ "version": "9.10.1",
4
4
  "description": "A package with utilities & motion definitions using Web Animations API",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -25,8 +25,8 @@
25
25
  "@fluentui/scripts-cypress": "*"
26
26
  },
27
27
  "dependencies": {
28
- "@fluentui/react-shared-contexts": "^9.24.0",
29
- "@fluentui/react-utilities": "^9.22.0",
28
+ "@fluentui/react-shared-contexts": "^9.24.1",
29
+ "@fluentui/react-utilities": "^9.23.1",
30
30
  "@swc/helpers": "^0.5.1"
31
31
  },
32
32
  "peerDependencies": {