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

Comparing version 0.0.0-nightly-20241022-0408.1 to 0.0.0-nightly-20241023-0407.1

CHANGELOG.md

 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 22 Oct 2024 04:13:00 GMT and should not be manually modified.
+This log was last generated on Wed, 23 Oct 2024 04:11:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20241022-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
+## [0.0.0-nightly-20241023-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241023-0407.1)
 
-Tue, 22 Oct 2024 04:13:00 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
+Wed, 23 Oct 2024 04:11:45 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241023-0407.1)
 
@@ -15,5 +15,5 @@ ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by [e-mail])
-- Bump @fluentui/react-motion to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20241023-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/2d148a24ef86132106a54676eb87418afe7b84b2) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20241023-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/2d148a24ef86132106a54676eb87418afe7b84b2) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241023-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/2d148a24ef86132106a54676eb87418afe7b84b2) by beachball)
 
@@ -20,0 +20,0 @@ ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.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';
@@ -59,2 +60,5 @@
 
+/** Define a presence motion for fade in/out  */
+export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
+
 /** A React component that applies fade in/out transitions to its children. */
@@ -67,3 +71,23 @@ export declare const Fade: PresenceComponent<    {}>;
 
+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. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
 /**
+ * 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.
@@ -70,0 +94,0 @@ * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.

lib-commonjs/components/Fade/Fade.js

@@ -20,43 +20,40 @@ "use strict";
         return FadeSnappy;
+    },
+    createFadePresence: function() {
+        return createFadePresence;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-const duration = _reactmotion.motionTokens.durationNormal;
-const easing = _reactmotion.motionTokens.curveEasyEase;
-/** Define a presence motion for fade in/out  */ const fadeMotion = {
-    enter: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ]
-    },
-    exit: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ]
-    }
-};
-const Fade = (0, _reactmotion.createPresenceComponent)(fadeMotion);
-const FadeSnappy = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
-    all: {
-        duration: _reactmotion.motionTokens.durationFast
-    }
-});
-const FadeExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
-    all: {
-        duration: _reactmotion.motionTokens.durationGentle
-    }
-});
+const createFadePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+        enter: {
+            duration: enterDuration,
+            easing: enterEasing,
+            keyframes: [
+                {
+                    opacity: 0
+                },
+                {
+                    opacity: 1
+                }
+            ]
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: [
+                {
+                    opacity: 1
+                },
+                {
+                    opacity: 0
+                }
+            ]
+        }
+    });
+const Fade = (0, _reactmotion.createPresenceComponent)(createFadePresence());
+const FadeSnappy = (0, _reactmotion.createPresenceComponent)(createFadePresence({
+    enterDuration: _reactmotion.motionTokens.durationFast
+}));
+const FadeExaggerated = (0, _reactmotion.createPresenceComponent)(createFadePresence({
+    enterDuration: _reactmotion.motionTokens.durationGentle
+}));

lib-commonjs/index.js

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

lib/components/Fade/Fade.js

@@ -1,40 +0,34 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-const duration = motionTokens.durationNormal;
-const easing = motionTokens.curveEasyEase;
-/** Define a presence motion for fade in/out  */ const fadeMotion = {
-    enter: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ]
-    },
-    exit: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ]
-    }
-};
-/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadeMotion);
-export const FadeSnappy = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationFast
-    }
-});
-export const FadeExaggerated = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationGentle
-    }
-});
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+/** Define a presence motion for fade in/out  */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+        enter: {
+            duration: enterDuration,
+            easing: enterEasing,
+            keyframes: [
+                {
+                    opacity: 0
+                },
+                {
+                    opacity: 1
+                }
+            ]
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: [
+                {
+                    opacity: 1
+                },
+                {
+                    opacity: 0
+                }
+            ]
+        }
+    });
+/** 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 FadeExaggerated = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationGentle
+}));

lib/index.js

 export { Collapse, CollapseSnappy, CollapseExaggerated, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
-export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';
+export { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';
 export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';

package.json

 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.0.0-nightly-20241022-0408.1",
+  "version": "0.0.0-nightly-20241023-0407.1",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
@@ -32,4 +32,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20241022-0408.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241022-0408.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20241023-0407.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241023-0407.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -39,3 +39,3 @@ "@fluentui/scripts-tasks": "*"
   "dependencies": {
-    "@fluentui/react-motion": "0.0.0-nightly-20241022-0408.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20241023-0407.1",
     "@swc/helpers": "^0.5.1"
@@ -42,0 +42,0 @@ },

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

91319

increased by5.79%

Lines of code

897

increased by1.7%

Dependency changes

• + Added@fluentui/keyboard-keys@0.0.0-nightly-20241023-0407.1(transitive)

• + Added@fluentui/react-motion@0.0.0-nightly-20241023-0407.1(transitive)

• + Added@fluentui/react-shared-contexts@0.0.0-nightly-20241023-0407.1(transitive)

• + Added@fluentui/react-theme@0.0.0-nightly-20241023-0407.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly-20241023-0407.1(transitive)

• + Added@fluentui/tokens@0.0.0-nightly-20241023-0407.1(transitive)

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20241022-0408.1(transitive)

• - Removed@fluentui/react-motion@0.0.0-nightly-20241022-0408.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20241022-0408.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20241022-0408.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20241022-0408.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20241022-0408.1(transitive)

• Updated@fluentui/react-motion@0.0.0-nightly-20241023-0407.1