@fluentui/react-motion 9.5.2 → 9.6.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.
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +1 -3
- package/lib/components/PresenceGroup.js.map +1 -1
- package/lib/components/PresenceGroupItemProvider.js.map +1 -1
- package/lib/contexts/MotionBehaviourContext.js.map +1 -1
- package/lib/contexts/PresenceGroupChildContext.js.map +1 -1
- package/lib/factories/createMotionComponent.js.map +1 -1
- package/lib/factories/createPresenceComponent.js.map +1 -1
- package/lib/factories/createPresenceComponentVariant.js.map +1 -1
- package/lib/hooks/useAnimateAtoms.js.map +1 -1
- package/lib/hooks/useIsReducedMotion.js.map +1 -1
- package/lib/hooks/useMotionImperativeRef.js.map +1 -1
- package/lib/hooks/useMountedState.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/motions/motionTokens.js.map +1 -1
- package/lib/slots/presenceMotionSlot.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/utils/getChildElement.js.map +1 -1
- package/lib/utils/groups/getChildMapping.js.map +1 -1
- package/lib/utils/groups/getNextChildMapping.js.map +1 -1
- package/lib/utils/groups/mergeChildMappings.js.map +1 -1
- package/lib/utils/groups/types.js.map +1 -1
- package/lib-commonjs/components/PresenceGroup.js +3 -3
- package/lib-commonjs/components/PresenceGroup.js.map +1 -1
- package/lib-commonjs/components/PresenceGroupItemProvider.js.map +1 -1
- package/lib-commonjs/contexts/MotionBehaviourContext.js +1 -1
- package/lib-commonjs/contexts/MotionBehaviourContext.js.map +1 -1
- package/lib-commonjs/contexts/PresenceGroupChildContext.js +1 -1
- package/lib-commonjs/contexts/PresenceGroupChildContext.js.map +1 -1
- package/lib-commonjs/factories/createMotionComponent.js +1 -1
- package/lib-commonjs/factories/createMotionComponent.js.map +1 -1
- package/lib-commonjs/factories/createPresenceComponent.js +3 -2
- package/lib-commonjs/factories/createPresenceComponent.js.map +1 -1
- package/lib-commonjs/factories/createPresenceComponentVariant.js.map +1 -1
- package/lib-commonjs/hooks/useAnimateAtoms.js.map +1 -1
- package/lib-commonjs/hooks/useIsReducedMotion.js.map +1 -1
- package/lib-commonjs/hooks/useMotionImperativeRef.js.map +1 -1
- package/lib-commonjs/hooks/useMountedState.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/motions/motionTokens.js.map +1 -1
- package/lib-commonjs/slots/presenceMotionSlot.js.map +1 -1
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/utils/getChildElement.js.map +1 -1
- package/lib-commonjs/utils/groups/getChildMapping.js +1 -1
- package/lib-commonjs/utils/groups/getChildMapping.js.map +1 -1
- package/lib-commonjs/utils/groups/getNextChildMapping.js.map +1 -1
- package/lib-commonjs/utils/groups/mergeChildMappings.js +1 -5
- package/lib-commonjs/utils/groups/mergeChildMappings.js.map +1 -1
- package/lib-commonjs/utils/groups/types.js.map +1 -1
- package/package.json +3 -17
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,34 @@
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
2
2
|
|
3
|
-
This log was last generated on Mon,
|
3
|
+
This log was last generated on Mon, 11 Nov 2024 09:55:10 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.1)
|
8
|
+
|
9
|
+
Mon, 11 Nov 2024 09:55:10 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.0..@fluentui/react-motion_v9.6.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
16
|
+
- Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
|
17
|
+
|
18
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.0)
|
19
|
+
|
20
|
+
Tue, 15 Oct 2024 17:17:53 GMT
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.5.2..@fluentui/react-motion_v9.6.0)
|
22
|
+
|
23
|
+
### Minor changes
|
24
|
+
|
25
|
+
- feat: export MotionParam type ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by robertpenner@microsoft.com)
|
26
|
+
- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
|
27
|
+
- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
|
28
|
+
|
7
29
|
## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.5.2)
|
8
30
|
|
9
|
-
Mon, 23 Sep 2024 12:
|
31
|
+
Mon, 23 Sep 2024 12:40:17 GMT
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.5.1..@fluentui/react-motion_v9.5.2)
|
11
33
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -92,12 +92,10 @@ export declare type MotionImperativeRef = {
|
|
92
92
|
};
|
93
93
|
|
94
94
|
/**
|
95
|
-
* @internal
|
96
|
-
*
|
97
95
|
* A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain
|
98
96
|
* dependency for React hooks.
|
99
97
|
*/
|
100
|
-
declare type MotionParam = boolean | number | string;
|
98
|
+
export declare type MotionParam = boolean | number | string;
|
101
99
|
|
102
100
|
export declare const motionTokens: {
|
103
101
|
curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ) {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context: unknown) {\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string) => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount() {\n this.mounted = true;\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n render() {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,8BAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAff,uBAAQf,WAAmB;QAuB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAsCF"}
|
1
|
+
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ) {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context: unknown) {\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string) => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount() {\n this.mounted = true;\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n render() {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,8BAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAff,uBAAQf,WAAmB;QAuB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAsCF"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["PresenceGroupItemProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n children: React.ReactElement;\n childKey: string;\n // That's an internal callback, so we don't need to enforce the type here\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onExit: (childKey: string) => void;\n};\n\n/**\n * @internal\n *\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n const { appear, childKey, onExit, visible, unmountOnExit } = props;\n const contextValue = React.useMemo(\n () => ({\n appear,\n visible,\n onExit: () => onExit(childKey),\n unmountOnExit,\n }),\n [appear, childKey, onExit, visible, unmountOnExit],\n );\n\n return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"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"],"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 +1 @@
|
|
1
|
-
{"version":3,"sources":["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);\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;AACpF,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);\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;AACpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QAAMN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;AAAQ,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined"],"rangeMappings":";;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW"}
|
1
|
+
{"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined"],"rangeMappings":";;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\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 = elementRef.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, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n };\n\n return Atom;\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","getChildElement","useMotionBehaviourContext","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","handleRef","elementRef","useRef","skipMotions","optionsRef","animateAtoms","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","cloneElement","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACvG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;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,MAAME,QAAQhB,gBAAgBM;QAE9B,MAAMW,YAAYnB,uBAAuBS;QACzC,MAAMW,aAAatB,MAAMuB,MAAM;QAC/B,MAAMC,cAAcnB,gCAAgC;QACpD,MAAMoB,aAAazB,MAAMuB,MAAM,CAAiD;YAC9EC;YACAL;QACF;QAEA,MAAMO,eAAezB;QACrB,MAAM0B,kBAAkBxB;QAExB,MAAMW,gBAAgBjB,iBAAiB;YACrCkB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBf,iBAAiB;YACtCgB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBnB,iBAAiB;YACtCoB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAnB,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3F2B,WAAWG,OAAO,GAAG;gBAAEJ;gBAAaL;YAAO;QAC7C;QAEArB,0BAA0B;YACxB,MAAM+B,UAAUP,WAAWM,OAAO;YAElC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOvB,UAAU,aAAaA,MAAM;oBAAEsB;oBAAS,GAAGJ,WAAWG,OAAO,CAACT,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMiB,SAASL,aAAaG,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBACjFN,UAAUO,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAACpB,gBAAgBI;gBAE7C,IAAIS,WAAWG,OAAO,CAACJ,WAAW,EAAE;oBAClCO,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAcL;YAAWM;YAAiBf;YAAgBE;YAAeE;SAAe;QAE5F,OAAOhB,MAAMmC,YAAY,CAACzB,UAAU;YAAE0B,KAAKrC,cAAcuB,YAAYF,MAAMgB,GAAG;QAAE;IAClF;IAEA,OAAO5B;AACT"}
|
1
|
+
{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\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 = elementRef.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, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n };\n\n return Atom;\n}\n"],"names":["useEventCallback","useIsomorphicLayoutEffect","useMergedRefs","React","useAnimateAtoms","useMotionImperativeRef","useIsReducedMotion","getChildElement","useMotionBehaviourContext","createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","handleRef","elementRef","useRef","skipMotions","optionsRef","animateAtoms","isReducedMotion","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","cloneElement","ref"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACvG,YAAYC,WAAW,QAAQ;AAE/B,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;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,MAAME,QAAQhB,gBAAgBM;QAE9B,MAAMW,YAAYnB,uBAAuBS;QACzC,MAAMW,aAAatB,MAAMuB,MAAM;QAC/B,MAAMC,cAAcnB,gCAAgC;QACpD,MAAMoB,aAAazB,MAAMuB,MAAM,CAAiD;YAC9EC;YACAL;QACF;QAEA,MAAMO,eAAezB;QACrB,MAAM0B,kBAAkBxB;QAExB,MAAMW,gBAAgBjB,iBAAiB;YACrCkB,8BAAAA,wCAAAA,kBAAoB;QACtB;QAEA,MAAMH,iBAAiBf,iBAAiB;YACtCgB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEA,MAAMG,iBAAiBnB,iBAAiB;YACtCoB,+BAAAA,yCAAAA,mBAAqB;QACvB;QAEAnB,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3F2B,WAAWG,OAAO,GAAG;gBAAEJ;gBAAaL;YAAO;QAC7C;QAEArB,0BAA0B;YACxB,MAAM+B,UAAUP,WAAWM,OAAO;YAElC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAOvB,UAAU,aAAaA,MAAM;oBAAEsB;oBAAS,GAAGJ,WAAWG,OAAO,CAACT,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMiB,SAASL,aAAaG,SAASC,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBACjFN,UAAUO,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAACpB,gBAAgBI;gBAE7C,IAAIS,WAAWG,OAAO,CAACJ,WAAW,EAAE;oBAClCO,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAcL;YAAWM;YAAiBf;YAAgBE;YAAeE;SAAe;QAE5F,OAAOhB,MAAMmC,YAAY,CAACzB,UAAU;YAAE0B,KAAKrC,cAAcuB,YAAYF,MAAMgB,GAAG;QAAE;IAClF;IAEA,OAAO5B;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n return !appear && isFirstMount && !!visible;\n}\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n 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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\n const ref = useMergedRefs(elementRef, child.ref);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; 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 = elementRef.current;\n\n if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n return;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n const applyInitialStyles = !visible && isFirstMount;\n const skipAnimation = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n const 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 return;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimation) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n );\n\n if (mounted) {\n return React.cloneElement(child, { ref });\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","getChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","animateAtoms","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimation","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,EAAEC,aAAa,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAClF,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E;;CAEC,GACD,OAAO,MAAMC,oBAAoBC,OAAO,qBAAqB;AA2D7D,SAASC,oBAAoBC,MAA2B,EAAEC,YAAqB,EAAEC,OAA4B;IAC3G,OAAO,CAACF,UAAUC,gBAAgB,CAAC,CAACC;AACtC;AAEA,OAAO,SAASC,wBACdC,KAAsD;IAEtD,OAAOC,OAAOC,MAAM,CAClB,CAACC;QACC;QAEA,MAAMC,cAAcnB,MAAMoB,UAAU,CAACnB;QACrC,MAAMoB,SAAS;YAAE,GAAGF,WAAW;YAAE,GAAGD,KAAK;QAAC;QAC1C,MAAMI,cAAcf,gCAAgC;QAEpD,MAAM,EACJI,MAAM,EACNY,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdf,OAAO,EACPgB,aAAa,EACb,GAAGC,OACJ,GAAGT;QACJ,MAAMU,SAASD;QAEf,MAAM,CAACE,SAASC,WAAW,GAAG7B,gBAAgBS,SAASgB;QACvD,MAAMK,QAAQ5B,gBAAgBiB;QAE9B,MAAMY,YAAYhC,uBAAuBqB;QACzC,MAAMY,aAAapC,MAAMqC,MAAM;QAC/B,MAAMC,MAAMvC,cAAcqC,YAAYF,MAAMI,GAAG;QAC/C,MAAMC,aAAavC,MAAMqC,MAAM,CAAmE;YAChG1B;YACAoB;YACAT;QACF;QAEA,MAAMkB,eAAetC;QACrB,MAAMU,eAAef;QACrB,MAAM4C,kBAAkBpC;QAExB,MAAMqC,oBAAoB9C,iBAAiB,CAAC+C;YAC1ChB,0BAAAA,oCAAAA,cAAgB,MAAM;gBAAEgB;YAAU;QACpC;QACA,MAAMC,qBAAqBhD,iBAAiB,CAAC+C;YAC3CjB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEiB;YAAU;YAEnC,IAAIA,cAAc,UAAUd,eAAe;gBACzCI,WAAW;gBACXR,mBAAAA,6BAAAA;YACF;QACF;QAEA,MAAMoB,qBAAqBjD,iBAAiB,CAAC+C;YAC3Cf,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEe;YAAU;QACrC;QAEA7C,0BAA0B;YACxB,YAAY;YACZ,2FAA2F;YAC3FyC,WAAWO,OAAO,GAAG;gBAAEnC;gBAAQoB;gBAAQT;YAAY;QACrD;QAEAxB,0BACE;YACE,MAAMiD,UAAUX,WAAWU,OAAO;YAElC,IAAI,CAACC,WAAWrC,oBAAoB6B,WAAWO,OAAO,CAACnC,MAAM,EAAEC,cAAcC,UAAU;gBACrF;YACF;YAEA,MAAMmC,iBACJ,OAAOjC,UAAU,aAAaA,MAAM;gBAAEgC;gBAAS,GAAGR,WAAWO,OAAO,CAACf,MAAM;YAAC,KAAMhB;YACpF,MAAMkC,QAAQpC,UAAUmC,eAAeE,KAAK,GAAGF,eAAeG,IAAI;YAElE,MAAMR,YAA+B9B,UAAU,UAAU;YACzD,MAAMuC,qBAAqB,CAACvC,WAAWD;YACvC,MAAMyC,gBAAgBd,WAAWO,OAAO,CAACxB,WAAW;YAEpD,IAAI,CAAC8B,oBAAoB;gBACvBV,kBAAkBC;YACpB;YAEA,MAAMW,SAASd,aAAaO,SAASE,OAAO;gBAAER,iBAAiBA;YAAkB;YAEjF,IAAIW,oBAAoB;gBACtB,YAAY;gBACZ,0FAA0F;gBAC1FE,OAAOC,MAAM;gBACb;YACF;YAEApB,UAAUW,OAAO,GAAGQ;YACpBA,OAAOE,qBAAqB,CAC1B,IAAMZ,mBAAmBD,YACzB,IAAME,mBAAmBF;YAG3B,IAAIU,eAAe;gBACjBC,OAAOC,MAAM;YACf;YAEA,OAAO;gBACLD,OAAOG,MAAM;YACf;QACF,GACA,kGAAkG;QAClG,uDAAuD;QACvD;YAACjB;YAAcL;YAAWM;YAAiBG;YAAoBF;YAAmBG;YAAoBhC;SAAQ;QAGhH,IAAImB,SAAS;YACX,OAAOhC,MAAM0D,YAAY,CAACxB,OAAO;gBAAEI;YAAI;QACzC;QAEA,OAAO;IACT,GACA;QACE,YAAY;QACZ,sDAAsD;QACtD,CAAC9B,kBAAkB,EAAE,OAAOO,UAAU,aAAaA,QAAQ,IAAMA;IACnE;AAEJ"}
|
1
|
+
{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n return !appear && isFirstMount && !!visible;\n}\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n 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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\n const ref = useMergedRefs(elementRef, child.ref);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; 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 = elementRef.current;\n\n if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n return;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n const applyInitialStyles = !visible && isFirstMount;\n const skipAnimation = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n const 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 return;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimation) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n );\n\n if (mounted) {\n return React.cloneElement(child, { ref });\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n );\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useAnimateAtoms","useMotionImperativeRef","useMountedState","useIsReducedMotion","getChildElement","useMotionBehaviourContext","MOTION_DEFINITION","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Object","assign","props","itemContext","useContext","merged","skipMotions","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","animateAtoms","isReducedMotion","handleMotionStart","direction","handleMotionFinish","handleMotionCancel","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimation","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n duration: KeyframeEffectOptions['duration'];\n easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n * all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n * exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n presenceMotion: PresenceMotionFn<MotionParams>,\n override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n const { enter, exit } = presenceMotion(...args);\n\n return {\n enter: { ...enter, ...override.all, ...override.enter },\n exit: { ...exit, ...override.all, ...override.exit },\n };\n };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","createPresenceComponentVariant","component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AA+B1G;;CAEC,GACD,OAAO,SAASC,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEA,OAAO,SAASE,+BACdC,SAA0C,EAC1CN,QAA0B;IAE1B,OAAOH,wBAAwBC,uBAAuBQ,SAAS,CAACV,kBAAkB,EAAEI;AACtF"}
|
1
|
+
{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n duration: KeyframeEffectOptions['duration'];\n easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n * all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n * exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n presenceMotion: PresenceMotionFn<MotionParams>,\n override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n const { enter, exit } = presenceMotion(...args);\n\n return {\n enter: { ...enter, ...override.all, ...override.enter },\n exit: { ...exit, ...override.all, ...override.exit },\n };\n };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","createPresenceComponentVariant","component"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AACA,SAASA,iBAAiB,EAAEC,uBAAuB,QAA2B,4BAA4B;AA+B1G;;CAEC,GACD,OAAO,SAASC,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEA,OAAO,SAASE,+BACdC,SAA0C,EAC1CN,QAA0B;IAE1B,OAAOH,wBAAwBC,uBAAuBQ,SAAS,CAACV,kBAAkB,EAAEI;AACtF"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n animation.persist();\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n Promise.all(animations.map(animation => animation.finished))\n .then(() => {\n onfinish();\n })\n .catch((err: unknown) => {\n const DOMException = element.ownerDocument.defaultView?.DOMException;\n\n // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n if (DOMException && err instanceof DOMException && err.name === 'AbortError') {\n oncancel();\n return;\n }\n\n throw err;\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","useAnimateAtomsInSupportedEnvironment","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC;IACP,OAAOD,MAAME,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQa,OAAO,CAACH,WAAW;gBAC3CI,MAAM;gBAEN,GAAGH,MAAM;gBACT,GAAIL,mBAAmB;oBAAES,UAAU;gBAAE,CAAC;YACxC;YAEAH,UAAUI,OAAO;YAEjB,OAAOJ;QACT;QAEA,OAAO;YACL,IAAIK,cAAaC,KAAc;gBAC7BX,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUK,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9DC,QAAQC,GAAG,CAACjB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUa,QAAQ,GACvDC,IAAI,CAAC;oBACJL;gBACF,GACCM,KAAK,CAAC,CAACC;wBACe5B;oBAArB,MAAM6B,gBAAe7B,qCAAAA,QAAQ8B,aAAa,CAACC,WAAW,cAAjC/B,yDAAAA,mCAAmC6B,YAAY;oBAEpE,8FAA8F;oBAC9F,IAAIA,gBAAgBD,eAAeC,gBAAgBD,IAAII,IAAI,KAAK,cAAc;wBAC5EV;wBACA;oBACF;oBAEA,MAAMM;gBACR;YACJ;YAEAK,QAAQ;gBACN1B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUqB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACL3B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUsB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJ5B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUuB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACN7B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUwB,MAAM;gBAClB;YACF;QACF;IACF,GACA,EAAE;AAEN;AAEA;;;;;CAKC,GACD,SAASC;IACP,MAAM,CAACC,OAAOC,SAAS,GAAG1C,MAAM2C,QAAQ,CAAC;IACzC,MAAMC,cAAc5C,MAAM6C,MAAM;IAEhC,MAAMC,mBAAmB7C;IAEzBD,MAAM+C,SAAS,CAAC;QACd,IAAIN,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAOzC,MAAME,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAM4C,kCAAkC,OAAO9C,QAAQa,OAAO,KAAK;QAEnE,YAAY;QACZ,wFAAwF;QACxF,IAAIiC,iCAAiC;YACnC,OAAOH,iBAAiB3C,SAASC,OAAOC;QAC1C;QAEA,OAAO;YACLkB,uBAAsBC,QAAoB;gBACxCoB,YAAYI,OAAO,GAAGxB;gBACtBkB,SAASQ,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAI9B,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAe;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;QACF;IACF,GACA;QAACO;KAAiB;AAEtB;AAEA;;CAEC,GACD,OAAO,SAASK;IACd;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnC,sDAAsD;QACtD,OAAOd;IACT;IAEA,sDAAsD;IACtD,OAAOvC;AACT"}
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n animation.persist();\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n Promise.all(animations.map(animation => animation.finished))\n .then(() => {\n onfinish();\n })\n .catch((err: unknown) => {\n const DOMException = element.ownerDocument.defaultView?.DOMException;\n\n // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n if (DOMException && err instanceof DOMException && err.name === 'AbortError') {\n oncancel();\n return;\n }\n\n throw err;\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["React","useAnimateAtomsInSupportedEnvironment","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","useAnimateAtoms","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC;IACP,OAAOD,MAAME,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQa,OAAO,CAACH,WAAW;gBAC3CI,MAAM;gBAEN,GAAGH,MAAM;gBACT,GAAIL,mBAAmB;oBAAES,UAAU;gBAAE,CAAC;YACxC;YAEAH,UAAUI,OAAO;YAEjB,OAAOJ;QACT;QAEA,OAAO;YACL,IAAIK,cAAaC,KAAc;gBAC7BX,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUK,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9DC,QAAQC,GAAG,CAACjB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUa,QAAQ,GACvDC,IAAI,CAAC;oBACJL;gBACF,GACCM,KAAK,CAAC,CAACC;wBACe5B;oBAArB,MAAM6B,gBAAe7B,qCAAAA,QAAQ8B,aAAa,CAACC,WAAW,cAAjC/B,yDAAAA,mCAAmC6B,YAAY;oBAEpE,8FAA8F;oBAC9F,IAAIA,gBAAgBD,eAAeC,gBAAgBD,IAAII,IAAI,KAAK,cAAc;wBAC5EV;wBACA;oBACF;oBAEA,MAAMM;gBACR;YACJ;YAEAK,QAAQ;gBACN1B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUqB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACL3B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUsB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJ5B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUuB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACN7B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUwB,MAAM;gBAClB;YACF;QACF;IACF,GACA,EAAE;AAEN;AAEA;;;;;CAKC,GACD,SAASC;IACP,MAAM,CAACC,OAAOC,SAAS,GAAG1C,MAAM2C,QAAQ,CAAC;IACzC,MAAMC,cAAc5C,MAAM6C,MAAM;IAEhC,MAAMC,mBAAmB7C;IAEzBD,MAAM+C,SAAS,CAAC;QACd,IAAIN,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAOzC,MAAME,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAM4C,kCAAkC,OAAO9C,QAAQa,OAAO,KAAK;QAEnE,YAAY;QACZ,wFAAwF;QACxF,IAAIiC,iCAAiC;YACnC,OAAOH,iBAAiB3C,SAASC,OAAOC;QAC1C;QAEA,OAAO;YACLkB,uBAAsBC,QAAoB;gBACxCoB,YAAYI,OAAO,GAAGxB;gBACtBkB,SAASQ,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAI9B,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAe;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;QACF;IACF,GACA;QAACO;KAAiB;AAEtB;AAEA;;CAEC,GACD,OAAO,SAASK;IACd;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnC,sDAAsD;QACtD,OAAOd;IACT;IAEA,sDAAsD;IACtD,OAAOvC;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n React.useEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["React","useFluent_unstable","useFluent","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;QACSG;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaR,MAAMS,MAAM,CAAU;IACzC,MAAMC,YAAYV,MAAMW,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEZ,MAAMa,SAAS,CAAC;QACd,IAAIP,iBAAiB,QAAQ,OAAOA,aAAaQ,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaT,aAAaQ,UAAU,CAACX;QAE3C,IAAIY,WAAWC,OAAO,EAAE;YACtBR,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBV,WAAWI,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACX;KAAa;IAEjB,OAAOI;AACT"}
|
1
|
+
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n React.useEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["React","useFluent_unstable","useFluent","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;QACSG;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaR,MAAMS,MAAM,CAAU;IACzC,MAAMC,YAAYV,MAAMW,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEZ,MAAMa,SAAS,CAAC;QACd,IAAIP,iBAAiB,QAAQ,OAAOA,aAAaQ,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaT,aAAaQ,UAAU,CAACX;QAE3C,IAAIY,WAAWC,OAAO,EAAE;YACtBR,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBV,WAAWI,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACX;KAAa;IAEjB,OAAOI;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMotionImperativeRef.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined) {\n const animationRef = React.useRef<AnimationHandle | undefined>();\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["React","useMotionImperativeRef","imperativeRef","animationRef","useRef","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"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"],"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 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","presenceMotionSlot","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;
|
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 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","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;AAY9F,SAASC,uBAAuB,QAAQ,oCAAoC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n durationUltraFast: 50,\n durationFaster: 100,\n durationFast: 150,\n durationNormal: 200,\n durationGentle: 250,\n durationSlow: 300,\n durationSlower: 400,\n durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n ...durations,\n ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["durations","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curves","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear","motionTokens"],"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"],"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 +1 @@
|
|
1
|
-
{"version":3,"sources":["presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line deprecation/deprecation\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAGtB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}
|
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 deprecation/deprecation\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAGtB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}
|
package/lib/types.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n *
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["export type AtomMotion = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate'> & {\n setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n};\n\nexport type MotionImperativeRef = {\n /** Sets the playback rate of the animation, where 1 is normal speed. */\n setPlaybackRate: (rate: number) => void;\n\n /** Sets the state of the animation to running or paused. */\n setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA0BA,WAME"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactIs from 'react-is';\n\nexport function getChildElement(children: React.ReactElement) {\n try {\n const child = React.Children.only(children) as React.ReactElement & { ref: React.Ref<HTMLElement> };\n\n if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {\n return child as React.ReactElement & { ref: React.Ref<HTMLElement> };\n }\n\n // We don't need to do anything here: we catch the exception from React to throw a more meaningful error\n // eslint-disable-next-line no-empty\n } catch {}\n\n throw new Error(\n [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n ].join(''),\n );\n}\n"],"names":["React","ReactIs","getChildElement","children","child","Children","only","type","isForwardRef","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,aAAa,WAAW;AAEpC,OAAO,SAASC,gBAAgBC,QAA4B;IAC1D,IAAI;QACF,MAAMC,QAAQJ,MAAMK,QAAQ,CAACC,IAAI,CAACH;QAElC,IAAI,OAAOC,MAAMG,IAAI,KAAK,YAAYN,QAAQO,YAAY,CAACJ,QAAQ;YACjE,OAAOA;QACT;IAEA,wGAAwG;IACxG,oCAAoC;IACtC,EAAE,OAAM,CAAC;IAET,MAAM,IAAIK,MACR;QACE;QACA;QACA;QACA;KACD,CAACC,IAAI,CAAC;AAEX"}
|
1
|
+
{"version":3,"sources":["../src/utils/getChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactIs from 'react-is';\n\nexport function getChildElement(children: React.ReactElement) {\n try {\n const child = React.Children.only(children) as React.ReactElement & { ref: React.Ref<HTMLElement> };\n\n if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {\n return child as React.ReactElement & { ref: React.Ref<HTMLElement> };\n }\n\n // We don't need to do anything here: we catch the exception from React to throw a more meaningful error\n // eslint-disable-next-line no-empty\n } catch {}\n\n throw new Error(\n [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n ].join(''),\n );\n}\n"],"names":["React","ReactIs","getChildElement","children","child","Children","only","type","isForwardRef","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,aAAa,WAAW;AAEpC,OAAO,SAASC,gBAAgBC,QAA4B;IAC1D,IAAI;QACF,MAAMC,QAAQJ,MAAMK,QAAQ,CAACC,IAAI,CAACH;QAElC,IAAI,OAAOC,MAAMG,IAAI,KAAK,YAAYN,QAAQO,YAAY,CAACJ,QAAQ;YACjE,OAAOA;QACT;IAEA,wGAAwG;IACxG,oCAAoC;IACtC,EAAE,OAAM,CAAC;IAET,MAAM,IAAIK,MACR;QACE;QACA;QACA;QACA;KACD,CAACC,IAAI,CAAC;AAEX"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["React","getChildMapping","children","childMapping","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"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"],"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 +1 @@
|
|
1
|
-
{"version":3,"sources":["getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n) {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["mergeChildMappings","getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"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"],"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 +1 @@
|
|
1
|
-
{"version":3,"sources":["mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n prevMapping: PresenceGroupChildMapping,\n nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n function getValueForKey(key: string) {\n return key in nextMapping ? nextMapping[key] : prevMapping[key];\n }\n\n // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n const nextKeysPending: Record<string, string[]> = {};\n let pendingKeys: string[] = [];\n\n // eslint-disable-next-line guard-for-in\n for (const prevKey in prevMapping) {\n if (prevKey in nextMapping) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n\n continue;\n }\n\n pendingKeys.push(prevKey);\n }\n\n const childMapping: PresenceGroupChildMapping = {};\n\n // eslint-disable-next-line guard-for-in\n for (const nextKey in nextMapping) {\n if (nextKeysPending[nextKey]) {\n for (const pendingNextKey of nextKeysPending[nextKey]) {\n childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n }\n\n // Finally, add the keys which didn't appear before any key in `next`\n for (const pendingKey of pendingKeys) {\n childMapping[pendingKey] = getValueForKey(pendingKey);\n }\n\n return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"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"],"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 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n element: React.ReactElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":["React"],"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"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
@@ -8,8 +8,8 @@ Object.defineProperty(exports, "PresenceGroup", {
|
|
8
8
|
return PresenceGroup;
|
9
9
|
}
|
10
10
|
});
|
11
|
-
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
11
|
const _define_property = require("@swc/helpers/_/_define_property");
|
12
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
14
14
|
const _getNextChildMapping = require("../utils/groups/getNextChildMapping");
|
15
15
|
const _getChildMapping = require("../utils/groups/getChildMapping");
|
@@ -38,8 +38,8 @@ class PresenceGroup extends _react.Component {
|
|
38
38
|
}
|
39
39
|
constructor(props, context){
|
40
40
|
super(props, context);
|
41
|
-
|
42
|
-
|
41
|
+
_define_property._(this, "mounted", false);
|
42
|
+
_define_property._(this, "handleExit", (childKey)=>{
|
43
43
|
const currentChildMapping = (0, _getChildMapping.getChildMapping)(this.props.children);
|
44
44
|
if (childKey in currentChildMapping) {
|
45
45
|
return;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ) {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context: unknown) {\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string) => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount() {\n this.mounted = true;\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n render() {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["PresenceGroup","React","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","getChildMapping","children","getNextChildMapping","componentDidMount","mounted","componentWillUnmount","render","
|
1
|
+
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ) {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context: unknown) {\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string) => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount() {\n this.mounted = true;\n }\n\n componentWillUnmount() {\n this.mounted = false;\n }\n\n render() {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["PresenceGroup","React","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","getChildMapping","children","getNextChildMapping","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAoBaA;;;eAAAA;;;;;iEApBU;qCAEa;iCACJ;2CAEU;AAenC,MAAMA,sBAAsBC,OAAMC,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBC,IAAAA,gCAAe,EAACL,UAAUM,QAAQ;QAE3D,OAAO;YACLL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAmB,EAACL,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAK,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;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAff,yBAAQhB,WAAmB;QAuB3B,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 +1 @@
|
|
1
|
-
{"version":3,"sources":["PresenceGroupItemProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n children: React.ReactElement;\n childKey: string;\n // That's an internal callback, so we don't need to enforce the type here\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onExit: (childKey: string) => void;\n};\n\n/**\n * @internal\n *\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n const { appear, childKey, onExit, visible, unmountOnExit } = props;\n const contextValue = React.useMemo(\n () => ({\n appear,\n visible,\n onExit: () => onExit(childKey),\n unmountOnExit,\n }),\n [appear, childKey, onExit, visible, unmountOnExit],\n );\n\n return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","React","useMemo","
|
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"}
|
@@ -18,7 +18,7 @@ _export(exports, {
|
|
18
18
|
});
|
19
19
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
20
20
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
21
|
-
const MotionBehaviourContext =
|
21
|
+
const MotionBehaviourContext = _react.createContext(undefined);
|
22
22
|
const MotionBehaviourProvider = MotionBehaviourContext.Provider;
|
23
23
|
const useMotionBehaviourContext = ()=>{
|
24
24
|
var _React_useContext;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["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);\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,
|
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);\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,uBAAuB;eAAvBA;;IACAC,yBAAyB;eAAzBA;;;;iEATU;AAOvB,MAAMC,yBAAyBC,OAAMC,aAAa,CAAkCC;AAC7E,MAAML,0BAA0BE,uBAAuBI,QAAQ;AAC/D,MAAML,4BAA4B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,qCAAjBC,+BAAAA,oBAA4C;AAAQ"}
|
@@ -10,4 +10,4 @@ Object.defineProperty(exports, "PresenceGroupChildContext", {
|
|
10
10
|
});
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
13
|
-
const PresenceGroupChildContext =
|
13
|
+
const PresenceGroupChildContext = _react.createContext(undefined);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["PresenceGroupChildContext","React","createContext","undefined"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;AAgBhB,MAAMA,
|
1
|
+
{"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\n */\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n"],"names":["PresenceGroupChildContext","React","createContext","undefined"],"rangeMappings":";;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;AAgBhB,MAAMA,4BAA4BC,OAAMC,aAAa,CAA6CC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\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 = elementRef.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, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n };\n\n return Atom;\n}\n"],"names":["createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","React","useRef","skipMotions","useMotionBehaviourContext","optionsRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","cloneElement","ref","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkDgBA;;;eAAAA;;;;gCAlD2D;iEACpD;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,MAAME,QAAQC,IAAAA,
|
1
|
+
{"version":3,"sources":["../src/factories/createMotionComponent.ts"],"sourcesContent":["import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionParam, MotionImperativeRef } from '../types';\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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\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 = elementRef.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, handleRef, isReducedMotion, onMotionFinish, onMotionStart, onMotionCancel]);\n\n return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n };\n\n return Atom;\n}\n"],"names":["createMotionComponent","value","Atom","props","children","imperativeRef","onMotionFinish","onMotionFinishProp","onMotionStart","onMotionStartProp","onMotionCancel","onMotionCancelProp","_rest","params","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","React","useRef","skipMotions","useMotionBehaviourContext","optionsRef","animateAtoms","useAnimateAtoms","isReducedMotion","useIsReducedMotion","useEventCallback","useIsomorphicLayoutEffect","current","element","atoms","handle","setMotionEndCallbacks","finish","cancel","cloneElement","ref","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkDgBA;;;eAAAA;;;;gCAlD2D;iEACpD;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,MAAME,QAAQC,IAAAA,gCAAe,EAACX;QAE9B,MAAMY,YAAYC,IAAAA,8CAAsB,EAACZ;QACzC,MAAMa,aAAaC,OAAMC,MAAM;QAC/B,MAAMC,cAAcC,IAAAA,iDAAyB,QAAO;QACpD,MAAMC,aAAaJ,OAAMC,MAAM,CAAiD;YAC9EC;YACAR;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;YAC3FN,WAAWO,OAAO,GAAG;gBAAET;gBAAaR;YAAO;QAC7C;QAEAgB,IAAAA,yCAAyB,EAAC;YACxB,MAAME,UAAUb,WAAWY,OAAO;YAElC,IAAIC,SAAS;gBACX,MAAMC,QAAQ,OAAO/B,UAAU,aAAaA,MAAM;oBAAE8B;oBAAS,GAAGR,WAAWO,OAAO,CAACjB,MAAM;gBAAC,KAAKZ;gBAE/FO;gBACA,MAAMyB,SAAST,aAAaO,SAASC,OAAO;oBAAEN,iBAAiBA;gBAAkB;gBACjFV,UAAUc,OAAO,GAAGG;gBACpBA,OAAOC,qBAAqB,CAAC5B,gBAAgBI;gBAE7C,IAAIa,WAAWO,OAAO,CAACT,WAAW,EAAE;oBAClCY,OAAOE,MAAM;gBACf;gBAEA,OAAO;oBACLF,OAAOG,MAAM;gBACf;YACF;QACF,GAAG;YAACZ;YAAcR;YAAWU;YAAiBpB;YAAgBE;YAAeE;SAAe;QAE5F,OAAOS,OAAMkB,YAAY,CAACjC,UAAU;YAAEkC,KAAKC,IAAAA,6BAAa,EAACrB,YAAYJ,MAAMwB,GAAG;QAAE;IAClF;IAEA,OAAOpC;AACT"}
|
@@ -115,7 +115,8 @@ function createPresenceComponent(value) {
|
|
115
115
|
return ()=>{
|
116
116
|
handle.cancel();
|
117
117
|
};
|
118
|
-
}, //
|
118
|
+
}, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
|
119
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
119
120
|
[
|
120
121
|
animateAtoms,
|
121
122
|
handleRef,
|
@@ -126,7 +127,7 @@ function createPresenceComponent(value) {
|
|
126
127
|
visible
|
127
128
|
]);
|
128
129
|
if (mounted) {
|
129
|
-
return
|
130
|
+
return _react.cloneElement(child, {
|
130
131
|
ref
|
131
132
|
});
|
132
133
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n return !appear && isFirstMount && !!visible;\n}\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n 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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\n const ref = useMergedRefs(elementRef, child.ref);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; 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 = elementRef.current;\n\n if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n return;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n const applyInitialStyles = !visible && isFirstMount;\n const skipAnimation = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n const 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 return;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimation) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n );\n\n if (mounted) {\n return React.cloneElement(child, { ref });\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","animateAtoms","useAnimateAtoms","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimation","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
1
|
+
{"version":3,"sources":["../src/factories/createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useAnimateAtoms } from '../hooks/useAnimateAtoms';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';\nimport { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';\n\n/**\n * @internal A private symbol to store the motion definition on the component for variants.\n */\nexport const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');\n\nexport type PresenceComponentProps = {\n /**\n * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n */\n appear?: boolean;\n\n /** A React element that will be cloned and will have motion effects applied to it. */\n children: React.ReactElement;\n\n /** Provides imperative controls for the animation. */\n imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n /**\n * Callback that is called when the whole motion finishes.\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionFinish?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not\n * emit a finish event but a specific cancel event\n *\n * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionCancel?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /**\n * Callback that is called when the whole motion starts.\n *\n * A motion definition can contain multiple animations and therefore multiple \"start\" events. The callback is\n * triggered when the first animation is started. There is no official \"start\" event with the Web Animations API.\n * so the callback is triggered with \"null\".\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n onMotionStart?: (ev: null, data: { direction: PresenceDirection }) => void;\n\n /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n visible?: boolean;\n\n /**\n * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n * you prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit?: boolean;\n};\n\nexport type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {\n (props: PresenceComponentProps & MotionParams): React.ReactElement | null;\n [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n return !appear && isFirstMount && !!visible;\n}\n\nexport function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(\n value: PresenceMotion | PresenceMotionFn<MotionParams>,\n): PresenceComponent<MotionParams> {\n return Object.assign(\n (props: PresenceComponentProps & MotionParams) => {\n 'use no memo';\n\n const itemContext = React.useContext(PresenceGroupChildContext);\n const merged = { ...itemContext, ...props };\n 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 = getChildElement(children);\n\n const handleRef = useMotionImperativeRef(imperativeRef);\n const elementRef = React.useRef<HTMLElement>();\n const ref = useMergedRefs(elementRef, child.ref);\n const optionsRef = React.useRef<{ appear?: boolean; params: MotionParams; 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 = elementRef.current;\n\n if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n return;\n }\n\n const presenceMotion =\n typeof value === 'function' ? value({ element, ...optionsRef.current.params }) : (value as PresenceMotion);\n const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n const direction: PresenceDirection = visible ? 'enter' : 'exit';\n const applyInitialStyles = !visible && isFirstMount;\n const skipAnimation = optionsRef.current.skipMotions;\n\n if (!applyInitialStyles) {\n handleMotionStart(direction);\n }\n\n const 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 return;\n }\n\n handleRef.current = handle;\n handle.setMotionEndCallbacks(\n () => handleMotionFinish(direction),\n () => handleMotionCancel(direction),\n );\n\n if (skipAnimation) {\n handle.finish();\n }\n\n return () => {\n handle.cancel();\n };\n },\n // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [animateAtoms, handleRef, isReducedMotion, handleMotionFinish, handleMotionStart, handleMotionCancel, visible],\n );\n\n if (mounted) {\n return React.cloneElement(child, { ref });\n }\n\n return null;\n },\n {\n // Heads up!\n // Always normalize it to a function to simplify types\n [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,\n },\n );\n}\n"],"names":["MOTION_DEFINITION","createPresenceComponent","Symbol","shouldSkipAnimation","appear","isFirstMount","visible","value","Object","assign","props","itemContext","React","useContext","PresenceGroupChildContext","merged","skipMotions","useMotionBehaviourContext","children","imperativeRef","onExit","onMotionFinish","onMotionStart","onMotionCancel","unmountOnExit","_rest","params","mounted","setMounted","useMountedState","child","getChildElement","handleRef","useMotionImperativeRef","elementRef","useRef","ref","useMergedRefs","optionsRef","animateAtoms","useAnimateAtoms","useFirstMount","isReducedMotion","useIsReducedMotion","handleMotionStart","useEventCallback","direction","handleMotionFinish","handleMotionCancel","useIsomorphicLayoutEffect","current","element","presenceMotion","atoms","enter","exit","applyInitialStyles","skipAnimation","handle","finish","setMotionEndCallbacks","cancel","cloneElement"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n duration: KeyframeEffectOptions['duration'];\n easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n * all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n * exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n presenceMotion: PresenceMotionFn<MotionParams>,\n override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n const { enter, exit } = presenceMotion(...args);\n\n return {\n enter: { ...enter, ...override.all, ...override.enter },\n exit: { ...exit, ...override.all, ...override.exit },\n };\n };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["createPresenceComponentVariant","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","component","createPresenceComponent","MOTION_DEFINITION"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDgBA,
|
1
|
+
{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceDirection, PresenceMotionFn } from '../types';\nimport { MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * @internal\n */\ntype PresenceOverrideFields = {\n duration: KeyframeEffectOptions['duration'];\n easing: KeyframeEffectOptions['easing'];\n};\n\n/**\n * @internal\n *\n * Override properties for presence transitions.\n *\n * @example <caption>Override duration for all transitions</caption>\n * ```\n * const override: PresenceOverride = {\n * all: { duration: 1000 },\n * };\n * ```\n *\n * @example <caption>Override easing for exit transition</caption>\n * ```\n * const override: PresenceOverride = {\n * exit: { easing: 'ease-out' },\n * };\n * ```\n */\ntype PresenceOverride = Partial<Record<PresenceDirection | 'all', Partial<PresenceOverrideFields>>>;\n\n/**\n * @internal\n */\nexport function overridePresenceMotion<MotionParams extends Record<string, MotionParam> = {}>(\n presenceMotion: PresenceMotionFn<MotionParams>,\n override: PresenceOverride,\n): PresenceMotionFn<MotionParams> {\n return (...args: Parameters<PresenceMotionFn<MotionParams>>) => {\n const { enter, exit } = presenceMotion(...args);\n\n return {\n enter: { ...enter, ...override.all, ...override.enter },\n exit: { ...exit, ...override.all, ...override.exit },\n };\n };\n}\n\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n override: PresenceOverride,\n): PresenceComponent<MotionParams> {\n return createPresenceComponent(overridePresenceMotion(component[MOTION_DEFINITION], override));\n}\n"],"names":["createPresenceComponentVariant","overridePresenceMotion","presenceMotion","override","args","enter","exit","all","component","createPresenceComponent","MOTION_DEFINITION"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiDgBA,8BAA8B;eAA9BA;;IAdAC,sBAAsB;eAAtBA;;;yCAlC8D;AAkCvE,SAASA,uBACdC,cAA8C,EAC9CC,QAA0B;IAE1B,OAAO,CAAC,GAAGC;QACT,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAE,GAAGJ,kBAAkBE;QAE1C,OAAO;YACLC,OAAO;gBAAE,GAAGA,KAAK;gBAAE,GAAGF,SAASI,GAAG;gBAAE,GAAGJ,SAASE,KAAK;YAAC;YACtDC,MAAM;gBAAE,GAAGA,IAAI;gBAAE,GAAGH,SAASI,GAAG;gBAAE,GAAGJ,SAASG,IAAI;YAAC;QACrD;IACF;AACF;AAEO,SAASN,+BACdQ,SAA0C,EAC1CL,QAA0B;IAE1B,OAAOM,IAAAA,gDAAuB,EAACR,uBAAuBO,SAAS,CAACE,0CAAiB,CAAC,EAAEP;AACtF"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n animation.persist();\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n Promise.all(animations.map(animation => animation.finished))\n .then(() => {\n onfinish();\n })\n .catch((err: unknown) => {\n const DOMException = element.ownerDocument.defaultView?.DOMException;\n\n // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n if (DOMException && err instanceof DOMException && err.name === 'AbortError') {\n oncancel();\n return;\n }\n\n throw err;\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["useAnimateAtoms","useAnimateAtomsInSupportedEnvironment","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+IgBA;;;eAAAA;;;;iEA/IO;AAGvB,SAASC;IACP,OAAOC,OAAMC,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQa,OAAO,CAACH,WAAW;gBAC3CI,MAAM;gBAEN,GAAGH,MAAM;gBACT,GAAIL,mBAAmB;oBAAES,UAAU;gBAAE,CAAC;YACxC;YAEAH,UAAUI,OAAO;YAEjB,OAAOJ;QACT;QAEA,OAAO;YACL,IAAIK,cAAaC,KAAc;gBAC7BX,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUK,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9DC,QAAQC,GAAG,CAACjB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUa,QAAQ,GACvDC,IAAI,CAAC;oBACJL;gBACF,GACCM,KAAK,CAAC,CAACC;wBACe5B;oBAArB,MAAM6B,
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n const { keyframes, ...params } = motion;\n const animation = element.animate(keyframes, {\n fill: 'forwards',\n\n ...params,\n ...(isReducedMotion && { duration: 1 }),\n });\n\n animation.persist();\n\n return animation;\n });\n\n return {\n set playbackRate(rate: number) {\n animations.forEach(animation => {\n animation.playbackRate = rate;\n });\n },\n setMotionEndCallbacks(onfinish: () => void, oncancel: () => void) {\n Promise.all(animations.map(animation => animation.finished))\n .then(() => {\n onfinish();\n })\n .catch((err: unknown) => {\n const DOMException = element.ownerDocument.defaultView?.DOMException;\n\n // Ignores \"DOMException: The user aborted a request\" that appears if animations are cancelled\n if (DOMException && err instanceof DOMException && err.name === 'AbortError') {\n oncancel();\n return;\n }\n\n throw err;\n });\n },\n\n cancel: () => {\n animations.forEach(animation => {\n animation.cancel();\n });\n },\n pause: () => {\n animations.forEach(animation => {\n animation.pause();\n });\n },\n play: () => {\n animations.forEach(animation => {\n animation.play();\n });\n },\n finish: () => {\n animations.forEach(animation => {\n animation.finish();\n });\n },\n };\n },\n [],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n cancel() {\n /* no-op */\n },\n pause() {\n /* no-op */\n },\n play() {\n /* no-op */\n },\n finish() {\n /* no-op */\n },\n };\n },\n [realAnimateAtoms],\n );\n}\n\n/**\n * @internal\n */\nexport function useAnimateAtoms() {\n 'use no memo';\n\n if (process.env.NODE_ENV === 'test') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInTestEnvironment();\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useAnimateAtomsInSupportedEnvironment();\n}\n"],"names":["useAnimateAtoms","useAnimateAtomsInSupportedEnvironment","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","params","animation","animate","fill","duration","persist","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","Promise","all","finished","then","catch","err","DOMException","ownerDocument","defaultView","name","cancel","pause","play","finish","useAnimateAtomsInTestEnvironment","count","setCount","useState","callbackRef","useRef","realAnimateAtoms","useEffect","current","ELEMENT_SUPPORTS_WEB_ANIMATIONS","v","process","env","NODE_ENV"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA+IgBA;;;eAAAA;;;;iEA/IO;AAGvB,SAASC;IACP,OAAOC,OAAMC,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMC,QAAQC,MAAMC,OAAO,CAACJ,SAASA,QAAQ;YAACA;SAAM;QACpD,MAAM,EAAEK,eAAe,EAAE,GAAGJ;QAE5B,MAAMK,aAAaJ,MAAMK,GAAG,CAACC,CAAAA;YAC3B,MAAM,EAAEC,SAAS,EAAE,GAAGC,QAAQ,GAAGF;YACjC,MAAMG,YAAYZ,QAAQa,OAAO,CAACH,WAAW;gBAC3CI,MAAM;gBAEN,GAAGH,MAAM;gBACT,GAAIL,mBAAmB;oBAAES,UAAU;gBAAE,CAAC;YACxC;YAEAH,UAAUI,OAAO;YAEjB,OAAOJ;QACT;QAEA,OAAO;YACL,IAAIK,cAAaC,KAAc;gBAC7BX,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUK,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9DC,QAAQC,GAAG,CAACjB,WAAWC,GAAG,CAACI,CAAAA,YAAaA,UAAUa,QAAQ,GACvDC,IAAI,CAAC;oBACJL;gBACF,GACCM,KAAK,CAAC,CAACC;wBACe5B;oBAArB,MAAM6B,gBAAe7B,qCAAAA,QAAQ8B,aAAa,CAACC,WAAW,cAAjC/B,yDAAAA,mCAAmC6B,YAAY;oBAEpE,8FAA8F;oBAC9F,IAAIA,gBAAgBD,eAAeC,gBAAgBD,IAAII,IAAI,KAAK,cAAc;wBAC5EV;wBACA;oBACF;oBAEA,MAAMM;gBACR;YACJ;YAEAK,QAAQ;gBACN1B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUqB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACL3B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUsB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJ5B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUuB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACN7B,WAAWY,OAAO,CAACP,CAAAA;oBACjBA,UAAUwB,MAAM;gBAClB;YACF;QACF;IACF,GACA,EAAE;AAEN;AAEA;;;;;CAKC,GACD,SAASC;IACP,MAAM,CAACC,OAAOC,SAAS,GAAGzC,OAAM0C,QAAQ,CAAC;IACzC,MAAMC,cAAc3C,OAAM4C,MAAM;IAEhC,MAAMC,mBAAmB9C;IAEzBC,OAAM8C,SAAS,CAAC;QACd,IAAIN,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAOxC,OAAMC,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAM4C,kCAAkC,OAAO9C,QAAQa,OAAO,KAAK;QAEnE,YAAY;QACZ,wFAAwF;QACxF,IAAIiC,iCAAiC;YACnC,OAAOH,iBAAiB3C,SAASC,OAAOC;QAC1C;QAEA,OAAO;YACLkB,uBAAsBC,QAAoB;gBACxCoB,YAAYI,OAAO,GAAGxB;gBACtBkB,SAASQ,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAI9B,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAe;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;YACAC;YACE,SAAS,GACX;QACF;IACF,GACA;QAACO;KAAiB;AAEtB;AAKO,SAAS/C;IACd;IAEA,IAAIoD,QAAQC,GAAG,CAACC,QAAQ,KAAK,QAAQ;QACnC,sDAAsD;QACtD,OAAOb;IACT;IAEA,sDAAsD;IACtD,OAAOxC;AACT"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n React.useEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;;iEAPO;qCACyB;AAEhD,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,
|
1
|
+
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n React.useEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;;iEAPO;qCACyB;AAEhD,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;IAEhEJ,OAAMK,SAAS,CAAC;QACd,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":["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;
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["useMountedState.ts"],"sourcesContent":["import { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["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,
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport { createMotionComponent, type MotionComponentProps } from './factories/createMotionComponent';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\n\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","PresenceGroup","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;
|
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 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","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAwBSA,uBAAuB;eAAvBA,+CAAuB;;IAdvBC,aAAa;eAAbA,4BAAa;;IARbC,qBAAqB;eAArBA,4CAAqB;;IAE5BC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IARLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAYZC,kBAAkB;eAAlBA,sCAAkB;;;8BAZqB;uCAEiB;yCAK1D;gDACwC;+BAEjB;oCAEmC;wCAYzB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n durationUltraFast: 50,\n durationFaster: 100,\n durationFast: 150,\n durationNormal: 200,\n durationGentle: 250,\n durationSlow: 300,\n durationSlower: 400,\n durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n ...durations,\n ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["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,
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line deprecation/deprecation\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","
|
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 deprecation/deprecation\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,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":[
|
1
|
+
{"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactIs from 'react-is';\n\nexport function getChildElement(children: React.ReactElement) {\n try {\n const child = React.Children.only(children) as React.ReactElement & { ref: React.Ref<HTMLElement> };\n\n if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {\n return child as React.ReactElement & { ref: React.Ref<HTMLElement> };\n }\n\n // We don't need to do anything here: we catch the exception from React to throw a more meaningful error\n // eslint-disable-next-line no-empty\n } catch {}\n\n throw new Error(\n [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n ].join(''),\n );\n}\n"],"names":["getChildElement","children","child","React","Children","only","type","ReactIs","isForwardRef","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;mEACE;AAElB,SAASA,gBAAgBC,QAA4B;IAC1D,IAAI;QACF,MAAMC,QAAQC,OAAMC,QAAQ,CAACC,IAAI,CAACJ;QAElC,IAAI,OAAOC,MAAMI,IAAI,KAAK,YAAYC,SAAQC,YAAY,CAACN,QAAQ;YACjE,OAAOA;QACT;IAEA,wGAAwG;IACxG,oCAAoC;IACtC,EAAE,OAAM,CAAC;IAET,MAAM,IAAIO,MACR;QACE;QACA;QACA;QACA;KACD,CAACC,IAAI,CAAC;AAEX"}
|
1
|
+
{"version":3,"sources":["../src/utils/getChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactIs from 'react-is';\n\nexport function getChildElement(children: React.ReactElement) {\n try {\n const child = React.Children.only(children) as React.ReactElement & { ref: React.Ref<HTMLElement> };\n\n if (typeof child.type === 'string' || ReactIs.isForwardRef(child)) {\n return child as React.ReactElement & { ref: React.Ref<HTMLElement> };\n }\n\n // We don't need to do anything here: we catch the exception from React to throw a more meaningful error\n // eslint-disable-next-line no-empty\n } catch {}\n\n throw new Error(\n [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n ].join(''),\n );\n}\n"],"names":["getChildElement","children","child","React","Children","only","type","ReactIs","isForwardRef","Error","join"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;mEACE;AAElB,SAASA,gBAAgBC,QAA4B;IAC1D,IAAI;QACF,MAAMC,QAAQC,OAAMC,QAAQ,CAACC,IAAI,CAACJ;QAElC,IAAI,OAAOC,MAAMI,IAAI,KAAK,YAAYC,SAAQC,YAAY,CAACN,QAAQ;YACjE,OAAOA;QACT;IAEA,wGAAwG;IACxG,oCAAoC;IACtC,EAAE,OAAM,CAAC;IAET,MAAM,IAAIO,MACR;QACE;QACA;QACA;QACA;KACD,CAACC,IAAI,CAAC;AAEX"}
|
@@ -14,7 +14,7 @@ function getChildMapping(children) {
|
|
14
14
|
const childMapping = {};
|
15
15
|
if (children) {
|
16
16
|
_react.Children.toArray(children).forEach((child)=>{
|
17
|
-
if (
|
17
|
+
if (_react.isValidElement(child)) {
|
18
18
|
var _child_key;
|
19
19
|
childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
|
20
20
|
appear: false,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined) {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["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,
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n) {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["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,
|
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,8 +1,4 @@
|
|
1
|
-
|
2
|
-
* When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*
|
3
|
-
* since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set
|
4
|
-
* of keys and merges them with its best guess of the correct ordering.
|
5
|
-
*/ "use strict";
|
1
|
+
"use strict";
|
6
2
|
Object.defineProperty(exports, "__esModule", {
|
7
3
|
value: true
|
8
4
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n prevMapping: PresenceGroupChildMapping,\n nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n function getValueForKey(key: string) {\n return key in nextMapping ? nextMapping[key] : prevMapping[key];\n }\n\n // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n const nextKeysPending: Record<string, string[]> = {};\n let pendingKeys: string[] = [];\n\n // eslint-disable-next-line guard-for-in\n for (const prevKey in prevMapping) {\n if (prevKey in nextMapping) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n\n continue;\n }\n\n pendingKeys.push(prevKey);\n }\n\n const childMapping: PresenceGroupChildMapping = {};\n\n // eslint-disable-next-line guard-for-in\n for (const nextKey in nextMapping) {\n if (nextKeysPending[nextKey]) {\n for (const pendingNextKey of nextKeysPending[nextKey]) {\n childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n }\n\n // Finally, add the keys which didn't appear before any key in `next`\n for (const pendingKey of pendingKeys) {\n childMapping[pendingKey] = getValueForKey(pendingKey);\n }\n\n return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"rangeMappings":"
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PresenceGroupChild = {\n element: React.ReactElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":[],"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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-motion",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.6.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",
|
@@ -17,30 +17,16 @@
|
|
17
17
|
"url": "https://github.com/microsoft/fluentui"
|
18
18
|
},
|
19
19
|
"license": "MIT",
|
20
|
-
"scripts": {
|
21
|
-
"build": "just-scripts build",
|
22
|
-
"clean": "just-scripts clean",
|
23
|
-
"generate-api": "just-scripts generate-api",
|
24
|
-
"lint": "just-scripts lint",
|
25
|
-
"start": "yarn storybook",
|
26
|
-
"storybook": "yarn --cwd ../stories storybook",
|
27
|
-
"test": "jest --passWithNoTests",
|
28
|
-
"type-check": "just-scripts type-check",
|
29
|
-
"e2e": "cypress run --component",
|
30
|
-
"e2e:local": "cypress open --component",
|
31
|
-
"bundle-size": "monosize measure"
|
32
|
-
},
|
33
20
|
"devDependencies": {
|
34
21
|
"@fluentui/eslint-plugin": "*",
|
35
22
|
"@fluentui/react-conformance": "*",
|
36
23
|
"@fluentui/react-conformance-griffel": "*",
|
37
24
|
"@fluentui/scripts-api-extractor": "*",
|
38
|
-
"@fluentui/scripts-tasks": "*",
|
39
25
|
"@fluentui/scripts-cypress": "*"
|
40
26
|
},
|
41
27
|
"dependencies": {
|
42
|
-
"@fluentui/react-shared-contexts": "^9.
|
43
|
-
"@fluentui/react-utilities": "^9.18.
|
28
|
+
"@fluentui/react-shared-contexts": "^9.21.0",
|
29
|
+
"@fluentui/react-utilities": "^9.18.17",
|
44
30
|
"@swc/helpers": "^0.5.1",
|
45
31
|
"react-is": "^17.0.2"
|
46
32
|
},
|