@fluentui/react-motion-components-preview 0.7.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +11 -2
  2. package/dist/index.d.ts +41 -45
  3. package/lib/atoms/blur-atom.js +26 -0
  4. package/lib/atoms/blur-atom.js.map +1 -0
  5. package/lib/atoms/fade-atom.js.map +1 -1
  6. package/lib/atoms/scale-atom.js.map +1 -1
  7. package/lib/atoms/slide-atom.js.map +1 -1
  8. package/lib/components/Blur/Blur.js +48 -0
  9. package/lib/components/Blur/Blur.js.map +1 -0
  10. package/lib/components/Blur/blur-types.js +1 -0
  11. package/lib/components/Blur/blur-types.js.map +1 -0
  12. package/lib/components/Blur/index.js +1 -0
  13. package/lib/components/Blur/index.js.map +1 -0
  14. package/lib/components/Collapse/Collapse.js +26 -2
  15. package/lib/components/Collapse/Collapse.js.map +1 -1
  16. package/lib/components/Collapse/collapse-atoms.js.map +1 -1
  17. package/lib/components/Collapse/collapse-types.js.map +1 -1
  18. package/lib/components/Collapse/index.js.map +1 -1
  19. package/lib/components/Fade/Fade.js +8 -1
  20. package/lib/components/Fade/Fade.js.map +1 -1
  21. package/lib/components/Fade/fade-types.js.map +1 -1
  22. package/lib/components/Fade/index.js.map +1 -1
  23. package/lib/components/Scale/Scale.js +11 -2
  24. package/lib/components/Scale/Scale.js.map +1 -1
  25. package/lib/components/Scale/index.js.map +1 -1
  26. package/lib/components/Scale/scale-types.js.map +1 -1
  27. package/lib/components/Slide/Slide.js +11 -1
  28. package/lib/components/Slide/Slide.js.map +1 -1
  29. package/lib/components/Slide/index.js.map +1 -1
  30. package/lib/components/Slide/slide-types.js.map +1 -1
  31. package/lib/index.js +1 -0
  32. package/lib/index.js.map +1 -1
  33. package/lib/types.js +2 -10
  34. package/lib/types.js.map +1 -1
  35. package/lib-commonjs/atoms/blur-atom.js +29 -0
  36. package/lib-commonjs/atoms/blur-atom.js.map +1 -0
  37. package/lib-commonjs/atoms/fade-atom.js.map +1 -1
  38. package/lib-commonjs/atoms/scale-atom.js.map +1 -1
  39. package/lib-commonjs/atoms/slide-atom.js.map +1 -1
  40. package/lib-commonjs/components/Blur/Blur.js +58 -0
  41. package/lib-commonjs/components/Blur/Blur.js.map +1 -0
  42. package/lib-commonjs/components/Blur/blur-types.js +4 -0
  43. package/lib-commonjs/components/Blur/blur-types.js.map +1 -0
  44. package/lib-commonjs/components/Blur/index.js +11 -0
  45. package/lib-commonjs/components/Blur/index.js.map +1 -0
  46. package/lib-commonjs/components/Collapse/Collapse.js +26 -2
  47. package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
  48. package/lib-commonjs/components/Collapse/collapse-atoms.js.map +1 -1
  49. package/lib-commonjs/components/Collapse/collapse-types.js.map +1 -1
  50. package/lib-commonjs/components/Collapse/index.js.map +1 -1
  51. package/lib-commonjs/components/Fade/Fade.js.map +1 -1
  52. package/lib-commonjs/components/Fade/fade-types.js.map +1 -1
  53. package/lib-commonjs/components/Fade/index.js.map +1 -1
  54. package/lib-commonjs/components/Scale/Scale.js +11 -2
  55. package/lib-commonjs/components/Scale/Scale.js.map +1 -1
  56. package/lib-commonjs/components/Scale/index.js.map +1 -1
  57. package/lib-commonjs/components/Scale/scale-types.js.map +1 -1
  58. package/lib-commonjs/components/Slide/Slide.js +11 -1
  59. package/lib-commonjs/components/Slide/Slide.js.map +1 -1
  60. package/lib-commonjs/components/Slide/index.js.map +1 -1
  61. package/lib-commonjs/components/Slide/slide-types.js.map +1 -1
  62. package/lib-commonjs/index.js +4 -0
  63. package/lib-commonjs/index.js.map +1 -1
  64. package/lib-commonjs/types.js.map +1 -1
  65. package/package.json +1 -1
