@fluentui/react-motion - npm Package Compare versions

Comparing version 9.1.0 to 9.2.0

CHANGELOG.md

 # Change Log - @fluentui/react-motion
 
-This log was last generated on Wed, 12 Jun 2024 13:16:08 GMT and should not be manually modified.
+This log was last generated on Mon, 17 Jun 2024 07:31:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.0)
+
+Mon, 17 Jun 2024 07:31:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.1.0..@fluentui/react-motion_v9.2.0)
+
+### Minor changes
+
+- feat: Implement `onMotionCancel` callback handler ([PR #31698](https://github.com/microsoft/fluentui/pull/31698) by [e-mail])
+
 ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.1.0)
 
-Wed, 12 Jun 2024 13:16:08 GMT 
+Wed, 12 Jun 2024 13:17:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.0.0..@fluentui/react-motion_v9.1.0)
@@ -11,0 +20,0 @@

dist/index.d.ts

@@ -55,2 +55,9 @@ import * as React_2 from 'react';
     /**
+     * Callback that is called when the whole motion is cancelled.
+     *
+     * A motion definition can contain multiple animations and therefore multiple "cancel" events. The callback is
+     * triggered once all animations have been cancelled with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionCancel?: (ev: null) => void;
+    /**
      * Callback that is called when the whole motion starts.
@@ -120,2 +127,12 @@ *
     /**
+     * Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
+     * emit a finish event but a specific cancel event
+     *
+     * A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
+     * triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
+     */
+    onMotionCancel?: (ev: null, data: {
+        direction: 'enter' | 'exit';
+    }) => void;
+    /**
      * Callback that is called when the whole motion starts.
@@ -122,0 +139,0 @@ *

lib-commonjs/factories/createMotionComponent.js

@@ -20,3 +20,3 @@ "use strict";
     const Atom = (props)=>{
-        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, ..._rest } = props;
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
         const params = _rest;
@@ -34,2 +34,5 @@ const child = (0, _getChildElement.getChildElement)(children);
         });
+        const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
+            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
+        });
         (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
@@ -51,3 +54,3 @@ // Heads up!
                 });
-                handle.onfinish = onMotionFinish;
+                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
                 handleRef.current = handle;
@@ -62,3 +65,4 @@ return ()=>{
             onMotionFinish,
-            onMotionStart
+            onMotionStart,
+            onMotionCancel
         ]);
@@ -65,0 +69,0 @@ return /*#__PURE__*/ _react.cloneElement(children, {

lib-commonjs/factories/createPresenceComponent.js

@@ -30,3 +30,3 @@ "use strict";
         };
-        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, visible, unmountOnExit, ..._rest } = merged;
+        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
         const params = _rest;
@@ -58,2 +58,7 @@ const [mounted, setMounted] = (0, _useMountedState.useMountedState)(visible, unmountOnExit);
         });
+        const handleMotionCancel = (0, _reactutilities.useEventCallback)((direction)=>{
+            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
+                direction
+            });
+        });
         (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
@@ -92,5 +97,3 @@ // Heads up!
             handleRef.current = handle;
-            handle.onfinish = ()=>{
-                handleMotionFinish(direction);
-            };
+            handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
             return ()=>{
@@ -105,2 +108,3 @@ handle.cancel();
             handleMotionStart,
+            handleMotionCancel,
             visible
@@ -107,0 +111,0 @@ ]);

lib-commonjs/utils/animateAtoms.js

@@ -38,3 +38,3 @@ "use strict";
         },
