motion 12.18.1 → 12.19.0

package/dist/es/motion-dom/dist/es/animation/utils/replace-transition-type.mjs

@@ -1,18 +0,0 @@
-import { inertia } from '../generators/inertia.mjs';
-import { keyframes } from '../generators/keyframes.mjs';
-import { spring } from '../generators/spring/index.mjs';
-
-const transitionTypeMap = {
-    decay: inertia,
-    inertia,
-    tween: keyframes,
-    keyframes: keyframes,
-    spring,
-};
-function replaceTransitionType(transition) {
-    if (typeof transition.type === "string") {
-        transition.type = transitionTypeMap[transition.type];
-    }
-}
-
-export { replaceTransitionType };

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

@@ -1,3 +0,0 @@
-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

@@ -1,14 +0,0 @@
-import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
-import { supportedWaapiEasing } from './supported.mjs';
-import { isBezierDefinition } from '../../../../../../motion-utils/dist/es/easing/utils/is-bezier-definition.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

@@ -1,28 +0,0 @@
-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';
-import { isBezierDefinition } from '../../../../../../motion-utils/dist/es/easing/utils/is-bezier-definition.mjs';
-
-function mapEasingToNativeEasing(easing, duration) {
-    if (!easing) {
-        return undefined;
-    }
-    else if (typeof easing === "function") {
-        return supportsLinearEasing()
-            ? generateLinearEasing(easing, duration)
-            : "ease-out";
-    }
-    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

@@ -1,15 +0,0 @@
-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/motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs

@@ -1,39 +0,0 @@
-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 = "easeOut", times, } = {}, pseudoElement = undefined) {
-    const keyframeOptions = {
-        [valueName]: keyframes,
-    };
-    if (times)
-        keyframeOptions.offset = times;
-    const easing = 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 (statsBuffer.value) {
-        activeAnimations.waapi++;
-    }
-    const options = {
-        delay,
-        duration,
-        easing: !Array.isArray(easing) ? easing : "linear",
-        fill: "both",
-        iterations: repeat + 1,
-        direction: repeatType === "reverse" ? "alternate" : "normal",
-    };
-    if (pseudoElement)
-        options.pseudoElement = pseudoElement;
-    const animation = element.animate(keyframeOptions, options);
-    if (statsBuffer.value) {
-        animation.finished.finally(() => {
-            activeAnimations.waapi--;
-        });
-    }
-    return animation;
-}
-
-export { startWaapiAnimation };

package/dist/es/motion-dom/dist/es/animation/waapi/supports/partial-keyframes.mjs

@@ -1,13 +0,0 @@
-import { memo } from '../../../../../../motion-utils/dist/es/memo.mjs';
-
-const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-});
-
-export { supportsPartialKeyframes };

package/dist/es/motion-dom/dist/es/animation/waapi/supports/waapi.mjs

@@ -1,37 +0,0 @@
-import { isHTMLElement } from '../../../utils/is-html-element.mjs';
-import { memo } from '../../../../../../motion-utils/dist/es/memo.mjs';
-
-/**
- * A list of values that can be hardware-accelerated.
- */
-const acceleratedValues = new Set([
-    "opacity",
-    "clipPath",
-    "filter",
-    "transform",
-    // TODO: Could be re-enabled now we have support for linear() easing
-    // "background-color"
-]);
-const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-function supportsBrowserAnimation(options) {
-    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-    if (!isHTMLElement(motionValue?.owner?.current)) {
-        return false;
-    }
-    const { onUpdate, transformTemplate } = motionValue.owner.getProps();
-    return (supportsWaapi() &&
-        name &&
-        acceleratedValues.has(name) &&
-        (name !== "transform" || !transformTemplate) &&
-        /**
-         * If we're outputting values to onUpdate then we can't use WAAPI as there's
-         * no way to read the value from WAAPI every frame.
-         */
-        !onUpdate &&
-        !repeatDelay &&
-        repeatType !== "mirror" &&
-        damping !== 0 &&
-        type !== "inertia");
-}
-
-export { supportsBrowserAnimation };

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

@@ -1,14 +0,0 @@
-/**
- * A list of values that can be hardware-accelerated.
- */
-const acceleratedValues = new Set([
-    "opacity",
-    "clipPath",
-    "filter",
-    "transform",
-    // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-    // or until we implement support for linear() easing.
-    // "background-color"
-]);
-
-export { acceleratedValues };

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

@@ -1,15 +0,0 @@
-import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';
-import { isGenerator } from '../../generators/utils/is-generator.mjs';
-
-function applyGeneratorOptions({ type, ...options }) {
-    if (isGenerator(type) && supportsLinearEasing()) {
-        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,12 +0,0 @@
-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 += Math.round(easing(i / (numPoints - 1)) * 10000) / 10000 + ", ";
-    }
-    return `linear(${points.substring(0, points.length - 2)})`;
-};
-
-export { generateLinearEasing };

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

