framer-motion 12.20.5 → 12.23.0

package/dist/cjs/client.js

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

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

@@ -3764,7 +3764,7 @@ function animateVariant(visualElement, variant, options = {}) {
     const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
         ? (forwardDelay = 0) => {
             const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
-            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
+            return animateChildren(visualElement, variant, forwardDelay, delayChildren, staggerChildren, staggerDirection, options);
         }
         : () => Promise.resolve();
     /**
@@ -3782,19 +3782,26 @@ function animateVariant(visualElement, variant, options = {}) {
         return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
     }
 }
-function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
+function animateChildren(visualElement, variant, delay = 0, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
     const animations = [];
-    const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
-    const generateStaggerDuration = staggerDirection === 1
-        ? (i = 0) => i * staggerChildren
-        : (i = 0) => maxStaggerDuration - i * staggerChildren;
+    const numChildren = visualElement.variantChildren.size;
+    const maxStaggerDuration = (numChildren - 1) * staggerChildren;
+    const delayIsFunction = typeof delayChildren === "function";
+    const generateStaggerDuration = delayIsFunction
+        ? (i) => delayChildren(i, numChildren)
+        : // Support deprecated staggerChildren
+            staggerDirection === 1
+                ? (i = 0) => i * staggerChildren
+                : (i = 0) => maxStaggerDuration - i * staggerChildren;
     Array.from(visualElement.variantChildren)
         .sort(sortByTreeOrder)
         .forEach((child, i) => {
         child.notify("AnimationStart", variant);
         animations.push(animateVariant(child, variant, {
             ...options,
-            delay: delayChildren + generateStaggerDuration(i),
+            delay: delay +
+                (delayIsFunction ? 0 : delayChildren) +
+                generateStaggerDuration(i),
         }).then(() => child.notify("AnimationComplete", variant)));
     });
     return Promise.all(animations);
@@ -4317,7 +4324,7 @@ function distance2D(a, b) {
  * @internal
  */
 class PanSession {
-    constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false, } = {}) {
+    constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, } = {}) {
         /**
          * @internal
          */
@@ -4345,8 +4352,8 @@ class PanSession {
             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;
+            // on the first update to avoid visual snapping to the cursor.
+            const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
             if (!isPanStarted && !isDistancePastThreshold)
                 return;
             const { point } = info;
@@ -4386,6 +4393,7 @@ class PanSession {
         this.dragSnapToOrigin = dragSnapToOrigin;
         this.handlers = handlers;
         this.transformPagePoint = transformPagePoint;
+        this.distanceThreshold = distanceThreshold;
         this.contextWindow = contextWindow || window;
         const info = extractEventInfo(event);
         const initialInfo = transformPoint(info, this.transformPagePoint);
@@ -4584,10 +4592,6 @@ function resolvePointElastic(dragElastic, label) {
 }
 
 const elementDragControls = new WeakMap();
-/**
- *
- */
-// let latestPointerEvent: PointerEvent
 class VisualElementDragControls {
     constructor(visualElement) {
         this.openDragLock = null;
@@ -4603,9 +4607,17 @@ 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 } = {}) {
+    start(originEvent, { snapToCursor = false, distanceThreshold } = {}) {
         /**
          * Don't start dragging if this component is exiting
          */
@@ -4632,6 +4644,8 @@ class VisualElementDragControls {
                 if (!this.openDragLock)
                     return;
             }
+            this.latestPointerEvent = event;
+            this.latestPanInfo = info;
             this.isDragging = true;
             this.currentDirection = null;
             this.resolveConstraints();
@@ -4668,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)
@@ -4699,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();
@@ -4712,21 +4733,30 @@ class VisualElementDragControls {
         }, {
             transformPagePoint: this.visualElement.getTransformPagePoint(),
             dragSnapToOrigin,
+            distanceThreshold,
             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.js

@@ -2421,29 +2421,6 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     return () => observer.disconnect();
 }
 
-function getOriginIndex(from, total) {
-    if (from === "first") {
-        return 0;
-    }
-    else {
-        const lastIndex = total - 1;
-        return from === "last" ? lastIndex : lastIndex / 2;
-    }
-}
-function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
-    return (i, total) => {
-        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-        const distance = Math.abs(fromIndex - i);
-        let delay = duration * distance;
-        if (ease) {
-            const maxDelay = total * duration;
-            const easingFunction = motionUtils.easingDefinitionToFunction(ease);
-            delay = easingFunction(delay / maxDelay) * maxDelay;
-        }
-        return startDelay + delay;
-    };
-}
-
 /**
  * Timeout defined in ms
  */
@@ -2480,7 +2457,6 @@ exports.distance2D = distance2D;
 exports.inView = inView;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
-exports.stagger = stagger;
 Object.keys(motionDom).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,

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-BOq2yHIj.js');
+var create = require('./create-C-c1JfhA.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -1807,29 +1807,6 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     return () => observer.disconnect();
 }
 
-function getOriginIndex(from, total) {
-    if (from === "first") {
-        return 0;
-    }
-    else {
-        const lastIndex = total - 1;
-        return from === "last" ? lastIndex : lastIndex / 2;
-    }
-}
-function stagger(duration = 0.1, { startDelay = 0, from = 0, ease } = {}) {
-    return (i, total) => {
-        const fromIndex = typeof from === "number" ? from : getOriginIndex(from, total);
-        const distance = Math.abs(fromIndex - i);
-        let delay = duration * distance;
-        if (ease) {
-            const maxDelay = total * duration;
-            const easingFunction = motionUtils.easingDefinitionToFunction(ease);
-            delay = easingFunction(delay / maxDelay) * maxDelay;
-        }
-        return startDelay + delay;
-    };
-}
-
 const createMinimalMotionComponent = 
 /*@__PURE__*/ create.createMotionComponentFactory();
 
@@ -2332,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();
 /**
@@ -2887,7 +2892,6 @@ exports.m = m;
 exports.motion = motion;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
-exports.stagger = stagger;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimate = useAnimate;

package/dist/dom.d.ts

@@ -1,4 +1,4 @@
-import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnyResolvedKeyframe, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls, DynamicOption } from 'motion-dom';
+import { UnresolvedValueKeyframe, MotionValue, Transition, ElementOrSelector, DOMKeyframesDefinition, AnimationOptions, AnimationPlaybackOptions, AnyResolvedKeyframe, AnimationScope, AnimationPlaybackControlsWithThen, ValueAnimationTransition, AnimationPlaybackControls } from 'motion-dom';
 export * from 'motion-dom';
 import { Easing, EasingFunction, Point } from 'motion-utils';
 export * from 'motion-utils';
@@ -142,18 +142,10 @@ interface InViewOptions {
 }
 declare function inView(elementOrSelector: ElementOrSelector, onStart: (element: Element, entry: IntersectionObserverEntry) => void | ViewChangeHandler, { root, margin: rootMargin, amount }?: InViewOptions): VoidFunction;
 
-type StaggerOrigin = "first" | "last" | "center" | number;
-type StaggerOptions = {
-    startDelay?: number;
-    from?: StaggerOrigin;
-    ease?: Easing;
-};
-declare function stagger(duration?: number, { startDelay, from, ease }?: StaggerOptions): DynamicOption<number>;
-
 type DelayedFunction = (overshoot: number) => void;
 declare function delayInSeconds(callback: DelayedFunction, timeout: number): () => void;
 
 declare const distance: (a: number, b: number) => number;
 declare function distance2D(a: Point, b: Point): number;
 
-export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type ValueSequence, animate, animateMini, createScopedAnimate, delayInSeconds as delay, distance, distance2D, inView, scroll, scrollInfo, stagger };
+export { type AbsoluteKeyframe, type AnimationSequence, type At, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type ValueSequence, animate, animateMini, createScopedAnimate, delayInSeconds as delay, distance, distance2D, inView, scroll, scrollInfo };