@fluentui/react-motion-components-preview 0.0.0-nightly-20260107-0408.1 → 0.0.0-nightly-20260109-0406.1

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

@@ -43,12 +43,12 @@ const _fadeatom = require("../../atoms/fade-atom");
  * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
  * @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
- * @param fromSize - The starting size for the expand animation. Defaults to `'0px'`
+ * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
  */ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
 duration = _reactmotion.motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
 sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
 easing = _reactmotion.motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
-animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
+animateOpacity = true, orientation = 'vertical', outSize = '0px' })=>{
     // ----- ENTER -----
     // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
     // For enter: size expands first, then opacity fades in after staggerDelay
@@ -59,7 +59,7 @@ animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
             duration: sizeDuration,
             easing,
             element,
-            fromSize,
+            outSize,
             delay
         }),
         (0, _collapseatoms.whitespaceAtom)({
@@ -98,7 +98,7 @@ animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
         easing: exitEasing,
         element,
         delay: exitDelay + exitStaggerDelay,
-        fromSize
+        outSize
     }), (0, _collapseatoms.whitespaceAtom)({
         direction: 'exit',
         orientation,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\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 delay - Time (ms) to delay the entire enter transition. Defaults to 0\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 exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry\n * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0\n * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry\n * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing\n * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing\n * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing\n * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing\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 * @param fromSize - The starting size for the expand animation. Defaults to `'0px'`\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  // Primary duration controls (simple API)\n  duration = motionTokens.durationNormal,\n  exitDuration = duration,\n\n  // Granular duration controls with smart defaults (advanced API)\n  sizeDuration = duration,\n  opacityDuration = sizeDuration,\n  exitSizeDuration = exitDuration,\n  exitOpacityDuration = exitSizeDuration,\n\n  // Other timing controls\n  easing = motionTokens.curveEasyEaseMax,\n  delay = 0,\n  exitEasing = easing,\n  exitDelay = delay,\n  staggerDelay = 0,\n  exitStaggerDelay = staggerDelay,\n\n  // Animation controls\n  animateOpacity = true,\n  orientation = 'vertical',\n  fromSize = '0px',\n}) => {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  // For enter: size expands first, then opacity fades in after staggerDelay\n  const enterAtoms: AtomMotion[] = [\n    // Apply global delay to size atom - size expansion starts first\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element, fromSize, delay }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing, delay }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration: opacityDuration, easing, delay: delay + staggerDelay }));\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  // For exit: opacity fades out first, then size collapses after exitStaggerDelay\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(\n      fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing, delay: exitDelay }),\n    );\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      element,\n      delay: exitDelay + exitStaggerDelay,\n      fromSize,\n    }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay + exitStaggerDelay, // Size/whitespace collapse after opacity finishes fading out\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\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 = createPresenceComponentVariant(Collapse, {\n  // Enter timing per motion design spec\n  sizeDuration: motionTokens.durationNormal, // 200ms\n  opacityDuration: motionTokens.durationSlower, // 400ms\n  staggerDelay: motionTokens.durationNormal, // 200ms\n\n  // Exit timing per motion design spec\n  exitSizeDuration: motionTokens.durationNormal, // 200ms\n  exitOpacityDuration: motionTokens.durationSlower, // 400ms\n  exitStaggerDelay: motionTokens.durationSlower, // 400ms\n\n  // Easing per motion design spec\n  easing: motionTokens.curveEasyEase,\n  exitEasing: motionTokens.curveEasyEase,\n});\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","collapsePresenceFn","element","duration","motionTokens","durationNormal","exitDuration","sizeDuration","opacityDuration","exitSizeDuration","exitOpacityDuration","easing","curveEasyEaseMax","delay","exitEasing","exitDelay","staggerDelay","exitStaggerDelay","animateOpacity","orientation","fromSize","enterAtoms","sizeEnterAtom","whitespaceAtom","direction","push","fadeAtom","exitAtoms","sizeExitAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlower","curveEasyEase"],"mappings":";;;;;;;;;;;IAyGaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BArGN;+BAEqD;0BACnC;AAEzB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,MAAMC,qBAAuD,CAAC,EAC5DC,OAAO,EACP,yCAAyC;AACzCC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,eAAeH,QAAQ,EAEvB,gEAAgE;AAChEI,eAAeJ,QAAQ,EACvBK,kBAAkBD,YAAY,EAC9BE,mBAAmBH,YAAY,EAC/BI,sBAAsBD,gBAAgB,EAEtC,wBAAwB;AACxBE,SAASP,yBAAY,CAACQ,gBAAgB,EACtCC,QAAQ,CAAC,EACTC,aAAaH,MAAM,EACnBI,YAAYF,KAAK,EACjBG,eAAe,CAAC,EAChBC,mBAAmBD,YAAY,EAE/B,qBAAqB;AACrBE,iBAAiB,IAAI,EACrBC,cAAc,UAAU,EACxBC,WAAW,KAAK,EACjB;IACC,oBAAoB;IACpB,0FAA0F;IAC1F,0EAA0E;IAC1E,MAAMC,aAA2B;QAC/B,gEAAgE;QAChEC,IAAAA,4BAAa,EAAC;YAAEH;YAAahB,UAAUI;YAAcI;YAAQT;YAASkB;YAAUP;QAAM;QACtFU,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASL;YAAahB,UAAUI;YAAcI;YAAQE;QAAM;KACzF;IACD,+EAA+E;IAC/E,IAAIK,gBAAgB;QAClBG,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAASrB,UAAUK;YAAiBG;YAAQE,OAAOA,QAAQG;QAAa;IAChH;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,gFAAgF;IAChF,MAAMW,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIT,gBAAgB;QAClBS,UAAUF,IAAI,CACZC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQrB,UAAUO;YAAqBC,QAAQG;YAAYD,OAAOE;QAAU;IAEtG;IAEAY,UAAUF,IAAI,CACZG,IAAAA,2BAAY,EAAC;QACXT;QACAhB,UAAUM;QACVE,QAAQG;QACRZ;QACAW,OAAOE,YAAYE;QACnBG;IACF,IACAG,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXL;QACAhB,UAAUM;QACVE,QAAQG;QACRD,OAAOE,YAAYE;IACrB;IAGF,OAAO;QACLY,OAAOR;QACPS,MAAMH;IACR;AACF;AAGO,MAAM9B,WAAWkC,IAAAA,oCAAuB,EAAC9B;AAEzC,MAAMD,iBAAiBgC,IAAAA,2CAA8B,EAACnC,UAAU;IACrEM,UAAUC,yBAAY,CAAC6B,YAAY;AACrC;AAEO,MAAMlC,kBAAkBiC,IAAAA,2CAA8B,EAACnC,UAAU;IACtEM,UAAUC,yBAAY,CAAC8B,cAAc;AACvC;AAGO,MAAMpC,kBAAkBkC,IAAAA,2CAA8B,EAACnC,UAAU;IACtE,sCAAsC;IACtCU,cAAcH,yBAAY,CAACC,cAAc;IACzCG,iBAAiBJ,yBAAY,CAAC8B,cAAc;IAC5ClB,cAAcZ,yBAAY,CAACC,cAAc;IAEzC,qCAAqC;IACrCI,kBAAkBL,yBAAY,CAACC,cAAc;IAC7CK,qBAAqBN,yBAAY,CAAC8B,cAAc;IAChDjB,kBAAkBb,yBAAY,CAAC8B,cAAc;IAE7C,gCAAgC;IAChCvB,QAAQP,yBAAY,CAAC+B,aAAa;IAClCrB,YAAYV,yBAAY,CAAC+B,aAAa;AACxC"}
+{"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 { CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\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 delay - Time (ms) to delay the entire enter transition. Defaults to 0\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 exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry\n * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0\n * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry\n * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing\n * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing\n * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing\n * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing\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 * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  // Primary duration controls (simple API)\n  duration = motionTokens.durationNormal,\n  exitDuration = duration,\n\n  // Granular duration controls with smart defaults (advanced API)\n  sizeDuration = duration,\n  opacityDuration = sizeDuration,\n  exitSizeDuration = exitDuration,\n  exitOpacityDuration = exitSizeDuration,\n\n  // Other timing controls\n  easing = motionTokens.curveEasyEaseMax,\n  delay = 0,\n  exitEasing = easing,\n  exitDelay = delay,\n  staggerDelay = 0,\n  exitStaggerDelay = staggerDelay,\n\n  // Animation controls\n  animateOpacity = true,\n  orientation = 'vertical',\n  outSize = '0px',\n}) => {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  // For enter: size expands first, then opacity fades in after staggerDelay\n  const enterAtoms: AtomMotion[] = [\n    // Apply global delay to size atom - size expansion starts first\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element, outSize, delay }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing, delay }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration: opacityDuration, easing, delay: delay + staggerDelay }));\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  // For exit: opacity fades out first, then size collapses after exitStaggerDelay\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(\n      fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing, delay: exitDelay }),\n    );\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      element,\n      delay: exitDelay + exitStaggerDelay,\n      outSize,\n    }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay + exitStaggerDelay, // Size/whitespace collapse after opacity finishes fading out\n    }),\n  );\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\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 = createPresenceComponentVariant(Collapse, {\n  // Enter timing per motion design spec\n  sizeDuration: motionTokens.durationNormal, // 200ms\n  opacityDuration: motionTokens.durationSlower, // 400ms\n  staggerDelay: motionTokens.durationNormal, // 200ms\n\n  // Exit timing per motion design spec\n  exitSizeDuration: motionTokens.durationNormal, // 200ms\n  exitOpacityDuration: motionTokens.durationSlower, // 400ms\n  exitStaggerDelay: motionTokens.durationSlower, // 400ms\n\n  // Easing per motion design spec\n  easing: motionTokens.curveEasyEase,\n  exitEasing: motionTokens.curveEasyEase,\n});\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","collapsePresenceFn","element","duration","motionTokens","durationNormal","exitDuration","sizeDuration","opacityDuration","exitSizeDuration","exitOpacityDuration","easing","curveEasyEaseMax","delay","exitEasing","exitDelay","staggerDelay","exitStaggerDelay","animateOpacity","orientation","outSize","enterAtoms","sizeEnterAtom","whitespaceAtom","direction","push","fadeAtom","exitAtoms","sizeExitAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlower","curveEasyEase"],"mappings":";;;;;;;;;;;IAyGaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BArGN;+BAEqD;0BACnC;AAEzB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,MAAMC,qBAAuD,CAAC,EAC5DC,OAAO,EACP,yCAAyC;AACzCC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,eAAeH,QAAQ,EAEvB,gEAAgE;AAChEI,eAAeJ,QAAQ,EACvBK,kBAAkBD,YAAY,EAC9BE,mBAAmBH,YAAY,EAC/BI,sBAAsBD,gBAAgB,EAEtC,wBAAwB;AACxBE,SAASP,yBAAY,CAACQ,gBAAgB,EACtCC,QAAQ,CAAC,EACTC,aAAaH,MAAM,EACnBI,YAAYF,KAAK,EACjBG,eAAe,CAAC,EAChBC,mBAAmBD,YAAY,EAE/B,qBAAqB;AACrBE,iBAAiB,IAAI,EACrBC,cAAc,UAAU,EACxBC,UAAU,KAAK,EAChB;IACC,oBAAoB;IACpB,0FAA0F;IAC1F,0EAA0E;IAC1E,MAAMC,aAA2B;QAC/B,gEAAgE;QAChEC,IAAAA,4BAAa,EAAC;YAAEH;YAAahB,UAAUI;YAAcI;YAAQT;YAASkB;YAASP;QAAM;QACrFU,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASL;YAAahB,UAAUI;YAAcI;YAAQE;QAAM;KACzF;IACD,+EAA+E;IAC/E,IAAIK,gBAAgB;QAClBG,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAASrB,UAAUK;YAAiBG;YAAQE,OAAOA,QAAQG;QAAa;IAChH;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,gFAAgF;IAChF,MAAMW,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIT,gBAAgB;QAClBS,UAAUF,IAAI,CACZC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQrB,UAAUO;YAAqBC,QAAQG;YAAYD,OAAOE;QAAU;IAEtG;IAEAY,UAAUF,IAAI,CACZG,IAAAA,2BAAY,EAAC;QACXT;QACAhB,UAAUM;QACVE,QAAQG;QACRZ;QACAW,OAAOE,YAAYE;QACnBG;IACF,IACAG,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXL;QACAhB,UAAUM;QACVE,QAAQG;QACRD,OAAOE,YAAYE;IACrB;IAGF,OAAO;QACLY,OAAOR;QACPS,MAAMH;IACR;AACF;AAGO,MAAM9B,WAAWkC,IAAAA,oCAAuB,EAAC9B;AAEzC,MAAMD,iBAAiBgC,IAAAA,2CAA8B,EAACnC,UAAU;IACrEM,UAAUC,yBAAY,CAAC6B,YAAY;AACrC;AAEO,MAAMlC,kBAAkBiC,IAAAA,2CAA8B,EAACnC,UAAU;IACtEM,UAAUC,yBAAY,CAAC8B,cAAc;AACvC;AAGO,MAAMpC,kBAAkBkC,IAAAA,2CAA8B,EAACnC,UAAU;IACtE,sCAAsC;IACtCU,cAAcH,yBAAY,CAACC,cAAc;IACzCG,iBAAiBJ,yBAAY,CAAC8B,cAAc;IAC5ClB,cAAcZ,yBAAY,CAACC,cAAc;IAEzC,qCAAqC;IACrCI,kBAAkBL,yBAAY,CAACC,cAAc;IAC7CK,qBAAqBN,yBAAY,CAAC8B,cAAc;IAChDjB,kBAAkBb,yBAAY,CAAC8B,cAAc;IAE7C,gCAAgC;IAChCvB,QAAQP,yBAAY,CAAC+B,aAAa;IAClCrB,YAAYV,yBAAY,CAAC+B,aAAa;AACxC"}

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

@@ -31,12 +31,12 @@ const sizeValuesForOrientation = (orientation, element)=>{
         toSize
     };
 };
