@fluentui/react-motion-components-preview 0.0.0-nightly-20241104-0408.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/Collapse/collapse-atoms.js.map +1 -1
- package/lib/components/Collapse/collapse-types.js.map +1 -1
- package/lib/components/Collapse/index.js.map +1 -1
- package/lib/components/Fade/Fade.js +1 -1
- package/lib/components/Fade/Fade.js.map +1 -1
- package/lib/components/Fade/index.js.map +1 -1
- package/lib/components/Scale/Scale.js +1 -1
- package/lib/components/Scale/Scale.js.map +1 -1
- package/lib/components/Scale/index.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib-commonjs/components/Collapse/Collapse.js +8 -5
- package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
- package/lib-commonjs/components/Collapse/collapse-atoms.js +1 -1
- package/lib-commonjs/components/Collapse/collapse-atoms.js.map +1 -1
- package/lib-commonjs/components/Collapse/collapse-types.js.map +1 -1
- package/lib-commonjs/components/Collapse/index.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/Fade/index.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/components/Scale/index.js.map +1 -1
- package/lib-commonjs/index.js +6 -6
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/types.js +0 -10
- package/lib-commonjs/types.js.map +1 -1
- package/package.json +5 -16
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":["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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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// 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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,aAAa"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export * from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,aAAa"}
|
|
@@ -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":["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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}
|
|
@@ -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":["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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,UAAU"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,UAAU"}
|
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":["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"}
|
package/lib/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.\n * The generated object defines a presence motion with `enter` and `exit` transitions.\n * This motion object is declarative, i.e. data without side effects,\n * and it is framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (\n variantParams?: MotionVariantParams,\n) => PresenceMotion;\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n MotionVariantParams extends Record<string, MotionParam> = {},\n MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAcA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}
|
|
1
|
+
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.\n * The generated object defines a presence motion with `enter` and `exit` transitions.\n * This motion object is declarative, i.e. data without side effects,\n * and it is framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (\n variantParams?: MotionVariantParams,\n) => PresenceMotion;\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n MotionVariantParams extends Record<string, MotionParam> = {},\n MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAcA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}
|
|
@@ -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;
|
|
@@ -30,7 +30,9 @@ _export(exports, {
|
|
|
30
30
|
});
|
|
31
31
|
const _reactmotion = require("@fluentui/react-motion");
|
|
32
32
|
const _collapseatoms = require("./collapse-atoms");
|
|
33
|
-
const createCollapseDelayedPresence = ({
|
|
33
|
+
const createCollapseDelayedPresence = ({ // enter
|
|
34
|
+
enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
|
|
35
|
+
exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
|
|
34
36
|
// ----- ENTER -----
|
|
35
37
|
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
|
|
36
38
|
const enterAtoms = [
|
|
@@ -82,7 +84,8 @@ const createCollapseDelayedPresence = ({ enterSizeDuration = _reactmotion.motion
|
|
|
82
84
|
exit: exitAtoms
|
|
83
85
|
};
|
|
84
86
|
};
|
|
85
|
-
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>//
|
|
87
|
+
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,
|
|
88
|
+
// where the delays are zero, and the size and opacity durations are equal.
|
|
86
89
|
createCollapseDelayedPresence({
|
|
87
90
|
enterSizeDuration: enterDuration,
|
|
88
91
|
enterEasing,
|
|
@@ -93,7 +96,7 @@ const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresenc
|
|
|
93
96
|
const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
94
97
|
enterDuration: _reactmotion.motionTokens.durationFast
|
|
95
98
|
}));
|
|
96
|
-
const
|
|
99
|
+
const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
|
|
97
100
|
enterDuration: _reactmotion.motionTokens.durationSlower
|
|
98
101
|
}));
|
|
99
102
|
const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
// ----- SIZE -----
|
|
2
1
|
"use strict";
|
|
3
2
|
Object.defineProperty(exports, "__esModule", {
|
|
4
3
|
value: true
|
|
@@ -29,6 +28,7 @@ _export(exports, {
|
|
|
29
28
|
return whitespaceExitAtom;
|
|
30
29
|
}
|
|
31
30
|
});
|
|
31
|
+
// ----- SIZE -----
|
|
32
32
|
const sizeValuesForOrientation = (orientation, element)=>{
|
|
33
33
|
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
|
|
34
34
|
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["opacityEnterAtom","opacityExitAtom","sizeEnterAtom","sizeExitAtom","whitespaceEnterAtom","whitespaceExitAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","fromOpacity","toOpacity","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n const toSize = `${measuredSize}px`;\n return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n { [sizeName]: 'unset', [overflowName]: 'unset' },\n ],\n duration,\n easing,\n };\n};\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n delay?: number;\n fromSize?: string;\n}): AtomMotion => {\n const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n return {\n keyframes: [\n { [sizeName]: toSize, [overflowName]: 'hidden' },\n { [sizeName]: fromSize, [overflowName]: 'hidden' },\n ],\n duration,\n easing,\n fill: 'both',\n delay,\n };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n orientation,\n duration,\n easing,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n duration,\n easing,\n };\n};\n\nexport const whitespaceExitAtom = ({\n orientation,\n duration,\n easing,\n delay = 0,\n}: {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}): AtomMotion => {\n const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n return {\n keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n duration,\n easing,\n fill: 'forwards',\n delay,\n };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n duration,\n easing,\n delay = 0,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n delay?: number;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n duration,\n easing,\n delay,\n fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n duration,\n easing,\n fromOpacity = 0,\n toOpacity = 1,\n}: {\n duration: number;\n easing: string;\n fromOpacity?: number;\n toOpacity?: number;\n}): AtomMotion => ({\n keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n duration,\n easing,\n});\n"],"names":["opacityEnterAtom","opacityExitAtom","sizeEnterAtom","sizeExitAtom","whitespaceEnterAtom","whitespaceExitAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","fromOpacity","toOpacity","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export * from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
@@ -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":["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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
@@ -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":["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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}
|
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":["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/lib-commonjs/types.js
CHANGED
|
@@ -1,13 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* This is a factory function that generates a motion function, which has variant params bound into it.
|
|
3
|
-
* The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
|
|
4
|
-
* This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
|
|
5
|
-
* For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
|
|
6
|
-
* while the runtime params may give access to the target element, which is different for each instance.
|
|
7
|
-
*
|
|
8
|
-
* The generated motion function is also framework-independent, i.e. non-React.
|
|
9
|
-
* It can be turned into a React component using `createPresenceComponent`.
|
|
10
|
-
*/ // TODO: move to @fluentui/react-motion when stable
|
|
11
1
|
"use strict";
|
|
12
2
|
Object.defineProperty(exports, "__esModule", {
|
|
13
3
|
value: true
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
|
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",
|
|
@@ -17,25 +17,14 @@
|
|
|
17
17
|
"url": "https://github.com/microsoft/fluentui"
|
|
18
18
|
},
|
|
19
19
|
"license": "MIT",
|
|
20
|
-
"scripts": {
|
|
21
|
-
"build": "just-scripts build",
|
|
22
|
-
"clean": "just-scripts clean",
|
|
23
|
-
"generate-api": "just-scripts generate-api",
|
|
24
|
-
"lint": "just-scripts lint",
|
|
25
|
-
"start": "yarn storybook",
|
|
26
|
-
"storybook": "yarn --cwd ../stories storybook",
|
|
27
|
-
"test": "jest --passWithNoTests",
|
|
28
|
-
"type-check": "just-scripts type-check"
|
|
29
|
-
},
|
|
30
20
|
"devDependencies": {
|
|
31
21
|
"@fluentui/eslint-plugin": "*",
|
|
32
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
33
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/scripts-api-extractor": "*"
|
|
35
|
-
"@fluentui/scripts-tasks": "*"
|
|
22
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20241106-0406.1",
|
|
23
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241106-0406.1",
|
|
24
|
+
"@fluentui/scripts-api-extractor": "*"
|
|
36
25
|
},
|
|
37
26
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-motion": "0.0.0-nightly-
|
|
27
|
+
"@fluentui/react-motion": "0.0.0-nightly-20241106-0406.1",
|
|
39
28
|
"@swc/helpers": "^0.5.1"
|
|
40
29
|
},
|
|
41
30
|
"peerDependencies": {
|