framer-motion 7.1.2 → 7.2.0

package/dist/cjs/index.js

@@ -2376,7 +2376,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 = "7.1.2";
+        this.version = "7.2.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4282,7 +4282,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.2 may not work as expected.`);
+                warnOnce(nextValue.version === "7.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6968,7 +6968,73 @@ function useForceUpdate() {
     return [deferredForceRender, forcedRenderCount];
 }
 
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, }) => {
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React__namespace.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent }) {
+    const id = React.useId();
+    const ref = React.useRef(null);
+    const size = React.useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    React.useInsertionEffect(() => {
+        var _a;
+        const { width, height, top, left } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        document.head.appendChild(style);
+        (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (React__namespace.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React__namespace.cloneElement(children, { ref })));
+}
+
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id = React.useId();
     const context = React.useMemo(() => ({
@@ -7005,6 +7071,9 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
     React__namespace.useEffect(() => {
         !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
     }, [isPresent]);
+    if (mode === "popLayout") {
+        children = React__namespace.createElement(PopChild, { isPresent: isPresent }, children);
+    }
     return (React__namespace.createElement(PresenceContext.Provider, { value: context }, children));
 };
 function newChildrenMap() {
@@ -7060,7 +7129,12 @@ function onlyElements(children) {
  *
  * @public
  */
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, }) => {
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
+    // Support deprecated exitBeforeEnter prop
+    if (exitBeforeEnter) {
+        mode = "wait";
+        warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+    }
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
     let [forceRender] = useForceUpdate();
@@ -7091,7 +7165,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         exiting.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 }, child)))));
+        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)))));
     }
     // If this is a subsequent render, deal with entering and exiting children
     childrenToRender = [...childrenToRender];
@@ -7109,7 +7183,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     }
     // 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 (exitBeforeEnter && exiting.size) {
+    if (mode === "wait" && exiting.size) {
         childrenToRender = [];
     }
     // Loop through all currently exiting components and clone them to overwrite `animate`
@@ -7137,18 +7211,18 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
                 onExitComplete && onExitComplete();
             }
         };
-        childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout }, child));
+        childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
     // 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 }, child));
+        return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
     if (env !== "production" &&
-        exitBeforeEnter &&
+        mode === "wait" &&
         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.`);
+        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
         ? childrenToRender

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { useId, useRef, useInsertionEffect } from 'react';
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+class PopChildMeasure extends React.Component {
+    getSnapshotBeforeUpdate(prevProps) {
+        const element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            const size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = element.offsetTop;
+            size.left = element.offsetLeft;
+        }
+        return null;
+    }
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    componentDidUpdate() { }
+    render() {
+        return this.props.children;
+    }
+}
+function PopChild({ children, isPresent }) {
+    const id = useId();
+    const ref = useRef(null);
+    const size = useRef({
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+    });
+    /**
+     * We create and inject a style block so we can apply this explicit
+     * sizing in a non-destructive manner by just deleting the style block.
+     *
+     * We can't apply size via render as the measurement happens
+     * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+     * styles directly on the DOM node, we might be overwriting
+     * styles set via the style prop.
+     */
+    useInsertionEffect(() => {
+        var _a;
+        const { width, height, top, left } = size.current;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        const style = document.createElement("style");
+        document.head.appendChild(style);
+        (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+        return () => {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (React.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React.cloneElement(children, { ref })));
+}
+
+export { PopChild };

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

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { useId, useMemo } from 'react';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { PopChild } from './PopChild.mjs';
 
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, }) => {
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
     const presenceChildren = useConstant(newChildrenMap);
     const id = useId();
     const context = useMemo(() => ({
@@ -40,6 +41,9 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
     React.useEffect(() => {
         !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
     }, [isPresent]);
+    if (mode === "popLayout") {
+        children = React.createElement(PopChild, { isPresent: isPresent }, children);
+    }
     return (React.createElement(PresenceContext.Provider, { value: context }, children));
 };
 function newChildrenMap() {

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

@@ -7,6 +7,7 @@ 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';
+import { warnOnce } from '../../utils/warn-once.mjs';
 
 const getChildKey = (child) => child.key || "";
 function updateChildLookup(children, allChildren) {
@@ -57,7 +58,12 @@ function onlyElements(children) {
  *
  * @public
  */
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, }) => {
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
+    // Support deprecated exitBeforeEnter prop
+    if (exitBeforeEnter) {
+        mode = "wait";
+        warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+    }
     // We want to force a re-render once all exiting animations have finished. We
     // either use a local forceRender function, or one from a parent context if it exists.
     let [forceRender] = useForceUpdate();
@@ -88,7 +94,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
         exiting.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 }, child)))));
+        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)))));
     }
     // If this is a subsequent render, deal with entering and exiting children
     childrenToRender = [...childrenToRender];
@@ -106,7 +112,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     }
     // 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 (exitBeforeEnter && exiting.size) {
+    if (mode === "wait" && exiting.size) {
         childrenToRender = [];
     }
     // Loop through all currently exiting components and clone them to overwrite `animate`
@@ -134,18 +140,18 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
                 onExitComplete && onExitComplete();
             }
         };
-        childrenToRender.splice(insertionIndex, 0, React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout }, child));
+        childrenToRender.splice(insertionIndex, 0, React.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
     // 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 }, child));
+        return exiting.has(key) ? (child) : (React.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
     });
     if (env !== "production" &&
-        exitBeforeEnter &&
+        mode === "wait" &&
         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.`);
