motion 12.4.3 → 12.4.4

package/dist/cjs/react-mini.js

@@ -363,7 +363,7 @@ function mapEasingToNativeEasing(easing, duration) {
 
 function resolveElements(elementOrSelector, scope, selectorCache) {
     var _a;
-    if (elementOrSelector instanceof Element) {
+    if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
     }
     else if (typeof elementOrSelector === "string") {

package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,21 +1,20 @@
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { setDragLock } from '../../../../../motion-dom/dist/es/gestures/drag/state/set-active.mjs';
-import { PanSession } from '../pan/PanSession.mjs';
-import { isRefObject } from '../../utils/is-ref-object.mjs';
+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, calcViewportConstraints, rebaseAxisConstraints, 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, calcViewportConstraints, rebaseAxisConstraints, 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/framer-motion/dist/es/gestures/pan/PanSession.mjs

@@ -11,7 +11,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
          */
@@ -28,10 +28,6 @@ class PanSession {
          * @internal
          */
         this.handlers = {};
-        /**
-         * @internal
-         */
-        this.contextWindow = window;
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
@@ -54,19 +50,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) {
@@ -80,7 +88,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;
@@ -89,7 +96,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;
@@ -153,5 +161,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/framer-motion/dist/es/gestures/pan/index.mjs

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

package/dist/es/framer-motion/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";
         /**
          * 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/es/motion-dom/dist/es/gestures/press/index.mjs

@@ -32,45 +32,86 @@ function isValidPressEvent(event) {
  *
  * @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);
+}
 
 export { press };

package/dist/es/motion-dom/dist/es/utils/resolve-elements.mjs

@@ -1,6 +1,6 @@
 function resolveElements(elementOrSelector, scope, selectorCache) {
     var _a;
-    if (elementOrSelector instanceof Element) {
+    if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
     }
     else if (typeof elementOrSelector === "string") {

package/dist/motion.dev.js

@@ -366,7 +366,7 @@
 
     function resolveElements(elementOrSelector, scope, selectorCache) {
         var _a;
-        if (elementOrSelector instanceof Element) {
+        if (elementOrSelector instanceof EventTarget) {
             return [elementOrSelector];
         }
         else if (typeof elementOrSelector === "string") {
@@ -541,46 +541,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);
+    }
 
     const clamp = (min, max, v) => {
         if (v > max)
@@ -1588,7 +1629,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";
             /**
              * 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
@@ -4523,7 +4564,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", `Attempting to mix Motion versions ${nextValue.version} with 12.4.4 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {