@fluentui/react-motion 9.3.0 → 9.4.0
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 +17 -2
- package/dist/index.d.ts +24 -0
- package/lib/hooks/useAnimateAtoms.js +56 -49
- package/lib/hooks/useAnimateAtoms.js.map +1 -1
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/slots/presenceMotionSlot.js +40 -0
- package/lib/slots/presenceMotionSlot.js.map +1 -0
- package/lib-commonjs/hooks/useAnimateAtoms.js +54 -47
- package/lib-commonjs/hooks/useAnimateAtoms.js.map +1 -1
- package/lib-commonjs/index.js +4 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/slots/presenceMotionSlot.js +51 -0
- package/lib-commonjs/slots/presenceMotionSlot.js.map +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,27 @@
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 23 Jul 2024 20:09:18 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.4.0)
|
8
|
+
|
9
|
+
Tue, 23 Jul 2024 20:09:18 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.3.0..@fluentui/react-motion_v9.4.0)
|
11
|
+
|
12
|
+
### Minor changes
|
13
|
+
|
14
|
+
- feat: add presenceMotionSlot() API ([PR #31984](https://github.com/microsoft/fluentui/pull/31984) by olfedias@microsoft.com)
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
16
|
+
- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
17
|
+
|
18
|
+
### Patches
|
19
|
+
|
20
|
+
- fix: improve Web Animations API detection in tests ([PR #32029](https://github.com/microsoft/fluentui/pull/32029) by olfedias@microsoft.com)
|
21
|
+
|
7
22
|
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.3.0)
|
8
23
|
|
9
|
-
Mon, 15 Jul 2024 17:
|
24
|
+
Mon, 15 Jul 2024 17:25:35 GMT
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.2..@fluentui/react-motion_v9.3.0)
|
11
26
|
|
12
27
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
@@ -1,4 +1,6 @@
|
|
1
1
|
import * as React_2 from 'react';
|
2
|
+
import { SlotComponentType } from '@fluentui/react-utilities';
|
3
|
+
import { SlotRenderFunction } from '@fluentui/react-utilities';
|
2
4
|
|
3
5
|
export declare type AtomMotion = {
|
4
6
|
keyframes: Keyframe[];
|
@@ -202,6 +204,28 @@ export declare type PresenceMotionFn<MotionParams extends Record<string, MotionP
|
|
202
204
|
element: HTMLElement;
|
203
205
|
} & MotionParams) => PresenceMotion;
|
204
206
|
|
207
|
+
export declare function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: PresenceMotionSlotProps<MotionParams> | null | undefined, options: {
|
208
|
+
elementType: React_2.FC<PresenceComponentProps & MotionParams>;
|
209
|
+
defaultProps: PresenceMotionSlotRenderProps & MotionParams;
|
210
|
+
}): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;
|
211
|
+
|
212
|
+
export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
|
213
|
+
/**
|
214
|
+
* @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
|
215
|
+
*
|
216
|
+
* If you want to override the animation, use the children render function instead.
|
217
|
+
*/
|
218
|
+
as?: keyof JSX.IntrinsicElements;
|
219
|
+
children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
|
220
|
+
children: React_2.ReactElement;
|
221
|
+
}>;
|
222
|
+
};
|
223
|
+
|
224
|
+
/**
|
225
|
+
* @internal
|
226
|
+
*/
|
227
|
+
declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
|
228
|
+
|
205
229
|
/**
|
206
230
|
* @internal
|
207
231
|
*
|
@@ -1,53 +1,5 @@
|
|
1
|
-
var _document_defaultView;
|
2
1
|
import * as React from 'react';
|
3
|
-
|
4
|
-
const win = typeof document === 'object' ? (_document_defaultView = document.defaultView) === null || _document_defaultView === void 0 ? void 0 : _document_defaultView.window : undefined;
|
5
|
-
// Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
|
6
|
-
const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.prototype.animate === 'function')();
|
7
|
-
/**
|
8
|
-
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
9
|
-
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
|
10
|
-
*
|
11
|
-
* @see https://github.com/microsoft/fluentui/issues/31701
|
12
|
-
*/ function useAnimateAtomsInTestEnvironment() {
|
13
|
-
const [count, setCount] = React.useState(0);
|
14
|
-
const callbackRef = React.useRef();
|
15
|
-
React.useEffect(()=>{
|
16
|
-
if (count > 0) {
|
17
|
-
var _callbackRef_current;
|
18
|
-
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
|
19
|
-
}
|
20
|
-
}, [
|
21
|
-
count
|
22
|
-
]);
|
23
|
-
return React.useCallback(()=>{
|
24
|
-
return {
|
25
|
-
setMotionEndCallbacks (onfinish) {
|
26
|
-
callbackRef.current = onfinish;
|
27
|
-
setCount((v)=>v + 1);
|
28
|
-
},
|
29
|
-
set playbackRate (rate){
|
30
|
-
/* no-op */ },
|
31
|
-
cancel () {
|
32
|
-
/* no-op */ },
|
33
|
-
pause () {
|
34
|
-
/* no-op */ },
|
35
|
-
play () {
|
36
|
-
/* no-op */ },
|
37
|
-
finish () {
|
38
|
-
/* no-op */ }
|
39
|
-
};
|
40
|
-
}, []);
|
41
|
-
}
|
42
|
-
/**
|
43
|
-
* @internal
|
44
|
-
*/ export function useAnimateAtoms() {
|
45
|
-
'use no memo';
|
46
|
-
if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {
|
47
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
48
|
-
return useAnimateAtomsInTestEnvironment();
|
49
|
-
}
|
50
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
2
|
+
function useAnimateAtomsInSupportedEnvironment() {
|
51
3
|
return React.useCallback((element, value, options)=>{
|
52
4
|
const atoms = Array.isArray(value) ? value : [
|
53
5
|
value
|
@@ -108,3 +60,58 @@ const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.pro
|
|
108
60
|
};
|
109
61
|
}, []);
|
110
62
|
}
|
63
|
+
/**
|
64
|
+
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
65
|
+
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
|
66
|
+
*
|
67
|
+
* @see https://github.com/microsoft/fluentui/issues/31701
|
68
|
+
*/ function useAnimateAtomsInTestEnvironment() {
|
69
|
+
const [count, setCount] = React.useState(0);
|
70
|
+
const callbackRef = React.useRef();
|
71
|
+
const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
|
72
|
+
React.useEffect(()=>{
|
73
|
+
if (count > 0) {
|
74
|
+
var _callbackRef_current;
|
75
|
+
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
|
76
|
+
}
|
77
|
+
}, [
|
78
|
+
count
|
79
|
+
]);
|
80
|
+
return React.useCallback((element, value, options)=>{
|
81
|
+
const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
|
82
|
+
// Heads up!
|
83
|
+
// If the environment supports Web Animations API, we can use the native implementation.
|
84
|
+
if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
|
85
|
+
return realAnimateAtoms(element, value, options);
|
86
|
+
}
|
87
|
+
return {
|
88
|
+
setMotionEndCallbacks (onfinish) {
|
89
|
+
callbackRef.current = onfinish;
|
90
|
+
setCount((v)=>v + 1);
|
91
|
+
},
|
92
|
+
set playbackRate (rate){
|
93
|
+
/* no-op */ },
|
94
|
+
cancel () {
|
95
|
+
/* no-op */ },
|
96
|
+
pause () {
|
97
|
+
/* no-op */ },
|
98
|
+
play () {
|
99
|
+
/* no-op */ },
|
100
|
+
finish () {
|
101
|
+
/* no-op */ }
|
102
|
+
};
|
103
|
+
}, [
|
104
|
+
realAnimateAtoms
|
105
|
+
]);
|
106
|
+
}
|
107
|
+
/**
|
108
|
+
* @internal
|
109
|
+
*/ export function useAnimateAtoms() {
|
110
|
+
'use no memo';
|
111
|
+
if (process.env.NODE_ENV === 'test') {
|
112
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
113
|
+
return useAnimateAtomsInTestEnvironment();
|
114
|
+
}
|
115
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
116
|
+
return useAnimateAtomsInSupportedEnvironment();
|
117
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\
|
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"}
|
package/lib/index.js
CHANGED
@@ -3,3 +3,4 @@ export { createMotionComponent } from './factories/createMotionComponent';
|
|
3
3
|
export { createPresenceComponent } from './factories/createPresenceComponent';
|
4
4
|
export { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';
|
5
5
|
export { PresenceGroup } from './components/PresenceGroup';
|
6
|
+
export { presenceMotionSlot } from './slots/presenceMotionSlot';
|
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 type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n} from './types';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","PresenceGroup"],"rangeMappings":"
|
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"],"names":["motionTokens","durations","curves","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","presenceMotionSlot"],"rangeMappings":";;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SAASC,qBAAqB,QAAmC,oCAAoC;AACrG,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAE3D,SAASC,kBAAkB,QAAsC,6BAA6B"}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
|
2
|
+
import * as React from 'react';
|
3
|
+
export function presenceMotionSlot(motion, options) {
|
4
|
+
// eslint-disable-next-line deprecation/deprecation
|
5
|
+
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
|
6
|
+
if (process.env.NODE_ENV !== 'production') {
|
7
|
+
if (typeof as !== 'undefined') {
|
8
|
+
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
|
9
|
+
}
|
10
|
+
}
|
11
|
+
if (motion === null) {
|
12
|
+
// Heads up!
|
13
|
+
// Render function is used there to avoid rendering a motion component and handle unmounting logic
|
14
|
+
const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
|
15
|
+
const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
|
16
|
+
/**
|
17
|
+
* Casting is required here as SlotComponentType is a function, not an object.
|
18
|
+
* Although SlotComponentType has a function signature, it is still just an object.
|
19
|
+
* This is required to make a slot callable (JSX compatible), this is the exact same approach
|
20
|
+
* that is used on `@types/react` components
|
21
|
+
*/ return {
|
22
|
+
[SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
|
23
|
+
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
|
24
|
+
};
|
25
|
+
}
|
26
|
+
/**
|
27
|
+
* Casting is required here as SlotComponentType is a function, not an object.
|
28
|
+
* Although SlotComponentType has a function signature, it is still just an object.
|
29
|
+
* This is required to make a slot callable (JSX compatible), this is the exact same approach
|
30
|
+
* that is used on `@types/react` components
|
31
|
+
*/ const propsWithMetadata = {
|
32
|
+
...options.defaultProps,
|
33
|
+
...rest,
|
34
|
+
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
|
35
|
+
};
|
36
|
+
if (typeof children === 'function') {
|
37
|
+
propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
|
38
|
+
}
|
39
|
+
return propsWithMetadata;
|
40
|
+
}
|
@@ -0,0 +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"}
|
@@ -10,53 +10,7 @@ Object.defineProperty(exports, "useAnimateAtoms", {
|
|
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
|
-
|
14
|
-
// eslint-disable-next-line no-restricted-globals
|
15
|
-
const win = typeof document === 'object' ? (_document_defaultView = document.defaultView) === null || _document_defaultView === void 0 ? void 0 : _document_defaultView.window : undefined;
|
16
|
-
// Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
|
17
|
-
const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.prototype.animate === 'function')();
|
18
|
-
/**
|
19
|
-
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
20
|
-
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
|
21
|
-
*
|
22
|
-
* @see https://github.com/microsoft/fluentui/issues/31701
|
23
|
-
*/ function useAnimateAtomsInTestEnvironment() {
|
24
|
-
const [count, setCount] = _react.useState(0);
|
25
|
-
const callbackRef = _react.useRef();
|
26
|
-
_react.useEffect(()=>{
|
27
|
-
if (count > 0) {
|
28
|
-
var _callbackRef_current;
|
29
|
-
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
|
30
|
-
}
|
31
|
-
}, [
|
32
|
-
count
|
33
|
-
]);
|
34
|
-
return _react.useCallback(()=>{
|
35
|
-
return {
|
36
|
-
setMotionEndCallbacks (onfinish) {
|
37
|
-
callbackRef.current = onfinish;
|
38
|
-
setCount((v)=>v + 1);
|
39
|
-
},
|
40
|
-
set playbackRate (rate){
|
41
|
-
/* no-op */ },
|
42
|
-
cancel () {
|
43
|
-
/* no-op */ },
|
44
|
-
pause () {
|
45
|
-
/* no-op */ },
|
46
|
-
play () {
|
47
|
-
/* no-op */ },
|
48
|
-
finish () {
|
49
|
-
/* no-op */ }
|
50
|
-
};
|
51
|
-
}, []);
|
52
|
-
}
|
53
|
-
function useAnimateAtoms() {
|
54
|
-
'use no memo';
|
55
|
-
if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {
|
56
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
57
|
-
return useAnimateAtomsInTestEnvironment();
|
58
|
-
}
|
59
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
13
|
+
function useAnimateAtomsInSupportedEnvironment() {
|
60
14
|
return _react.useCallback((element, value, options)=>{
|
61
15
|
const atoms = Array.isArray(value) ? value : [
|
62
16
|
value
|
@@ -117,3 +71,56 @@ function useAnimateAtoms() {
|
|
117
71
|
};
|
118
72
|
}, []);
|
119
73
|
}
|
74
|
+
/**
|
75
|
+
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
76
|
+
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
|
77
|
+
*
|
78
|
+
* @see https://github.com/microsoft/fluentui/issues/31701
|
79
|
+
*/ function useAnimateAtomsInTestEnvironment() {
|
80
|
+
const [count, setCount] = _react.useState(0);
|
81
|
+
const callbackRef = _react.useRef();
|
82
|
+
const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
|
83
|
+
_react.useEffect(()=>{
|
84
|
+
if (count > 0) {
|
85
|
+
var _callbackRef_current;
|
86
|
+
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
|
87
|
+
}
|
88
|
+
}, [
|
89
|
+
count
|
90
|
+
]);
|
91
|
+
return _react.useCallback((element, value, options)=>{
|
92
|
+
const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
|
93
|
+
// Heads up!
|
94
|
+
// If the environment supports Web Animations API, we can use the native implementation.
|
95
|
+
if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
|
96
|
+
return realAnimateAtoms(element, value, options);
|
97
|
+
}
|
98
|
+
return {
|
99
|
+
setMotionEndCallbacks (onfinish) {
|
100
|
+
callbackRef.current = onfinish;
|
101
|
+
setCount((v)=>v + 1);
|
102
|
+
},
|
103
|
+
set playbackRate (rate){
|
104
|
+
/* no-op */ },
|
105
|
+
cancel () {
|
106
|
+
/* no-op */ },
|
107
|
+
pause () {
|
108
|
+
/* no-op */ },
|
109
|
+
play () {
|
110
|
+
/* no-op */ },
|
111
|
+
finish () {
|
112
|
+
/* no-op */ }
|
113
|
+
};
|
114
|
+
}, [
|
115
|
+
realAnimateAtoms
|
116
|
+
]);
|
117
|
+
}
|
118
|
+
function useAnimateAtoms() {
|
119
|
+
'use no memo';
|
120
|
+
if (process.env.NODE_ENV === 'test') {
|
121
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
122
|
+
return useAnimateAtomsInTestEnvironment();
|
123
|
+
}
|
124
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
125
|
+
return useAnimateAtomsInSupportedEnvironment();
|
126
|
+
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\
|
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":"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"}
|
package/lib-commonjs/index.js
CHANGED
@@ -29,6 +29,9 @@ _export(exports, {
|
|
29
29
|
},
|
30
30
|
motionTokens: function() {
|
31
31
|
return _motionTokens.motionTokens;
|
32
|
+
},
|
33
|
+
presenceMotionSlot: function() {
|
34
|
+
return _presenceMotionSlot.presenceMotionSlot;
|
32
35
|
}
|
33
36
|
});
|
34
37
|
const _motionTokens = require("./motions/motionTokens");
|
@@ -36,3 +39,4 @@ const _createMotionComponent = require("./factories/createMotionComponent");
|
|
36
39
|
const _createPresenceComponent = require("./factories/createPresenceComponent");
|
37
40
|
const _createPresenceComponentVariant = require("./factories/createPresenceComponentVariant");
|
38
41
|
const _PresenceGroup = require("./components/PresenceGroup");
|
42
|
+
const _presenceMotionSlot = require("./slots/presenceMotionSlot");
|
@@ -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 type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n} from './types';\n"],"names":["PresenceGroup","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens"],"rangeMappings":"
|
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"],"names":["PresenceGroup","createMotionComponent","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionTokens","presenceMotionSlot"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAUSA,aAAa;eAAbA,4BAAa;;IARbC,qBAAqB;eAArBA,4CAAqB;;IAE5BC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IARLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAAvBC,YAAY;eAAZA,0BAAY;;IAYZC,kBAAkB;eAAlBA,sCAAkB;;;8BAZqB;uCAEiB;yCAK1D;gDACwC;+BAEjB;oCAEmC"}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
3
|
+
value: true
|
4
|
+
});
|
5
|
+
Object.defineProperty(exports, "presenceMotionSlot", {
|
6
|
+
enumerable: true,
|
7
|
+
get: function() {
|
8
|
+
return presenceMotionSlot;
|
9
|
+
}
|
10
|
+
});
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
14
|
+
function presenceMotionSlot(motion, options) {
|
15
|
+
// eslint-disable-next-line deprecation/deprecation
|
16
|
+
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
|
17
|
+
if (process.env.NODE_ENV !== 'production') {
|
18
|
+
if (typeof as !== 'undefined') {
|
19
|
+
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
if (motion === null) {
|
23
|
+
// Heads up!
|
24
|
+
// Render function is used there to avoid rendering a motion component and handle unmounting logic
|
25
|
+
const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
|
26
|
+
const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, props.children);
|
27
|
+
/**
|
28
|
+
* Casting is required here as SlotComponentType is a function, not an object.
|
29
|
+
* Although SlotComponentType has a function signature, it is still just an object.
|
30
|
+
* This is required to make a slot callable (JSX compatible), this is the exact same approach
|
31
|
+
* that is used on `@types/react` components
|
32
|
+
*/ return {
|
33
|
+
[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
|
34
|
+
[_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
|
35
|
+
};
|
36
|
+
}
|
37
|
+
/**
|
38
|
+
* Casting is required here as SlotComponentType is a function, not an object.
|
39
|
+
* Although SlotComponentType has a function signature, it is still just an object.
|
40
|
+
* This is required to make a slot callable (JSX compatible), this is the exact same approach
|
41
|
+
* that is used on `@types/react` components
|
42
|
+
*/ const propsWithMetadata = {
|
43
|
+
...options.defaultProps,
|
44
|
+
...rest,
|
45
|
+
[_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
|
46
|
+
};
|
47
|
+
if (typeof children === 'function') {
|
48
|
+
propsWithMetadata[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL] = children;
|
49
|
+
}
|
50
|
+
return propsWithMetadata;
|
51
|
+
}
|
@@ -0,0 +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","React","createElement","Fragment","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,mDAAmD;IACnD,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,OAAA,WAAA,GAAOO,OAAAC,aAAA,CAAAD,OAAAE,QAAA,EAAA,MAAGH,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACgB,2CAAAA,CAA4B,EAAEN;YAC/B,CAACO,wCAAAA,CAAyB,EAAEnB,QAAQoB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGrB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACgB,wCAAAA,CAAyB,EAAEnB,QAAQoB,WAAW;IACjD;IAEA,IAAI,OAAOlB,aAAa,YAAY;QAClCmB,iBAAiB,CAACH,2CAAAA,CAA4B,GAAGhB;IAGnD;IAEA,OAAOmB;AACT"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-motion",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.4.0",
|
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",
|
@@ -39,8 +39,8 @@
|
|
39
39
|
"@fluentui/scripts-cypress": "*"
|
40
40
|
},
|
41
41
|
"dependencies": {
|
42
|
-
"@fluentui/react-shared-contexts": "^9.
|
43
|
-
"@fluentui/react-utilities": "^9.18.
|
42
|
+
"@fluentui/react-shared-contexts": "^9.20.0",
|
43
|
+
"@fluentui/react-utilities": "^9.18.13",
|
44
44
|
"@swc/helpers": "^0.5.1",
|
45
45
|
"react-is": "^17.0.2"
|
46
46
|
},
|