framer-motion 6.2.0 → 6.2.5

package/dist/cjs/index.js

@@ -139,7 +139,9 @@ var useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEff
 
 // Does this device prefer reduced motion? Returns `null` server-side.
 var prefersReducedMotion = { current: null };
+var hasDetected = false;
 function initPrefersReducedMotion() {
+    hasDetected = true;
     if (typeof window === "undefined")
         return;
     if (window.matchMedia) {
@@ -184,7 +186,7 @@ function useReducedMotion() {
     /**
      * Lazy initialisation of prefersReducedMotion
      */
-    !prefersReducedMotion && initPrefersReducedMotion();
+    !hasDetected && initPrefersReducedMotion();
     var _a = tslib.__read(React.useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting
@@ -1895,9 +1897,6 @@ function createProjectionNode(_a) {
             };
             this.hasProjected = false;
             this.isVisible = true;
-            /**
-             * Animation
-             */
             this.animationProgress = 0;
             /**
              * Shared layout
@@ -2022,6 +2021,15 @@ function createProjectionNode(_a) {
                         _this.startAnimation(animationOptions);
                     }
                     else {
+                        /**
+                         * If the layout hasn't changed and we have an animation that hasn't started yet,
+                         * finish it immediately. Otherwise it will be animating from a location
+                         * that was probably never commited to screen and look like a jumpy box.
+                         */
+                        if (!hasLayoutChanged &&
+                            _this.animationProgress === 0) {
+                            _this.finishAnimation();
+                        }
                         _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
                     }
                     _this.targetLayout = newLayout;
@@ -2511,6 +2519,7 @@ function createProjectionNode(_a) {
                 !isOnlyMember &&
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
+            this.animationProgress = 0;
             this.mixTargetDelta = function (latest) {
                 var _a;
                 var progress = latest / 1000;
@@ -2530,6 +2539,7 @@ function createProjectionNode(_a) {
                 }
                 _this.root.scheduleUpdateProjection();
                 _this.scheduleRender();
+                _this.animationProgress = progress;
             };
             this.mixTargetDelta(0);
         };
@@ -2895,6 +2905,10 @@ function clearMeasurements(node) {
     node.clearMeasurements();
 }
 function resetTransformStyle(node) {
+    var visualElement = node.options.visualElement;
+    if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
+        visualElement.notifyBeforeLayoutMeasure();
+    }
     node.resetTransform();
 }
 function finishAnimation(node) {
@@ -4335,6 +4349,12 @@ var gestureAnimations = {
     hover: makeRenderlessComponent(useHoverGesture),
 };
 
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useId = React__namespace.useId
+    ? React__namespace.useId
+    : function () { return useConstant(incrementId); };
+
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
  * to access information about whether it's still present in the React tree.
@@ -4365,8 +4385,8 @@ function usePresence() {
     var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
-    // Replace with useOpaqueId when released in React
-    var id = useUniqueId();
+    // Replace with useId when released in React
+    var id = useId();
     React.useEffect(function () { return register(id); }, []);
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -4397,9 +4417,6 @@ function useIsPresent() {
 function isPresent(context) {
     return context === null ? true : context.isPresent;
 }
-var counter = 0;
-var incrementId = function () { return counter++; };
-var useUniqueId = function () { return useConstant(incrementId); };
 
 function shallowCompare(next, prev) {
     if (!Array.isArray(prev))
@@ -5901,7 +5918,7 @@ function createLifecycles() {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            manager.notify.apply(manager, tslib.__spreadArray([], tslib.__read(args), false));
+            return manager.notify.apply(manager, tslib.__spreadArray([], tslib.__read(args), false));
         };
     });
     return lifecycles;
@@ -6104,6 +6121,7 @@ var visualElement = function (_a) {
                 if (isVariantNode && parent && !isControllingVariants) {
                     removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                 }
+                values.forEach(function (value, key) { return bindToMotionValue(key, value); });
                 parent === null || parent === void 0 ? void 0 : parent.children.add(element);
                 element.setProps(props);
             }, 
@@ -7084,12 +7102,22 @@ function createDomMotionComponent(key) {
  */
 var m = createMotionProxy(createDomMotionConfig);
 
+function useIsMounted() {
+    var isMounted = React.useRef(false);
+    React.useLayoutEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
 function useForceUpdate() {
-    var isUnmountingRef = React.useRef(false);
+    var isMounted = useIsMounted();
     var _a = tslib.__read(React.useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
     var forceRender = React.useCallback(function () {
-        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
     }, [forcedRenderCount]);
     /**
      * Defer this to the end of the next animation frame in case there are multiple
@@ -7099,16 +7127,10 @@ function useForceUpdate() {
     return [deferredForceRender, forcedRenderCount];
 }
 
-var presenceId = 0;
-function getPresenceId() {
-    var id = presenceId;
-    presenceId++;
-    return id;
-}
 var PresenceChild = function (_a) {
     var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
     var presenceChildren = useConstant(newChildrenMap);
-    var id = useConstant(getPresenceId);
+    var id = useId();
     var context = React.useMemo(function () { return ({
         id: id,
         initial: initial,
@@ -7160,17 +7182,14 @@ function newChildrenMap() {
     return new Map();
 }
 
-function getChildKey(child) {
-    return child.key || "";
-}
+var getChildKey = function (child) { return child.key || ""; };
+var isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
-    var seenChildren = process.env.NODE_ENV !== "production" ? new Set() : null;
+    var seenChildren = isDev ? new Set() : null;
     children.forEach(function (child) {
         var key = getChildKey(child);
-        if (process.env.NODE_ENV !== "production" && seenChildren) {
-            if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
-            }
+        if (isDev && seenChildren && seenChildren.has(key)) {
+            console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             seenChildren.add(key);
         }
         allChildren.set(key, child);
@@ -7226,29 +7245,34 @@ var AnimatePresence = function (_a) {
     var forceRenderLayoutGroup = React.useContext(LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
-    var isInitialRender = React.useRef(true);
-    var isMounted = React.useRef(true);
-    React.useEffect(function () { return function () {
-        isMounted.current = false;
-    }; }, []);
+    var isMounted = useIsMounted();
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
+    var childrenToRender = filteredChildren;
+    var exiting = new Set();
     // Keep a living record of the children we're actually rendering so we
     // can diff to figure out which are entering and exiting
-    var presentChildren = React.useRef(filteredChildren);
+    var presentChildren = React.useRef(childrenToRender);
     // A lookup table to quickly reference components by key
     var allChildren = React.useRef(new Map()).current;
-    // A living record of all currently exiting components.
-    var exiting = React.useRef(new Set()).current;
-    updateChildLookup(filteredChildren, allChildren);
     // If this is the initial component render, just deal with logic surrounding whether
     // we play onMount animations or not.
-    if (isInitialRender.current) {
+    var isInitialRender = React.useRef(true);
+    useIsomorphicLayoutEffect(function () {
         isInitialRender.current = false;
-        return (React__namespace.createElement(React__namespace.Fragment, null, filteredChildren.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
+        updateChildLookup(filteredChildren, allChildren);
+        presentChildren.current = childrenToRender;
+    });
+    useUnmountEffect(function () {
+        isInitialRender.current = true;
+        allChildren.clear();
+        exiting.clear();
+    });
+    if (isInitialRender.current) {
+        return (React__namespace.createElement(React__namespace.Fragment, null, childrenToRender.map(function (child) { return (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
-    var childrenToRender = tslib.__spreadArray([], tslib.__read(filteredChildren), false);
+    childrenToRender = tslib.__spreadArray([], tslib.__read(childrenToRender), false);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);
@@ -7260,10 +7284,6 @@ var AnimatePresence = function (_a) {
         if (targetKeys.indexOf(key) === -1) {
             exiting.add(key);
         }
-        else {
-            // In case this key has re-entered, remove from the exiting list
-            exiting.delete(key);
-        }
     }
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
@@ -7289,9 +7309,8 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
-                if (isMounted.current === false) {
+                if (isMounted.current === false)
                     return;
-                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }
@@ -7304,7 +7323,6 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    presentChildren.current = childrenToRender;
     if (process.env.NODE_ENV !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {
@@ -8275,13 +8293,15 @@ function useAnimatedState(initialState) {
     });
     React.useEffect(function () {
         element.mount({});
-        return element.unmount();
-    }, []);
+        return element.unmount;
+    }, [element]);
     React.useEffect(function () {
         element.setProps({
-            onUpdate: function (v) { return setAnimationState(tslib.__assign({}, v)); },
+            onUpdate: function (v) {
+                setAnimationState(tslib.__assign({}, v));
+            },
         });
-    });
+    }, [setAnimationState, element]);
     var startAnimation = useConstant(function () { return function (animationDefinition) {
         return animateVisualElement(element, animationDefinition);
     }; });
@@ -8392,6 +8412,7 @@ exports.useMotionTemplate = useMotionTemplate;
 exports.useMotionValue = useMotionValue;
 exports.usePresence = usePresence;
 exports.useReducedMotion = useReducedMotion;
+exports.useReducedMotionConfig = useReducedMotionConfig;
 exports.useResetProjection = useResetProjection;
 exports.useSpring = useSpring;
 exports.useTime = useTime;

package/dist/es/animation/use-animated-state.mjs

@@ -43,13 +43,15 @@ function useAnimatedState(initialState) {
     });
     useEffect(function () {
         element.mount({});
-        return element.unmount();
-    }, []);
+        return element.unmount;
+    }, [element]);
     useEffect(function () {
         element.setProps({
-            onUpdate: function (v) { return setAnimationState(__assign({}, v)); },
+            onUpdate: function (v) {
+                setAnimationState(__assign({}, v));
+            },
         });
-    });
+    }, [setAnimationState, element]);
     var startAnimation = useConstant(function () { return function (animationDefinition) {
         return animateVisualElement(element, animationDefinition);
     }; });

package/dist/es/components/AnimatePresence/PresenceChild.mjs

@@ -3,17 +3,12 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { useId } from '../../utils/use-id.mjs';
 
-var presenceId = 0;
-function getPresenceId() {
-    var id = presenceId;
-    presenceId++;
-    return id;
-}
 var PresenceChild = function (_a) {
     var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
     var presenceChildren = useConstant(newChildrenMap);
-    var id = useConstant(getPresenceId);
+    var id = useId();
     var context = useMemo(function () { return ({
         id: id,
         initial: initial,

package/dist/es/components/AnimatePresence/index.mjs

@@ -1,21 +1,21 @@
 import { __read, __spreadArray } from 'tslib';
 import * as React from 'react';
-import { useContext, useRef, useEffect, cloneElement, Children, isValidElement } from 'react';
+import { useContext, useRef, cloneElement, Children, isValidElement } from 'react';
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
+import { useIsMounted } from '../../utils/use-is-mounted.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
 
-function getChildKey(child) {
-    return child.key || "";
-}
+var getChildKey = function (child) { return child.key || ""; };
+var isDev = process.env.NODE_ENV !== "production";
 function updateChildLookup(children, allChildren) {
-    var seenChildren = process.env.NODE_ENV !== "production" ? new Set() : null;
+    var seenChildren = isDev ? new Set() : null;
     children.forEach(function (child) {
         var key = getChildKey(child);
-        if (process.env.NODE_ENV !== "production" && seenChildren) {
-            if (seenChildren.has(key)) {
-                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
-            }
+        if (isDev && seenChildren && seenChildren.has(key)) {
+            console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
             seenChildren.add(key);
         }
         allChildren.set(key, child);
@@ -71,29 +71,34 @@ var AnimatePresence = function (_a) {
     var forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
-    var isInitialRender = useRef(true);
-    var isMounted = useRef(true);
-    useEffect(function () { return function () {
-        isMounted.current = false;
-    }; }, []);
+    var isMounted = useIsMounted();
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     var filteredChildren = onlyElements(children);
+    var childrenToRender = filteredChildren;
+    var exiting = new Set();
     // Keep a living record of the children we're actually rendering so we
     // can diff to figure out which are entering and exiting
-    var presentChildren = useRef(filteredChildren);
+    var presentChildren = useRef(childrenToRender);
     // A lookup table to quickly reference components by key
     var allChildren = useRef(new Map()).current;
-    // A living record of all currently exiting components.
-    var exiting = useRef(new Set()).current;
-    updateChildLookup(filteredChildren, allChildren);
     // If this is the initial component render, just deal with logic surrounding whether
     // we play onMount animations or not.
-    if (isInitialRender.current) {
+    var isInitialRender = useRef(true);
+    useIsomorphicLayoutEffect(function () {
         isInitialRender.current = false;
-        return (React.createElement(React.Fragment, null, filteredChildren.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
+        updateChildLookup(filteredChildren, allChildren);
+        presentChildren.current = childrenToRender;
+    });
+    useUnmountEffect(function () {
+        isInitialRender.current = true;
+        allChildren.clear();
+        exiting.clear();
+    });
+    if (isInitialRender.current) {
+        return (React.createElement(React.Fragment, null, childrenToRender.map(function (child) { return (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
-    var childrenToRender = __spreadArray([], __read(filteredChildren), false);
+    childrenToRender = __spreadArray([], __read(childrenToRender), false);
     // Diff the keys of the currently-present and target children to update our
     // exiting list.
     var presentKeys = presentChildren.current.map(getChildKey);
@@ -105,10 +110,6 @@ var AnimatePresence = function (_a) {
         if (targetKeys.indexOf(key) === -1) {
             exiting.add(key);
         }
-        else {
-            // In case this key has re-entered, remove from the exiting list
-            exiting.delete(key);
-        }
     }
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
@@ -134,9 +135,8 @@ var AnimatePresence = function (_a) {
             // Defer re-rendering until all exiting children have indeed left
             if (!exiting.size) {
                 presentChildren.current = filteredChildren;
-                if (isMounted.current === false) {
+                if (isMounted.current === false)
                     return;
-                }
                 forceRender();
                 onExitComplete && onExitComplete();
             }
@@ -149,7 +149,6 @@ var AnimatePresence = function (_a) {
         var key = child.key;
         return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child));
     });
-    presentChildren.current = childrenToRender;
     if (process.env.NODE_ENV !== "production" &&
         exitBeforeEnter &&
         childrenToRender.length > 1) {

package/dist/es/components/AnimatePresence/use-presence.mjs

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { useConstant } from '../../utils/use-constant.mjs';
+import { useId } from '../../utils/use-id.mjs';
 
 /**
  * When a component is the child of `AnimatePresence`, it can use `usePresence`
@@ -32,8 +32,8 @@ function usePresence() {
     var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register;
     // It's safe to call the following hooks conditionally (after an early return) because the context will always
     // either be null or non-null for the lifespan of the component.
-    // Replace with useOpaqueId when released in React
-    var id = useUniqueId();
+    // Replace with useId when released in React
+    var id = useId();
     useEffect(function () { return register(id); }, []);
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -64,8 +64,5 @@ function useIsPresent() {
 function isPresent(context) {
     return context === null ? true : context.isPresent;
 }
-var counter = 0;
-var incrementId = function () { return counter++; };
-var useUniqueId = function () { return useConstant(incrementId); };
 
 export { isPresent, useIsPresent, usePresence };

package/dist/es/index.mjs

@@ -18,7 +18,7 @@ export { useVelocity } from './value/use-velocity.mjs';
 export { useElementScroll } from './value/scroll/use-element-scroll.mjs';
 export { useViewportScroll } from './value/scroll/use-viewport-scroll.mjs';
 export { useTime } from './value/use-time.mjs';
-export { useReducedMotion } from './utils/use-reduced-motion.mjs';
+export { useReducedMotion, useReducedMotionConfig } from './utils/use-reduced-motion.mjs';
 export { animationControls } from './animation/animation-controls.mjs';
 export { useAnimation } from './animation/use-animation.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';

package/dist/es/projection/node/create-projection-node.mjs

@@ -125,9 +125,6 @@ function createProjectionNode(_a) {
             };
             this.hasProjected = false;
             this.isVisible = true;
-            /**
-             * Animation
-             */
             this.animationProgress = 0;
             /**
              * Shared layout
@@ -252,6 +249,15 @@ function createProjectionNode(_a) {
                         _this.startAnimation(animationOptions);
                     }
                     else {
+                        /**
+                         * If the layout hasn't changed and we have an animation that hasn't started yet,
+                         * finish it immediately. Otherwise it will be animating from a location
+                         * that was probably never commited to screen and look like a jumpy box.
+                         */
+                        if (!hasLayoutChanged &&
+                            _this.animationProgress === 0) {
+                            _this.finishAnimation();
+                        }
                         _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e));
                     }
                     _this.targetLayout = newLayout;
@@ -741,6 +747,7 @@ function createProjectionNode(_a) {
                 !isOnlyMember &&
                 this.options.crossfade === true &&
                 !this.path.some(hasOpacityCrossfade));
+            this.animationProgress = 0;
             this.mixTargetDelta = function (latest) {
                 var _a;
                 var progress = latest / 1000;
@@ -760,6 +767,7 @@ function createProjectionNode(_a) {
                 }
                 _this.root.scheduleUpdateProjection();
                 _this.scheduleRender();
+                _this.animationProgress = progress;
             };
             this.mixTargetDelta(0);
         };
@@ -1125,6 +1133,10 @@ function clearMeasurements(node) {
     node.clearMeasurements();
 }
 function resetTransformStyle(node) {
+    var visualElement = node.options.visualElement;
+    if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) {
+        visualElement.notifyBeforeLayoutMeasure();
+    }
     node.resetTransform();
 }
 function finishAnimation(node) {

package/dist/es/render/index.mjs

@@ -161,6 +161,7 @@ var visualElement = function (_a) {
                 if (isVariantNode && parent && !isControllingVariants) {
                     removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                 }
+                values.forEach(function (value, key) { return bindToMotionValue(key, value); });
                 parent === null || parent === void 0 ? void 0 : parent.children.add(element);
                 element.setProps(props);
             }, 

package/dist/es/render/utils/lifecycles.mjs

@@ -40,7 +40,7 @@ function createLifecycles() {
             for (var _i = 0; _i < arguments.length; _i++) {
                 args[_i] = arguments[_i];
             }
-            manager.notify.apply(manager, __spreadArray([], __read(args), false));
+            return manager.notify.apply(manager, __spreadArray([], __read(args), false));
         };
     });
     return lifecycles;

package/dist/es/utils/use-force-update.mjs

@@ -1,14 +1,13 @@
 import { __read } from 'tslib';
 import sync from 'framesync';
-import { useRef, useState, useCallback } from 'react';
-import { useUnmountEffect } from './use-unmount-effect.mjs';
+import { useState, useCallback } from 'react';
+import { useIsMounted } from './use-is-mounted.mjs';
 
 function useForceUpdate() {
-    var isUnmountingRef = useRef(false);
+    var isMounted = useIsMounted();
     var _a = __read(useState(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1];
-    useUnmountEffect(function () { return (isUnmountingRef.current = true); });
     var forceRender = useCallback(function () {
-        !isUnmountingRef.current && setForcedRenderCount(forcedRenderCount + 1);
+        isMounted.current && setForcedRenderCount(forcedRenderCount + 1);
     }, [forcedRenderCount]);
     /**
      * Defer this to the end of the next animation frame in case there are multiple

package/dist/es/utils/use-id.mjs

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { useConstant } from './use-constant.mjs';
+
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useId = React.useId
+    ? React.useId
+    : function () { return useConstant(incrementId); };
+
+export { useId };

package/dist/es/utils/use-is-mounted.mjs

@@ -0,0 +1,14 @@
+import { useRef, useLayoutEffect } from 'react';
+
+function useIsMounted() {
+    var isMounted = useRef(false);
+    useLayoutEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
+export { useIsMounted };

package/dist/es/utils/use-reduced-motion.mjs

@@ -4,7 +4,9 @@ import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
 
 // Does this device prefer reduced motion? Returns `null` server-side.
 var prefersReducedMotion = { current: null };
+var hasDetected = false;
 function initPrefersReducedMotion() {
+    hasDetected = true;
     if (typeof window === "undefined")
         return;
     if (window.matchMedia) {
@@ -49,7 +51,7 @@ function useReducedMotion() {
     /**
      * Lazy initialisation of prefersReducedMotion
      */
-    !prefersReducedMotion && initPrefersReducedMotion();
+    !hasDetected && initPrefersReducedMotion();
     var _a = __read(useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
     /**
      * TODO See if people miss automatically updating shouldReduceMotion setting