@fluentui/react-motion - npm Package Compare versions

Comparing version 9.6.6 to 9.6.7

CHANGELOG.md

 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 08 Jan 2025 18:29:14 GMT and should not be manually modified.
+This log was last generated on Wed, 22 Jan 2025 13:55:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.7)
+
+Wed, 22 Jan 2025 13:55:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.6..@fluentui/react-motion_v9.6.7)
+
+### Patches
+
+- feat: add extended support for reduced motion ([PR #33353](https://github.com/microsoft/fluentui/pull/33353) by [e-mail])
+- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
+
 ## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.6)
 
-Wed, 08 Jan 2025 18:29:14 GMT 
+Wed, 08 Jan 2025 18:33:34 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.5..@fluentui/react-motion_v9.6.6)
@@ -11,0 +21,0 @@

dist/index.d.ts

@@ -5,6 +5,17 @@ import * as React_2 from 'react';
 
-export declare type AtomMotion = {
+declare type AtomCore = {
     keyframes: Keyframe[];
 } & KeyframeEffectOptions;
 
+export declare type AtomMotion = AtomCore & {
+    /**
+     * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
+     * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is
+     * active). If not provided, the duration of the animation will be overridden to be 1ms.
+     *
+     * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.
+     */
+    reducedMotion?: Partial<AtomCore>;
+};
+
 export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
@@ -11,0 +22,0 @@ element: HTMLElement;

lib-commonjs/hooks/useAnimateAtoms.js

@@ -5,5 +5,13 @@ "use strict";
 });
-Object.defineProperty(exports, "useAnimateAtoms", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_ANIMATION_OPTIONS: function() {
+        return DEFAULT_ANIMATION_OPTIONS;
+    },
+    useAnimateAtoms: function() {
         return useAnimateAtoms;
@@ -14,2 +22,10 @@ }
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const DEFAULT_ANIMATION_OPTIONS = {
+    fill: 'forwards'
+};
+// A motion atom's default reduced motion is a simple 1 ms duration.
+// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
+const DEFAULT_REDUCED_MOTION_ATOM = {
+    duration: 1
+};
 function useAnimateAtomsInSupportedEnvironment() {
@@ -25,14 +41,18 @@ var _window_Animation;
         const animations = atoms.map((motion)=>{
-            const { keyframes, ...params } = motion;
-            const animation = element.animate(keyframes, {
-                fill: 'forwards',
+            // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+            const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+            // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+            const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
+            const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
+            const animationParams = {
+                ...DEFAULT_ANIMATION_OPTIONS,
                 ...params,
-                ...isReducedMotion && {
-                    duration: 1
-                }
-            });
+                // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+                ...isReducedMotion && reducedMotionParams
+            };
+            const animation = element.animate(animationKeyframes, animationParams);
             if (SUPPORTS_PERSIST) {
                 animation.persist();
             } else {
-                const resultKeyframe = keyframes[keyframes.length - 1];
+                const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
                 var _element_style;
@@ -39,0 +59,0 @@ Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);

lib-commonjs/slots/presenceMotionSlot.js

@@ -15,3 +15,3 @@ "use strict";
 function presenceMotionSlot(motion, options) {
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
@@ -18,0 +18,0 @@ if (process.env.NODE_ENV !== 'production') {

lib/hooks/useAnimateAtoms.js

 import * as React from 'react';
+export const DEFAULT_ANIMATION_OPTIONS = {
+    fill: 'forwards'
+};
+// A motion atom's default reduced motion is a simple 1 ms duration.
+// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
+const DEFAULT_REDUCED_MOTION_ATOM = {
+    duration: 1
+};
 function useAnimateAtomsInSupportedEnvironment() {
@@ -12,14 +20,18 @@ var _window_Animation;
         const animations = atoms.map((motion)=>{
-            const { keyframes, ...params } = motion;
-            const animation = element.animate(keyframes, {
-                fill: 'forwards',
+            // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+            const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+            // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+            const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
+            const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
+            const animationParams = {
+                ...DEFAULT_ANIMATION_OPTIONS,
                 ...params,
-                ...isReducedMotion && {
-                    duration: 1
-                }
-            });
+                // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+                ...isReducedMotion && reducedMotionParams
+            };
+            const animation = element.animate(animationKeyframes, animationParams);
             if (SUPPORTS_PERSIST) {
                 animation.persist();
             } else {
-                const resultKeyframe = keyframes[keyframes.length - 1];
+                const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
                 var _element_style;
@@ -26,0 +38,0 @@ Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);

lib/slots/presenceMotionSlot.js

 import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
 import * as React from 'react';
 export function presenceMotionSlot(motion, options) {
-    // eslint-disable-next-line deprecation/deprecation
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
@@ -6,0 +6,0 @@ if (process.env.NODE_ENV !== 'production') {

package.json

 {
   "name": "@fluentui/react-motion",
-  "version": "9.6.6",
+  "version": "9.6.7",
   "description": "A package with utilities & motion definitions using Web Animations API",
@@ -29,3 +29,3 @@ "main": "lib-commonjs/index.js",
     "@fluentui/react-shared-contexts": "^9.21.2",
-    "@fluentui/react-utilities": "^9.18.19",
+    "@fluentui/react-utilities": "^9.18.20",
     "@swc/helpers": "^0.5.1",
@@ -32,0 +32,0 @@ "react-is": "^17.0.2"

No alert changes

Improved metrics

Total package byte prevSize

223042

increased by3.22%

Lines of code

1940

increased by2.21%

Dependency changes

• Updated@fluentui/react-utilities@^9.18.20