+        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
         ? childrenToRender

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

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

package/dist/es/value/index.mjs

@@ -24,7 +24,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 = "7.1.2";
+        this.version = "7.2.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3543,7 +3543,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 = "7.1.2";
+            this.version = "7.2.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5449,7 +5449,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.1.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.1.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8135,7 +8135,73 @@
         return [deferredForceRender, forcedRenderCount];
     }
 
-    const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, }) => {
+    /**
+     * Measurement functionality has to be within a separate component
+     * to leverage snapshot lifecycle.
+     */
+    class PopChildMeasure extends React__namespace.Component {
+        getSnapshotBeforeUpdate(prevProps) {
+            const element = this.props.childRef.current;
+            if (element && prevProps.isPresent && !this.props.isPresent) {
+                const size = this.props.sizeRef.current;
+                size.height = element.offsetHeight || 0;
+                size.width = element.offsetWidth || 0;
+                size.top = element.offsetTop;
+                size.left = element.offsetLeft;
+            }
+            return null;
+        }
+        /**
+         * Required with getSnapshotBeforeUpdate to stop React complaining.
+         */
+        componentDidUpdate() { }
+        render() {
+            return this.props.children;
+        }
+    }
+    function PopChild({ children, isPresent }) {
+        const id = React.useId();
+        const ref = React.useRef(null);
+        const size = React.useRef({
+            width: 0,
+            height: 0,
+            top: 0,
+            left: 0,
+        });
+        /**
+         * We create and inject a style block so we can apply this explicit
+         * sizing in a non-destructive manner by just deleting the style block.
+         *
+         * We can't apply size via render as the measurement happens
+         * in getSnapshotBeforeUpdate (post-render), likewise if we apply the
+         * styles directly on the DOM node, we might be overwriting
+         * styles set via the style prop.
+         */
+        React.useInsertionEffect(() => {
+            var _a;
+            const { width, height, top, left } = size.current;
+            if (isPresent || !ref.current || !width || !height)
+                return;
+            ref.current.dataset.motionPopId = id;
+            const style = document.createElement("style");
+            document.head.appendChild(style);
+            (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(`
+          [data-motion-pop-id="${id}"] {
+            position: absolute !important;
+            width: ${width}px !important;
+            height: ${height}px !important;
+            top: ${top}px !important;
+            left: ${left}px !important;
+          }
+        `);
+            return () => {
+                document.head.removeChild(style);
+            };
+        }, [isPresent]);
+        return (React__namespace.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React__namespace.cloneElement(children, { ref })));
+    }
+
+    const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => {
         const presenceChildren = useConstant(newChildrenMap);
         const id = React.useId();
         const context = React.useMemo(() => ({
@@ -8172,6 +8238,9 @@
         React__namespace.useEffect(() => {
             !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
         }, [isPresent]);
+        if (mode === "popLayout") {
+            children = React__namespace.createElement(PopChild, { isPresent: isPresent }, children);
+        }
         return (React__namespace.createElement(PresenceContext.Provider, { value: context }, children));
     };
     function newChildrenMap() {
@@ -8227,7 +8296,12 @@
      *
      * @public
      */
-    const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, }) => {
+    const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => {
+        // Support deprecated exitBeforeEnter prop
+        if (exitBeforeEnter) {
+            mode = "wait";
+            warnOnce(false, "Replace exitBeforeEnter with mode='wait'");
+        }
         // We want to force a re-render once all exiting animations have finished. We
         // either use a local forceRender function, or one from a parent context if it exists.
         let [forceRender] = useForceUpdate();
@@ -8258,7 +8332,7 @@
             exiting.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 }, child)))));
+            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)))));
         }
         // If this is a subsequent render, deal with entering and exiting children
         childrenToRender = [...childrenToRender];
@@ -8276,7 +8350,7 @@
         }
         // 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 (exitBeforeEnter && exiting.size) {
+        if (mode === "wait" && exiting.size) {
             childrenToRender = [];
         }
         // Loop through all currently exiting components and clone them to overwrite `animate`
@@ -8304,18 +8378,18 @@
                     onExitComplete && onExitComplete();
                 }
             };
-            childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout }, child));
+            childrenToRender.splice(insertionIndex, 0, React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
         });
         // 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 }, child));
+            return exiting.has(key) ? (child) : (React__namespace.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child));
         });
         if (env !== "production" &&
-            exitBeforeEnter &&
+            mode === "wait" &&
             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.`);
+            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
             ? childrenToRender