framer-motion 12.27.3 → 12.27.4

package/dist/cjs/index.js

@@ -96,12 +96,16 @@ class PopChildMeasure extends React__namespace.Component {
             const parentWidth = motionDom.isHTMLElement(parent)
                 ? parent.offsetWidth || 0
                 : 0;
+            const parentHeight = motionDom.isHTMLElement(parent)
+                ? parent.offsetHeight || 0
+                : 0;
             const size = this.props.sizeRef.current;
             size.height = element.offsetHeight || 0;
             size.width = element.offsetWidth || 0;
             size.top = element.offsetTop;
             size.left = element.offsetLeft;
             size.right = parentWidth - size.width - size.left;
+            size.bottom = parentHeight - size.height - size.top;
         }
         return null;
     }
@@ -113,7 +117,7 @@ class PopChildMeasure extends React__namespace.Component {
         return this.props.children;
     }
 }
-function PopChild({ children, isPresent, anchorX, root }) {
+function PopChild({ children, isPresent, anchorX, anchorY, root }) {
     const id = React.useId();
     const ref = React.useRef(null);
     const size = React.useRef({
@@ -122,6 +126,7 @@ function PopChild({ children, isPresent, anchorX, root }) {
         top: 0,
         left: 0,
         right: 0,
+        bottom: 0,
     });
     const { nonce } = React.useContext(featureBundle.MotionConfigContext);
     /**
@@ -141,10 +146,11 @@ function PopChild({ children, isPresent, anchorX, root }) {
      * styles set via the style prop.
      */
     React.useInsertionEffect(() => {
-        const { width, height, top, left, right } = size.current;
+        const { width, height, top, left, right, bottom } = size.current;
         if (isPresent || !ref.current || !width || !height)
             return;
         const x = anchorX === "left" ? `left: ${left}` : `right: ${right}`;
+        const y = anchorY === "bottom" ? `bottom: ${bottom}` : `top: ${top}`;
         ref.current.dataset.motionPopId = id;
         const style = document.createElement("style");
         if (nonce)
@@ -158,7 +164,7 @@ function PopChild({ children, isPresent, anchorX, root }) {
             width: ${width}px !important;
             height: ${height}px !important;
             ${x}px !important;
-            top: ${top}px !important;
+            ${y}px !important;
           }
         `);
         }
@@ -171,7 +177,7 @@ function PopChild({ children, isPresent, anchorX, root }) {
     return (jsxRuntime.jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref: composedRef }) }));
 }
 
-const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
+const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, anchorY, root }) => {
     const presenceChildren = featureBundle.useConstant(newChildrenMap);
     const id = React.useId();
     let isReusedContext = true;
@@ -218,7 +224,7 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
             onExitComplete();
     }, [isPresent]);
     if (mode === "popLayout") {
-        children = (jsxRuntime.jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));
+        children = (jsxRuntime.jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, anchorY: anchorY, root: root, children: children }));
     }
     return (jsxRuntime.jsx(featureBundle.PresenceContext.Provider, { value: context, children: children }));
 };
@@ -270,7 +276,7 @@ function onlyElements(children) {
  *
  * @public
  */
-const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
+const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", anchorY = "top", root }) => {
     const [isParentPresent, safeToRemove] = featureBundle.usePresence(propagate);
     /**
      * Filter any children that aren't ReactElements. We can only track components
@@ -397,7 +403,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
             };
             return (jsxRuntime.jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
                     ? undefined
-                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
+                    : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, anchorY: anchorY, children: child }, key));
         }) }));
 };