@fluentui/react-motion-components-preview 0.0.0-nightly-20250512-0406.1 → 0.0.0-nightly-20250513-1612.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 +7 -7
- package/dist/index.d.ts +39 -22
- package/lib/components/Fade/Fade.js +12 -14
- package/lib/components/Fade/Fade.js.map +1 -1
- package/lib/components/Fade/index.js +1 -1
- package/lib/components/Fade/index.js.map +1 -1
- package/lib/components/Scale/Scale.js +52 -51
- package/lib/components/Scale/Scale.js.map +1 -1
- package/lib/components/Scale/Scale.types.js +3 -0
- package/lib/components/Scale/Scale.types.js.map +1 -0
- package/lib/components/Scale/index.js +1 -1
- package/lib/components/Scale/index.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Fade/Fade.js +13 -15
- package/lib-commonjs/components/Fade/Fade.js.map +1 -1
- package/lib-commonjs/components/Fade/index.js +3 -0
- package/lib-commonjs/components/Fade/index.js.map +1 -1
- package/lib-commonjs/components/Scale/Scale.js +54 -50
- package/lib-commonjs/components/Scale/Scale.js.map +1 -1
- package/lib-commonjs/components/Scale/Scale.types.js +5 -0
- package/lib-commonjs/components/Scale/Scale.types.js.map +1 -0
- package/lib-commonjs/components/Scale/index.js +3 -0
- package/lib-commonjs/components/Scale/index.js.map +1 -1
- package/lib-commonjs/index.js +6 -0
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
@@ -1,20 +1,20 @@
|
|
1
1
|
# Change Log - @fluentui/react-motion-components-preview
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 13 May 2025 16:28:39 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-20250513-1612.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20250513-1612.1)
|
8
8
|
|
9
|
-
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.4.3..@fluentui/react-motion-components-preview_v0.0.0-nightly-
|
9
|
+
Tue, 13 May 2025 16:28:39 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.4.3..@fluentui/react-motion-components-preview_v0.0.0-nightly-20250513-1612.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-motion to v0.0.0-nightly-
|
16
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
17
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
15
|
+
- Bump @fluentui/react-motion to v0.0.0-nightly-20250513-1612.1 ([commit](https://github.com/microsoft/fluentui/commit/c69f2e260fb39b4df13b22162473a8e86539dfa9) by beachball)
|
16
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20250513-1612.1 ([commit](https://github.com/microsoft/fluentui/commit/c69f2e260fb39b4df13b22162473a8e86539dfa9) by beachball)
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250513-1612.1 ([commit](https://github.com/microsoft/fluentui/commit/c69f2e260fb39b4df13b22162473a8e86539dfa9) by beachball)
|
18
18
|
|
19
19
|
## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.3)
|
20
20
|
|
package/dist/index.d.ts
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import type { MotionParam } from '@fluentui/react-motion';
|
2
2
|
import { PresenceComponent } from '@fluentui/react-motion';
|
3
|
+
import type { PresenceMotion } from '@fluentui/react-motion';
|
3
4
|
import type { PresenceMotionFn } from '@fluentui/react-motion';
|
4
5
|
|
5
6
|
/** A React component that applies collapse/expand transitions to its children. */
|
@@ -56,24 +57,39 @@ export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<Coll
|
|
56
57
|
/** Defines a presence motion for collapse/expand. */
|
57
58
|
export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
|
58
59
|
|
60
|
+
/** Define a presence motion for fade in/out */
|
61
|
+
export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
|
62
|
+
|
63
|
+
/** Define a presence motion for scale in/out */
|
64
|
+
export declare const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable>;
|
65
|
+
|
59
66
|
/** A React component that applies fade in/out transitions to its children. */
|
60
|
-
export declare const Fade: PresenceComponent<
|
67
|
+
export declare const Fade: PresenceComponent< {}>;
|
61
68
|
|
62
|
-
export declare const FadeRelaxed: PresenceComponent<
|
69
|
+
export declare const FadeRelaxed: PresenceComponent< {}>;
|
63
70
|
|
64
|
-
export declare const FadeSnappy: PresenceComponent<
|
71
|
+
export declare const FadeSnappy: PresenceComponent< {}>;
|
65
72
|
|
66
73
|
declare type FadeVariantParams = {
|
67
74
|
/** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
|
68
|
-
|
69
|
-
/** Easing curve for the enter transition (fade-in). Defaults to the `
|
70
|
-
|
71
|
-
/** Time (ms) for the exit transition (fade-out). Defaults to the `
|
75
|
+
enterDuration?: number;
|
76
|
+
/** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */
|
77
|
+
enterEasing?: string;
|
78
|
+
/** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
|
72
79
|
exitDuration?: number;
|
73
|
-
/** Easing curve for the exit transition (fade-out). Defaults to the `
|
80
|
+
/** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */
|
74
81
|
exitEasing?: string;
|
75
82
|
};
|
76
83
|
|
84
|
+
/**
|
85
|
+
* This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.
|
86
|
+
* The generated object defines a presence motion with `enter` and `exit` transitions.
|
87
|
+
* This motion object is declarative, i.e. data without side effects,
|
88
|
+
* and it is framework-independent, i.e. non-React.
|
89
|
+
* It can be turned into a React component using `createPresenceComponent`.
|
90
|
+
*/
|
91
|
+
declare type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotion;
|
92
|
+
|
77
93
|
/**
|
78
94
|
* This is a factory function that generates a motion function, which has variant params bound into it.
|
79
95
|
* The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
|
@@ -87,25 +103,26 @@ declare type FadeVariantParams = {
|
|
87
103
|
declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
|
88
104
|
|
89
105
|
/** A React component that applies scale in/out transitions to its children. */
|
90
|
-
export declare const Scale: PresenceComponent<
|
106
|
+
export declare const Scale: PresenceComponent<ScaleRuntimeParams_unstable>;
|
91
107
|
|
92
|
-
export declare const ScaleRelaxed: PresenceComponent<
|
108
|
+
export declare const ScaleRelaxed: PresenceComponent<ScaleRuntimeParams_unstable>;
|
93
109
|
|
94
|
-
|
110
|
+
declare type ScaleRuntimeParams_unstable = {
|
111
|
+
/** Whether to animate the opacity. Defaults to `true`. */
|
112
|
+
animateOpacity?: boolean;
|
113
|
+
};
|
114
|
+
|
115
|
+
export declare const ScaleSnappy: PresenceComponent<ScaleRuntimeParams_unstable>;
|
95
116
|
|
96
|
-
declare type
|
97
|
-
/** Time (ms) for the enter transition
|
98
|
-
|
99
|
-
/** Easing curve for the enter transition
|
100
|
-
|
101
|
-
/** Time (ms) for the exit transition
|
117
|
+
declare type ScaleVariantParams_unstable = {
|
118
|
+
/** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */
|
119
|
+
enterDuration?: number;
|
120
|
+
/** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */
|
121
|
+
enterEasing?: string;
|
122
|
+
/** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */
|
102
123
|
exitDuration?: number;
|
103
|
-
/** Easing curve for the exit transition
|
124
|
+
/** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */
|
104
125
|
exitEasing?: string;
|
105
|
-
/** The scale value to animate from. Defaults to `0.9`. */
|
106
|
-
fromScale?: number;
|
107
|
-
/** Whether to animate the opacity. Defaults to `true`. */
|
108
|
-
animateOpacity?: boolean;
|
109
126
|
};
|
110
127
|
|
111
128
|
export { }
|
@@ -1,23 +1,21 @@
|
|
1
|
-
import { motionTokens, createPresenceComponent
|
1
|
+
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
2
2
|
import { fadeAtom } from '../../atoms/fade-atom';
|
3
|
-
/** Define a presence motion for fade in/out */ export const
|
4
|
-
return {
|
3
|
+
/** Define a presence motion for fade in/out */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
|
5
4
|
enter: fadeAtom({
|
6
5
|
direction: 'enter',
|
7
|
-
duration,
|
8
|
-
easing
|
6
|
+
duration: enterDuration,
|
7
|
+
easing: enterEasing
|
9
8
|
}),
|
10
9
|
exit: fadeAtom({
|
11
10
|
direction: 'exit',
|
12
11
|
duration: exitDuration,
|
13
12
|
easing: exitEasing
|
14
13
|
})
|
15
|
-
};
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
});
|
14
|
+
});
|
15
|
+
/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
|
16
|
+
export const FadeSnappy = createPresenceComponent(createFadePresence({
|
17
|
+
enterDuration: motionTokens.durationFast
|
18
|
+
}));
|
19
|
+
export const FadeRelaxed = createPresenceComponent(createFadePresence({
|
20
|
+
enterDuration: motionTokens.durationGentle
|
21
|
+
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEase,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) => ({\n enter: fadeAtom({ direction: 'enter', duration: enterDuration, easing: enterEasing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","direction","duration","easing","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAE/E,SAASC,QAAQ,QAAQ,wBAAwB;AAgBjD,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBJ,aAAaK,cAAc,EAC3CC,cAAcN,aAAaO,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAOR,SAAS;YAAES,WAAW;YAASC,UAAUR;YAAeS,QAAQP;QAAY;QACnFQ,MAAMZ,SAAS;YAAES,WAAW;YAAQC,UAAUJ;YAAcK,QAAQJ;QAAW;IACjF,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAMM,OAAOd,wBAAwBE,sBAAsB;AAElE,OAAO,MAAMa,aAAaf,wBAAwBE,mBAAmB;IAAEC,eAAeJ,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,cAAcjB,wBAAwBE,mBAAmB;IAAEC,eAAeJ,aAAamB,cAAc;AAAC,IAAI"}
|
@@ -1 +1 @@
|
|
1
|
-
export { Fade, FadeRelaxed, FadeSnappy } from './Fade';
|
1
|
+
export { Fade, FadeRelaxed, FadeSnappy, createFadePresence } from './Fade';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"rangeMappings":"","mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,EAAEC,UAAU,QAAQ,SAAS"}
|
1
|
+
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy, createFadePresence } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy","createFadePresence"],"rangeMappings":"","mappings":"AAAA,SAASA,IAAI,EAAEC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAQ,SAAS"}
|
@@ -1,53 +1,54 @@
|
|
1
|
-
import { motionTokens, createPresenceComponent
|
2
|
-
/** Define a presence motion for scale in/out */ const
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
}
|
1
|
+
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
2
|
+
/** Define a presence motion for scale in/out */ export const createScalePresence = ({ enterDuration = motionTokens.durationGentle, enterEasing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
|
3
|
+
const fromOpacity = animateOpacity ? 0 : 1;
|
4
|
+
const toOpacity = 1;
|
5
|
+
const fromScale = 0.9; // Could be a custom param in the future
|
6
|
+
const toScale = 1;
|
7
|
+
const enterKeyframes = [
|
8
|
+
{
|
9
|
+
opacity: fromOpacity,
|
10
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
11
|
+
visibility: 'visible'
|
12
|
+
},
|
13
|
+
{
|
14
|
+
opacity: toOpacity,
|
15
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
16
|
+
}
|
17
|
+
];
|
18
|
+
const exitKeyframes = [
|
19
|
+
{
|
20
|
+
opacity: toOpacity,
|
21
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
22
|
+
},
|
23
|
+
{
|
24
|
+
opacity: fromOpacity,
|
25
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
26
|
+
visibility: 'hidden'
|
27
|
+
}
|
28
|
+
];
|
29
|
+
return {
|
30
|
+
enter: {
|
31
|
+
duration: enterDuration,
|
32
|
+
easing: enterEasing,
|
33
|
+
keyframes: enterKeyframes
|
34
|
+
},
|
35
|
+
exit: {
|
36
|
+
duration: exitDuration,
|
37
|
+
easing: exitEasing,
|
38
|
+
keyframes: exitKeyframes
|
39
|
+
}
|
40
|
+
};
|
41
41
|
};
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
42
|
+
/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(createScalePresence());
|
43
|
+
export const ScaleSnappy = createPresenceComponent(createScalePresence({
|
44
|
+
enterDuration: motionTokens.durationNormal,
|
45
|
+
enterEasing: motionTokens.curveDecelerateMax,
|
46
|
+
exitDuration: motionTokens.durationFast,
|
47
47
|
exitEasing: motionTokens.curveAccelerateMax
|
48
|
-
});
|
49
|
-
export const ScaleRelaxed =
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
48
|
+
}));
|
49
|
+
export const ScaleRelaxed = createPresenceComponent(createScalePresence({
|
50
|
+
enterDuration: motionTokens.durationSlow,
|
51
|
+
enterEasing: motionTokens.curveDecelerateMax,
|
52
|
+
exitDuration: motionTokens.durationGentle,
|
53
|
+
exitEasing: motionTokens.curveAccelerateMax
|
54
|
+
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { PresenceMotionFnCreator } from '../../types';\nimport { ScaleRuntimeParams_unstable, ScaleVariantParams_unstable } from './Scale.types';\n\n/** Define a presence motion for scale in/out */\nexport const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable> =\n ({\n enterDuration = motionTokens.durationGentle,\n enterEasing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n } = {}) =>\n ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n return {\n enter: {\n duration: enterDuration,\n easing: enterEasing,\n keyframes: enterKeyframes,\n },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\n };\n };\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(createScalePresence());\n\nexport const ScaleSnappy = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationNormal,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationFast,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n\nexport const ScaleRelaxed = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationSlow,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n"],"names":["motionTokens","createPresenceComponent","createScalePresence","enterDuration","durationGentle","enterEasing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","easing","keyframes","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAI/E,8CAA8C,GAC9C,OAAO,MAAMC,sBACX,CAAC,EACCC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,kBAAkB,EAC7CC,eAAeP,aAAaQ,cAAc,EAC1CC,aAAaT,aAAaU,kBAAkB,EAC7C,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,iBAAiB,IAAI,EAAE;QACxB,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,YAAY,KAAK,wCAAwC;QAC/D,MAAMC,UAAU;QAEhB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAU;YACnG;gBAAEF,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;SACvE;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;YACtE;gBAAEE,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAS;SACnG;QACD,OAAO;YACLE,OAAO;gBACLC,UAAUnB;gBACVoB,QAAQlB;gBACRmB,WAAWR;YACb;YACAS,MAAM;gBAAEH,UAAUf;gBAAcgB,QAAQd;gBAAYe,WAAWJ;YAAc;QAC/E;IACF,EAAE;AAEJ,6EAA6E,GAC7E,OAAO,MAAMM,QAAQzB,wBAAwBC,uBAAuB;AAEpE,OAAO,MAAMyB,cAAc1B,wBACzBC,oBAAoB;IAClBC,eAAeH,aAAaQ,cAAc;IAC1CH,aAAaL,aAAaM,kBAAkB;IAC5CC,cAAcP,aAAa4B,YAAY;IACvCnB,YAAYT,aAAaU,kBAAkB;AAC7C,IACA;AAEF,OAAO,MAAMmB,eAAe5B,wBAC1BC,oBAAoB;IAClBC,eAAeH,aAAa8B,YAAY;IACxCzB,aAAaL,aAAaM,kBAAkB;IAC5CC,cAAcP,aAAaI,cAAc;IACzCK,YAAYT,aAAaU,kBAAkB;AAC7C,IACA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.types.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleVariantParams_unstable = {\n /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleRuntimeParams_unstable = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":";;","mappings":"AAAA,gEAAgE;AAehE,gEAAgE;AAChE,WAGE"}
|
@@ -1 +1 @@
|
|
1
|
-
export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';
|
1
|
+
export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,QAAQ,UAAU"}
|
1
|
+
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","createScalePresence"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,EAAEC,mBAAmB,QAAQ,UAAU"}
|
package/lib/index.js
CHANGED
@@ -1,3 +1,3 @@
|
|
1
1
|
export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
|
2
|
-
export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
|
3
|
-
export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
|
2
|
+
export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
|
3
|
+
export { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAE/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","createFadePresence","Scale","ScaleSnappy","ScaleRelaxed","createScalePresence"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAE/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAEC,kBAAkB,QAAQ,oBAAoB;AACtF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,EAAEC,mBAAmB,QAAQ,qBAAqB"}
|
@@ -18,30 +18,28 @@ _export(exports, {
|
|
18
18
|
FadeSnappy: function() {
|
19
19
|
return FadeSnappy;
|
20
20
|
},
|
21
|
-
|
22
|
-
return
|
21
|
+
createFadePresence: function() {
|
22
|
+
return createFadePresence;
|
23
23
|
}
|
24
24
|
});
|
25
25
|
const _reactmotion = require("@fluentui/react-motion");
|
26
26
|
const _fadeatom = require("../../atoms/fade-atom");
|
27
|
-
const
|
28
|
-
return {
|
27
|
+
const createFadePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
|
29
28
|
enter: (0, _fadeatom.fadeAtom)({
|
30
29
|
direction: 'enter',
|
31
|
-
duration,
|
32
|
-
easing
|
30
|
+
duration: enterDuration,
|
31
|
+
easing: enterEasing
|
33
32
|
}),
|
34
33
|
exit: (0, _fadeatom.fadeAtom)({
|
35
34
|
direction: 'exit',
|
36
35
|
duration: exitDuration,
|
37
36
|
easing: exitEasing
|
38
37
|
})
|
39
|
-
};
|
40
|
-
|
41
|
-
const
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
});
|
38
|
+
});
|
39
|
+
const Fade = (0, _reactmotion.createPresenceComponent)(createFadePresence());
|
40
|
+
const FadeSnappy = (0, _reactmotion.createPresenceComponent)(createFadePresence({
|
41
|
+
enterDuration: _reactmotion.motionTokens.durationFast
|
42
|
+
}));
|
43
|
+
const FadeRelaxed = (0, _reactmotion.createPresenceComponent)(createFadePresence({
|
44
|
+
enterDuration: _reactmotion.motionTokens.durationGentle
|
45
|
+
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEase,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) => ({\n enter: fadeAtom({ direction: 'enter', duration: enterDuration, easing: enterEasing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["Fade","FadeRelaxed","FadeSnappy","createFadePresence","enterDuration","motionTokens","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","duration","easing","exit","createPresenceComponent","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8BaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAbAC,kBAAkB;eAAlBA;;;6BAnByC;0BAE7B;AAiBlB,MAAMA,qBAA+D,CAAC,EAC3EC,gBAAgBC,yBAAY,CAACC,cAAc,EAC3CC,cAAcF,yBAAY,CAACG,aAAa,EACxCC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASC,UAAUV;YAAeW,QAAQR;QAAY;QACnFS,MAAMJ,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQC,UAAUL;YAAcM,QAAQL;QAAW;IACjF,CAAA;AAGO,MAAMV,OAAOiB,IAAAA,oCAAuB,EAACd;AAErC,MAAMD,aAAae,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACa,YAAY;AAAC;AAEzG,MAAMjB,cAAcgB,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACc,cAAc;AAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"rangeMappings":"
|
1
|
+
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy, createFadePresence } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy","createFadePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAAEC,WAAW;eAAXA,iBAAW;;IAAEC,UAAU;eAAVA,gBAAU;;IAAEC,kBAAkB;eAAlBA,wBAAkB;;;sBAAQ"}
|
@@ -17,58 +17,62 @@ _export(exports, {
|
|
17
17
|
},
|
18
18
|
ScaleSnappy: function() {
|
19
19
|
return ScaleSnappy;
|
20
|
+
},
|
21
|
+
createScalePresence: function() {
|
22
|
+
return createScalePresence;
|
20
23
|
}
|
21
24
|
});
|
22
25
|
const _reactmotion = require("@fluentui/react-motion");
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
}
|
26
|
+
const createScalePresence = ({ enterDuration = _reactmotion.motionTokens.durationGentle, enterEasing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
|
27
|
+
const fromOpacity = animateOpacity ? 0 : 1;
|
28
|
+
const toOpacity = 1;
|
29
|
+
const fromScale = 0.9; // Could be a custom param in the future
|
30
|
+
const toScale = 1;
|
31
|
+
const enterKeyframes = [
|
32
|
+
{
|
33
|
+
opacity: fromOpacity,
|
34
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
35
|
+
visibility: 'visible'
|
36
|
+
},
|
37
|
+
{
|
38
|
+
opacity: toOpacity,
|
39
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
40
|
+
}
|
41
|
+
];
|
42
|
+
const exitKeyframes = [
|
43
|
+
{
|
44
|
+
opacity: toOpacity,
|
45
|
+
transform: `scale3d(${toScale}, ${toScale}, 1)`
|
46
|
+
},
|
47
|
+
{
|
48
|
+
opacity: fromOpacity,
|
49
|
+
transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
|
50
|
+
visibility: 'hidden'
|
51
|
+
}
|
52
|
+
];
|
53
|
+
return {
|
54
|
+
enter: {
|
55
|
+
duration: enterDuration,
|
56
|
+
easing: enterEasing,
|
57
|
+
keyframes: enterKeyframes
|
58
|
+
},
|
59
|
+
exit: {
|
60
|
+
duration: exitDuration,
|
61
|
+
easing: exitEasing,
|
62
|
+
keyframes: exitKeyframes
|
63
|
+
}
|
64
|
+
};
|
62
65
|
};
|
63
|
-
|
64
|
-
const
|
65
|
-
|
66
|
-
|
67
|
-
|
66
|
+
const Scale = (0, _reactmotion.createPresenceComponent)(createScalePresence());
|
67
|
+
const ScaleSnappy = (0, _reactmotion.createPresenceComponent)(createScalePresence({
|
68
|
+
enterDuration: _reactmotion.motionTokens.durationNormal,
|
69
|
+
enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
|
70
|
+
exitDuration: _reactmotion.motionTokens.durationFast,
|
68
71
|
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
69
|
-
});
|
70
|
-
const ScaleRelaxed = (0, _reactmotion.
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
72
|
+
}));
|
73
|
+
const ScaleRelaxed = (0, _reactmotion.createPresenceComponent)(createScalePresence({
|
74
|
+
enterDuration: _reactmotion.motionTokens.durationSlow,
|
75
|
+
enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
|
76
|
+
exitDuration: _reactmotion.motionTokens.durationGentle,
|
77
|
+
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
|
78
|
+
}));
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport { PresenceMotionFnCreator } from '../../types';\nimport { ScaleRuntimeParams_unstable, ScaleVariantParams_unstable } from './Scale.types';\n\n/** Define a presence motion for scale in/out */\nexport const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable> =\n ({\n enterDuration = motionTokens.durationGentle,\n enterEasing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n } = {}) =>\n ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n return {\n enter: {\n duration: enterDuration,\n easing: enterEasing,\n keyframes: enterKeyframes,\n },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\n };\n };\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(createScalePresence());\n\nexport const ScaleSnappy = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationNormal,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationFast,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n\nexport const ScaleRelaxed = createPresenceComponent(\n createScalePresence({\n enterDuration: motionTokens.durationSlow,\n enterEasing: motionTokens.curveDecelerateMax,\n exitDuration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMax,\n }),\n);\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","createScalePresence","enterDuration","motionTokens","durationGentle","enterEasing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","easing","keyframes","exit","createPresenceComponent","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAsCaA,KAAK;eAALA;;IAWAC,YAAY;eAAZA;;IATAC,WAAW;eAAXA;;IAnCAC,mBAAmB;eAAnBA;;;6BALyC;AAK/C,MAAMA,sBACX,CAAC,EACCC,gBAAgBC,yBAAY,CAACC,cAAc,EAC3CC,cAAcF,yBAAY,CAACG,kBAAkB,EAC7CC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC7C,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,iBAAiB,IAAI,EAAE;QACxB,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,YAAY,KAAK,wCAAwC;QAC/D,MAAMC,UAAU;QAEhB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAU;YACnG;gBAAEF,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;SACvE;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASJ;gBAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;YAAC;YACtE;gBAAEE,SAASL;gBAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;gBAAEK,YAAY;YAAS;SACnG;QACD,OAAO;YACLE,OAAO;gBACLC,UAAUpB;gBACVqB,QAAQlB;gBACRmB,WAAWR;YACb;YACAS,MAAM;gBAAEH,UAAUf;gBAAcgB,QAAQd;gBAAYe,WAAWJ;YAAc;QAC/E;IACF;AAGK,MAAMtB,QAAQ4B,IAAAA,oCAAuB,EAACzB;AAEtC,MAAMD,cAAc0B,IAAAA,oCAAuB,EAChDzB,oBAAoB;IAClBC,eAAeC,yBAAY,CAACK,cAAc;IAC1CH,aAAaF,yBAAY,CAACG,kBAAkB;IAC5CC,cAAcJ,yBAAY,CAACwB,YAAY;IACvClB,YAAYN,yBAAY,CAACO,kBAAkB;AAC7C;AAGK,MAAMX,eAAe2B,IAAAA,oCAAuB,EACjDzB,oBAAoB;IAClBC,eAAeC,yBAAY,CAACyB,YAAY;IACxCvB,aAAaF,yBAAY,CAACG,kBAAkB;IAC5CC,cAAcJ,yBAAY,CAACC,cAAc;IACzCK,YAAYN,yBAAY,CAACO,kBAAkB;AAC7C"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.types.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleVariantParams_unstable = {\n /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport type ScaleRuntimeParams_unstable = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,gEAAgE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"rangeMappings":"
|
1
|
+
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","createScalePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;IAAEC,mBAAmB;eAAnBA,0BAAmB;;;uBAAQ"}
|
package/lib-commonjs/index.js
CHANGED
@@ -44,6 +44,12 @@ _export(exports, {
|
|
44
44
|
},
|
45
45
|
createCollapsePresence: function() {
|
46
46
|
return _Collapse.createCollapsePresence;
|
47
|
+
},
|
48
|
+
createFadePresence: function() {
|
49
|
+
return _Fade.createFadePresence;
|
50
|
+
},
|
51
|
+
createScalePresence: function() {
|
52
|
+
return _Scale.createScalePresence;
|
47
53
|
}
|
48
54
|
});
|
49
55
|
const _Collapse = require("./components/Collapse");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":"
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence","createFadePresence","createScalePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,eAAe;eAAfA,yBAAe;;IADfC,cAAc;eAAdA,wBAAc;;IAOPC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAJzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;IAIgBC,kBAAkB;eAAlBA,wBAAkB;;IACfC,mBAAmB;eAAnBA,0BAAmB;;;0BAHvD;sBAE2D;uBACI"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-motion-components-preview",
|
3
|
-
"version": "0.0.0-nightly-
|
3
|
+
"version": "0.0.0-nightly-20250513-1612.1",
|
4
4
|
"description": "A preview package for Fluent UI motion components, providing a collection of components",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -19,12 +19,12 @@
|
|
19
19
|
"license": "MIT",
|
20
20
|
"devDependencies": {
|
21
21
|
"@fluentui/eslint-plugin": "*",
|
22
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
23
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
22
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20250513-1612.1",
|
23
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20250513-1612.1",
|
24
24
|
"@fluentui/scripts-api-extractor": "*"
|
25
25
|
},
|
26
26
|
"dependencies": {
|
27
|
-
"@fluentui/react-motion": "0.0.0-nightly-
|
27
|
+
"@fluentui/react-motion": "0.0.0-nightly-20250513-1612.1",
|
28
28
|
"@swc/helpers": "^0.5.1"
|
29
29
|
},
|
30
30
|
"peerDependencies": {
|