@fluentui/react-motion-components-preview 0.6.2 → 0.8.0

package/lib-commonjs/components/Blur/index.js.map

@@ -0,0 +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"}

package/lib-commonjs/components/Collapse/Collapse.js

@@ -20,96 +20,130 @@ _export(exports, {
     },
     CollapseSnappy: function() {
         return CollapseSnappy;
-    },
-    createCollapseDelayedPresence: function() {
-        return createCollapseDelayedPresence;
-    },
-    createCollapsePresence: function() {
-        return createCollapsePresence;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
 const _collapseatoms = require("./collapse-atoms");
 const _fadeatom = require("../../atoms/fade-atom");
-const createCollapseDelayedPresence = ({ // enter
-enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
-exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
-        // ----- ENTER -----
-        // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
-        const enterAtoms = [
-            (0, _collapseatoms.sizeEnterAtom)({
-                orientation,
-                duration: enterSizeDuration,
-                easing: enterEasing,
-                element
-            }),
-            (0, _collapseatoms.whitespaceAtom)({
-                direction: 'enter',
-                orientation,
-                duration: enterSizeDuration,
-                easing: enterEasing
-            })
-        ];
-        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
-        if (animateOpacity) {
-            enterAtoms.push({
-                ...(0, _fadeatom.fadeAtom)({
-                    direction: 'enter',
-                    duration: enterOpacityDuration,
-                    easing: enterEasing
-                }),
-                delay: enterDelay,
-                fill: 'both'
-            });
-        }
-        // ----- EXIT -----
-        // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
-        const exitAtoms = [];
-        // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
-        if (animateOpacity) {
-            exitAtoms.push((0, _fadeatom.fadeAtom)({
-                direction: 'exit',
-                duration: exitOpacityDuration,
-                easing: exitEasing
-            }));
-        }
-        exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
+/** Internal helper to create collapse atoms with shared logic */ function createCollapseAtoms({ element, orientation, animateOpacity, // Enter params
+sizeDuration, opacityDuration = sizeDuration, easing, delay, // Exit params
+exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay }) {
+    // ----- ENTER -----
+    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+    const enterAtoms = [
+        (0, _collapseatoms.sizeEnterAtom)({
             orientation,
-            duration: exitSizeDuration,
-            easing: exitEasing,
-            element,
-            delay: exitDelay
-        }), (0, _collapseatoms.whitespaceAtom)({
-            direction: 'exit',
+            duration: sizeDuration,
+            easing,
+            element
+        }),
+        (0, _collapseatoms.whitespaceAtom)({
+            direction: 'enter',
             orientation,
-            duration: exitSizeDuration,
-            easing: exitEasing,
-            delay: exitDelay
+            duration: sizeDuration,
+            easing
+        })
+    ];
+    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        enterAtoms.push({
+            ...(0, _fadeatom.fadeAtom)({
+                direction: 'enter',
+                duration: opacityDuration,
+                easing
+            }),
+            delay,
+            fill: 'both'
+        });
+    }
+    // ----- EXIT -----
+    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+    const exitAtoms = [];
+    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitOpacityDuration,
+            easing: exitEasing
         }));
-        return {
-            enter: enterAtoms,
-            exit: exitAtoms
-        };
+    }
+    exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        element,
+        delay: exitDelay
+    }), (0, _collapseatoms.whitespaceAtom)({
+        direction: 'exit',
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        delay: exitDelay
+    }));
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
     };
