@fluentui/react-motion - npm Package Compare versions

Comparing version 0.0.0-nightly-20240820-2210.1 to 0.0.0-nightly-20240822-0407.1

CHANGELOG.md

 # Change Log - @fluentui/react-motion
 
-This log was last generated on Tue, 20 Aug 2024 22:14:51 GMT and should not be manually modified.
+This log was last generated on Thu, 22 Aug 2024 04:11:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20240820-2210.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20240820-2210.1)
+## [0.0.0-nightly-20240822-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20240822-0407.1)
 
-Tue, 20 Aug 2024 22:14:51 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.4.0..@fluentui/react-motion_v0.0.0-nightly-20240820-2210.1)
+Thu, 22 Aug 2024 04:11:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.5.0..@fluentui/react-motion_v0.0.0-nightly-20240822-0407.1)
 
@@ -15,7 +15,16 @@ ### Changes
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by [e-mail])
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240820-2210.1 ([commit](https://github.com/microsoft/fluentui/commit/d2c24a363450afb0fe5172e63aa435770d001e9e) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240822-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/d7009747796a586507e4c4ebd32c74df222feac4) by beachball)
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.5.0)
+
+Fri, 16 Aug 2024 10:24:17 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.4.0..@fluentui/react-motion_v9.5.0)
+
+### Minor changes
+
+- feat: Add context to configure motion behaviour ([PR #32316](https://github.com/microsoft/fluentui/pull/32316) by [e-mail])
+
 ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.4.0)
@@ -22,0 +31,0 @@

dist/index.d.ts

@@ -52,2 +52,9 @@ import * as React_2 from 'react';
 
+export declare const MotionBehaviourProvider: React_2.Provider<MotionBehaviourType | undefined>;
+
+/**
+ * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.
+ */
+declare type MotionBehaviourType = 'skip' | 'default';
+
 export declare type MotionComponentProps = {
@@ -54,0 +61,0 @@ children: React_2.ReactElement;

lib-commonjs/factories/createMotionComponent.js

@@ -18,2 +18,3 @@ "use strict";
 const _getChildElement = require("../utils/getChildElement");
+const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
 function createMotionComponent(value) {
@@ -27,3 +28,7 @@ const Atom = (props)=>{
         const elementRef = _react.useRef();
-        const paramsRef = _react.useRef(params);
+        const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
+        const optionsRef = _react.useRef({
+            skipMotions,
+            params
+        });
         const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
@@ -43,3 +48,6 @@ const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
             // We store the params in a ref to avoid re-rendering the component when the params change.
-            paramsRef.current = params;
+            optionsRef.current = {
+                skipMotions,
+                params
+            };
         });
@@ -51,3 +59,3 @@ (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
                     element,
-                    ...paramsRef.current
+                    ...optionsRef.current.params
                 }) : value;
@@ -58,4 +66,7 @@ onMotionStart();
                 });
+                handleRef.current = handle;
                 handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
-                handleRef.current = handle;
+                if (optionsRef.current.skipMotions) {
+                    handle.finish();
+                }
                 return ()=>{
@@ -62,0 +73,0 @@ handle.cancel();

lib-commonjs/factories/createPresenceComponent.js

@@ -28,2 +28,3 @@ "use strict";
 const _getChildElement = require("../utils/getChildElement");
+const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
 const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
@@ -41,2 +42,3 @@ function shouldSkipAnimation(appear, isFirstMount, visible) {
         };
+        const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
         const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
@@ -51,3 +53,4 @@ const params = _rest;
             appear,
-            params
+            params,
+            skipMotions
         });
@@ -81,3 +84,4 @@ const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
                 appear,
-                params
+                params,
+                skipMotions
             };
@@ -96,4 +100,5 @@ });
             const direction = visible ? 'enter' : 'exit';
-            const forceFinishMotion = !visible && isFirstMount;
-            if (!forceFinishMotion) {
+            const applyInitialStyles = !visible && isFirstMount;
+            const skipAnimation = optionsRef.current.skipMotions;
+            if (!applyInitialStyles) {
                 handleMotionStart(direction);
@@ -104,5 +109,5 @@ }
             });
