@fluentui/react-motion 0.0.0-nightly-20240723-0406.1 → 0.0.0-nightly-20240725-0409.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
CHANGED
|
@@ -1,21 +1,36 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 25 Jul 2024 04:19:51 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20240725-0409.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20240725-0409.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.
|
|
9
|
+
Thu, 25 Jul 2024 04:19:51 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.4.0..@fluentui/react-motion_v0.0.0-nightly-20240725-0409.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240725-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/8994b222cb190fb190e11458ff3bb0f959b04a48) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240725-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/8994b222cb190fb190e11458ff3bb0f959b04a48) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20240725-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/8994b222cb190fb190e11458ff3bb0f959b04a48) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240725-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/8994b222cb190fb190e11458ff3bb0f959b04a48) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.4.0)
|
|
21
|
+
|
|
22
|
+
Tue, 23 Jul 2024 20:13:12 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.3.0..@fluentui/react-motion_v9.4.0)
|
|
24
|
+
|
|
25
|
+
### Minor changes
|
|
26
|
+
|
|
27
|
+
- feat: add presenceMotionSlot() API ([PR #31984](https://github.com/microsoft/fluentui/pull/31984) by olfedias@microsoft.com)
|
|
28
|
+
- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
|
|
30
|
+
|
|
31
|
+
### Patches
|
|
32
|
+
|
|
33
|
+
- fix: improve Web Animations API detection in tests ([PR #32029](https://github.com/microsoft/fluentui/pull/32029) by olfedias@microsoft.com)
|
|
19
34
|
|
|
20
35
|
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.3.0)
|
|
21
36
|
|
|
@@ -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"}
|
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20240725-0409.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",
|
|
@@ -32,15 +32,15 @@
|
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@fluentui/eslint-plugin": "*",
|
|
35
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
36
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
35
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20240725-0409.1",
|
|
36
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20240725-0409.1",
|
|
37
37
|
"@fluentui/scripts-api-extractor": "*",
|
|
38
38
|
"@fluentui/scripts-tasks": "*",
|
|
39
39
|
"@fluentui/scripts-cypress": "*"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
43
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
42
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20240725-0409.1",
|
|
43
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240725-0409.1",
|
|
44
44
|
"@swc/helpers": "^0.5.1",
|
|
45
45
|
"react-is": "^17.0.2"
|
|
46
46
|
},
|