@@ -1,39 +0,0 @@
-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/animation/waapi/utils/unsupported-easing.mjs

@@ -1,20 +0,0 @@
-import { anticipate } from '../../../../../../motion-utils/dist/es/easing/anticipate.mjs';
-import { backInOut } from '../../../../../../motion-utils/dist/es/easing/back.mjs';
-import { circInOut } from '../../../../../../motion-utils/dist/es/easing/circ.mjs';
-
-const unsupportedEasingFunctions = {
-    anticipate,
-    backInOut,
-    circInOut,
-};
-function isUnsupportedEase(key) {
-    return key in unsupportedEasingFunctions;
-}
-function replaceStringEasing(transition) {
-    if (typeof transition.ease === "string" &&
-        isUnsupportedEase(transition.ease)) {
-        transition.ease = unsupportedEasingFunctions[transition.ease];
-    }
-}
-
-export { replaceStringEasing };

package/dist/es/motion-dom/dist/es/effects/MotionValueState.mjs

@@ -1,47 +0,0 @@
-import { frame, cancelFrame } from '../frameloop/frame.mjs';
-import { numberValueTypes } from '../value/types/maps/number.mjs';
-import { getValueAsType } from '../value/types/utils/get-as-type.mjs';
-
-class MotionValueState {
-    constructor() {
-        this.latest = {};
-        this.values = new Map();
-    }
-    set(name, value, render, computed, useDefaultValueType = true) {
-        const existingValue = this.values.get(name);
-        if (existingValue) {
-            existingValue.onRemove();
-        }
-        const onChange = () => {
-            const v = value.get();
-            if (useDefaultValueType) {
-                this.latest[name] = getValueAsType(v, numberValueTypes[name]);
-            }
-            else {
-                this.latest[name] = v;
-            }
-            render && frame.render(render);
-        };
-        onChange();
-        const cancelOnChange = value.on("change", onChange);
-        computed && value.addDependent(computed);
-        const remove = () => {
-            cancelOnChange();
-            render && cancelFrame(render);
-            this.values.delete(name);
-            computed && value.removeDependent(computed);
-        };
-        this.values.set(name, { value, onRemove: remove });
-        return remove;
-    }
-    get(name) {
-        return this.values.get(name)?.value;
-    }
-    destroy() {
-        for (const value of this.values.values()) {
-            value.onRemove();
-        }
-    }
-}
-
-export { MotionValueState };

package/dist/es/motion-dom/dist/es/effects/attr/index.mjs

@@ -1,41 +0,0 @@
-import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
-import { createSelectorEffect } from '../utils/create-dom-effect.mjs';
-import { createEffect } from '../utils/create-effect.mjs';
-
-function canSetAsProperty(element, name) {
-    if (!(name in element))
-        return false;
-    const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), name) ||
-        Object.getOwnPropertyDescriptor(element, name);
-    // Check if it has a setter
-    return descriptor && typeof descriptor.set === "function";
-}
-const addAttrValue = (element, state, key, value) => {
-    const isProp = canSetAsProperty(element, key);
-    const name = isProp
-        ? key
-        : key.startsWith("data") || key.startsWith("aria")
-            ? camelToDash(key)
-            : key;
-    /**
-     * Set attribute directly via property if available
-     */
-    const render = isProp
-        ? () => {
-            element[name] = state.latest[key];
-        }
-        : () => {
-            const v = state.latest[key];
-            if (v === null || v === undefined) {
-                element.removeAttribute(name);
-            }
-            else {
-                element.setAttribute(name, String(v));
-            }
-        };
-    return state.set(key, value, render);
-};
-const attrEffect = /*@__PURE__*/ createSelectorEffect(
-/*@__PURE__*/ createEffect(addAttrValue));
-
-export { addAttrValue, attrEffect };

package/dist/es/motion-dom/dist/es/effects/prop/index.mjs

@@ -1,9 +0,0 @@
-import { createEffect } from '../utils/create-effect.mjs';
-
-const propEffect = /*@__PURE__*/ createEffect((subject, state, key, value) => {
-    return state.set(key, value, () => {
-        subject[key] = state.latest[key];
-    }, undefined, false);
-});
-
-export { propEffect };

package/dist/es/motion-dom/dist/es/effects/style/index.mjs