-            if (forceFinishMotion) {
+            if (applyInitialStyles) {
                 // Heads up!
-                // .finish() is used there to skip animation on first mount, but apply animation styles immediately
+                // .finish() is used in this case to skip animation and apply animation styles immediately
                 handle.finish();
@@ -113,2 +118,5 @@ return;
             handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
+            if (skipAnimation) {
+                handle.finish();
+            }
             return ()=>{
@@ -115,0 +123,0 @@ handle.cancel();

lib-commonjs/index.js

@@ -12,2 +12,5 @@ "use strict";
 _export(exports, {
+    MotionBehaviourProvider: function() {
+        return _MotionBehaviourContext.MotionBehaviourProvider;
+    },
     PresenceGroup: function() {
@@ -44,1 +47,2 @@ return _PresenceGroup.PresenceGroup;
 const _presenceMotionSlot = require("./slots/presenceMotionSlot");
+const _MotionBehaviourContext = require("./contexts/MotionBehaviourContext");

lib/factories/createMotionComponent.js

@@ -7,2 +7,3 @@ import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
 import { getChildElement } from '../utils/getChildElement';
+import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
 /**
@@ -20,3 +21,7 @@ * Creates a component that will animate the children using the provided motion.
         const elementRef = React.useRef();
-        const paramsRef = React.useRef(params);
+        const skipMotions = useMotionBehaviourContext() === 'skip';
+        const optionsRef = React.useRef({
+            skipMotions,
+            params
+        });
         const animateAtoms = useAnimateAtoms();
@@ -36,3 +41,6 @@ const isReducedMotion = useIsReducedMotion();
             // We store the params in a ref to avoid re-rendering the component when the params change.
-            paramsRef.current = params;
+            optionsRef.current = {
+                skipMotions,
+                params
+            };
         });
@@ -44,3 +52,3 @@ useIsomorphicLayoutEffect(()=>{
                     element,
-                    ...paramsRef.current
+                    ...optionsRef.current.params
                 }) : value;
@@ -51,4 +59,7 @@ onMotionStart();
                 });
+                handleRef.current = handle;
                 handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
-                handleRef.current = handle;
+                if (optionsRef.current.skipMotions) {
+                    handle.finish();
+                }
                 return ()=>{
@@ -55,0 +66,0 @@ handle.cancel();

lib/factories/createPresenceComponent.js

@@ -9,2 +9,3 @@ import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
 import { getChildElement } from '../utils/getChildElement';
+import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
 /**
@@ -24,2 +25,3 @@ * @internal A private symbol to store the motion definition on the component for variants.
         };
+        const skipMotions = useMotionBehaviourContext() === 'skip';
         const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
@@ -34,3 +36,4 @@ const params = _rest;
             appear,
-            params
+            params,
+            skipMotions
         });
@@ -64,3 +67,4 @@ const animateAtoms = useAnimateAtoms();
                 appear,
-                params
+                params,
+                skipMotions
             };
@@ -79,4 +83,5 @@ });
             const direction = visible ? 'enter' : 'exit';
-            const forceFinishMotion = !visible && isFirstMount;
-            if (!forceFinishMotion) {
+            const applyInitialStyles = !visible && isFirstMount;
+            const skipAnimation = optionsRef.current.skipMotions;
+            if (!applyInitialStyles) {
                 handleMotionStart(direction);
@@ -87,5 +92,5 @@ }
             });
-            if (forceFinishMotion) {
+            if (applyInitialStyles) {
                 // Heads up!
-                // .finish() is used there to skip animation on first mount, but apply animation styles immediately
+                // .finish() is used in this case to skip animation and apply animation styles immediately
                 handle.finish();
@@ -96,2 +101,5 @@ return;
             handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
+            if (skipAnimation) {
+                handle.finish();
+            }
             return ()=>{
@@ -98,0 +106,0 @@ handle.cancel();

lib/index.js

@@ -7,1 +7,2 @@ export { motionTokens, durations, curves } from './motions/motionTokens';
 export { presenceMotionSlot } from './slots/presenceMotionSlot';
+export { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';

package.json

 {
   "name": "@fluentui/react-motion",
-  "version": "0.0.0-nightly-20240820-2210.1",
+  "version": "0.0.0-nightly-20240822-0407.1",
   "description": "A package with utilities & motion definitions using Web Animations API",
@@ -35,4 +35,4 @@ "main": "lib-commonjs/index.js",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20240820-2210.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20240822-0407.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20240822-0407.1",
     "@fluentui/scripts-api-extractor": "*",
@@ -43,4 +43,4 @@ "@fluentui/scripts-tasks": "*",
   "dependencies": {
-    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240820-2210.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20240820-2210.1",
+    "@fluentui/react-shared-contexts": "0.0.0-nightly-20240822-0407.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20240822-0407.1",
     "@swc/helpers": "^0.5.1",
@@ -47,0 +47,0 @@ "react-is": "^17.0.2"

No alert changes

Improved metrics

Total package byte prevSize

212217

increased by4.05%

Number of package files

85

increased by4.94%

Lines of code

1875

increased by4.52%

Dependency changes

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

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

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

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

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

• - Removed@fluentui/keyboard-keys@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly-20240820-2210.1(transitive)

• - Removed@fluentui/tokens@0.0.0-nightly-20240820-2210.1(transitive)

• Updated@fluentui/react-shared-contexts@0.0.0-nightly-20240822-0407.1

• Updated@fluentui/react-utilities@0.0.0-nightly-20240822-0407.1