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

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 (54) hide show
  1. package/CHANGELOG.md +21 -1
  2. package/dist/index.d.ts +69 -67
  3. package/lib/atoms/fade-atom.js +3 -3
  4. package/lib/atoms/fade-atom.js.map +1 -1
  5. package/lib/atoms/scale-atom.js +27 -0
  6. package/lib/atoms/scale-atom.js.map +1 -0
  7. package/lib/atoms/slide-atom.js +27 -0
  8. package/lib/atoms/slide-atom.js.map +1 -0
  9. package/lib/components/Collapse/Collapse.js +93 -77
  10. package/lib/components/Collapse/Collapse.js.map +1 -1
  11. package/lib/components/Collapse/collapse-types.js.map +1 -1
  12. package/lib/components/Collapse/index.js +1 -1
  13. package/lib/components/Collapse/index.js.map +1 -1
  14. package/lib/components/Fade/Fade.js.map +1 -1
  15. package/lib/components/Fade/fade-types.js +1 -0
  16. package/lib/components/Fade/fade-types.js.map +1 -0
  17. package/lib/components/Scale/Scale.js +35 -41
  18. package/lib/components/Scale/Scale.js.map +1 -1
  19. package/lib/components/Scale/scale-types.js +1 -0
  20. package/lib/components/Scale/scale-types.js.map +1 -0
  21. package/lib/components/Slide/Slide.js +48 -0
  22. package/lib/components/Slide/Slide.js.map +1 -0
  23. package/lib/components/Slide/index.js +1 -0
  24. package/lib/components/Slide/index.js.map +1 -0
  25. package/lib/components/Slide/slide-types.js +1 -0
  26. package/lib/components/Slide/slide-types.js.map +1 -0
  27. package/lib/index.js +2 -1
  28. package/lib/index.js.map +1 -1
  29. package/lib-commonjs/atoms/fade-atom.js +2 -2
  30. package/lib-commonjs/atoms/fade-atom.js.map +1 -1
  31. package/lib-commonjs/atoms/scale-atom.js +29 -0
  32. package/lib-commonjs/atoms/scale-atom.js.map +1 -0
  33. package/lib-commonjs/atoms/slide-atom.js +29 -0
  34. package/lib-commonjs/atoms/slide-atom.js.map +1 -0
  35. package/lib-commonjs/components/Collapse/Collapse.js +92 -82
  36. package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
  37. package/lib-commonjs/components/Collapse/index.js +0 -6
  38. package/lib-commonjs/components/Collapse/index.js.map +1 -1
  39. package/lib-commonjs/components/Fade/Fade.js.map +1 -1
  40. package/lib-commonjs/components/Fade/fade-types.js +4 -0
  41. package/lib-commonjs/components/Fade/fade-types.js.map +1 -0
  42. package/lib-commonjs/components/Scale/Scale.js +35 -41
  43. package/lib-commonjs/components/Scale/Scale.js.map +1 -1
  44. package/lib-commonjs/components/Scale/scale-types.js +4 -0
  45. package/lib-commonjs/components/Scale/scale-types.js.map +1 -0
  46. package/lib-commonjs/components/Slide/Slide.js +69 -0
  47. package/lib-commonjs/components/Slide/Slide.js.map +1 -0
  48. package/lib-commonjs/components/Slide/index.js +22 -0
  49. package/lib-commonjs/components/Slide/index.js.map +1 -0
  50. package/lib-commonjs/components/Slide/slide-types.js +4 -0
  51. package/lib-commonjs/components/Slide/slide-types.js.map +1 -0
  52. package/lib-commonjs/index.js +8 -4
  53. package/lib-commonjs/index.js.map +1 -1
  54. package/package.json +1 -1
@@ -1,53 +1,47 @@
1
1
  import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
