framer-motion 12.4.11 → 12.4.12

package/dist/es/gestures/pan/PanSession.mjs

@@ -1,4 +1,4 @@
-import { capturePointer, isPrimaryPointer } from 'motion-dom';
+import { isPrimaryPointer } from 'motion-dom';
 import { secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
@@ -10,7 +10,7 @@ import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
         /**
          * @internal
          */
@@ -27,6 +27,10 @@ class PanSession {
          * @internal
          */
         this.handlers = {};
+        /**
+         * @internal
+         */
+        this.contextWindow = window;
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
@@ -49,32 +53,19 @@ class PanSession {
             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) {
-                try {
-                    if (!event.target.hasPointerCapture(event.pointerId)) {
-                        return;
-                    }
-                }
-                catch (e) { }
-            }
             this.lastMoveEvent = event;
             this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
             // Throttle mouse move event to once per frame
             frame.update(this.updatePoint, true);
         };
         this.handlePointerUp = (event, info) => {
-            capturePointer(event, "release");
             this.end();
             const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
             if (this.dragSnapToOrigin)
                 resumeAnimation && resumeAnimation();
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
-            const panInfo = getPanInfo(event.type === "pointercancel" ||
-                event.type === "lostpointercapture"
+            const panInfo = getPanInfo(event.type === "pointercancel"
                 ? this.lastMoveEventInfo
                 : transformPoint(info, this.transformPagePoint), this.history);
             if (this.startEvent && onEnd) {
@@ -88,6 +79,7 @@ class PanSession {
         this.dragSnapToOrigin = dragSnapToOrigin;
         this.handlers = handlers;
         this.transformPagePoint = transformPagePoint;
+        this.contextWindow = contextWindow || window;
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
@@ -96,20 +88,7 @@ class PanSession {
         const { onSessionStart } = handlers;
         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", (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);
-            }
-        }));
+        this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
     }
     updateHandlers(handlers) {
         this.handlers = handlers;
@@ -173,10 +152,5 @@ function getVelocity(history, timeDelta) {
     }
     return currentVelocity;
 }
-function getElementIndex(element) {
-    if (!element.parentNode)
-        return -1;
-    return Array.from(element.parentNode.children).indexOf(element);
-}
 
 export { PanSession };

package/dist/es/gestures/pan/index.mjs

@@ -1,6 +1,7 @@
 import { noop } from 'motion-utils';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { Feature } from '../../motion/features/Feature.mjs';
+import { getContextWindow } from '../../utils/get-context-window.mjs';
 import { PanSession } from './PanSession.mjs';
 import { frame } from '../../frameloop/frame.mjs';
 
@@ -17,6 +18,7 @@ class PanGesture extends Feature {
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
             transformPagePoint: this.node.getTransformPagePoint(),
+            contextWindow: getContextWindow(this.node),
         });
     }
     createPanHandlers() {

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

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

package/dist/es/utils/get-context-window.mjs

@@ -0,0 +1,6 @@
+// Fixes https://github.com/motiondivision/motion/issues/2270
+const getContextWindow = ({ current }) => {
+    return current ? current.ownerDocument.defaultView : null;
+};
+
+export { getContextWindow };

package/dist/es/value/index.mjs

@@ -34,7 +34,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 = "12.4.11";
+        this.version = "12.4.12";
         /**
          * 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

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.11";
+            this.version = "12.4.12";
             /**
              * 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
@@ -5965,7 +5965,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.4.11", `Attempting to mix Motion versions ${nextValue.version} with 12.4.11 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.4.12", `Attempting to mix Motion versions ${nextValue.version} with 12.4.12 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10291,6 +10291,11 @@
         });
     }
 
+    // Fixes https://github.com/motiondivision/motion/issues/2270
+    const getContextWindow = ({ current }) => {
+        return current ? current.ownerDocument.defaultView : null;
+    };
+
     function isRefObject(ref) {
         return (ref &&
             typeof ref === "object" &&
@@ -10301,7 +10306,7 @@
      * @internal
      */
     class PanSession {
-        constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
+        constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
             /**
              * @internal
              */
@@ -10318,6 +10323,10 @@
              * @internal
              */
             this.handlers = {};
+            /**
+             * @internal
+             */
+            this.contextWindow = window;
             this.updatePoint = () => {
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
@@ -10340,32 +10349,19 @@
                 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) {
-                    try {
-                        if (!event.target.hasPointerCapture(event.pointerId)) {
-                            return;
-                        }
-                    }
-                    catch (e) { }
-                }
                 this.lastMoveEvent = event;
                 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint);
                 // Throttle mouse move event to once per frame
                 frame.update(this.updatePoint, true);
             };
             this.handlePointerUp = (event, info) => {
-                capturePointer(event, "release");
                 this.end();
                 const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
                 if (this.dragSnapToOrigin)
                     resumeAnimation && resumeAnimation();
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
-                const panInfo = getPanInfo(event.type === "pointercancel" ||
-                    event.type === "lostpointercapture"
+                const panInfo = getPanInfo(event.type === "pointercancel"
                     ? this.lastMoveEventInfo
                     : transformPoint(info, this.transformPagePoint), this.history);
                 if (this.startEvent && onEnd) {
@@ -10379,6 +10375,7 @@
             this.dragSnapToOrigin = dragSnapToOrigin;
             this.handlers = handlers;
             this.transformPagePoint = transformPagePoint;
+            this.contextWindow = contextWindow || window;
             const info = extractEventInfo(event);
             const initialInfo = transformPoint(info, this.transformPagePoint);
             const { point } = initialInfo;
@@ -10387,20 +10384,7 @@
             const { onSessionStart } = handlers;
             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", (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);
-                }
-            }));
+            this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
         }
         updateHandlers(handlers) {
             this.handlers = handlers;
@@ -10464,11 +10448,6 @@
         }
         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
@@ -10725,6 +10704,7 @@
             }, {
                 transformPagePoint: this.visualElement.getTransformPagePoint(),
                 dragSnapToOrigin,
+                contextWindow: getContextWindow(this.visualElement),
             });
         }
         stop(event, info) {
@@ -11090,6 +11070,7 @@
         onPointerDown(pointerDownEvent) {
             this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
                 transformPagePoint: this.node.getTransformPagePoint(),
+                contextWindow: getContextWindow(this.node),
             });
         }
         createPanHandlers() {