framer-motion 6.2.0 → 6.2.5

package/dist/framer-motion.dev.js

@@ -240,7 +240,9 @@
 
     // 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) {
@@ -285,7 +287,7 @@
         /**
          * Lazy initialisation of prefersReducedMotion
          */
-        !prefersReducedMotion && initPrefersReducedMotion();
+        !hasDetected && initPrefersReducedMotion();
         var _a = __read(React.useState(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0];
         /**
          * TODO See if people miss automatically updating shouldReduceMotion setting
@@ -3128,9 +3130,6 @@
                 };
                 this.hasProjected = false;
                 this.isVisible = true;
-                /**
-                 * Animation
-                 */
                 this.animationProgress = 0;
                 /**
                  * Shared layout
@@ -3255,6 +3254,15 @@
                             _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;
@@ -3744,6 +3752,7 @@
                     !isOnlyMember &&
                     this.options.crossfade === true &&
                     !this.path.some(hasOpacityCrossfade));
+                this.animationProgress = 0;
                 this.mixTargetDelta = function (latest) {
                     var _a;
                     var progress = latest / 1000;
@@ -3763,6 +3772,7 @@
                     }
                     _this.root.scheduleUpdateProjection();
                     _this.scheduleRender();
+                    _this.animationProgress = progress;
                 };
                 this.mixTargetDelta(0);
             };
@@ -4128,6 +4138,10 @@
         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) {
@@ -5568,6 +5582,12 @@
         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.
@@ -5598,8 +5618,8 @@
         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];
@@ -5630,9 +5650,6 @@
     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))
@@ -7134,7 +7151,7 @@
                 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;
@@ -7337,6 +7354,7 @@
                     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);
                 }, 
@@ -8317,12 +8335,22 @@
      */
     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 = __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
@@ -8332,16 +8360,10 @@
         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,
@@ -8393,17 +8415,13 @@
         return new Map();
     }
 
-    function getChildKey(child) {
-        return child.key || "";
-    }
+    var getChildKey = function (child) { return child.key || ""; };
     function updateChildLookup(children, allChildren) {
         var seenChildren = new Set() ;
         children.forEach(function (child) {
             var key = getChildKey(child);
-            if (seenChildren) {
-                if (seenChildren.has(key)) {
-                    console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
-                }
+            if (seenChildren && seenChildren.has(key)) {
+                console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate."));
                 seenChildren.add(key);
             }
             allChildren.set(key, child);
@@ -8459,29 +8477,34 @@
         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 = __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);
@@ -8493,10 +8516,6 @@
             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
@@ -8522,9 +8541,8 @@
                 // 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();
                 }
@@ -8537,7 +8555,6 @@
             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 (exitBeforeEnter &&
             childrenToRender.length > 1) {
             console.warn("You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.");
@@ -9507,13 +9524,15 @@
         });
         React.useEffect(function () {
             element.mount({});
-            return element.unmount();
-        }, []);
+            return element.unmount;
+        }, [element]);
         React.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);
         }; });
@@ -9624,6 +9643,7 @@
     exports.useMotionValue = useMotionValue;
     exports.usePresence = usePresence;
     exports.useReducedMotion = useReducedMotion;
+    exports.useReducedMotionConfig = useReducedMotionConfig;
     exports.useResetProjection = useResetProjection;
     exports.useSpring = useSpring;
     exports.useTime = useTime;