2
- /** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, fromScale = 0.9, animateOpacity = true })=>{
3
- const fromOpacity = animateOpacity ? 0 : 1;
4
- const toOpacity = 1;
5
- const toScale = 1;
6
- // TODO: use fadeAtom
7
- // TODO: make scaleAtom
8
- const enterKeyframes = [
9
- {
10
- opacity: fromOpacity,
11
- transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
12
- visibility: 'visible'
13
- },
14
- {
15
- opacity: toOpacity,
16
- transform: `scale3d(${toScale}, ${toScale}, 1)`
17
- }
18
- ];
19
- const exitKeyframes = [
20
- {
21
- opacity: toOpacity,
22
- transform: `scale3d(${toScale}, ${toScale}, 1)`
23
- },
24
- {
25
- opacity: fromOpacity,
26
- transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
27
- visibility: 'hidden'
28
- }
29
- ];
30
- return {
31
- enter: {
2
+ import { fadeAtom } from '../../atoms/fade-atom';
3
+ import { scaleAtom } from '../../atoms/scale-atom';
4
+ /** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
5
+ const enterAtoms = [
6
+ scaleAtom({
7
+ direction: 'enter',
32
8
  duration,
33
9
  easing,
34
- keyframes: enterKeyframes
35
- },
36
- exit: {
10
+ fromScale: fromScale
11
+ })
12
+ ];
13
+ const exitAtoms = [
14
+ scaleAtom({
15
+ direction: 'exit',
37
16
  duration: exitDuration,
38
17
  easing: exitEasing,
39
- keyframes: exitKeyframes
40
- }
18
+ fromScale: fromScale
19
+ })
20
+ ];
21
+ // Only add fade atoms if animateOpacity is true.
22
+ if (animateOpacity) {
23
+ enterAtoms.push(fadeAtom({
24
+ direction: 'enter',
25
+ duration,
26
+ easing
27
+ }));
28
+ exitAtoms.push(fadeAtom({
29
+ direction: 'exit',
30
+ duration: exitDuration,
31
+ easing: exitEasing
32
+ }));
33
+ }
34
+ return {
35
+ enter: enterAtoms,
36
+ exit: exitAtoms
41
37
  };
42
38
  };
43
39
  /** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scalePresenceFn);
44
40
  export const ScaleSnappy = createPresenceComponentVariant(Scale, {
45
- duration: motionTokens.durationFast,
46
- easing: motionTokens.curveDecelerateMax,
47
- exitEasing: motionTokens.curveAccelerateMax
41
+ duration: motionTokens.durationNormal,
42
+ exitDuration: motionTokens.durationFast
48
43
  });
49
44
  export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
50
- duration: motionTokens.durationGentle,
51
- easing: motionTokens.curveDecelerateMid,
52
- exitEasing: motionTokens.curveAccelerateMid
45
+ duration: motionTokens.durationSlow,
46
+ exitDuration: motionTokens.durationGentle
53
47
  });
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\ntype ScaleVariantParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationNormal` value (200 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMid` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMid` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const toScale = 1;\n\n // TODO: use fadeAtom\n // TODO: make scaleAtom\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,\n easing,\n keyframes: enterKeyframes,\n },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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.durationFast,\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationGentle,\n easing: motionTokens.curveDecelerateMid,\n exitEasing: motionTokens.curveAccelerateMid,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","scalePresenceFn","duration","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromScale","animateOpacity","fromOpacity","toOpacity","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","keyframes","exit","Scale","ScaleSnappy","durationFast","curveDecelerateMax","curveAccelerateMax","ScaleRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAsBhC,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWJ,aAAaK,cAAc,EACtCC,SAASN,aAAaO,kBAAkB,EACxCC,eAAeJ,QAAQ,EACvBK,aAAaT,aAAaU,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,UAAU;IAEhB,qBAAqB;IACrB,uBAAuB;IACvB,MAAMC,iBAAiB;QACrB;YAAEC,SAASJ;YAAaK,WAAW,CAAC,QAAQ,EAAEP,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEQ,YAAY;QAAU;QACnG;YAAEF,SAASH;YAAWI,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASH;YAAWI,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASJ;YAAaK,WAAW,CAAC,QAAQ,EAAEP,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEQ,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLjB;YACAE;YACAgB,WAAWN;QACb;QACAO,MAAM;YAAEnB,UAAUI;YAAcF,QAAQG;YAAYa,WAAWF;QAAc;IAC/E;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQvB,wBAAwBE,iBAAiB;AAE9D,OAAO,MAAMsB,cAAcvB,+BAA+BsB,OAAO;IAC/DpB,UAAUJ,aAAa0B,YAAY;IACnCpB,QAAQN,aAAa2B,kBAAkB;IACvClB,YAAYT,aAAa4B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe3B,+BAA+BsB,OAAO;IAChEpB,UAAUJ,aAAa8B,cAAc;IACrCxB,QAAQN,aAAaO,kBAAkB;IACvCE,YAAYT,aAAaU,kBAAkB;AAC7C,GAAG"}
1
+ {"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n fromScale = 0.9,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromScale: fromScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n fromScale: fromScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQM,WAAWA;QAAU;KAAG;IAC9F,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRE,WAAWA;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLQ,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/DhB,UAAUN,aAAaW,cAAc;IACrCD,cAAcV,aAAawB,YAAY;AACzC,GAAG;AAEH,OAAO,MAAMC,eAAevB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa0B,YAAY;IACnChB,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Scale/scale-types.ts"],"sourcesContent":["export type ScaleParams = {\n /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value. */\n exitEasing?: string;\n\n /** The scale value to animate from. Defaults to `0.9`. */\n fromScale?: number;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAkBE"}
@@ -0,0 +1,48 @@
1
+ import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
2
+ import { fadeAtom } from '../../atoms/fade-atom';
3
+ import { slideAtom } from '../../atoms/slide-atom';
4
+ /** Define a presence motion for slide in/out */ const slidePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
5
+ const enterAtoms = [
6
+ slideAtom({
7
+ direction: 'enter',
8
+ duration,
9
+ easing,
10
+ fromX,
11
+ fromY
12
+ })
13
+ ];
14
+ const exitAtoms = [
15
+ slideAtom({
16
+ direction: 'exit',
17
+ duration: exitDuration,
18
+ easing: exitEasing,
19
+ fromX,
20
+ fromY
21
+ })
22
+ ];
23
+ // Only add fade atoms if animateOpacity is true.
24
+ if (animateOpacity) {
25
+ enterAtoms.push(fadeAtom({
26
+ direction: 'enter',
27
+ duration,
28
+ easing
29
+ }));
30
+ exitAtoms.push(fadeAtom({
31
+ direction: 'exit',
32
+ duration: exitDuration,
33
+ easing: exitEasing
34
+ }));
35
+ }
36
+ return {
37
+ enter: enterAtoms,
38
+ exit: exitAtoms
39
+ };
40
+ };
41
+ /** A React component that applies slide in/out transitions to its children. */ export const Slide = createPresenceComponent(slidePresenceFn);
42
+ export const SlideSnappy = createPresenceComponentVariant(Slide, {
43
+ easing: motionTokens.curveDecelerateMax,
44
+ exitEasing: motionTokens.curveAccelerateMax
45
+ });
46
+ export const SlideRelaxed = createPresenceComponentVariant(Slide, {
47
+ duration: motionTokens.durationGentle
48
+ });
@@ -0,0 +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":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","slideAtom","slidePresenceFn","duration","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromX","fromY","animateOpacity","enterAtoms","direction","exitAtoms","push","enter","exit","Slide","SlideSnappy","curveDecelerateMax","curveAccelerateMax","SlideRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAGnD,8CAA8C,GAC9C,MAAMC,kBAAiD,CAAC,EACtDC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeJ,QAAQ,EACvBK,aAAaX,aAAaY,kBAAkB,EAC5CC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQK;YAAOC;QAAM;KAAG;IACtF,MAAMI,YAAY;QAChBd,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQG;YACRE;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWG,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEU,UAAUC,IAAI,CAAChB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQG;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAOJ;QACPK,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQrB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMkB,cAAcrB,+BAA+BoB,OAAO;IAC/Dd,QAAQR,aAAawB,kBAAkB;IACvCb,YAAYX,aAAayB,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAexB,+BAA+BoB,OAAO;IAChEhB,UAAUN,aAAa2B,cAAc;AACvC,GAAG"}
@@ -0,0 +1 @@
1
+ export { Slide, SlideRelaxed, SlideSnappy } from './Slide';
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Slide/index.ts"],"sourcesContent":["export { Slide, SlideRelaxed, SlideSnappy } from './Slide';\n"],"names":["Slide","SlideRelaxed","SlideSnappy"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,YAAY,EAAEC,WAAW,QAAQ,UAAU"}
@@ -0,0 +1 @@
1
+ export { };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Slide/slide-types.ts"],"sourcesContent":["export type SlideParams = {\n /** Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (250 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value. */\n exitEasing?: string;\n\n /** The X translate value with units to animate from. Defaults to `'0px'`. */\n fromX?: string;\n\n /** The Y translate value with units to animate from. Defaults to `'20px'`. */\n fromY?: string;\n\n /** Whether to animate the opacity. Defaults to `true`. */\n animateOpacity?: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAAA,WAqBE"}
package/lib/index.js CHANGED
@@ -1,3 +1,4 @@
1
- export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
1
+ export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';
2
2
  export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
3
3
  export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';
4
+ export { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseSnappy,\n CollapseRelaxed,\n CollapseDelayed,\n createCollapsePresence,\n createCollapseDelayedPresence,\n} from './components/Collapse';\nexport type { CollapseRuntimeParams } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeRelaxed","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,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed } from './components/Slide';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed"],"rangeMappings":";;;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,eAAe,EAAEC,eAAe,QAAQ,wBAAwB;AACnG,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAQ,oBAAoB;AAClE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAAQ,qBAAqB"}
@@ -9,10 +9,10 @@ Object.defineProperty(exports, "fadeAtom", {
9
9
  }
10
10
  });
