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

Comparing version 0.1.4 to 0.2.0

CHANGELOG.md

 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 23 Jul 2024 20:13:12 GMT and should not be manually modified.
+This log was last generated on Tue, 15 Oct 2024 17:13:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
+
+Tue, 15 Oct 2024 17:13:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.2.0)
+
+### Minor changes
+
+- refactor: simplify motion component variant creation ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by [e-mail])
+- feat: add Collapse orientation parameter & horizontal implementation ([PR #32998](https://github.com/microsoft/fluentui/pull/32998) by [e-mail])
+
+### Patches
+
+- fix: Collapse should only effect opacity when animateOpacity is true ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by [e-mail])
+
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
@@ -8,0 +22,0 @@

dist/index.d.ts

@@ -0,16 +1,35 @@
+import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
+import type { PresenceMotionFn } from '@fluentui/react-motion';
 
 /** A React component that applies collapse/expand transitions to its children. */
-export declare const Collapse: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseExaggerated: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseSnappy: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+declare type CollapseOrientation = 'horizontal' | 'vertical';
 
+declare type CollapseRuntimeParams = {
+    /** Whether to animate the opacity. Defaults to `true`. */
+    animateOpacity?: boolean;
+    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
+    orientation?: CollapseOrientation;
+};
+
+export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
+
+declare type CollapseVariantParams = {
+    /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
+    enterDuration?: number;
+    /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */
+    enterEasing?: string;
+    /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
+/** Define a presence motion for collapse/expand */
+export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
+
 /** A React component that applies fade in/out transitions to its children. */
@@ -23,2 +42,14 @@ export declare const Fade: PresenceComponent<    {}>;
 
+/**
+ * This is a factory function that generates a motion function, which has variant params bound into it.
+ * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
+ * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
+ * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
+ * while the runtime params may give access to the target element, which is different for each instance.
+ *
+ * The generated motion function is also framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */
+declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
+
 /** A React component that applies scale in/out transitions to its children. */
@@ -25,0 +56,0 @@ export declare const Scale: PresenceComponent<    {

lib-commonjs/components/Collapse/Collapse.js

@@ -20,74 +20,99 @@ "use strict";
         return CollapseSnappy;
+    },
+    createCollapsePresence: function() {
+        return createCollapsePresence;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
-    const toHeight = `${element.scrollHeight}px`;
-    const overflow = 'hidden';
-    const duration = _reactmotion.motionTokens.durationNormal;
-    const easing = _reactmotion.motionTokens.curveEasyEaseMax;
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        },
-        // Transition to the height of the content, at 99.99% of the duration.
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            offset: 0.9999,
-            overflow
-        },
-        // On completion, remove the maxHeight because the content might need to expand later.
-        // This extra keyframe is simpler than firing a callback on completion.
-        {
-            opacity: toOpacity,
-            maxHeight: 'unset',
-            overflow
+const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
+        const fromOpacity = 0;
+        const toOpacity = 1;
+        const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
+        const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+        const toSize = `${measuredSize}px`;
+        // use generic names for size and overflow, handling vertical or horizontal orientation
+        const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+        const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+        // The enter transition is an array of up to 2 motion atoms: size and opacity.
+        const enterAtoms = [
+            // Expand size (height or width)
+            {
+                keyframes: [
+                    {
+                        [sizeName]: fromSize,
+                        [overflowName]: 'hidden'
+                    },
+                    {
+                        [sizeName]: toSize,
+                        offset: 0.9999,
+                        [overflowName]: 'hidden'
+                    },
+                    {
+                        [sizeName]: 'unset',
+                        [overflowName]: 'unset'
+                    }
+                ],
+                duration: enterDuration,
+                easing: enterEasing
+            }
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push({
+                keyframes: [
+                    {
+                        opacity: fromOpacity
+                    },
+                    {
+                        opacity: toOpacity
+                    }
+                ],
+                duration: enterDuration,
+                easing: enterEasing,
+                fill: 'both'
+            });
         }
-    ];
-    const exitKeyframes = [
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            overflow
-        },
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
+        // The exit transition is an array of up to 2 motion atoms: opacity and size.
+        const exitAtoms = [];
+        // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            exitAtoms.push({
+                keyframes: [
+                    {
+                        opacity: toOpacity
+                    },
+                    {
+                        opacity: fromOpacity
+                    }
+                ],
+                duration: exitDuration,
+                easing: exitEasing
+            });
         }
-    ];
-    return {
-        enter: {
-            duration,
-            easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
-            duration,
-            easing,
-            keyframes: exitKeyframes
-        }
+        exitAtoms.push({
+            keyframes: [
+                {
+                    [sizeName]: toSize,
+                    [overflowName]: 'hidden'
+                },
+                {
+                    [sizeName]: fromSize,
+                    [overflowName]: 'hidden'
+                }
+            ],
+            duration: exitDuration,
+            easing: exitEasing,
+            fill: 'both'
+        });
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
     };