-const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0', delay = 0 })=>{
+const sizeEnterAtom = ({ orientation, duration, easing, element, outSize = '0', delay = 0 })=>{
     const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
     return {
         keyframes: [
             {
-                [sizeName]: fromSize,
+                [sizeName]: outSize,
                 [overflowName]: 'hidden'
             },
             {
@@ -55,7 +55,7 @@ const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0',
         fill: 'both'
     };
 };
-const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
+const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, outSize = '0' })=>{
     const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
     return {
         keyframes: [
@@ -64,7 +64,7 @@ const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromS
                 [overflowName]: 'hidden'
             },
             {
-                [sizeName]: fromSize,
+                [sizeName]: outSize,
                 [overflowName]: 'hidden'
             }
         ],

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  delay?: number;\n}\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n  delay = 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    delay,\n    fill: 'both',\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    delay,\n    fill: 'both',\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  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    fill: 'both',\n  };\n};\n"],"names":["sizeEnterAtom","sizeExitAtom","whitespaceAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","delay","keyframes","offset","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction"],"mappings":";;;;;;;;;;;IAsBaA,aAAa;eAAbA;;IA2BAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAvGb,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;AAWO,MAAMX,gBAAgB,CAAC,EAC5BI,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPS,WAAW,GAAG,EACdC,QAAQ,CAAC,EACW;IACpB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEQ;gBAAU,CAACP,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;QACDK;QACAC;QACAE;QACAG,MAAM;IACR;AACF;AAMO,MAAMjB,eAAe,CAAC,EAC3BG,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPU,QAAQ,CAAC,EACTD,WAAW,GAAG,EACK;IACnB,MAAM,EAAER,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,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;SAClD;QACDK;QACAC;QACAE;QACAG,MAAM;IACR;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAMC,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,EACNE,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEK,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+Bf;IAC5F,uFAAuF;IACvF,MAAMa,SAASO,cAAc,UAAU,IAAI;IAC3C,MAAMR,YAAY;QAAC;YAAE,CAACI,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKN;QAAO;KAAE;IAE5G,OAAO;QACLD;QACAJ;QACAC;QACAE;QACAG,MAAM;IACR;AACF"}
+{"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  /** Size for the out state (collapsed). Defaults to '0'. */\n  outSize?: string;\n  delay?: number;\n}\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  outSize = '0',\n  delay = 0,\n}: SizeEnterAtomParams): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: outSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n    delay,\n    fill: 'both',\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  outSize = '0',\n}: SizeExitAtomParams): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: outSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    delay,\n    fill: 'both',\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  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    fill: 'both',\n  };\n};\n"],"names":["sizeEnterAtom","sizeExitAtom","whitespaceAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","outSize","delay","keyframes","offset","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction"],"mappings":";;;;;;;;;;;IAuBaA,aAAa;eAAbA;;IA2BAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAxGb,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;AAYO,MAAMX,gBAAgB,CAAC,EAC5BI,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPS,UAAU,GAAG,EACbC,QAAQ,CAAC,EACW;IACpB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEQ;gBAAS,CAACP,aAAa,EAAE;YAAS;YAChD;gBAAE,CAACD,SAAS,EAAEK;gBAAQM,QAAQ;gBAAQ,CAACV,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDK;QACAC;QACAE;QACAG,MAAM;IACR;AACF;AAMO,MAAMjB,eAAe,CAAC,EAC3BG,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPU,QAAQ,CAAC,EACTD,UAAU,GAAG,EACM;IACnB,MAAM,EAAER,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,EAAEQ;gBAAS,CAACP,aAAa,EAAE;YAAS;SACjD;QACDK;QACAC;QACAE;QACAG,MAAM;IACR;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAMC,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,EACNE,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEK,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+Bf;IAC5F,uFAAuF;IACvF,MAAMa,SAASO,cAAc,UAAU,IAAI;IAC3C,MAAMR,YAAY;QAAC;YAAE,CAACI,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKN;QAAO;KAAE;IAE5G,OAAO;QACLD;QACAJ;QACAC;QACAE;QACAG,MAAM;IACR;AACF"}

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

