@fluentui/react-motion-components-preview 0.0.0-nightly-20250715-0406.1 → 0.0.0-nightly-20250716-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.
Files changed (42) hide show
  1. package/CHANGELOG.md +7 -7
  2. package/dist/index.d.ts +41 -63
  3. package/lib/atoms/fade-atom.js +3 -3
  4. package/lib/atoms/fade-atom.js.map +1 -1
  5. package/lib/atoms/scale-atom.js +5 -5
  6. package/lib/atoms/scale-atom.js.map +1 -1
  7. package/lib/atoms/slide-atom.js +2 -2
  8. package/lib/atoms/slide-atom.js.map +1 -1
  9. package/lib/components/Collapse/Collapse.js +93 -77
  10. package/lib/components/Collapse/Collapse.js.map +1 -1
  11. package/lib/components/Collapse/collapse-types.js.map +1 -1
  12. package/lib/components/Collapse/index.js +1 -1
  13. package/lib/components/Collapse/index.js.map +1 -1
  14. package/lib/components/Fade/Fade.js.map +1 -1
  15. package/lib/components/Fade/fade-types.js +1 -0
  16. package/lib/components/Fade/fade-types.js.map +1 -0
  17. package/lib/components/Scale/Scale.js +6 -4
  18. package/lib/components/Scale/Scale.js.map +1 -1
  19. package/lib/components/Scale/scale-types.js +1 -0
  20. package/lib/components/Scale/scale-types.js.map +1 -0
  21. package/lib/index.js +1 -1
  22. package/lib/index.js.map +1 -1
  23. package/lib-commonjs/atoms/fade-atom.js +2 -2
  24. package/lib-commonjs/atoms/fade-atom.js.map +1 -1
  25. package/lib-commonjs/atoms/scale-atom.js +3 -3
  26. package/lib-commonjs/atoms/scale-atom.js.map +1 -1
  27. package/lib-commonjs/atoms/slide-atom.js +1 -1
  28. package/lib-commonjs/atoms/slide-atom.js.map +1 -1
  29. package/lib-commonjs/components/Collapse/Collapse.js +92 -82
  30. package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
  31. package/lib-commonjs/components/Collapse/index.js +0 -6
  32. package/lib-commonjs/components/Collapse/index.js.map +1 -1
  33. package/lib-commonjs/components/Fade/Fade.js.map +1 -1
  34. package/lib-commonjs/components/Fade/fade-types.js +4 -0
  35. package/lib-commonjs/components/Fade/fade-types.js.map +1 -0
  36. package/lib-commonjs/components/Scale/Scale.js +6 -4
  37. package/lib-commonjs/components/Scale/Scale.js.map +1 -1
  38. package/lib-commonjs/components/Scale/scale-types.js +4 -0
  39. package/lib-commonjs/components/Scale/scale-types.js.map +1 -0
  40. package/lib-commonjs/index.js +0 -6
  41. package/lib-commonjs/index.js.map +1 -1
  42. 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 Tue, 15 Jul 2025 04:20:48 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 16 Jul 2025 04:21:22 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250715-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20250715-0406.1)
7
+ ## [0.0.0-nightly-20250716-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20250716-0406.1)
8
8
 
9
- Tue, 15 Jul 2025 04:20:48 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.6.2..@fluentui/react-motion-components-preview_v0.0.0-nightly-20250715-0406.1)
9
+ Wed, 16 Jul 2025 04:21:22 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.6.2..@fluentui/react-motion-components-preview_v0.0.0-nightly-20250716-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-20250715-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/1a6ee366a07ec5a9c1067858f12158fabaeed874) by beachball)
16
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250715-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/1a6ee366a07ec5a9c1067858f12158fabaeed874) by beachball)
17
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250715-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/1a6ee366a07ec5a9c1067858f12158fabaeed874) by beachball)
15
+ - Bump @fluentui/react-motion to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
16
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250716-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/e9204512f2bc5c7074316bb554fea24b68719a78) by beachball)
18
18
 
19
19
  ## [0.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.6.2)
20
20
 
package/dist/index.d.ts CHANGED
@@ -1,69 +1,55 @@
1
- import type { MotionParam } from '@fluentui/react-motion';
2
1
  import { PresenceComponent } from '@fluentui/react-motion';
3
- import type { PresenceMotionFn } from '@fluentui/react-motion';
4
2
 
5
3
  /** A React component that applies collapse/expand transitions to its children. */
6
- export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
4
+ export declare const Collapse: PresenceComponent<CollapseParams>;
7
5
 
