motion 12.6.3-alpha.0 → 12.6.4-alpha.0

package/dist/es/motion-dom/dist/es/animation/NativeAnimation.mjs

@@ -0,0 +1,161 @@
+import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
+import { style } from '../render/dom/style.mjs';
+import { getFinalKeyframe } from './keyframes/get-final.mjs';
+import { hydrateKeyframes } from './keyframes/hydrate.mjs';
+import { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';
+import { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';
+
+const animationMaps = new WeakMap();
+const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
+function getAnimationMap(element) {
+    const map = animationMaps.get(element) || new Map();
+    animationMaps.set(element, map);
+    return map;
+}
+/**
+ * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
+ */
+class NativeAnimation {
+    constructor(options) {
+        /**
+         * If we already have an animation, we don't need to instantiate one
+         * and can just use this as a controls interface.
+         */
+        if ("animation" in options) {
+            this.animation = options.animation;
+            return;
+        }
+        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
+        let { transition } = options;
+        this.allowFlatten = allowFlatten;
+        /**
+         * Stop any existing animations on the element before reading existing keyframes.
+         *
+         * TODO: Check for VisualElement before using animation state. This is a fallback
+         * for mini animate(). Do this when implementing NativeAnimationExtended.
+         */
+        const animationMap = getAnimationMap(element);
+        const key = animationMapKey(name, pseudoElement || "");
+        const currentAnimation = animationMap.get(key);
+        currentAnimation && currentAnimation.stop();
+        /**
+         * TODO: If these keyframes aren't correctly hydrated then we want to throw
+         * run an instant animation.
+         */
+        const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
+        invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        transition = applyGeneratorOptions(transition);
+        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+        if (transition.autoplay === false) {
+            this.animation.pause();
+        }
+        this.removeAnimation = () => animationMap.delete(key);
+        this.animation.onfinish = () => {
+            if (!pseudoElement) {
+                style.set(element, name, getFinalKeyframe(keyframes, transition));
+            }
+            else {
+                this.commitStyles();
+            }
+            this.cancel();
+        };
+        /**
+         * TODO: Check for VisualElement before using animation state.
+         */
+        animationMap.set(key, this);
+    }
+    play() {
+        this.animation.play();
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        this.animation.finish();
+    }
+    cancel() {
+        try {
+            this.animation.cancel();
+        }
+        catch (e) { }
+        this.removeAnimation();
+    }
+    stop() {
+        const { state } = this;
+        if (state === "idle" || state === "finished") {
+            return;
+        }
+        this.commitStyles();
+        this.cancel();
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * In this method, we commit styles back to the DOM before cancelling
+     * the animation.
+     *
+     * This is designed to be overridden by NativeAnimationExtended, which
+     * will create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to also correctly calculate velocity for any subsequent animation
+     * while deferring the commit until the next animation frame.
+     */
+    commitStyles() {
+        this.animation.commitStyles?.();
+    }
+    get duration() {
+        console.log(this.animation.effect?.getComputedTiming());
+        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        return millisecondsToSeconds(Number(duration));
+    }
+    get time() {
+        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
+    }
+    set time(newTime) {
+        this.animation.currentTime = secondsToMilliseconds(newTime);
+    }
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
+    get speed() {
+        return this.animation.playbackRate;
+    }
+    set speed(newSpeed) {
+        this.animation.playbackRate = newSpeed;
+    }
+    get state() {
+        return this.animation.playState;
+    }
+    get startTime() {
+        return Number(this.animation.startTime);
+    }
+    get finished() {
+        return this.animation.finished;
+    }
+    flatten() {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
+    }
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     */
+    attachTimeline(timeline) {
+        this.animation.timeline = timeline;
+        this.animation.onfinish = null;
+        return noop;
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve).catch(onReject);
+    }
+}
+
+export { NativeAnimation };

package/dist/es/motion-dom/dist/es/animation/generators/utils/is-generator.mjs

@@ -1,5 +1,5 @@
 function isGenerator(type) {
-    return typeof type === "function";
+    return typeof type === "function" && "applyToOptions" in type;
 }
 
 export { isGenerator };

package/dist/es/motion-dom/dist/es/animation/keyframes/get-final.mjs

@@ -0,0 +1,12 @@
+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;
+}
+
+export { getFinalKeyframe };

package/dist/es/motion-dom/dist/es/animation/keyframes/hydrate.mjs

@@ -0,0 +1,26 @@
+import { style } from '../../render/dom/style.mjs';
+import { supportsPartialKeyframes } from '../waapi/supports/partial-keyframes.mjs';
+import { pxValues } from '../waapi/utils/px-values.mjs';
+
+function hydrateKeyframes(element, name, keyframes, pseudoElement) {
+    if (!Array.isArray(keyframes)) {
+        keyframes = [keyframes];
+    }
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] === null) {
+            keyframes[i] =
+                i === 0 && !pseudoElement
+                    ? style.get(element, name)
+                    : keyframes[i - 1];
+        }
+        if (typeof keyframes[i] === "number" && pxValues.has(name)) {
+            keyframes[i] = keyframes[i] + "px";
+        }
+    }
+    if (!pseudoElement && !supportsPartialKeyframes() && keyframes.length < 2) {
+        keyframes.unshift(style.get(element, name));
+    }
+    return keyframes;
+}
+
+export { hydrateKeyframes };

