@fluentui/react-motion-components-preview - npm Package Compare versions

Comparing version 0.4.9 to 0.5.0

CHANGELOG.md

 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Wed, 22 Jan 2025 14:00:19 GMT and should not be manually modified.
+This log was last generated on Wed, 14 May 2025 18:45:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.5.0)
+
+Wed, 14 May 2025 18:45:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.4.3..@fluentui/react-motion-components-preview_v0.5.0)
+
+### Minor changes
+
+- refactor(motion): simplify Fade & Scale variant creation with createPresenceComponentVariant ([PR #34042](https://github.com/microsoft/fluentui/pull/34042) by [e-mail])
+
 ## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.3)
@@ -8,0 +17,0 @@

dist/index.d.ts

 import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
-import type { PresenceMotion } from '@fluentui/react-motion';
 import type { PresenceMotionFn } from '@fluentui/react-motion';
@@ -60,23 +59,17 @@
 
-/** Define a presence motion for fade in/out  */
-export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
-
-/** Define a presence motion for scale in/out */
-export declare const createScalePresence: PresenceMotionFnCreator<ScaleVariantParams_unstable, ScaleRuntimeParams_unstable>;
-
 /** A React component that applies fade in/out transitions to its children. */
-export declare const Fade: PresenceComponent<    {}>;
+export declare const Fade: PresenceComponent<FadeVariantParams>;
 
-export declare const FadeRelaxed: PresenceComponent<    {}>;
+export declare const FadeRelaxed: PresenceComponent<FadeVariantParams>;
 
-export declare const FadeSnappy: PresenceComponent<    {}>;
+export declare const FadeSnappy: PresenceComponent<FadeVariantParams>;
 
 declare type FadeVariantParams = {
     /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
-    enterDuration?: number;
-    /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */
-    enterEasing?: string;
-    /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
+    duration?: number;
+    /** Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.  */
+    easing?: string;
+    /** Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry. */
     exitDuration?: number;
-    /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
+    /** Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.  */
     exitEasing?: string;
@@ -86,11 +79,2 @@ };
 /**
- * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.
- * The generated object defines a presence motion with `enter` and `exit` transitions.
- * This motion object is declarative, i.e. data without side effects,
- * and it is framework-independent, i.e. non-React.
- * It can be turned into a React component using `createPresenceComponent`.
- */
-declare type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotion;
-
-/**
  * This is a factory function that generates a motion function, which has variant params bound into it.
@@ -108,24 +92,23 @@ * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
 /** A React component that applies scale in/out transitions to its children. */
-export declare const Scale: PresenceComponent<ScaleRuntimeParams_unstable>;
+export declare const Scale: PresenceComponent<ScaleVariantParams>;
 
-export declare const ScaleRelaxed: PresenceComponent<ScaleRuntimeParams_unstable>;
+export declare const ScaleRelaxed: PresenceComponent<ScaleVariantParams>;
 
-declare type ScaleRuntimeParams_unstable = {
-    /** Whether to animate the opacity. Defaults to `true`. */
-    animateOpacity?: boolean;
-};
+export declare const ScaleSnappy: PresenceComponent<ScaleVariantParams>;
 
-export declare const ScaleSnappy: PresenceComponent<ScaleRuntimeParams_unstable>;
-
-declare type ScaleVariantParams_unstable = {
-    /** Time (ms) for the enter transition. Defaults to the `durationNormal` value (200 ms). */
-    enterDuration?: number;
-    /** Easing curve for the enter transition. Defaults to the `easeEaseMax` value.  */
-    enterEasing?: string;
-    /** Time (ms) for the exit transition. Defaults to the `enterDuration` param for symmetry. */
+declare type ScaleVariantParams = {
+    /** Time (ms) for the enter transition (scale-in). Defaults to the `durationNormal` value (200 ms). */
+    duration?: number;
+    /** Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMid` value.  */
+    easing?: string;
+    /** Time (ms) for the exit transition (scale-out). Defaults to the `duration` param for symmetry. */
     exitDuration?: number;
-    /** Easing curve for the exit transition. Defaults to the `enterEasing` param for symmetry.  */
+    /** Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMid` value.  */
     exitEasing?: string;
+    /** The scale value to animate from. Defaults to `0.9`. */
+    fromScale?: number;
+    /** Whether to animate the opacity. Defaults to `true`. */
+    animateOpacity?: boolean;
 };
 
 export { }

lib-commonjs/components/Fade/Fade.js

@@ -21,4 +21,4 @@ "use strict";
     },
-    createFadePresence: function() {
-        return createFadePresence;
+    fadePresenceFn: function() {
+        return fadePresenceFn;
     }
@@ -28,7 +28,8 @@ });
 const _fadeatom = require("../../atoms/fade-atom");
-const createFadePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, exitDuration = duration, exitEasing = easing })=>{
+    return {
         enter: (0, _fadeatom.fadeAtom)({
             direction: 'enter',
-            duration: enterDuration,
-            easing: enterEasing
+            duration,
+            easing
         }),
@@ -40,9 +41,10 @@ exit: (0, _fadeatom.fadeAtom)({
         })
-    });
-const Fade = (0, _reactmotion.createPresenceComponent)(createFadePresence());
-const FadeSnappy = (0, _reactmotion.createPresenceComponent)(createFadePresence({
-    enterDuration: _reactmotion.motionTokens.durationFast
-}));
-const FadeRelaxed = (0, _reactmotion.createPresenceComponent)(createFadePresence({
-    enterDuration: _reactmotion.motionTokens.durationGentle
-}));
+    };
+};
+const Fade = (0, _reactmotion.createPresenceComponent)(fadePresenceFn);
+const FadeSnappy = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
+    duration: _reactmotion.motionTokens.durationFast
+});
+const FadeRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
+    duration: _reactmotion.motionTokens.durationGentle
+});

