framer-motion 12.4.6 → 12.4.9

package/dist/framer-motion.dev.js

@@ -1106,7 +1106,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 = "12.4.6";
+            this.version = "12.4.9";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -5305,8 +5305,9 @@
         // either be null or non-null for the lifespan of the component.
         const id = React$1.useId();
         React$1.useEffect(() => {
-            if (subscribe)
-                register(id);
+            if (subscribe) {
+                return register(id);
+            }
         }, [subscribe]);
         const safeToRemove = React$1.useCallback(() => subscribe && onExitComplete && onExitComplete(id), [id, onExitComplete, subscribe]);
         return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
@@ -5957,7 +5958,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.4.6", `Attempting to mix Motion versions ${nextValue.version} with 12.4.6 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.4.9", `Attempting to mix Motion versions ${nextValue.version} with 12.4.9 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10330,6 +10331,7 @@
                 onMove && onMove(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
+                this.index = getElementIndex(event.currentTarget);
                 if (event.target instanceof Element &&
                     event.target.hasPointerCapture &&
                     event.pointerId !== undefined) {
@@ -10377,7 +10379,19 @@
             onSessionStart &&
                 onSessionStart(event, getPanInfo(initialInfo, this.history));
             capturePointer(event, "set");
-            this.removeListeners = pipe(addPointerEvent(event.currentTarget, "pointermove", this.handlePointerMove), addPointerEvent(event.currentTarget, "pointerup", this.handlePointerUp), addPointerEvent(event.currentTarget, "pointercancel", this.handlePointerUp), addPointerEvent(event.currentTarget, "lostpointercapture", this.handlePointerUp));
+            this.removeListeners = pipe(addPointerEvent(event.currentTarget, "pointermove", this.handlePointerMove), addPointerEvent(event.currentTarget, "pointerup", this.handlePointerUp), addPointerEvent(event.currentTarget, "pointercancel", this.handlePointerUp), addPointerEvent(event.currentTarget, "lostpointercapture", (lostPointerEvent, lostPointerInfo) => {
+                const index = getElementIndex(lostPointerEvent.currentTarget);
+                /**
+                 * If the pointer has lost capture because it's moved in the DOM
+                 * then we need to re-capture it.
+                 */
+                if (index !== this.index) {
+                    capturePointer(lostPointerEvent, "set");
+                }
+                else {
+                    this.handlePointerUp(lostPointerEvent, lostPointerInfo);
+                }
+            }));
         }
         updateHandlers(handlers) {
             this.handlers = handlers;
@@ -10441,6 +10455,11 @@
         }
         return currentVelocity;
     }
+    function getElementIndex(element) {
+        if (!element.parentNode)
+            return -1;
+        return Array.from(element.parentNode.children).indexOf(element);
+    }
 
     /**
      * Apply constraints to a point. These constraints are both physical along an
@@ -11137,7 +11156,8 @@
             projection.isPresent = isPresent;
             if (drag ||
                 prevProps.layoutDependency !== layoutDependency ||
-                layoutDependency === undefined) {
+                layoutDependency === undefined ||
+                prevProps.isPresent !== isPresent) {
                 projection.willUpdate();
             }
             else {