@@ -1,52 +0,0 @@
-import { isCSSVar } from '../../render/dom/is-css-var.mjs';
-import { transformProps } from '../../render/utils/keys-transform.mjs';
-import { isHTMLElement } from '../../utils/is-html-element.mjs';
-import { MotionValue } from '../../value/index.mjs';
-import { createSelectorEffect } from '../utils/create-dom-effect.mjs';
-import { createEffect } from '../utils/create-effect.mjs';
-import { buildTransform } from './transform.mjs';
-
-const originProps = new Set(["originX", "originY", "originZ"]);
-const addStyleValue = (element, state, key, value) => {
-    let render = undefined;
-    let computed = undefined;
-    if (transformProps.has(key)) {
-        if (!state.get("transform")) {
-            // If this is an HTML element, we need to set the transform-box to fill-box
-            // to normalise the transform relative to the element's bounding box
-            if (!isHTMLElement(element) && !state.get("transformBox")) {
-                addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
-            }
-            state.set("transform", new MotionValue("none"), () => {
-                element.style.transform = buildTransform(state);
-            });
-        }
-        computed = state.get("transform");
-    }
-    else if (originProps.has(key)) {
-        if (!state.get("transformOrigin")) {
-            state.set("transformOrigin", new MotionValue(""), () => {
-                const originX = state.latest.originX ?? "50%";
-                const originY = state.latest.originY ?? "50%";
-                const originZ = state.latest.originZ ?? 0;
-                element.style.transformOrigin = `${originX} ${originY} ${originZ}`;
-            });
-        }
-        computed = state.get("transformOrigin");
-    }
-    else if (isCSSVar(key)) {
-        render = () => {
-            element.style.setProperty(key, state.latest[key]);
-        };
-    }
-    else {
-        render = () => {
-            element.style[key] = state.latest[key];
-        };
-    }
-    return state.set(key, value, render, computed);
-};
-const styleEffect = /*@__PURE__*/ createSelectorEffect(
-/*@__PURE__*/ createEffect(addStyleValue));
-
-export { addStyleValue, styleEffect };

package/dist/es/motion-dom/dist/es/effects/style/transform.mjs

@@ -1,38 +0,0 @@
-import { transformPropOrder } from '../../render/utils/keys-transform.mjs';
-
-const translateAlias = {
-    x: "translateX",
-    y: "translateY",
-    z: "translateZ",
-    transformPerspective: "perspective",
-};
-function buildTransform(state) {
-    let transform = "";
-    let transformIsDefault = true;
-    /**
-     * Loop over all possible transforms in order, adding the ones that
-     * are present to the transform string.
-     */
-    for (let i = 0; i < transformPropOrder.length; i++) {
-        const key = transformPropOrder[i];
-        const value = state.latest[key];
-        if (value === undefined)
-            continue;
-        let valueIsDefault = true;
-        if (typeof value === "number") {
-            valueIsDefault = value === (key.startsWith("scale") ? 1 : 0);
-        }
-        else {
-            valueIsDefault = parseFloat(value) === 0;
-        }
-        if (!valueIsDefault) {
-            transformIsDefault = false;
-            const transformName = translateAlias[key] || key;
-            const valueToRender = state.latest[key];
-            transform += `${transformName}(${valueToRender}) `;
-        }
-    }
-    return transformIsDefault ? "none" : transform.trim();
-}
-
-export { buildTransform };

package/dist/es/motion-dom/dist/es/effects/svg/index.mjs

@@ -1,41 +0,0 @@
-import { MotionValue } from '../../value/index.mjs';
-import { px } from '../../value/types/numbers/units.mjs';
-import { addAttrValue } from '../attr/index.mjs';
-import { addStyleValue } from '../style/index.mjs';
-import { createSelectorEffect } from '../utils/create-dom-effect.mjs';
-import { createEffect } from '../utils/create-effect.mjs';
-import { frame } from '../../frameloop/frame.mjs';
-
-const toPx = px.transform;
-function addSVGPathValue(element, state, key, value) {
-    frame.render(() => element.setAttribute("pathLength", "1"));
-    if (key === "pathOffset") {
-        return state.set(key, value, () => element.setAttribute("stroke-dashoffset", toPx(-state.latest[key])));
-    }
-    else {
-        if (!state.get("stroke-dasharray")) {
-            state.set("stroke-dasharray", new MotionValue("1 1"), () => {
-                const { pathLength = 1, pathSpacing } = state.latest;
-                element.setAttribute("stroke-dasharray", `${toPx(pathLength)} ${toPx(pathSpacing ?? 1 - Number(pathLength))}`);
-            });
-        }
-        return state.set(key, value, undefined, state.get("stroke-dasharray"));
-    }
-}
-const addSVGValue = (element, state, key, value) => {
-    if (key.startsWith("path")) {
-        return addSVGPathValue(element, state, key, value);
-    }
-    else if (key.startsWith("attr")) {
-        return addAttrValue(element, state, convertAttrKey(key), value);
-    }
-    const handler = key in element.style ? addStyleValue : addAttrValue;
-    return handler(element, state, key, value);
-};
-const svgEffect = /*@__PURE__*/ createSelectorEffect(
-/*@__PURE__*/ createEffect(addSVGValue));
-function convertAttrKey(key) {
-    return key.replace(/^attr([A-Z])/, (_, firstChar) => firstChar.toLowerCase());
-}
-
-export { svgEffect };