lib-commonjs/components/Fade/index.js

@@ -20,7 +20,4 @@ "use strict";
         return _Fade.FadeSnappy;
-    },
-    createFadePresence: function() {
-        return _Fade.createFadePresence;
     }
 });
 const _Fade = require("./Fade");

lib-commonjs/components/Scale/index.js

@@ -20,7 +20,4 @@ "use strict";
         return _Scale.ScaleSnappy;
-    },
-    createScalePresence: function() {
-        return _Scale.createScalePresence;
     }
 });
 const _Scale = require("./Scale");

lib-commonjs/components/Scale/Scale.js

@@ -20,60 +20,56 @@ "use strict";
         return ScaleSnappy;
-    },
-    createScalePresence: function() {
-        return createScalePresence;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-const createScalePresence = ({ enterDuration = _reactmotion.motionTokens.durationGentle, enterEasing = _reactmotion.motionTokens.curveDecelerateMax, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
-        const fromOpacity = animateOpacity ? 0 : 1;
-        const toOpacity = 1;
-        const fromScale = 0.9; // Could be a custom param in the future
-        const toScale = 1;
-        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: {
-                duration: enterDuration,
-                easing: enterEasing,
-                keyframes: enterKeyframes
-            },
-            exit: {
-                duration: exitDuration,
-                easing: exitEasing,
-                keyframes: exitKeyframes
-            }
-        };
+/** 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: {
+            duration,
+            easing,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: exitKeyframes
+        }
     };
-const Scale = (0, _reactmotion.createPresenceComponent)(createScalePresence());
-const ScaleSnappy = (0, _reactmotion.createPresenceComponent)(createScalePresence({
-    enterDuration: _reactmotion.motionTokens.durationNormal,
-    enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
-    exitDuration: _reactmotion.motionTokens.durationFast,
+};
+const Scale = (0, _reactmotion.createPresenceComponent)(scalePresenceFn);
+const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
+    duration: _reactmotion.motionTokens.durationFast,
+    easing: _reactmotion.motionTokens.curveDecelerateMax,
     exitEasing: _reactmotion.motionTokens.curveAccelerateMax
-}));
-const ScaleRelaxed = (0, _reactmotion.createPresenceComponent)(createScalePresence({
-    enterDuration: _reactmotion.motionTokens.durationSlow,
-    enterEasing: _reactmotion.motionTokens.curveDecelerateMax,
-    exitDuration: _reactmotion.motionTokens.durationGentle,
-    exitEasing: _reactmotion.motionTokens.curveAccelerateMax
-}));
+});
+const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
+    duration: _reactmotion.motionTokens.durationGentle,
+    easing: _reactmotion.motionTokens.curveDecelerateMid,
+    exitEasing: _reactmotion.motionTokens.curveAccelerateMid
+});

lib-commonjs/index.js

@@ -47,8 +47,2 @@ "use strict";
         return _Collapse.createCollapsePresence;
-    },
-    createFadePresence: function() {
-        return _Fade.createFadePresence;
-    },
-    createScalePresence: function() {
-        return _Scale.createScalePresence;
     }
@@ -55,0 +49,0 @@ });

lib/components/Fade/Fade.js

@@ -1,8 +0,9 @@
-import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
 import { fadeAtom } from '../../atoms/fade-atom';
-/** Define a presence motion for fade in/out  */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+/** Define a presence motion for fade in/out  */ export const fadePresenceFn = ({ duration = motionTokens.durationNormal, easing = motionTokens.curveEasyEase, exitDuration = duration, exitEasing = easing })=>{
+    return {
         enter: fadeAtom({
             direction: 'enter',
-            duration: enterDuration,
-            easing: enterEasing
+            duration,
+            easing
         }),
@@ -14,9 +15,10 @@ exit: fadeAtom({
         })
-    });
-/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
-export const FadeSnappy = createPresenceComponent(createFadePresence({
-    enterDuration: motionTokens.durationFast
-}));
-export const FadeRelaxed = createPresenceComponent(createFadePresence({
-    enterDuration: motionTokens.durationGentle
-}));
+    };
+};
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadePresenceFn);
+export const FadeSnappy = createPresenceComponentVariant(Fade, {
+    duration: motionTokens.durationFast
+});
+export const FadeRelaxed = createPresenceComponentVariant(Fade, {
+    duration: motionTokens.durationGentle
+});

