framer-motion 12.24.11 → 12.24.12

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var featureBundle = require('./feature-bundle-OJqyiRBo.js');
+var featureBundle = require('./feature-bundle-W9TOG4_M.js');
 require('react');
 require('motion-dom');
 require('motion-utils');

package/dist/cjs/{feature-bundle-OJqyiRBo.js → feature-bundle-W9TOG4_M.js}

@@ -3494,7 +3494,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
     return newValues;
 }
 
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
     return window.getComputedStyle(element);
 }
 class HTMLVisualElement extends DOMVisualElement {
@@ -3510,7 +3510,7 @@ class HTMLVisualElement extends DOMVisualElement {
                 : motionDom.readTransformValue(instance, key);
         }
         else {
-            const computedStyle = getComputedStyle(instance);
+            const computedStyle = getComputedStyle$1(instance);
             const value = (motionDom.isCSSVariableName(key)
                 ? computedStyle.getPropertyValue(key)
                 : computedStyle[key]) || 0;
@@ -5105,11 +5105,12 @@ function distance2D(a, b) {
     return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
 
+const overflowStyles = /*#__PURE__*/ new Set(["auto", "scroll"]);
 /**
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, element, } = {}) {
         /**
          * @internal
          */
@@ -5130,6 +5131,22 @@ class PanSession {
          * @internal
          */
         this.contextWindow = window;
+        /**
+         * Scroll positions of scrollable ancestors and window.
+         * @internal
+         */
+        this.scrollPositions = new Map();
+        /**
+         * Cleanup function for scroll listeners.
+         * @internal
+         */
+        this.removeScrollListeners = null;
+        this.onElementScroll = (event) => {
+            this.handleScroll(event.target);
+        };
+        this.onWindowScroll = () => {
+            this.handleScroll(window);
+        };
         this.updatePoint = () => {
             if (!(this.lastMoveEvent && this.lastMoveEventInfo))
                 return;
@@ -5192,12 +5209,93 @@ class PanSession {
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
         this.removeListeners = motionUtils.pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+        // Start scroll tracking if element provided
+        if (element) {
+            this.startScrollTracking(element);
+        }
+    }
+    /**
+     * Start tracking scroll on ancestors and window.
+     */
+    startScrollTracking(element) {
+        // Store initial scroll positions for scrollable ancestors
+        let current = element.parentElement;
+        while (current) {
+            const style = getComputedStyle(current);
+            if (overflowStyles.has(style.overflowX) ||
+                overflowStyles.has(style.overflowY)) {
+                this.scrollPositions.set(current, {
+                    x: current.scrollLeft,
+                    y: current.scrollTop,
+                });
+            }
+            current = current.parentElement;
+        }
+        // Track window scroll
+        this.scrollPositions.set(window, {
+            x: window.scrollX,
+            y: window.scrollY,
+        });
+        // Capture listener catches element scroll events as they bubble
+        window.addEventListener("scroll", this.onElementScroll, {
+            capture: true,
+            passive: true,
+        });
+        // Direct window scroll listener (window scroll doesn't bubble)
+        window.addEventListener("scroll", this.onWindowScroll, {
+            passive: true,
+        });
+        this.removeScrollListeners = () => {
+            window.removeEventListener("scroll", this.onElementScroll, {
+                capture: true,
+            });
+            window.removeEventListener("scroll", this.onWindowScroll);
+        };
+    }
+    /**
+     * Handle scroll compensation during drag.
+     *
+     * For element scroll: adjusts history origin since pageX/pageY doesn't change.
+     * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
+     */
+    handleScroll(target) {
+        const initial = this.scrollPositions.get(target);
+        if (!initial)
+            return;
+        const isWindow = target === window;
+        const current = isWindow
+            ? { x: window.scrollX, y: window.scrollY }
+            : {
+                x: target.scrollLeft,
+                y: target.scrollTop,
+            };
+        const delta = { x: current.x - initial.x, y: current.y - initial.y };
+        if (delta.x === 0 && delta.y === 0)
+            return;
+        if (isWindow) {
+            // Window scroll: pageX/pageY changes, so update lastMoveEventInfo
+            if (this.lastMoveEventInfo) {
+                this.lastMoveEventInfo.point.x += delta.x;
+                this.lastMoveEventInfo.point.y += delta.y;
+            }
+        }
+        else {
+            // Element scroll: pageX/pageY unchanged, so adjust history origin
+            if (this.history.length > 0) {
+                this.history[0].x -= delta.x;
+                this.history[0].y -= delta.y;
+            }
+        }
+        this.scrollPositions.set(target, current);
+        motionDom.frame.update(this.updatePoint, true);
     }
     updateHandlers(handlers) {
         this.handlers = handlers;
     }
     end() {
         this.removeListeners && this.removeListeners();
+        this.removeScrollListeners && this.removeScrollListeners();
+        this.scrollPositions.clear();
         motionDom.cancelFrame(this.updatePoint);
     }
 }
@@ -5529,6 +5627,7 @@ class VisualElementDragControls {
             dragSnapToOrigin,
             distanceThreshold,
             contextWindow: getContextWindow(this.visualElement),
+            element: this.visualElement.current,
         });
     }
     /**
@@ -6360,4 +6459,4 @@ exports.useIsPresent = useIsPresent;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.usePresence = usePresence;
 exports.visualElementStore = visualElementStore;
-//# sourceMappingURL=feature-bundle-OJqyiRBo.js.map
+//# sourceMappingURL=feature-bundle-W9TOG4_M.js.map