package/dist/es/motion-dom/dist/es/animation/utils/get-value-transition.mjs

@@ -1,9 +1,7 @@
 function getValueTransition(transition, key) {
-    return transition
-        ? transition[key] ||
-            transition["default"] ||
-            transition
-        : undefined;
+    return (transition?.[key] ??
+        transition?.["default"] ??
+        transition);
 }
 
 export { getValueTransition };

package/dist/es/motion-dom/dist/es/animation/waapi/easing/cubic-bezier.mjs

@@ -0,0 +1,3 @@
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
+export { cubicBezierAsString };

package/dist/es/motion-dom/dist/es/animation/waapi/easing/is-supported.mjs

@@ -0,0 +1,14 @@
+import { isBezierDefinition } from '../../../utils/is-bezier-definition.mjs';
+import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
+import { supportedWaapiEasing } from './supported.mjs';
+
+function isWaapiSupportedEasing(easing) {
+    return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
+        !easing ||
+        (typeof easing === "string" &&
+            (easing in supportedWaapiEasing || supportsLinearEasing())) ||
+        isBezierDefinition(easing) ||
+        (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
+}
+
+export { isWaapiSupportedEasing };

package/dist/es/motion-dom/dist/es/animation/waapi/easing/map-easing.mjs

@@ -0,0 +1,26 @@
+import { isBezierDefinition } from '../../../utils/is-bezier-definition.mjs';
+import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
+import { generateLinearEasing } from '../utils/linear.mjs';
+import { cubicBezierAsString } from './cubic-bezier.mjs';
+import { supportedWaapiEasing } from './supported.mjs';
+
+function mapEasingToNativeEasing(easing, duration) {
+    if (!easing) {
+        return undefined;
+    }
+    else if (typeof easing === "function" && supportsLinearEasing()) {
+        return generateLinearEasing(easing, duration);
+    }
+    else if (isBezierDefinition(easing)) {
+        return cubicBezierAsString(easing);
+    }
+    else if (Array.isArray(easing)) {
+        return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||
+            supportedWaapiEasing.easeOut);
+    }
+    else {
+        return supportedWaapiEasing[easing];
+    }
+}
+
+export { mapEasingToNativeEasing };

package/dist/es/motion-dom/dist/es/animation/waapi/easing/supported.mjs

@@ -0,0 +1,15 @@
+import { cubicBezierAsString } from './cubic-bezier.mjs';
+
+const supportedWaapiEasing = {
+    linear: "linear",
+    ease: "ease",
+    easeIn: "ease-in",
+    easeOut: "ease-out",
+    easeInOut: "ease-in-out",
+    circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),
+    circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),
+    backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+    backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
+};
+
+export { supportedWaapiEasing };

package/dist/es/{framer-motion/dist/es/animation/animators/waapi/index.mjs → motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs}

