@fluentui/react-motion-components-preview 0.0.0-nightly-20241015-1519.1 → 0.0.0-nightly-20241017-0409.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
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 Thu, 17 Oct 2024 04:14:41 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-20241017-0409.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241017-0409.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.
|
|
9
|
+
Thu, 17 Oct 2024 04:14:41 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-20241017-0409.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-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-20241017-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/317675ed618ae4296db597d74008180f6efe7421) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241017-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/317675ed618ae4296db597d74008180f6efe7421) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241017-0409.1 ([commit](https://github.com/microsoft/fluentui/commit/317675ed618ae4296db597d74008180f6efe7421) by beachball)
|
|
18
|
+
|
|
19
|
+
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
|
|
20
|
+
|
|
21
|
+
Tue, 15 Oct 2024 17:17:49 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.2.0)
|
|
23
|
+
|
|
24
|
+
### Minor changes
|
|
25
|
+
|
|
26
|
+
- refactor: simplify motion component variant creation ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by robertpenner@microsoft.com)
|
|
27
|
+
- feat: add Collapse orientation parameter & horizontal implementation ([PR #32998](https://github.com/microsoft/fluentui/pull/32998) by robertpenner@microsoft.com)
|
|
28
|
+
|
|
29
|
+
### Patches
|
|
30
|
+
|
|
31
|
+
- fix: Collapse should only effect opacity when animateOpacity is true ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by robertpenner@microsoft.com)
|
|
18
32
|
|
|
19
33
|
## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
|
|
20
34
|
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
2
2
|
/** Define a presence motion for collapse/expand */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
|
|
3
|
-
|
|
4
|
-
const fromOpacity = animateOpacity ? 0 : 1;
|
|
3
|
+
const fromOpacity = 0;
|
|
5
4
|
const toOpacity = 1;
|
|
6
5
|
const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
|
|
7
6
|
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
|
|
@@ -9,50 +8,81 @@ import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
|
9
8
|
// use generic names for size and overflow, handling vertical or horizontal orientation
|
|
10
9
|
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
11
10
|
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
12
|
-
|
|
11
|
+
// The enter transition is an array of up to 2 motion atoms: size and opacity.
|
|
12
|
+
const enterAtoms = [
|
|
13
|
+
// Expand size (height or width)
|
|
13
14
|
{
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
32
|
-
];
|
|
33
|
-
const exitKeyframes = [
|
|
34
|
-
{
|
|
35
|
-
opacity: toOpacity,
|
|
36
|
-
[sizeName]: toSize,
|
|
37
|
-
[overflowName]: 'hidden'
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
opacity: fromOpacity,
|
|
41
|
-
[sizeName]: fromSize,
|
|
42
|
-
[overflowName]: 'hidden'
|
|
15
|
+
keyframes: [
|
|
16
|
+
{
|
|
17
|
+
[sizeName]: fromSize,
|
|
18
|
+
[overflowName]: 'hidden'
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
[sizeName]: toSize,
|
|
22
|
+
offset: 0.9999,
|
|
23
|
+
[overflowName]: 'hidden'
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
[sizeName]: 'unset',
|
|
27
|
+
[overflowName]: 'unset'
|
|
28
|
+
}
|
|
29
|
+
],
|
|
30
|
+
duration: enterDuration,
|
|
31
|
+
easing: enterEasing
|
|
43
32
|
}
|
|
44
33
|
];
|
|
45
|
-
|
|
46
|
-
|
|
34
|
+
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
35
|
+
if (animateOpacity) {
|
|
36
|
+
enterAtoms.push({
|
|
37
|
+
keyframes: [
|
|
38
|
+
{
|
|
39
|
+
opacity: fromOpacity
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
opacity: toOpacity
|
|
43
|
+
}
|
|
44
|
+
],
|
|
47
45
|
duration: enterDuration,
|
|
48
46
|
easing: enterEasing,
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
|
|
47
|
+
fill: 'both'
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
// The exit transition is an array of up to 2 motion atoms: opacity and size.
|
|
51
|
+
const exitAtoms = [];
|
|
52
|
+
// Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
|
|
53
|
+
if (animateOpacity) {
|
|
54
|
+
exitAtoms.push({
|
|
55
|
+
keyframes: [
|
|
56
|
+
{
|
|
57
|
+
opacity: toOpacity
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
opacity: fromOpacity
|
|
61
|
+
}
|
|
62
|
+
],
|
|
52
63
|
duration: exitDuration,
|
|
53
|
-
easing: exitEasing
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
easing: exitEasing
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
exitAtoms.push(// Collapse size (height or width)
|
|
68
|
+
{
|
|
69
|
+
keyframes: [
|
|
70
|
+
{
|
|
71
|
+
[sizeName]: toSize,
|
|
72
|
+
[overflowName]: 'hidden'
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
[sizeName]: fromSize,
|
|
76
|
+
[overflowName]: 'hidden'
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
duration: exitDuration,
|
|
80
|
+
easing: exitEasing,
|
|
81
|
+
fill: 'both'
|
|
82
|
+
});
|
|
83
|
+
return {
|
|
84
|
+
enter: enterAtoms,
|
|
85
|
+
exit: exitAtoms
|
|
56
86
|
};
|
|
57
87
|
};
|
|
58
88
|
/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\n\ntype CollapseOrientation = 'horizontal' | 'vertical';\n\ntype 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\ntype 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\n/** Define a presence motion for collapse/expand */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> =\n ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n
|
|
1
|
+
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\n\ntype CollapseOrientation = 'horizontal' | 'vertical';\n\ntype 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\ntype 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\n/** Define a presence motion for collapse/expand */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> =\n ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n const fromOpacity = 0;\n const toOpacity = 1;\n const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n // use generic names for size and overflow, handling vertical or horizontal orientation\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n\n // The enter transition is an array of up to 2 motion atoms: size and opacity.\n const enterAtoms: AtomMotion[] = [\n // Expand size (height or width)\n {\n keyframes: [\n {\n [sizeName]: fromSize,\n [overflowName]: 'hidden',\n },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration: enterDuration,\n easing: enterEasing,\n },\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration: enterDuration,\n easing: enterEasing,\n fill: 'both',\n });\n }\n\n // The exit transition is an array of up to 2 motion atoms: opacity and size.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration: exitDuration,\n easing: exitEasing,\n });\n }\n exitAtoms.push(\n // Collapse size (height or width)\n {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration: exitDuration,\n easing: exitEasing,\n fill: 'both',\n },\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\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"],"names":["motionTokens","createPresenceComponent","createCollapsePresence","enterDuration","durationNormal","enterEasing","curveEasyEaseMax","exitDuration","exitEasing","element","animateOpacity","orientation","fromOpacity","toOpacity","fromSize","measuredSize","scrollWidth","scrollHeight","toSize","sizeName","overflowName","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AA2B3F,iDAAiD,GACjD,OAAO,MAAMC,yBACX,CAAC,EACCC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,gBAAgB,EAC3CC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,MAAMC,cAAc;QACpB,MAAMC,YAAY;QAClB,MAAMC,WAAW,KAAK,yFAAyF;QAC/G,MAAMC,eAAeJ,gBAAgB,eAAeF,QAAQO,WAAW,GAAGP,QAAQQ,YAAY;QAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;QAClC,uFAAuF;QACvF,MAAMI,WAAWR,gBAAgB,eAAe,aAAa;QAC7D,MAAMS,eAAeT,gBAAgB,eAAe,cAAc;QAElE,8EAA8E;QAC9E,MAAMU,aAA2B;YAC/B,gCAAgC;YAChC;gBACEC,WAAW;oBACT;wBACE,CAACH,SAAS,EAAEL;wBACZ,CAACM,aAAa,EAAE;oBAClB;oBACA;wBAAE,CAACD,SAAS,EAAED;wBAAQK,QAAQ;wBAAQ,CAACH,aAAa,EAAE;oBAAS;oBAC/D;wBAAE,CAACD,SAAS,EAAE;wBAAS,CAACC,aAAa,EAAE;oBAAQ;iBAChD;gBACDI,UAAUrB;gBACVsB,QAAQpB;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIK,gBAAgB;YAClBW,WAAWK,IAAI,CAAC;gBACdJ,WAAW;oBAAC;wBAAEK,SAASf;oBAAY;oBAAG;wBAAEe,SAASd;oBAAU;iBAAE;gBAC7DW,UAAUrB;gBACVsB,QAAQpB;gBACRuB,MAAM;YACR;QACF;QAEA,6EAA6E;QAC7E,MAAMC,YAA0B,EAAE;QAClC,iFAAiF;QACjF,IAAInB,gBAAgB;YAClBmB,UAAUH,IAAI,CAAC;gBACbJ,WAAW;oBAAC;wBAAEK,SAASd;oBAAU;oBAAG;wBAAEc,SAASf;oBAAY;iBAAE;gBAC7DY,UAAUjB;gBACVkB,QAAQjB;YACV;QACF;QACAqB,UAAUH,IAAI,CACZ,kCAAkC;QAClC;YACEJ,WAAW;gBACT;oBAAE,CAACH,SAAS,EAAED;oBAAQ,CAACE,aAAa,EAAE;gBAAS;gBAC/C;oBAAE,CAACD,SAAS,EAAEL;oBAAU,CAACM,aAAa,EAAE;gBAAS;aAClD;YACDI,UAAUjB;YACVkB,QAAQjB;YACRoB,MAAM;QACR;QAGF,OAAO;YACLE,OAAOT;YACPU,MAAMF;QACR;IACF,EAAE;AAEJ,gFAAgF,GAChF,OAAO,MAAMG,WAAW/B,wBAAwBC,0BAA0B;AAE1E,OAAO,MAAM+B,iBAAiBhC,wBAC5BC,uBAAuB;IAAEC,eAAeH,aAAakC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,sBAAsBlC,wBACjCC,uBAAuB;IAAEC,eAAeH,aAAaoC,cAAc;AAAC,IACpE"}
|
|
@@ -24,8 +24,7 @@ _export(exports, {
|
|
|
24
24
|
});
|
|
25
25
|
const _reactmotion = require("@fluentui/react-motion");
|
|
26
26
|
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
|
|
27
|
-
|
|
28
|
-
const fromOpacity = animateOpacity ? 0 : 1;
|
|
27
|
+
const fromOpacity = 0;
|
|
29
28
|
const toOpacity = 1;
|
|
30
29
|
const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
|
|
31
30
|
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
|
|
@@ -33,50 +32,80 @@ const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.dura
|
|
|
33
32
|
// use generic names for size and overflow, handling vertical or horizontal orientation
|
|
34
33
|
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
35
34
|
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
36
|
-
|
|
35
|
+
// The enter transition is an array of up to 2 motion atoms: size and opacity.
|
|
36
|
+
const enterAtoms = [
|
|
37
|
+
// Expand size (height or width)
|
|
37
38
|
{
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
];
|
|
57
|
-
const exitKeyframes = [
|
|
58
|
-
{
|
|
59
|
-
opacity: toOpacity,
|
|
60
|
-
[sizeName]: toSize,
|
|
61
|
-
[overflowName]: 'hidden'
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
opacity: fromOpacity,
|
|
65
|
-
[sizeName]: fromSize,
|
|
66
|
-
[overflowName]: 'hidden'
|
|
39
|
+
keyframes: [
|
|
40
|
+
{
|
|
41
|
+
[sizeName]: fromSize,
|
|
42
|
+
[overflowName]: 'hidden'
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
[sizeName]: toSize,
|
|
46
|
+
offset: 0.9999,
|
|
47
|
+
[overflowName]: 'hidden'
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
[sizeName]: 'unset',
|
|
51
|
+
[overflowName]: 'unset'
|
|
52
|
+
}
|
|
53
|
+
],
|
|
54
|
+
duration: enterDuration,
|
|
55
|
+
easing: enterEasing
|
|
67
56
|
}
|
|
68
57
|
];
|
|
69
|
-
|
|
70
|
-
|
|
58
|
+
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
59
|
+
if (animateOpacity) {
|
|
60
|
+
enterAtoms.push({
|
|
61
|
+
keyframes: [
|
|
62
|
+
{
|
|
63
|
+
opacity: fromOpacity
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
opacity: toOpacity
|
|
67
|
+
}
|
|
68
|
+
],
|
|
71
69
|
duration: enterDuration,
|
|
72
70
|
easing: enterEasing,
|
|
73
|
-
|
|
74
|
-
}
|
|
75
|
-
|
|
71
|
+
fill: 'both'
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
// The exit transition is an array of up to 2 motion atoms: opacity and size.
|
|
75
|
+
const exitAtoms = [];
|
|
76
|
+
// Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
|
|
77
|
+
if (animateOpacity) {
|
|
78
|
+
exitAtoms.push({
|
|
79
|
+
keyframes: [
|
|
80
|
+
{
|
|
81
|
+
opacity: toOpacity
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
opacity: fromOpacity
|
|
85
|
+
}
|
|
86
|
+
],
|
|
76
87
|
duration: exitDuration,
|
|
77
|
-
easing: exitEasing
|
|
78
|
-
|
|
79
|
-
|
|
88
|
+
easing: exitEasing
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
exitAtoms.push({
|
|
92
|
+
keyframes: [
|
|
93
|
+
{
|
|
94
|
+
[sizeName]: toSize,
|
|
95
|
+
[overflowName]: 'hidden'
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
[sizeName]: fromSize,
|
|
99
|
+
[overflowName]: 'hidden'
|
|
100
|
+
}
|
|
101
|
+
],
|
|
102
|
+
duration: exitDuration,
|
|
103
|
+
easing: exitEasing,
|
|
104
|
+
fill: 'both'
|
|
105
|
+
});
|
|
106
|
+
return {
|
|
107
|
+
enter: enterAtoms,
|
|
108
|
+
exit: exitAtoms
|
|
80
109
|
};
|
|
81
110
|
};
|
|
82
111
|
const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\n\ntype CollapseOrientation = 'horizontal' | 'vertical';\n\ntype 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\ntype 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\n/** Define a presence motion for collapse/expand */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> =\n ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n
|
|
1
|
+
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\n\ntype CollapseOrientation = 'horizontal' | 'vertical';\n\ntype 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\ntype 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\n/** Define a presence motion for collapse/expand */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> =\n ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n const fromOpacity = 0;\n const toOpacity = 1;\n const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n // use generic names for size and overflow, handling vertical or horizontal orientation\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n\n // The enter transition is an array of up to 2 motion atoms: size and opacity.\n const enterAtoms: AtomMotion[] = [\n // Expand size (height or width)\n {\n keyframes: [\n {\n [sizeName]: fromSize,\n [overflowName]: 'hidden',\n },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration: enterDuration,\n easing: enterEasing,\n },\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration: enterDuration,\n easing: enterEasing,\n fill: 'both',\n });\n }\n\n // The exit transition is an array of up to 2 motion atoms: opacity and size.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration: exitDuration,\n easing: exitEasing,\n });\n }\n exitAtoms.push(\n // Collapse size (height or width)\n {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration: exitDuration,\n easing: exitEasing,\n fill: 'both',\n },\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\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"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","createCollapsePresence","enterDuration","motionTokens","durationNormal","enterEasing","curveEasyEaseMax","exitDuration","exitEasing","element","animateOpacity","orientation","fromOpacity","toOpacity","fromSize","measuredSize","scrollWidth","scrollHeight","toSize","sizeName","overflowName","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqGaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IA3EAC,sBAAAA;eAAAA;;;6BA5BqD;AA4B3D,MAAMA,yBACX,CAAC,EACCC,gBAAgBC,yBAAAA,CAAaC,cAAc,EAC3CC,cAAcF,yBAAAA,CAAaG,gBAAgB,EAC3CC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,MAAMC,cAAc;QACpB,MAAMC,YAAY;QAClB,MAAMC,WAAW,KAAK,yFAAyF;QAC/G,MAAMC,eAAeJ,gBAAgB,eAAeF,QAAQO,WAAW,GAAGP,QAAQQ,YAAY;QAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;QAClC,uFAAuF;QACvF,MAAMI,WAAWR,gBAAgB,eAAe,aAAa;QAC7D,MAAMS,eAAeT,gBAAgB,eAAe,cAAc;QAElE,8EAA8E;QAC9E,MAAMU,aAA2B;YAC/B,gCAAgC;YAChC;gBACEC,WAAW;oBACT;wBACE,CAACH,SAAS,EAAEL;wBACZ,CAACM,aAAa,EAAE;oBAClB;oBACA;wBAAE,CAACD,SAAS,EAAED;wBAAQK,QAAQ;wBAAQ,CAACH,aAAa,EAAE;oBAAS;oBAC/D;wBAAE,CAACD,SAAS,EAAE;wBAAS,CAACC,aAAa,EAAE;oBAAQ;iBAChD;gBACDI,UAAUtB;gBACVuB,QAAQpB;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIK,gBAAgB;YAClBW,WAAWK,IAAI,CAAC;gBACdJ,WAAW;oBAAC;wBAAEK,SAASf;oBAAY;oBAAG;wBAAEe,SAASd;oBAAU;iBAAE;gBAC7DW,UAAUtB;gBACVuB,QAAQpB;gBACRuB,MAAM;YACR;QACF;QAEA,6EAA6E;QAC7E,MAAMC,YAA0B,EAAE;QAClC,iFAAiF;QACjF,IAAInB,gBAAgB;YAClBmB,UAAUH,IAAI,CAAC;gBACbJ,WAAW;oBAAC;wBAAEK,SAASd;oBAAU;oBAAG;wBAAEc,SAASf;oBAAY;iBAAE;gBAC7DY,UAAUjB;gBACVkB,QAAQjB;YACV;QACF;QACAqB,UAAUH,IAAI,CAEZ;YACEJ,WAAW;gBACT;oBAAE,CAACH,SAAS,EAAED;oBAAQ,CAACE,aAAa,EAAE;gBAAS;gBAC/C;oBAAE,CAACD,SAAS,EAAEL;oBAAU,CAACM,aAAa,EAAE;gBAAS;aAClD;YACDI,UAAUjB;YACVkB,QAAQjB;YACRoB,MAAM;QACR;QAGF,OAAO;YACLE,OAAOT;YACPU,MAAMF;QACR;IACF;AAGK,MAAM/B,WAAWkC,IAAAA,oCAAAA,EAAwB/B;AAEzC,MAAMD,iBAAiBgC,IAAAA,oCAAAA,EAC5B/B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa8B,YAAY;AAAC;AAG7D,MAAMlC,sBAAsBiC,IAAAA,oCAAAA,EACjC/B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa+B,cAAc;AAAC"}
|
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-20241017-0409.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-20241017-0409.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241017-0409.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-20241017-0409.1",
|
|
39
39
|
"@swc/helpers": "^0.5.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|