framer-motion 12.22.0 → 12.23.1

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/dom-mini.js

@@ -205,7 +205,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
@@ -343,7 +343,7 @@ const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/cjs/dom.js

@@ -205,7 +205,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
@@ -1781,7 +1781,7 @@ function animateSubject(subject, keyframes, options, scope) {
     else {
         const subjects = resolveSubjects(subject, keyframes, scope);
         const numSubjects = subjects.length;
-        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.");
+        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
         for (let i = 0; i < numSubjects; i++) {
             const thisSubject = subjects[i];
             const createVisualElement = thisSubject instanceof Element
@@ -1849,7 +1849,7 @@ const animate = createScopedAnimate();
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

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');
 
@@ -723,7 +723,7 @@ function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag,
         y: useDefaultMotionValue(style.y),
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-    motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    motionUtils.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
     const { axis, registerItem, updateOrder } = context;
     return (jsxRuntime.jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
             const { velocity } = gesturePoint;
@@ -940,7 +940,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
@@ -1167,7 +1167,7 @@ function animateSubject(subject, keyframes, options, scope) {
     else {
         const subjects = resolveSubjects(subject, keyframes, scope);
         const numSubjects = subjects.length;
-        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.");
+        motionUtils.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
         for (let i = 0; i < numSubjects; i++) {
             const thisSubject = subjects[i];
             const createVisualElement = thisSubject instanceof Element
@@ -1235,7 +1235,7 @@ const animate = createScopedAnimate();
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *
@@ -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/cjs/mini.js

@@ -28,7 +28,7 @@ function useUnmountEffect(callback) {
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    motionUtils.invariant(Boolean(numElements), "No valid element provided.");
+    motionUtils.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/es/animation/animate/subject.mjs

@@ -25,7 +25,7 @@ function animateSubject(subject, keyframes, options, scope) {
     else {
         const subjects = resolveSubjects(subject, keyframes, scope);
         const numSubjects = subjects.length;
-        invariant(Boolean(numSubjects), "No valid elements provided.");
+        invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
         for (let i = 0; i < numSubjects; i++) {
             const thisSubject = subjects[i];
             const createVisualElement = thisSubject instanceof Element

package/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -4,7 +4,7 @@ import { invariant, secondsToMilliseconds } from 'motion-utils';
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
-    invariant(Boolean(numElements), "No valid element provided.");
+    invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
     /**
      * WAAPI doesn't support interrupting animations.
      *

package/dist/es/animation/sequence/create.mjs

@@ -111,7 +111,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Handle repeat options
              */
             if (repeat) {
-                invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                 duration = calculateRepeatDuration(duration, repeat);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];

package/dist/es/components/Reorder/Item.mjs

@@ -20,7 +20,7 @@ function ReorderItemComponent({ children, style = {}, value, as = "li", onDrag,
         y: useDefaultMotionValue(style.y),
     };
     const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-    invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+    invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
     const { axis, registerItem, updateOrder } = context;
     return (jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
             const { velocity } = gesturePoint;

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

@@ -114,14 +114,19 @@
     exports.warning = () => { };
     exports.invariant = () => { };
     {
-        exports.warning = (check, message) => {
+        const formatMessage = (message, errorCode) => {
+            return errorCode
+                ? `${message}. For more information and steps for solving, visit https://motion.dev/error/${errorCode}`
+                : message;
+        };
+        exports.warning = (check, message, errorCode) => {
             if (!check && typeof console !== "undefined") {
-                console.warn(message);
+                console.warn(formatMessage(message, errorCode));
             }
         };
-        exports.invariant = (check, message) => {
+        exports.invariant = (check, message, errorCode) => {
             if (!check) {
-                throw new Error(message);
+                throw new Error(formatMessage(message, errorCode));
             }
         };
     }
@@ -1712,7 +1717,7 @@
             let { keyframes: keyframes$1 } = options;
             const generatorFactory = type || keyframes;
             if (generatorFactory !== keyframes) {
-                exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
+                exports.invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, "spring-two-frames");
             }
             if (generatorFactory !== keyframes &&
                 typeof keyframes$1[0] !== "number") {
@@ -10105,6 +10110,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 +10147,8 @@
                     if (!this.openDragLock)
                         return;
                 }
+                this.latestPointerEvent = event;
+                this.latestPanInfo = info;
                 this.isDragging = true;
                 this.currentDirection = null;
                 this.resolveConstraints();
@@ -10170,7 +10185,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 +10217,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 +10240,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;
@@ -11863,7 +11893,7 @@
             y: useDefaultMotionValue(style.y),
         };
         const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
-        exports.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group");
+        exports.invariant(Boolean(context), "Reorder.Item must be a child of Reorder.Group", "reorder-item-child");
         const { axis, registerItem, updateOrder } = context;
         return (jsx(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
                 const { velocity } = gesturePoint;
@@ -12080,7 +12110,7 @@
                  * Handle repeat options
                  */
                 if (repeat) {
-                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                    exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
                     duration = calculateRepeatDuration(duration, repeat);
                     const originalKeyframes = [...valueKeyframesAsList];
                     const originalTimes = [...times];
@@ -12307,7 +12337,7 @@
         else {
             const subjects = resolveSubjects(subject, keyframes, scope);
             const numSubjects = subjects.length;
-            exports.invariant(Boolean(numSubjects), "No valid elements provided.");
+            exports.invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
             for (let i = 0; i < numSubjects; i++) {
                 const thisSubject = subjects[i];
                 const createVisualElement = thisSubject instanceof Element
@@ -12375,7 +12405,7 @@
     function animateElements(elementOrSelector, keyframes, options, scope) {
         const elements = resolveElements(elementOrSelector, scope);
         const numElements = elements.length;
-        exports.invariant(Boolean(numElements), "No valid element provided.");
+        exports.invariant(Boolean(numElements), "No valid elements provided.", "no-valid-elements");
         /**
          * WAAPI doesn't support interrupting animations.
          *
@@ -13449,6 +13479,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();
     /**