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

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Wed, 14 May 2025 18:49:17 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Jun 2025 14:07:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.6.2)
+
+Thu, 26 Jun 2025 14:07:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.5.0..@fluentui/react-motion-components-preview_v0.6.2)
+
+### Patches
+
+- fix(Scale): update variant parameters to design spec & refactor internally ([PR #34712](https://github.com/microsoft/fluentui/pull/34712) by robertpenner@microsoft.com)
+
 ## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.5.0)
 
 Wed, 14 May 2025 18:49:17 GMT 

package/dist/index.d.ts

@@ -94,13 +94,13 @@ export declare const ScaleRelaxed: PresenceComponent<ScaleVariantParams>;
 export declare const ScaleSnappy: PresenceComponent<ScaleVariantParams>;
 
 declare type ScaleVariantParams = {
-    /** Time (ms) for the enter transition (scale-in). Defaults to the `durationNormal` value (200 ms). */
+    /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */
     duration?: number;
-    /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMid` value.  */
+    /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.  */
     easing?: string;
-    /** Time (ms) for the exit transition (scale-out). Defaults to the `duration` param for symmetry. */
+    /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */
     exitDuration?: number;
-    /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMid` value.  */
+    /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */
     exitEasing?: string;
     /** The scale value to animate from. Defaults to `0.9`. */
     fromScale?: number;

package/lib/atoms/scale-atom.js

@@ -0,0 +1,27 @@
+import { motionTokens } from '@fluentui/react-motion';
+/**
+ * Generates a motion atom object for a scale in or scale 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 scale value. Defaults to 0.9.
+ * @param toValue - The ending scale value. Defaults to 1.
+ * @returns A motion atom object with scale keyframes and the supplied duration and easing.
+ */ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0.9, toValue = 1 })=>{
+    const keyframes = [
+        {
+            scale: fromValue
+        },
+        {
+            scale: toValue
+        }
+    ];
+    if (direction === 'exit') {
+        keyframes.reverse();
+    }
+    return {
+        keyframes,
+        duration,
+        easing
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromValue?: number;\n  toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromValue = 0.9,\n  toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromValue }, { scale: toValue }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAAwCA,YAAY,QAAQ,yBAAyB;AAUrF;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIL,cAAc,QAAQ;QACxBM,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAL;QACAC;IACF;AACF,EAAE"}

package/lib/components/Scale/Scale.js

@@ -1,53 +1,45 @@
 import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = motionTokens.curveAccelerateMid, fromScale = 0.9, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const toScale = 1;
-    // TODO: use fadeAtom
-    // TODO: make scaleAtom
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
-            visibility: 'visible'
-        },
-        {
-            opacity: toOpacity,
-            transform: `scale3d(${toScale}, ${toScale}, 1)`
-        }
-    ];
-    const exitKeyframes = [
-        {
-            opacity: toOpacity,
-            transform: `scale3d(${toScale}, ${toScale}, 1)`
-        },
-        {
-            opacity: fromOpacity,
-            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
-            visibility: 'hidden'
-        }
-    ];
-    return {
-        enter: {
+import { fadeAtom } from '../../atoms/fade-atom';
+import { scaleAtom } from '../../atoms/scale-atom';
+/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = motionTokens.durationGentle, easing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
+    const enterAtoms = [
+        scaleAtom({
+            direction: 'enter',
             duration,
             easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
+            fromValue: fromScale
+        })
+    ];
+    const exitAtoms = [
+        scaleAtom({
+            direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            keyframes: exitKeyframes
-        }
+            fromValue: fromScale
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push(fadeAtom({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push(fadeAtom({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
     };
 };
 /** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(scalePresenceFn);
 export const ScaleSnappy = createPresenceComponentVariant(Scale, {
-    duration: motionTokens.durationFast,
-    easing: motionTokens.curveDecelerateMax,
-    exitEasing: motionTokens.curveAccelerateMax
+    duration: motionTokens.durationNormal
 });
 export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
-    duration: motionTokens.durationGentle,
-    easing: motionTokens.curveDecelerateMid,
-    exitEasing: motionTokens.curveAccelerateMid
+    duration: motionTokens.durationSlow
 });

package/lib/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';\n\ntype ScaleVariantParams = {\n  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationNormal` value (200 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMid` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (scale-out). Defaults to the `duration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMid` value.  */\n  exitEasing?: string;\n\n  /** The scale value to animate from. Defaults to `0.9`. */\n  fromScale?: number;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const toScale = 1;\n\n  // TODO: use fadeAtom\n  // TODO: make scaleAtom\n  const enterKeyframes = [\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n  ];\n\n  return {\n    enter: {\n      duration,\n      easing,\n      keyframes: enterKeyframes,\n    },\n    exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationGentle,\n  easing: motionTokens.curveDecelerateMid,\n  exitEasing: motionTokens.curveAccelerateMid,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","scalePresenceFn","duration","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromScale","animateOpacity","fromOpacity","toOpacity","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","keyframes","exit","Scale","ScaleSnappy","durationFast","curveDecelerateMax","curveAccelerateMax","ScaleRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAsBhC,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWJ,aAAaK,cAAc,EACtCC,SAASN,aAAaO,kBAAkB,EACxCC,eAAeJ,QAAQ,EACvBK,aAAaT,aAAaU,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,UAAU;IAEhB,qBAAqB;IACrB,uBAAuB;IACvB,MAAMC,iBAAiB;QACrB;YAAEC,SAASJ;YAAaK,WAAW,CAAC,QAAQ,EAAEP,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEQ,YAAY;QAAU;QACnG;YAAEF,SAASH;YAAWI,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASH;YAAWI,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASJ;YAAaK,WAAW,CAAC,QAAQ,EAAEP,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEQ,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLjB;YACAE;YACAgB,WAAWN;QACb;QACAO,MAAM;YAAEnB,UAAUI;YAAcF,QAAQG;YAAYa,WAAWF;QAAc;IAC/E;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQvB,wBAAwBE,iBAAiB;AAE9D,OAAO,MAAMsB,cAAcvB,+BAA+BsB,OAAO;IAC/DpB,UAAUJ,aAAa0B,YAAY;IACnCpB,QAAQN,aAAa2B,kBAAkB;IACvClB,YAAYT,aAAa4B,kBAAkB;AAC7C,GAAG;AAEH,OAAO,MAAMC,eAAe3B,+BAA+BsB,OAAO;IAChEpB,UAAUJ,aAAa8B,cAAc;IACrCxB,QAAQN,aAAaO,kBAAkB;IACvCE,YAAYT,aAAaU,kBAAkB;AAC7C,GAAG"}
+{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */\n  exitEasing?: string;\n\n  /** The scale value to animate from. Defaults to `0.9`. */\n  fromScale?: number;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromValue: fromScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","fadeAtom","scaleAtom","scalePresenceFn","duration","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","direction","fromValue","exitAtoms","push","enter","exit","Scale","ScaleSnappy","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EACZC,uBAAuB,EAEvBC,8BAA8B,QACzB,yBAAyB;AAChC,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AAsBnD,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWN,aAAaO,cAAc,EACtCC,SAASR,aAAaS,kBAAkB,EACxCC,eAAeV,aAAaW,cAAc,EAC1CC,aAAaZ,aAAaa,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACZ,UAAU;YAAEa,WAAW;YAASX;YAAUE;YAAQU,WAAWJ;QAAU;KAAG;IAC9F,MAAMK,YAAY;QAChBf,UAAU;YACRa,WAAW;YACXX,UAAUI;YACVF,QAAQI;YACRM,WAAWJ;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACjB,SAAS;YAAEc,WAAW;YAASX;YAAUE;QAAO;QAChEW,UAAUC,IAAI,CAACjB,SAAS;YAAEc,WAAW;YAAQX,UAAUI;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLS,OAAOL;QACPM,MAAMH;IACR;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMI,QAAQtB,wBAAwBI,iBAAiB;AAE9D,OAAO,MAAMmB,cAActB,+BAA+BqB,OAAO;IAC/DjB,UAAUN,aAAaW,cAAc;AACvC,GAAG;AAEH,OAAO,MAAMc,eAAevB,+BAA+BqB,OAAO;IAChEjB,UAAUN,aAAa0B,YAAY;AACrC,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection, motionTokens } from '@fluentui/react-motion';\n\ninterface ScaleAtomParams {\n  direction: PresenceDirection;\n  duration: number;\n  easing?: string;\n  fromValue?: number;\n  toValue?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting scale value. Defaults to 0.9.\n * @param toValue - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  fromValue = 0.9,\n  toValue = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromValue }, { scale: toValue }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n  };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","fromValue","toValue","keyframes","scale","reverse"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmBaA;;;eAAAA;;;6BAnB+C;AAmBrD,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;IACF;AACF"}

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

@@ -20,55 +20,47 @@ _export(exports, {
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, fromScale = 0.9, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const toScale = 1;
-    // TODO: use fadeAtom
-    // TODO: make scaleAtom
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
-            visibility: 'visible'
-        },
-        {
-            opacity: toOpacity,
-            transform: `scale3d(${toScale}, ${toScale}, 1)`
-        }
-    ];
-    const exitKeyframes = [
-        {
-            opacity: toOpacity,
-            transform: `scale3d(${toScale}, ${toScale}, 1)`
-        },
-        {
-            opacity: fromOpacity,
-            transform: `scale3d(${fromScale}, ${fromScale}, 1)`,
-            visibility: 'hidden'
-        }
-    ];
-    return {
-        enter: {
+const _fadeatom = require("../../atoms/fade-atom");
+const _scaleatom = require("../../atoms/scale-atom");
+/** Define a presence motion for scale in/out */ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, fromScale = 0.9, animateOpacity = true })=>{
+    const enterAtoms = [
+        (0, _scaleatom.scaleAtom)({
+            direction: 'enter',
             duration,
             easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
+            fromValue: fromScale
+        })
+    ];
+    const exitAtoms = [
+        (0, _scaleatom.scaleAtom)({
+            direction: 'exit',
             duration: exitDuration,
             easing: exitEasing,
-            keyframes: exitKeyframes
-        }
+            fromValue: fromScale
+        })
+    ];
+    // Only add fade atoms if animateOpacity is true.
+    if (animateOpacity) {
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration,
+            easing
+        }));
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitDuration,
+            easing: exitEasing
+        }));
+    }
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
     };
 };
 const Scale = (0, _reactmotion.createPresenceComponent)(scalePresenceFn);
 const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
