framer-motion 7.1.0 → 7.2.0-beta.0

package/dist/cjs/index.js

@@ -2437,7 +2437,7 @@ var MotionValue = /** @class */ (function () {
          * 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.0";
+        this.version = "7.2.0-beta.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -4417,7 +4417,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.1.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.1.0 may not work as expected."));
+                warnOnce(nextValue.version === "7.2.0-beta.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.2.0-beta.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -7192,8 +7192,85 @@ function useForceUpdate() {
     return [deferredForceRender, forcedRenderCount];
 }
 
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+var PopChildMeasure = /** @class */ (function (_super) {
+    tslib.__extends(PopChildMeasure, _super);
+    function PopChildMeasure() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PopChildMeasure.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+        var element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            var position = getComputedStyle(element).position;
+            var size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = size.left = "auto";
+            /**
+             * If this element is position: relative and the parent has
+             * padding, we need to explicitly set a top and/or left.
+             */
+            if (position === "relative" && element.offsetParent) {
+                var _a = getComputedStyle(element.offsetParent), paddingTop = _a.paddingTop, paddingLeft = _a.paddingLeft;
+                if (parseFloat(paddingTop)) {
+                    size.top = "".concat(element.offsetTop, "px");
+                }
+                if (parseFloat(paddingLeft)) {
+                    size.left = "".concat(element.offsetLeft, "px");
+                }
+            }
+        }
+        return null;
+    };
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    PopChildMeasure.prototype.componentDidUpdate = function () { };
+    PopChildMeasure.prototype.render = function () {
+        return this.props.children;
+    };
+    return PopChildMeasure;
+}(React__namespace.Component));
+function PopChild(_a) {
+    var children = _a.children, isPresent = _a.isPresent;
+    var id = React.useId();
+    var ref = React.useRef(null);
+    var size = React.useRef({
+        width: 0,
+        height: 0,
+        top: "auto",
+        left: "auto",
+    });
+    /**
+     * 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(function () {
+        var _a;
+        var _b = size.current, width = _b.width, height = _b.height, top = _b.top, left = _b.left;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        var style = document.createElement("style");
+        document.head.appendChild(style);
+        (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule("\n          [data-motion-pop-id=\"".concat(id, "\"] {\n            position: absolute !important;\n            width: ").concat(width, "px !important;\n            height: ").concat(height, "px !important;\n            top: ").concat(top, " !important;\n            left: ").concat(left, " !important;\n          }\n        "));
+        return function () {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (React__namespace.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React__namespace.cloneElement(children, { ref: ref })));
+}
+
 var PresenceChild = function (_a) {
-    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
+    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout, popLayout = _a.popLayout;
     var presenceChildren = useConstant(newChildrenMap);
     var id = React.useId();
     var context = React.useMemo(function () { return ({
@@ -7241,6 +7318,9 @@ var PresenceChild = function (_a) {
     React__namespace.useEffect(function () {
         !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
     }, [isPresent]);
+    if (popLayout) {
+        children = React__namespace.createElement(PopChild, { isPresent: isPresent }, children);
+    }
     return (React__namespace.createElement(PresenceContext.Provider, { value: context }, children));
 };
 function newChildrenMap() {
@@ -7297,10 +7377,10 @@ function onlyElements(children) {
  * @public
  */
 var AnimatePresence = function (_a) {
-    var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c;
+    var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c, _d = _a.popLayout, popLayout = _d === void 0 ? false : _d;
     // 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.
-    var _d = tslib.__read(useForceUpdate(), 1), forceRender = _d[0];
+    var _e = tslib.__read(useForceUpdate(), 1), forceRender = _e[0];
     var forceRenderLayoutGroup = React.useContext(LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
@@ -7328,7 +7408,7 @@ var AnimatePresence = function (_a) {
         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)); })));
+        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, popLayout: popLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
     childrenToRender = tslib.__spreadArray([], tslib.__read(childrenToRender), false);