8
- export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
6
+ /** Common properties shared by all collapse components */
7
+ declare type CollapseBaseParams = {
8
+ /** Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value. */
9
+ easing?: string;
10
+ /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */
11
+ exitEasing?: string;
12
+ /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
13
+ orientation?: CollapseOrientation;
14
+ /** Whether to animate the opacity. Defaults to `true`. */
15
+ animateOpacity?: boolean;
16
+ };
9
17
 
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.. */
18
+ /** A React component that applies collapse/expand transitions with delayed fade to its children. */
19
+ export declare const CollapseDelayed: PresenceComponent<CollapseDelayedParams>;
20
+
21
+ declare type CollapseDelayedParams = CollapseBaseParams & {
22
+ /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */
23
+ sizeDuration?: number;
24
+ /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */
25
+ opacityDuration?: number;
26
+ /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */
16
27
  exitSizeDuration?: number;
17
- /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */
28
+ /** Time (ms) for the fade-out. Defaults to the `exitSizeDuration` param, to sync the fade-out with the collapse. */
18
29
  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`. */
30
+ /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */
31
+ delay?: number;
32
+ /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */
22
33
  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
34
  };
28
35
 
29
36
  declare type CollapseOrientation = 'horizontal' | 'vertical';
30
37
 
31
- export declare const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
32
-
33
- export declare type CollapseRuntimeParams = {
34
- /** Whether to animate the opacity. Defaults to `true`. */
35
- animateOpacity?: boolean;
36
- /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
37
- orientation?: CollapseOrientation;
38
- };
39
-
40
- export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
41
-
42
- declare type CollapseVariantParams = {
38
+ declare type CollapseParams = CollapseBaseParams & {
43
39
  /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
44
- enterDuration?: number;
45
- /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value. */
46
- enterEasing?: string;
47
- /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
40
+ duration?: number;
41
+ /** Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry. */
48
42
  exitDuration?: number;
49
- /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry. */
50
- exitEasing?: string;
51
43
  };
52
44
 
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>;
45
+ export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
55
46
 
56
- /** Defines a presence motion for collapse/expand. */
57
- export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
47
+ export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
58
48
 
59
49
  /** A React component that applies fade in/out transitions to its children. */
60
- export declare const Fade: PresenceComponent<FadeVariantParams>;
61
-
62
- export declare const FadeRelaxed: PresenceComponent<FadeVariantParams>;
50
+ export declare const Fade: PresenceComponent<FadeParams>;
63
51
 
64
- export declare const FadeSnappy: PresenceComponent<FadeVariantParams>;
65
-
66
- declare type FadeVariantParams = {
52
+ declare type FadeParams = {
67
53
  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
68
54
  duration?: number;
69
55
  /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value. */
@@ -74,26 +60,14 @@ declare type FadeVariantParams = {
74
60
  exitEasing?: string;
75
61
  };
76
62
 
77
- /**
78
- * This is a factory function that generates a motion function, which has variant params bound into it.
79
- * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
80
- * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
81
- * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
82
- * while the runtime params may give access to the target element, which is different for each instance.
83
- *
84
- * The generated motion function is also framework-independent, i.e. non-React.
85
- * It can be turned into a React component using `createPresenceComponent`.
86
- */
87
- declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
88
-
89
- /** A React component that applies scale in/out transitions to its children. */
90
- export declare const Scale: PresenceComponent<ScaleVariantParams>;
63
+ export declare const FadeRelaxed: PresenceComponent<FadeParams>;
91
64
 
92
- export declare const ScaleRelaxed: PresenceComponent<ScaleVariantParams>;
65
+ export declare const FadeSnappy: PresenceComponent<FadeParams>;
93
66
 
94
- export declare const ScaleSnappy: PresenceComponent<ScaleVariantParams>;
67
+ /** A React component that applies scale in/out transitions to its children. */
68
+ export declare const Scale: PresenceComponent<ScaleParams>;
95
69
 
96
- declare type ScaleVariantParams = {
70
+ declare type ScaleParams = {
97
71
  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */
98
72
  duration?: number;
99
73
  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */
@@ -108,6 +82,10 @@ declare type ScaleVariantParams = {
108
82
  animateOpacity?: boolean;
109
83
  };
110
84
 
85
+ export declare const ScaleRelaxed: PresenceComponent<ScaleParams>;
86
+
87
+ export declare const ScaleSnappy: PresenceComponent<ScaleParams>;
88
+
111
89
  /** A React component that applies slide in/out transitions to its children. */
112
90
  export declare const Slide: PresenceComponent<SlideParams>;
113
91
 
@@ -1,15 +1,15 @@
1
1
  import { motionTokens } from '@fluentui/react-motion';
2
2
  /**
3
- * Generates a motion atom object for a fade in or fade out.
3
+ * Generates a motion atom object for a fade-in or fade-out.
4
4
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
5
5
  * @param duration - The duration of the motion in milliseconds.
6
6
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
7
7
  * @param fromValue - The starting opacity value. Defaults to 0.
8
8
  * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
9
- */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0 })=>{
9
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromOpacity = 0 })=>{
10
10
  const keyframes = [
11
11
  {
12
- opacity: fromValue
12
+ opacity: fromOpacity
13
13
  },
14
14
  {
15
15
  opacity: 1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","fromValue","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","fromOpacity","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}
@@ -4,16 +4,16 @@ import { motionTokens } from '@fluentui/react-motion';
4
4
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
5
5
  * @param duration - The duration of the motion in milliseconds.
6
6
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
7
- * @param fromValue - The starting scale value. Defaults to 0.9.
8
- * @param toValue - The ending scale value. Defaults to 1.
7
+ * @param fromScale - The starting scale value. Defaults to 0.9.
8
+ * @param toScale - The ending scale value. Defaults to 1.
9
9
  * @returns A motion atom object with scale keyframes and the supplied duration and easing.
10
- */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0.9, toValue = 1 })=>{
10
+ */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromScale = 0.9, toScale = 1 })=>{
11
11
  const keyframes = [
12
12
  {
13
- scale: fromValue
13
+ scale: fromScale
14
14
  },
15
15
  {
16
- scale: toValue
16
+ scale: toScale
17
17
  }
18
18
  ];
19
19
  if (direction === 'exit') {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0.9,\n toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromValue }, { scale: toValue }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromScale?: number;\n toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromScale = 0.9,\n toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromScale }, { scale: toScale }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromScale","toScale","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
@@ -1,13 +1,13 @@
1
1
  import { motionTokens } from '@fluentui/react-motion';
2
2
  /**
3
- * Generates a motion atom object for a slide in or slide out.
3
+ * Generates a motion atom object for a slide-in or slide-out.
4
4
  * @param direction - The functional direction of the motion: 'enter' or 'exit'.
5
5
  * @param duration - The duration of the motion in milliseconds.
6
6
  * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
7
7
  * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.
8
8
  * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.
9
9
  * @returns A motion atom object with translate keyframes and the supplied duration and easing.
10
- */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromX = '0px', fromY = '0px' })=>{
10
+ */ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromX = '0px', fromY = '20px' })=>{
11
11
  const keyframes = [
12
12
  {
13
13
  translate: `${fromX} ${fromY}`
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide in or slide out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '0px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","slideAtom","direction","duration","easing","curveLinear","fromX","fromY","keyframes","translate","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACG;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,CAAC,EAAEH,MAAM,CAAC,EAAEC,MAAM,CAAC;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["motionTokens","slideAtom","direction","duration","easing","curveLinear","fromX","fromY","keyframes","translate","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,CAAC,EAAEH,MAAM,CAAC,EAAEC,MAAM,CAAC;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}
@@ -1,85 +1,101 @@
1
- import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
1
+ import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
2
2
  import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
3
3
  import { fadeAtom } from '../../atoms/fade-atom';
4
- /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter
5
- enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
6
- exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
7
- // ----- ENTER -----
8
- // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
9
- const enterAtoms = [
10
- sizeEnterAtom({
11
- orientation,
12
- duration: enterSizeDuration,
13
- easing: enterEasing,
14
- element
15
- }),
16
- whitespaceAtom({
17
- direction: 'enter',
18
- orientation,
19
- duration: enterSizeDuration,
20
- easing: enterEasing
21
- })
22
- ];
23
- // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
24
- if (animateOpacity) {
25
- enterAtoms.push({
26
- ...fadeAtom({
27
- direction: 'enter',
28
- duration: enterOpacityDuration,
29
- easing: enterEasing
30
- }),
31
- delay: enterDelay,
32
- fill: 'both'
33
- });
34
- }
35
- // ----- EXIT -----
36
- // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
37
- const exitAtoms = [];
38
- // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
39
- if (animateOpacity) {
40
- exitAtoms.push(fadeAtom({
41
- direction: 'exit',
42
- duration: exitOpacityDuration,
43
- easing: exitEasing
44
- }));
45
- }
46
- exitAtoms.push(sizeExitAtom({
4
+ /** Internal helper to create collapse atoms with shared logic */ function createCollapseAtoms({ element, orientation, animateOpacity, // Enter params
5
+ sizeDuration, opacityDuration = sizeDuration, easing, delay, // Exit params
6
+ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay }) {
7
+ // ----- ENTER -----
8
+ // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
9
+ const enterAtoms = [
10
+ sizeEnterAtom({
47
11
  orientation,
48
- duration: exitSizeDuration,
49
- easing: exitEasing,
50
- element,
51
- delay: exitDelay
52
- }), whitespaceAtom({
53
- direction: 'exit',
12
+ duration: sizeDuration,
13
+ easing,
14
+ element
15
+ }),
16
+ whitespaceAtom({
17
+ direction: 'enter',
54
18
  orientation,
55
- duration: exitSizeDuration,
56
- easing: exitEasing,
57
- delay: exitDelay
19
+ duration: sizeDuration,
20
+ easing
21
+ })
22
+ ];
23
+ // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
24
+ if (animateOpacity) {
25
+ enterAtoms.push({
26
+ ...fadeAtom({
27
+ direction: 'enter',
28
+ duration: opacityDuration,
29
+ easing
30
+ }),
31
+ delay,
32
+ fill: 'both'
33
+ });
34
+ }
35
+ // ----- EXIT -----
36
+ // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
37
+ const exitAtoms = [];
38
+ // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
39
+ if (animateOpacity) {
40
+ exitAtoms.push(fadeAtom({
41
+ direction: 'exit',
42
+ duration: exitOpacityDuration,
43
+ easing: exitEasing
58
44
  }));
59
- return {
60
- enter: enterAtoms,
61
- exit: exitAtoms
62
- };
45
+ }
46
+ exitAtoms.push(sizeExitAtom({
47
+ orientation,
48
+ duration: exitSizeDuration,
49
+ easing: exitEasing,
50
+ element,
51
+ delay: exitDelay
52
+ }), whitespaceAtom({
53
+ direction: 'exit',
54
+ orientation,
55
+ duration: exitSizeDuration,
56
+ easing: exitEasing,
57
+ delay: exitDelay
58
+ }));
59
+ return {
60
+ enter: enterAtoms,
61
+ exit: exitAtoms
63
62
  };
64
- /** 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,
65
- // where the delays are zero, and the size and opacity durations are equal.
66
- createCollapseDelayedPresence({
67
- enterSizeDuration: enterDuration,
68
- enterEasing,
63
+ }
64
+ /** Define a presence motion for collapse/expand */ const collapsePresenceFn = ({ element, duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
65
+ return createCollapseAtoms({
66
+ element,
67
+ orientation,
68
+ animateOpacity,
69
+ sizeDuration: duration,
70
+ opacityDuration: duration,
71
+ easing,
69
72
  exitSizeDuration: exitDuration,
70
- exitEasing
73
+ exitOpacityDuration: exitDuration,
74
+ exitEasing,
75
+ delay: 0,
76
+ exitDelay: 0
77
+ });
78
+ };
79
+ /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */ const collapseDelayedPresenceFn = ({ element, sizeDuration = motionTokens.durationNormal, opacityDuration = motionTokens.durationSlower, easing = motionTokens.curveEasyEase, delay = motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
80
+ return createCollapseAtoms({
81
+ element,
82
+ orientation,
83
+ animateOpacity,
84
+ sizeDuration,
85
+ opacityDuration,
86
+ easing,
87
+ delay,
88
+ exitSizeDuration,
89
+ exitOpacityDuration,
90
+ exitEasing,
91
+ exitDelay
71
92
  });
72
- /** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
73
- export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
74
- enterDuration: motionTokens.durationFast
75
- }));
76
- export const CollapseRelaxed = createPresenceComponent(createCollapsePresence({
77
- enterDuration: motionTokens.durationSlower
78
- }));
79
- export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({
80
- enterSizeDuration: motionTokens.durationNormal,
81
- enterOpacityDuration: motionTokens.durationSlower,
82
- enterDelay: motionTokens.durationNormal,
83
- exitDelay: motionTokens.durationSlower,
84
- enterEasing: motionTokens.curveEasyEase
85
- }));
93
+ };
94
+ /** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapsePresenceFn);
95
+ export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
96
+ duration: motionTokens.durationFast
97
+ });
98
+ export const CollapseRelaxed = createPresenceComponentVariant(Collapse, {
99
+ duration: motionTokens.durationSlower
100
+ });
101
+ /** A React component that applies collapse/expand transitions with delayed fade to its children. */ export const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/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 { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\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({ orientation, duration: enterSizeDuration, easing: enterEasing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: enterSizeDuration, easing: enterEasing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: enterOpacityDuration, easing: enterEasing }),\n delay: enterDelay,\n fill: 'both',\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(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\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 CollapseRelaxed = 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","sizeExitAtom","whitespaceAtom","fadeAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","direction","push","delay","fill","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SAASC,aAAa,EAAEC,YAAY,EAAEC,cAAc,QAAQ,mBAAmB;AAC/E,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBP,aAAaQ,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcV,aAAaW,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/BlB,cAAc;gBAAEiB;gBAAaE,UAAUd;gBAAmBe,QAAQZ;gBAAaO;YAAQ;YACvFb,eAAe;gBAAEmB,WAAW;gBAASJ;gBAAaE,UAAUd;gBAAmBe,QAAQZ;YAAY;SACpG;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWI,IAAI,CAAC;gBACd,GAAGnB,SAAS;oBAAEkB,WAAW;oBAASF,UAAUZ;oBAAsBa,QAAQZ;gBAAY,EAAE;gBACxFe,OAAOb;gBACPc,MAAM;YACR;QACF;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMC,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIT,gBAAgB;YAClBS,UAAUH,IAAI,CAACnB,SAAS;gBAAEkB,WAAW;gBAAQF,UAAUP;gBAAqBQ,QAAQP;YAAW;QACjG;QACAY,UAAUH,IAAI,CACZrB,aAAa;YAAEgB;YAAaE,UAAUR;YAAkBS,QAAQP;YAAYE;YAASQ,OAAOT;QAAU,IACtGZ,eAAe;YACbmB,WAAW;YACXJ;YACAE,UAAUR;YACVS,QAAQP;YACRU,OAAOT;QACT;QAGF,OAAO;YACLY,OAAOR;YACPS,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaQ,cAAc,EAC3CE,cAAcV,aAAaW,gBAAgB,EAC3CqB,eAAeD,aAAa,EAC5BhB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBwB;QACnBrB;QACAG,kBAAkBmB;QAClBjB;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMkB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,kBAAkBnC,wBAC7B6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BK,8BAA8B;IAC5BC,mBAAmBP,aAAaQ,cAAc;IAC9CC,sBAAsBT,aAAaqC,cAAc;IACjDzB,YAAYZ,aAAaQ,cAAc;IACvCQ,WAAWhB,aAAaqC,cAAc;IACtC3B,aAAaV,aAAauC,aAAa;AACzC,IACA"}
1
+ {"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n\n // Enter params\n sizeDuration,\n opacityDuration = sizeDuration,\n easing,\n delay,\n\n // Exit params\n exitSizeDuration,\n exitOpacityDuration = exitSizeDuration,\n exitEasing,\n exitDelay,\n}: {\n element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\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({ orientation, duration: sizeDuration, easing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n delay,\n fill: 'both',\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(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\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/** Define a presence motion for collapse/expand */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n element,\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEaseMax,\n exitDuration = duration,\n exitEasing = easing,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration: duration,\n opacityDuration: duration,\n easing,\n exitSizeDuration: exitDuration,\n exitOpacityDuration: exitDuration,\n exitEasing,\n delay: 0,\n exitDelay: 0,\n });\n};\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n element,\n sizeDuration = motionTokens.durationNormal,\n opacityDuration = motionTokens.durationSlower,\n easing = motionTokens.curveEasyEase,\n delay = motionTokens.durationNormal,\n exitSizeDuration = sizeDuration,\n exitOpacityDuration = opacityDuration,\n exitEasing = easing,\n exitDelay = motionTokens.durationSlower,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration,\n opacityDuration,\n easing,\n delay,\n exitSizeDuration,\n exitOpacityDuration,\n exitEasing,\n exitDelay,\n });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","sizeEnterAtom","sizeExitAtom","whitespaceAtom","fadeAtom","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","duration","direction","push","fill","exitAtoms","enter","exit","collapsePresenceFn","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","CollapseDelayed"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QAEzB,yBAAyB;AAEhC,SAASC,aAAa,EAAEC,YAAY,EAAEC,cAAc,QAAQ,mBAAmB;AAC/E,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BhB,cAAc;YAAEM;YAAaW,UAAUT;YAAcE;YAAQL;QAAQ;QACrEH,eAAe;YAAEgB,WAAW;YAASZ;YAAaW,UAAUT;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWG,IAAI,CAAC;YACd,GAAGhB,SAAS;gBAAEe,WAAW;gBAASD,UAAUR;gBAAiBC;YAAO,EAAE;YACtEC;YACAS,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAId,gBAAgB;QAClBc,UAAUF,IAAI,CAAChB,SAAS;YAAEe,WAAW;YAAQD,UAAUJ;YAAqBH,QAAQI;QAAW;IACjG;IAEAO,UAAUF,IAAI,CACZlB,aAAa;QAAEK;QAAaW,UAAUL;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGb,eAAe;QACbgB,WAAW;QACXZ;QACAW,UAAUL;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLO,OAAON;QACPO,MAAMF;IACR;AACF;AAEA,iDAAiD,GACjD,MAAMG,qBAAuD,CAAC,EAC5DnB,OAAO,EACPY,WAAWpB,aAAa4B,cAAc,EACtCf,SAASb,aAAa6B,gBAAgB,EACtCC,eAAeV,QAAQ,EACvBH,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcS;QACdR,iBAAiBQ;QACjBP;QACAE,kBAAkBe;QAClBd,qBAAqBc;QACrBb;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA,gHAAgH,GAChH,MAAMa,4BAAqE,CAAC,EAC1EvB,OAAO,EACPG,eAAeX,aAAa4B,cAAc,EAC1ChB,kBAAkBZ,aAAagC,cAAc,EAC7CnB,SAASb,aAAaiC,aAAa,EACnCnB,QAAQd,aAAa4B,cAAc,EACnCb,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYlB,aAAagC,cAAc,EACvCtB,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMgB,WAAWjC,wBAAwB0B,oBAAoB;AAEpE,OAAO,MAAMQ,iBAAiBjC,+BAA+BgC,UAAU;IACrEd,UAAUpB,aAAaoC,YAAY;AACrC,GAAG;AAEH,OAAO,MAAMC,kBAAkBnC,+BAA+BgC,UAAU;IACtEd,UAAUpB,aAAagC,cAAc;AACvC,GAAG;AAEH,kGAAkG,GAClG,OAAO,MAAMM,kBAAkBrC,wBAAwB8B,2BAA2B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/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"}
1
+ {"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["export type CollapseOrientation = 'horizontal' | 'vertical';\n\n/** Common properties shared by all collapse components */\ntype CollapseBaseParams = {\n /** Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value. */\n easing?: string;\n\n /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */\n exitEasing?: string;\n\n /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n orientation?: CollapseOrientation;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n\nexport type CollapseParams = CollapseBaseParams & {\n /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */\n duration?: number;\n\n /** Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n};\n\nexport type CollapseDelayedParams = CollapseBaseParams & {\n /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */\n sizeDuration?: number;\n\n /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */\n opacityDuration?: number;\n\n /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */\n exitSizeDuration?: number;\n\n /** Time (ms) for the fade-out. 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 delay?: number;\n\n /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */\n exitDelay?: number;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAyBA,WAkBE"}
@@ -1 +1 @@
1
- export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy, createCollapseDelayedPresence, createCollapsePresence } from './Collapse';
1
+ export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseDelayed,\n CollapseRelaxed,\n CollapseSnappy,\n createCollapseDelayedPresence,\n createCollapsePresence,\n} from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":"","mappings":"AAAA,SACEA,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,6BAA6B,EAC7BC,sBAAsB,QACjB,aAAa"}
1
+ {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"rangeMappings":"","mappings":"AAAA,SAASA,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEC,cAAc,QAAQ,aAAa"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeVariantParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","fadePresenceFn","duration","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAgBjD,8CAA8C,GAC9C,OAAO,MAAMC,iBAAsD,CAAC,EAClEC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,eAAeJ,QAAQ,EACvBK,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOR,SAAS;YAAES,WAAW;YAASP;YAAUE;QAAO;QACvDM,MAAMV,SAAS;YAAES,WAAW;YAAQP,UAAUI;YAAcF,QAAQG;QAAW;IACjF;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOb,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMW,aAAab,+BAA+BY,MAAM;IAAET,UAAUL,aAAagB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcf,+BAA+BY,MAAM;IAAET,UAAUL,aAAakB,cAAc;AAAC,GAAG"}
1
+ {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","fadePresenceFn","duration","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","direction","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AAGjD,8CAA8C,GAC9C,OAAO,MAAMC,iBAA+C,CAAC,EAC3DC,WAAWL,aAAaM,cAAc,EACtCC,SAASP,aAAaQ,aAAa,EACnCC,eAAeJ,QAAQ,EACvBK,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOR,SAAS;YAAES,WAAW;YAASP;YAAUE;QAAO;QACvDM,MAAMV,SAAS;YAAES,WAAW;YAAQP,UAAUI;YAAcF,QAAQG;QAAW;IACjF;AACF,EAAE;AAEF,4EAA4E,GAC5E,OAAO,MAAMI,OAAOb,wBAAwBG,gBAAgB;AAE5D,OAAO,MAAMW,aAAab,+BAA+BY,MAAM;IAAET,UAAUL,aAAagB,YAAY;AAAC,GAAG;AAExG,OAAO,MAAMC,cAAcf,+BAA+BY,MAAM;IAAET,UAAUL,aAAakB,cAAc;AAAC,GAAG"}
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Fade/fade-types.ts"],"sourcesContent":["export type FadeParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry. */\n exitEasing?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAYE"}
@@ -7,7 +7,7 @@ import { scaleAtom } from '../../atoms/scale-atom';
7
7
  direction: 'enter',
8
8
  duration,
9
9
  easing,
10
- fromValue: fromScale
10
+ fromScale: fromScale
11
11
  })
12
12
  ];
13
13
  const exitAtoms = [
@@ -15,7 +15,7 @@ import { scaleAtom } from '../../atoms/scale-atom';
15
15
  direction: 'exit',
16
16
  duration: exitDuration,
17
17
  easing: exitEasing,
18
- fromValue: fromScale
18
+ fromScale: fromScale
19
19
  })
20
20
  ];
21
21
  // Only add fade atoms if animateOpacity is true.
@@ -38,8 +38,10 @@ import { scaleAtom } from '../../atoms/scale-atom';
38
38
  };
39
39
  /** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scalePresenceFn);
40
40
  export const ScaleSnappy = createPresenceComponentVariant(Scale, {
41
- duration: motionTokens.durationNormal
41
+ duration: motionTokens.durationNormal,
42
+ exitDuration: motionTokens.durationFast
42
43
  });
43
44
  export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
44
- duration: motionTokens.durationSlow
45
+ duration: motionTokens.durationSlow,
46
+ exitDuration: motionTokens.durationGentle
45
47
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromValue: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","fromValue","exitAtoms","push","enter","exit","Scale","ScaleSnappy","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAsBnD,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQU,WAAWJ;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBf,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRM,WAAWJ;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACjB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEW,UAAUC,IAAI,CAACjB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAOL;QACPM,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQtB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMmB,cAActB,+BAA+BqB,OAAO;IAC/DjB,UAAUN,aAAaW,cAAc;AACvC,GAAG;AAEH,OAAO,MAAMc,eAAevB,+BAA+BqB,OAAO;IAChEjB,UAAUN,aAAa0B,YAAY;AACrC,GAAG"}
1
+ {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromScale: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRE,WAAWA;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/DhB,UAAUN,aAAaW,cAAc;IACrCD,cAAcV,aAAawB,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAevB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa0B,YAAY;IACnChB,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["export type ScaleParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAkBE"}
package/lib/index.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
1
+ export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';
2
2
  export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
3
3
  export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
4
4
  export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed"],"rangeMappings":";;;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAE/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACnG,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "fadeAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0 })=>{
12
+ const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromOpacity = 0 })=>{
13
13
  const keyframes = [
14
14
  {
15
- opacity: fromValue
15
+ opacity: fromOpacity
16
16
  },
17
17
  {
18
18
  opacity: 1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromValue","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromOpacity","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
@@ -9,13 +9,13 @@ Object.defineProperty(exports, "scaleAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const scaleAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0.9, toValue = 1 })=>{
12
+ const scaleAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromScale = 0.9, toScale = 1 })=>{
13
13
  const keyframes = [
14
14
  {
15
- scale: fromValue
15
+ scale: fromScale
16
16
  },
17
17
  {
18
- scale: toValue
18
+ scale: toScale
19
19
  }
20
20
  ];
21
21
  if (direction === 'exit') {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0.9,\n toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromValue }, { scale: toValue }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromScale?: number;\n toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromScale = 0.9,\n toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromScale }, { scale: toScale }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","fromScale","toScale","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "slideAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromX = '0px', fromY = '0px' })=>{
12
+ const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromX = '0px', fromY = '20px' })=>{
13
13
  const keyframes = [
14
14
  {
15
15
  translate: `${fromX} ${fromY}`
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide in or slide out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '0px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","fromX","fromY","keyframes","translate","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,KAAK,EACG;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,CAAC,EAAEH,MAAM,CAAC,EAAEC,MAAM,CAAC;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","fromX","fromY","keyframes","translate","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,CAAC,EAAEH,MAAM,CAAC,EAAEC,MAAM,CAAC;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
@@ -20,96 +20,106 @@ _export(exports, {
20
20
  },
21
21
  CollapseSnappy: function() {
22
22
  return CollapseSnappy;
23
- },
24
- createCollapseDelayedPresence: function() {
25
- return createCollapseDelayedPresence;
26
- },
27
- createCollapsePresence: function() {
28
- return createCollapsePresence;
29
23
  }
30
24
  });
31
25
  const _reactmotion = require("@fluentui/react-motion");
32
26
  const _collapseatoms = require("./collapse-atoms");
33
27
  const _fadeatom = require("../../atoms/fade-atom");
34
- const createCollapseDelayedPresence = ({ // enter
35
- enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
36
- exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
37
- // ----- ENTER -----
38
- // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
39
- const enterAtoms = [
40
- (0, _collapseatoms.sizeEnterAtom)({
41
- orientation,
42
- duration: enterSizeDuration,
43
- easing: enterEasing,
44
- element
45
- }),
46
- (0, _collapseatoms.whitespaceAtom)({
47
- direction: 'enter',
48
- orientation,
49
- duration: enterSizeDuration,
50
- easing: enterEasing
51
- })
52
- ];
53
- // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
54
- if (animateOpacity) {
55
- enterAtoms.push({
56
- ...(0, _fadeatom.fadeAtom)({
57
- direction: 'enter',
58
- duration: enterOpacityDuration,
59
- easing: enterEasing
60
- }),
61
- delay: enterDelay,
62
- fill: 'both'
63
- });
64
- }
65
- // ----- EXIT -----
66
- // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
67
- const exitAtoms = [];
68
- // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
69
- if (animateOpacity) {
70
- exitAtoms.push((0, _fadeatom.fadeAtom)({
71
- direction: 'exit',
72
- duration: exitOpacityDuration,
73
- easing: exitEasing
74
- }));
75
- }
76
- exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
28
+ /** Internal helper to create collapse atoms with shared logic */ function createCollapseAtoms({ element, orientation, animateOpacity, // Enter params
29
+ sizeDuration, opacityDuration = sizeDuration, easing, delay, // Exit params
30
+ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay }) {
31
+ // ----- ENTER -----
32
+ // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
33
+ const enterAtoms = [
34
+ (0, _collapseatoms.sizeEnterAtom)({
77
35
  orientation,
78
- duration: exitSizeDuration,
79
- easing: exitEasing,
80
- element,
81
- delay: exitDelay
82
- }), (0, _collapseatoms.whitespaceAtom)({
83
- direction: 'exit',
36
+ duration: sizeDuration,
37
+ easing,
38
+ element
39
+ }),
40
+ (0, _collapseatoms.whitespaceAtom)({
41
+ direction: 'enter',
84
42
  orientation,
85
- duration: exitSizeDuration,
86
- easing: exitEasing,
87
- delay: exitDelay
43
+ duration: sizeDuration,
44
+ easing
45
+ })
46
+ ];
47
+ // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
48
+ if (animateOpacity) {
49
+ enterAtoms.push({
50
+ ...(0, _fadeatom.fadeAtom)({
51
+ direction: 'enter',
52
+ duration: opacityDuration,
53
+ easing
54
+ }),
55
+ delay,
56
+ fill: 'both'
57
+ });
58
+ }
59
+ // ----- EXIT -----
60
+ // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
61
+ const exitAtoms = [];
62
+ // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
63
+ if (animateOpacity) {
64
+ exitAtoms.push((0, _fadeatom.fadeAtom)({
65
+ direction: 'exit',
66
+ duration: exitOpacityDuration,
67
+ easing: exitEasing
88
68
  }));
89
- return {
90
- enter: enterAtoms,
91
- exit: exitAtoms
92
- };
69
+ }
70
+ exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
71
+ orientation,
72
+ duration: exitSizeDuration,
73
+ easing: exitEasing,
74
+ element,
75
+ delay: exitDelay
76
+ }), (0, _collapseatoms.whitespaceAtom)({
77
+ direction: 'exit',
78
+ orientation,
79
+ duration: exitSizeDuration,
80
+ easing: exitEasing,
81
+ delay: exitDelay
82
+ }));
83
+ return {
84
+ enter: enterAtoms,
85
+ exit: exitAtoms
93
86
  };
94
- const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
95
- // where the delays are zero, and the size and opacity durations are equal.
96
- createCollapseDelayedPresence({
97
- enterSizeDuration: enterDuration,
98
- enterEasing,
87
+ }
88
+ /** Define a presence motion for collapse/expand */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
89
+ return createCollapseAtoms({
90
+ element,
91
+ orientation,
92
+ animateOpacity,
93
+ sizeDuration: duration,
94
+ opacityDuration: duration,
95
+ easing,
99
96
  exitSizeDuration: exitDuration,
100
- exitEasing
97
+ exitOpacityDuration: exitDuration,
98
+ exitEasing,
99
+ delay: 0,
100
+ exitDelay: 0
101
101
  });
102
- const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
103
- const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
104
- enterDuration: _reactmotion.motionTokens.durationFast
105
- }));
106
- const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
107
- enterDuration: _reactmotion.motionTokens.durationSlower
108
- }));
109
- const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
110
- enterSizeDuration: _reactmotion.motionTokens.durationNormal,
111
- enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
112
- enterDelay: _reactmotion.motionTokens.durationNormal,
113
- exitDelay: _reactmotion.motionTokens.durationSlower,
114
- enterEasing: _reactmotion.motionTokens.curveEasyEase
115
- }));
102
+ };
103
+ /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
104
+ return createCollapseAtoms({
105
+ element,
106
+ orientation,
107
+ animateOpacity,
108
+ sizeDuration,
109
+ opacityDuration,
110
+ easing,
111
+ delay,
112
+ exitSizeDuration,
113
+ exitOpacityDuration,
114
+ exitEasing,
115
+ exitDelay
116
+ });
117
+ };
118
+ const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
119
+ const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
120
+ duration: _reactmotion.motionTokens.durationFast
121
+ });
122
+ const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
123
+ duration: _reactmotion.motionTokens.durationSlower
124
+ });
125
+ const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(collapseDelayedPresenceFn);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/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 { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\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({ orientation, duration: enterSizeDuration, easing: enterEasing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: enterSizeDuration, easing: enterEasing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: enterOpacityDuration, easing: enterEasing }),\n delay: enterDelay,\n fill: 'both',\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(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\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 CollapseRelaxed = 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","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence","enterSizeDuration","motionTokens","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","sizeEnterAtom","duration","easing","whitespaceAtom","direction","push","fadeAtom","delay","fill","exitAtoms","sizeExitAtom","enter","exit","enterDuration","exitDuration","createPresenceComponent","durationFast","durationSlower","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiFaA,QAAQ;eAARA;;IAUAC,eAAe;eAAfA;;IAJAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;IA5EAC,6BAA6B;eAA7BA;;IA0DAC,sBAAsB;eAAtBA;;;6BAjEqD;+BAGN;0BACnC;AAGlB,MAAMD,gCAIX,CAAC,EACC,QAAQ;AACRE,oBAAoBC,yBAAY,CAACC,cAAc,EAC/CC,uBAAuBH,iBAAiB,EACxCI,cAAcH,yBAAY,CAACI,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,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,4BAAa,EAAC;gBAAEF;gBAAaG,UAAUhB;gBAAmBiB,QAAQb;gBAAaO;YAAQ;YACvFO,IAAAA,6BAAc,EAAC;gBAAEC,WAAW;gBAASN;gBAAaG,UAAUhB;gBAAmBiB,QAAQb;YAAY;SACpG;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWM,IAAI,CAAC;gBACd,GAAGC,IAAAA,kBAAQ,EAAC;oBAAEF,WAAW;oBAASH,UAAUb;oBAAsBc,QAAQb;gBAAY,EAAE;gBACxFkB,OAAOhB;gBACPiB,MAAM;YACR;QACF;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMC,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIZ,gBAAgB;YAClBY,UAAUJ,IAAI,CAACC,IAAAA,kBAAQ,EAAC;gBAAEF,WAAW;gBAAQH,UAAUR;gBAAqBS,QAAQR;YAAW;QACjG;QACAe,UAAUJ,IAAI,CACZK,IAAAA,2BAAY,EAAC;YAAEZ;YAAaG,UAAUT;YAAkBU,QAAQR;YAAYE;YAASW,OAAOZ;QAAU,IACtGQ,IAAAA,6BAAc,EAAC;YACbC,WAAW;YACXN;YACAG,UAAUT;YACVU,QAAQR;YACRa,OAAOZ;QACT;QAGF,OAAO;YACLgB,OAAOZ;YACPa,MAAMH;QACR;IACF;AAGK,MAAMzB,yBAAgG,CAAC,EAC5G6B,gBAAgB3B,yBAAY,CAACC,cAAc,EAC3CE,cAAcH,yBAAY,CAACI,gBAAgB,EAC3CwB,eAAeD,aAAa,EAC5BnB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EN,8BAA8B;QAC5BE,mBAAmB4B;QACnBxB;QACAG,kBAAkBsB;QAClBpB;IACF;AAGK,MAAMf,WAAWoC,IAAAA,oCAAuB,EAAC/B;AAEzC,MAAMF,iBAAiBiC,IAAAA,oCAAuB,EACnD/B,uBAAuB;IAAE6B,eAAe3B,yBAAY,CAAC8B,YAAY;AAAC;AAG7D,MAAMnC,kBAAkBkC,IAAAA,oCAAuB,EACpD/B,uBAAuB;IAAE6B,eAAe3B,yBAAY,CAAC+B,cAAc;AAAC;AAG/D,MAAMrC,kBAAkBmC,IAAAA,oCAAuB,EACpDhC,8BAA8B;IAC5BE,mBAAmBC,yBAAY,CAACC,cAAc;IAC9CC,sBAAsBF,yBAAY,CAAC+B,cAAc;IACjD1B,YAAYL,yBAAY,CAACC,cAAc;IACvCQ,WAAWT,yBAAY,CAAC+B,cAAc;IACtC5B,aAAaH,yBAAY,CAACgC,aAAa;AACzC"}
1
+ {"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n\n // Enter params\n sizeDuration,\n opacityDuration = sizeDuration,\n easing,\n delay,\n\n // Exit params\n exitSizeDuration,\n exitOpacityDuration = exitSizeDuration,\n exitEasing,\n exitDelay,\n}: {\n element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\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({ orientation, duration: sizeDuration, easing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n delay,\n fill: 'both',\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(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\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/** Define a presence motion for collapse/expand */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n element,\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEaseMax,\n exitDuration = duration,\n exitEasing = easing,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration: duration,\n opacityDuration: duration,\n easing,\n exitSizeDuration: exitDuration,\n exitOpacityDuration: exitDuration,\n exitEasing,\n delay: 0,\n exitDelay: 0,\n });\n};\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n element,\n sizeDuration = motionTokens.durationNormal,\n opacityDuration = motionTokens.durationSlower,\n easing = motionTokens.curveEasyEase,\n delay = motionTokens.durationNormal,\n exitSizeDuration = sizeDuration,\n exitOpacityDuration = opacityDuration,\n exitEasing = easing,\n exitDelay = motionTokens.durationSlower,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration,\n opacityDuration,\n easing,\n delay,\n exitSizeDuration,\n exitOpacityDuration,\n exitEasing,\n exitDelay,\n });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8HaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BA1HN;+BAEqD;0BACnC;AAEzB,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BC,IAAAA,4BAAa,EAAC;YAAEX;YAAaY,UAAUV;YAAcE;YAAQL;QAAQ;QACrEc,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASd;YAAaY,UAAUV;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWK,IAAI,CAAC;YACd,GAAGC,IAAAA,kBAAQ,EAAC;gBAAEF,WAAW;gBAASF,UAAUT;gBAAiBC;YAAO,EAAE;YACtEC;YACAY,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIjB,gBAAgB;QAClBiB,UAAUH,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQF,UAAUL;YAAqBH,QAAQI;QAAW;IACjG;IAEAU,UAAUH,IAAI,CACZI,IAAAA,2BAAY,EAAC;QAAEnB;QAAaY,UAAUN;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGI,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXd;QACAY,UAAUN;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLW,OAAOV;QACPW,MAAMH;IACR;AACF;AAEA,iDAAiD,GACjD,MAAMI,qBAAuD,CAAC,EAC5DvB,OAAO,EACPa,WAAWW,yBAAY,CAACC,cAAc,EACtCpB,SAASmB,yBAAY,CAACE,gBAAgB,EACtCC,eAAed,QAAQ,EACvBJ,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcU;QACdT,iBAAiBS;QACjBR;QACAE,kBAAkBoB;QAClBnB,qBAAqBmB;QACrBlB;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA,gHAAgH,GAChH,MAAMkB,4BAAqE,CAAC,EAC1E5B,OAAO,EACPG,eAAeqB,yBAAY,CAACC,cAAc,EAC1CrB,kBAAkBoB,yBAAY,CAACK,cAAc,EAC7CxB,SAASmB,yBAAY,CAACM,aAAa,EACnCxB,QAAQkB,yBAAY,CAACC,cAAc,EACnClB,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYc,yBAAY,CAACK,cAAc,EACvC3B,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAGO,MAAMf,WAAWoC,IAAAA,oCAAuB,EAACR;AAEzC,MAAMzB,iBAAiBkC,IAAAA,2CAA8B,EAACrC,UAAU;IACrEkB,UAAUW,yBAAY,CAACS,YAAY;AACrC;AAEO,MAAMpC,kBAAkBmC,IAAAA,2CAA8B,EAACrC,UAAU;IACtEkB,UAAUW,yBAAY,CAACK,cAAc;AACvC;AAGO,MAAMjC,kBAAkBmC,IAAAA,oCAAuB,EAACH"}
@@ -20,12 +20,6 @@ _export(exports, {
20
20
  },
21
21
  CollapseSnappy: function() {
22
22
  return _Collapse.CollapseSnappy;
23
- },
24
- createCollapseDelayedPresence: function() {
25
- return _Collapse.createCollapseDelayedPresence;
26
- },
27
- createCollapsePresence: function() {
28
- return _Collapse.createCollapsePresence;
29
23
  }
30
24
  });
31
25
  const _Collapse = require("./Collapse");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseDelayed,\n CollapseRelaxed,\n CollapseSnappy,\n createCollapseDelayedPresence,\n createCollapsePresence,\n} from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IACRC,eAAe;eAAfA,yBAAe;;IACfC,eAAe;eAAfA,yBAAe;;IACfC,cAAc;eAAdA,wBAAc;;IACdC,6BAA6B;eAA7BA,uCAA6B;;IAC7BC,sBAAsB;eAAtBA,gCAAsB;;;0BACjB"}
1
+ {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,cAAc;eAAdA,wBAAc;;;0BAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeVariantParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoCaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BAlBN;0BACkB;AAiBlB,MAAMA,iBAAsD,CAAC,EAClEC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
1
+ {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuBaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BALN;0BACkB;AAIlB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
@@ -28,7 +28,7 @@ const _scaleatom = require("../../atoms/scale-atom");
28
28
  direction: 'enter',
29
29
  duration,
30
30
  easing,
31
- fromValue: fromScale
31
+ fromScale: fromScale
32
32
  })
33
33
  ];
34
34
  const exitAtoms = [
@@ -36,7 +36,7 @@ const _scaleatom = require("../../atoms/scale-atom");
36
36
  direction: 'exit',
37
37
  duration: exitDuration,
38
38
  easing: exitEasing,
39
- fromValue: fromScale
39
+ fromScale: fromScale
40
40
  })
41
41
  ];
42
42
  // Only add fade atoms if animateOpacity is true.
@@ -59,8 +59,10 @@ const _scaleatom = require("../../atoms/scale-atom");
59
59
  };
60
60
  const Scale = (0, _reactmotion.createPresenceComponent)(scalePresenceFn);
61
61
  const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
62
- duration: _reactmotion.motionTokens.durationNormal
62
+ duration: _reactmotion.motionTokens.durationNormal,
63
+ exitDuration: _reactmotion.motionTokens.durationFast
63
64
  });
64
65
  const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
65
- duration: _reactmotion.motionTokens.durationSlow
66
+ duration: _reactmotion.motionTokens.durationSlow,
67
+ exitDuration: _reactmotion.motionTokens.durationGentle
66
68
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromValue: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","fromValue","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6DaA,KAAK;eAALA;;IAMAC,YAAY;eAAZA;;IAJAC,WAAW;eAAXA;;;6BA1DN;0BACkB;2BACC;AAsB1B,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQW,WAAWL;QAAU;KAAG;IAC9F,MAAMM,YAAY;QAChBH,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRO,WAAWL;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWK,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAASb;YAAUG;QAAO;QAChEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAOP;QACPQ,MAAMJ;IACR;AACF;AAGO,MAAMnB,QAAQwB,IAAAA,oCAAuB,EAACrB;AAEtC,MAAMD,cAAcuB,IAAAA,2CAA8B,EAACzB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;AACvC;AAEO,MAAMT,eAAewB,IAAAA,2CAA8B,EAACzB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;AACrC"}
1
+ {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromScale: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0CaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAvCN;0BACkB;2BACC;AAG1B,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRE,WAAWA;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;IACrCD,cAAcJ,yBAAY,CAACoB,YAAY;AACzC;AAEO,MAAMxB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;IACnCjB,cAAcJ,yBAAY,CAACC,cAAc;AAC3C"}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
@@ -47,12 +47,6 @@ _export(exports, {
47
47
  },
48
48
  SlideSnappy: function() {
49
49
  return _Slide.SlideSnappy;
50
- },
51
- createCollapseDelayedPresence: function() {
52
- return _Collapse.createCollapseDelayedPresence;
53
- },
54
- createCollapsePresence: function() {
55
- return _Collapse.createCollapsePresence;
56
50
  }
57
51
  });
58
52
  const _Collapse = require("./components/Collapse");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,eAAe;eAAfA,yBAAe;;IADfC,cAAc;eAAdA,wBAAc;;IAOPC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IALzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;;0BAEjB;sBAEuC;uBACG;uBACA"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAmCC,eAAe;eAAfA,yBAAe;;IAAhCC,eAAe;eAAfA,yBAAe;;IAA/BC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;;0BAHgD;sBAC7B;uBACG;uBACA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-motion-components-preview",
3
- "version": "0.0.0-nightly-20250715-0406.1",
3
+ "version": "0.0.0-nightly-20250716-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",
@@ -19,12 +19,12 @@
19
19
  "license": "MIT",
20
20
  "devDependencies": {
21
21
  "@fluentui/eslint-plugin": "*",
22
- "@fluentui/react-conformance": "0.0.0-nightly-20250715-0406.1",
23
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250715-0406.1",
22
+ "@fluentui/react-conformance": "0.0.0-nightly-20250716-0406.1",
23
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20250716-0406.1",
24
24
  "@fluentui/scripts-api-extractor": "*"
25
25
  },
26
26
  "dependencies": {
27
- "@fluentui/react-motion": "0.0.0-nightly-20250715-0406.1",
27
+ "@fluentui/react-motion": "0.0.0-nightly-20250716-0406.1",
28
28
  "@swc/helpers": "^0.5.1"
29
29
  },
30
30
  "peerDependencies": {