@fluentui/react-motion-components-preview 0.0.0-nightly-20241105-0406.1 → 0.0.0-nightly-20241106-0406.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -7
- package/dist/index.d.ts +4 -4
- package/lib/components/Collapse/Collapse.js +1 -1
- package/lib/components/Collapse/Collapse.js.map +1 -1
- package/lib/components/Fade/Fade.js +1 -1
- package/lib/components/Fade/Fade.js.map +1 -1
- package/lib/components/Scale/Scale.js +1 -1
- package/lib/components/Scale/Scale.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/Collapse/Collapse.js +3 -3
- package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
- package/lib-commonjs/components/Fade/Fade.js +3 -3
- package/lib-commonjs/components/Fade/Fade.js.map +1 -1
- package/lib-commonjs/components/Scale/Scale.js +3 -3
- package/lib-commonjs/components/Scale/Scale.js.map +1 -1
- package/lib-commonjs/index.js +6 -6
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion-components-preview
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 06 Nov 2024 04:10:12 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20241106-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241106-0406.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-
|
|
9
|
+
Wed, 06 Nov 2024 04:10:12 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241106-0406.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-motion to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-motion to v0.0.0-nightly-20241106-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1840be4d443e07d49064a8aaa92dc7e1b084580) by beachball)
|
|
16
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241106-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1840be4d443e07d49064a8aaa92dc7e1b084580) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241106-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/c1840be4d443e07d49064a8aaa92dc7e1b084580) by beachball)
|
|
18
18
|
|
|
19
19
|
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
|
|
20
20
|
|
package/dist/index.d.ts
CHANGED
|
@@ -27,10 +27,10 @@ declare type CollapseDelayedVariantParams = {
|
|
|
27
27
|
exitEasing?: string;
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
|
|
31
|
-
|
|
32
30
|
declare type CollapseOrientation = 'horizontal' | 'vertical';
|
|
33
31
|
|
|
32
|
+
export declare const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
|
|
33
|
+
|
|
34
34
|
export declare type CollapseRuntimeParams = {
|
|
35
35
|
/** Whether to animate the opacity. Defaults to `true`. */
|
|
36
36
|
animateOpacity?: boolean;
|
|
@@ -63,7 +63,7 @@ export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams
|
|
|
63
63
|
/** A React component that applies fade in/out transitions to its children. */
|
|
64
64
|
export declare const Fade: PresenceComponent< {}>;
|
|
65
65
|
|
|
66
|
-
export declare const
|
|
66
|
+
export declare const FadeRelaxed: PresenceComponent< {}>;
|
|
67
67
|
|
|
68
68
|
export declare const FadeSnappy: PresenceComponent< {}>;
|
|
69
69
|
|
|
@@ -104,7 +104,7 @@ export declare const Scale: PresenceComponent< {
|
|
|
104
104
|
animateOpacity?: boolean | undefined;
|
|
105
105
|
}>;
|
|
106
106
|
|
|
107
|
-
export declare const
|
|
107
|
+
export declare const ScaleRelaxed: PresenceComponent< {
|
|
108
108
|
animateOpacity?: boolean | undefined;
|
|
109
109
|
}>;
|
|
110
110
|
|
|
@@ -66,7 +66,7 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
|
|
|
66
66
|
export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
|
|
67
67
|
enterDuration: motionTokens.durationFast
|
|
68
68
|
}));
|
|
69
|
-
export const
|
|
69
|
+
export const CollapseRelaxed = createPresenceComponent(createCollapsePresence({
|
|
70
70
|
enterDuration: motionTokens.durationSlower
|
|
71
71
|
}));
|
|
72
72
|
export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({
|
|
@@ -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 {\n sizeEnterAtom,\n whitespaceEnterAtom,\n opacityEnterAtom,\n opacityExitAtom,\n sizeExitAtom,\n whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n element,\n }),\n whitespaceEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push(\n opacityEnterAtom({\n duration: enterOpacityDuration,\n easing: enterEasing,\n delay: enterDelay,\n }),\n );\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(\n opacityExitAtom({\n duration: exitOpacityDuration,\n easing: exitEasing,\n }),\n );\n }\n exitAtoms.push(\n sizeExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n element,\n delay: exitDelay,\n }),\n );\n exitAtoms.push(\n whitespaceExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const
|
|
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 {\n sizeEnterAtom,\n whitespaceEnterAtom,\n opacityEnterAtom,\n opacityExitAtom,\n sizeExitAtom,\n whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n element,\n }),\n whitespaceEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push(\n opacityEnterAtom({\n duration: enterOpacityDuration,\n easing: enterEasing,\n delay: enterDelay,\n }),\n );\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(\n opacityExitAtom({\n duration: exitOpacityDuration,\n easing: exitEasing,\n }),\n );\n }\n exitAtoms.push(\n sizeExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n element,\n delay: exitDelay,\n }),\n );\n exitAtoms.push(\n whitespaceExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const 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","whitespaceEnterAtom","opacityEnterAtom","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","push","delay","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SACEC,aAAa,EACbC,mBAAmB,EACnBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,kBAAkB,QACb,mBAAmB;AAE1B,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBT,aAAaU,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcZ,aAAaa,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBN,iBAAiB,EACpCO,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BpB,cAAc;gBACZmB;gBACAE,UAAUd;gBACVe,QAAQZ;gBACRO;YACF;YACAhB,oBAAoB;gBAClBkB;gBACAE,UAAUd;gBACVe,QAAQZ;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWG,IAAI,CACbrB,iBAAiB;gBACfmB,UAAUZ;gBACVa,QAAQZ;gBACRc,OAAOZ;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMa,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIP,gBAAgB;YAClBO,UAAUF,IAAI,CACZpB,gBAAgB;gBACdkB,UAAUP;gBACVQ,QAAQP;YACV;QAEJ;QACAU,UAAUF,IAAI,CACZnB,aAAa;YACXe;YACAE,UAAUR;YACVS,QAAQP;YACRE;YACAO,OAAOR;QACT;QAEFS,UAAUF,IAAI,CACZlB,mBAAmB;YACjBc;YACAE,UAAUR;YACVS,QAAQP;YACRS,OAAOR;QACT;QAGF,OAAO;YACLU,OAAON;YACPO,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaU,cAAc,EAC3CE,cAAcZ,aAAaa,gBAAgB,EAC3CmB,eAAeD,aAAa,EAC5Bd,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBsB;QACnBnB;QACAG,kBAAkBiB;QAClBf;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMgB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,kBAAkBnC,wBAC7B6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BO,8BAA8B;IAC5BC,mBAAmBT,aAAaU,cAAc;IAC9CC,sBAAsBX,aAAaqC,cAAc;IACjDvB,YAAYd,aAAaU,cAAc;IACvCQ,WAAWlB,aAAaqC,cAAc;IACtCzB,aAAaZ,aAAauC,aAAa;AACzC,IACA"}
|
|
@@ -29,6 +29,6 @@ import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
|
|
|
29
29
|
export const FadeSnappy = createPresenceComponent(createFadePresence({
|
|
30
30
|
enterDuration: motionTokens.durationFast
|
|
31
31
|
}));
|
|
32
|
-
export const
|
|
32
|
+
export const FadeRelaxed = createPresenceComponent(createFadePresence({
|
|
33
33
|
enterDuration: motionTokens.durationGentle
|
|
34
34
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEase,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) => ({\n enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const
|
|
1
|
+
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEase,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) => ({\n enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["motionTokens","createPresenceComponent","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAiB/E,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUP;YAAeQ,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAME,OAAOd,wBAAwBC,sBAAsB;AAElE,OAAO,MAAMc,aAAaf,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,cAAcjB,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAamB,cAAc;AAAC,IAAI"}
|
|
@@ -50,7 +50,7 @@ export const ScaleSnappy = createPresenceComponentVariant(Scale, {
|
|
|
50
50
|
easing: motionTokens.curveAccelerateMax
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
|
-
export const
|
|
53
|
+
export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
|
|
54
54
|
enter: {
|
|
55
55
|
duration: motionTokens.durationSlow,
|
|
56
56
|
easing: motionTokens.curveDecelerateMax
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n PresenceMotionFn,\n createPresenceComponent,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n\n return {\n enter: {\n duration: motionTokens.durationGentle,\n easing: motionTokens.curveDecelerateMax,\n keyframes: enterKeyframes,\n },\n exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n PresenceMotionFn,\n createPresenceComponent,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n\n return {\n enter: {\n duration: motionTokens.durationGentle,\n easing: motionTokens.curveDecelerateMax,\n keyframes: enterKeyframes,\n },\n exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },\n exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","scaleMotion","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","durationGentle","easing","curveDecelerateMax","keyframes","exit","durationNormal","curveAccelerateMax","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,8CAA8C,GAC9C,MAAMC,cAA8D,CAAC,EAAEC,iBAAiB,IAAI,EAAE;IAC5F,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,YAAY,KAAK,wCAAwC;IAC/D,MAAMC,UAAU;IAEhB,MAAMC,iBAAiB;QACrB;YAAEC,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAU;QACnG;YAAEF,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLC,UAAUf,aAAagB,cAAc;YACrCC,QAAQjB,aAAakB,kBAAkB;YACvCC,WAAWV;QACb;QACAW,MAAM;YAAEL,UAAUf,aAAaqB,cAAc;YAAEJ,QAAQjB,aAAasB,kBAAkB;YAAEH,WAAWN;QAAc;IACnH;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMU,QAAQtB,wBAAwBE,aAAa;AAE1D,OAAO,MAAMqB,cAActB,+BAA+BqB,OAAO;IAC/DT,OAAO;QAAEC,UAAUf,aAAaqB,cAAc;QAAEJ,QAAQjB,aAAakB,kBAAkB;IAAC;IACxFE,MAAM;QAAEL,UAAUf,aAAayB,YAAY;QAAER,QAAQjB,aAAasB,kBAAkB;IAAC;AACvF,GAAG;AAEH,OAAO,MAAMI,eAAexB,+BAA+BqB,OAAO;IAChET,OAAO;QAAEC,UAAUf,aAAa2B,YAAY;QAAEV,QAAQjB,aAAakB,kBAAkB;IAAC;IACtFE,MAAM;QAAEL,UAAUf,aAAagB,cAAc;QAAEC,QAAQjB,aAAasB,kBAAkB;IAAC;AACzF,GAAG"}
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { Collapse, CollapseSnappy,
|
|
2
|
-
export { Fade, FadeSnappy,
|
|
3
|
-
export { Scale, ScaleSnappy,
|
|
1
|
+
export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
|
|
2
|
+
export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
|
|
3
|
+
export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n
|
|
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, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","createFadePresence","Scale","ScaleSnappy","ScaleRelaxed"],"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,EAAEC,kBAAkB,QAAQ,oBAAoB;AACtF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
|
|
@@ -15,8 +15,8 @@ _export(exports, {
|
|
|
15
15
|
CollapseDelayed: function() {
|
|
16
16
|
return CollapseDelayed;
|
|
17
17
|
},
|
|
18
|
-
|
|
19
|
-
return
|
|
18
|
+
CollapseRelaxed: function() {
|
|
19
|
+
return CollapseRelaxed;
|
|
20
20
|
},
|
|
21
21
|
CollapseSnappy: function() {
|
|
22
22
|
return CollapseSnappy;
|
|
@@ -96,7 +96,7 @@ const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresenc
|
|
|
96
96
|
const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
97
97
|
enterDuration: _reactmotion.motionTokens.durationFast
|
|
98
98
|
}));
|
|
99
|
-
const
|
|
99
|
+
const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
100
100
|
enterDuration: _reactmotion.motionTokens.durationSlower
|
|
101
101
|
}));
|
|
102
102
|
const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
|
|
@@ -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 {\n sizeEnterAtom,\n whitespaceEnterAtom,\n opacityEnterAtom,\n opacityExitAtom,\n sizeExitAtom,\n whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n element,\n }),\n whitespaceEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push(\n opacityEnterAtom({\n duration: enterOpacityDuration,\n easing: enterEasing,\n delay: enterDelay,\n }),\n );\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(\n opacityExitAtom({\n duration: exitOpacityDuration,\n easing: exitEasing,\n }),\n );\n }\n exitAtoms.push(\n sizeExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n element,\n delay: exitDelay,\n }),\n );\n exitAtoms.push(\n whitespaceExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const
|
|
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 {\n sizeEnterAtom,\n whitespaceEnterAtom,\n opacityEnterAtom,\n opacityExitAtom,\n sizeExitAtom,\n whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n element,\n }),\n whitespaceEnterAtom({\n orientation,\n duration: enterSizeDuration,\n easing: enterEasing,\n }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push(\n opacityEnterAtom({\n duration: enterOpacityDuration,\n easing: enterEasing,\n delay: enterDelay,\n }),\n );\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(\n opacityExitAtom({\n duration: exitOpacityDuration,\n easing: exitEasing,\n }),\n );\n }\n exitAtoms.push(\n sizeExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n element,\n delay: exitDelay,\n }),\n );\n exitAtoms.push(\n whitespaceExitAtom({\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const 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","whitespaceEnterAtom","push","opacityEnterAtom","delay","exitAtoms","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","enter","exit","enterDuration","exitDuration","createPresenceComponent","durationFast","durationSlower","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8GaA,QAAQ;eAARA;;IAUAC,eAAe;eAAfA;;IAJAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;IAnGAC,6BAA6B;eAA7BA;;IAiFAC,sBAAsB;eAAtBA;;;6BA9FqD;+BAU3D;AAGA,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;gBACZF;gBACAG,UAAUhB;gBACViB,QAAQb;gBACRO;YACF;YACAO,IAAAA,kCAAmB,EAAC;gBAClBL;gBACAG,UAAUhB;gBACViB,QAAQb;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWK,IAAI,CACbC,IAAAA,+BAAgB,EAAC;gBACfJ,UAAUb;gBACVc,QAAQb;gBACRiB,OAAOf;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMgB,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIV,gBAAgB;YAClBU,UAAUH,IAAI,CACZI,IAAAA,8BAAe,EAAC;gBACdP,UAAUR;gBACVS,QAAQR;YACV;QAEJ;QACAa,UAAUH,IAAI,CACZK,IAAAA,2BAAY,EAAC;YACXX;YACAG,UAAUT;YACVU,QAAQR;YACRE;YACAU,OAAOX;QACT;QAEFY,UAAUH,IAAI,CACZM,IAAAA,iCAAkB,EAAC;YACjBZ;YACAG,UAAUT;YACVU,QAAQR;YACRY,OAAOX;QACT;QAGF,OAAO;YACLgB,OAAOZ;YACPa,MAAML;QACR;IACF;AAGK,MAAMvB,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"}
|
|
@@ -12,8 +12,8 @@ _export(exports, {
|
|
|
12
12
|
Fade: function() {
|
|
13
13
|
return Fade;
|
|
14
14
|
},
|
|
15
|
-
|
|
16
|
-
return
|
|
15
|
+
FadeRelaxed: function() {
|
|
16
|
+
return FadeRelaxed;
|
|
17
17
|
},
|
|
18
18
|
FadeSnappy: function() {
|
|
19
19
|
return FadeSnappy;
|
|
@@ -53,6 +53,6 @@ const Fade = (0, _reactmotion.createPresenceComponent)(createFadePresence());
|
|
|
53
53
|
const FadeSnappy = (0, _reactmotion.createPresenceComponent)(createFadePresence({
|
|
54
54
|
enterDuration: _reactmotion.motionTokens.durationFast
|
|
55
55
|
}));
|
|
56
|
-
const
|
|
56
|
+
const FadeRelaxed = (0, _reactmotion.createPresenceComponent)(createFadePresence({
|
|
57
57
|
enterDuration: _reactmotion.motionTokens.durationGentle
|
|
58
58
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEase,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) => ({\n enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const
|
|
1
|
+
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n enterDuration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value. */\n enterEasing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEase,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) => ({\n enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["Fade","FadeRelaxed","FadeSnappy","createFadePresence","enterDuration","motionTokens","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","createPresenceComponent","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6BaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAbAC,kBAAkB;eAAlBA;;;6BAlByC;AAkB/C,MAAMA,qBAA+D,CAAC,EAC3EC,gBAAgBC,yBAAY,CAACC,cAAc,EAC3CC,cAAcF,yBAAY,CAACG,aAAa,EACxCC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUR;YAAeS,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA;AAGO,MAAMf,OAAOiB,IAAAA,oCAAuB,EAACd;AAErC,MAAMD,aAAae,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACa,YAAY;AAAC;AAEzG,MAAMjB,cAAcgB,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACc,cAAc;AAAC"}
|
|
@@ -12,8 +12,8 @@ _export(exports, {
|
|
|
12
12
|
Scale: function() {
|
|
13
13
|
return Scale;
|
|
14
14
|
},
|
|
15
|
-
|
|
16
|
-
return
|
|
15
|
+
ScaleRelaxed: function() {
|
|
16
|
+
return ScaleRelaxed;
|
|
17
17
|
},
|
|
18
18
|
ScaleSnappy: function() {
|
|
19
19
|
return ScaleSnappy;
|
|
@@ -71,7 +71,7 @@ const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
|
|
|
71
71
|
easing: _reactmotion.motionTokens.curveAccelerateMax
|
|
72
72
|
}
|
|
73
73
|
});
|
|
74
|
-
const
|
|
74
|
+
const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
|
|
75
75
|
enter: {
|
|
76
76
|
duration: _reactmotion.motionTokens.durationSlow,
|
|
77
77
|
easing: _reactmotion.motionTokens.curveDecelerateMax
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n PresenceMotionFn,\n createPresenceComponent,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n\n return {\n enter: {\n duration: motionTokens.durationGentle,\n easing: motionTokens.curveDecelerateMax,\n keyframes: enterKeyframes,\n },\n exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n PresenceMotionFn,\n createPresenceComponent,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromScale = 0.9; // Could be a custom param in the future\n const toScale = 1;\n\n const enterKeyframes = [\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n ];\n\n return {\n enter: {\n duration: motionTokens.durationGentle,\n easing: motionTokens.curveDecelerateMax,\n keyframes: enterKeyframes,\n },\n exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },\n exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scaleMotion","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","motionTokens","durationGentle","easing","curveDecelerateMax","keyframes","exit","durationNormal","curveAccelerateMax","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmCaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAhCN;AAEP,8CAA8C,GAC9C,MAAMC,cAA8D,CAAC,EAAEC,iBAAiB,IAAI,EAAE;IAC5F,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,YAAY,KAAK,wCAAwC;IAC/D,MAAMC,UAAU;IAEhB,MAAMC,iBAAiB;QACrB;YAAEC,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAU;QACnG;YAAEF,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLC,UAAUC,yBAAY,CAACC,cAAc;YACrCC,QAAQF,yBAAY,CAACG,kBAAkB;YACvCC,WAAWX;QACb;QACAY,MAAM;YAAEN,UAAUC,yBAAY,CAACM,cAAc;YAAEJ,QAAQF,yBAAY,CAACO,kBAAkB;YAAEH,WAAWP;QAAc;IACnH;AACF;AAGO,MAAMb,QAAQwB,IAAAA,oCAAuB,EAACrB;AAEtC,MAAMD,cAAcuB,IAAAA,2CAA8B,EAACzB,OAAO;IAC/Dc,OAAO;QAAEC,UAAUC,yBAAY,CAACM,cAAc;QAAEJ,QAAQF,yBAAY,CAACG,kBAAkB;IAAC;IACxFE,MAAM;QAAEN,UAAUC,yBAAY,CAACU,YAAY;QAAER,QAAQF,yBAAY,CAACO,kBAAkB;IAAC;AACvF;AAEO,MAAMtB,eAAewB,IAAAA,2CAA8B,EAACzB,OAAO;IAChEc,OAAO;QAAEC,UAAUC,yBAAY,CAACW,YAAY;QAAET,QAAQF,yBAAY,CAACG,kBAAkB;IAAC;IACtFE,MAAM;QAAEN,UAAUC,yBAAY,CAACC,cAAc;QAAEC,QAAQF,yBAAY,CAACO,kBAAkB;IAAC;AACzF"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -15,8 +15,8 @@ _export(exports, {
|
|
|
15
15
|
CollapseDelayed: function() {
|
|
16
16
|
return _Collapse.CollapseDelayed;
|
|
17
17
|
},
|
|
18
|
-
|
|
19
|
-
return _Collapse.
|
|
18
|
+
CollapseRelaxed: function() {
|
|
19
|
+
return _Collapse.CollapseRelaxed;
|
|
20
20
|
},
|
|
21
21
|
CollapseSnappy: function() {
|
|
22
22
|
return _Collapse.CollapseSnappy;
|
|
@@ -24,8 +24,8 @@ _export(exports, {
|
|
|
24
24
|
Fade: function() {
|
|
25
25
|
return _Fade.Fade;
|
|
26
26
|
},
|
|
27
|
-
|
|
28
|
-
return _Fade.
|
|
27
|
+
FadeRelaxed: function() {
|
|
28
|
+
return _Fade.FadeRelaxed;
|
|
29
29
|
},
|
|
30
30
|
FadeSnappy: function() {
|
|
31
31
|
return _Fade.FadeSnappy;
|
|
@@ -33,8 +33,8 @@ _export(exports, {
|
|
|
33
33
|
Scale: function() {
|
|
34
34
|
return _Scale.Scale;
|
|
35
35
|
},
|
|
36
|
-
|
|
37
|
-
return _Scale.
|
|
36
|
+
ScaleRelaxed: function() {
|
|
37
|
+
return _Scale.ScaleRelaxed;
|
|
38
38
|
},
|
|
39
39
|
ScaleSnappy: function() {
|
|
40
40
|
return _Scale.ScaleSnappy;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n
|
|
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, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence","createFadePresence"],"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;;IAJzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;IAIgBC,kBAAkB;eAAlBA,wBAAkB;;;0BAFnD;sBAE2D;uBACjB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion-components-preview",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20241106-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-
|
|
23
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
22
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20241106-0406.1",
|
|
23
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241106-0406.1",
|
|
24
24
|
"@fluentui/scripts-api-extractor": "*"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@fluentui/react-motion": "0.0.0-nightly-
|
|
27
|
+
"@fluentui/react-motion": "0.0.0-nightly-20241106-0406.1",
|
|
28
28
|
"@swc/helpers": "^0.5.1"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|