lib/components/Fade/index.js

@@ -1,1 +0,1 @@
-export { Fade, FadeRelaxed, FadeSnappy, createFadePresence } from './Fade';
+export { Fade, FadeRelaxed, FadeSnappy } from './Fade';

lib/components/Scale/index.js

@@ -1,1 +0,1 @@
-export { Scale, ScaleRelaxed, ScaleSnappy, createScalePresence } from './Scale';
+export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';

lib/components/Scale/Scale.js

@@ -1,54 +0,53 @@
-import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
-/** Define a presence motion for scale in/out */ export const createScalePresence = ({ enterDuration = motionTokens.durationGentle, enterEasing = motionTokens.curveDecelerateMax, exitDuration = motionTokens.durationNormal, exitEasing = motionTokens.curveAccelerateMax } = {})=>({ animateOpacity = true })=>{
-        const fromOpacity = animateOpacity ? 0 : 1;
-        const toOpacity = 1;
-        const fromScale = 0.9; // Could be a custom param in the future
-        const toScale = 1;
-        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: {
-                duration: enterDuration,
-                easing: enterEasing,
-                keyframes: enterKeyframes
-            },
-            exit: {
-                duration: exitDuration,
-                easing: exitEasing,
-                keyframes: exitKeyframes
-            }
-        };
+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: {
+            duration,
+            easing,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: exitKeyframes
+        }
     };
-/** A React component that applies scale in/out transitions to its children. */ export const Scale = createPresenceComponent(createScalePresence());
-export const ScaleSnappy = createPresenceComponent(createScalePresence({
-    enterDuration: motionTokens.durationNormal,
-    enterEasing: motionTokens.curveDecelerateMax,
-    exitDuration: motionTokens.durationFast,
+};
+/** 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
-}));
-export const ScaleRelaxed = createPresenceComponent(createScalePresence({
-    enterDuration: motionTokens.durationSlow,
-    enterEasing: motionTokens.curveDecelerateMax,
-    exitDuration: motionTokens.durationGentle,
-    exitEasing: motionTokens.curveAccelerateMax
-}));
+});
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
+    duration: motionTokens.durationGentle,
+    easing: motionTokens.curveDecelerateMid,
+    exitEasing: motionTokens.curveAccelerateMid
+});

lib/index.js

 export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
-export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
-export { Scale, ScaleSnappy, ScaleRelaxed, createScalePresence } from './components/Scale';
+export { Fade, FadeSnappy, FadeRelaxed } from './components/Fade';
+export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';

package.json

 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

93120

-4.3%

Number of package files

49

-7.55%

Lines of code

917

-3.68%

No dependency changes