framer-motion 12.22.0 → 12.23.0

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-Dr1Bf9gl.js');
+var create = require('./create-C-c1JfhA.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-Dr1Bf9gl.js → create-C-c1JfhA.js}

@@ -4607,6 +4607,14 @@ class VisualElementDragControls {
          * The per-axis resolved elastic values.
          */
         this.elastic = createBox();
+        /**
+         * The latest pointer event. Used as fallback when the `cancel` and `stop` functions are called without arguments.
+         */
+        this.latestPointerEvent = null;
+        /**
+         * The latest pan info. Used as fallback when the `cancel` and `stop` functions are called without arguments.
+         */
+        this.latestPanInfo = null;
         this.visualElement = visualElement;
     }
     start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
@@ -4636,6 +4644,8 @@ class VisualElementDragControls {
                 if (!this.openDragLock)
                     return;
             }
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
             this.isDragging = true;
             this.currentDirection = null;
             this.resolveConstraints();
@@ -4672,7 +4682,8 @@ class VisualElementDragControls {
             animationState && animationState.setActive("whileDrag", true);
         };
         const onMove = (event, info) => {
-            // latestPointerEvent = event
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
             const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
             // If we didn't successfully receive the gesture lock, early return.
             if (!dragPropagation && !this.openDragLock)
@@ -4703,7 +4714,13 @@ class VisualElementDragControls {
              */
             onDrag && onDrag(event, info);
         };
-        const onSessionEnd = (event, info) => this.stop(event, info);
+        const onSessionEnd = (event, info) => {
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
+            this.stop(event, info);
+            this.latestPointerEvent = null;
+            this.latestPanInfo = null;
+        };
         const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
             this.getAxisMotionValue(axis).animation?.play());
         const { dragSnapToOrigin } = this.getProps();
@@ -4720,18 +4737,26 @@ class VisualElementDragControls {
             contextWindow: getContextWindow(this.visualElement),
         });
     }
-    stop(event, info) {
+    /**
+     * @internal
+     */
+    stop(event, panInfo) {
+        const finalEvent = event || this.latestPointerEvent;
+        const finalPanInfo = panInfo || this.latestPanInfo;
         const isDragging = this.isDragging;
         this.cancel();
-        if (!isDragging)
+        if (!isDragging || !finalPanInfo || !finalEvent)
             return;
-        const { velocity } = info;
+        const { velocity } = finalPanInfo;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
         if (onDragEnd) {
-            motionDom.frame.postRender(() => onDragEnd(event, info));
+            motionDom.frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
         }
     }
+    /**
+     * @internal
+     */
     cancel() {
         this.isDragging = false;
         const { projection, animationState } = this.visualElement;

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-Dr1Bf9gl.js');
+var create = require('./create-C-c1JfhA.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -2309,6 +2309,34 @@ class DragControls {
             controls.start(event.nativeEvent || event, options);
         });
     }
+    /**
+     * Cancels a drag gesture.
+     *
+     * ```jsx
+     * dragControls.cancel()
+     * ```
+     *
+     * @public
+     */
+    cancel() {
+        this.componentControls.forEach((controls) => {
+            controls.cancel();
+        });
+    }
+    /**
+     * Stops a drag gesture.
+     *
+     * ```jsx
+     * dragControls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop() {
+        this.componentControls.forEach((controls) => {
+            controls.stop();
+        });
+    }
 }
 const createDragControls = () => new DragControls();
 /**

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

@@ -31,6 +31,14 @@ class VisualElementDragControls {
          * The per-axis resolved elastic values.
          */
         this.elastic = createBox();
+        /**
+         * The latest pointer event. Used as fallback when the `cancel` and `stop` functions are called without arguments.
+         */
+        this.latestPointerEvent = null;
+        /**
+         * The latest pan info. Used as fallback when the `cancel` and `stop` functions are called without arguments.
+         */
+        this.latestPanInfo = null;
         this.visualElement = visualElement;
     }
     start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
@@ -60,6 +68,8 @@ class VisualElementDragControls {
                 if (!this.openDragLock)
                     return;
             }
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
             this.isDragging = true;
             this.currentDirection = null;
             this.resolveConstraints();
@@ -96,7 +106,8 @@ class VisualElementDragControls {
             animationState && animationState.setActive("whileDrag", true);
         };
         const onMove = (event, info) => {
-            // latestPointerEvent = event
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
             const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
             // If we didn't successfully receive the gesture lock, early return.
             if (!dragPropagation && !this.openDragLock)
@@ -127,7 +138,13 @@ class VisualElementDragControls {
              */
             onDrag && onDrag(event, info);
         };
-        const onSessionEnd = (event, info) => this.stop(event, info);
+        const onSessionEnd = (event, info) => {
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
+            this.stop(event, info);
+            this.latestPointerEvent = null;
+            this.latestPanInfo = null;
+        };
         const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
             this.getAxisMotionValue(axis).animation?.play());
         const { dragSnapToOrigin } = this.getProps();
