framer-motion 12.19.4 → 12.20.1

package/dist/framer-motion.dev.js

@@ -4916,7 +4916,7 @@
 
     class ViewTransitionBuilder {
         constructor(update, options = {}) {
-            this.currentTarget = "root";
+            this.currentSubject = "root";
             this.targets = new Map();
             this.notifyReady = noop;
             this.readyPromise = new Promise((resolve) => {
@@ -4929,8 +4929,8 @@
             };
             addToQueue(this);
         }
-        get(selector) {
-            this.currentTarget = selector;
+        get(subject) {
+            this.currentSubject = subject;
             return this;
         }
         layout(keyframes, options) {
@@ -4959,11 +4959,11 @@
             return this;
         }
         updateTarget(target, keyframes, options = {}) {
-            const { currentTarget, targets } = this;
-            if (!targets.has(currentTarget)) {
-                targets.set(currentTarget, {});
+            const { currentSubject, targets } = this;
+            if (!targets.has(currentSubject)) {
+                targets.set(currentSubject, {});
             }
-            const targetData = targets.get(currentTarget);
+            const targetData = targets.get(currentSubject);
             targetData[target] = { keyframes, options };
         }
         then(resolve, reject) {
@@ -5028,7 +5028,7 @@
             return this.props.children;
         }
     }
-    function PopChild({ children, isPresent, anchorX }) {
+    function PopChild({ children, isPresent, anchorX, root }) {
         const id = React$1.useId();
         const ref = React$1.useRef(null);
         const size = React$1.useRef({
@@ -5057,7 +5057,8 @@
             const style = document.createElement("style");
             if (nonce)
                 style.nonce = nonce;
-            document.head.appendChild(style);
+            const parent = root ?? document.head;
+            parent.appendChild(style);
             if (style.sheet) {
                 style.sheet.insertRule(`
           [data-motion-pop-id="${id}"] {
@@ -5070,15 +5071,16 @@
         `);
             }
             return () => {
-                if (document.head.contains(style)) {
-                    document.head.removeChild(style);
+                parent.removeChild(style);
+                if (parent.contains(style)) {
+                    parent.removeChild(style);
                 }
             };
         }, [isPresent]);
         return (jsx(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size, children: React__namespace.cloneElement(children, { ref }) }));
     }
 
-    const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, }) => {
+    const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, anchorX, root }) => {
         const presenceChildren = useConstant(newChildrenMap);
         const id = React$1.useId();
         let isReusedContext = true;
@@ -5125,7 +5127,7 @@
                 onExitComplete();
         }, [isPresent]);
         if (mode === "popLayout") {
-            children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, children: children }));
+            children = (jsx(PopChild, { isPresent: isPresent, anchorX: anchorX, root: root, children: children }));
         }
         return (jsx(PresenceContext.Provider, { value: context, children: children }));
     };
@@ -5243,7 +5245,7 @@
      *
      * @public
      */
-    const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", }) => {
+    const AnimatePresence = ({ children, custom, initial = true, onExitComplete, presenceAffectsLayout = true, mode = "sync", propagate = false, anchorX = "left", root }) => {
         const [isParentPresent, safeToRemove] = usePresence(propagate);
         /**
          * Filter any children that aren't ReactElements. We can only track components
@@ -5360,7 +5362,7 @@
                 };
                 return (jsx(PresenceChild, { isPresent: isPresent, initial: !isInitialRender.current || initial
                         ? undefined
-                        : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
+                        : false, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode, root: root, onExitComplete: isPresent ? undefined : onExit, anchorX: anchorX, children: child }, key));
             }) }));
     };