@fluentui/react-motion - npm Package Compare versions

Comparing version 9.3.0 to 9.4.0

CHANGELOG.md

 # Change Log - @fluentui/react-motion
 
-This log was last generated on Mon, 15 Jul 2024 17:20:19 GMT and should not be manually modified.
+This log was last generated on Tue, 23 Jul 2024 20:09:18 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.4.0)
+
+Tue, 23 Jul 2024 20:09:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.3.0..@fluentui/react-motion_v9.4.0)
+
+### Minor changes
+
+- feat: add presenceMotionSlot() API ([PR #31984](https://github.com/microsoft/fluentui/pull/31984) by [e-mail])
+- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
+
+### Patches
+
+- fix: improve Web Animations API detection in tests ([PR #32029](https://github.com/microsoft/fluentui/pull/32029) by [e-mail])
+
 ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.3.0)
 
-Mon, 15 Jul 2024 17:20:19 GMT 
+Mon, 15 Jul 2024 17:25:35 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.2..@fluentui/react-motion_v9.3.0)
@@ -11,0 +26,0 @@

dist/index.d.ts

 import * as React_2 from 'react';
+import { SlotComponentType } from '@fluentui/react-utilities';
+import { SlotRenderFunction } from '@fluentui/react-utilities';
 
@@ -205,4 +207,26 @@ export declare type AtomMotion = {
 
+export declare function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: PresenceMotionSlotProps<MotionParams> | null | undefined, options: {
+    elementType: React_2.FC<PresenceComponentProps & MotionParams>;
+    defaultProps: PresenceMotionSlotRenderProps & MotionParams;
+}): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;
+
+export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
+    /**
+     * @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
+     *
+     * If you want to override the animation, use the children render function instead.
+     */
+    as?: keyof JSX.IntrinsicElements;
+    children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
+        children: React_2.ReactElement;
+    }>;
+};
+
 /**
  * @internal
+ */
+declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
+
+/**
+ * @internal
  *
@@ -209,0 +233,0 @@ * Override properties for presence transitions.

lib-commonjs/hooks/useAnimateAtoms.js

@@ -13,49 +13,3 @@ "use strict";
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _document_defaultView;
-// eslint-disable-next-line no-restricted-globals
-const win = typeof document === 'object' ? (_document_defaultView = document.defaultView) === null || _document_defaultView === void 0 ? void 0 : _document_defaultView.window : undefined;
-// Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
-const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.prototype.animate === 'function')();
-/**
- * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
- * to ensure that the callback is not executed synchronously, which would cause the test to fail.
- *
- * @see https://github.com/microsoft/fluentui/issues/31701
- */ function useAnimateAtomsInTestEnvironment() {
-    const [count, setCount] = _react.useState(0);
-    const callbackRef = _react.useRef();
-    _react.useEffect(()=>{
-        if (count > 0) {
-            var _callbackRef_current;
-            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
-        }
-    }, [
-        count
-    ]);
-    return _react.useCallback(()=>{
-        return {
-            setMotionEndCallbacks (onfinish) {
-                callbackRef.current = onfinish;
-                setCount((v)=>v + 1);
-            },
-            set playbackRate (rate){
-            /* no-op */ },
-            cancel () {
-            /* no-op */ },
-            pause () {
-            /* no-op */ },
-            play () {
-            /* no-op */ },
-            finish () {
-            /* no-op */ }
-        };
-    }, []);
-}
-function useAnimateAtoms() {
-    'use no memo';
-    if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useAnimateAtomsInTestEnvironment();
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+function useAnimateAtomsInSupportedEnvironment() {
     return _react.useCallback((element, value, options)=>{
@@ -121,1 +75,54 @@ const atoms = Array.isArray(value) ? value : [
 }
+/**
+ * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
+ * to ensure that the callback is not executed synchronously, which would cause the test to fail.
+ *
+ * @see https://github.com/microsoft/fluentui/issues/31701
+ */ function useAnimateAtomsInTestEnvironment() {
+    const [count, setCount] = _react.useState(0);
+    const callbackRef = _react.useRef();
+    const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
+    _react.useEffect(()=>{
+        if (count > 0) {
+            var _callbackRef_current;
+            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
+        }
+    }, [
+        count
+    ]);
+    return _react.useCallback((element, value, options)=>{
+        const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
+        // Heads up!
+        // If the environment supports Web Animations API, we can use the native implementation.
+        if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
+            return realAnimateAtoms(element, value, options);
+        }
+        return {
+            setMotionEndCallbacks (onfinish) {
+                callbackRef.current = onfinish;
+                setCount((v)=>v + 1);
+            },
+            set playbackRate (rate){
+            /* no-op */ },
+            cancel () {
+            /* no-op */ },
+            pause () {
+            /* no-op */ },
+            play () {
+            /* no-op */ },
+            finish () {
+            /* no-op */ }
+        };
+    }, [
+        realAnimateAtoms
+    ]);
+}
+function useAnimateAtoms() {
+    'use no memo';
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useAnimateAtomsInTestEnvironment();
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useAnimateAtomsInSupportedEnvironment();
+}

lib-commonjs/index.js

@@ -32,2 +32,5 @@ "use strict";
         return _motionTokens.motionTokens;
+    },
+    presenceMotionSlot: function() {
+        return _presenceMotionSlot.presenceMotionSlot;
     }
@@ -40,1 +43,2 @@ });
 const _PresenceGroup = require("./components/PresenceGroup");