@@ -144,18 +161,26 @@ class VisualElementDragControls {
             contextWindow: getContextWindow(this.visualElement),
         });
     }
-    stop(event, info) {
+    /**
+     * @internal
+     */
+    stop(event, panInfo) {
+        const finalEvent = event || this.latestPointerEvent;
+        const finalPanInfo = panInfo || this.latestPanInfo;
         const isDragging = this.isDragging;
         this.cancel();
-        if (!isDragging)
+        if (!isDragging || !finalPanInfo || !finalEvent)
             return;
-        const { velocity } = info;
+        const { velocity } = finalPanInfo;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
         if (onDragEnd) {
-            frame.postRender(() => onDragEnd(event, info));
+            frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
         }
     }
+    /**
+     * @internal
+     */
     cancel() {
         this.isDragging = false;
         const { projection, animationState } = this.visualElement;

package/dist/es/gestures/drag/use-drag-controls.mjs

@@ -53,6 +53,34 @@ class DragControls {
             controls.start(event.nativeEvent || event, options);
         });
     }
+    /**
+     * Cancels a drag gesture.
+     *
+     * ```jsx
+     * dragControls.cancel()
+     * ```
+     *
+     * @public
+     */
+    cancel() {
+        this.componentControls.forEach((controls) => {
+            controls.cancel();
+        });
+    }
+    /**
+     * Stops a drag gesture.
+     *
+     * ```jsx
+     * dragControls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop() {
+        this.componentControls.forEach((controls) => {
+            controls.stop();
+        });
+    }
 }
 const createDragControls = () => new DragControls();
 /**

package/dist/framer-motion.dev.js

@@ -10105,6 +10105,14 @@
              * The per-axis resolved elastic values.
              */
             this.elastic = createBox();
+            /**
+             * The latest pointer event. Used as fallback when the `cancel` and `stop` functions are called without arguments.
+             */
+            this.latestPointerEvent = null;
+            /**
+             * The latest pan info. Used as fallback when the `cancel` and `stop` functions are called without arguments.
+             */
+            this.latestPanInfo = null;
             this.visualElement = visualElement;
         }
         start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
@@ -10134,6 +10142,8 @@
                     if (!this.openDragLock)
                         return;
                 }
+                this.latestPointerEvent = event;
+                this.latestPanInfo = info;
                 this.isDragging = true;
                 this.currentDirection = null;
                 this.resolveConstraints();
@@ -10170,7 +10180,8 @@
                 animationState && animationState.setActive("whileDrag", true);
             };
             const onMove = (event, info) => {
-                // latestPointerEvent = event
+                this.latestPointerEvent = event;
+                this.latestPanInfo = info;
                 const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps();
                 // If we didn't successfully receive the gesture lock, early return.
                 if (!dragPropagation && !this.openDragLock)
@@ -10201,7 +10212,13 @@
                  */
                 onDrag && onDrag(event, info);
             };
-            const onSessionEnd = (event, info) => this.stop(event, info);
+            const onSessionEnd = (event, info) => {
+                this.latestPointerEvent = event;
+                this.latestPanInfo = info;
+                this.stop(event, info);
+                this.latestPointerEvent = null;
+                this.latestPanInfo = null;
+            };
             const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
                 this.getAxisMotionValue(axis).animation?.play());
             const { dragSnapToOrigin } = this.getProps();
@@ -10218,18 +10235,26 @@
                 contextWindow: getContextWindow(this.visualElement),
             });
         }
-        stop(event, info) {
+        /**
+         * @internal
+         */
+        stop(event, panInfo) {
+            const finalEvent = event || this.latestPointerEvent;
+            const finalPanInfo = panInfo || this.latestPanInfo;
             const isDragging = this.isDragging;
             this.cancel();
-            if (!isDragging)
+            if (!isDragging || !finalPanInfo || !finalEvent)
                 return;
-            const { velocity } = info;
+            const { velocity } = finalPanInfo;
             this.startAnimation(velocity);
             const { onDragEnd } = this.getProps();
             if (onDragEnd) {
-                frame.postRender(() => onDragEnd(event, info));
+                frame.postRender(() => onDragEnd(finalEvent, finalPanInfo));
             }
         }
+        /**
+         * @internal
+         */
         cancel() {
             this.isDragging = false;
             const { projection, animationState } = this.visualElement;
@@ -13449,6 +13474,34 @@
                 controls.start(event.nativeEvent || event, options);
             });
         }
+        /**
+         * Cancels a drag gesture.
+         *
+         * ```jsx
+         * dragControls.cancel()
+         * ```
+         *
+         * @public
+         */
+        cancel() {
+            this.componentControls.forEach((controls) => {
+                controls.cancel();
+            });
+        }
+        /**
+         * Stops a drag gesture.
+         *
+         * ```jsx
+         * dragControls.stop()
+         * ```
+         *
+         * @public
+         */
+        stop() {
+            this.componentControls.forEach((controls) => {
+                controls.stop();
+            });
+        }
     }
     const createDragControls = () => new DragControls();
     /**