@@ -24,23 +24,23 @@ _export(exports, {
 });
 const _reactmotion = require("@fluentui/react-motion");
 const _fadeatom = require("../../atoms/fade-atom");
-const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, fromOpacity = 0, toOpacity = 1 })=>{
+const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, outOpacity = 0, inOpacity = 1 })=>{
     return {
         enter: (0, _fadeatom.fadeAtom)({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromOpacity,
-            toOpacity
+            outOpacity,
+            inOpacity
         }),
         exit: (0, _fadeatom.fadeAtom)({
             direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromOpacity,
-            toOpacity
+            outOpacity,
+            inOpacity
         })
     };
 };

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';\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 delay - Time (ms) to delay the enter transition. Defaults to 0.\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 * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromOpacity - The starting opacity value. Defaults to 0.\n * @param toOpacity - The ending opacity value. Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n  fromOpacity = 0,\n  toOpacity = 1,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay, fromOpacity, toOpacity }),\n    exit: fadeAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromOpacity,\n      toOpacity,\n    }),\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","delay","exitDuration","exitEasing","exitDelay","fromOpacity","toOpacity","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IA6CaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IA1BAC,cAAc;eAAdA;;;6BAhBN;0BACkB;AAelB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,cAAc,CAAC,EACfC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQE;YAAOI;YAAaC;QAAU;QACtFI,MAAMF,IAAAA,kBAAQ,EAAC;YACbC,WAAW;YACXb,UAAUM;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF;AAGO,MAAMd,OAAOmB,IAAAA,oCAAuB,EAAChB;AAErC,MAAMD,aAAakB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACgB,YAAY;AAAC;AAE9F,MAAMpB,cAAcmB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACiB,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 delay - Time (ms) to delay the enter transition. Defaults to 0.\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 * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEase,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = easing,\n  exitDelay = delay,\n  outOpacity = 0,\n  inOpacity = 1,\n}) => {\n  return {\n    enter: fadeAtom({ direction: 'enter', duration, easing, delay, outOpacity, inOpacity }),\n    exit: fadeAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outOpacity,\n      inOpacity,\n    }),\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","delay","exitDuration","exitEasing","exitDelay","outOpacity","inOpacity","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IA6CaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IA1BAC,cAAc;eAAdA;;;6BAhBN;0BACkB;AAelB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,aAAa,CAAC,EACdC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQE;YAAOI;YAAYC;QAAU;QACrFI,MAAMF,IAAAA,kBAAQ,EAAC;YACbC,WAAW;YACXb,UAAUM;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF;AAGO,MAAMd,OAAOmB,IAAAA,oCAAuB,EAAChB;AAErC,MAAMD,aAAakB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACgB,YAAY;AAAC;AAE9F,MAAMpB,cAAcmB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACiB,cAAc;AAAC"}

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

