@fluentui/react-motion-components-preview 0.0.0-nightly-20241017-0409.1 → 0.0.0-nightly-20241022-0408.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 +25 -1
- package/lib/components/Collapse/Collapse.js +53 -69
- package/lib/components/Collapse/Collapse.js.map +1 -1
- package/lib/components/Collapse/collapse-atoms.js +123 -0
- package/lib/components/Collapse/collapse-atoms.js.map +1 -0
- package/lib/components/Collapse/collapse-types.js +1 -0
- package/lib/components/Collapse/collapse-types.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Collapse/Collapse.js +56 -68
- package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
- package/lib-commonjs/components/Collapse/collapse-atoms.js +149 -0
- package/lib-commonjs/components/Collapse/collapse-atoms.js.map +1 -0
- package/lib-commonjs/components/Collapse/collapse-types.js +4 -0
- package/lib-commonjs/components/Collapse/collapse-types.js.map +1 -0
- 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, 22 Oct 2024 04:13:00 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-20241022-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-
|
|
9
|
+
Tue, 22 Oct 2024 04:13:00 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.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-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
|
|
20
20
|
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,27 @@ import type { PresenceMotionFn } from '@fluentui/react-motion';
|
|
|
5
5
|
/** A React component that applies collapse/expand transitions to its children. */
|
|
6
6
|
export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
|
|
7
7
|
|
|
8
|
+
export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
|
|
9
|
+
|
|
10
|
+
declare type CollapseDelayedVariantParams = {
|
|
11
|
+
/** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */
|
|
12
|
+
enterSizeDuration?: number;
|
|
13
|
+
/** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */
|
|
14
|
+
enterOpacityDuration?: number;
|
|
15
|
+
/** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */
|
|
16
|
+
exitSizeDuration?: number;
|
|
17
|
+
/** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */
|
|
18
|
+
exitOpacityDuration?: number;
|
|
19
|
+
/** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */
|
|
20
|
+
enterDelay?: number;
|
|
21
|
+
/** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */
|
|
22
|
+
exitDelay?: number;
|
|
23
|
+
/** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value. */
|
|
24
|
+
enterEasing?: string;
|
|
25
|
+
/** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */
|
|
26
|
+
exitEasing?: string;
|
|
27
|
+
};
|
|
28
|
+
|
|
8
29
|
export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
|
|
9
30
|
|
|
10
31
|
declare type CollapseOrientation = 'horizontal' | 'vertical';
|
|
@@ -29,7 +50,10 @@ declare type CollapseVariantParams = {
|
|
|
29
50
|
exitEasing?: string;
|
|
30
51
|
};
|
|
31
52
|
|
|
32
|
-
/** Define a presence motion for collapse/expand */
|
|
53
|
+
/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
|
|
54
|
+
export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<CollapseDelayedVariantParams, CollapseRuntimeParams>;
|
|
55
|
+
|
|
56
|
+
/** Defines a presence motion for collapse/expand. */
|
|
33
57
|
export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
|
|
34
58
|
|
|
35
59
|
/** A React component that applies fade in/out transitions to its children. */
|
|
@@ -1,90 +1,67 @@
|
|
|
1
1
|
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
// use generic names for size and overflow, handling vertical or horizontal orientation
|
|
9
|
-
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
10
|
-
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
11
|
-
// The enter transition is an array of up to 2 motion atoms: size and opacity.
|
|
2
|
+
import { sizeEnterAtom, whitespaceEnterAtom, opacityEnterAtom, opacityExitAtom, sizeExitAtom, whitespaceExitAtom } from './collapse-atoms';
|
|
3
|
+
/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter
|
|
4
|
+
enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
|
|
5
|
+
exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
|
|
6
|
+
// ----- ENTER -----
|
|
7
|
+
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
12
8
|
const enterAtoms = [
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
offset: 0.9999,
|
|
23
|
-
[overflowName]: 'hidden'
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
[sizeName]: 'unset',
|
|
27
|
-
[overflowName]: 'unset'
|
|
28
|
-
}
|
|
29
|
-
],
|
|
30
|
-
duration: enterDuration,
|
|
9
|
+
sizeEnterAtom({
|
|
10
|
+
orientation,
|
|
11
|
+
duration: enterSizeDuration,
|
|
12
|
+
easing: enterEasing,
|
|
13
|
+
element
|
|
14
|
+
}),
|
|
15
|
+
whitespaceEnterAtom({
|
|
16
|
+
orientation,
|
|
17
|
+
duration: enterSizeDuration,
|
|
31
18
|
easing: enterEasing
|
|
32
|
-
}
|
|
19
|
+
})
|
|
33
20
|
];
|
|
34
21
|
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
35
22
|
if (animateOpacity) {
|
|
36
|
-
enterAtoms.push({
|
|
37
|
-
|
|
38
|
-
{
|
|
39
|
-
opacity: fromOpacity
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
opacity: toOpacity
|
|
43
|
-
}
|
|
44
|
-
],
|
|
45
|
-
duration: enterDuration,
|
|
23
|
+
enterAtoms.push(opacityEnterAtom({
|
|
24
|
+
duration: enterOpacityDuration,
|
|
46
25
|
easing: enterEasing,
|
|
47
|
-
|
|
48
|
-
});
|
|
26
|
+
delay: enterDelay
|
|
27
|
+
}));
|
|
49
28
|
}
|
|
50
|
-
//
|
|
29
|
+
// ----- EXIT -----
|
|
30
|
+
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
|
|
51
31
|
const exitAtoms = [];
|
|
52
|
-
// Fade out only if animateOpacity is
|
|
32
|
+
// Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
53
33
|
if (animateOpacity) {
|
|
54
|
-
exitAtoms.push({
|
|
55
|
-
|
|
56
|
-
{
|
|
57
|
-
opacity: toOpacity
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
opacity: fromOpacity
|
|
61
|
-
}
|
|
62
|
-
],
|
|
63
|
-
duration: exitDuration,
|
|
34
|
+
exitAtoms.push(opacityExitAtom({
|
|
35
|
+
duration: exitOpacityDuration,
|
|
64
36
|
easing: exitEasing
|
|
65
|
-
});
|
|
37
|
+
}));
|
|
66
38
|
}
|
|
67
|
-
exitAtoms.push(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
],
|
|
79
|
-
duration: exitDuration,
|
|
39
|
+
exitAtoms.push(sizeExitAtom({
|
|
40
|
+
orientation,
|
|
41
|
+
duration: exitSizeDuration,
|
|
42
|
+
easing: exitEasing,
|
|
43
|
+
element,
|
|
44
|
+
delay: exitDelay
|
|
45
|
+
}));
|
|
46
|
+
exitAtoms.push(whitespaceExitAtom({
|
|
47
|
+
orientation,
|
|
48
|
+
duration: exitSizeDuration,
|
|
80
49
|
easing: exitEasing,
|
|
81
|
-
|
|
82
|
-
});
|
|
50
|
+
delay: exitDelay
|
|
51
|
+
}));
|
|
83
52
|
return {
|
|
84
53
|
enter: enterAtoms,
|
|
85
54
|
exit: exitAtoms
|
|
86
55
|
};
|
|
87
56
|
};
|
|
57
|
+
/** Defines a presence motion for collapse/expand. */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
|
|
58
|
+
// where the delays are zero, and the size and opacity durations are equal.
|
|
59
|
+
createCollapseDelayedPresence({
|
|
60
|
+
enterSizeDuration: enterDuration,
|
|
61
|
+
enterEasing,
|
|
62
|
+
exitSizeDuration: exitDuration,
|
|
63
|
+
exitEasing
|
|
64
|
+
});
|
|
88
65
|
/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
|
|
89
66
|
export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
|
|
90
67
|
enterDuration: motionTokens.durationFast
|
|
@@ -92,3 +69,10 @@ export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
|
|
|
92
69
|
export const CollapseExaggerated = createPresenceComponent(createCollapsePresence({
|
|
93
70
|
enterDuration: motionTokens.durationSlower
|
|
94
71
|
}));
|
|
72
|
+
export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({
|
|
73
|
+
enterSizeDuration: motionTokens.durationNormal,
|
|
74
|
+
enterOpacityDuration: motionTokens.durationSlower,
|
|
75
|
+
enterDelay: motionTokens.durationNormal,
|
|
76
|
+
exitDelay: motionTokens.durationSlower,
|
|
77
|
+
enterEasing: motionTokens.curveEasyEase
|
|
78
|
+
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\
|
|
1
|
+
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\nimport type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';\nimport {\n sizeEnterAtom,\n whitespaceEnterAtom,\n opacityEnterAtom,\n opacityExitAtom,\n sizeExitAtom,\n whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n element,\n }),\n whitespaceEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push(\n opacityEnterAtom({\n duration: enterOpacityDuration,\n easing: enterEasing,\n delay: enterDelay,\n }),\n );\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(\n opacityExitAtom({\n duration: exitOpacityDuration,\n easing: exitEasing,\n }),\n );\n }\n exitAtoms.push(\n sizeExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n element,\n delay: exitDelay,\n }),\n );\n exitAtoms.push(\n whitespaceExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseExaggerated = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n createCollapseDelayedPresence({\n enterSizeDuration: motionTokens.durationNormal,\n enterOpacityDuration: motionTokens.durationSlower,\n enterDelay: motionTokens.durationNormal,\n exitDelay: motionTokens.durationSlower,\n enterEasing: motionTokens.curveEasyEase,\n }),\n);\n"],"names":["motionTokens","createPresenceComponent","sizeEnterAtom","whitespaceEnterAtom","opacityEnterAtom","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","push","delay","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SACEC,aAAa,EACbC,mBAAmB,EACnBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,kBAAkB,QACb,mBAAmB;AAE1B,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBT,aAAaU,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcZ,aAAaa,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBN,iBAAiB,EACpCO,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BpB,cAAc;gBACZmB;gBACAE,UAAUd;gBACVe,QAAQZ;gBACRO;YACF;YACAhB,oBAAoB;gBAClBkB;gBACAE,UAAUd;gBACVe,QAAQZ;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWG,IAAI,CACbrB,iBAAiB;gBACfmB,UAAUZ;gBACVa,QAAQZ;gBACRc,OAAOZ;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMa,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIP,gBAAgB;YAClBO,UAAUF,IAAI,CACZpB,gBAAgB;gBACdkB,UAAUP;gBACVQ,QAAQP;YACV;QAEJ;QACAU,UAAUF,IAAI,CACZnB,aAAa;YACXe;YACAE,UAAUR;YACVS,QAAQP;YACRE;YACAO,OAAOR;QACT;QAEFS,UAAUF,IAAI,CACZlB,mBAAmB;YACjBc;YACAE,UAAUR;YACVS,QAAQP;YACRS,OAAOR;QACT;QAGF,OAAO;YACLU,OAAON;YACPO,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaU,cAAc,EAC3CE,cAAcZ,aAAaa,gBAAgB,EAC3CmB,eAAeD,aAAa,EAC5Bd,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBsB;QACnBnB;QACAG,kBAAkBiB;QAClBf;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMgB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,sBAAsBnC,wBACjC6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BO,8BAA8B;IAC5BC,mBAAmBT,aAAaU,cAAc;IAC9CC,sBAAsBX,aAAaqC,cAAc;IACjDvB,YAAYd,aAAaU,cAAc;IACvCQ,WAAWlB,aAAaqC,cAAc;IACtCzB,aAAaZ,aAAauC,aAAa;AACzC,IACA"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
// ----- SIZE -----
|
|
2
|
+
const sizeValuesForOrientation = (orientation, element)=>{
|
|
3
|
+
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
4
|
+
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
5
|
+
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
|
|
6
|
+
const toSize = `${measuredSize}px`;
|
|
7
|
+
return {
|
|
8
|
+
sizeName,
|
|
9
|
+
overflowName,
|
|
10
|
+
toSize
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
|
|
14
|
+
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
|
|
15
|
+
return {
|
|
16
|
+
keyframes: [
|
|
17
|
+
{
|
|
18
|
+
[sizeName]: fromSize,
|
|
19
|
+
[overflowName]: 'hidden'
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
[sizeName]: toSize,
|
|
23
|
+
offset: 0.9999,
|
|
24
|
+
[overflowName]: 'hidden'
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
[sizeName]: 'unset',
|
|
28
|
+
[overflowName]: 'unset'
|
|
29
|
+
}
|
|
30
|
+
],
|
|
31
|
+
duration,
|
|
32
|
+
easing
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
|
|
36
|
+
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
|
|
37
|
+
return {
|
|
38
|
+
keyframes: [
|
|
39
|
+
{
|
|
40
|
+
[sizeName]: toSize,
|
|
41
|
+
[overflowName]: 'hidden'
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
[sizeName]: fromSize,
|
|
45
|
+
[overflowName]: 'hidden'
|
|
46
|
+
}
|
|
47
|
+
],
|
|
48
|
+
duration,
|
|
49
|
+
easing,
|
|
50
|
+
fill: 'both',
|
|
51
|
+
delay
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
// ----- WHITESPACE -----
|
|
55
|
+
// Whitespace animation currently includes padding, but could be extended to handle margin.
|
|
56
|
+
const whitespaceValuesForOrientation = (orientation)=>{
|
|
57
|
+
const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';
|
|
58
|
+
const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';
|
|
59
|
+
return {
|
|
60
|
+
paddingStart,
|
|
61
|
+
paddingEnd
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
// Because a height of zero does not eliminate padding,
|
|
65
|
+
// we will create keyframes to animate it to zero.
|
|
66
|
+
// TODO: consider collapsing margin, perhaps as an option.
|
|
67
|
+
export const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
|
|
68
|
+
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
69
|
+
return {
|
|
70
|
+
keyframes: [
|
|
71
|
+
{
|
|
72
|
+
[paddingStart]: '0',
|
|
73
|
+
[paddingEnd]: '0',
|
|
74
|
+
offset: 0
|
|
75
|
+
}
|
|
76
|
+
],
|
|
77
|
+
duration,
|
|
78
|
+
easing
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
export const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
|
|
82
|
+
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
83
|
+
return {
|
|
84
|
+
keyframes: [
|
|
85
|
+
{
|
|
86
|
+
[paddingStart]: '0',
|
|
87
|
+
[paddingEnd]: '0',
|
|
88
|
+
offset: 1
|
|
89
|
+
}
|
|
90
|
+
],
|
|
91
|
+
duration,
|
|
92
|
+
easing,
|
|
93
|
+
fill: 'forwards',
|
|
94
|
+
delay
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
// ----- OPACITY -----
|
|
98
|
+
export const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
|
|
99
|
+
keyframes: [
|
|
100
|
+
{
|
|
101
|
+
opacity: fromOpacity
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
opacity: toOpacity
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
duration,
|
|
108
|
+
easing,
|
|
109
|
+
delay,
|
|
110
|
+
fill: 'both'
|
|
111
|
+
});
|
|
112
|
+
export const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
|
|
113
|
+
keyframes: [
|
|
114
|
+
{
|
|
115
|
+
opacity: toOpacity
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
opacity: fromOpacity
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
duration,
|
|
122
|
+
easing
|
|
123
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["collapse-types.ts"],"sourcesContent":["export type CollapseOrientation = 'horizontal' | 'vertical';\n\n// TODO: reduce duplication between CollapseDelayedVariantParams and CollapseVariantParams\nexport type CollapseDelayedVariantParams = {\n /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */\n enterSizeDuration?: number;\n\n /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */\n enterOpacityDuration?: number;\n\n /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */\n exitSizeDuration?: number;\n\n /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */\n exitOpacityDuration?: number;\n\n /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */\n enterDelay?: number;\n\n /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */\n exitDelay?: number;\n\n /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value. */\n enterEasing?: string;\n\n /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */\n exitEasing?: string;\n};\n\nexport type CollapseRuntimeParams = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n\n /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n orientation?: CollapseOrientation;\n};\n\nexport type CollapseVariantParams = {\n /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAqCA,WAYE"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';
|
|
1
|
+
export { Collapse, CollapseSnappy, CollapseExaggerated, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
|
|
2
2
|
export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';
|
|
3
3
|
export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export {
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseExaggerated,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,mBAAmB,EACnBC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}
|
|
@@ -12,102 +12,83 @@ _export(exports, {
|
|
|
12
12
|
Collapse: function() {
|
|
13
13
|
return Collapse;
|
|
14
14
|
},
|
|
15
|
+
CollapseDelayed: function() {
|
|
16
|
+
return CollapseDelayed;
|
|
17
|
+
},
|
|
15
18
|
CollapseExaggerated: function() {
|
|
16
19
|
return CollapseExaggerated;
|
|
17
20
|
},
|
|
18
21
|
CollapseSnappy: function() {
|
|
19
22
|
return CollapseSnappy;
|
|
20
23
|
},
|
|
24
|
+
createCollapseDelayedPresence: function() {
|
|
25
|
+
return createCollapseDelayedPresence;
|
|
26
|
+
},
|
|
21
27
|
createCollapsePresence: function() {
|
|
22
28
|
return createCollapsePresence;
|
|
23
29
|
}
|
|
24
30
|
});
|
|
25
31
|
const _reactmotion = require("@fluentui/react-motion");
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
|
|
31
|
-
const toSize = `${measuredSize}px`;
|
|
32
|
-
// use generic names for size and overflow, handling vertical or horizontal orientation
|
|
33
|
-
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
34
|
-
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
35
|
-
// The enter transition is an array of up to 2 motion atoms: size and opacity.
|
|
32
|
+
const _collapseatoms = require("./collapse-atoms");
|
|
33
|
+
const createCollapseDelayedPresence = ({ enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
|
|
34
|
+
// ----- ENTER -----
|
|
35
|
+
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
36
36
|
const enterAtoms = [
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
offset: 0.9999,
|
|
47
|
-
[overflowName]: 'hidden'
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
[sizeName]: 'unset',
|
|
51
|
-
[overflowName]: 'unset'
|
|
52
|
-
}
|
|
53
|
-
],
|
|
54
|
-
duration: enterDuration,
|
|
37
|
+
(0, _collapseatoms.sizeEnterAtom)({
|
|
38
|
+
orientation,
|
|
39
|
+
duration: enterSizeDuration,
|
|
40
|
+
easing: enterEasing,
|
|
41
|
+
element
|
|
42
|
+
}),
|
|
43
|
+
(0, _collapseatoms.whitespaceEnterAtom)({
|
|
44
|
+
orientation,
|
|
45
|
+
duration: enterSizeDuration,
|
|
55
46
|
easing: enterEasing
|
|
56
|
-
}
|
|
47
|
+
})
|
|
57
48
|
];
|
|
58
49
|
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
59
50
|
if (animateOpacity) {
|
|
60
|
-
enterAtoms.push({
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
opacity: fromOpacity
|
|
64
|
-
},
|
|
65
|
-
{
|
|
66
|
-
opacity: toOpacity
|
|
67
|
-
}
|
|
68
|
-
],
|
|
69
|
-
duration: enterDuration,
|
|
51
|
+
enterAtoms.push((0, _collapseatoms.opacityEnterAtom)({
|
|
52
|
+
duration: enterOpacityDuration,
|
|
70
53
|
easing: enterEasing,
|
|
71
|
-
|
|
72
|
-
});
|
|
54
|
+
delay: enterDelay
|
|
55
|
+
}));
|
|
73
56
|
}
|
|
74
|
-
//
|
|
57
|
+
// ----- EXIT -----
|
|
58
|
+
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
|
|
75
59
|
const exitAtoms = [];
|
|
76
|
-
// Fade out only if animateOpacity is
|
|
60
|
+
// Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
77
61
|
if (animateOpacity) {
|
|
78
|
-
exitAtoms.push({
|
|
79
|
-
|
|
80
|
-
{
|
|
81
|
-
opacity: toOpacity
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
opacity: fromOpacity
|
|
85
|
-
}
|
|
86
|
-
],
|
|
87
|
-
duration: exitDuration,
|
|
62
|
+
exitAtoms.push((0, _collapseatoms.opacityExitAtom)({
|
|
63
|
+
duration: exitOpacityDuration,
|
|
88
64
|
easing: exitEasing
|
|
89
|
-
});
|
|
65
|
+
}));
|
|
90
66
|
}
|
|
91
|
-
exitAtoms.push({
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
[sizeName]: toSize,
|
|
95
|
-
[overflowName]: 'hidden'
|
|
96
|
-
},
|
|
97
|
-
{
|
|
98
|
-
[sizeName]: fromSize,
|
|
99
|
-
[overflowName]: 'hidden'
|
|
100
|
-
}
|
|
101
|
-
],
|
|
102
|
-
duration: exitDuration,
|
|
67
|
+
exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
|
|
68
|
+
orientation,
|
|
69
|
+
duration: exitSizeDuration,
|
|
103
70
|
easing: exitEasing,
|
|
104
|
-
|
|
105
|
-
|
|
71
|
+
element,
|
|
72
|
+
delay: exitDelay
|
|
73
|
+
}));
|
|
74
|
+
exitAtoms.push((0, _collapseatoms.whitespaceExitAtom)({
|
|
75
|
+
orientation,
|
|
76
|
+
duration: exitSizeDuration,
|
|
77
|
+
easing: exitEasing,
|
|
78
|
+
delay: exitDelay
|
|
79
|
+
}));
|
|
106
80
|
return {
|
|
107
81
|
enter: enterAtoms,
|
|
108
82
|
exit: exitAtoms
|
|
109
83
|
};
|
|
110
84
|
};
|
|
85
|
+
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// where the delays are zero, and the size and opacity durations are equal.
|
|
86
|
+
createCollapseDelayedPresence({
|
|
87
|
+
enterSizeDuration: enterDuration,
|
|
88
|
+
enterEasing,
|
|
89
|
+
exitSizeDuration: exitDuration,
|
|
90
|
+
exitEasing
|
|
91
|
+
});
|
|
111
92
|
const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
|
|
112
93
|
const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
113
94
|
enterDuration: _reactmotion.motionTokens.durationFast
|
|
@@ -115,3 +96,10 @@ const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapseP
|
|
|
115
96
|
const CollapseExaggerated = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
116
97
|
enterDuration: _reactmotion.motionTokens.durationSlower
|
|
117
98
|
}));
|
|
99
|
+
const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
|
|
100
|
+
enterSizeDuration: _reactmotion.motionTokens.durationNormal,
|
|
101
|
+
enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
|
|
102
|
+
enterDelay: _reactmotion.motionTokens.durationNormal,
|
|
103
|
+
exitDelay: _reactmotion.motionTokens.durationSlower,
|
|
104
|
+
enterEasing: _reactmotion.motionTokens.curveEasyEase
|
|
105
|
+
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\
|
|
1
|
+
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\nimport type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';\nimport {\n sizeEnterAtom,\n whitespaceEnterAtom,\n opacityEnterAtom,\n opacityExitAtom,\n sizeExitAtom,\n whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n element,\n }),\n whitespaceEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push(\n opacityEnterAtom({\n duration: enterOpacityDuration,\n easing: enterEasing,\n delay: enterDelay,\n }),\n );\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(\n opacityExitAtom({\n duration: exitOpacityDuration,\n easing: exitEasing,\n }),\n );\n }\n exitAtoms.push(\n sizeExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n element,\n delay: exitDelay,\n }),\n );\n exitAtoms.push(\n whitespaceExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseExaggerated = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n createCollapseDelayedPresence({\n enterSizeDuration: motionTokens.durationNormal,\n enterOpacityDuration: motionTokens.durationSlower,\n enterDelay: motionTokens.durationNormal,\n exitDelay: motionTokens.durationSlower,\n enterEasing: motionTokens.curveEasyEase,\n }),\n);\n"],"names":["Collapse","CollapseDelayed","CollapseExaggerated","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence","enterSizeDuration","motionTokens","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","sizeEnterAtom","duration","easing","whitespaceEnterAtom","push","opacityEnterAtom","delay","exitAtoms","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","enter","exit","enterDuration","exitDuration","createPresenceComponent","durationFast","durationSlower","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8GaA,QAAAA;eAAAA;;IAUAC,eAAAA;eAAAA;;IAJAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IAnGAC,6BAAAA;eAAAA;;IAiFAC,sBAAAA;eAAAA;;;6BA9FqD;+BAU3D;AAGA,MAAMD,gCAIX,CAAC,EAECE,oBAAoBC,yBAAAA,CAAaC,cAAc,EAC/CC,uBAAuBH,iBAAiB,EACxCI,cAAcH,yBAAAA,CAAaI,gBAAgB,EAC3CC,aAAa,CAAC,EAGdC,mBAAmBP,iBAAiB,EACpCQ,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BC,IAAAA,4BAAAA,EAAc;gBACZF;gBACAG,UAAUhB;gBACViB,QAAQb;gBACRO;YACF;YACAO,IAAAA,kCAAAA,EAAoB;gBAClBL;gBACAG,UAAUhB;gBACViB,QAAQb;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWK,IAAI,CACbC,IAAAA,+BAAAA,EAAiB;gBACfJ,UAAUb;gBACVc,QAAQb;gBACRiB,OAAOf;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMgB,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIV,gBAAgB;YAClBU,UAAUH,IAAI,CACZI,IAAAA,8BAAAA,EAAgB;gBACdP,UAAUR;gBACVS,QAAQR;YACV;QAEJ;QACAa,UAAUH,IAAI,CACZK,IAAAA,2BAAAA,EAAa;YACXX;YACAG,UAAUT;YACVU,QAAQR;YACRE;YACAU,OAAOX;QACT;QAEFY,UAAUH,IAAI,CACZM,IAAAA,iCAAAA,EAAmB;YACjBZ;YACAG,UAAUT;YACVU,QAAQR;YACRY,OAAOX;QACT;QAGF,OAAO;YACLgB,OAAOZ;YACPa,MAAML;QACR;IACF;AAGK,MAAMvB,yBAAgG,CAAC,EAC5G6B,gBAAgB3B,yBAAAA,CAAaC,cAAc,EAC3CE,cAAcH,yBAAAA,CAAaI,gBAAgB,EAC3CwB,eAAeD,aAAa,EAC5BnB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GAEJ,2EAA2E;IAC3EN,8BAA8B;QAC5BE,mBAAmB4B;QACnBxB;QACAG,kBAAkBsB;QAClBpB;IACF;AAGK,MAAMf,WAAWoC,IAAAA,oCAAAA,EAAwB/B;AAEzC,MAAMF,iBAAiBiC,IAAAA,oCAAAA,EAC5B/B,uBAAuB;IAAE6B,eAAe3B,yBAAAA,CAAa8B,YAAY;AAAC;AAG7D,MAAMnC,sBAAsBkC,IAAAA,oCAAAA,EACjC/B,uBAAuB;IAAE6B,eAAe3B,yBAAAA,CAAa+B,cAAc;AAAC;AAG/D,MAAMrC,kBAAkBmC,IAAAA,oCAAAA,EAC7BhC,8BAA8B;IAC5BE,mBAAmBC,yBAAAA,CAAaC,cAAc;IAC9CC,sBAAsBF,yBAAAA,CAAa+B,cAAc;IACjD1B,YAAYL,yBAAAA,CAAaC,cAAc;IACvCQ,WAAWT,yBAAAA,CAAa+B,cAAc;IACtC5B,aAAaH,yBAAAA,CAAagC,aAAa;AACzC"}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
// ----- SIZE -----
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
function _export(target, all) {
|
|
7
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: all[name]
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
_export(exports, {
|
|
13
|
+
opacityEnterAtom: function() {
|
|
14
|
+
return opacityEnterAtom;
|
|
15
|
+
},
|
|
16
|
+
opacityExitAtom: function() {
|
|
17
|
+
return opacityExitAtom;
|
|
18
|
+
},
|
|
19
|
+
sizeEnterAtom: function() {
|
|
20
|
+
return sizeEnterAtom;
|
|
21
|
+
},
|
|
22
|
+
sizeExitAtom: function() {
|
|
23
|
+
return sizeExitAtom;
|
|
24
|
+
},
|
|
25
|
+
whitespaceEnterAtom: function() {
|
|
26
|
+
return whitespaceEnterAtom;
|
|
27
|
+
},
|
|
28
|
+
whitespaceExitAtom: function() {
|
|
29
|
+
return whitespaceExitAtom;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const sizeValuesForOrientation = (orientation, element)=>{
|
|
33
|
+
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
34
|
+
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
35
|
+
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
|
|
36
|
+
const toSize = `${measuredSize}px`;
|
|
37
|
+
return {
|
|
38
|
+
sizeName,
|
|
39
|
+
overflowName,
|
|
40
|
+
toSize
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
|
|
44
|
+
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
|
|
45
|
+
return {
|
|
46
|
+
keyframes: [
|
|
47
|
+
{
|
|
48
|
+
[sizeName]: fromSize,
|
|
49
|
+
[overflowName]: 'hidden'
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
[sizeName]: toSize,
|
|
53
|
+
offset: 0.9999,
|
|
54
|
+
[overflowName]: 'hidden'
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
[sizeName]: 'unset',
|
|
58
|
+
[overflowName]: 'unset'
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
duration,
|
|
62
|
+
easing
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
|
|
66
|
+
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
|
|
67
|
+
return {
|
|
68
|
+
keyframes: [
|
|
69
|
+
{
|
|
70
|
+
[sizeName]: toSize,
|
|
71
|
+
[overflowName]: 'hidden'
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
[sizeName]: fromSize,
|
|
75
|
+
[overflowName]: 'hidden'
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
duration,
|
|
79
|
+
easing,
|
|
80
|
+
fill: 'both',
|
|
81
|
+
delay
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
// ----- WHITESPACE -----
|
|
85
|
+
// Whitespace animation currently includes padding, but could be extended to handle margin.
|
|
86
|
+
const whitespaceValuesForOrientation = (orientation)=>{
|
|
87
|
+
const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';
|
|
88
|
+
const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';
|
|
89
|
+
return {
|
|
90
|
+
paddingStart,
|
|
91
|
+
paddingEnd
|
|
92
|
+
};
|
|
93
|
+
};
|
|
94
|
+
const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
|
|
95
|
+
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
96
|
+
return {
|
|
97
|
+
keyframes: [
|
|
98
|
+
{
|
|
99
|
+
[paddingStart]: '0',
|
|
100
|
+
[paddingEnd]: '0',
|
|
101
|
+
offset: 0
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
duration,
|
|
105
|
+
easing
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
|
|
109
|
+
const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
|
|
110
|
+
return {
|
|
111
|
+
keyframes: [
|
|
112
|
+
{
|
|
113
|
+
[paddingStart]: '0',
|
|
114
|
+
[paddingEnd]: '0',
|
|
115
|
+
offset: 1
|
|
116
|
+
}
|
|
117
|
+
],
|
|
118
|
+
duration,
|
|
119
|
+
easing,
|
|
120
|
+
fill: 'forwards',
|
|
121
|
+
delay
|
|
122
|
+
};
|
|
123
|
+
};
|
|
124
|
+
const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
|
|
125
|
+
keyframes: [
|
|
126
|
+
{
|
|
127
|
+
opacity: fromOpacity
|
|
128
|
+
},
|
|
129
|
+
{
|
|
130
|
+
opacity: toOpacity
|
|
131
|
+
}
|
|
132
|
+
],
|
|
133
|
+
duration,
|
|
134
|
+
easing,
|
|
135
|
+
delay,
|
|
136
|
+
fill: 'both'
|
|
137
|
+
});
|
|
138
|
+
const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
|
|
139
|
+
keyframes: [
|
|
140
|
+
{
|
|
141
|
+
opacity: toOpacity
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
opacity: fromOpacity
|
|
145
|
+
}
|
|
146
|
+
],
|
|
147
|
+
duration,
|
|
148
|
+
easing
|
|
149
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["opacityEnterAtom","opacityExitAtom","sizeEnterAtom","sizeExitAtom","whitespaceEnterAtom","whitespaceExitAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","fromOpacity","toOpacity","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["collapse-types.ts"],"sourcesContent":["export type CollapseOrientation = 'horizontal' | 'vertical';\n\n// TODO: reduce duplication between CollapseDelayedVariantParams and CollapseVariantParams\nexport type CollapseDelayedVariantParams = {\n /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */\n enterSizeDuration?: number;\n\n /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */\n enterOpacityDuration?: number;\n\n /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */\n exitSizeDuration?: number;\n\n /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */\n exitOpacityDuration?: number;\n\n /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */\n enterDelay?: number;\n\n /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */\n exitDelay?: number;\n\n /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value. */\n enterEasing?: string;\n\n /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */\n exitEasing?: string;\n};\n\nexport type CollapseRuntimeParams = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n\n /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n orientation?: CollapseOrientation;\n};\n\nexport type CollapseVariantParams = {\n /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -12,6 +12,9 @@ _export(exports, {
|
|
|
12
12
|
Collapse: function() {
|
|
13
13
|
return _Collapse.Collapse;
|
|
14
14
|
},
|
|
15
|
+
CollapseDelayed: function() {
|
|
16
|
+
return _Collapse.CollapseDelayed;
|
|
17
|
+
},
|
|
15
18
|
CollapseExaggerated: function() {
|
|
16
19
|
return _Collapse.CollapseExaggerated;
|
|
17
20
|
},
|
|
@@ -36,6 +39,9 @@ _export(exports, {
|
|
|
36
39
|
ScaleSnappy: function() {
|
|
37
40
|
return _Scale.ScaleSnappy;
|
|
38
41
|
},
|
|
42
|
+
createCollapseDelayedPresence: function() {
|
|
43
|
+
return _Collapse.createCollapseDelayedPresence;
|
|
44
|
+
},
|
|
39
45
|
createCollapsePresence: function() {
|
|
40
46
|
return _Collapse.createCollapsePresence;
|
|
41
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export {
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseExaggerated,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,mBAAmB;eAAnBA,6BAAmB;;IADnBC,cAAc;eAAdA,wBAAc;;IAMPC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;IAHzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;;0BAEjB;sBAC2C;uBACG"}
|
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-20241022-0408.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",
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@fluentui/eslint-plugin": "*",
|
|
32
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
32
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20241022-0408.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241022-0408.1",
|
|
34
34
|
"@fluentui/scripts-api-extractor": "*",
|
|
35
35
|
"@fluentui/scripts-tasks": "*"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-motion": "0.0.0-nightly-
|
|
38
|
+
"@fluentui/react-motion": "0.0.0-nightly-20241022-0408.1",
|
|
39
39
|
"@swc/helpers": "^0.5.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|