-        set onfinish (callback){
+        setMotionEndCallbacks (onfinish, oncancel) {
             // Heads up!
@@ -48,3 +48,3 @@ // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is
                 if (animations.length === 0) {
-                    callback();
+                    onfinish();
                     return;
@@ -54,3 +54,3 @@ }
             Promise.all(animations.map((animation)=>animation.finished)).then(()=>{
-                callback();
+                onfinish();
             }).catch((err)=>{
@@ -60,3 +60,4 @@ var _element_ownerDocument_defaultView;
                 // Ignores "DOMException: The user aborted a request" that appears if animations are cancelled
-                if (DOMException && err instanceof DOMException) {
+                if (DOMException && err instanceof DOMException && err.name === 'AbortError') {
+                    oncancel();
                     return;
@@ -63,0 +64,0 @@ }

lib/factories/createMotionComponent.js

@@ -13,3 +13,3 @@ import { useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
     const Atom = (props)=>{
-        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, ..._rest } = props;
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
         const params = _rest;
@@ -27,2 +27,5 @@ const child = getChildElement(children);
         });
+        const onMotionCancel = useEventCallback(()=>{
+            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
+        });
         useIsomorphicLayoutEffect(()=>{
@@ -44,3 +47,3 @@ // Heads up!
                 });
-                handle.onfinish = onMotionFinish;
+                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
                 handleRef.current = handle;
@@ -55,3 +58,4 @@ return ()=>{
             onMotionFinish,
-            onMotionStart
+            onMotionStart,
+            onMotionCancel
         ]);
@@ -58,0 +62,0 @@ return React.cloneElement(children, {

lib/factories/createPresenceComponent.js

@@ -19,3 +19,3 @@ import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
         };
-        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, visible, unmountOnExit, ..._rest } = merged;
+        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
         const params = _rest;
@@ -47,2 +47,7 @@ const [mounted, setMounted] = useMountedState(visible, unmountOnExit);
         });
+        const handleMotionCancel = useEventCallback((direction)=>{
+            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
+                direction
+            });
+        });
         useIsomorphicLayoutEffect(()=>{
@@ -81,5 +86,3 @@ // Heads up!
             handleRef.current = handle;
-            handle.onfinish = ()=>{
-                handleMotionFinish(direction);
-            };
+            handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
             return ()=>{
@@ -95,2 +98,3 @@ handle.cancel();
             handleMotionStart,
+            handleMotionCancel,
             visible
@@ -97,0 +101,0 @@ ]);

lib/utils/animateAtoms.js

@@ -28,3 +28,3 @@ export function animateAtoms(element, value, options) {
         },
-        set onfinish (callback){
+        setMotionEndCallbacks (onfinish, oncancel) {
             // Heads up!
@@ -38,3 +38,3 @@ // Jest uses jsdom as the default environment, which doesn't support the Web Animations API. This no-op is
                 if (animations.length === 0) {
-                    callback();
+                    onfinish();
                     return;
@@ -44,3 +44,3 @@ }
             Promise.all(animations.map((animation)=>animation.finished)).then(()=>{
-                callback();
+                onfinish();
             }).catch((err)=>{
@@ -50,3 +50,4 @@ var _element_ownerDocument_defaultView;
                 // Ignores "DOMException: The user aborted a request" that appears if animations are cancelled
-                if (DOMException && err instanceof DOMException) {
+                if (DOMException && err instanceof DOMException && err.name === 'AbortError') {
+                    oncancel();
                     return;
@@ -53,0 +54,0 @@ }

package.json

 {
   "name": "@fluentui/react-motion",
-  "version": "9.1.0",
+  "version": "9.2.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
@@ -28,3 +28,5 @@ "main": "lib-commonjs/index.js",
     "test": "jest --passWithNoTests",
-    "type-check": "just-scripts type-check"
+    "type-check": "just-scripts type-check",
+    "e2e": "cypress run --component",
+    "e2e:local": "cypress open --component"
   },
@@ -36,3 +38,4 @@ "devDependencies": {
     "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*"
+    "@fluentui/scripts-tasks": "*",
+    "@fluentui/scripts-cypress": "*"
   },
@@ -39,0 +42,0 @@ "dependencies": {

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

155495

increased by3.95%

Lines of code

1463

increased by2.45%

Worsened metrics

Dev dependency count

6

increased by20%

No dependency changes