-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,
-    // where the delays are zero, and the size and opacity durations are equal.
-    createCollapseDelayedPresence({
-        enterSizeDuration: enterDuration,
-        enterEasing,
+}
+/**
+ * Define a presence motion for collapse/expand
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
+ * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
+ */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
+    return createCollapseAtoms({
+        element,
+        orientation,
+        animateOpacity,
+        sizeDuration: duration,
+        opacityDuration: duration,
+        easing,
         exitSizeDuration: exitDuration,
-        exitEasing
+        exitOpacityDuration: exitDuration,
+        exitEasing,
+        delay: 0,
+        exitDelay: 0
     });
-const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
-const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
-    enterDuration: _reactmotion.motionTokens.durationFast
-}));
-const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
-    enterDuration: _reactmotion.motionTokens.durationSlower
-}));
-const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
-    enterSizeDuration: _reactmotion.motionTokens.durationNormal,
-    enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
-    enterDelay: _reactmotion.motionTokens.durationNormal,
-    exitDelay: _reactmotion.motionTokens.durationSlower,
-    enterEasing: _reactmotion.motionTokens.curveEasyEase
-}));
+};
+/**
+ * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)
+ * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value
+ * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)
+ * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry
+ * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
+ */ 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' })=>{
+    return createCollapseAtoms({
+        element,
+        orientation,
+        animateOpacity,
+        sizeDuration,
+        opacityDuration,
+        easing,
+        delay,
+        exitSizeDuration,
+        exitOpacityDuration,
+        exitEasing,
+        exitDelay
+    });
+};
+const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
+const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    duration: _reactmotion.motionTokens.durationFast
+});
+const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    duration: _reactmotion.motionTokens.durationSlower
+});
+const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(collapseDelayedPresenceFn);

package/lib-commonjs/components/Collapse/Collapse.js.map

@@ -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"}
+{"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":";;;;;;;;;;;IAsJaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BAlJN;+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;;;;;;;;;;CAUC,GACD,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;;;;;;;;;;;;;;CAcC,GACD,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"}

package/lib-commonjs/components/Collapse/collapse-atoms.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Collapse/collapse-types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/Collapse/index.js

@@ -20,12 +20,6 @@ _export(exports, {
     },
     CollapseSnappy: function() {
         return _Collapse.CollapseSnappy;
-    },
-    createCollapseDelayedPresence: function() {
-        return _Collapse.createCollapseDelayedPresence;
-    },
-    createCollapsePresence: function() {
-        return _Collapse.createCollapsePresence;
     }
 });
 const _Collapse = require("./Collapse");

package/lib-commonjs/components/Collapse/index.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Fade/Fade.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Fade/fade-types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/Fade/fade-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/Fade/index.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Scale/Scale.js