@@ -21,10 +21,10 @@ const _rotateatom = require("../../atoms/rotate-atom");
  * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
  * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
  * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
- * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.
- * @param toAngle - The ending rotation angle in degrees. Defaults to 0.
+ * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
+ * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
  * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
- */ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', fromAngle = -90, toAngle = 0, animateOpacity = true })=>{
+ */ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', outAngle = -90, inAngle = 0, animateOpacity = true })=>{
     const enterAtoms = [
         (0, _rotateatom.rotateAtom)({
             direction: 'enter',
@@ -32,8 +32,8 @@ const _rotateatom = require("../../atoms/rotate-atom");
             easing,
             delay,
             axis,
-            fromAngle,
-            toAngle
+            outAngle,
+            inAngle
         })
     ];
     const exitAtoms = [
@@ -43,8 +43,8 @@ const _rotateatom = require("../../atoms/rotate-atom");
             easing: exitEasing,
             delay: exitDelay,
             axis,
-            fromAngle,
-            toAngle
+            outAngle,
+            inAngle
         })
     ];
     if (animateOpacity) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\n * @param fromAngle - The starting rotation angle in degrees. Defaults to -90.\n * @param toAngle - The ending rotation angle in degrees. Defaults to 0.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'z',\n  fromAngle = -90,\n  toAngle = 0,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      fromAngle,\n      toAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      fromAngle,\n      toAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","fromAngle","toAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,YAAY,CAAC,EAAE,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}
