framer-motion 6.2.3 → 6.2.7

package/dist/cjs/index.js

@@ -1897,9 +1897,6 @@ function createProjectionNode(_a) {
             };
             this.hasProjected = false;
             this.isVisible = true;
-            /**
-             * Animation
-             */
             this.animationProgress = 0;
             /**
              * Shared layout
@@ -2024,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;
@@ -2513,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;
@@ -2532,6 +2539,7 @@ function createProjectionNode(_a) {
                 }
                 _this.root.scheduleUpdateProjection();
                 _this.scheduleRender();
+                _this.animationProgress = progress;
             };
             this.mixTargetDelta(0);
         };
@@ -4341,6 +4349,18 @@ var gestureAnimations = {
     hover: makeRenderlessComponent(useHoverGesture),
 };
 
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useId = function () { return useConstant(incrementId); };
+/**
+ * Ideally we'd use the following code to support React 18 optionally.
+ * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).
+ * Need to come up with a different way of figuring this out.
+ */
+// export const useId = (React as any).useId
+//     ? (React as any).useId
+//     : () => 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.
@@ -4371,8 +4391,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];
@@ -4403,9 +4423,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))
@@ -6110,6 +6127,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);
             }, 
@@ -7090,12 +7108,22 @@ function createDomMotionComponent(key) {
  */
 var m = createMotionProxy(createDomMotionConfig);
 
+function useIsMounted() {
+    var isMounted = React.useRef(false);
+    useIsomorphicLayoutEffect(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
@@ -7105,16 +7133,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,
@@ -7166,17 +7188,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);
@@ -7232,29 +7251,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);
@@ -7266,10 +7290,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
@@ -7295,9 +7315,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();
             }
@@ -7310,7 +7329,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) {
@@ -7350,21 +7368,28 @@ function nodeGroup() {
     };
 }
 
+var shouldInheritGroup = function (inherit) { return inherit === true; };
+var shouldInheritId = function (inherit) {
+    return shouldInheritGroup(inherit === true) || inherit === "id";
+};
 var LayoutGroup = function (_a) {
     var _b, _c;
-    var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+    var children = _a.children, id = _a.id, inheritId = _a.inheritId, _d = _a.inherit, inherit = _d === void 0 ? true : _d;
+    // Maintain backwards-compatibility with inheritId until 7.0
+    if (inheritId !== undefined)
+        inherit = inheritId;
     var layoutGroupContext = React.useContext(LayoutGroupContext);
     var deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
     var _e = tslib.__read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
     var context = React.useRef(null);
     var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
     if (context.current === null) {
-        if (inheritId && upstreamId) {
+        if (shouldInheritId(inherit) && upstreamId) {
             id = id ? upstreamId + "-" + id : upstreamId;
         }
         context.current = {
             id: id,
-            group: inheritId
+            group: shouldInheritGroup(inherit)
                 ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
                 : nodeGroup(),
         };
@@ -8281,13 +8306,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);
     }; });

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/components/LayoutGroup/index.mjs

@@ -6,21 +6,28 @@ import { DeprecatedLayoutGroupContext } from '../../context/DeprecatedLayoutGrou
 import { useForceUpdate } from '../../utils/use-force-update.mjs';
 import { nodeGroup } from '../../projection/node/group.mjs';
 
+var shouldInheritGroup = function (inherit) { return inherit === true; };
+var shouldInheritId = function (inherit) {
+    return shouldInheritGroup(inherit === true) || inherit === "id";
+};
 var LayoutGroup = function (_a) {
     var _b, _c;
-    var children = _a.children, id = _a.id, _d = _a.inheritId, inheritId = _d === void 0 ? true : _d;
+    var children = _a.children, id = _a.id, inheritId = _a.inheritId, _d = _a.inherit, inherit = _d === void 0 ? true : _d;
+    // Maintain backwards-compatibility with inheritId until 7.0
+    if (inheritId !== undefined)
+        inherit = inheritId;
     var layoutGroupContext = useContext(LayoutGroupContext);
     var deprecatedLayoutGroupContext = useContext(DeprecatedLayoutGroupContext);
     var _e = __read(useForceUpdate(), 2), forceRender = _e[0], key = _e[1];
     var context = useRef(null);
     var upstreamId = (_b = layoutGroupContext.id) !== null && _b !== void 0 ? _b : deprecatedLayoutGroupContext;
     if (context.current === null) {
-        if (inheritId && upstreamId) {
+        if (shouldInheritId(inherit) && upstreamId) {
             id = id ? upstreamId + "-" + id : upstreamId;
         }
         context.current = {
             id: id,
-            group: inheritId
+            group: shouldInheritGroup(inherit)
                 ? (_c = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _c !== void 0 ? _c : nodeGroup()
                 : nodeGroup(),
         };

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);
         };

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/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,15 @@
+import { useConstant } from './use-constant.mjs';
+
+var counter = 0;
+var incrementId = function () { return counter++; };
+var useId = function () { return useConstant(incrementId); };
+/**
+ * Ideally we'd use the following code to support React 18 optionally.
+ * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all).
+ * Need to come up with a different way of figuring this out.
+ */
+// export const useId = (React as any).useId
+//     ? (React as any).useId
+//     : () => useConstant(incrementId)
+
+export { useId };

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

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-effect.mjs';
+
+function useIsMounted() {
+    var isMounted = useRef(false);
+    useIsomorphicLayoutEffect(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return isMounted;
+}
+
+export { useIsMounted };