@@ -22,13 +22,22 @@ _export(exports, {
 const _reactmotion = require("@fluentui/react-motion");
 const _fadeatom = require("../../atoms/fade-atom");
 const _scaleatom = require("../../atoms/scale-atom");
-/** 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 })=>{
+/**
+ * Define a presence motion for scale in/out
+ *
+ * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).
+ * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.
+ * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
+ * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
+ * @param fromScale - The scale value to animate from. Defaults to `0.9`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
     const enterAtoms = [
         (0, _scaleatom.scaleAtom)({
             direction: 'enter',
             duration,
             easing,
-            fromValue: fromScale
+            fromScale: fromScale
         })
     ];
     const exitAtoms = [
@@ -36,7 +45,7 @@ const _scaleatom = require("../../atoms/scale-atom");
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            fromValue: fromScale
+            fromScale
         })
     ];
     // Only add fade atoms if animateOpacity is true.
@@ -59,8 +68,10 @@ const _scaleatom = require("../../atoms/scale-atom");
 };
 const Scale = (0, _reactmotion.createPresenceComponent)(scalePresenceFn);
 const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
-    duration: _reactmotion.motionTokens.durationNormal
+    duration: _reactmotion.motionTokens.durationNormal,
+    exitDuration: _reactmotion.motionTokens.durationFast
 });
 const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
-    duration: _reactmotion.motionTokens.durationSlow
+    duration: _reactmotion.motionTokens.durationSlow,
+    exitDuration: _reactmotion.motionTokens.durationGentle
 });

package/lib-commonjs/components/Scale/Scale.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */\n  exitEasing?: string;\n\n  /** The scale value to animate from. Defaults to `0.9`. */\n  fromScale?: number;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromValue: fromScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","fromValue","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6DaA,KAAK;eAALA;;IAMAC,YAAY;eAAZA;;IAJAC,WAAW;eAAXA;;;6BA1DN;0BACkB;2BACC;AAsB1B,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQW,WAAWL;QAAU;KAAG;IAC9F,MAAMM,YAAY;QAChBH,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRO,WAAWL;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWK,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAASb;YAAUG;QAAO;QAChEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAOP;QACPQ,MAAMJ;IACR;AACF;AAGO,MAAMnB,QAAQwB,IAAAA,oCAAuB,EAACrB;AAEtC,MAAMD,cAAcuB,IAAAA,2CAA8B,EAACzB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;AACvC;AAEO,MAAMT,eAAewB,IAAAA,2CAA8B,EAACzB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;AACrC"}
+{"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"}

package/lib-commonjs/components/Scale/index.js.map

@@ -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"}
+{"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"}

package/lib-commonjs/components/Scale/scale-types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/Scale/scale-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/components/Slide/Slide.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Slide: function() {
+        return Slide;
+    },
+    SlideRelaxed: function() {
+        return SlideRelaxed;
+    },
+    SlideSnappy: function() {
+        return SlideSnappy;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _fadeatom = require("../../atoms/fade-atom");
+const _slideatom = require("../../atoms/slide-atom");
+/**
+ * Define a presence motion for slide in/out
+ *
+ * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).
+ * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.
+ * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
+ * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
+ * @param fromX - The X translate value with units to animate from. Defaults to `'0px'`.
+ * @param fromY - The Y translate value with units to animate from. Defaults to `'20px'`.
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
+ */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, fromX = '0px', fromY = '20px', animateOpacity = true })=>{
+    const enterAtoms = [
+        (0, _slideatom.slideAtom)({
+            direction: 'enter',
+            duration,
+            easing,
+            fromX,
+            fromY
+        })
+    ];
+    const exitAtoms = [
+        (0, _slideatom.slideAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing,
+            fromX,
+            fromY
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+const Slide = (0, _reactmotion.createPresenceComponent)(slidePresenceFn);
+const SlideSnappy = (0, _reactmotion.createPresenceComponentVariant)(Slide, {
+    easing: _reactmotion.motionTokens.curveDecelerateMax,
+    exitEasing: _reactmotion.motionTokens.curveAccelerateMax
+});
+const SlideRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Slide, {
+    duration: _reactmotion.motionTokens.durationGentle
+});

package/lib-commonjs/components/Slide/Slide.js.map

@@ -0,0 +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"}

package/lib-commonjs/components/Slide/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Slide: function() {
+        return _Slide.Slide;
+    },
+    SlideRelaxed: function() {
+        return _Slide.SlideRelaxed;
+    },
+    SlideSnappy: function() {
+        return _Slide.SlideSnappy;
+    }
+});
+const _Slide = require("./Slide");

package/lib-commonjs/components/Slide/index.js.map

@@ -0,0 +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"}

package/lib-commonjs/components/Slide/slide-types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/Slide/slide-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/lib-commonjs/index.js

@@ -9,6 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    Blur: function() {
+        return _Blur.Blur;
+    },
     Collapse: function() {
         return _Collapse.Collapse;
     },
@@ -39,13 +42,18 @@ _export(exports, {
     ScaleSnappy: function() {
         return _Scale.ScaleSnappy;
     },
-    createCollapseDelayedPresence: function() {
-        return _Collapse.createCollapseDelayedPresence;
+    Slide: function() {
+        return _Slide.Slide;
+    },
+    SlideRelaxed: function() {
+        return _Slide.SlideRelaxed;
     },
-    createCollapsePresence: function() {
-        return _Collapse.createCollapsePresence;
+    SlideSnappy: function() {
+        return _Slide.SlideSnappy;
     }
 });
 const _Collapse = require("./components/Collapse");
 const _Fade = require("./components/Fade");
 const _Scale = require("./components/Scale");
+const _Slide = require("./components/Slide");
+const _Blur = require("./components/Blur");