11
11
  const _reactmotion = require("@fluentui/react-motion");
12
- const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0 })=>{
12
+ const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromOpacity = 0 })=>{
13
13
  const keyframes = [
14
14
  {
15
- opacity: fromValue
15
+ opacity: fromOpacity
16
16
  },
17
17
  {
18
18
  opacity: 1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromValue","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
1
+ {"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromOpacity = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromOpacity }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","fromOpacity","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB+C;AAiBrD,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,cAAc,CAAC,EACA;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAY;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF"}
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "scaleAtom", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return scaleAtom;
9
+ }
10
+ });
11
+ const _reactmotion = require("@fluentui/react-motion");
12
+ const scaleAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromScale = 0.9, toScale = 1 })=>{
13
+ const keyframes = [
14
+ {
15
+ scale: fromScale
16
+ },
17
+ {
18
+ scale: toScale
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/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"}
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "slideAtom", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return slideAtom;
9
+ }
10
+ });
11
+ const _reactmotion = require("@fluentui/react-motion");
12
+ const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromX = '0px', fromY = '20px' })=>{
13
+ const keyframes = [
14
+ {
15
+ translate: `${fromX} ${fromY}`
16
+ },
17
+ {
18
+ translate: '0px 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/slide-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface SlideAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromX?: string;\n fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromX = '0px',\n fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","fromX","fromY","keyframes","translate","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,CAAC,EAAEH,MAAM,CAAC,EAAEC,MAAM,CAAC;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}
@@ -20,96 +20,106 @@ _export(exports, {
20
20
  },
21
21
  CollapseSnappy: function() {
22
22
  return CollapseSnappy;
23
- },
24
- createCollapseDelayedPresence: function() {
25
- return createCollapseDelayedPresence;
26
- },
27
- createCollapsePresence: function() {
28
- return createCollapsePresence;
29
23
  }
30
24
  });
31
25
  const _reactmotion = require("@fluentui/react-motion");
32
26
  const _collapseatoms = require("./collapse-atoms");
33
27
  const _fadeatom = require("../../atoms/fade-atom");
34
- const createCollapseDelayedPresence = ({ // enter
35
- enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
36
- exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
37
- // ----- ENTER -----
38
- // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
39
- const enterAtoms = [
40
- (0, _collapseatoms.sizeEnterAtom)({
41
- orientation,
42
- duration: enterSizeDuration,
43
- easing: enterEasing,
44
- element
45
- }),
46
- (0, _collapseatoms.whitespaceAtom)({
47
- direction: 'enter',
48
- orientation,
49
- duration: enterSizeDuration,
50
- easing: enterEasing
51
- })
52
- ];
53
- // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
54
- if (animateOpacity) {
55
- enterAtoms.push({
56
- ...(0, _fadeatom.fadeAtom)({
57
- direction: 'enter',
58
- duration: enterOpacityDuration,
59
- easing: enterEasing
60
- }),
61
- delay: enterDelay,
62
- fill: 'both'
63
- });
64
- }
65
- // ----- EXIT -----
66
- // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
67
- const exitAtoms = [];
68
- // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
69
- if (animateOpacity) {
70
- exitAtoms.push((0, _fadeatom.fadeAtom)({
71
- direction: 'exit',
72
- duration: exitOpacityDuration,
73
- easing: exitEasing
74
- }));
75
- }
76
- exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
28
+ /** Internal helper to create collapse atoms with shared logic */ function createCollapseAtoms({ element, orientation, animateOpacity, // Enter params
29
+ sizeDuration, opacityDuration = sizeDuration, easing, delay, // Exit params
30
+ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay }) {
31
+ // ----- ENTER -----
32
+ // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
33
+ const enterAtoms = [
34
+ (0, _collapseatoms.sizeEnterAtom)({
77
35
  orientation,
78
- duration: exitSizeDuration,
79
- easing: exitEasing,
80
- element,
81
- delay: exitDelay
82
- }), (0, _collapseatoms.whitespaceAtom)({
83
- direction: 'exit',
36
+ duration: sizeDuration,
37
+ easing,
38
+ element
39
+ }),
40
+ (0, _collapseatoms.whitespaceAtom)({
41
+ direction: 'enter',
84
42
  orientation,
85
- duration: exitSizeDuration,
86
- easing: exitEasing,
87
- delay: exitDelay
43
+ duration: sizeDuration,
44
+ easing
45
+ })
46
+ ];
47
+ // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
48
+ if (animateOpacity) {
49
+ enterAtoms.push({
50
+ ...(0, _fadeatom.fadeAtom)({
51
+ direction: 'enter',
52
+ duration: opacityDuration,
53
+ easing
54
+ }),
55
+ delay,
56
+ fill: 'both'
57
+ });
58
+ }
59
+ // ----- EXIT -----
60
+ // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
61
+ const exitAtoms = [];
62
+ // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
63
+ if (animateOpacity) {
64
+ exitAtoms.push((0, _fadeatom.fadeAtom)({
65
+ direction: 'exit',
66
+ duration: exitOpacityDuration,
67
+ easing: exitEasing
88
68
  }));
89
- return {
90
- enter: enterAtoms,
91
- exit: exitAtoms
92
- };
69
+ }
70
+ exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
71
+ orientation,
72
+ duration: exitSizeDuration,
73
+ easing: exitEasing,
74
+ element,
75
+ delay: exitDelay
76
+ }), (0, _collapseatoms.whitespaceAtom)({
77
+ direction: 'exit',
78
+ orientation,
79
+ duration: exitSizeDuration,
80
+ easing: exitEasing,
81
+ delay: exitDelay
82
+ }));
83
+ return {
84
+ enter: enterAtoms,
85
+ exit: exitAtoms
93
86
  };
94
- const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
95
- // where the delays are zero, and the size and opacity durations are equal.
96
- createCollapseDelayedPresence({
97
- enterSizeDuration: enterDuration,
98
- enterEasing,
87
+ }
88
+ /** Define a presence motion for collapse/expand */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
89
+ return createCollapseAtoms({
90
+ element,
91
+ orientation,
92
+ animateOpacity,
93
+ sizeDuration: duration,
94
+ opacityDuration: duration,
95
+ easing,
99
96
  exitSizeDuration: exitDuration,
100
- exitEasing
97
+ exitOpacityDuration: exitDuration,
98
+ exitEasing,
99
+ delay: 0,
100
+ exitDelay: 0
101
101
  });
102
- const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
103
- const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
104
- enterDuration: _reactmotion.motionTokens.durationFast
105
- }));
106
- const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
107
- enterDuration: _reactmotion.motionTokens.durationSlower
108
- }));
109
- const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
110
- enterSizeDuration: _reactmotion.motionTokens.durationNormal,
111
- enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
112
- enterDelay: _reactmotion.motionTokens.durationNormal,
113
- exitDelay: _reactmotion.motionTokens.durationSlower,
114
- enterEasing: _reactmotion.motionTokens.curveEasyEase
115
- }));
102
+ };
103
+ /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
104
+ return createCollapseAtoms({
105
+ element,
106
+ orientation,
107
+ animateOpacity,
108
+ sizeDuration,
109
+ opacityDuration,
110
+ easing,
111
+ delay,
112
+ exitSizeDuration,
113
+ exitOpacityDuration,
114
+ exitEasing,
115
+ exitDelay
116
+ });
117
+ };
118
+ const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
119
+ const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
120
+ duration: _reactmotion.motionTokens.durationFast
121
+ });
122
+ const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
123
+ duration: _reactmotion.motionTokens.durationSlower
124
+ });
125
+ const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(collapseDelayedPresenceFn);
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\nimport type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n CollapseDelayedVariantParams,\n CollapseRuntimeParams\n> =\n ({\n // enter\n enterSizeDuration = motionTokens.durationNormal,\n enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n enterEasing = motionTokens.curveEasyEaseMax,\n enterDelay = 0,\n\n // exit: durations and easing default to enter values for symmetry\n exitSizeDuration = enterSizeDuration,\n exitOpacityDuration = enterOpacityDuration,\n exitEasing = enterEasing,\n exitDelay = 0,\n } = {}) =>\n ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({ orientation, duration: enterSizeDuration, easing: enterEasing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: enterSizeDuration, easing: enterEasing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: enterOpacityDuration, easing: enterEasing }),\n delay: enterDelay,\n fill: 'both',\n });\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n enterDuration = motionTokens.durationNormal,\n enterEasing = motionTokens.curveEasyEaseMax,\n exitDuration = enterDuration,\n exitEasing = enterEasing,\n} = {}) =>\n // Implement a regular collapse as a special case of the delayed collapse,\n // where the delays are zero, and the size and opacity durations are equal.\n createCollapseDelayedPresence({\n enterSizeDuration: enterDuration,\n enterEasing,\n exitSizeDuration: exitDuration,\n exitEasing,\n });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseRelaxed = createPresenceComponent(\n createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n createCollapseDelayedPresence({\n enterSizeDuration: motionTokens.durationNormal,\n enterOpacityDuration: motionTokens.durationSlower,\n enterDelay: motionTokens.durationNormal,\n exitDelay: motionTokens.durationSlower,\n enterEasing: motionTokens.curveEasyEase,\n }),\n);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence","enterSizeDuration","motionTokens","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","sizeEnterAtom","duration","easing","whitespaceAtom","direction","push","fadeAtom","delay","fill","exitAtoms","sizeExitAtom","enter","exit","enterDuration","exitDuration","createPresenceComponent","durationFast","durationSlower","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiFaA,QAAQ;eAARA;;IAUAC,eAAe;eAAfA;;IAJAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;IA5EAC,6BAA6B;eAA7BA;;IA0DAC,sBAAsB;eAAtBA;;;6BAjEqD;+BAGN;0BACnC;AAGlB,MAAMD,gCAIX,CAAC,EACC,QAAQ;AACRE,oBAAoBC,yBAAY,CAACC,cAAc,EAC/CC,uBAAuBH,iBAAiB,EACxCI,cAAcH,yBAAY,CAACI,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBP,iBAAiB,EACpCQ,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BC,IAAAA,4BAAa,EAAC;gBAAEF;gBAAaG,UAAUhB;gBAAmBiB,QAAQb;gBAAaO;YAAQ;YACvFO,IAAAA,6BAAc,EAAC;gBAAEC,WAAW;gBAASN;gBAAaG,UAAUhB;gBAAmBiB,QAAQb;YAAY;SACpG;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWM,IAAI,CAAC;gBACd,GAAGC,IAAAA,kBAAQ,EAAC;oBAAEF,WAAW;oBAASH,UAAUb;oBAAsBc,QAAQb;gBAAY,EAAE;gBACxFkB,OAAOhB;gBACPiB,MAAM;YACR;QACF;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMC,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIZ,gBAAgB;YAClBY,UAAUJ,IAAI,CAACC,IAAAA,kBAAQ,EAAC;gBAAEF,WAAW;gBAAQH,UAAUR;gBAAqBS,QAAQR;YAAW;QACjG;QACAe,UAAUJ,IAAI,CACZK,IAAAA,2BAAY,EAAC;YAAEZ;YAAaG,UAAUT;YAAkBU,QAAQR;YAAYE;YAASW,OAAOZ;QAAU,IACtGQ,IAAAA,6BAAc,EAAC;YACbC,WAAW;YACXN;YACAG,UAAUT;YACVU,QAAQR;YACRa,OAAOZ;QACT;QAGF,OAAO;YACLgB,OAAOZ;YACPa,MAAMH;QACR;IACF;AAGK,MAAMzB,yBAAgG,CAAC,EAC5G6B,gBAAgB3B,yBAAY,CAACC,cAAc,EAC3CE,cAAcH,yBAAY,CAACI,gBAAgB,EAC3CwB,eAAeD,aAAa,EAC5BnB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EN,8BAA8B;QAC5BE,mBAAmB4B;QACnBxB;QACAG,kBAAkBsB;QAClBpB;IACF;AAGK,MAAMf,WAAWoC,IAAAA,oCAAuB,EAAC/B;AAEzC,MAAMF,iBAAiBiC,IAAAA,oCAAuB,EACnD/B,uBAAuB;IAAE6B,eAAe3B,yBAAY,CAAC8B,YAAY;AAAC;AAG7D,MAAMnC,kBAAkBkC,IAAAA,oCAAuB,EACpD/B,uBAAuB;IAAE6B,eAAe3B,yBAAY,CAAC+B,cAAc;AAAC;AAG/D,MAAMrC,kBAAkBmC,IAAAA,oCAAuB,EACpDhC,8BAA8B;IAC5BE,mBAAmBC,yBAAY,CAACC,cAAc;IAC9CC,sBAAsBF,yBAAY,CAAC+B,cAAc;IACjD1B,YAAYL,yBAAY,CAACC,cAAc;IACvCQ,WAAWT,yBAAY,CAAC+B,cAAc;IACtC5B,aAAaH,yBAAY,CAACgC,aAAa;AACzC"}
1
+ {"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n\n // Enter params\n sizeDuration,\n opacityDuration = sizeDuration,\n easing,\n delay,\n\n // Exit params\n exitSizeDuration,\n exitOpacityDuration = exitSizeDuration,\n exitEasing,\n exitDelay,\n}: {\n element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\n // ----- ENTER -----\n // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n const enterAtoms: AtomMotion[] = [\n sizeEnterAtom({ orientation, duration: sizeDuration, easing, element }),\n whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n ];\n // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n enterAtoms.push({\n ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n delay,\n fill: 'both',\n });\n }\n\n // ----- EXIT -----\n // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n const exitAtoms: AtomMotion[] = [];\n // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n if (animateOpacity) {\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n }\n\n exitAtoms.push(\n sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n whitespaceAtom({\n direction: 'exit',\n orientation,\n duration: exitSizeDuration,\n easing: exitEasing,\n delay: exitDelay,\n }),\n );\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n}\n\n/** Define a presence motion for collapse/expand */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n element,\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEaseMax,\n exitDuration = duration,\n exitEasing = easing,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration: duration,\n opacityDuration: duration,\n easing,\n exitSizeDuration: exitDuration,\n exitOpacityDuration: exitDuration,\n exitEasing,\n delay: 0,\n exitDelay: 0,\n });\n};\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n element,\n sizeDuration = motionTokens.durationNormal,\n opacityDuration = motionTokens.durationSlower,\n easing = motionTokens.curveEasyEase,\n delay = motionTokens.durationNormal,\n exitSizeDuration = sizeDuration,\n exitOpacityDuration = opacityDuration,\n exitEasing = easing,\n exitDelay = motionTokens.durationSlower,\n animateOpacity = true,\n orientation = 'vertical',\n}) => {\n return createCollapseAtoms({\n element,\n orientation,\n animateOpacity,\n sizeDuration,\n opacityDuration,\n easing,\n delay,\n exitSizeDuration,\n exitOpacityDuration,\n exitEasing,\n exitDelay,\n });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8HaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BA1HN;+BAEqD;0BACnC;AAEzB,+DAA+D,GAC/D,SAASC,oBAAoB,EAC3BC,OAAO,EACPC,WAAW,EACXC,cAAc,EAEd,eAAe;AACfC,YAAY,EACZC,kBAAkBD,YAAY,EAC9BE,MAAM,EACNC,KAAK,EAEL,cAAc;AACdC,gBAAgB,EAChBC,sBAAsBD,gBAAgB,EACtCE,UAAU,EACVC,SAAS,EAGwB;IACjC,oBAAoB;IACpB,0FAA0F;IAC1F,MAAMC,aAA2B;QAC/BC,IAAAA,4BAAa,EAAC;YAAEX;YAAaY,UAAUV;YAAcE;YAAQL;QAAQ;QACrEc,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASd;YAAaY,UAAUV;YAAcE;QAAO;KAClF;IACD,+EAA+E;IAC/E,IAAIH,gBAAgB;QAClBS,WAAWK,IAAI,CAAC;YACd,GAAGC,IAAAA,kBAAQ,EAAC;gBAAEF,WAAW;gBAASF,UAAUT;gBAAiBC;YAAO,EAAE;YACtEC;YACAY,MAAM;QACR;IACF;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,MAAMC,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIjB,gBAAgB;QAClBiB,UAAUH,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQF,UAAUL;YAAqBH,QAAQI;QAAW;IACjG;IAEAU,UAAUH,IAAI,CACZI,IAAAA,2BAAY,EAAC;QAAEnB;QAAaY,UAAUN;QAAkBF,QAAQI;QAAYT;QAASM,OAAOI;IAAU,IACtGI,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXd;QACAY,UAAUN;QACVF,QAAQI;QACRH,OAAOI;IACT;IAGF,OAAO;QACLW,OAAOV;QACPW,MAAMH;IACR;AACF;AAEA,iDAAiD,GACjD,MAAMI,qBAAuD,CAAC,EAC5DvB,OAAO,EACPa,WAAWW,yBAAY,CAACC,cAAc,EACtCpB,SAASmB,yBAAY,CAACE,gBAAgB,EACtCC,eAAed,QAAQ,EACvBJ,aAAaJ,MAAM,EACnBH,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC,cAAcU;QACdT,iBAAiBS;QACjBR;QACAE,kBAAkBoB;QAClBnB,qBAAqBmB;QACrBlB;QACAH,OAAO;QACPI,WAAW;IACb;AACF;AAEA,gHAAgH,GAChH,MAAMkB,4BAAqE,CAAC,EAC1E5B,OAAO,EACPG,eAAeqB,yBAAY,CAACC,cAAc,EAC1CrB,kBAAkBoB,yBAAY,CAACK,cAAc,EAC7CxB,SAASmB,yBAAY,CAACM,aAAa,EACnCxB,QAAQkB,yBAAY,CAACC,cAAc,EACnClB,mBAAmBJ,YAAY,EAC/BK,sBAAsBJ,eAAe,EACrCK,aAAaJ,MAAM,EACnBK,YAAYc,yBAAY,CAACK,cAAc,EACvC3B,iBAAiB,IAAI,EACrBD,cAAc,UAAU,EACzB;IACC,OAAOF,oBAAoB;QACzBC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;AACF;AAGO,MAAMf,WAAWoC,IAAAA,oCAAuB,EAACR;AAEzC,MAAMzB,iBAAiBkC,IAAAA,2CAA8B,EAACrC,UAAU;IACrEkB,UAAUW,yBAAY,CAACS,YAAY;AACrC;AAEO,MAAMpC,kBAAkBmC,IAAAA,2CAA8B,EAACrC,UAAU;IACtEkB,UAAUW,yBAAY,CAACK,cAAc;AACvC;AAGO,MAAMjC,kBAAkBmC,IAAAA,oCAAuB,EAACH"}
@@ -20,12 +20,6 @@ _export(exports, {
20
20
  },
21
21
  CollapseSnappy: function() {
22
22
  return _Collapse.CollapseSnappy;
23
- },
24
- createCollapseDelayedPresence: function() {
25
- return _Collapse.createCollapseDelayedPresence;
26
- },
27
- createCollapsePresence: function() {
28
- return _Collapse.createCollapsePresence;
29
23
  }
30
24
  });
31
25
  const _Collapse = require("./Collapse");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export {\n Collapse,\n CollapseDelayed,\n CollapseRelaxed,\n CollapseSnappy,\n createCollapseDelayedPresence,\n createCollapsePresence,\n} from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IACRC,eAAe;eAAfA,yBAAe;;IACfC,eAAe;eAAfA,yBAAe;;IACfC,cAAc;eAAdA,wBAAc;;IACdC,6BAA6B;eAA7BA,uCAA6B;;IAC7BC,sBAAsB;eAAtBA,gCAAsB;;;0BACjB"}
1
+ {"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,cAAc;eAAdA,wBAAc;;;0BAAQ"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\ntype FadeVariantParams = {\n /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n duration?: number;\n\n /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value. */\n easing?: string;\n\n /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */\n exitDuration?: number;\n\n /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry. */\n exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeVariantParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoCaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BAlBN;0BACkB;AAiBlB,MAAMA,iBAAsD,CAAC,EAClEC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
1
+ {"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/** Define a presence motion for fade in/out */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n exitDuration = duration,\n exitEasing = easing,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing }),\n exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuBaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAfAC,cAAc;eAAdA;;;6BALN;0BACkB;AAIlB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,eAAeL,QAAQ,EACvBM,aAAaH,MAAM,EACpB;IACC,OAAO;QACLI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAST;YAAUG;QAAO;QACvDO,MAAMF,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQT,UAAUK;YAAcF,QAAQG;QAAW;IACjF;AACF;AAGO,MAAMV,OAAOe,IAAAA,oCAAuB,EAACZ;AAErC,MAAMD,aAAac,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACY,YAAY;AAAC;AAE9F,MAAMhB,cAAce,IAAAA,2CAA8B,EAAChB,MAAM;IAAEI,UAAUC,yBAAY,CAACa,cAAc;AAAC"}
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}