-    duration: _reactmotion.motionTokens.durationFast,
-    easing: _reactmotion.motionTokens.curveDecelerateMax,
-    exitEasing: _reactmotion.motionTokens.curveAccelerateMax
+    duration: _reactmotion.motionTokens.durationNormal
 });
 const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
-    duration: _reactmotion.motionTokens.durationGentle,
-    easing: _reactmotion.motionTokens.curveDecelerateMid,
-    exitEasing: _reactmotion.motionTokens.curveAccelerateMid
+    duration: _reactmotion.motionTokens.durationSlow
 });

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';\n\ntype ScaleVariantParams = {\n  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationNormal` value (200 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMid` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (scale-out). Defaults to the `duration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMid` value.  */\n  exitEasing?: string;\n\n  /** The scale value to animate from. Defaults to `0.9`. */\n  fromScale?: number;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveDecelerateMid,\n  exitDuration = duration,\n  exitEasing = motionTokens.curveAccelerateMid,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const toScale = 1;\n\n  // TODO: use fadeAtom\n  // TODO: make scaleAtom\n  const enterKeyframes = [\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n  ];\n\n  return {\n    enter: {\n      duration,\n      easing,\n      keyframes: enterKeyframes,\n    },\n    exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationFast,\n  easing: motionTokens.curveDecelerateMax,\n  exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationGentle,\n  easing: motionTokens.curveDecelerateMid,\n  exitEasing: motionTokens.curveAccelerateMid,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","exitDuration","exitEasing","curveAccelerateMid","fromScale","animateOpacity","fromOpacity","toOpacity","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","keyframes","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","curveDecelerateMax","curveAccelerateMax","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA+DaA,KAAK;eAALA;;IAQAC,YAAY;eAAZA;;IANAC,WAAW;eAAXA;;;6BA5DN;AAsBP,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeL,QAAQ,EACvBM,aAAaL,yBAAY,CAACM,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,UAAU;IAEhB,qBAAqB;IACrB,uBAAuB;IACvB,MAAMC,iBAAiB;QACrB;YAAEC,SAASJ;YAAaK,WAAW,CAAC,QAAQ,EAAEP,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEQ,YAAY;QAAU;QACnG;YAAEF,SAASH;YAAWI,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASH;YAAWI,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASJ;YAAaK,WAAW,CAAC,QAAQ,EAAEP,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEQ,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLlB;YACAG;YACAgB,WAAWN;QACb;QACAO,MAAM;YAAEpB,UAAUK;YAAcF,QAAQG;YAAYa,WAAWF;QAAc;IAC/E;AACF;AAGO,MAAMrB,QAAQyB,IAAAA,oCAAuB,EAACtB;AAEtC,MAAMD,cAAcwB,IAAAA,2CAA8B,EAAC1B,OAAO;IAC/DI,UAAUC,yBAAY,CAACsB,YAAY;IACnCpB,QAAQF,yBAAY,CAACuB,kBAAkB;IACvClB,YAAYL,yBAAY,CAACwB,kBAAkB;AAC7C;AAEO,MAAM5B,eAAeyB,IAAAA,2CAA8B,EAAC1B,OAAO;IAChEI,UAAUC,yBAAY,CAACyB,cAAc;IACrCvB,QAAQF,yBAAY,CAACG,kBAAkB;IACvCE,YAAYL,yBAAY,CAACM,kBAAkB;AAC7C"}
+{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\n\ntype ScaleVariantParams = {\n  /** Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms). */\n  duration?: number;\n\n  /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.  */\n  easing?: string;\n\n  /** Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms). */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.  */\n  exitEasing?: string;\n\n  /** The scale value to animate from. Defaults to `0.9`. */\n  fromScale?: number;\n\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n};\n\n/** Define a presence motion for scale in/out */\nconst scalePresenceFn: PresenceMotionFn<ScaleVariantParams> = ({\n  duration = motionTokens.durationGentle,\n  easing = motionTokens.curveDecelerateMax,\n  exitDuration = motionTokens.durationNormal,\n  exitEasing = motionTokens.curveAccelerateMax,\n  fromScale = 0.9,\n  animateOpacity = true,\n}) => {\n  const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, fromValue: fromScale })];\n  const exitAtoms = [\n    scaleAtom({\n      direction: 'exit',\n      duration: exitDuration,\n      easing: exitEasing,\n      fromValue: fromScale,\n    }),\n  ];\n\n  // Only add fade atoms if animateOpacity is true.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing }));\n    exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing }));\n  }\n\n  return {\n    enter: enterAtoms,\n    exit: exitAtoms,\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationNormal,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  duration: motionTokens.durationSlow,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","exitDuration","durationNormal","exitEasing","curveAccelerateMax","fromScale","animateOpacity","enterAtoms","scaleAtom","direction","fromValue","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6DaA,KAAK;eAALA;;IAMAC,YAAY;eAAZA;;IAJAC,WAAW;eAAXA;;;6BA1DN;0BACkB;2BACC;AAsB1B,8CAA8C,GAC9C,MAAMC,kBAAwD,CAAC,EAC7DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,eAAeJ,yBAAY,CAACK,cAAc,EAC1CC,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAY,GAAG,EACfC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQW,WAAWL;QAAU;KAAG;IAC9F,MAAMM,YAAY;QAChBH,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXb,UAAUK;YACVF,QAAQI;YACRO,WAAWL;QACb;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWK,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAASb;YAAUG;QAAO;QAChEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEJ,WAAW;YAAQb,UAAUK;YAAcF,QAAQI;QAAW;IAC1F;IAEA,OAAO;QACLW,OAAOP;QACPQ,MAAMJ;IACR;AACF;AAGO,MAAMnB,QAAQwB,IAAAA,oCAAuB,EAACrB;AAEtC,MAAMD,cAAcuB,IAAAA,2CAA8B,EAACzB,OAAO;IAC/DI,UAAUC,yBAAY,CAACK,cAAc;AACvC;AAEO,MAAMT,eAAewB,IAAAA,2CAA8B,EAACzB,OAAO;IAChEI,UAAUC,yBAAY,CAACqB,YAAY;AACrC"}

package/package.json

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