+const _presenceMotionSlot = require("./slots/presenceMotionSlot");

lib/hooks/useAnimateAtoms.js

@@ -1,51 +0,3 @@
-var _document_defaultView;
 import * as React from 'react';
-// eslint-disable-next-line no-restricted-globals
-const win = typeof document === 'object' ? (_document_defaultView = document.defaultView) === null || _document_defaultView === void 0 ? void 0 : _document_defaultView.window : undefined;
-// Heads up! "Element." is a side-effect for minifiers, should be kept as IIFE to avoid leaking after minification.
-const SUPPORTS_WEB_ANIMATIONS = /*@__PURE__*/ (()=>win && typeof win.Element.prototype.animate === 'function')();
-/**
- * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
- * to ensure that the callback is not executed synchronously, which would cause the test to fail.
- *
- * @see https://github.com/microsoft/fluentui/issues/31701
- */ function useAnimateAtomsInTestEnvironment() {
-    const [count, setCount] = React.useState(0);
-    const callbackRef = React.useRef();
-    React.useEffect(()=>{
-        if (count > 0) {
-            var _callbackRef_current;
-            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
-        }
-    }, [
-        count
-    ]);
-    return React.useCallback(()=>{
-        return {
-            setMotionEndCallbacks (onfinish) {
-                callbackRef.current = onfinish;
-                setCount((v)=>v + 1);
-            },
-            set playbackRate (rate){
-            /* no-op */ },
-            cancel () {
-            /* no-op */ },
-            pause () {
-            /* no-op */ },
-            play () {
-            /* no-op */ },
-            finish () {
-            /* no-op */ }
-        };
-    }, []);
-}
-/**
- * @internal
- */ export function useAnimateAtoms() {
-    'use no memo';
-    if (process.env.NODE_ENV === 'test' && !SUPPORTS_WEB_ANIMATIONS) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useAnimateAtomsInTestEnvironment();
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
+function useAnimateAtomsInSupportedEnvironment() {
     return React.useCallback((element, value, options)=>{
@@ -111,1 +63,56 @@ const atoms = Array.isArray(value) ? value : [
 }
+/**
+ * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
+ * to ensure that the callback is not executed synchronously, which would cause the test to fail.
+ *
+ * @see https://github.com/microsoft/fluentui/issues/31701
+ */ function useAnimateAtomsInTestEnvironment() {
+    const [count, setCount] = React.useState(0);
+    const callbackRef = React.useRef();
+    const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
+    React.useEffect(()=>{
+        if (count > 0) {
+            var _callbackRef_current;
+            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
+        }
+    }, [
+        count
+    ]);
+    return React.useCallback((element, value, options)=>{
+        const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
+        // Heads up!
+        // If the environment supports Web Animations API, we can use the native implementation.
+        if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
+            return realAnimateAtoms(element, value, options);
+        }
+        return {
+            setMotionEndCallbacks (onfinish) {
+                callbackRef.current = onfinish;
+                setCount((v)=>v + 1);
+            },
+            set playbackRate (rate){
+            /* no-op */ },
+            cancel () {
+            /* no-op */ },
+            pause () {
+            /* no-op */ },
+            play () {
+            /* no-op */ },
+            finish () {
+            /* no-op */ }
+        };
+    }, [
+        realAnimateAtoms
+    ]);
+}
+/**
+ * @internal
+ */ export function useAnimateAtoms() {
+    'use no memo';
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useAnimateAtomsInTestEnvironment();
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useAnimateAtomsInSupportedEnvironment();
+}

lib/index.js

@@ -6,1 +6,2 @@ export { motionTokens, durations, curves } from './motions/motionTokens';
 export { PresenceGroup } from './components/PresenceGroup';
+export { presenceMotionSlot } from './slots/presenceMotionSlot';

package.json

 {
   "name": "@fluentui/react-motion",
-  "version": "9.3.0",
+  "version": "9.4.0",
   "description": "A package with utilities & motion definitions using Web Animations API",
@@ -42,4 +42,4 @@ "main": "lib-commonjs/index.js",
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.19.1",
-    "@fluentui/react-utilities": "^9.18.12",
+    "@fluentui/react-shared-contexts": "^9.20.0",
+    "@fluentui/react-utilities": "^9.18.13",
     "@swc/helpers": "^0.5.1",
@@ -46,0 +46,0 @@ "react-is": "^17.0.2"

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

202719

increased by9.64%

Number of package files

81

increased by5.19%

Lines of code

1794

increased by7.88%

Worsened metrics

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• Updated@fluentui/react-shared-contexts@^9.20.0

• Updated@fluentui/react-utilities@^9.18.13