@fluentui/react-motion 9.6.5 → 9.6.7
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 +21 -2
- package/dist/index.d.ts +12 -1
- package/lib/hooks/useAnimateAtoms.js +32 -9
- package/lib/hooks/useAnimateAtoms.js.map +1 -1
- package/lib/slots/presenceMotionSlot.js +1 -1
- package/lib/slots/presenceMotionSlot.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib-commonjs/hooks/useAnimateAtoms.js +43 -12
- package/lib-commonjs/hooks/useAnimateAtoms.js.map +1 -1
- package/lib-commonjs/slots/presenceMotionSlot.js +1 -1
- package/lib-commonjs/slots/presenceMotionSlot.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 22 Jan 2025 13:55:29 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.7)
|
|
8
|
+
|
|
9
|
+
Wed, 22 Jan 2025 13:55:29 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.6..@fluentui/react-motion_v9.6.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- feat: add extended support for reduced motion ([PR #33353](https://github.com/microsoft/fluentui/pull/33353) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.6)
|
|
18
|
+
|
|
19
|
+
Wed, 08 Jan 2025 18:33:34 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.5..@fluentui/react-motion_v9.6.6)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- fix: handle case when Animation.persist() does not exist ([PR #33282](https://github.com/microsoft/fluentui/pull/33282) by seanmonahan@microsoft.com)
|
|
25
|
+
|
|
7
26
|
## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.5)
|
|
8
27
|
|
|
9
|
-
Mon, 16 Dec 2024 16:
|
|
28
|
+
Mon, 16 Dec 2024 16:26:49 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.4..@fluentui/react-motion_v9.6.5)
|
|
11
30
|
|
|
12
31
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -2,10 +2,21 @@ import * as React_2 from 'react';
|
|
|
2
2
|
import { SlotComponentType } from '@fluentui/react-utilities';
|
|
3
3
|
import { SlotRenderFunction } from '@fluentui/react-utilities';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
declare type AtomCore = {
|
|
6
6
|
keyframes: Keyframe[];
|
|
7
7
|
} & KeyframeEffectOptions;
|
|
8
8
|
|
|
9
|
+
export declare type AtomMotion = AtomCore & {
|
|
10
|
+
/**
|
|
11
|
+
* Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
|
|
12
|
+
* user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is
|
|
13
|
+
* active). If not provided, the duration of the animation will be overridden to be 1ms.
|
|
14
|
+
*
|
|
15
|
+
* Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.
|
|
16
|
+
*/
|
|
17
|
+
reducedMotion?: Partial<AtomCore>;
|
|
18
|
+
};
|
|
19
|
+
|
|
9
20
|
export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
|
|
10
21
|
element: HTMLElement;
|
|
11
22
|
} & MotionParams) => AtomMotion | AtomMotion[];
|
|
@@ -1,20 +1,41 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
export const DEFAULT_ANIMATION_OPTIONS = {
|
|
3
|
+
fill: 'forwards'
|
|
4
|
+
};
|
|
5
|
+
// A motion atom's default reduced motion is a simple 1 ms duration.
|
|
6
|
+
// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
|
|
7
|
+
const DEFAULT_REDUCED_MOTION_ATOM = {
|
|
8
|
+
duration: 1
|
|
9
|
+
};
|
|
2
10
|
function useAnimateAtomsInSupportedEnvironment() {
|
|
11
|
+
var _window_Animation;
|
|
12
|
+
// eslint-disable-next-line @nx/workspace-no-restricted-globals
|
|
13
|
+
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
|
|
3
14
|
return React.useCallback((element, value, options)=>{
|
|
4
15
|
const atoms = Array.isArray(value) ? value : [
|
|
5
16
|
value
|
|
6
17
|
];
|
|
7
18
|
const { isReducedMotion } = options;
|
|
8
19
|
const animations = atoms.map((motion)=>{
|
|
9
|
-
|
|
10
|
-
const
|
|
11
|
-
|
|
20
|
+
// Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
|
|
21
|
+
const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
|
|
22
|
+
// Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
|
|
23
|
+
const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
|
|
24
|
+
const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
|
|
25
|
+
const animationParams = {
|
|
26
|
+
...DEFAULT_ANIMATION_OPTIONS,
|
|
12
27
|
...params,
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
28
|
+
// Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
|
|
29
|
+
...isReducedMotion && reducedMotionParams
|
|
30
|
+
};
|
|
31
|
+
const animation = element.animate(animationKeyframes, animationParams);
|
|
32
|
+
if (SUPPORTS_PERSIST) {
|
|
33
|
+
animation.persist();
|
|
34
|
+
} else {
|
|
35
|
+
const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
|
|
36
|
+
var _element_style;
|
|
37
|
+
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
|
|
38
|
+
}
|
|
18
39
|
return animation;
|
|
19
40
|
});
|
|
20
41
|
return {
|
|
@@ -60,7 +81,9 @@ function useAnimateAtomsInSupportedEnvironment() {
|
|
|
60
81
|
});
|
|
61
82
|
}
|
|
62
83
|
};
|
|
63
|
-
}, [
|
|
84
|
+
}, [
|
|
85
|
+
SUPPORTS_PERSIST
|
|
86
|
+
]);
|
|
64
87
|
}
|
|
65
88
|
/**
|
|
66
89
|
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n const animationParams: KeyframeEffectOptions = {\n ...DEFAULT_ANIMATION_OPTIONS,\n ...params,\n\n // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n ...(isReducedMotion && reducedMotionParams),\n };\n\n const animation = element.animate(animationKeyframes, animationParams);\n\n if (SUPPORTS_PERSIST) {\n animation.persist();\n } else {\n const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\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 // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n\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 [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n 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","DEFAULT_ANIMATION_OPTIONS","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","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,OAAO,MAAMC,4BAAmD;IAC9DC,MAAM;AACR,EAAE;AAEF,oEAAoE;AACpE,6HAA6H;AAC7H,MAAMC,8BAAwE;IAC5EC,UAAU;AACZ;AAEA,SAASC;QAE0DC;IADjE,+DAA+D;IAC/D,MAAMC,mBAAmB,OAAOD,WAAW,eAAe,SAAOA,oBAAAA,OAAOE,SAAS,cAAhBF,wCAAAA,kBAAkBG,SAAS,CAACC,OAAO,MAAK;IAEzG,OAAOV,MAAMW,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,sGAAsG;YACtG,MAAM,EAAEC,WAAWC,eAAe,EAAEC,gBAAgBrB,2BAA2B,EAAE,GAAGsB,QAAQ,GAAGJ;YAC/F,0FAA0F;YAC1F,MAAM,EAAEC,WAAWI,yBAAyBH,eAAe,EAAE,GAAGI,qBAAqB,GAAGH;YAExF,MAAMI,qBAAiCV,kBAAkBQ,yBAAyBH;YAClF,MAAMM,kBAAyC;gBAC7C,GAAG5B,yBAAyB;gBAC5B,GAAGwB,MAAM;gBAET,sFAAsF;gBACtF,GAAIP,mBAAmBS,mBAAmB;YAC5C;YAEA,MAAMG,YAAYlB,QAAQmB,OAAO,CAACH,oBAAoBC;YAEtD,IAAItB,kBAAkB;gBACpBuB,UAAUpB,OAAO;YACnB,OAAO;gBACL,MAAMsB,iBAAiBJ,kBAAkB,CAACA,mBAAmBK,MAAM,GAAG,EAAE;oBAC1DrB;gBAAdsB,OAAOC,MAAM,CAACvB,CAAAA,iBAAAA,QAAQwB,KAAK,cAAbxB,4BAAAA,iBAAiB,CAAC,GAAGoB;YACrC;YAEA,OAAOF;QACT;QAEA,OAAO;YACL,IAAIO,cAAaC,KAAc;gBAC7BnB,WAAWoB,OAAO,CAACT,CAAAA;oBACjBA,UAAUO,YAAY,GAAGC;gBAC3B;YACF;YACAE,uBAAsBC,QAAoB,EAAEC,QAAoB;gBAC9D,YAAY;gBACZ,mFAAmF;gBACnF,wDAAwD;gBACxD,MAAMC,WAAWxB,WAAWC,GAAG,CAACU,CAAAA;oBAC9B,OAAO,IAAIc,QAAc,CAACC,SAASC;wBACjChB,UAAUW,QAAQ,GAAG,IAAMI;wBAC3Bf,UAAUY,QAAQ,GAAG,IAAMI;oBAC7B;gBACF;gBAEAF,QAAQG,GAAG,CAACJ,UACTK,IAAI,CAAC;oBACJP;gBACF,GACCQ,KAAK,CAAC;oBACLP;gBACF;YACJ;YAEAQ,QAAQ;gBACN/B,WAAWoB,OAAO,CAACT,CAAAA;oBACjBA,UAAUoB,MAAM;gBAClB;YACF;YACAC,OAAO;gBACLhC,WAAWoB,OAAO,CAACT,CAAAA;oBACjBA,UAAUqB,KAAK;gBACjB;YACF;YACAC,MAAM;gBACJjC,WAAWoB,OAAO,CAACT,CAAAA;oBACjBA,UAAUsB,IAAI;gBAChB;YACF;YACAC,QAAQ;gBACNlC,WAAWoB,OAAO,CAACT,CAAAA;oBACjBA,UAAUuB,MAAM;gBAClB;YACF;QACF;IACF,GACA;QAAC9C;KAAiB;AAEtB;AAEA;;;;;CAKC,GACD,SAAS+C;IACP,MAAM,CAACC,OAAOC,SAAS,GAAGxD,MAAMyD,QAAQ,CAAC;IACzC,MAAMC,cAAc1D,MAAM2D,MAAM;IAEhC,MAAMC,mBAAmBvD;IAEzBL,MAAM6D,SAAS,CAAC;QACd,IAAIN,QAAQ,GAAG;gBACbG;aAAAA,uBAAAA,YAAYI,OAAO,cAAnBJ,2CAAAA,0BAAAA;QACF;IACF,GAAG;QAACH;KAAM;IAEV,OAAOvD,MAAMW,WAAW,CACtB,CACEC,SACAC,OACAC;QAIA,MAAMiD,kCAAkC,OAAOnD,QAAQmB,OAAO,KAAK;QAEnE,YAAY;QACZ,wFAAwF;QACxF,IAAIgC,iCAAiC;YACnC,OAAOH,iBAAiBhD,SAASC,OAAOC;QAC1C;QAEA,OAAO;YACL0B,uBAAsBC,QAAoB;gBACxCiB,YAAYI,OAAO,GAAGrB;gBACtBe,SAASQ,CAAAA,IAAKA,IAAI;YACpB;YAEA,IAAI3B,cAAaC,KAAc;YAC7B,SAAS,GACX;YACAY;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,OAAOjD;AACT"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export function presenceMotionSlot(motion, options) {
|
|
4
|
-
// eslint-disable-next-line
|
|
4
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
5
5
|
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
|
|
6
6
|
if (process.env.NODE_ENV !== 'production') {
|
|
7
7
|
if (typeof as !== 'undefined') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line
|
|
1
|
+
{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","React","presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,wBAAwB,EACxBC,2BAA2B,QAGtB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AA+B/B,OAAO,SAASC,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,0CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACN,4BAA4B,EAAEgB;YAC/B,CAACjB,yBAAyB,EAAEK,QAAQe,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGhB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACR,yBAAyB,EAAEK,QAAQe,WAAW;IACjD;IAEA,IAAI,OAAOb,aAAa,YAAY;QAClCc,iBAAiB,CAACpB,4BAA4B,GAAGM;IAGnD;IAEA,OAAOc;AACT"}
|
package/lib/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n /**\n * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n * active). If not provided, the duration of the animation will be overridden to be 1ms.\n *\n * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n */\n reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate'> & {\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":"AAqCA,WAME"}
|
|
@@ -2,30 +2,59 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
DEFAULT_ANIMATION_OPTIONS: function() {
|
|
13
|
+
return DEFAULT_ANIMATION_OPTIONS;
|
|
14
|
+
},
|
|
15
|
+
useAnimateAtoms: function() {
|
|
8
16
|
return useAnimateAtoms;
|
|
9
17
|
}
|
|
10
18
|
});
|
|
11
19
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
20
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
21
|
+
const DEFAULT_ANIMATION_OPTIONS = {
|
|
22
|
+
fill: 'forwards'
|
|
23
|
+
};
|
|
24
|
+
// A motion atom's default reduced motion is a simple 1 ms duration.
|
|
25
|
+
// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
|
|
26
|
+
const DEFAULT_REDUCED_MOTION_ATOM = {
|
|
27
|
+
duration: 1
|
|
28
|
+
};
|
|
13
29
|
function useAnimateAtomsInSupportedEnvironment() {
|
|
30
|
+
var _window_Animation;
|
|
31
|
+
// eslint-disable-next-line @nx/workspace-no-restricted-globals
|
|
32
|
+
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
|
|
14
33
|
return _react.useCallback((element, value, options)=>{
|
|
15
34
|
const atoms = Array.isArray(value) ? value : [
|
|
16
35
|
value
|
|
17
36
|
];
|
|
18
37
|
const { isReducedMotion } = options;
|
|
19
38
|
const animations = atoms.map((motion)=>{
|
|
20
|
-
|
|
21
|
-
const
|
|
22
|
-
|
|
39
|
+
// Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
|
|
40
|
+
const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
|
|
41
|
+
// Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
|
|
42
|
+
const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
|
|
43
|
+
const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
|
|
44
|
+
const animationParams = {
|
|
45
|
+
...DEFAULT_ANIMATION_OPTIONS,
|
|
23
46
|
...params,
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
47
|
+
// Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
|
|
48
|
+
...isReducedMotion && reducedMotionParams
|
|
49
|
+
};
|
|
50
|
+
const animation = element.animate(animationKeyframes, animationParams);
|
|
51
|
+
if (SUPPORTS_PERSIST) {
|
|
52
|
+
animation.persist();
|
|
53
|
+
} else {
|
|
54
|
+
const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
|
|
55
|
+
var _element_style;
|
|
56
|
+
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
|
|
57
|
+
}
|
|
29
58
|
return animation;
|
|
30
59
|
});
|
|
31
60
|
return {
|
|
@@ -71,7 +100,9 @@ function useAnimateAtomsInSupportedEnvironment() {
|
|
|
71
100
|
});
|
|
72
101
|
}
|
|
73
102
|
};
|
|
74
|
-
}, [
|
|
103
|
+
}, [
|
|
104
|
+
SUPPORTS_PERSIST
|
|
105
|
+
]);
|
|
75
106
|
}
|
|
76
107
|
/**
|
|
77
108
|
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useAnimateAtoms.ts"],"sourcesContent":["import * as React from 'react';\nimport type { AnimationHandle, AtomMotion } from '../types';\n\nexport const DEFAULT_ANIMATION_OPTIONS: KeyframeEffectOptions = {\n fill: 'forwards',\n};\n\n// A motion atom's default reduced motion is a simple 1 ms duration.\n// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.\nconst DEFAULT_REDUCED_MOTION_ATOM: NonNullable<AtomMotion['reducedMotion']> = {\n duration: 1,\n};\n\nfunction useAnimateAtomsInSupportedEnvironment() {\n // eslint-disable-next-line @nx/workspace-no-restricted-globals\n const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof window.Animation?.prototype.persist === 'function';\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const atoms = Array.isArray(value) ? value : [value];\n const { isReducedMotion } = options;\n\n const animations = atoms.map(motion => {\n // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.\n const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;\n // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.\n const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;\n\n const animationKeyframes: Keyframe[] = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;\n const animationParams: KeyframeEffectOptions = {\n ...DEFAULT_ANIMATION_OPTIONS,\n ...params,\n\n // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled\n ...(isReducedMotion && reducedMotionParams),\n };\n\n const animation = element.animate(animationKeyframes, animationParams);\n\n if (SUPPORTS_PERSIST) {\n animation.persist();\n } else {\n const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];\n Object.assign(element.style ?? {}, resultKeyframe);\n }\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 // Heads up!\n // This could use \"Animation:finished\", but it's causing a memory leak in Chromium.\n // See: https://issues.chromium.org/u/2/issues/383016426\n const promises = animations.map(animation => {\n return new Promise<void>((resolve, reject) => {\n animation.onfinish = () => resolve();\n animation.oncancel = () => reject();\n });\n });\n\n Promise.all(promises)\n .then(() => {\n onfinish();\n })\n .catch(() => {\n oncancel();\n });\n },\n\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 [SUPPORTS_PERSIST],\n );\n}\n\n/**\n * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary\n * to ensure that the callback is not executed synchronously, which would cause the test to fail.\n *\n * @see https://github.com/microsoft/fluentui/issues/31701\n */\nfunction useAnimateAtomsInTestEnvironment() {\n const [count, setCount] = React.useState(0);\n const callbackRef = React.useRef<() => void>();\n\n const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();\n\n React.useEffect(() => {\n if (count > 0) {\n callbackRef.current?.();\n }\n }, [count]);\n\n return React.useCallback(\n (\n element: HTMLElement,\n value: AtomMotion | AtomMotion[],\n options: {\n isReducedMotion: boolean;\n },\n ): AnimationHandle => {\n const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';\n\n // Heads up!\n // If the environment supports Web Animations API, we can use the native implementation.\n if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {\n return realAnimateAtoms(element, value, options);\n }\n\n return {\n setMotionEndCallbacks(onfinish: () => void) {\n callbackRef.current = onfinish;\n setCount(v => v + 1);\n },\n\n set playbackRate(rate: number) {\n /* no-op */\n },\n 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":["DEFAULT_ANIMATION_OPTIONS","useAnimateAtoms","fill","DEFAULT_REDUCED_MOTION_ATOM","duration","useAnimateAtomsInSupportedEnvironment","window","SUPPORTS_PERSIST","Animation","prototype","persist","React","useCallback","element","value","options","atoms","Array","isArray","isReducedMotion","animations","map","motion","keyframes","motionKeyframes","reducedMotion","params","reducedMotionKeyframes","reducedMotionParams","animationKeyframes","animationParams","animation","animate","resultKeyframe","length","Object","assign","style","playbackRate","rate","forEach","setMotionEndCallbacks","onfinish","oncancel","promises","Promise","resolve","reject","all","then","catch","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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"}
|
|
@@ -12,7 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
12
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
function presenceMotionSlot(motion, options) {
|
|
15
|
-
// eslint-disable-next-line
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
16
16
|
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
|
|
17
17
|
if (process.env.NODE_ENV !== 'production') {
|
|
18
18
|
if (typeof as !== 'undefined') {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line
|
|
1
|
+
{"version":3,"sources":["../src/slots/presenceMotionSlot.tsx"],"sourcesContent":["import {\n SLOT_ELEMENT_TYPE_SYMBOL,\n SLOT_RENDER_FUNCTION_SYMBOL,\n type SlotComponentType,\n type SlotRenderFunction,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { PresenceComponentProps } from '../factories/createPresenceComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype PresenceMotionSlotRenderProps = Pick<\n PresenceComponentProps,\n 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'\n>;\n\nexport type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n PresenceComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: keyof JSX.IntrinsicElements;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;\n};\n\nexport function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: PresenceMotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<PresenceComponentProps & MotionParams>;\n defaultProps: PresenceMotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and handle unmounting logic\n const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;\n const renderFn: SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }\n > = (_, props) => (isUnmounted ? null : <>{props.children}</>);\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n PresenceMotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["presenceMotionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","isUnmounted","defaultProps","visible","unmountOnExit","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAqCgBA;;;eAAAA;;;;gCAhCT;iEACgB;AA+BhB,SAASA,mBACdC,MAAgE,EAChEC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,kGAAkG;QAClG,MAAMS,cAAc,CAACR,QAAQS,YAAY,CAACC,OAAO,IAAIV,QAAQS,YAAY,CAACE,aAAa;QACvF,MAAMC,WAEF,CAACC,GAAGC,QAAWN,cAAc,qBAAO,4CAAGM,MAAMZ,QAAQ;QAEzD;;;;;KAKC,GACD,OAAO;YACL,CAACa,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGlB,QAAQS,YAAY;QACvB,GAAGN,IAAI;QACP,CAACa,wCAAwB,CAAC,EAAEhB,QAAQiB,WAAW;IACjD;IAEA,IAAI,OAAOf,aAAa,YAAY;QAClCgB,iBAAiB,CAACH,2CAA2B,CAAC,GAAGb;IAGnD;IAEA,OAAOgB;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion",
|
|
3
|
-
"version": "9.6.
|
|
3
|
+
"version": "9.6.7",
|
|
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",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@fluentui/react-shared-contexts": "^9.21.2",
|
|
29
|
-
"@fluentui/react-utilities": "^9.18.
|
|
29
|
+
"@fluentui/react-utilities": "^9.18.20",
|
|
30
30
|
"@swc/helpers": "^0.5.1",
|
|
31
31
|
"react-is": "^17.0.2"
|
|
32
32
|
},
|