@@ -7374,13 +7454,13 @@ var AnimatePresence = function (_a) {
                 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, popLayout: popLayout }, child));
     });
     // Add `MotionContext` even to children that don't need it to ensure we're rendering
     // the same tree between renders
     childrenToRender = childrenToRender.map(function (child) {
         var 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, popLayout: popLayout }, child));
     });
     if (env !== "production" &&
         exitBeforeEnter &&

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

@@ -0,0 +1,82 @@
+import { __extends } from 'tslib';
+import * as React from 'react';
+import { useId, useRef, useInsertionEffect } from 'react';
+
+/**
+ * Measurement functionality has to be within a separate component
+ * to leverage snapshot lifecycle.
+ */
+var PopChildMeasure = /** @class */ (function (_super) {
+    __extends(PopChildMeasure, _super);
+    function PopChildMeasure() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PopChildMeasure.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+        var element = this.props.childRef.current;
+        if (element && prevProps.isPresent && !this.props.isPresent) {
+            var position = getComputedStyle(element).position;
+            var size = this.props.sizeRef.current;
+            size.height = element.offsetHeight || 0;
+            size.width = element.offsetWidth || 0;
+            size.top = size.left = "auto";
+            /**
+             * If this element is position: relative and the parent has
+             * padding, we need to explicitly set a top and/or left.
+             */
+            if (position === "relative" && element.offsetParent) {
+                var _a = getComputedStyle(element.offsetParent), paddingTop = _a.paddingTop, paddingLeft = _a.paddingLeft;
+                if (parseFloat(paddingTop)) {
+                    size.top = "".concat(element.offsetTop, "px");
+                }
+                if (parseFloat(paddingLeft)) {
+                    size.left = "".concat(element.offsetLeft, "px");
+                }
+            }
+        }
+        return null;
+    };
+    /**
+     * Required with getSnapshotBeforeUpdate to stop React complaining.
+     */
+    PopChildMeasure.prototype.componentDidUpdate = function () { };
+    PopChildMeasure.prototype.render = function () {
+        return this.props.children;
+    };
+    return PopChildMeasure;
+}(React.Component));
+function PopChild(_a) {
+    var children = _a.children, isPresent = _a.isPresent;
+    var id = useId();
+    var ref = useRef(null);
+    var size = useRef({
+        width: 0,
+        height: 0,
+        top: "auto",
+        left: "auto",
+    });
+    /**
+     * 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(function () {
+        var _a;
+        var _b = size.current, width = _b.width, height = _b.height, top = _b.top, left = _b.left;
+        if (isPresent || !ref.current || !width || !height)
+            return;
+        ref.current.dataset.motionPopId = id;
+        var style = document.createElement("style");
+        document.head.appendChild(style);
+        (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule("\n          [data-motion-pop-id=\"".concat(id, "\"] {\n            position: absolute !important;\n            width: ").concat(width, "px !important;\n            height: ").concat(height, "px !important;\n            top: ").concat(top, " !important;\n            left: ").concat(left, " !important;\n          }\n        "));
+        return function () {
+            document.head.removeChild(style);
+        };
+    }, [isPresent]);
+    return (React.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React.cloneElement(children, { ref: ref })));
+}
+
+export { PopChild };

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

@@ -3,9 +3,10 @@ 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';
 
 var PresenceChild = function (_a) {
-    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
+    var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout, popLayout = _a.popLayout;
     var presenceChildren = useConstant(newChildrenMap);
     var id = useId();
     var context = useMemo(function () { return ({
@@ -53,6 +54,9 @@ var PresenceChild = function (_a) {
     React.useEffect(function () {
         !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
     }, [isPresent]);
+    if (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

@@ -59,10 +59,10 @@ function onlyElements(children) {
  * @public
  */
 var AnimatePresence = function (_a) {
-    var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c;
+    var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c, _d = _a.popLayout, popLayout = _d === void 0 ? false : _d;
     // 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.
-    var _d = __read(useForceUpdate(), 1), forceRender = _d[0];
+    var _e = __read(useForceUpdate(), 1), forceRender = _e[0];
     var forceRenderLayoutGroup = useContext(LayoutGroupContext).forceRender;
     if (forceRenderLayoutGroup)
         forceRender = forceRenderLayoutGroup;
@@ -90,7 +90,7 @@ var AnimatePresence = function (_a) {
         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)); })));
+        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, popLayout: popLayout }, child)); })));
     }
     // If this is a subsequent render, deal with entering and exiting children
     childrenToRender = __spreadArray([], __read(childrenToRender), false);
