@fluentui/react-motion-components-preview 0.0.0-nightly-20241009-0406.1 → 0.0.0-nightly-20241011-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 +7 -7
- package/dist/index.d.ts +36 -9
- package/lib/components/Collapse/Collapse.js +59 -70
- package/lib/components/Collapse/Collapse.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/types.js +11 -0
- package/lib/types.js.map +1 -0
- package/lib-commonjs/components/Collapse/Collapse.js +61 -69
- package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
- package/lib-commonjs/index.js +3 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/types.js +14 -0
- package/lib-commonjs/types.js.map +1 -0
- 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 Fri, 11 Oct 2024 04:11:01 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-20241011-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241011-0406.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.0.0-nightly-
|
|
9
|
+
Fri, 11 Oct 2024 04:11:01 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241011-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-20241011-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/595e4ccdcdd7d1c854f631905c282c10f991f9de) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241011-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/595e4ccdcdd7d1c854f631905c282c10f991f9de) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241011-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/595e4ccdcdd7d1c854f631905c282c10f991f9de) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
|
|
20
20
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,17 +1,32 @@
|
|
|
1
|
+
import type { MotionParam } from '@fluentui/react-motion';
|
|
1
2
|
import { PresenceComponent } from '@fluentui/react-motion';
|
|
3
|
+
import type { PresenceMotionFn } from '@fluentui/react-motion';
|
|
2
4
|
|
|
3
5
|
/** A React component that applies collapse/expand transitions to its children. */
|
|
4
|
-
export declare const Collapse: PresenceComponent<
|
|
5
|
-
animateOpacity?: boolean | undefined;
|
|
6
|
-
}>;
|
|
6
|
+
export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
|
|
7
7
|
|
|
8
|
-
export declare const CollapseExaggerated: PresenceComponent<
|
|
9
|
-
animateOpacity?: boolean | undefined;
|
|
10
|
-
}>;
|
|
8
|
+
export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
declare type CollapseRuntimeParams = {
|
|
11
|
+
/** Whether to animate the opacity. Defaults to `true`. */
|
|
12
|
+
animateOpacity?: boolean;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
|
|
16
|
+
|
|
17
|
+
declare type CollapseVariantParams = {
|
|
18
|
+
/** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
|
|
19
|
+
enterDuration?: number;
|
|
20
|
+
/** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value. */
|
|
21
|
+
enterEasing?: string;
|
|
22
|
+
/** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
|
|
23
|
+
exitDuration?: number;
|
|
24
|
+
/** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry. */
|
|
25
|
+
exitEasing?: string;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
/** Define a presence motion for collapse/expand */
|
|
29
|
+
export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
|
|
15
30
|
|
|
16
31
|
/** A React component that applies fade in/out transitions to its children. */
|
|
17
32
|
export declare const Fade: PresenceComponent< {}>;
|
|
@@ -20,6 +35,18 @@ export declare const FadeExaggerated: PresenceComponent< {}>;
|
|
|
20
35
|
|
|
21
36
|
export declare const FadeSnappy: PresenceComponent< {}>;
|
|
22
37
|
|
|
38
|
+
/**
|
|
39
|
+
* This is a factory function that generates a motion function, which has variant params bound into it.
|
|
40
|
+
* The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
|
|
41
|
+
* This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
|
|
42
|
+
* For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
|
|
43
|
+
* while the runtime params may give access to the target element, which is different for each instance.
|
|
44
|
+
*
|
|
45
|
+
* The generated motion function is also framework-independent, i.e. non-React.
|
|
46
|
+
* It can be turned into a React component using `createPresenceComponent`.
|
|
47
|
+
*/
|
|
48
|
+
declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
|
|
49
|
+
|
|
23
50
|
/** A React component that applies scale in/out transitions to its children. */
|
|
24
51
|
export declare const Scale: PresenceComponent< {
|
|
25
52
|
animateOpacity?: boolean | undefined;
|
|
@@ -1,71 +1,60 @@
|
|
|
1
|
-
import { motionTokens, createPresenceComponent
|
|
2
|
-
/** Define a presence motion for collapse/expand */ const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
1
|
+
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
2
|
+
/** Define a presence motion for collapse/expand */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true })=>{
|
|
3
|
+
const fromOpacity = animateOpacity ? 0 : 1;
|
|
4
|
+
const toOpacity = 1;
|
|
5
|
+
const fromHeight = '0'; // Could be a custom param in the future to start partially expanded
|
|
6
|
+
const toHeight = `${element.scrollHeight}px`;
|
|
7
|
+
const overflow = 'hidden';
|
|
8
|
+
const enterKeyframes = [
|
|
9
|
+
{
|
|
10
|
+
opacity: fromOpacity,
|
|
11
|
+
maxHeight: fromHeight,
|
|
12
|
+
overflow
|
|
13
|
+
},
|
|
14
|
+
// Transition to the height of the content, at 99.99% of the duration.
|
|
15
|
+
{
|
|
16
|
+
opacity: toOpacity,
|
|
17
|
+
maxHeight: toHeight,
|
|
18
|
+
offset: 0.9999,
|
|
19
|
+
overflow
|
|
20
|
+
},
|
|
21
|
+
// On completion, remove the maxHeight because the content might need to expand later.
|
|
22
|
+
// This extra keyframe is simpler than firing a callback on completion.
|
|
23
|
+
{
|
|
24
|
+
opacity: toOpacity,
|
|
25
|
+
maxHeight: 'unset',
|
|
26
|
+
overflow
|
|
27
|
+
}
|
|
28
|
+
];
|
|
29
|
+
const exitKeyframes = [
|
|
30
|
+
{
|
|
31
|
+
opacity: toOpacity,
|
|
32
|
+
maxHeight: toHeight,
|
|
33
|
+
overflow
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
opacity: fromOpacity,
|
|
37
|
+
maxHeight: fromHeight,
|
|
38
|
+
overflow
|
|
39
|
+
}
|
|
40
|
+
];
|
|
41
|
+
return {
|
|
42
|
+
enter: {
|
|
43
|
+
duration: enterDuration,
|
|
44
|
+
easing: enterEasing,
|
|
45
|
+
keyframes: enterKeyframes
|
|
46
|
+
},
|
|
47
|
+
exit: {
|
|
48
|
+
duration: exitDuration,
|
|
49
|
+
easing: exitEasing,
|
|
50
|
+
keyframes: exitKeyframes
|
|
51
|
+
}
|
|
52
|
+
};
|
|
54
53
|
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
});
|
|
62
|
-
export const CollapseExaggerated = createPresenceComponentVariant(Collapse, {
|
|
63
|
-
enter: {
|
|
64
|
-
duration: motionTokens.durationSlow,
|
|
65
|
-
easing: motionTokens.curveEasyEaseMax
|
|
66
|
-
},
|
|
67
|
-
exit: {
|
|
68
|
-
duration: motionTokens.durationNormal,
|
|
69
|
-
easing: motionTokens.curveEasyEaseMax
|
|
70
|
-
}
|
|
71
|
-
});
|
|
54
|
+
/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
|
|
55
|
+
export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
|
|
56
|
+
enterDuration: motionTokens.durationFast
|
|
57
|
+
}));
|
|
58
|
+
export const CollapseExaggerated = createPresenceComponent(createCollapsePresence({
|
|
59
|
+
enterDuration: motionTokens.durationSlower
|
|
60
|
+
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\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\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 }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromHeight = '0'; // Could be a custom param in the future to start partially expanded\n const toHeight = `${element.scrollHeight}px`;\n const overflow = 'hidden';\n\n const enterKeyframes = [\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n // On completion, remove the maxHeight because the content might need to expand later.\n // This extra keyframe is simpler than firing a callback on completion.\n { opacity: toOpacity, maxHeight: 'unset', overflow },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, maxHeight: toHeight, overflow },\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n ];\n\n return {\n enter: { duration: enterDuration, easing: enterEasing, keyframes: enterKeyframes },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","duration","easing","keyframes","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAsB/E,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,EAAE;QACjC,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,aAAa,KAAK,oEAAoE;QAC5F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;QAC5C,MAAMC,WAAW;QAEjB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;YACxD,sEAAsE;YACtE;gBAAEE,SAASN;gBAAWO,WAAWL;gBAAUM,QAAQ;gBAAQJ;YAAS;YACpE,sFAAsF;YACtF,uEAAuE;YACvE;gBAAEE,SAASN;gBAAWO,WAAW;gBAASH;YAAS;SACpD;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASN;gBAAWO,WAAWL;gBAAUE;YAAS;YACpD;gBAAEE,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;SACzD;QAED,OAAO;YACLM,OAAO;gBAAEC,UAAUpB;gBAAeqB,QAAQnB;gBAAaoB,WAAWR;YAAe;YACjFS,MAAM;gBAAEH,UAAUhB;gBAAciB,QAAQhB;gBAAYiB,WAAWJ;YAAc;QAC/E;IACF,EAAE;AAEJ,gFAAgF,GAChF,OAAO,MAAMM,WAAW1B,wBAAwBC,0BAA0B;AAE1E,OAAO,MAAM0B,iBAAiB3B,wBAC5BC,uBAAuB;IAAEC,eAAeH,aAAa6B,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,sBAAsB7B,wBACjCC,uBAAuB;IAAEC,eAAeH,aAAa+B,cAAc;AAAC,IACpE"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';
|
|
1
|
+
export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } 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 { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,mBAAmB,QAAQ,wBAAwB;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","createCollapsePresence","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,QAAQ,wBAAwB;AAC9G,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}
|
package/lib/types.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This is a factory function that generates a motion function, which has variant params bound into it.
|
|
3
|
+
* The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
|
|
4
|
+
* This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
|
|
5
|
+
* For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
|
|
6
|
+
* while the runtime params may give access to the target element, which is different for each instance.
|
|
7
|
+
*
|
|
8
|
+
* The generated motion function is also framework-independent, i.e. non-React.
|
|
9
|
+
* It can be turned into a React component using `createPresenceComponent`.
|
|
10
|
+
*/ // TODO: move to @fluentui/react-motion when stable
|
|
11
|
+
export { };
|
package/lib/types.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n MotionVariantParams extends Record<string, MotionParam> = {},\n MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}
|
|
@@ -17,76 +17,68 @@ _export(exports, {
|
|
|
17
17
|
},
|
|
18
18
|
CollapseSnappy: function() {
|
|
19
19
|
return CollapseSnappy;
|
|
20
|
+
},
|
|
21
|
+
createCollapsePresence: function() {
|
|
22
|
+
return createCollapsePresence;
|
|
20
23
|
}
|
|
21
24
|
});
|
|
22
25
|
const _reactmotion = require("@fluentui/react-motion");
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}
|
|
26
|
+
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true })=>{
|
|
27
|
+
const fromOpacity = animateOpacity ? 0 : 1;
|
|
28
|
+
const toOpacity = 1;
|
|
29
|
+
const fromHeight = '0'; // Could be a custom param in the future to start partially expanded
|
|
30
|
+
const toHeight = `${element.scrollHeight}px`;
|
|
31
|
+
const overflow = 'hidden';
|
|
32
|
+
const enterKeyframes = [
|
|
33
|
+
{
|
|
34
|
+
opacity: fromOpacity,
|
|
35
|
+
maxHeight: fromHeight,
|
|
36
|
+
overflow
|
|
37
|
+
},
|
|
38
|
+
// Transition to the height of the content, at 99.99% of the duration.
|
|
39
|
+
{
|
|
40
|
+
opacity: toOpacity,
|
|
41
|
+
maxHeight: toHeight,
|
|
42
|
+
offset: 0.9999,
|
|
43
|
+
overflow
|
|
44
|
+
},
|
|
45
|
+
// On completion, remove the maxHeight because the content might need to expand later.
|
|
46
|
+
// This extra keyframe is simpler than firing a callback on completion.
|
|
47
|
+
{
|
|
48
|
+
opacity: toOpacity,
|
|
49
|
+
maxHeight: 'unset',
|
|
50
|
+
overflow
|
|
51
|
+
}
|
|
52
|
+
];
|
|
53
|
+
const exitKeyframes = [
|
|
54
|
+
{
|
|
55
|
+
opacity: toOpacity,
|
|
56
|
+
maxHeight: toHeight,
|
|
57
|
+
overflow
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
opacity: fromOpacity,
|
|
61
|
+
maxHeight: fromHeight,
|
|
62
|
+
overflow
|
|
63
|
+
}
|
|
64
|
+
];
|
|
65
|
+
return {
|
|
66
|
+
enter: {
|
|
67
|
+
duration: enterDuration,
|
|
68
|
+
easing: enterEasing,
|
|
69
|
+
keyframes: enterKeyframes
|
|
70
|
+
},
|
|
71
|
+
exit: {
|
|
72
|
+
duration: exitDuration,
|
|
73
|
+
easing: exitEasing,
|
|
74
|
+
keyframes: exitKeyframes
|
|
75
|
+
}
|
|
76
|
+
};
|
|
75
77
|
};
|
|
76
|
-
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
});
|
|
83
|
-
const CollapseExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
|
|
84
|
-
enter: {
|
|
85
|
-
duration: _reactmotion.motionTokens.durationSlow,
|
|
86
|
-
easing: _reactmotion.motionTokens.curveEasyEaseMax
|
|
87
|
-
},
|
|
88
|
-
exit: {
|
|
89
|
-
duration: _reactmotion.motionTokens.durationNormal,
|
|
90
|
-
easing: _reactmotion.motionTokens.curveEasyEaseMax
|
|
91
|
-
}
|
|
92
|
-
});
|
|
78
|
+
const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
|
|
79
|
+
const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
80
|
+
enterDuration: _reactmotion.motionTokens.durationFast
|
|
81
|
+
}));
|
|
82
|
+
const CollapseExaggerated = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
83
|
+
enterDuration: _reactmotion.motionTokens.durationSlower
|
|
84
|
+
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\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\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 }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromHeight = '0'; // Could be a custom param in the future to start partially expanded\n const toHeight = `${element.scrollHeight}px`;\n const overflow = 'hidden';\n\n const enterKeyframes = [\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n // On completion, remove the maxHeight because the content might need to expand later.\n // This extra keyframe is simpler than firing a callback on completion.\n { opacity: toOpacity, maxHeight: 'unset', overflow },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, maxHeight: toHeight, overflow },\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n ];\n\n return {\n enter: { duration: enterDuration, easing: enterEasing, keyframes: enterKeyframes },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","duration","easing","keyframes","exit","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0DaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IArCAC,sBAAAA;eAAAA;;;6BAvByC;AAuB/C,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,EAAE;QACjC,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,aAAa,KAAK,oEAAoE;QAC5F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;QAC5C,MAAMC,WAAW;QAEjB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;YACxD,sEAAsE;YACtE;gBAAEE,SAASN;gBAAWO,WAAWL;gBAAUM,QAAQ;gBAAQJ;YAAS;YACpE,sFAAsF;YACtF,uEAAuE;YACvE;gBAAEE,SAASN;gBAAWO,WAAW;gBAASH;YAAS;SACpD;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASN;gBAAWO,WAAWL;gBAAUE;YAAS;YACpD;gBAAEE,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;SACzD;QAED,OAAO;YACLM,OAAO;gBAAEC,UAAUrB;gBAAesB,QAAQnB;gBAAaoB,WAAWR;YAAe;YACjFS,MAAM;gBAAEH,UAAUhB;gBAAciB,QAAQhB;gBAAYiB,WAAWJ;YAAc;QAC/E;IACF;AAGK,MAAMvB,WAAW6B,IAAAA,oCAAAA,EAAwB1B;AAEzC,MAAMD,iBAAiB2B,IAAAA,oCAAAA,EAC5B1B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAayB,YAAY;AAAC;AAG7D,MAAM7B,sBAAsB4B,IAAAA,oCAAAA,EACjC1B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa0B,cAAc;AAAC"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy"],"rangeMappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAkBC,mBAAmB;eAAnBA,6BAAmB;;IAAnCC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;IAF6BC,sBAAsB;eAAtBA,gCAAsB;;;0BAAQ;sBACpC;uBACG"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* This is a factory function that generates a motion function, which has variant params bound into it.
|
|
3
|
+
* The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
|
|
4
|
+
* This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
|
|
5
|
+
* For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
|
|
6
|
+
* while the runtime params may give access to the target element, which is different for each instance.
|
|
7
|
+
*
|
|
8
|
+
* The generated motion function is also framework-independent, i.e. non-React.
|
|
9
|
+
* It can be turned into a React component using `createPresenceComponent`.
|
|
10
|
+
*/ // TODO: move to @fluentui/react-motion when stable
|
|
11
|
+
"use strict";
|
|
12
|
+
Object.defineProperty(exports, "__esModule", {
|
|
13
|
+
value: true
|
|
14
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n MotionVariantParams extends Record<string, MotionParam> = {},\n MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,mDAAmD"}
|
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-20241011-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-20241011-0406.1",
|
|
33
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241011-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-20241011-0406.1",
|
|
39
39
|
"@swc/helpers": "^0.5.1"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|