package/dist/es/motion-dom/dist/es/effects/utils/create-dom-effect.mjs

@@ -1,18 +0,0 @@
-import { resolveElements } from '../../utils/resolve-elements.mjs';
-
-function createSelectorEffect(subjectEffect) {
-    return (subject, values) => {
-        const elements = resolveElements(subject);
-        const subscriptions = [];
-        for (const element of elements) {
-            const remove = subjectEffect(element, values);
-            subscriptions.push(remove);
-        }
-        return () => {
-            for (const remove of subscriptions)
-                remove();
-        };
-    };
-}
-
-export { createSelectorEffect };

package/dist/es/motion-dom/dist/es/effects/utils/create-effect.mjs

@@ -1,21 +0,0 @@
-import { MotionValueState } from '../MotionValueState.mjs';
-
-function createEffect(addValue) {
-    const stateCache = new WeakMap();
-    const subscriptions = [];
-    return (subject, values) => {
-        const state = stateCache.get(subject) ?? new MotionValueState();
-        stateCache.set(subject, state);
-        for (const key in values) {
-            const value = values[key];
-            const remove = addValue(subject, state, key, value);
-            subscriptions.push(remove);
-        }
-        return () => {
-            for (const cancel of subscriptions)
-                cancel();
-        };
-    };
-}
-
-export { createEffect };

package/dist/es/motion-dom/dist/es/frameloop/batcher.mjs

@@ -1,71 +0,0 @@
-import { stepsOrder } from './order.mjs';
-import { createRenderStep } from './render-step.mjs';
-import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.mjs';
-
-const maxElapsed = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-    let runNextFrame = false;
-    let useDefaultElapsed = true;
-    const state = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    const flagRunNextFrame = () => (runNextFrame = true);
-    const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
-        return acc;
-    }, {});
-    const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
-    const processBatch = () => {
-        const timestamp = MotionGlobalConfig.useManualTiming
-            ? state.timestamp
-            : performance.now();
-        runNextFrame = false;
-        if (!MotionGlobalConfig.useManualTiming) {
-            state.delta = useDefaultElapsed
-                ? 1000 / 60
-                : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
-        }
-        state.timestamp = timestamp;
-        state.isProcessing = true;
-        // Unrolled render loop for better per-frame performance
-        setup.process(state);
-        read.process(state);
-        resolveKeyframes.process(state);
-        preUpdate.process(state);
-        update.process(state);
-        preRender.process(state);
-        render.process(state);
-        postRender.process(state);
-        state.isProcessing = false;
-        if (runNextFrame && allowKeepAlive) {
-            useDefaultElapsed = false;
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const wake = () => {
-        runNextFrame = true;
-        useDefaultElapsed = true;
-        if (!state.isProcessing) {
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const schedule = stepsOrder.reduce((acc, key) => {
-        const step = steps[key];
-        acc[key] = (process, keepAlive = false, immediate = false) => {
-            if (!runNextFrame)
-                wake();
-            return step.schedule(process, keepAlive, immediate);
-        };
-        return acc;
-    }, {});
-    const cancel = (process) => {
-        for (let i = 0; i < stepsOrder.length; i++) {
-            steps[stepsOrder[i]].cancel(process);
-        }
-    };
-    return { schedule, cancel, state, steps };
-}
-
-export { createRenderBatcher };

package/dist/es/motion-dom/dist/es/frameloop/frame.mjs

@@ -1,6 +0,0 @@
-import { createRenderBatcher } from './batcher.mjs';
-import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
-
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-
-export { cancelFrame, frame, frameData, frameSteps };

package/dist/es/motion-dom/dist/es/frameloop/index-legacy.mjs

@@ -1,20 +0,0 @@
-import { stepsOrder } from './order.mjs';
-import { frame, cancelFrame } from './frame.mjs';
-
-/**
- * @deprecated
- *
- * Import as `frame` instead.
- */
-const sync = frame;
-/**
- * @deprecated
- *
- * Use cancelFrame(callback) instead.
- */
-const cancelSync = stepsOrder.reduce((acc, key) => {
-    acc[key] = (process) => cancelFrame(process);
-    return acc;
-}, {});
-
-export { cancelSync, sync };