+{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\n * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  axis = 'z',\n  outAngle = -90,\n  inAngle = 0,\n  animateOpacity = true,\n}: RotateParams) => {\n  const enterAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'enter',\n      duration,\n      easing,\n      delay,\n      axis,\n      outAngle,\n      inAngle,\n    }),\n  ];\n\n  const exitAtoms: AtomMotion[] = [\n    rotateAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      axis,\n      outAngle,\n      inAngle,\n    }),\n  ];\n\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","outAngle","inAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}

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

@@ -31,18 +31,18 @@ const _scaleatom = require("../../atoms/scale-atom");
  * @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 exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @param fromScale - The scale value to animate from. Defaults to `0.9`.
- * @param toScale - The scale value to animate to. Defaults to `1`.
+ * @param outScale - Scale for the out state (exited). Defaults to `0.9`.
+ * @param inScale - Scale for the in state (entered). Defaults to `1`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, fromScale = 0.9, toScale = 1, animateOpacity = true })=>{
+ */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, outScale = 0.9, inScale = 1, animateOpacity = true })=>{
     const enterAtoms = [
         (0, _scaleatom.scaleAtom)({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromScale,
-            toScale
+            outScale,
+            inScale
         })
     ];
     const exitAtoms = [
@@ -51,8 +51,8 @@ const _scaleatom = require("../../atoms/scale-atom");
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromScale,
-            toScale
+            outScale,
+            inScale
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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';\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 delay - Time (ms) to delay the enter transition. Defaults to 0.\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 exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param fromScale - The scale value to animate from. Defaults to `0.9`.\n * @param toScale - The scale value to animate to. Defaults to `1`.\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  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  fromScale = 0.9,\n  toScale = 1,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, fromScale, toScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromScale,\n      toScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\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","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","fromScale","toScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,YAAY,GAAG,EACfC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAAShB;YAAUG;YAAQE;YAAOM;YAAWC;QAAQ;KAAG;IACnG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXhB,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMrB,QAAQ0B,IAAAA,oCAAuB,EAACvB;AAEtC,MAAMD,cAAcyB,IAAAA,2CAA8B,EAAC3B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACuB,YAAY;AACzC;AAEO,MAAM3B,eAAe0B,IAAAA,2CAA8B,EAAC3B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,YAAY;IACnCnB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}
+{"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 delay - Time (ms) to delay the enter transition. Defaults to 0.\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 exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outScale - Scale for the out state (exited). Defaults to `0.9`.\n * @param inScale - Scale for the in state (entered). Defaults to `1`.\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  delay = 0,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  exitDelay = delay,\n  outScale = 0.9,\n  inScale = 1,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, outScale, inScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outScale,\n      inScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\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","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","outScale","inScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,WAAW,GAAG,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAAShB;YAAUG;YAAQE;YAAOM;YAAUC;QAAQ;KAAG;IAClG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXhB,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMrB,QAAQ0B,IAAAA,oCAAuB,EAACvB;AAEtC,MAAMD,cAAcyB,IAAAA,2CAA8B,EAAC3B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACuB,YAAY;AACzC;AAEO,MAAM3B,eAAe0B,IAAAA,2CAA8B,EAAC3B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,YAAY;IACnCnB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}

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

@@ -31,22 +31,22 @@ const _slideatom = require("../../atoms/slide-atom");
  * @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 exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
- * @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 toX - The X translate value with units to animate to. Defaults to `'0px'`.
- * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.
+ * @param outX - X translate for the out state (exited). Defaults to `'0px'`.
+ * @param outY - Y translate for the out state (exited). Defaults to `'0px'`.
+ * @param inX - X translate for the in state (entered). Defaults to `'0px'`.
+ * @param inY - Y translate for the in state (entered). Defaults to `'0px'`.
  * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
- */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, fromX = '0px', fromY = '20px', toX = '0px', toY = '0px', animateOpacity = true })=>{
+ */ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, outX = '0px', outY = '0px', inX = '0px', inY = '0px', animateOpacity = true })=>{
     const enterAtoms = [
         (0, _slideatom.slideAtom)({
             direction: 'enter',
             duration,
             easing,
             delay,
-            fromX,
-            fromY,
-            toX,
-            toY
+            outX,
+            outY,
+            inX,
+            inY
         })
     ];
     const exitAtoms = [
@@ -55,10 +55,10 @@ const _slideatom = require("../../atoms/slide-atom");
             duration: exitDuration,
             easing: exitEasing,
             delay: exitDelay,
-            fromX,
-            fromY,
-            toX,
-            toY
+            outX,
+            outY,
+            inX,
+            inY
         })
     ];
     // Only add fade atoms if animateOpacity is true.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\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 delay - Time (ms) to delay the enter transition. Defaults to 0.\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 exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\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 toX - The X translate value with units to animate to. Defaults to `'0px'`.\n * @param toY - The Y translate value with units to animate to. Defaults to `'0px'`.\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  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  fromX = '0px',\n  fromY = '20px',\n  toX = '0px',\n  toY = '0px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, fromX, fromY, toX, toY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      fromX,\n      fromY,\n      toX,\n      toY,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\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","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","fromX","fromY","toX","toY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IAiEaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BA9DN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACdC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASjB;YAAUG;YAAQE;YAAOK;YAAOC;YAAOC;YAAKC;QAAI;KAAG;IACvG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXjB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASjB;YAAUG;YAAQE;QAAM;QACvEa,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQjB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLY,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMtB,QAAQ2B,IAAAA,oCAAuB,EAACxB;AAEtC,MAAMD,cAAc0B,IAAAA,2CAA8B,EAAC5B,OAAO;IAC/DO,QAAQF,yBAAY,CAACwB,kBAAkB;IACvClB,YAAYN,yBAAY,CAACyB,kBAAkB;AAC7C;AAEO,MAAM7B,eAAe2B,IAAAA,2CAA8B,EAAC5B,OAAO;IAChEI,UAAUC,yBAAY,CAAC0B,cAAc;AACvC"}