package/lib/index.js CHANGED
@@ -2,3 +2,4 @@ export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './co
2
2
  export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
3
3
  export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
4
4
  export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
5
+ export { Blur } from './components/Blur';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACnG,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\nexport { Blur } from './components/Blur';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACnG,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,IAAI,QAAQ,oBAAoB"}
package/lib/types.js CHANGED
@@ -1,11 +1,3 @@
1
1
  /**
2
- * This is a factory function that generates a motion function, which has variant params bound into it.
3
- * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
4
- * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
5
- * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
6
- * while the runtime params may give access to the target element, which is different for each instance.
7
- *
8
- * The generated motion function is also framework-independent, i.e. non-React.
9
- * It can be turned into a React component using `createPresenceComponent`.
10
- */ // TODO: move to @fluentui/react-motion when stable
11
- export { };
2
+ * Common opacity animation parameter for motion components.
3
+ */ export { };
package/lib/types.js.map CHANGED
@@ -1 +1 @@
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"}
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\n/**\n * Common duration parameters for presence motion components.\n */\nexport type PresenceDuration = {\n /** Time (ms) for the enter transition. */\n duration?: number;\n\n /** Time (ms) for the exit transition. Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n};\n\n/**\n * Common easing parameters for presence motion components.\n */\nexport type PresenceEasing = {\n /** Easing curve for the enter transition. */\n easing?: string;\n\n /** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */\n exitEasing?: string;\n};\n\n/**\n * Common opacity animation parameter for motion components.\n */\nexport type AnimateOpacity = {\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"mappings":"AAoDA;;CAEC,GACD,WAGE"}
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "blurAtom", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return blurAtom;
9
+ }
10
+ });
11
+ const _reactmotion = require("@fluentui/react-motion");
12
+ const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromRadius = '10px' })=>{
13
+ const keyframes = [
14
+ {
15
+ filter: `blur(${fromRadius})`
16
+ },
17
+ {
18
+ filter: 'blur(0px)'
19
+ }
20
+ ];
21
+ if (direction === 'exit') {
22
+ keyframes.reverse();
23
+ }
24
+ return {
25
+ keyframes,
26
+ duration,
27
+ easing
28
+ };
29
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface BlurAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromRadius = '10px',\n}: BlurAtomParams): AtomMotion => {\n const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: 'blur(0px)' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["blurAtom","direction","duration","easing","motionTokens","curveLinear","fromRadius","keyframes","filter","reverse"],"mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,aAAa,MAAM,EACJ;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEF,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEE,QAAQ;QAAY;KAAE;IAC9E,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromOpacity","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromOpacity","keyframes","opacity","reverse"],"mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromScale?: number;\n toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromScale = 0.9,\n toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromScale }, { scale: toScale }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","fromScale","toScale","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromScale?: number;\n toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromScale = 0.9,\n toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: fromScale }, { scale: toScale }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","fromScale","toScale","keyframes","scale","reverse"],"mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","fromX","fromY","keyframes","translate","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,CAAC,EAAEH,MAAM,CAAC,EAAEC,MAAM,CAAC;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","fromX","fromY","keyframes","translate","reverse"],"mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGH,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
@@ -0,0 +1,58 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "Blur", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return Blur;
9
+ }
10
+ });
11
+ const _reactmotion = require("@fluentui/react-motion");
12
+ const _fadeatom = require("../../atoms/fade-atom");
13
+ const _bluratom = require("../../atoms/blur-atom");
14
+ /**
15
+ * Define a presence motion for blur in/out
16
+ *
17
+ * @param fromRadius - The radius of pixels to blend into the blur. A length string, defaulting to '10px'.
18
+ * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).
19
+ * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.
20
+ * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the enter duration.
21
+ * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
22
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
23
+ */ const blurPresenceFn = ({ fromRadius = '10px', duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, animateOpacity = true })=>{
24
+ const enterAtoms = [
25
+ (0, _bluratom.blurAtom)({
26
+ direction: 'enter',
27
+ duration,
28
+ easing,
29
+ fromRadius
30
+ })
31
+ ];
32
+ const exitAtoms = [
33
+ (0, _bluratom.blurAtom)({
34
+ direction: 'exit',
35
+ duration: exitDuration,
36
+ easing: exitEasing,
37
+ fromRadius
38
+ })
39
+ ];
40
+ // Only add fade atoms if animateOpacity is true.
41
+ if (animateOpacity) {
42
+ enterAtoms.push((0, _fadeatom.fadeAtom)({
43
+ direction: 'enter',
44
+ duration,
45
+ easing
46
+ }));
47
+ exitAtoms.push((0, _fadeatom.fadeAtom)({
48
+ direction: 'exit',
49
+ duration: exitDuration,
50
+ easing: exitEasing
51
+ }));
52
+ }
53
+ return {
54
+ enter: enterAtoms,
55
+ exit: exitAtoms
56
+ };
57
+ };
58
+ const Blur = (0, _reactmotion.createPresenceComponent)(blurPresenceFn);
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Blur/Blur.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { blurAtom } from '../../atoms/blur-atom';\nimport { BlurParams } from './blur-types';\n\n/**\n * Define a presence motion for blur in/out\n *\n * @param fromRadius - The radius of pixels to blend into the blur. A length string, defaulting to '10px'.\n * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).\n * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.\n * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the enter duration.\n * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n fromRadius = '10px',\n duration = motionTokens.durationSlow,\n easing = motionTokens.curveDecelerateMin,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMin,\n animateOpacity = true,\n}) => {\n const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, fromRadius })];\n const exitAtoms = [\n blurAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromRadius,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["Blur","blurPresenceFn","fromRadius","duration","motionTokens","durationSlow","easing","curveDecelerateMin","exitDuration","exitEasing","curveAccelerateMin","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BA8CaA;;;eAAAA;;;6BA9C2D;0BAC/C;0BACA;AAGzB;;;;;;;;;CASC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,aAAa,MAAM,EACnBC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASX;YAAUG;YAAQJ;QAAW;KAAG;IACnF,MAAMa,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXX,UAAUK;YACVF,QAAQG;YACRP;QACF;KACD;IAED,iDAAiD;IACjD,IAAIS,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASX;YAAUG;QAAO;QAChES,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQX,UAAUK;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMf,OAAOoB,IAAAA,oCAAuB,EAACnB"}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "Blur", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return _Blur.Blur;
9
+ }
10
+ });
11
+ const _Blur = require("./Blur");
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Blur/index.ts"],"sourcesContent":["export { Blur } from './Blur';\nexport type { BlurParams } from './blur-types';\n"],"names":["Blur"],"mappings":";;;;+BAASA;;;eAAAA,UAAI;;;sBAAQ"}
@@ -85,7 +85,17 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
85
85
  exit: exitAtoms
86
86
  };
87
87
  }
88
- /** Define a presence motion for collapse/expand */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
88
+ /**
89
+ * Define a presence motion for collapse/expand
90
+ *
91
+ * @param element - The element to apply the collapse motion to
92
+ * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
93
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
94
+ * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
95
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
96
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
97
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
98
+ */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
89
99
  return createCollapseAtoms({
90
100
  element,
91
101
  orientation,
@@ -100,7 +110,21 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
100
110
  exitDelay: 0
101
111
  });