@@ -136,13 +136,13 @@ var AnimatePresence = function (_a) {
                 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, popLayout: popLayout }, child));
     });
     // Add `MotionContext` even to children that don't need it to ensure we're rendering
     // the same tree between renders
     childrenToRender = childrenToRender.map(function (child) {
         var 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, popLayout: popLayout }, child));
     });
     if (env !== "production" &&
         exitBeforeEnter &&

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.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.1.0 may not work as expected."));
+                warnOnce(nextValue.version === "7.2.0-beta.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.2.0-beta.0 may not work as expected."));
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -25,7 +25,7 @@ var MotionValue = /** @class */ (function () {
          * 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.0";
+        this.version = "7.2.0-beta.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3670,7 +3670,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.0";
+            this.version = "7.2.0-beta.0";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5650,7 +5650,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.1.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.1.0 may not work as expected."));
+                    warnOnce(nextValue.version === "7.2.0-beta.0", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 7.2.0-beta.0 may not work as expected."));
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8425,8 +8425,85 @@
         return [deferredForceRender, forcedRenderCount];
     }
 
+    /**
+     * Measurement functionality has to be within a separate component
+     * to leverage snapshot lifecycle.
+     */
+    var PopChildMeasure = /** @class */ (function (_super) {
+        __extends(PopChildMeasure, _super);
+        function PopChildMeasure() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        PopChildMeasure.prototype.getSnapshotBeforeUpdate = function (prevProps) {
+            var element = this.props.childRef.current;
+            if (element && prevProps.isPresent && !this.props.isPresent) {
+                var position = getComputedStyle(element).position;
+                var size = this.props.sizeRef.current;
+                size.height = element.offsetHeight || 0;
+                size.width = element.offsetWidth || 0;
+                size.top = size.left = "auto";
+                /**
+                 * If this element is position: relative and the parent has
+                 * padding, we need to explicitly set a top and/or left.
+                 */
+                if (position === "relative" && element.offsetParent) {
+                    var _a = getComputedStyle(element.offsetParent), paddingTop = _a.paddingTop, paddingLeft = _a.paddingLeft;
+                    if (parseFloat(paddingTop)) {
+                        size.top = "".concat(element.offsetTop, "px");
+                    }
+                    if (parseFloat(paddingLeft)) {
+                        size.left = "".concat(element.offsetLeft, "px");
+                    }
+                }
+            }
+            return null;
+        };
+        /**
+         * Required with getSnapshotBeforeUpdate to stop React complaining.
+         */
+        PopChildMeasure.prototype.componentDidUpdate = function () { };
+        PopChildMeasure.prototype.render = function () {
+            return this.props.children;
+        };
+        return PopChildMeasure;
+    }(React__namespace.Component));
+    function PopChild(_a) {
+        var children = _a.children, isPresent = _a.isPresent;
+        var id = React.useId();
+        var ref = React.useRef(null);
+        var size = React.useRef({
+            width: 0,
+            height: 0,
+            top: "auto",
+            left: "auto",
+        });
+        /**
+         * 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(function () {
+            var _a;
+            var _b = size.current, width = _b.width, height = _b.height, top = _b.top, left = _b.left;
+            if (isPresent || !ref.current || !width || !height)
+                return;
+            ref.current.dataset.motionPopId = id;
+            var style = document.createElement("style");
+            document.head.appendChild(style);
+            (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule("\n          [data-motion-pop-id=\"".concat(id, "\"] {\n            position: absolute !important;\n            width: ").concat(width, "px !important;\n            height: ").concat(height, "px !important;\n            top: ").concat(top, " !important;\n            left: ").concat(left, " !important;\n          }\n        "));
+            return function () {
+                document.head.removeChild(style);
+            };
+        }, [isPresent]);
+        return (React__namespace.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, React__namespace.cloneElement(children, { ref: ref })));
+    }
+
     var PresenceChild = function (_a) {
-        var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout;
+        var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout, popLayout = _a.popLayout;
         var presenceChildren = useConstant(newChildrenMap);
         var id = React.useId();
         var context = React.useMemo(function () { return ({
@@ -8474,6 +8551,9 @@
         React__namespace.useEffect(function () {
             !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
         }, [isPresent]);
+        if (popLayout) {
+            children = React__namespace.createElement(PopChild, { isPresent: isPresent }, children);
+        }
         return (React__namespace.createElement(PresenceContext.Provider, { value: context }, children));
     };
     function newChildrenMap() {
@@ -8530,10 +8610,10 @@
      * @public
      */
     var AnimatePresence = function (_a) {
-        var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c;
+        var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c, _d = _a.popLayout, popLayout = _d === void 0 ? false : _d;
         // 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.
-        var _d = __read(useForceUpdate(), 1), forceRender = _d[0];
+        var _e = __read(useForceUpdate(), 1), forceRender = _e[0];
         var forceRenderLayoutGroup = React.useContext(LayoutGroupContext).forceRender;
         if (forceRenderLayoutGroup)
             forceRender = forceRenderLayoutGroup;
@@ -8561,7 +8641,7 @@
             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)); })));
+            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, popLayout: popLayout }, child)); })));
         }
         // If this is a subsequent render, deal with entering and exiting children
         childrenToRender = __spreadArray([], __read(childrenToRender), false);
@@ -8607,13 +8687,13 @@
                     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, popLayout: popLayout }, child));
         });
         // Add `MotionContext` even to children that don't need it to ensure we're rendering
         // the same tree between renders
         childrenToRender = childrenToRender.map(function (child) {
             var 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, popLayout: popLayout }, child));
         });
         if (env !== "production" &&
             exitBeforeEnter &&