framer-motion 12.4.3 → 12.4.4-alpha.0

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,21 +1,20 @@
-import { invariant } from 'motion-utils';
 import { setDragLock } from 'motion-dom';
-import { PanSession } from '../pan/PanSession.mjs';
-import { isRefObject } from '../../utils/is-ref-object.mjs';
+import { invariant } from 'motion-utils';
+import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
+import { addDomEvent } from '../../events/add-dom-event.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
-import { applyConstraints, calcRelativeConstraints, resolveDragElastic, rebaseAxisConstraints, calcViewportConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
-import { createBox } from '../../projection/geometry/models.mjs';
-import { eachAxis } from '../../projection/utils/each-axis.mjs';
-import { measurePageBox } from '../../projection/utils/measure.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { convertBoxToBoundingBox, convertBoundingBoxToBox } from '../../projection/geometry/conversion.mjs';
-import { addDomEvent } from '../../events/add-dom-event.mjs';
 import { calcLength } from '../../projection/geometry/delta-calc.mjs';
+import { createBox } from '../../projection/geometry/models.mjs';
+import { eachAxis } from '../../projection/utils/each-axis.mjs';
+import { measurePageBox } from '../../projection/utils/measure.mjs';
+import { isRefObject } from '../../utils/is-ref-object.mjs';
 import { mixNumber } from '../../utils/mix/number.mjs';
 import { percent } from '../../value/types/numbers/units.mjs';
-import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
-import { getContextWindow } from '../../utils/get-context-window.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
+import { PanSession } from '../pan/PanSession.mjs';
+import { applyConstraints, calcRelativeConstraints, resolveDragElastic, rebaseAxisConstraints, calcViewportConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
 import { frame } from '../../frameloop/frame.mjs';
 
 const elementDragControls = new WeakMap();
@@ -150,7 +149,6 @@ class VisualElementDragControls {
         }, {
             transformPagePoint: this.visualElement.getTransformPagePoint(),
             dragSnapToOrigin,
-            contextWindow: getContextWindow(this.visualElement),
         });
     }
     stop(event, info) {

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

@@ -10,7 +10,7 @@ import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
+    constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
         /**
          * @internal
          */
@@ -27,10 +27,6 @@ class PanSession {
          * @internal
          */
         this.handlers = {};
-        /**
-         * @internal
-         */
-        this.contextWindow = window;
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
@@ -53,19 +49,31 @@ class PanSession {
             onMove && onMove(this.lastMoveEvent, info);
         };
         this.handlePointerMove = (event, info) => {
+            if (event.currentTarget instanceof Element &&
+                event.currentTarget.hasPointerCapture &&
+                event.pointerId !== undefined) {
+                try {
+                    if (!event.currentTarget.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"
+            const panInfo = getPanInfo(event.type === "pointercancel" ||
+                event.type === "lostpointercapture"
                 ? this.lastMoveEventInfo
                 : transformPoint(info, this.transformPagePoint), this.history);
             if (this.startEvent && onEnd) {
@@ -79,7 +87,6 @@ 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;
@@ -88,7 +95,8 @@ class PanSession {
         const { onSessionStart } = handlers;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
-        this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+        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));
     }
     updateHandlers(handlers) {
         this.handlers = handlers;
@@ -152,5 +160,16 @@ function getVelocity(history, timeDelta) {
     }
     return currentVelocity;
 }
+function capturePointer(event, action) {
+    const actionName = `${action}PointerCapture`;
+    if (event.currentTarget instanceof Element &&
+        actionName in event.currentTarget &&
+        event.pointerId !== undefined) {
+        try {
+            event.currentTarget[actionName](event.pointerId);
+        }
+        catch (e) { }
+    }
+}
 
 export { PanSession };

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

@@ -1,8 +1,7 @@
-import { PanSession } from './PanSession.mjs';
+import { noop } from 'motion-utils';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { Feature } from '../../motion/features/Feature.mjs';
-import { noop } from 'motion-utils';
-import { getContextWindow } from '../../utils/get-context-window.mjs';
+import { PanSession } from './PanSession.mjs';
 import { frame } from '../../frameloop/frame.mjs';
 
 const asyncHandler = (handler) => (event, info) => {
@@ -18,7 +17,6 @@ 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.3", `Attempting to mix Motion versions ${nextValue.version} with 12.4.3 may not work as expected.`);
+                warnOnce(nextValue.version === "12.4.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.4.4-alpha.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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.3";
+        this.version = "12.4.4-alpha.0";
         /**
          * 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

@@ -466,7 +466,7 @@
 
     function resolveElements(elementOrSelector, scope, selectorCache) {
         var _a;
-        if (elementOrSelector instanceof Element) {
+        if (elementOrSelector instanceof EventTarget) {
             return [elementOrSelector];
         }
         else if (typeof elementOrSelector === "string") {
@@ -641,46 +641,87 @@
      *
      * @public
      */
-    function press(elementOrSelector, onPressStart, options = {}) {
-        const [elements, eventOptions, cancelEvents] = setupGesture(elementOrSelector, options);
+    function press(targetOrSelector, onPressStart, options = {}) {
+        const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
         const startPress = (startEvent) => {
-            const element = startEvent.currentTarget;
-            if (!isValidPressEvent(startEvent) || isPressing.has(element))
+            const target = startEvent.currentTarget;
+            if (!target || !isValidPressEvent(startEvent) || isPressing.has(target))
                 return;
-            isPressing.add(element);
-            const onPressEnd = onPressStart(element, startEvent);
+            isPressing.add(target);
+            if (target.setPointerCapture && startEvent.pointerId !== undefined) {
+                try {
+                    target.setPointerCapture(startEvent.pointerId);
+                }
+                catch (e) { }
+            }
+            const onPressEnd = onPressStart(target, startEvent);
             const onPointerEnd = (endEvent, success) => {
-                window.removeEventListener("pointerup", onPointerUp);
-                window.removeEventListener("pointercancel", onPointerCancel);
-                if (!isValidPressEvent(endEvent) || !isPressing.has(element)) {
+                target.removeEventListener("pointerup", onPointerUp);
+                target.removeEventListener("pointercancel", onPointerCancel);
+                if (target.releasePointerCapture &&
+                    endEvent.pointerId !== undefined) {
+                    try {
+                        target.releasePointerCapture(endEvent.pointerId);
+                    }
+                    catch (e) { }
+                }
+                if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
                     return;
                 }
-                isPressing.delete(element);
+                isPressing.delete(target);
                 if (typeof onPressEnd === "function") {
                     onPressEnd(endEvent, { success });
                 }
             };
             const onPointerUp = (upEvent) => {
-                onPointerEnd(upEvent, options.useGlobalTarget ||
-                    isNodeOrChild(element, upEvent.target));
+                const isOutside = !upEvent.isTrusted
+                    ? false
+                    : checkOutside(upEvent, target instanceof Element
+                        ? target.getBoundingClientRect()
+                        : {
+                            left: 0,
+                            top: 0,
+                            right: window.innerWidth,
+                            bottom: window.innerHeight,
+                        });
+                if (isOutside) {
+                    onPointerEnd(upEvent, false);
+                }
+                else {
+                    onPointerEnd(upEvent, !(target instanceof Element) ||
+                        isNodeOrChild(target, upEvent.target));
+                }
             };
             const onPointerCancel = (cancelEvent) => {
                 onPointerEnd(cancelEvent, false);
             };
-            window.addEventListener("pointerup", onPointerUp, eventOptions);
-            window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+            target.addEventListener("pointerup", onPointerUp, eventOptions);
+            target.addEventListener("pointercancel", onPointerCancel, eventOptions);
+            target.addEventListener("lostpointercapture", onPointerCancel, eventOptions);
         };
-        elements.forEach((element) => {
-            if (!isElementKeyboardAccessible(element) &&
-                element.getAttribute("tabindex") === null) {
-                element.tabIndex = 0;
+        targets.forEach((target) => {
+            target = options.useGlobalTarget ? window : target;
+            let canAddKeyboardAccessibility = false;
+            if (target instanceof HTMLElement) {
+                canAddKeyboardAccessibility = true;
+                if (!isElementKeyboardAccessible(target) &&
+                    target.getAttribute("tabindex") === null) {
+                    target.tabIndex = 0;
+                }
             }
-            const target = options.useGlobalTarget ? window : element;
             target.addEventListener("pointerdown", startPress, eventOptions);
-            element.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+            if (canAddKeyboardAccessibility) {
+                target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+            }
         });
         return cancelEvents;
     }
+    function checkOutside(event, rect) {
+        return (event.clientX < rect.left ||
+            event.clientX > rect.right ||
+            event.clientY < rect.top ||
+            event.clientY > rect.bottom);
+    }
 
     function setDragLock(axis) {
         if (axis === "x" || axis === "y") {
@@ -1064,7 +1105,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.3";
+            this.version = "12.4.4-alpha.0";
             /**
              * 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
@@ -5915,7 +5956,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.4.3", `Attempting to mix Motion versions ${nextValue.version} with 12.4.3 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.4.4-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.4.4-alpha.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -10239,11 +10280,17 @@
         });
     }
 
+    function isRefObject(ref) {
+        return (ref &&
+            typeof ref === "object" &&
+            Object.prototype.hasOwnProperty.call(ref, "current"));
+    }
+
     /**
      * @internal
      */
     class PanSession {
-        constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
+        constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
             /**
              * @internal
              */
@@ -10260,10 +10307,6 @@
              * @internal
              */
             this.handlers = {};
-            /**
-             * @internal
-             */
-            this.contextWindow = window;
             this.updatePoint = () => {
                 if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                     return;
@@ -10286,19 +10329,31 @@
                 onMove && onMove(this.lastMoveEvent, info);
             };
             this.handlePointerMove = (event, info) => {
+                if (event.currentTarget instanceof Element &&
+                    event.currentTarget.hasPointerCapture &&
+                    event.pointerId !== undefined) {
+                    try {
+                        if (!event.currentTarget.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"
+                const panInfo = getPanInfo(event.type === "pointercancel" ||
+                    event.type === "lostpointercapture"
                     ? this.lastMoveEventInfo
                     : transformPoint(info, this.transformPagePoint), this.history);
                 if (this.startEvent && onEnd) {
@@ -10312,7 +10367,6 @@
             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;
@@ -10321,7 +10375,8 @@
             const { onSessionStart } = handlers;
             onSessionStart &&
                 onSessionStart(event, getPanInfo(initialInfo, this.history));
-            this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+            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));
         }
         updateHandlers(handlers) {
             this.handlers = handlers;
@@ -10385,11 +10440,16 @@
         }
         return currentVelocity;
     }
-
-    function isRefObject(ref) {
-        return (ref &&
-            typeof ref === "object" &&
-            Object.prototype.hasOwnProperty.call(ref, "current"));
+    function capturePointer(event, action) {
+        const actionName = `${action}PointerCapture`;
+        if (event.currentTarget instanceof Element &&
+            actionName in event.currentTarget &&
+            event.pointerId !== undefined) {
+            try {
+                event.currentTarget[actionName](event.pointerId);
+            }
+            catch (e) { }
+        }
     }
 
     /**
@@ -10515,11 +10575,6 @@
             : dragElastic[label] || 0;
     }
 
-    // Fixes https://github.com/motiondivision/motion/issues/2270
-    const getContextWindow = ({ current }) => {
-        return current ? current.ownerDocument.defaultView : null;
-    };
-
     const elementDragControls = new WeakMap();
     /**
      *
@@ -10652,7 +10707,6 @@
             }, {
                 transformPagePoint: this.visualElement.getTransformPagePoint(),
                 dragSnapToOrigin,
-                contextWindow: getContextWindow(this.visualElement),
             });
         }
         stop(event, info) {
@@ -11018,7 +11072,6 @@
         onPointerDown(pointerDownEvent) {
             this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
                 transformPagePoint: this.node.getTransformPagePoint(),
-                contextWindow: getContextWindow(this.node),
             });
         }
         createPanHandlers() {