framer-motion 12.6.2 → 12.6.3

package/dist/cjs/dom-mini.js

@@ -87,7 +87,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;
     }
@@ -98,7 +97,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;
     }
 }
 
@@ -211,7 +210,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,
@@ -233,7 +232,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
@@ -392,212 +391,6 @@ function getValueTransition(transition, key) {
 const isNumber = (keyframe) => typeof keyframe === "number";
 const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
 
-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 createUnitType = (unit) => ({
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`,
-});
-const px = /*@__PURE__*/ createUnitType("px");
-
-const browserNumberValueTypes = {
-    // Border props
-    borderWidth: px,
-    borderTopWidth: px,
-    borderRightWidth: px,
-    borderBottomWidth: px,
-    borderLeftWidth: px,
-    borderRadius: px,
-    radius: px,
-    borderTopLeftRadius: px,
-    borderTopRightRadius: px,
-    borderBottomRightRadius: px,
-    borderBottomLeftRadius: px,
-    // Positioning props
-    width: px,
-    maxWidth: px,
-    height: px,
-    maxHeight: px,
-    top: px,
-    right: px,
-    bottom: px,
-    left: px,
-    // Spacing props
-    padding: px,
-    paddingTop: px,
-    paddingRight: px,
-    paddingBottom: px,
-    paddingLeft: px,
-    margin: px,
-    marginTop: px,
-    marginRight: px,
-    marginBottom: px,
-    marginLeft: px,
-    // Misc
-    backgroundPositionX: px,
-    backgroundPositionY: px,
-};
-
-const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-    const resolvedKeyframes = keyframes.filter(isNotNull);
-    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-        ? 0
-        : resolvedKeyframes.length - 1;
-    return !index || finalKeyframe === undefined
-        ? resolvedKeyframes[index]
-        : finalKeyframe;
-}
-
-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 supportsWaapi = /*@__PURE__*/ motionUtils.memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-
-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;
@@ -617,13 +410,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;
@@ -634,12 +429,12 @@ function animateSequence(definition, options) {
     createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
         animations.push(...animateElements(element, keyframes, transition));
     });
-    return new motionDom.GroupPlaybackControls(animations);
+    return new motionDom.GroupAnimationWithThen(animations);
 }
 
 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;
 };