@@ -1,10 +1,11 @@
-import '../../../../../../motion-utils/dist/es/errors.mjs';
-import { mapEasingToNativeEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/easing.mjs';
-import { statsBuffer } from '../../../../../../motion-dom/dist/es/stats/buffer.mjs';
-import { activeAnimations } from '../../../../../../motion-dom/dist/es/stats/animation-count.mjs';
+import { activeAnimations } from '../../stats/animation-count.mjs';
+import { statsBuffer } from '../../stats/buffer.mjs';
+import { mapEasingToNativeEasing } from './easing/map-easing.mjs';
 
-function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
-    const keyframeOptions = { [valueName]: keyframes };
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
+    const keyframeOptions = {
+        [valueName]: keyframes,
+    };
     if (times)
         keyframeOptions.offset = times;
     const easing = mapEasingToNativeEasing(ease, duration);
@@ -23,6 +24,7 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
         fill: "both",
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
+        pseudoElement,
     });
     if (statsBuffer.value) {
         animation.finished.finally(() => {

package/dist/es/{framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs → motion-dom/dist/es/animation/waapi/supports/partial-keyframes.mjs}

@@ -1,5 +1,5 @@
-import '../../../../../../../motion-utils/dist/es/errors.mjs';
-import { memo } from '../../../../../../../motion-utils/dist/es/memo.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { memo } from '../../../../../../motion-utils/dist/es/memo.mjs';
 
 const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
     try {

package/dist/es/motion-dom/dist/es/animation/waapi/utils/apply-generator.mjs

@@ -0,0 +1,14 @@
+import { isGenerator } from '../../generators/utils/is-generator.mjs';
+
+function applyGeneratorOptions({ type, ...options }) {
+    if (isGenerator(type)) {
+        return type.applyToOptions(options);
+    }
+    else {
+        options.duration ?? (options.duration = 300);
+        options.ease ?? (options.ease = "easeOut");
+    }
+    return options;
+}
+
+export { applyGeneratorOptions };

package/dist/es/motion-dom/dist/es/animation/waapi/utils/linear.mjs

@@ -1,13 +1,10 @@
-import '../../../../../../motion-utils/dist/es/errors.mjs';
-import { progress } from '../../../../../../motion-utils/dist/es/progress.mjs';
-
 const generateLinearEasing = (easing, duration, // as milliseconds
 resolution = 10 // as milliseconds
 ) => {
     let points = "";
     const numPoints = Math.max(Math.round(duration / resolution), 2);
     for (let i = 0; i < numPoints; i++) {
-        points += easing(progress(0, numPoints - 1, i)) + ", ";
+        points += easing(i / (numPoints - 1)) + ", ";
     }
     return `linear(${points.substring(0, points.length - 2)})`;
 };

package/dist/es/motion-dom/dist/es/animation/waapi/utils/px-values.mjs

@@ -0,0 +1,39 @@
+const pxValues = new Set([
+    // Border props
+    "borderWidth",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderRadius",
+    "radius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+    // Positioning props
+    "width",
+    "maxWidth",
+    "height",
+    "maxHeight",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    // Spacing props
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    // Misc
+    "backgroundPositionX",
+    "backgroundPositionY",
+]);
+
+export { pxValues };

package/dist/es/motion-dom/dist/es/gestures/press/index.mjs

@@ -69,7 +69,7 @@ function press(targetOrSelector, onPressStart, options = {}) {
         if (target instanceof HTMLElement) {
             target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
             if (!isElementKeyboardAccessible(target) &&
-                target.tabIndex === null) {
+                !target.hasAttribute("tabindex")) {
                 target.tabIndex = 0;
             }
         }

package/dist/es/motion-dom/dist/es/render/dom/style.mjs

@@ -0,0 +1,15 @@
+const isCSSVar = (name) => name.startsWith("--");
+const style = {
+    set: (element, name, value) => {
+        isCSSVar(name)
+            ? element.style.setProperty(name, value)
+            : (element.style[name] = value);
+    },
+    get: (element, name) => {
+        return isCSSVar(name)
+            ? element.style.getPropertyValue(name)
+            : element.style[name];
+    },
+};
+
+export { style };

package/dist/es/motion-dom/dist/es/utils/resolve-elements.mjs

@@ -1,19 +1,14 @@
 function resolveElements(elementOrSelector, scope, selectorCache) {
-    var _a;
     if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
     }
     else if (typeof elementOrSelector === "string") {
         let root = document;
         if (scope) {
-            // TODO: Refactor to utils package
-            // invariant(
-            //     Boolean(scope.current),
-            //     "Scope provided, but no element detected."
-            // )
             root = scope.current;
         }
-        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        const elements = selectorCache?.[elementOrSelector] ??
+            root.querySelectorAll(elementOrSelector);
         return elements ? Array.from(elements) : [];
     }
     return Array.from(elementOrSelector);

package/dist/es/motion-dom/dist/es/utils/supports/flags.mjs

@@ -2,8 +2,6 @@
  * Add the ability for test suites to manually set support flags
  * to better test more environments.
  */
-const supportsFlags = {
-    linearEasing: undefined,
-};
+const supportsFlags = {};
 
 export { supportsFlags };

package/dist/es/motion-dom/dist/es/utils/supports/memo.mjs

@@ -4,7 +4,7 @@ import { supportsFlags } from './flags.mjs';
 
 function memoSupports(callback, supportsFlag) {
     const memoized = memo(callback);
-    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+    return () => supportsFlags[supportsFlag] ?? memoized();
 }
 
 export { memoSupports };

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -33,7 +33,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.6.3-alpha.0";
+        this.version = "12.6.4-alpha.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support

package/dist/es/motion-utils/dist/es/errors.mjs

@@ -1,7 +1,5 @@
-import { noop } from './noop.mjs';
-
-let warning = noop;
-let invariant = noop;
+let warning = () => { };
+let invariant = () => { };
 if (process.env.NODE_ENV !== "production") {
     warning = (check, message) => {
         if (!check && typeof console !== "undefined") {

package/dist/es/motion-utils/dist/es/global-config.mjs

@@ -1,6 +1,3 @@
-const MotionGlobalConfig = {
-    skipAnimations: false,
-    useManualTiming: false,
-};
+const MotionGlobalConfig = {};
 
 export { MotionGlobalConfig };