@fluentui/react-motion-components-preview 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Mon, 09 Dec 2024 17:38:13 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 14:00:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.3)
+
+Wed, 22 Jan 2025 14:00:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.4.0..@fluentui/react-motion-components-preview_v0.4.3)
+
+### Patches
+
+- refactor(Collapse): streamline motion atom functions ([PR #33463](https://github.com/microsoft/fluentui/pull/33463) by robertpenner@microsoft.com)
+
 ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.0)
 
 Mon, 09 Dec 2024 17:38:13 GMT 

package/lib/atoms/fade-atom.js

@@ -0,0 +1,26 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a fade in or fade out.
+ * @param direction - The functional direction of the motion: 'enter' or 'exit'.
+ * @param duration - The duration of the motion in milliseconds.
+ * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
+ * @param fromValue - The starting opacity value. Defaults to 0.
+ * @returns A motion atom object with opacity keyframes and the supplied duration and easing.
+ */ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0 })=>{
+    const keyframes = [
+        {
+            opacity: fromValue
+        },
+        {
+            opacity: 1
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

package/lib/atoms/fade-atom.js.map

@@ -0,0 +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":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","fromValue","keyframes","opacity","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AASrF;;;;;;;CAOC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF,EAAE"}

package/lib/components/Collapse/Collapse.js

@@ -1,5 +1,6 @@
 import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
-import { sizeEnterAtom, whitespaceEnterAtom, opacityEnterAtom, opacityExitAtom, sizeExitAtom, whitespaceExitAtom } from './collapse-atoms';
+import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
+import { fadeAtom } from '../../atoms/fade-atom';
 /** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter
 enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = 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' })=>{
@@ -12,7 +13,8 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
                 easing: enterEasing,
                 element
             }),
-            whitespaceEnterAtom({
+            whitespaceAtom({
+                direction: 'enter',
                 orientation,
                 duration: enterSizeDuration,
                 easing: enterEasing
@@ -20,18 +22,23 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
         ];
         // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
         if (animateOpacity) {
-            enterAtoms.push(opacityEnterAtom({
-                duration: enterOpacityDuration,
-                easing: enterEasing,
-                delay: enterDelay
-            }));
+            enterAtoms.push({
+                ...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(opacityExitAtom({
+            exitAtoms.push(fadeAtom({
+                direction: 'exit',
                 duration: exitOpacityDuration,
                 easing: exitEasing
             }));
@@ -42,8 +49,8 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
             easing: exitEasing,
             element,
             delay: exitDelay
-        }));
-        exitAtoms.push(whitespaceExitAtom({
+        }), whitespaceAtom({
+            direction: 'exit',
             orientation,
             duration: exitSizeDuration,
             easing: exitEasing,

package/lib/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 {\n  sizeEnterAtom,\n  whitespaceEnterAtom,\n  opacityEnterAtom,\n  opacityExitAtom,\n  sizeExitAtom,\n  whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n  CollapseDelayedVariantParams,\n  CollapseRuntimeParams\n> =\n  ({\n    // enter\n    enterSizeDuration = motionTokens.durationNormal,\n    enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n    enterEasing = motionTokens.curveEasyEaseMax,\n    enterDelay = 0,\n\n    // exit: durations and easing default to enter values for symmetry\n    exitSizeDuration = enterSizeDuration,\n    exitOpacityDuration = enterOpacityDuration,\n    exitEasing = enterEasing,\n    exitDelay = 0,\n  } = {}) =>\n  ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n    // ----- ENTER -----\n    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n    const enterAtoms: AtomMotion[] = [\n      sizeEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n        element,\n      }),\n      whitespaceEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n      }),\n    ];\n    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      enterAtoms.push(\n        opacityEnterAtom({\n          duration: enterOpacityDuration,\n          easing: enterEasing,\n          delay: enterDelay,\n        }),\n      );\n    }\n\n    // ----- EXIT -----\n    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n    const exitAtoms: AtomMotion[] = [];\n    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      exitAtoms.push(\n        opacityExitAtom({\n          duration: exitOpacityDuration,\n          easing: exitEasing,\n        }),\n      );\n    }\n    exitAtoms.push(\n      sizeExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        element,\n        delay: exitDelay,\n      }),\n    );\n    exitAtoms.push(\n      whitespaceExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        delay: exitDelay,\n      }),\n    );\n\n    return {\n      enter: enterAtoms,\n      exit: exitAtoms,\n    };\n  };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEaseMax,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) =>\n  // Implement a regular collapse as a special case of the delayed collapse,\n  // where the delays are zero, and the size and opacity durations are equal.\n  createCollapseDelayedPresence({\n    enterSizeDuration: enterDuration,\n    enterEasing,\n    exitSizeDuration: exitDuration,\n    exitEasing,\n  });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseRelaxed = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n  createCollapseDelayedPresence({\n    enterSizeDuration: motionTokens.durationNormal,\n    enterOpacityDuration: motionTokens.durationSlower,\n    enterDelay: motionTokens.durationNormal,\n    exitDelay: motionTokens.durationSlower,\n    enterEasing: motionTokens.curveEasyEase,\n  }),\n);\n"],"names":["motionTokens","createPresenceComponent","sizeEnterAtom","whitespaceEnterAtom","opacityEnterAtom","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","push","delay","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SACEC,aAAa,EACbC,mBAAmB,EACnBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,kBAAkB,QACb,mBAAmB;AAE1B,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBT,aAAaU,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcZ,aAAaa,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBN,iBAAiB,EACpCO,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BpB,cAAc;gBACZmB;gBACAE,UAAUd;gBACVe,QAAQZ;gBACRO;YACF;YACAhB,oBAAoB;gBAClBkB;gBACAE,UAAUd;gBACVe,QAAQZ;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWG,IAAI,CACbrB,iBAAiB;gBACfmB,UAAUZ;gBACVa,QAAQZ;gBACRc,OAAOZ;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMa,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIP,gBAAgB;YAClBO,UAAUF,IAAI,CACZpB,gBAAgB;gBACdkB,UAAUP;gBACVQ,QAAQP;YACV;QAEJ;QACAU,UAAUF,IAAI,CACZnB,aAAa;YACXe;YACAE,UAAUR;YACVS,QAAQP;YACRE;YACAO,OAAOR;QACT;QAEFS,UAAUF,IAAI,CACZlB,mBAAmB;YACjBc;YACAE,UAAUR;YACVS,QAAQP;YACRS,OAAOR;QACT;QAGF,OAAO;YACLU,OAAON;YACPO,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaU,cAAc,EAC3CE,cAAcZ,aAAaa,gBAAgB,EAC3CmB,eAAeD,aAAa,EAC5Bd,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBsB;QACnBnB;QACAG,kBAAkBiB;QAClBf;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMgB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,kBAAkBnC,wBAC7B6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BO,8BAA8B;IAC5BC,mBAAmBT,aAAaU,cAAc;IAC9CC,sBAAsBX,aAAaqC,cAAc;IACjDvB,YAAYd,aAAaU,cAAc;IACvCQ,WAAWlB,aAAaqC,cAAc;IACtCzB,aAAaZ,aAAauC,aAAa;AACzC,IACA"}
+{"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":["motionTokens","createPresenceComponent","sizeEnterAtom","sizeExitAtom","whitespaceAtom","fadeAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","direction","push","delay","fill","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SAASC,aAAa,EAAEC,YAAY,EAAEC,cAAc,QAAQ,mBAAmB;AAC/E,SAASC,QAAQ,QAAQ,wBAAwB;AAEjD,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBP,aAAaQ,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcV,aAAaW,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBN,iBAAiB,EACpCO,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BlB,cAAc;gBAAEiB;gBAAaE,UAAUd;gBAAmBe,QAAQZ;gBAAaO;YAAQ;YACvFb,eAAe;gBAAEmB,WAAW;gBAASJ;gBAAaE,UAAUd;gBAAmBe,QAAQZ;YAAY;SACpG;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWI,IAAI,CAAC;gBACd,GAAGnB,SAAS;oBAAEkB,WAAW;oBAASF,UAAUZ;oBAAsBa,QAAQZ;gBAAY,EAAE;gBACxFe,OAAOb;gBACPc,MAAM;YACR;QACF;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMC,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIT,gBAAgB;YAClBS,UAAUH,IAAI,CAACnB,SAAS;gBAAEkB,WAAW;gBAAQF,UAAUP;gBAAqBQ,QAAQP;YAAW;QACjG;QACAY,UAAUH,IAAI,CACZrB,aAAa;YAAEgB;YAAaE,UAAUR;YAAkBS,QAAQP;YAAYE;YAASQ,OAAOT;QAAU,IACtGZ,eAAe;YACbmB,WAAW;YACXJ;YACAE,UAAUR;YACVS,QAAQP;YACRU,OAAOT;QACT;QAGF,OAAO;YACLY,OAAOR;YACPS,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaQ,cAAc,EAC3CE,cAAcV,aAAaW,gBAAgB,EAC3CqB,eAAeD,aAAa,EAC5BhB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBwB;QACnBrB;QACAG,kBAAkBmB;QAClBjB;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMkB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,kBAAkBnC,wBAC7B6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BK,8BAA8B;IAC5BC,mBAAmBP,aAAaQ,cAAc;IAC9CC,sBAAsBT,aAAaqC,cAAc;IACjDzB,YAAYZ,aAAaQ,cAAc;IACvCQ,WAAWhB,aAAaqC,cAAc;IACtC3B,aAAaV,aAAauC,aAAa;AACzC,IACA"}

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

@@ -71,68 +71,31 @@ const whitespaceValuesForOrientation = (orientation)=>{
         marginEnd: 'marginBlockEnd'
     };
 };
-// Because a height of zero does not eliminate padding or margin,
-// we will create keyframes to animate them to zero.
-export const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
+/**
+ * A collapse animates an element's height to zero,
+ but the zero height does not eliminate padding or margin in the box model.
+ So here we generate keyframes to animate those whitespace properties to zero.
+ */ export const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
     const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
-    return {
-        // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.
-        keyframes: [
-            {
-                [paddingStart]: '0',
-                [paddingEnd]: '0',
-                [marginStart]: '0',
-                [marginEnd]: '0',
-                offset: 0
-            }
-        ],
-        duration,
-        easing
-    };
-};
-export const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
-    const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
-    return {
-        // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.
-        keyframes: [
-            {
-                [paddingStart]: '0',
-                [paddingEnd]: '0',
-                [marginStart]: '0',
-                [marginEnd]: '0',
-                offset: 1
-            }
-        ],
+    // The keyframe with zero whitespace is at the start for enter and at the end for exit.
+    const offset = direction === 'enter' ? 0 : 1;
+    const keyframes = [
+        {
+            [paddingStart]: '0',
+            [paddingEnd]: '0',
+            [marginStart]: '0',
+            [marginEnd]: '0',
+            offset
+        }
+    ];
+    const atom = {
+        keyframes,
         duration,
         easing,
-        fill: 'forwards',
         delay
     };
+    if (direction === 'exit') {
+        atom.fill = 'forwards';
+    }
+    return atom;
 };
-// ----- OPACITY -----
-export const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
-        keyframes: [
-            {
-                opacity: fromOpacity
-            },
-            {
-                opacity: toOpacity
-            }
-        ],
-        duration,
-        easing,
-        delay,
-        fill: 'both'
-    });
-export const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
-        keyframes: [
-            {
-                opacity: toOpacity
-            },
-            {
-                opacity: fromOpacity
-            }
-        ],
-        duration,
-        easing
-    });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n  const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n  const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n  const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n  const toSize = `${measuredSize}px`;\n  return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n  };\n};\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  delay?: number;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    fill: 'both',\n    delay,\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation 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\n// Because a height of zero does not eliminate padding or margin,\n// we will create keyframes to animate them to zero.\nexport const whitespaceEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 0 }],\n    duration,\n    easing,\n  };\n};\n\nexport const whitespaceExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 1 }],\n    duration,\n    easing,\n    fill: 'forwards',\n    delay,\n  };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n  duration,\n  easing,\n  delay = 0,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  delay?: number;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n  duration,\n  easing,\n  delay,\n  fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n  duration,\n  easing,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n  duration,\n  easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,mBAAmB;AAEnB,MAAMA,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;AAEA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EAOf;IACC,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQM,QAAQ;gBAAQ,CAACV,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMI,eAAe,CAAC,EAC3Bd,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPc,QAAQ,CAAC,EACTJ,WAAW,GAAG,EAQf;IACC,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAM,MAAM;QACND;IACF;AACF,EAAE;AAEF,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACjB;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLkB,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;AAEA,iEAAiE;AACjE,oDAAoD;AACpD,OAAO,MAAMC,sBAAsB,CAAC,EAClCtB,WAAW,EACXS,QAAQ,EACRC,MAAM,EAKP;IACC,MAAM,EAAEQ,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,OAAO;QACL,8FAA8F;QAC9FY,WAAW;YAAC;gBAAE,CAACM,aAAa,EAAE;gBAAK,CAACC,WAAW,EAAE;gBAAK,CAACC,YAAY,EAAE;gBAAK,CAACC,UAAU,EAAE;gBAAKR,QAAQ;YAAE;SAAE;QACxGJ;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMa,qBAAqB,CAAC,EACjCvB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNK,QAAQ,CAAC,EAMV;IACC,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,OAAO;QACL,mHAAmH;QACnHY,WAAW;YAAC;gBAAE,CAACM,aAAa,EAAE;gBAAK,CAACC,WAAW,EAAE;gBAAK,CAACC,YAAY,EAAE;gBAAK,CAACC,UAAU,EAAE;gBAAKR,QAAQ;YAAE;SAAE;QACxGJ;QACAC;QACAM,MAAM;QACND;IACF;AACF,EAAE;AAEF,sBAAsB;AAEtB,OAAO,MAAMS,mBAAmB,CAAC,EAC/Bf,QAAQ,EACRC,MAAM,EACNK,QAAQ,CAAC,EACTU,cAAc,CAAC,EACfC,YAAY,CAAC,EAOd,GAAkB,CAAA;QACjBd,WAAW;YAAC;gBAAEe,SAASF;YAAY;YAAG;gBAAEE,SAASD;YAAU;SAAE;QAC7DjB;QACAC;QACAK;QACAC,MAAM;IACR,CAAA,EAAG;AAEH,OAAO,MAAMY,kBAAkB,CAAC,EAC9BnB,QAAQ,EACRC,MAAM,EACNe,cAAc,CAAC,EACfC,YAAY,CAAC,EAMd,GAAkB,CAAA;QACjBd,WAAW;YAAC;gBAAEe,SAASD;YAAU;YAAG;gBAAEC,SAASF;YAAY;SAAE;QAC7DhB;QACAC;IACF,CAAA,EAAG"}
+{"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":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceAtom","direction","atom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,mBAAmB;AAEnB,MAAMA,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;AAUA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EACM;IACpB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQM,QAAQ;gBAAQ,CAACV,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;IACF;AACF,EAAE;AAMF,OAAO,MAAMI,eAAe,CAAC,EAC3Bd,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPc,QAAQ,CAAC,EACTJ,WAAW,GAAG,EACK;IACnB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAM,MAAM;QACND;IACF;AACF,EAAE;AAEF,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACjB;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLkB,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;AAUA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTvB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNK,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,uFAAuF;IACvF,MAAMa,SAASU,cAAc,UAAU,IAAI;IAC3C,MAAMX,YAAY;QAAC;YAAE,CAACM,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKR;QAAO;KAAE;IAE5G,MAAMW,OAAmB;QACvBZ;QACAH;QACAC;QACAK;IACF;IACA,IAAIQ,cAAc,QAAQ;QACxBC,KAAKR,IAAI,GAAG;IACd;IACA,OAAOQ;AACT,EAAE"}

package/lib/components/Fade/Fade.js

@@ -1,29 +1,16 @@
 import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { fadeAtom } from '../../atoms/fade-atom';
 /** Define a presence motion for fade in/out  */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
-        enter: {
+        enter: fadeAtom({
+            direction: 'enter',
             duration: enterDuration,
-            easing: enterEasing,
-            keyframes: [
-                {
-                    opacity: 0
-                },
-                {
-                    opacity: 1
-                }
-            ]
-        },
-        exit: {
+            easing: enterEasing
+        }),
+        exit: fadeAtom({
+            direction: 'exit',
             duration: exitDuration,
-            easing: exitEasing,
-            keyframes: [
-                {
-                    opacity: 1
-                },
-                {
-                    opacity: 0
-                }
-            ]
-        }
+            easing: exitEasing
+        })
     });
 /** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
 export const FadeSnappy = createPresenceComponent(createFadePresence({

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["motionTokens","createPresenceComponent","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAiB/E,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUP;YAAeQ,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAME,OAAOd,wBAAwBC,sBAAsB;AAElE,OAAO,MAAMc,aAAaf,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,cAAcjB,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAamB,cAAc;AAAC,IAAI"}
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\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  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: fadeAtom({ direction: 'enter', duration: enterDuration, easing: enterEasing }),\n  exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","direction","duration","easing","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAE/E,SAASC,QAAQ,QAAQ,wBAAwB;AAgBjD,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBJ,aAAaK,cAAc,EAC3CC,cAAcN,aAAaO,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAOR,SAAS;YAAES,WAAW;YAASC,UAAUR;YAAeS,QAAQP;QAAY;QACnFQ,MAAMZ,SAAS;YAAES,WAAW;YAAQC,UAAUJ;YAAcK,QAAQJ;QAAW;IACjF,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAMM,OAAOd,wBAAwBE,sBAAsB;AAElE,OAAO,MAAMa,aAAaf,wBAAwBE,mBAAmB;IAAEC,eAAeJ,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,cAAcjB,wBAAwBE,mBAAmB;IAAEC,eAAeJ,aAAamB,cAAc;AAAC,IAAI"}

package/lib-commonjs/atoms/fade-atom.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "fadeAtom", {
+    enumerable: true,
+    get: function() {
+        return fadeAtom;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, fromValue = 0 })=>{
+    const keyframes = [
+        {
+            opacity: fromValue
+        },
+        {
+            opacity: 1
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

package/lib-commonjs/atoms/fade-atom.js.map

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

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

@@ -30,6 +30,7 @@ _export(exports, {
 });
 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' })=>{
@@ -42,7 +43,8 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
                 easing: enterEasing,
                 element
             }),
-            (0, _collapseatoms.whitespaceEnterAtom)({
+            (0, _collapseatoms.whitespaceAtom)({
+                direction: 'enter',
                 orientation,
                 duration: enterSizeDuration,
                 easing: enterEasing
@@ -50,18 +52,23 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
         ];
         // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
         if (animateOpacity) {
-            enterAtoms.push((0, _collapseatoms.opacityEnterAtom)({
-                duration: enterOpacityDuration,
-                easing: enterEasing,
-                delay: enterDelay
-            }));
+            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, _collapseatoms.opacityExitAtom)({
+            exitAtoms.push((0, _fadeatom.fadeAtom)({
+                direction: 'exit',
                 duration: exitOpacityDuration,
                 easing: exitEasing
             }));
@@ -72,8 +79,8 @@ exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration
             easing: exitEasing,
             element,
             delay: exitDelay
-        }));
-        exitAtoms.push((0, _collapseatoms.whitespaceExitAtom)({
+        }), (0, _collapseatoms.whitespaceAtom)({
+            direction: 'exit',
             orientation,
             duration: exitSizeDuration,
             easing: exitEasing,

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 {\n  sizeEnterAtom,\n  whitespaceEnterAtom,\n  opacityEnterAtom,\n  opacityExitAtom,\n  sizeExitAtom,\n  whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n  CollapseDelayedVariantParams,\n  CollapseRuntimeParams\n> =\n  ({\n    // enter\n    enterSizeDuration = motionTokens.durationNormal,\n    enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n    enterEasing = motionTokens.curveEasyEaseMax,\n    enterDelay = 0,\n\n    // exit: durations and easing default to enter values for symmetry\n    exitSizeDuration = enterSizeDuration,\n    exitOpacityDuration = enterOpacityDuration,\n    exitEasing = enterEasing,\n    exitDelay = 0,\n  } = {}) =>\n  ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n    // ----- ENTER -----\n    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n    const enterAtoms: AtomMotion[] = [\n      sizeEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n        element,\n      }),\n      whitespaceEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n      }),\n    ];\n    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      enterAtoms.push(\n        opacityEnterAtom({\n          duration: enterOpacityDuration,\n          easing: enterEasing,\n          delay: enterDelay,\n        }),\n      );\n    }\n\n    // ----- EXIT -----\n    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n    const exitAtoms: AtomMotion[] = [];\n    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      exitAtoms.push(\n        opacityExitAtom({\n          duration: exitOpacityDuration,\n          easing: exitEasing,\n        }),\n      );\n    }\n    exitAtoms.push(\n      sizeExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        element,\n        delay: exitDelay,\n      }),\n    );\n    exitAtoms.push(\n      whitespaceExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        delay: exitDelay,\n      }),\n    );\n\n    return {\n      enter: enterAtoms,\n      exit: exitAtoms,\n    };\n  };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEaseMax,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) =>\n  // Implement a regular collapse as a special case of the delayed collapse,\n  // where the delays are zero, and the size and opacity durations are equal.\n  createCollapseDelayedPresence({\n    enterSizeDuration: enterDuration,\n    enterEasing,\n    exitSizeDuration: exitDuration,\n    exitEasing,\n  });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseRelaxed = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n  createCollapseDelayedPresence({\n    enterSizeDuration: motionTokens.durationNormal,\n    enterOpacityDuration: motionTokens.durationSlower,\n    enterDelay: motionTokens.durationNormal,\n    exitDelay: motionTokens.durationSlower,\n    enterEasing: motionTokens.curveEasyEase,\n  }),\n);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence","enterSizeDuration","motionTokens","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","sizeEnterAtom","duration","easing","whitespaceEnterAtom","push","opacityEnterAtom","delay","exitAtoms","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","enter","exit","enterDuration","exitDuration","createPresenceComponent","durationFast","durationSlower","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8GaA,QAAQ;eAARA;;IAUAC,eAAe;eAAfA;;IAJAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;IAnGAC,6BAA6B;eAA7BA;;IAiFAC,sBAAsB;eAAtBA;;;6BA9FqD;+BAU3D;AAGA,MAAMD,gCAIX,CAAC,EACC,QAAQ;AACRE,oBAAoBC,yBAAY,CAACC,cAAc,EAC/CC,uBAAuBH,iBAAiB,EACxCI,cAAcH,yBAAY,CAACI,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBP,iBAAiB,EACpCQ,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BC,IAAAA,4BAAa,EAAC;gBACZF;gBACAG,UAAUhB;gBACViB,QAAQb;gBACRO;YACF;YACAO,IAAAA,kCAAmB,EAAC;gBAClBL;gBACAG,UAAUhB;gBACViB,QAAQb;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWK,IAAI,CACbC,IAAAA,+BAAgB,EAAC;gBACfJ,UAAUb;gBACVc,QAAQb;gBACRiB,OAAOf;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMgB,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIV,gBAAgB;YAClBU,UAAUH,IAAI,CACZI,IAAAA,8BAAe,EAAC;gBACdP,UAAUR;gBACVS,QAAQR;YACV;QAEJ;QACAa,UAAUH,IAAI,CACZK,IAAAA,2BAAY,EAAC;YACXX;YACAG,UAAUT;YACVU,QAAQR;YACRE;YACAU,OAAOX;QACT;QAEFY,UAAUH,IAAI,CACZM,IAAAA,iCAAkB,EAAC;YACjBZ;YACAG,UAAUT;YACVU,QAAQR;YACRY,OAAOX;QACT;QAGF,OAAO;YACLgB,OAAOZ;YACPa,MAAML;QACR;IACF;AAGK,MAAMvB,yBAAgG,CAAC,EAC5G6B,gBAAgB3B,yBAAY,CAACC,cAAc,EAC3CE,cAAcH,yBAAY,CAACI,gBAAgB,EAC3CwB,eAAeD,aAAa,EAC5BnB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EN,8BAA8B;QAC5BE,mBAAmB4B;QACnBxB;QACAG,kBAAkBsB;QAClBpB;IACF;AAGK,MAAMf,WAAWoC,IAAAA,oCAAuB,EAAC/B;AAEzC,MAAMF,iBAAiBiC,IAAAA,oCAAuB,EACnD/B,uBAAuB;IAAE6B,eAAe3B,yBAAY,CAAC8B,YAAY;AAAC;AAG7D,MAAMnC,kBAAkBkC,IAAAA,oCAAuB,EACpD/B,uBAAuB;IAAE6B,eAAe3B,yBAAY,CAAC+B,cAAc;AAAC;AAG/D,MAAMrC,kBAAkBmC,IAAAA,oCAAuB,EACpDhC,8BAA8B;IAC5BE,mBAAmBC,yBAAY,CAACC,cAAc;IAC9CC,sBAAsBF,yBAAY,CAAC+B,cAAc;IACjD1B,YAAYL,yBAAY,CAACC,cAAc;IACvCQ,WAAWT,yBAAY,CAAC+B,cAAc;IACtC5B,aAAaH,yBAAY,CAACgC,aAAa;AACzC"}
+{"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"}

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

@@ -9,23 +9,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    opacityEnterAtom: function() {
-        return opacityEnterAtom;
-    },
-    opacityExitAtom: function() {
-        return opacityExitAtom;
-    },
     sizeEnterAtom: function() {
         return sizeEnterAtom;
     },
     sizeExitAtom: function() {
         return sizeExitAtom;
     },
-    whitespaceEnterAtom: function() {
-        return whitespaceEnterAtom;
-    },
-    whitespaceExitAtom: function() {
-        return whitespaceExitAtom;
+    whitespaceAtom: function() {
+        return whitespaceAtom;
     }
 });
 // ----- SIZE -----
@@ -101,65 +92,27 @@ const whitespaceValuesForOrientation = (orientation)=>{
         marginEnd: 'marginBlockEnd'
     };
 };
-const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
+const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
     const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
-    return {
-        // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.
-        keyframes: [
-            {
-                [paddingStart]: '0',
-                [paddingEnd]: '0',
-                [marginStart]: '0',
-                [marginEnd]: '0',
-                offset: 0
-            }
-        ],
-        duration,
-        easing
-    };
-};
-const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
-    const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
-    return {
-        // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.
-        keyframes: [
-            {
-                [paddingStart]: '0',
-                [paddingEnd]: '0',
-                [marginStart]: '0',
-                [marginEnd]: '0',
-                offset: 1
-            }
-        ],
+    // The keyframe with zero whitespace is at the start for enter and at the end for exit.
+    const offset = direction === 'enter' ? 0 : 1;
+    const keyframes = [
+        {
+            [paddingStart]: '0',
+            [paddingEnd]: '0',
+            [marginStart]: '0',
+            [marginEnd]: '0',
+            offset
+        }
+    ];
+    const atom = {
+        keyframes,
         duration,
         easing,
-        fill: 'forwards',
         delay
     };
+    if (direction === 'exit') {
+        atom.fill = 'forwards';
+    }
+    return atom;
 };
-const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
-        keyframes: [
-            {
-                opacity: fromOpacity
-            },
-            {
-                opacity: toOpacity
-            }
-        ],
-        duration,
-        easing,
-        delay,
-        fill: 'both'
-    });
-const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
-        keyframes: [
-            {
-                opacity: toOpacity
-            },
-            {
-                opacity: fromOpacity
-            }
-        ],
-        duration,
-        easing
-    });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n  const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n  const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n  const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n  const toSize = `${measuredSize}px`;\n  return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n  };\n};\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  delay?: number;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    fill: 'both',\n    delay,\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation 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\n// Because a height of zero does not eliminate padding or margin,\n// we will create keyframes to animate them to zero.\nexport const whitespaceEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    // Animate from whitespace of zero to the current whitespace, by omitting the ending keyframe.\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 0 }],\n    duration,\n    easing,\n  };\n};\n\nexport const whitespaceExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    // Animate from the current whitespace to whitespace of zero, by using offset 1 and omitting the starting keyframe.\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset: 1 }],\n    duration,\n    easing,\n    fill: 'forwards',\n    delay,\n  };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n  duration,\n  easing,\n  delay = 0,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  delay?: number;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n  duration,\n  easing,\n  delay,\n  fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n  duration,\n  easing,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n  duration,\n  easing,\n});\n"],"names":["opacityEnterAtom","opacityExitAtom","sizeEnterAtom","sizeExitAtom","whitespaceEnterAtom","whitespaceExitAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","fromOpacity","toOpacity","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"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"}

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

@@ -23,31 +23,18 @@ _export(exports, {
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
+const _fadeatom = require("../../atoms/fade-atom");
 const createFadePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
-        enter: {
+        enter: (0, _fadeatom.fadeAtom)({
+            direction: 'enter',
             duration: enterDuration,
-            easing: enterEasing,
-            keyframes: [
-                {
-                    opacity: 0
-                },
-                {
-                    opacity: 1
-                }
-            ]
-        },
-        exit: {
+            easing: enterEasing
+        }),
+        exit: (0, _fadeatom.fadeAtom)({
+            direction: 'exit',
             duration: exitDuration,
-            easing: exitEasing,
-            keyframes: [
-                {
-                    opacity: 1
-                },
-                {
-                    opacity: 0
-                }
-            ]
-        }
+            easing: exitEasing
+        })
     });
 const Fade = (0, _reactmotion.createPresenceComponent)(createFadePresence());
 const FadeSnappy = (0, _reactmotion.createPresenceComponent)(createFadePresence({

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["Fade","FadeRelaxed","FadeSnappy","createFadePresence","enterDuration","motionTokens","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","createPresenceComponent","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6BaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAbAC,kBAAkB;eAAlBA;;;6BAlByC;AAkB/C,MAAMA,qBAA+D,CAAC,EAC3EC,gBAAgBC,yBAAY,CAACC,cAAc,EAC3CC,cAAcF,yBAAY,CAACG,aAAa,EACxCC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUR;YAAeS,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA;AAGO,MAAMf,OAAOiB,IAAAA,oCAAuB,EAACd;AAErC,MAAMD,aAAae,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACa,YAAY;AAAC;AAEzG,MAAMjB,cAAcgB,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACc,cAAc;AAAC"}
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\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  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: fadeAtom({ direction: 'enter', duration: enterDuration, easing: enterEasing }),\n  exit: fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }),\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["Fade","FadeRelaxed","FadeSnappy","createFadePresence","enterDuration","motionTokens","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","fadeAtom","direction","duration","easing","exit","createPresenceComponent","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8BaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IAbAC,kBAAkB;eAAlBA;;;6BAnByC;0BAE7B;AAiBlB,MAAMA,qBAA+D,CAAC,EAC3EC,gBAAgBC,yBAAY,CAACC,cAAc,EAC3CC,cAAcF,yBAAY,CAACG,aAAa,EACxCC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASC,UAAUV;YAAeW,QAAQR;QAAY;QACnFS,MAAMJ,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAAQC,UAAUL;YAAcM,QAAQL;QAAW;IACjF,CAAA;AAGO,MAAMV,OAAOiB,IAAAA,oCAAuB,EAACd;AAErC,MAAMD,aAAae,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACa,YAAY;AAAC;AAEzG,MAAMjB,cAAcgB,IAAAA,oCAAuB,EAACd,mBAAmB;IAAEC,eAAeC,yBAAY,CAACc,cAAc;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",