+{"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 delay - Time (ms) to delay the enter transition. Defaults to 0.\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 exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outX - X translate for the out state (exited). Defaults to `'0px'`.\n * @param outY - Y translate for the out state (exited). Defaults to `'0px'`.\n * @param inX - X translate for the in state (entered). Defaults to `'0px'`.\n * @param inY - Y translate for the in state (entered). Defaults to `'0px'`.\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  delay = 0,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  exitDelay = delay,\n  outX = '0px',\n  outY = '0px',\n  inX = '0px',\n  inY = '0px',\n  animateOpacity = true,\n}: SlideParams) => {\n  const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, outX, outY, inX, inY })];\n  const exitAtoms = [\n    slideAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      delay: exitDelay,\n      outX,\n      outY,\n      inX,\n      inY,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\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","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","outX","outY","inX","inY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IAiEaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BA9DN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,KAAK,EACZC,OAAO,KAAK,EACZC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASjB;YAAUG;YAAQE;YAAOK;YAAMC;YAAMC;YAAKC;QAAI;KAAG;IACrG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXjB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASjB;YAAUG;YAAQE;QAAM;QACvEa,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQjB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLY,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMtB,QAAQ2B,IAAAA,oCAAuB,EAACxB;AAEtC,MAAMD,cAAc0B,IAAAA,2CAA8B,EAAC5B,OAAO;IAC/DO,QAAQF,yBAAY,CAACwB,kBAAkB;IACvClB,YAAYN,yBAAY,CAACyB,kBAAkB;AAC7C;AAEO,MAAM7B,eAAe2B,IAAAA,2CAA8B,EAAC5B,OAAO;IAChEI,UAAUC,yBAAY,CAAC0B,cAAc;AACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.0.0-nightly-20260107-0408.1",
+  "version": "0.0.0-nightly-20260109-0406.1",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -17,15 +17,9 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20260107-0408.0",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20260107-0408.0",
-    "@fluentui/scripts-api-extractor": "*"
-  },
   "dependencies": {
-    "@fluentui/react-motion": "0.0.0-nightly-20260107-0408.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20260107-0408.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20260109-0406.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20260109-0406.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {