framer-motion 10.12.9 → 10.12.10

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var indexLegacy = require('./index-legacy-560e8537.js');
+var indexLegacy = require('./index-legacy-a8ebc221.js');
 
 
 

package/dist/cjs/{index-legacy-560e8537.js → index-legacy-a8ebc221.js}

@@ -2645,7 +2645,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.12.9";
+        this.version = "10.12.10";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3817,7 +3817,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.9 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var indexLegacy = require('./index-legacy-560e8537.js');
+var indexLegacy = require('./index-legacy-a8ebc221.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4742,7 +4742,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     const filteredChildren = onlyElements(children);
     let childrenToRender = filteredChildren;
-    const exiting = new Set();
+    const exitingChildren = React.useRef(new Map()).current;
     // Keep a living record of the children we're actually rendering so we
     // can diff to figure out which are entering and exiting
     const presentChildren = React.useRef(childrenToRender);
@@ -4759,7 +4759,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     useUnmountEffect(() => {
         isInitialRender.current = true;
         allChildren.clear();
-        exiting.clear();
+        exitingChildren.clear();
     });
     if (isInitialRender.current) {
         return (React__namespace.createElement(React__namespace.Fragment, null, childrenToRender.map((child) => (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)))));
@@ -4774,18 +4774,18 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     const numPresent = presentKeys.length;
     for (let i = 0; i < numPresent; i++) {
         const key = presentKeys[i];
-        if (targetKeys.indexOf(key) === -1) {
-            exiting.add(key);
+        if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
+            exitingChildren.set(key, undefined);
         }
     }
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
-    if (mode === "wait" && exiting.size) {
+    if (mode === "wait" && exitingChildren.size) {
         childrenToRender = [];
     }
     // Loop through all currently exiting components and clone them to overwrite `animate`
     // with any `exit` prop they might have defined.
-    exiting.forEach((key) => {
+    exitingChildren.forEach((component, key) => {
         // If this component is actually entering again, early return
         if (targetKeys.indexOf(key) !== -1)
             return;
@@ -4793,35 +4793,40 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         if (!child)
             return;
         const insertionIndex = presentKeys.indexOf(key);
-        const onExit = () => {
-            allChildren.delete(key);
-            exiting.delete(key);
-            // Remove this child from the present children
-            const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
-            presentChildren.current.splice(removeIndex, 1);
-            // Defer re-rendering until all exiting children have indeed left
-            if (!exiting.size) {
-                presentChildren.current = filteredChildren;
-                if (isMounted.current === false)
-                    return;
-                forceRender();
-                onExitComplete && onExitComplete();
-            }
-        };
-        childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+        let exitingComponent = component;
+        if (!exitingComponent) {
+            const onExit = () => {
+                allChildren.delete(key);
+                exitingChildren.delete(key);
+                // Remove this child from the present children
+                const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
+                presentChildren.current.splice(removeIndex, 1);
+                // Defer re-rendering until all exiting children have indeed left
+                if (!exitingChildren.size) {
+                    presentChildren.current = filteredChildren;
+                    if (isMounted.current === false)
+                        return;
+                    forceRender();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            exitingComponent = (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+            exitingChildren.set(key, exitingComponent);
+        }
+        childrenToRender.splice(insertionIndex, 0, exitingComponent);
     });
     // Add `MotionContext` even to children that don't need it to ensure we're rendering
     // the same tree between renders
     childrenToRender = childrenToRender.map((child) => {
         const key = child.key;
-        return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+        return exitingChildren.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
     if (process.env.NODE_ENV !== "production" &&
         mode === "wait" &&
         childrenToRender.length > 1) {
         console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
     }
-    return (React__namespace.createElement(React__namespace.Fragment, null, exiting.size
+    return (React__namespace.createElement(React__namespace.Fragment, null, exitingChildren.size
         ? childrenToRender
         : childrenToRender.map((child) => React.cloneElement(child))));
 };

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

@@ -66,7 +66,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
     const filteredChildren = onlyElements(children);
     let childrenToRender = filteredChildren;
-    const exiting = new Set();
+    const exitingChildren = useRef(new Map()).current;
     // Keep a living record of the children we're actually rendering so we
     // can diff to figure out which are entering and exiting
     const presentChildren = useRef(childrenToRender);
@@ -83,7 +83,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     useUnmountEffect(() => {
         isInitialRender.current = true;
         allChildren.clear();
-        exiting.clear();
+        exitingChildren.clear();
     });
     if (isInitialRender.current) {
         return (React.createElement(React.Fragment, null, childrenToRender.map((child) => (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)))));
@@ -98,18 +98,18 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     const numPresent = presentKeys.length;
     for (let i = 0; i < numPresent; i++) {
         const key = presentKeys[i];
-        if (targetKeys.indexOf(key) === -1) {
-            exiting.add(key);
+        if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
+            exitingChildren.set(key, undefined);
         }
     }
     // If we currently have exiting children, and we're deferring rendering incoming children
     // until after all current children have exiting, empty the childrenToRender array
-    if (mode === "wait" && exiting.size) {
+    if (mode === "wait" && exitingChildren.size) {
         childrenToRender = [];
     }
     // Loop through all currently exiting components and clone them to overwrite `animate`
     // with any `exit` prop they might have defined.
-    exiting.forEach((key) => {
+    exitingChildren.forEach((component, key) => {
         // If this component is actually entering again, early return
         if (targetKeys.indexOf(key) !== -1)
             return;
@@ -117,35 +117,40 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         if (!child)
             return;
         const insertionIndex = presentKeys.indexOf(key);
-        const onExit = () => {
-            allChildren.delete(key);
-            exiting.delete(key);
-            // Remove this child from the present children
-            const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
-            presentChildren.current.splice(removeIndex, 1);
-            // Defer re-rendering until all exiting children have indeed left
-            if (!exiting.size) {
-                presentChildren.current = filteredChildren;
-                if (isMounted.current === false)
-                    return;
-                forceRender();
-                onExitComplete && onExitComplete();
-            }
-        };
-        childrenToRender.splice(insertionIndex, 0, React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+        let exitingComponent = component;
+        if (!exitingComponent) {
+            const onExit = () => {
+                allChildren.delete(key);
+                exitingChildren.delete(key);
+                // Remove this child from the present children
+                const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
+                presentChildren.current.splice(removeIndex, 1);
+                // Defer re-rendering until all exiting children have indeed left
+                if (!exitingChildren.size) {
+                    presentChildren.current = filteredChildren;
+                    if (isMounted.current === false)
+                        return;
+                    forceRender();
+                    onExitComplete && onExitComplete();
+                }
+            };
+            exitingComponent = (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+            exitingChildren.set(key, exitingComponent);
+        }
+        childrenToRender.splice(insertionIndex, 0, exitingComponent);
     });
     // Add `MotionContext` even to children that don't need it to ensure we're rendering
     // the same tree between renders
     childrenToRender = childrenToRender.map((child) => {
         const key = child.key;
-        return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+        return exitingChildren.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
     if (process.env.NODE_ENV !== "production" &&
         mode === "wait" &&
         childrenToRender.length > 1) {
         console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
     }
-    return (React.createElement(React.Fragment, null, exiting.size
+    return (React.createElement(React.Fragment, null, exitingChildren.size
         ? childrenToRender
         : childrenToRender.map((child) => cloneElement(child))));
 };

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "10.12.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.9 may not work as expected.`);
+                warnOnce(nextValue.version === "10.12.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.10 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -26,7 +26,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "10.12.9";
+        this.version = "10.12.10";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3774,7 +3774,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "10.12.9";
+            this.version = "10.12.10";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -6569,7 +6569,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.12.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.9 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.12.10", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.10 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10121,7 +10121,7 @@
         // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key
         const filteredChildren = onlyElements(children);
         let childrenToRender = filteredChildren;
-        const exiting = new Set();
+        const exitingChildren = React.useRef(new Map()).current;
         // Keep a living record of the children we're actually rendering so we
         // can diff to figure out which are entering and exiting
         const presentChildren = React.useRef(childrenToRender);
@@ -10138,7 +10138,7 @@
         useUnmountEffect(() => {
             isInitialRender.current = true;
             allChildren.clear();
-            exiting.clear();
+            exitingChildren.clear();
         });
         if (isInitialRender.current) {
             return (React__namespace.createElement(React__namespace.Fragment, null, childrenToRender.map((child) => (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)))));
@@ -10153,18 +10153,18 @@
         const numPresent = presentKeys.length;
         for (let i = 0; i < numPresent; i++) {
             const key = presentKeys[i];
-            if (targetKeys.indexOf(key) === -1) {
-                exiting.add(key);
+            if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) {
+                exitingChildren.set(key, undefined);
             }
         }
         // If we currently have exiting children, and we're deferring rendering incoming children
         // until after all current children have exiting, empty the childrenToRender array
-        if (mode === "wait" && exiting.size) {
+        if (mode === "wait" && exitingChildren.size) {
             childrenToRender = [];
         }
         // Loop through all currently exiting components and clone them to overwrite `animate`
         // with any `exit` prop they might have defined.
-        exiting.forEach((key) => {
+        exitingChildren.forEach((component, key) => {
             // If this component is actually entering again, early return
             if (targetKeys.indexOf(key) !== -1)
                 return;
@@ -10172,34 +10172,39 @@
             if (!child)
                 return;
             const insertionIndex = presentKeys.indexOf(key);
-            const onExit = () => {
-                allChildren.delete(key);
-                exiting.delete(key);
-                // Remove this child from the present children
-                const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
-                presentChildren.current.splice(removeIndex, 1);
-                // Defer re-rendering until all exiting children have indeed left
-                if (!exiting.size) {
-                    presentChildren.current = filteredChildren;
-                    if (isMounted.current === false)
-                        return;
-                    forceRender();
-                    onExitComplete && onExitComplete();
-                }
-            };
-            childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+            let exitingComponent = component;
+            if (!exitingComponent) {
+                const onExit = () => {
+                    allChildren.delete(key);
+                    exitingChildren.delete(key);
+                    // Remove this child from the present children
+                    const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key);
+                    presentChildren.current.splice(removeIndex, 1);
+                    // Defer re-rendering until all exiting children have indeed left
+                    if (!exitingChildren.size) {
+                        presentChildren.current = filteredChildren;
+                        if (isMounted.current === false)
+                            return;
+                        forceRender();
+                        onExitComplete && onExitComplete();
+                    }
+                };
+                exitingComponent = (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+                exitingChildren.set(key, exitingComponent);
+            }
+            childrenToRender.splice(insertionIndex, 0, exitingComponent);
         });
         // Add `MotionContext` even to children that don't need it to ensure we're rendering
         // the same tree between renders
         childrenToRender = childrenToRender.map((child) => {
             const key = child.key;
-            return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
+            return exitingChildren.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
         });
         if (mode === "wait" &&
             childrenToRender.length > 1) {
             console.warn(`You're attempting to animate multiple children within AnimatePresence, but its mode is set to "wait". This will lead to odd visual behaviour.`);
         }
-        return (React__namespace.createElement(React__namespace.Fragment, null, exiting.size
+        return (React__namespace.createElement(React__namespace.Fragment, null, exitingChildren.size
             ? childrenToRender
             : childrenToRender.map((child) => React.cloneElement(child))));
     };