-};
-const Collapse = (0, _reactmotion.createPresenceComponent)(collapseMotion);
-const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
-    all: {
-        duration: _reactmotion.motionTokens.durationUltraFast
-    }
-});
-const CollapseExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
-    enter: {
-        duration: _reactmotion.motionTokens.durationSlow,
-        easing: _reactmotion.motionTokens.curveEasyEaseMax
-    },
-    exit: {
-        duration: _reactmotion.motionTokens.durationNormal,
-        easing: _reactmotion.motionTokens.curveEasyEaseMax
-    }
-});
+const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
+const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
+    enterDuration: _reactmotion.motionTokens.durationFast
+}));
+const CollapseExaggerated = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
+    enterDuration: _reactmotion.motionTokens.durationSlower
+}));

lib-commonjs/index.js

@@ -38,2 +38,5 @@ "use strict";
         return _Scale.ScaleSnappy;
+    },
+    createCollapsePresence: function() {
+        return _Collapse.createCollapsePresence;
     }
@@ -40,0 +43,0 @@ });

lib/components/Collapse/Collapse.js

@@ -1,71 +0,94 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
-    const toHeight = `${element.scrollHeight}px`;
-    const overflow = 'hidden';
-    const duration = motionTokens.durationNormal;
-    const easing = motionTokens.curveEasyEaseMax;
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        },
-        // Transition to the height of the content, at 99.99% of the duration.
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            offset: 0.9999,
-            overflow
-        },
-        // On completion, remove the maxHeight because the content might need to expand later.
-        // This extra keyframe is simpler than firing a callback on completion.
-        {
-            opacity: toOpacity,
-            maxHeight: 'unset',
-            overflow
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+/** Define a presence motion for collapse/expand */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
+        const fromOpacity = 0;
+        const toOpacity = 1;
+        const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
+        const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+        const toSize = `${measuredSize}px`;
+        // use generic names for size and overflow, handling vertical or horizontal orientation
+        const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+        const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+        // The enter transition is an array of up to 2 motion atoms: size and opacity.
+        const enterAtoms = [
+            // Expand size (height or width)
+            {
+                keyframes: [
+                    {
+                        [sizeName]: fromSize,
+                        [overflowName]: 'hidden'
+                    },
+                    {
+                        [sizeName]: toSize,
+                        offset: 0.9999,
+                        [overflowName]: 'hidden'
+                    },
+                    {
+                        [sizeName]: 'unset',
+                        [overflowName]: 'unset'
+                    }
+                ],
+                duration: enterDuration,
+                easing: enterEasing
+            }
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push({
+                keyframes: [
+                    {
+                        opacity: fromOpacity
+                    },
+                    {
+                        opacity: toOpacity
+                    }
+                ],
+                duration: enterDuration,
+                easing: enterEasing,
+                fill: 'both'
+            });
         }
-    ];
-    const exitKeyframes = [
+        // The exit transition is an array of up to 2 motion atoms: opacity and size.
+        const exitAtoms = [];
+        // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            exitAtoms.push({
+                keyframes: [
+                    {
+                        opacity: toOpacity
+                    },
+                    {
+                        opacity: fromOpacity
+                    }
+                ],
+                duration: exitDuration,
+                easing: exitEasing
+            });
+        }
+        exitAtoms.push(// Collapse size (height or width)
         {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            overflow
-        },
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        }
-    ];
-    return {
-        enter: {
-            duration,
-            easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
-            duration,
-            easing,
-            keyframes: exitKeyframes
-        }
+            keyframes: [
+                {
+                    [sizeName]: toSize,
+                    [overflowName]: 'hidden'
+                },
+                {
+                    [sizeName]: fromSize,
+                    [overflowName]: 'hidden'
+                }
+            ],
+            duration: exitDuration,
+            easing: exitEasing,
+            fill: 'both'
+        });
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
     };
-};
-/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapseMotion);
-export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
-    all: {
-        duration: motionTokens.durationUltraFast
-    }
-});
-export const CollapseExaggerated = createPresenceComponentVariant(Collapse, {
-    enter: {
-        duration: motionTokens.durationSlow,
-        easing: motionTokens.curveEasyEaseMax
-    },
-    exit: {
-        duration: motionTokens.durationNormal,
-        easing: motionTokens.curveEasyEaseMax
-    }
-});
+/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
+export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
+    enterDuration: motionTokens.durationFast
+}));
+export const CollapseExaggerated = createPresenceComponent(createCollapsePresence({
+    enterDuration: motionTokens.durationSlower
+}));

lib/index.js

@@ -1,3 +0,3 @@
-export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';
+export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';
 export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';
 export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56547

increased by40.37%

Number of package files

37

increased by12.12%

Lines of code

604

increased by20.56%

Worsened metrics

Number of versions

101

decreased by-0.98%

Published versions last months

22

decreased by-4.35%

Published versions last year

101

decreased by-0.98%

No dependency changes