framer-motion 12.6.2 → 12.6.3

package/dist/cjs/dom.js

@@ -279,9 +279,17 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
             const easing = motionDom.generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
             return calculatedDuration + "ms " + easing;
         },
+        toTransition: () => { },
     };
     return generator;
 }
+spring.applyToOptions = (options) => {
+    const generatorOptions = motionDom.createGeneratorEasing(options, 100, spring);
+    options.ease = motionDom.supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
+    options.type = "keyframes";
+    return options;
+};
 
 const wrap = (min, max, v) => {
     const rangeSize = max - min;
@@ -365,7 +373,6 @@ function calculateRepeatDuration(duration, repeat, _repeatDelay) {
  * calculate an absolute time for the next keyframes.
  */
 function calcNextTime(current, next, prev, labels) {
-    var _a;
     if (typeof next === "number") {
         return next;
     }
@@ -376,7 +383,7 @@ function calcNextTime(current, next, prev, labels) {
         return prev;
     }
     else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+        return labels.get(next) ?? current;
     }
 }
 
@@ -489,7 +496,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = motionDom.isGenerator(type)
                 ? type
-                : generators === null || generators === void 0 ? void 0 : generators[type];
+                : generators?.[type];
             if (numKeyframes <= 2 && createGenerator) {
                 /**
                  * As we're creating an easing function from a spring,
@@ -511,7 +518,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                 ease = springEasing.ease;
                 duration = springEasing.duration;
             }
-            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+            duration ?? (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
             /**
              * If there's only one time offset of 0, fill in a second with length 1
@@ -720,7 +727,7 @@ const resolveFinalValueInKeyframes = (v) => {
 
 function getValueState(visualElement) {
     const state = [{}, {}];
-    visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+    visualElement?.values.forEach((value, key) => {
         state[0][key] = value.get();
         state[1][key] = value.getVelocity();
     });
@@ -1052,11 +1059,10 @@ const color = {
 const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 
 function test(v) {
-    var _a, _b;
     return (isNaN(v) &&
         typeof v === "string" &&
-        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
-            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+        (v.match(floatRegex)?.length || 0) +
+            (v.match(colorRegex)?.length || 0) >
             0);
 }
 const NUMBER_TOKEN = "number";
@@ -1444,8 +1450,7 @@ function measureAllKeyframes() {
             const restore = transformsToRestore.get(element);
             if (restore) {
                 restore.forEach(([key, value]) => {
-                    var _a;
-                    (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
+                    element.getValue(key)?.set(value);
                 });
             }
         });
@@ -1532,7 +1537,7 @@ class KeyframeResolver {
                  * If the first keyframe is null, we need to find its value by sampling the element
                  */
                 if (i === 0) {
-                    const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
+                    const currentValue = motionValue?.get();
                     const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
                     if (currentValue !== undefined) {
                         unresolvedKeyframes[0] = currentValue;
@@ -1613,7 +1618,7 @@ function parseCSSVariable(current) {
     if (!match)
         return [,];
     const [, token1, token2, fallback] = match;
-    return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+    return [`--${token1 ?? token2}`, fallback];
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {
@@ -1752,7 +1757,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         }
     }
     measureEndState() {
-        var _a;
         const { element, name, unresolvedKeyframes } = this;
         if (!element || !element.current)
             return;
@@ -1765,7 +1769,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
             this.finalKeyframe = finalKeyframe;
         }
         // If we removed transform values, reapply them before the next render
-        if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.removedTransforms?.length) {
             this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
                 element
                     .getValue(unsetTransformName)
@@ -2121,13 +2125,12 @@ function mixObject(a, b) {
     };
 }
 function matchOrder(origin, target) {
-    var _a;
     const orderedOrigin = [];
     const pointers = { color: 0, var: 0, number: 0 };
     for (let i = 0; i < target.values.length; i++) {
         const type = target.types[i];
         const originIndex = origin.indexes[type][pointers[type]];
-        const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+        const originValue = origin.values[originIndex] ?? 0;
         orderedOrigin[i] = originValue;
         pointers[type]++;
     }
@@ -2354,7 +2357,7 @@ function convertOffsetToTimes(offset, duration) {
     return offset.map((o) => o * duration);
 }
 
-function defaultEasing$1(values, easing) {
+function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
 }
 function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
@@ -2385,7 +2388,7 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "e
     const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
         ease: Array.isArray(easingFunctions)
             ? easingFunctions
-            : defaultEasing$1(keyframeValues, easingFunctions),
+            : defaultEasing(keyframeValues, easingFunctions),
     });
     return {
         calculatedDuration: duration,
@@ -2467,7 +2470,7 @@ class MainThreadAnimation extends BaseAnimation {
             onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
-        const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
+        const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
         const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
         this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
         this.resolver.scheduleResolve();
@@ -2717,7 +2720,7 @@ class MainThreadAnimation extends BaseAnimation {
             this.startTime = now - this.holdTime;
         }
         else if (!this.startTime) {
-            this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+            this.startTime = startTime ?? this.calcStartTime();
         }
         else if (this.state === "finished") {
             this.startTime = now;
@@ -2735,13 +2738,12 @@ class MainThreadAnimation extends BaseAnimation {
         this.driver.start();
     }
     pause() {
-        var _a;
         if (!this._resolved) {
             this.pendingPlayState = "paused";
             return;
         }
         this.state = "paused";
-        this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
+        this.holdTime = this.currentTime ?? 0;
     }
     complete() {
         if (this.state !== "running") {
@@ -2782,6 +2784,9 @@ class MainThreadAnimation extends BaseAnimation {
         this.startTime = 0;
         return this.tick(time, true);
     }
+    get finished() {
+        return this.currentFinishedPromise;
+    }
 }
 
 /**
@@ -2797,35 +2802,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
-    const keyframeOptions = { [valueName]: keyframes };
-    if (times)
-        keyframeOptions.offset = times;
-    const easing = motionDom.mapEasingToNativeEasing(ease, duration);
-    /**
-     * If this is an easing array, apply to keyframes, not animation as a whole
-     */
-    if (Array.isArray(easing))
-        keyframeOptions.easing = easing;
-    if (motionDom.statsBuffer.value) {
-        motionDom.activeAnimations.waapi++;
-    }
-    const animation = element.animate(keyframeOptions, {
-        delay,
-        duration,
-        easing: !Array.isArray(easing) ? easing : "linear",
-        fill: "both",
-        iterations: repeat + 1,
-        direction: repeatType === "reverse" ? "alternate" : "normal",
-    });
-    if (motionDom.statsBuffer.value) {
-        animation.finished.finally(() => {
-            motionDom.activeAnimations.waapi--;
-        });
-    }
-    return animation;
-}
-
 const supportsWaapi = /*@__PURE__*/ motionUtils.memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 
 /**
@@ -2933,10 +2909,10 @@ class AcceleratedAnimation extends BaseAnimation {
             ease = pregeneratedAnimation.ease;
             type = "keyframes";
         }
-        const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
+        const animation = motionDom.startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
         // Override the browser calculated startTime with one synchronised to other JS
         // and WAAPI animations starting this event loop.
-        animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+        animation.startTime = startTime ?? this.calcStartTime();
         if (this.pendingTimeline) {
             motionDom.attachTimeline(animation, this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -2995,6 +2971,9 @@ class AcceleratedAnimation extends BaseAnimation {
         const { animation } = resolved;
         return animation.playbackRate;
     }
+    get finished() {
+        return this.resolved.animation.finished;
+    }
     set speed(newSpeed) {
         const { resolved } = this;
         if (!resolved)
@@ -3265,7 +3244,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             });
             // We still want to return some animation controls here rather
             // than returning undefined
-            return new motionDom.GroupPlaybackControls([]);
+            return new motionDom.GroupAnimationWithThen([]);
         }
     }
     /**
@@ -3293,7 +3272,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
     return shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
-    var _a;
     let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
     if (transitionOverride)
         transition = transitionOverride;
@@ -3302,7 +3280,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
         visualElement.animationState &&
         visualElement.animationState.getState()[type];
     for (const key in target) {
-        const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
+        const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
         const valueTarget = target[key];
         if (valueTarget === undefined ||
             (animationTypeState &&
@@ -3461,7 +3439,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                motionUtils.warnOnce(nextValue.version === "12.6.2", `Attempting to mix Motion versions ${nextValue.version} with 12.6.2 may not work as expected.`);
+                motionUtils.warnOnce(nextValue.version === "12.6.3", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -3885,10 +3863,10 @@ class VisualElement {
      * directly from the instance (which might have performance implications).
      */
     readValue(key, target) {
-        var _a;
         let value = this.latestValues[key] !== undefined || !this.current
             ? this.latestValues[key]
-            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
+            : this.getBaseTargetFromProps(this.props, key) ??
+                this.readValueFromInstance(this.current, key, this.options);
         if (value !== undefined && value !== null) {
             if (typeof value === "string" &&
                 (isNumericalString(value) || isZeroValueString(value))) {
@@ -3914,11 +3892,10 @@ class VisualElement {
      * props.
      */
     getBaseTarget(key) {
-        var _a;
         const { initial } = this.props;
         let valueFromInitial;
         if (typeof initial === "string" || typeof initial === "object") {
-            const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+            const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
             if (variant) {
                 valueFromInitial = variant[key];
             }
@@ -4285,7 +4262,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
 }
 
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    var _a;
     const { style } = props;
     const newValues = {};
     for (const key in style) {
@@ -4293,7 +4269,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             (prevProps.style &&
                 isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props) ||
-            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+            visualElement?.getValue(key)?.liveStyle !== undefined) {
             newValues[key] = style[key];
         }
     }
@@ -4572,7 +4548,7 @@ function createScopedAnimate(scope) {
         else {
             animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
         }
-        const animation = new motionDom.GroupPlaybackControls(animations);
+        const animation = new motionDom.GroupAnimationWithThen(animations);
         if (scope) {
             scope.animations.push(animation);
         }
@@ -4582,125 +4558,6 @@ function createScopedAnimate(scope) {
 }
 const animate = createScopedAnimate();
 
-function setCSSVar(element, name, value) {
-    element.style.setProperty(name, value);
-}
-function setStyle(element, name, value) {
-    element.style[name] = value;
-}
-
-const supportsPartialKeyframes = /*@__PURE__*/ motionUtils.memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-});
-
-const state = new WeakMap();
-function hydrateKeyframes(valueName, keyframes, read) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i === 0 ? read() : keyframes[i - 1];
-        }
-        if (typeof keyframes[i] === "number" &&
-            browserNumberValueTypes[valueName]) {
-            keyframes[i] = browserNumberValueTypes[valueName].transform(keyframes[i]);
-        }
-    }
-    if (!supportsPartialKeyframes() && keyframes.length < 2) {
-        keyframes.unshift(read());
-    }
-}
-const defaultEasing = "easeOut";
-function getElementAnimationState(element) {
-    const animationState = state.get(element) || new Map();
-    state.set(element, animationState);
-    return state.get(element);
-}
-class NativeAnimation extends motionDom.NativeAnimationControls {
-    constructor(element, valueName, valueKeyframes, options) {
-        const isCSSVar = valueName.startsWith("--");
-        motionUtils.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
-        const existingAnimation = getElementAnimationState(element).get(valueName);
-        existingAnimation && existingAnimation.stop();
-        const readInitialKeyframe = () => {
-            return valueName.startsWith("--")
-                ? element.style.getPropertyValue(valueName)
-                : window.getComputedStyle(element)[valueName];
-        };
-        if (!Array.isArray(valueKeyframes)) {
-            valueKeyframes = [valueKeyframes];
-        }
-        hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-        // TODO: Replace this with toString()?
-        if (motionDom.isGenerator(options.type)) {
-            const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
-            options.ease = motionDom.supportsLinearEasing()
-                ? generatorOptions.ease
-                : defaultEasing;
-            options.duration = motionUtils.secondsToMilliseconds(generatorOptions.duration);
-            options.type = "keyframes";
-        }
-        else {
-            options.ease = options.ease || defaultEasing;
-        }
-        const onFinish = () => {
-            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
-            this.cancel();
-            this.resolveFinishedPromise();
-        };
-        const init = () => {
-            this.setValue = isCSSVar ? setCSSVar : setStyle;
-            this.options = options;
-            this.updateFinishedPromise();
-            this.removeAnimation = () => {
-                const elementState = state.get(element);
-                elementState && elementState.delete(valueName);
-            };
-        };
-        if (!supportsWaapi()) {
-            super();
-            init();
-            onFinish();
-        }
-        else {
-            super(startWaapiAnimation(element, valueName, valueKeyframes, options));
-            init();
-            if (options.autoplay === false) {
-                this.animation.pause();
-            }
-            this.animation.onfinish = onFinish;
-            getElementAnimationState(element).set(valueName, this);
-        }
-    }
-    /**
-     * Allows the returned animation to be awaited or promise-chained. Currently
-     * resolves when the animation finishes at all but in a future update could/should
-     * reject if its cancels.
-     */
-    then(resolve, reject) {
-        return this.currentFinishedPromise.then(resolve, reject);
-    }
-    updateFinishedPromise() {
-        this.currentFinishedPromise = new Promise((resolve) => {
-            this.resolveFinishedPromise = resolve;
-        });
-    }
-    play() {
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
-        }
-        super.play();
-    }
-    cancel() {
-        this.removeAnimation();
-        super.cancel();
-    }
-}
-
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
@@ -4720,13 +4577,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...motionDom.getValueTransition(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? motionUtils.secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
+            animations.push(new motionDom.NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;
@@ -4734,7 +4593,7 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new motionDom.GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };
@@ -4773,8 +4632,7 @@ function getElementSize(target, borderBoxSize) {
     }
 }
 function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+    resizeHandlers.get(target)?.forEach((handler) => {
         handler({
             target,
             contentSize: contentRect,
@@ -4803,14 +4661,14 @@ function resizeElement(target, handler) {
             resizeHandlers.set(element, elementHandlers);
         }
         elementHandlers.add(handler);
-        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        observer?.observe(element);
     });
     return () => {
         elements.forEach((element) => {
             const elementHandlers = resizeHandlers.get(element);
-            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
-            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
-                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            elementHandlers?.delete(handler);
+            if (!elementHandlers?.size) {
+                observer?.unobserve(element);
             }
         });
     };
@@ -5189,7 +5047,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     const listener = scrollListeners.get(container);
     motionDom.frame.read(listener, false, true);
     return () => {
-        var _a;
         motionDom.cancelFrame(listener);
         /**
          * Check if we even have any handlers for this container.
@@ -5207,7 +5064,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         scrollListeners.delete(container);
         if (scrollListener) {
             getEventTarget(container).removeEventListener("scroll", scrollListener);
-            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            resizeListeners.get(container)?.();
             window.removeEventListener("resize", scrollListener);
         }
     };