102
112
  };
103
- /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
113
+ /**
114
+ * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay
115
+ *
116
+ * @param element - The element to apply the collapse motion to
117
+ * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)
118
+ * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)
119
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value
120
+ * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)
121
+ * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry
122
+ * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry
123
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
124
+ * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)
125
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
126
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
127
+ */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
104
128
  return createCollapseAtoms({
105
129
  element,
106
130
  orientation,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n\n // Enter params\n sizeDuration,\n opacityDuration = sizeDuration,\n easing,\n delay,\n\n // Exit params\n exitSizeDuration,\n exitOpacityDuration = exitSizeDuration,\n exitEasing,\n exitDelay,\n}: {\n element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n delay,\n fill: 'both',\n });\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n}\n\n/** Define a presence motion for collapse/expand */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n element,\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEaseMax,\n exitDuration = duration,\n exitEasing = easing,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration: duration,\n opacityDuration: duration,\n easing,\n exitSizeDuration: exitDuration,\n exitOpacityDuration: exitDuration,\n exitEasing,\n delay: 0,\n exitDelay: 0,\n });\n};\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n element,\n sizeDuration = motionTokens.durationNormal,\n opacityDuration = motionTokens.durationSlower,\n easing = motionTokens.curveEasyEase,\n delay = motionTokens.durationNormal,\n exitSizeDuration = sizeDuration,\n exitOpacityDuration = opacityDuration,\n exitEasing = easing,\n exitDelay = motionTokens.durationSlower,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration,\n opacityDuration,\n easing,\n delay,\n exitSizeDuration,\n exitOpacityDuration,\n exitEasing,\n exitDelay,\n });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n\n // Enter params\n sizeDuration,\n opacityDuration = sizeDuration,\n easing,\n delay,\n\n // Exit params\n exitSizeDuration,\n exitOpacityDuration = exitSizeDuration,\n exitEasing,\n exitDelay,\n}: {\n element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n delay,\n fill: 'both',\n });\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n}\n\n/**\n * Define a presence motion for collapse/expand\n *\n * @param element - The element to apply the collapse motion to\n * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value\n * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n element,\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEaseMax,\n exitDuration = duration,\n exitEasing = easing,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration: duration,\n opacityDuration: duration,\n easing,\n exitSizeDuration: exitDuration,\n exitOpacityDuration: exitDuration,\n exitEasing,\n delay: 0,\n exitDelay: 0,\n });\n};\n\n/**\n * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay\n *\n * @param element - The element to apply the collapse motion to\n * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)\n * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value\n * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)\n * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry\n * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n element,\n sizeDuration = motionTokens.durationNormal,\n opacityDuration = motionTokens.durationSlower,\n easing = motionTokens.curveEasyEase,\n delay = motionTokens.durationNormal,\n exitSizeDuration = sizeDuration,\n exitOpacityDuration = opacityDuration,\n exitEasing = easing,\n exitDelay = motionTokens.durationSlower,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration,\n opacityDuration,\n easing,\n delay,\n exitSizeDuration,\n exitOpacityDuration,\n exitEasing,\n exitDelay,\n });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';\nimport { 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\ninterface SizeEnterAtomParams {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: SizeEnterAtomParams): 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\ninterface SizeExitAtomParams extends SizeEnterAtomParams {\n delay?: number;\n}\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: SizeExitAtomParams): 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 includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n // horizontal whitespace collapse\n if (orientation === 'horizontal') {\n return {\n paddingStart: 'paddingInlineStart',\n paddingEnd: 'paddingInlineEnd',\n marginStart: 'marginInlineStart',\n marginEnd: 'marginInlineEnd',\n };\n }\n // vertical whitespace collapse\n return {\n paddingStart: 'paddingBlockStart',\n paddingEnd: 'paddingBlockEnd',\n marginStart: 'marginBlockStart',\n marginEnd: 'marginBlockEnd',\n };\n};\n\ninterface WhitespaceAtomParams {\n direction: PresenceDirection;\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}\n\n/**\n * A collapse animates an element's height to zero,\n but the zero height does not eliminate padding or margin in the box model.\n So here we generate keyframes to animate those whitespace properties to zero.\n */\nexport const whitespaceAtom = ({\n direction,\n orientation,\n duration,\n easing,\n delay = 0,\n}: WhitespaceAtomParams): AtomMotion => {\n const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n // The keyframe with zero whitespace is at the start for enter and at the end for exit.\n const offset = direction === 'enter' ? 0 : 1;\n const keyframes = [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset }];\n\n const atom: AtomMotion = {\n keyframes,\n duration,\n easing,\n delay,\n };\n if (direction === 'exit') {\n atom.fill = 'forwards';\n }\n return atom;\n};\n"],"names":["sizeEnterAtom","sizeExitAtom","whitespaceAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction","atom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqBaA,aAAa;eAAbA;;IAwBAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAnGb,mBAAmB;AAEnB,MAAMC,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAUO,MAAMX,gBAAgB,CAAC,EAC5BI,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPS,WAAW,GAAG,EACM;IACpB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLU,WAAW;YACT;gBAAE,CAACT,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQK,QAAQ;gBAAQ,CAACT,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDK;QACAC;IACF;AACF;AAMO,MAAMZ,eAAe,CAAC,EAC3BG,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPY,QAAQ,CAAC,EACTH,WAAW,GAAG,EACK;IACnB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLU,WAAW;YACT;gBAAE,CAACT,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;SAClD;QACDK;QACAC;QACAK,MAAM;QACND;IACF;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACf;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLgB,cAAc;YACdC,YAAY;YACZC,aAAa;YACbC,WAAW;QACb;IACF;IACA,+BAA+B;IAC/B,OAAO;QACLH,cAAc;QACdC,YAAY;QACZC,aAAa;QACbC,WAAW;IACb;AACF;AAeO,MAAMrB,iBAAiB,CAAC,EAC7BsB,SAAS,EACTpB,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNI,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+Bf;IAC5F,uFAAuF;IACvF,MAAMY,SAASQ,cAAc,UAAU,IAAI;IAC3C,MAAMT,YAAY;QAAC;YAAE,CAACK,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKP;QAAO;KAAE;IAE5G,MAAMS,OAAmB;QACvBV;QACAH;QACAC;QACAI;IACF;IACA,IAAIO,cAAc,QAAQ;QACxBC,KAAKP,IAAI,GAAG;IACd;IACA,OAAOO;AACT"}
1
+ {"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';\nimport { 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\ninterface SizeEnterAtomParams {\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n element: HTMLElement;\n fromSize?: string;\n}\n\nexport const sizeEnterAtom = ({\n orientation,\n duration,\n easing,\n element,\n fromSize = '0',\n}: SizeEnterAtomParams): 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\ninterface SizeExitAtomParams extends SizeEnterAtomParams {\n delay?: number;\n}\n\nexport const sizeExitAtom = ({\n orientation,\n duration,\n easing,\n element,\n delay = 0,\n fromSize = '0',\n}: SizeExitAtomParams): 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 includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n // horizontal whitespace collapse\n if (orientation === 'horizontal') {\n return {\n paddingStart: 'paddingInlineStart',\n paddingEnd: 'paddingInlineEnd',\n marginStart: 'marginInlineStart',\n marginEnd: 'marginInlineEnd',\n };\n }\n // vertical whitespace collapse\n return {\n paddingStart: 'paddingBlockStart',\n paddingEnd: 'paddingBlockEnd',\n marginStart: 'marginBlockStart',\n marginEnd: 'marginBlockEnd',\n };\n};\n\ninterface WhitespaceAtomParams {\n direction: PresenceDirection;\n orientation: CollapseOrientation;\n duration: number;\n easing: string;\n delay?: number;\n}\n\n/**\n * A collapse animates an element's height to zero,\n but the zero height does not eliminate padding or margin in the box model.\n So here we generate keyframes to animate those whitespace properties to zero.\n */\nexport const whitespaceAtom = ({\n direction,\n orientation,\n duration,\n easing,\n delay = 0,\n}: WhitespaceAtomParams): AtomMotion => {\n const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n // The keyframe with zero whitespace is at the start for enter and at the end for exit.\n const offset = direction === 'enter' ? 0 : 1;\n const keyframes = [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset }];\n\n const atom: AtomMotion = {\n keyframes,\n duration,\n easing,\n delay,\n };\n if (direction === 'exit') {\n atom.fill = 'forwards';\n }\n return atom;\n};\n"],"names":["sizeEnterAtom","sizeExitAtom","whitespaceAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction","atom"],"mappings":";;;;;;;;;;;IAqBaA,aAAa;eAAbA;;IAwBAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAnGb,mBAAmB;AAEnB,MAAMC,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAUO,MAAMX,gBAAgB,CAAC,EAC5BI,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPS,WAAW,GAAG,EACM;IACpB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLU,WAAW;YACT;gBAAE,CAACT,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQK,QAAQ;gBAAQ,CAACT,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDK;QACAC;IACF;AACF;AAMO,MAAMZ,eAAe,CAAC,EAC3BG,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPY,QAAQ,CAAC,EACTH,WAAW,GAAG,EACK;IACnB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLU,WAAW;YACT;gBAAE,CAACT,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;SAClD;QACDK;QACAC;QACAK,MAAM;QACND;IACF;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACf;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLgB,cAAc;YACdC,YAAY;YACZC,aAAa;YACbC,WAAW;QACb;IACF;IACA,+BAA+B;IAC/B,OAAO;QACLH,cAAc;QACdC,YAAY;QACZC,aAAa;QACbC,WAAW;IACb;AACF;AAeO,MAAMrB,iBAAiB,CAAC,EAC7BsB,SAAS,EACTpB,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNI,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+Bf;IAC5F,uFAAuF;IACvF,MAAMY,SAASQ,cAAc,UAAU,IAAI;IAC3C,MAAMT,YAAY;QAAC;YAAE,CAACK,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKP;QAAO;KAAE;IAE5G,MAAMS,OAAmB;QACvBV;QACAH;QACAC;QACAI;IACF;IACA,IAAIO,cAAc,QAAQ;QACxBC,KAAKP,IAAI,GAAG;IACd;IACA,OAAOO;AACT"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,cAAc;eAAdA,wBAAc;;;0BAAQ"}
1
+ {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,cAAc;eAAdA,wBAAc;;;0BAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuBaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BALN;0BACkB;AAIlB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
1
+ {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IA8BaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BAZN;0BACkB;AAWlB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAAEC,WAAW;eAAXA,iBAAW;;IAAEC,UAAU;eAAVA,gBAAU;;;sBAAQ"}
1
+ {"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAAEC,WAAW;eAAXA,iBAAW;;IAAEC,UAAU;eAAVA,gBAAU;;;sBAAQ"}
@@ -22,7 +22,16 @@ _export(exports, {
22
22
  const _reactmotion = require("@fluentui/react-motion");
23
23
  const _fadeatom = require("../../atoms/fade-atom");
24
24
  const _scaleatom = require("../../atoms/scale-atom");
25
- /** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
25
+ /**
26
+ * Define a presence motion for scale in/out
27
+ *
28
+ * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).
29
+ * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.
30
+ * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
31
+ * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
32
+ * @param fromScale - The scale value to animate from. Defaults to `0.9`.
33
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
34
+ */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
26
35
  const enterAtoms = [
27
36
  (0, _scaleatom.scaleAtom)({
28
37
  direction: 'enter',
@@ -36,7 +45,7 @@ const _scaleatom = require("../../atoms/scale-atom");
36
45
  direction: 'exit',
37
46
  duration: exitDuration,
38
47
  easing: exitEasing,
39
- fromScale: fromScale
48
+ fromScale
40
49
  })
41
50
  ];
42
51
  // Only add fade atoms if animateOpacity is true.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromScale: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0CaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAvCN;0BACkB;2BACC;AAG1B,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRE,WAAWA;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;IACrCD,cAAcJ,yBAAY,CAACoB,YAAY;AACzC;AAEO,MAAMxB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;IACnCjB,cAAcJ,yBAAY,CAACC,cAAc;AAC3C"}
1
+ {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IAmDaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAhDN;0BACkB;2BACC;AAG1B;;;;;;;;;CASC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRE;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;IACrCD,cAAcJ,yBAAY,CAACoB,YAAY;AACzC;AAEO,MAAMxB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;IACnCjB,cAAcJ,yBAAY,CAACC,cAAc;AAC3C"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;;uBAAQ"}
1
+ {"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;;uBAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -22,7 +22,17 @@ _export(exports, {
22
22
  const _reactmotion = require("@fluentui/react-motion");
23
23
  const _fadeatom = require("../../atoms/fade-atom");
24
24
  const _slideatom = require("../../atoms/slide-atom");
25
- /** Define a presence motion for slide in/out */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
25
+ /**
26
+ * Define a presence motion for slide in/out
27
+ *
28
+ * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).
29
+ * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.
30
+ * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
31
+ * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
32
+ * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
33
+ * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
34
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
35
+ */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
26
36
  const enterAtoms = [
27
37
  (0, _slideatom.slideAtom)({
28
38
  direction: 'enter',
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/** Define a presence motion for slide in/out */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n fromX = '0px',\n fromY = '20px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, fromX, fromY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromX,\n fromY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA4CaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAzCN;0BACkB;2BACC;AAG1B,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DO,QAAQF,yBAAY,CAACoB,kBAAkB;IACvCf,YAAYL,yBAAY,CAACqB,kBAAkB;AAC7C;AAEO,MAAMzB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACsB,cAAc;AACvC"}
1
+ {"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.\n * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n fromX = '0px',\n fromY = '20px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, fromX, fromY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromX,\n fromY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IAsDaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAnDN;0BACkB;2BACC;AAG1B;;;;;;;;;;CAUC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASb;YAAUG;QAAO;QAChEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQb,UAAUK;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,QAAQuB,IAAAA,oCAAuB,EAACpB;AAEtC,MAAMD,cAAcsB,IAAAA,2CAA8B,EAACxB,OAAO;IAC/DO,QAAQF,yBAAY,CAACoB,kBAAkB;IACvCf,YAAYL,yBAAY,CAACqB,kBAAkB;AAC7C;AAEO,MAAMzB,eAAeuB,IAAAA,2CAA8B,EAACxB,OAAO;IAChEI,UAAUC,yBAAY,CAACsB,cAAc;AACvC"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Slide/index.ts"],"sourcesContent":["export { Slide, SlideRelaxed, SlideSnappy } from './Slide';\n"],"names":["Slide","SlideRelaxed","SlideSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;;uBAAQ"}
1
+ {"version":3,"sources":["../src/components/Slide/index.ts"],"sourcesContent":["export { Slide, SlideRelaxed, SlideSnappy } from './Slide';\n"],"names":["Slide","SlideRelaxed","SlideSnappy"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;;uBAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
@@ -9,6 +9,9 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ Blur: function() {
13
+ return _Blur.Blur;
14
+ },
12
15
  Collapse: function() {
13
16
  return _Collapse.Collapse;
14
17
  },
@@ -53,3 +56,4 @@ const _Collapse = require("./components/Collapse");
53
56
  const _Fade = require("./components/Fade");
54
57
  const _Scale = require("./components/Scale");
55
58
  const _Slide = require("./components/Slide");
59
+ const _Blur = require("./components/Blur");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAmCC,eAAe;eAAfA,yBAAe;;IAAhCC,eAAe;eAAfA,yBAAe;;IAA/BC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;;0BAHgD;sBAC7B;uBACG;uBACA"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\nexport { Blur } from './components/Blur';\n"],"names":["Blur","Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy"],"mappings":";;;;;;;;;;;IAISA,IAAI;eAAJA,UAAI;;IAJJC,QAAQ;eAARA,kBAAQ;;IAAmCC,eAAe;eAAfA,yBAAe;;IAAhCC,eAAe;eAAfA,yBAAe;;IAA/BC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;;0BAHgD;sBAC7B;uBACG;uBACA;sBAC5B"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-motion-components-preview",
3
- "version": "0.7.0",
3
+ "version": "0.8.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",