@fluentui/react-motion-components-preview 0.0.0-nightly-20241017-0409.1 → 0.0.0-nightly-20241018-0406.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,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 Fri, 18 Oct 2024 04:11:45 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-20241018-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241018-0406.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
|
+
Fri, 18 Oct 2024 04:11:45 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-20241018-0406.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-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) 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
|
|
|
@@ -8,7 +8,18 @@ import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
|
8
8
|
// use generic names for size and overflow, handling vertical or horizontal orientation
|
|
9
9
|
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
10
10
|
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
11
|
-
//
|
|
11
|
+
// Because a height of zero does not eliminate padding,
|
|
12
|
+
// we will create keyframes to animate it to zero.
|
|
13
|
+
// TODO: consider collapsing margin, perhaps as an option.
|
|
14
|
+
const collapsedWhiteSpace = {};
|
|
15
|
+
if (orientation === 'horizontal') {
|
|
16
|
+
collapsedWhiteSpace.paddingLeft = '0';
|
|
17
|
+
collapsedWhiteSpace.paddingRight = '0';
|
|
18
|
+
} else {
|
|
19
|
+
collapsedWhiteSpace.paddingTop = '0';
|
|
20
|
+
collapsedWhiteSpace.paddingBottom = '0';
|
|
21
|
+
}
|
|
22
|
+
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
12
23
|
const enterAtoms = [
|
|
13
24
|
// Expand size (height or width)
|
|
14
25
|
{
|
|
@@ -29,6 +40,18 @@ import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
|
29
40
|
],
|
|
30
41
|
duration: enterDuration,
|
|
31
42
|
easing: enterEasing
|
|
43
|
+
},
|
|
44
|
+
// Expand whitespace (padding currently).
|
|
45
|
+
{
|
|
46
|
+
// Animate from zero values to the element's natural values (i.e. the missing other keyframe).
|
|
47
|
+
keyframes: [
|
|
48
|
+
{
|
|
49
|
+
...collapsedWhiteSpace,
|
|
50
|
+
offset: 0
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
duration: enterDuration,
|
|
54
|
+
easing: enterEasing
|
|
32
55
|
}
|
|
33
56
|
];
|
|
34
57
|
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
@@ -47,7 +70,7 @@ import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
|
47
70
|
fill: 'both'
|
|
48
71
|
});
|
|
49
72
|
}
|
|
50
|
-
// The exit transition is an array of up to
|
|
73
|
+
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
|
|
51
74
|
const exitAtoms = [];
|
|
52
75
|
// Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
|
|
53
76
|
if (animateOpacity) {
|
|
@@ -80,6 +103,19 @@ import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
|
80
103
|
easing: exitEasing,
|
|
81
104
|
fill: 'both'
|
|
82
105
|
});
|
|
106
|
+
exitAtoms.push(// Collapse whitespace (padding currently).
|
|
107
|
+
{
|
|
108
|
+
// Animate from the element's natural values (i.e. the missing other keyframe) to zero values.
|
|
109
|
+
keyframes: [
|
|
110
|
+
{
|
|
111
|
+
...collapsedWhiteSpace,
|
|
112
|
+
offset: 1
|
|
113
|
+
}
|
|
114
|
+
],
|
|
115
|
+
duration: exitDuration,
|
|
116
|
+
easing: exitEasing,
|
|
117
|
+
fill: 'forwards'
|
|
118
|
+
});
|
|
83
119
|
return {
|
|
84
120
|
enter: enterAtoms,
|
|
85
121
|
exit: exitAtoms
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 // 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.\n const collapsedWhiteSpace = {} as { [key: string]: string };\n if (orientation === 'horizontal') {\n collapsedWhiteSpace.paddingLeft = '0';\n collapsedWhiteSpace.paddingRight = '0';\n } else {\n collapsedWhiteSpace.paddingTop = '0';\n collapsedWhiteSpace.paddingBottom = '0';\n }\n\n // The enter transition is an array of up to 3 motion atoms: size, whitespace 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 // Expand whitespace (padding currently).\n {\n // Animate from zero values to the element's natural values (i.e. the missing other keyframe).\n keyframes: [{ ...collapsedWhiteSpace, offset: 0 }],\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 3 motion atoms: opacity, size and whitespace.\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 exitAtoms.push(\n // Collapse whitespace (padding currently).\n {\n // Animate from the element's natural values (i.e. the missing other keyframe) to zero values.\n keyframes: [{ ...collapsedWhiteSpace, offset: 1 }],\n duration: exitDuration,\n easing: exitEasing,\n fill: 'forwards',\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","collapsedWhiteSpace","paddingLeft","paddingRight","paddingTop","paddingBottom","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -32,7 +32,18 @@ const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.dura
|
|
|
32
32
|
// use generic names for size and overflow, handling vertical or horizontal orientation
|
|
33
33
|
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
34
34
|
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
35
|
-
//
|
|
35
|
+
// Because a height of zero does not eliminate padding,
|
|
36
|
+
// we will create keyframes to animate it to zero.
|
|
37
|
+
// TODO: consider collapsing margin, perhaps as an option.
|
|
38
|
+
const collapsedWhiteSpace = {};
|
|
39
|
+
if (orientation === 'horizontal') {
|
|
40
|
+
collapsedWhiteSpace.paddingLeft = '0';
|
|
41
|
+
collapsedWhiteSpace.paddingRight = '0';
|
|
42
|
+
} else {
|
|
43
|
+
collapsedWhiteSpace.paddingTop = '0';
|
|
44
|
+
collapsedWhiteSpace.paddingBottom = '0';
|
|
45
|
+
}
|
|
46
|
+
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
36
47
|
const enterAtoms = [
|
|
37
48
|
// Expand size (height or width)
|
|
38
49
|
{
|
|
@@ -53,6 +64,18 @@ const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.dura
|
|
|
53
64
|
],
|
|
54
65
|
duration: enterDuration,
|
|
55
66
|
easing: enterEasing
|
|
67
|
+
},
|
|
68
|
+
// Expand whitespace (padding currently).
|
|
69
|
+
{
|
|
70
|
+
// Animate from zero values to the element's natural values (i.e. the missing other keyframe).
|
|
71
|
+
keyframes: [
|
|
72
|
+
{
|
|
73
|
+
...collapsedWhiteSpace,
|
|
74
|
+
offset: 0
|
|
75
|
+
}
|
|
76
|
+
],
|
|
77
|
+
duration: enterDuration,
|
|
78
|
+
easing: enterEasing
|
|
56
79
|
}
|
|
57
80
|
];
|
|
58
81
|
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
|
|
@@ -71,7 +94,7 @@ const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.dura
|
|
|
71
94
|
fill: 'both'
|
|
72
95
|
});
|
|
73
96
|
}
|
|
74
|
-
// The exit transition is an array of up to
|
|
97
|
+
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
|
|
75
98
|
const exitAtoms = [];
|
|
76
99
|
// Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
|
|
77
100
|
if (animateOpacity) {
|
|
@@ -103,6 +126,18 @@ const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.dura
|
|
|
103
126
|
easing: exitEasing,
|
|
104
127
|
fill: 'both'
|
|
105
128
|
});
|
|
129
|
+
exitAtoms.push({
|
|
130
|
+
// Animate from the element's natural values (i.e. the missing other keyframe) to zero values.
|
|
131
|
+
keyframes: [
|
|
132
|
+
{
|
|
133
|
+
...collapsedWhiteSpace,
|
|
134
|
+
offset: 1
|
|
135
|
+
}
|
|
136
|
+
],
|
|
137
|
+
duration: exitDuration,
|
|
138
|
+
easing: exitEasing,
|
|
139
|
+
fill: 'forwards'
|
|
140
|
+
});
|
|
106
141
|
return {
|
|
107
142
|
enter: enterAtoms,
|
|
108
143
|
exit: exitAtoms
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 // 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.\n const collapsedWhiteSpace = {} as { [key: string]: string };\n if (orientation === 'horizontal') {\n collapsedWhiteSpace.paddingLeft = '0';\n collapsedWhiteSpace.paddingRight = '0';\n } else {\n collapsedWhiteSpace.paddingTop = '0';\n collapsedWhiteSpace.paddingBottom = '0';\n }\n\n // The enter transition is an array of up to 3 motion atoms: size, whitespace 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 // Expand whitespace (padding currently).\n {\n // Animate from zero values to the element's natural values (i.e. the missing other keyframe).\n keyframes: [{ ...collapsedWhiteSpace, offset: 0 }],\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 3 motion atoms: opacity, size and whitespace.\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 exitAtoms.push(\n // Collapse whitespace (padding currently).\n {\n // Animate from the element's natural values (i.e. the missing other keyframe) to zero values.\n keyframes: [{ ...collapsedWhiteSpace, offset: 1 }],\n duration: exitDuration,\n easing: exitEasing,\n fill: 'forwards',\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","collapsedWhiteSpace","paddingLeft","paddingRight","paddingTop","paddingBottom","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
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-20241018-0406.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-20241018-0406.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241018-0406.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-20241018-0406.1",
|
|
39
39
|
"@swc/helpers": "^0.5.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|