motion 12.4.3 → 12.4.4

package/dist/cjs/react-client.js

@@ -319,7 +319,7 @@ function isDragActive() {
 
 function resolveElements(elementOrSelector, scope, selectorCache) {
     var _a;
-    if (elementOrSelector instanceof Element) {
+    if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
     }
     else if (typeof elementOrSelector === "string") {
@@ -494,46 +494,87 @@ 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);
+}
 
 function setDragLock(axis) {
     if (axis === "x" || axis === "y") {
@@ -902,7 +943,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
@@ -4586,165 +4627,36 @@ function addPointerEvent(target, eventName, handler, options) {
     return addDomEvent(target, eventName, addPointerInfo(handler), options);
 }
 
-const distance = (a, b) => Math.abs(a - b);
-function distance2D(a, b) {
-    // Multi-dimensional
-    const xDelta = distance(a.x, b.x);
-    const yDelta = distance(a.y, b.y);
-    return Math.sqrt(xDelta ** 2 + yDelta ** 2);
-}
-
 /**
- * @internal
+ * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
+ * it's easier to consider each axis individually. This function returns a bounding box
+ * as a map of single-axis min/max values.
  */
-class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
-        /**
-         * @internal
-         */
-        this.startEvent = null;
-        /**
-         * @internal
-         */
-        this.lastMoveEvent = null;
-        /**
-         * @internal
-         */
-        this.lastMoveEventInfo = null;
-        /**
-         * @internal
-         */
-        this.handlers = {};
-        /**
-         * @internal
-         */
-        this.contextWindow = window;
-        this.updatePoint = () => {
-            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
-                return;
-            const info = getPanInfo(this.lastMoveEventInfo, this.history);
-            const isPanStarted = this.startEvent !== null;
-            // Only start panning if the offset is larger than 3 pixels. If we make it
-            // any larger than this we'll want to reset the pointer history
-            // on the first update to avoid visual snapping to the cursoe.
-            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
-            if (!isPanStarted && !isDistancePastThreshold)
-                return;
-            const { point } = info;
-            const { timestamp } = frameData;
-            this.history.push({ ...point, timestamp });
-            const { onStart, onMove } = this.handlers;
-            if (!isPanStarted) {
-                onStart && onStart(this.lastMoveEvent, info);
-                this.startEvent = this.lastMoveEvent;
-            }
-            onMove && onMove(this.lastMoveEvent, info);
-        };
-        this.handlePointerMove = (event, info) => {
-            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) => {
-            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"
-                ? this.lastMoveEventInfo
-                : transformPoint(info, this.transformPagePoint), this.history);
-            if (this.startEvent && onEnd) {
-                onEnd(event, panInfo);
-            }
-            onSessionEnd && onSessionEnd(event, panInfo);
-        };
-        // If we have more than one touch, don't start detecting this gesture
-        if (!isPrimaryPointer(event))
-            return;
-        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;
-        const { timestamp } = frameData;
-        this.history = [{ ...point, timestamp }];
-        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));
-    }
-    updateHandlers(handlers) {
-        this.handlers = handlers;
-    }
-    end() {
-        this.removeListeners && this.removeListeners();
-        cancelFrame(this.updatePoint);
-    }
-}
-function transformPoint(info, transformPagePoint) {
-    return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
-}
-function subtractPoint(a, b) {
-    return { x: a.x - b.x, y: a.y - b.y };
-}
-function getPanInfo({ point }, history) {
+function convertBoundingBoxToBox({ top, left, right, bottom, }) {
     return {
-        point,
-        delta: subtractPoint(point, lastDevicePoint(history)),
-        offset: subtractPoint(point, startDevicePoint(history)),
-        velocity: getVelocity(history, 0.1),
+        x: { min: left, max: right },
+        y: { min: top, max: bottom },
     };
 }
-function startDevicePoint(history) {
-    return history[0];
-}
-function lastDevicePoint(history) {
-    return history[history.length - 1];
+function convertBoxToBoundingBox({ x, y }) {
+    return { top: y.min, right: x.max, bottom: y.max, left: x.min };
 }
-function getVelocity(history, timeDelta) {
-    if (history.length < 2) {
-        return { x: 0, y: 0 };
-    }
-    let i = history.length - 1;
-    let timestampedPoint = null;
-    const lastPoint = lastDevicePoint(history);
-    while (i >= 0) {
-        timestampedPoint = history[i];
-        if (lastPoint.timestamp - timestampedPoint.timestamp >
-            secondsToMilliseconds(timeDelta)) {
-            break;
-        }
-        i--;
-    }
-    if (!timestampedPoint) {
-        return { x: 0, y: 0 };
-    }
-    const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
-    if (time === 0) {
-        return { x: 0, y: 0 };
-    }
-    const currentVelocity = {
-        x: (lastPoint.x - timestampedPoint.x) / time,
-        y: (lastPoint.y - timestampedPoint.y) / time,
+/**
+ * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
+ * provided by Framer to allow measured points to be corrected for device scaling. This is used
+ * when measuring DOM elements and DOM event points.
+ */
+function transformBoxPoints(point, transformPoint) {
+    if (!transformPoint)
+        return point;
+    const topLeft = transformPoint({ x: point.left, y: point.top });
+    const bottomRight = transformPoint({ x: point.right, y: point.bottom });
+    return {
+        top: topLeft.y,
+        left: topLeft.x,
+        bottom: bottomRight.y,
+        right: bottomRight.x,
     };
-    if (currentVelocity.x === Infinity) {
-        currentVelocity.x = 0;
-    }
-    if (currentVelocity.y === Infinity) {
-        currentVelocity.y = 0;
-    }
-    return currentVelocity;
-}
-
-function isRefObject(ref) {
-    return (ref &&
-        typeof ref === "object" &&
-        Object.prototype.hasOwnProperty.call(ref, "current"));
 }
 
 const SCALE_PRECISION = 0.0001;
@@ -4796,216 +4708,61 @@ function calcRelativePosition(target, layout, parent) {
     calcRelativeAxisPosition(target.y, layout.y, parent.y);
 }
 
+const createAxisDelta = () => ({
+    translate: 0,
+    scale: 1,
+    origin: 0,
+    originPoint: 0,
+});
+const createDelta = () => ({
+    x: createAxisDelta(),
+    y: createAxisDelta(),
+});
+const createAxis = () => ({ min: 0, max: 0 });
+const createBox = () => ({
+    x: createAxis(),
+    y: createAxis(),
+});
+
+function eachAxis(callback) {
+    return [callback("x"), callback("y")];
+}
+
+function isIdentityScale(scale) {
+    return scale === undefined || scale === 1;
+}
+function hasScale({ scale, scaleX, scaleY }) {
+    return (!isIdentityScale(scale) ||
+        !isIdentityScale(scaleX) ||
+        !isIdentityScale(scaleY));
+}
+function hasTransform(values) {
+    return (hasScale(values) ||
+        has2DTranslate(values) ||
+        values.z ||
+        values.rotate ||
+        values.rotateX ||
+        values.rotateY ||
+        values.skewX ||
+        values.skewY);
+}
+function has2DTranslate(values) {
+    return is2DTranslate(values.x) || is2DTranslate(values.y);
+}
+function is2DTranslate(value) {
+    return value && value !== "0%";
+}
+
 /**
- * Apply constraints to a point. These constraints are both physical along an
- * axis, and an elastic factor that determines how much to constrain the point
- * by if it does lie outside the defined parameters.
+ * Scales a point based on a factor and an originPoint
  */
-function applyConstraints(point, { min, max }, elastic) {
-    if (min !== undefined && point < min) {
-        // If we have a min point defined, and this is outside of that, constrain
-        point = elastic
-            ? mixNumber$1(min, point, elastic.min)
-            : Math.max(point, min);
-    }
-    else if (max !== undefined && point > max) {
-        // If we have a max point defined, and this is outside of that, constrain
-        point = elastic
-            ? mixNumber$1(max, point, elastic.max)
-            : Math.min(point, max);
-    }
-    return point;
+function scalePoint(point, scale, originPoint) {
+    const distanceFromOrigin = point - originPoint;
+    const scaled = scale * distanceFromOrigin;
+    return originPoint + scaled;
 }
 /**
- * Calculate constraints in terms of the viewport when defined relatively to the
- * measured axis. This is measured from the nearest edge, so a max constraint of 200
- * on an axis with a max value of 300 would return a constraint of 500 - axis length
- */
-function calcRelativeAxisConstraints(axis, min, max) {
-    return {
-        min: min !== undefined ? axis.min + min : undefined,
-        max: max !== undefined
-            ? axis.max + max - (axis.max - axis.min)
-            : undefined,
-    };
-}
-/**
- * Calculate constraints in terms of the viewport when
- * defined relatively to the measured bounding box.
- */
-function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
-    return {
-        x: calcRelativeAxisConstraints(layoutBox.x, left, right),
-        y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
-    };
-}
-/**
- * Calculate viewport constraints when defined as another viewport-relative axis
- */
-function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
-    let min = constraintsAxis.min - layoutAxis.min;
-    let max = constraintsAxis.max - layoutAxis.max;
-    // If the constraints axis is actually smaller than the layout axis then we can
-    // flip the constraints
-    if (constraintsAxis.max - constraintsAxis.min <
-        layoutAxis.max - layoutAxis.min) {
-        [min, max] = [max, min];
-    }
-    return { min, max };
-}
-/**
- * Calculate viewport constraints when defined as another viewport-relative box
- */
-function calcViewportConstraints(layoutBox, constraintsBox) {
-    return {
-        x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
-        y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
-    };
-}
-/**
- * Calculate a transform origin relative to the source axis, between 0-1, that results
- * in an asthetically pleasing scale/transform needed to project from source to target.
- */
-function calcOrigin$1(source, target) {
-    let origin = 0.5;
-    const sourceLength = calcLength(source);
-    const targetLength = calcLength(target);
-    if (targetLength > sourceLength) {
-        origin = progress(target.min, target.max - sourceLength, source.min);
-    }
-    else if (sourceLength > targetLength) {
-        origin = progress(source.min, source.max - targetLength, target.min);
-    }
-    return clamp(0, 1, origin);
-}
-/**
- * Rebase the calculated viewport constraints relative to the layout.min point.
- */
-function rebaseAxisConstraints(layout, constraints) {
-    const relativeConstraints = {};
-    if (constraints.min !== undefined) {
-        relativeConstraints.min = constraints.min - layout.min;
-    }
-    if (constraints.max !== undefined) {
-        relativeConstraints.max = constraints.max - layout.min;
-    }
-    return relativeConstraints;
-}
-const defaultElastic = 0.35;
-/**
- * Accepts a dragElastic prop and returns resolved elastic values for each axis.
- */
-function resolveDragElastic(dragElastic = defaultElastic) {
-    if (dragElastic === false) {
-        dragElastic = 0;
-    }
-    else if (dragElastic === true) {
-        dragElastic = defaultElastic;
-    }
-    return {
-        x: resolveAxisElastic(dragElastic, "left", "right"),
-        y: resolveAxisElastic(dragElastic, "top", "bottom"),
-    };
-}
-function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
-    return {
-        min: resolvePointElastic(dragElastic, minLabel),
-        max: resolvePointElastic(dragElastic, maxLabel),
-    };
-}
-function resolvePointElastic(dragElastic, label) {
-    return typeof dragElastic === "number"
-        ? dragElastic
-        : dragElastic[label] || 0;
-}
-
-const createAxisDelta = () => ({
-    translate: 0,
-    scale: 1,
-    origin: 0,
-    originPoint: 0,
-});
-const createDelta = () => ({
-    x: createAxisDelta(),
-    y: createAxisDelta(),
-});
-const createAxis = () => ({ min: 0, max: 0 });
-const createBox = () => ({
-    x: createAxis(),
-    y: createAxis(),
-});
-
-function eachAxis(callback) {
-    return [callback("x"), callback("y")];
-}
-
-/**
- * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
- * it's easier to consider each axis individually. This function returns a bounding box
- * as a map of single-axis min/max values.
- */
-function convertBoundingBoxToBox({ top, left, right, bottom, }) {
-    return {
-        x: { min: left, max: right },
-        y: { min: top, max: bottom },
-    };
-}
-function convertBoxToBoundingBox({ x, y }) {
-    return { top: y.min, right: x.max, bottom: y.max, left: x.min };
-}
-/**
- * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
- * provided by Framer to allow measured points to be corrected for device scaling. This is used
- * when measuring DOM elements and DOM event points.
- */
-function transformBoxPoints(point, transformPoint) {
-    if (!transformPoint)
-        return point;
-    const topLeft = transformPoint({ x: point.left, y: point.top });
-    const bottomRight = transformPoint({ x: point.right, y: point.bottom });
-    return {
-        top: topLeft.y,
-        left: topLeft.x,
-        bottom: bottomRight.y,
-        right: bottomRight.x,
-    };
-}
-
-function isIdentityScale(scale) {
-    return scale === undefined || scale === 1;
-}
-function hasScale({ scale, scaleX, scaleY }) {
-    return (!isIdentityScale(scale) ||
-        !isIdentityScale(scaleX) ||
-        !isIdentityScale(scaleY));
-}
-function hasTransform(values) {
-    return (hasScale(values) ||
-        has2DTranslate(values) ||
-        values.z ||
-        values.rotate ||
-        values.rotateX ||
-        values.rotateY ||
-        values.skewX ||
-        values.skewY);
-}
-function has2DTranslate(values) {
-    return is2DTranslate(values.x) || is2DTranslate(values.y);
-}
-function is2DTranslate(value) {
-    return value && value !== "0%";
-}
-
-/**
- * Scales a point based on a factor and an originPoint
- */
-function scalePoint(point, scale, originPoint) {
-    const distanceFromOrigin = point - originPoint;
-    const scaled = scale * distanceFromOrigin;
-    return originPoint + scaled;
-}
-/**
- * Applies a translate/scale delta to a point
+ * Applies a translate/scale delta to a point
  */
 function applyPointDelta(point, translate, scale, originPoint, boxScale) {
     if (boxScale !== undefined) {
@@ -5124,10 +4881,308 @@ function measurePageBox(element, rootProjectionNode, transformPagePoint) {
     return viewportBox;
 }
 
-// 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" &&
+        Object.prototype.hasOwnProperty.call(ref, "current"));
+}
+
+const distance = (a, b) => Math.abs(a - b);
+function distance2D(a, b) {
+    // Multi-dimensional
+    const xDelta = distance(a.x, b.x);
+    const yDelta = distance(a.y, b.y);
+    return Math.sqrt(xDelta ** 2 + yDelta ** 2);
+}
+
+/**
+ * @internal
+ */
+class PanSession {
+    constructor(event, handlers, { transformPagePoint, dragSnapToOrigin = false } = {}) {
+        /**
+         * @internal
+         */
+        this.startEvent = null;
+        /**
+         * @internal
+         */
+        this.lastMoveEvent = null;
+        /**
+         * @internal
+         */
+        this.lastMoveEventInfo = null;
+        /**
+         * @internal
+         */
+        this.handlers = {};
+        this.updatePoint = () => {
+            if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+                return;
+            const info = getPanInfo(this.lastMoveEventInfo, this.history);
+            const isPanStarted = this.startEvent !== null;
+            // Only start panning if the offset is larger than 3 pixels. If we make it
+            // any larger than this we'll want to reset the pointer history
+            // on the first update to avoid visual snapping to the cursoe.
+            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3;
+            if (!isPanStarted && !isDistancePastThreshold)
+                return;
+            const { point } = info;
+            const { timestamp } = frameData;
+            this.history.push({ ...point, timestamp });
+            const { onStart, onMove } = this.handlers;
+            if (!isPanStarted) {
+                onStart && onStart(this.lastMoveEvent, info);
+                this.startEvent = this.lastMoveEvent;
+            }
+            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" ||
+                event.type === "lostpointercapture"
+                ? this.lastMoveEventInfo
+                : transformPoint(info, this.transformPagePoint), this.history);
+            if (this.startEvent && onEnd) {
+                onEnd(event, panInfo);
+            }
+            onSessionEnd && onSessionEnd(event, panInfo);
+        };
+        // If we have more than one touch, don't start detecting this gesture
+        if (!isPrimaryPointer(event))
+            return;
+        this.dragSnapToOrigin = dragSnapToOrigin;
+        this.handlers = handlers;
+        this.transformPagePoint = transformPagePoint;
+        const info = extractEventInfo(event);
+        const initialInfo = transformPoint(info, this.transformPagePoint);
+        const { point } = initialInfo;
+        const { timestamp } = frameData;
+        this.history = [{ ...point, timestamp }];
+        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", this.handlePointerUp));
+    }
+    updateHandlers(handlers) {
+        this.handlers = handlers;
+    }
+    end() {
+        this.removeListeners && this.removeListeners();
+        cancelFrame(this.updatePoint);
+    }
+}
+function transformPoint(info, transformPagePoint) {
+    return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
+}
+function subtractPoint(a, b) {
+    return { x: a.x - b.x, y: a.y - b.y };
+}
+function getPanInfo({ point }, history) {
+    return {
+        point,
+        delta: subtractPoint(point, lastDevicePoint(history)),
+        offset: subtractPoint(point, startDevicePoint(history)),
+        velocity: getVelocity(history, 0.1),
+    };
+}
+function startDevicePoint(history) {
+    return history[0];
+}
+function lastDevicePoint(history) {
+    return history[history.length - 1];
+}
+function getVelocity(history, timeDelta) {
+    if (history.length < 2) {
+        return { x: 0, y: 0 };
+    }
+    let i = history.length - 1;
+    let timestampedPoint = null;
+    const lastPoint = lastDevicePoint(history);
+    while (i >= 0) {
+        timestampedPoint = history[i];
+        if (lastPoint.timestamp - timestampedPoint.timestamp >
+            secondsToMilliseconds(timeDelta)) {
+            break;
+        }
+        i--;
+    }
+    if (!timestampedPoint) {
+        return { x: 0, y: 0 };
+    }
+    const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
+    if (time === 0) {
+        return { x: 0, y: 0 };
+    }
+    const currentVelocity = {
+        x: (lastPoint.x - timestampedPoint.x) / time,
+        y: (lastPoint.y - timestampedPoint.y) / time,
+    };
+    if (currentVelocity.x === Infinity) {
+        currentVelocity.x = 0;
+    }
+    if (currentVelocity.y === Infinity) {
+        currentVelocity.y = 0;
+    }
+    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) { }
+    }
+}
+
+/**
+ * Apply constraints to a point. These constraints are both physical along an
+ * axis, and an elastic factor that determines how much to constrain the point
+ * by if it does lie outside the defined parameters.
+ */
+function applyConstraints(point, { min, max }, elastic) {
+    if (min !== undefined && point < min) {
+        // If we have a min point defined, and this is outside of that, constrain
+        point = elastic
+            ? mixNumber$1(min, point, elastic.min)
+            : Math.max(point, min);
+    }
+    else if (max !== undefined && point > max) {
+        // If we have a max point defined, and this is outside of that, constrain
+        point = elastic
+            ? mixNumber$1(max, point, elastic.max)
+            : Math.min(point, max);
+    }
+    return point;
+}
+/**
+ * Calculate constraints in terms of the viewport when defined relatively to the
+ * measured axis. This is measured from the nearest edge, so a max constraint of 200
+ * on an axis with a max value of 300 would return a constraint of 500 - axis length
+ */
+function calcRelativeAxisConstraints(axis, min, max) {
+    return {
+        min: min !== undefined ? axis.min + min : undefined,
+        max: max !== undefined
+            ? axis.max + max - (axis.max - axis.min)
+            : undefined,
+    };
+}
+/**
+ * Calculate constraints in terms of the viewport when
+ * defined relatively to the measured bounding box.
+ */
+function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
+    return {
+        x: calcRelativeAxisConstraints(layoutBox.x, left, right),
+        y: calcRelativeAxisConstraints(layoutBox.y, top, bottom),
+    };
+}
+/**
+ * Calculate viewport constraints when defined as another viewport-relative axis
+ */
+function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
+    let min = constraintsAxis.min - layoutAxis.min;
+    let max = constraintsAxis.max - layoutAxis.max;
+    // If the constraints axis is actually smaller than the layout axis then we can
+    // flip the constraints
+    if (constraintsAxis.max - constraintsAxis.min <
+        layoutAxis.max - layoutAxis.min) {
+        [min, max] = [max, min];
+    }
+    return { min, max };
+}
+/**
+ * Calculate viewport constraints when defined as another viewport-relative box
+ */
+function calcViewportConstraints(layoutBox, constraintsBox) {
+    return {
+        x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
+        y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y),
+    };
+}
+/**
+ * Calculate a transform origin relative to the source axis, between 0-1, that results
+ * in an asthetically pleasing scale/transform needed to project from source to target.
+ */
+function calcOrigin$1(source, target) {
+    let origin = 0.5;
+    const sourceLength = calcLength(source);
+    const targetLength = calcLength(target);
+    if (targetLength > sourceLength) {
+        origin = progress(target.min, target.max - sourceLength, source.min);
+    }
+    else if (sourceLength > targetLength) {
+        origin = progress(source.min, source.max - targetLength, target.min);
+    }
+    return clamp(0, 1, origin);
+}
+/**
+ * Rebase the calculated viewport constraints relative to the layout.min point.
+ */
+function rebaseAxisConstraints(layout, constraints) {
+    const relativeConstraints = {};
+    if (constraints.min !== undefined) {
+        relativeConstraints.min = constraints.min - layout.min;
+    }
+    if (constraints.max !== undefined) {
+        relativeConstraints.max = constraints.max - layout.min;
+    }
+    return relativeConstraints;
+}
+const defaultElastic = 0.35;
+/**
+ * Accepts a dragElastic prop and returns resolved elastic values for each axis.
+ */
+function resolveDragElastic(dragElastic = defaultElastic) {
+    if (dragElastic === false) {
+        dragElastic = 0;
+    }
+    else if (dragElastic === true) {
+        dragElastic = defaultElastic;
+    }
+    return {
+        x: resolveAxisElastic(dragElastic, "left", "right"),
+        y: resolveAxisElastic(dragElastic, "top", "bottom"),
+    };
+}
+function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
+    return {
+        min: resolvePointElastic(dragElastic, minLabel),
+        max: resolvePointElastic(dragElastic, maxLabel),
+    };
+}
+function resolvePointElastic(dragElastic, label) {
+    return typeof dragElastic === "number"
+        ? dragElastic
+        : dragElastic[label] || 0;
+}
 
 const elementDragControls = new WeakMap();
 /**
@@ -5261,7 +5316,6 @@ class VisualElementDragControls {
         }, {
             transformPagePoint: this.visualElement.getTransformPagePoint(),
             dragSnapToOrigin,
-            contextWindow: getContextWindow(this.visualElement),
         });
     }
     stop(event, info) {
@@ -5627,7 +5681,6 @@ class PanGesture extends Feature {
     onPointerDown(pointerDownEvent) {
         this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), {
             transformPagePoint: this.node.getTransformPagePoint(),
-            contextWindow: getContextWindow(this.node),
         });
     }
     createPanHandlers() {
@@ -9264,7 +9317,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)) {