motion 12.14.0 → 12.16.0

package/dist/motion.dev.js

@@ -3348,6 +3348,152 @@
         // "background-color"
     ]);
 
+    function camelToDash$1(str) {
+        return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+    }
+
+    function resolveElements(elementOrSelector, scope, selectorCache) {
+        if (elementOrSelector instanceof EventTarget) {
+            return [elementOrSelector];
+        }
+        else if (typeof elementOrSelector === "string") {
+            let root = document;
+            if (scope) {
+                root = scope.current;
+            }
+            const elements = selectorCache?.[elementOrSelector] ??
+                root.querySelectorAll(elementOrSelector);
+            return elements ? Array.from(elements) : [];
+        }
+        return Array.from(elementOrSelector);
+    }
+
+    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();
+            };
+        };
+    }
+
+    /**
+     * Provided a value and a ValueType, returns the value as that value type.
+     */
+    const getValueAsType = (value, type) => {
+        return type && typeof value === "number"
+            ? type.transform(value)
+            : value;
+    };
+
+    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();
+            }
+        }
+    }
+
+    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();
+            };
+        };
+    }
+
+    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$1(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));
+
+    const propEffect = /*@__PURE__*/ createEffect((subject, state, key, value) => {
+        return state.set(key, value, () => {
+            subject[key] = state.latest[key];
+        }, undefined, false);
+    });
+
     /**
      * Maximum time between the value of two frames, beyond which we
      * assume the velocity has since been 0.
@@ -3670,106 +3816,6 @@
         return new MotionValue(init, options);
     }
 
-    function resolveElements(elementOrSelector, scope, selectorCache) {
-        if (elementOrSelector instanceof EventTarget) {
-            return [elementOrSelector];
-        }
-        else if (typeof elementOrSelector === "string") {
-            let root = document;
-            if (scope) {
-                root = scope.current;
-            }
-            const elements = selectorCache?.[elementOrSelector] ??
-                root.querySelectorAll(elementOrSelector);
-            return elements ? Array.from(elements) : [];
-        }
-        return Array.from(elementOrSelector);
-    }
-
-    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();
-            };
-        };
-    }
-
-    /**
-     * Provided a value and a ValueType, returns the value as that value type.
-     */
-    const getValueAsType = (value, type) => {
-        return type && typeof value === "number"
-            ? type.transform(value)
-            : value;
-    };
-
-    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();
-            }
-        }
-    }
-
-    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();
-            };
-        };
-    }
-
     const translateAlias$1 = {
         x: "translateX",
         y: "translateY",
@@ -3811,6 +3857,11 @@
         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$1(state);
                 });
@@ -3843,6 +3894,38 @@
     const styleEffect = /*@__PURE__*/ createSelectorEffect(
     /*@__PURE__*/ createEffect(addStyleValue));
 
+    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());
+    }
+
     const { schedule: microtask, cancel: cancelMicrotask } = 
     /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
@@ -4089,6 +4172,107 @@
             : computedStyle[name];
     }
 
+    /**
+     * Checks if an element is an SVG element in a way
+     * that works across iframes
+     */
+    function isSVGElement(element) {
+        return isObject(element) && "ownerSVGElement" in element;
+    }
+
+    const resizeHandlers = new WeakMap();
+    let observer;
+    const getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => {
+        if (borderBoxSize && borderBoxSize[0]) {
+            return borderBoxSize[0][(borderBoxAxis + "Size")];
+        }
+        else if (isSVGElement(target) && "getBBox" in target) {
+            return target.getBBox()[svgAxis];
+        }
+        else {
+            return target[htmlAxis];
+        }
+    };
+    const getWidth = /*@__PURE__*/ getSize("inline", "width", "offsetWidth");
+    const getHeight = /*@__PURE__*/ getSize("block", "height", "offsetHeight");
+    function notifyTarget({ target, borderBoxSize }) {
+        resizeHandlers.get(target)?.forEach((handler) => {
+            handler(target, {
+                get width() {
+                    return getWidth(target, borderBoxSize);
+                },
+                get height() {
+                    return getHeight(target, borderBoxSize);
+                },
+            });
+        });
+    }
+    function notifyAll(entries) {
+        entries.forEach(notifyTarget);
+    }
+    function createResizeObserver() {
+        if (typeof ResizeObserver === "undefined")
+            return;
+        observer = new ResizeObserver(notifyAll);
+    }
+    function resizeElement(target, handler) {
+        if (!observer)
+            createResizeObserver();
+        const elements = resolveElements(target);
+        elements.forEach((element) => {
+            let elementHandlers = resizeHandlers.get(element);
+            if (!elementHandlers) {
+                elementHandlers = new Set();
+                resizeHandlers.set(element, elementHandlers);
+            }
+            elementHandlers.add(handler);
+            observer?.observe(element);
+        });
+        return () => {
+            elements.forEach((element) => {
+                const elementHandlers = resizeHandlers.get(element);
+                elementHandlers?.delete(handler);
+                if (!elementHandlers?.size) {
+                    observer?.unobserve(element);
+                }
+            });
+        };
+    }
+
+    const windowCallbacks = new Set();
+    let windowResizeHandler;
+    function createWindowResizeHandler() {
+        windowResizeHandler = () => {
+            const info = {
+                get width() {
+                    return window.innerWidth;
+                },
+                get height() {
+                    return window.innerHeight;
+                },
+            };
+            windowCallbacks.forEach((callback) => callback(info));
+        };
+        window.addEventListener("resize", windowResizeHandler);
+    }
+    function resizeWindow(callback) {
+        windowCallbacks.add(callback);
+        if (!windowResizeHandler)
+            createWindowResizeHandler();
+        return () => {
+            windowCallbacks.delete(callback);
+            if (!windowCallbacks.size &&
+                typeof windowResizeHandler === "function") {
+                window.removeEventListener("resize", windowResizeHandler);
+                windowResizeHandler = undefined;
+            }
+        };
+    }
+
+    function resize(a, b) {
+        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+    }
+
     function observeTimeline(update, timeline) {
         let prevProgress;
         const onFrame = () => {
@@ -4216,14 +4400,6 @@
         return reportStats;
     }
 
-    /**
-     * Checks if an element is an SVG element in a way
-     * that works across iframes
-     */
-    function isSVGElement(element) {
-        return isObject(element) && "ownerSVGElement" in element;
-    }
-
     /**
      * Checks if an element is specifically an SVGSVGElement (the root SVG element)
      * in a way that works across iframes
@@ -6666,99 +6842,6 @@
     };
     const animateMini = /*@__PURE__*/ createScopedWaapiAnimate();
 
-    const resizeHandlers = new WeakMap();
-    let observer;
-    function getElementSize(target, borderBoxSize) {
-        if (borderBoxSize) {
-            const { inlineSize, blockSize } = borderBoxSize[0];
-            return { width: inlineSize, height: blockSize };
-        }
-        else if (isSVGElement(target) && "getBBox" in target) {
-            return target.getBBox();
-        }
-        else {
-            return {
-                width: target.offsetWidth,
-                height: target.offsetHeight,
-            };
-        }
-    }
-    function notifyTarget({ target, contentRect, borderBoxSize, }) {
-        resizeHandlers.get(target)?.forEach((handler) => {
-            handler({
-                target,
-                contentSize: contentRect,
-                get size() {
-                    return getElementSize(target, borderBoxSize);
-                },
-            });
-        });
-    }
-    function notifyAll(entries) {
-        entries.forEach(notifyTarget);
-    }
-    function createResizeObserver() {
-        if (typeof ResizeObserver === "undefined")
-            return;
-        observer = new ResizeObserver(notifyAll);
-    }
-    function resizeElement(target, handler) {
-        if (!observer)
-            createResizeObserver();
-        const elements = resolveElements(target);
-        elements.forEach((element) => {
-            let elementHandlers = resizeHandlers.get(element);
-            if (!elementHandlers) {
-                elementHandlers = new Set();
-                resizeHandlers.set(element, elementHandlers);
-            }
-            elementHandlers.add(handler);
-            observer?.observe(element);
-        });
-        return () => {
-            elements.forEach((element) => {
-                const elementHandlers = resizeHandlers.get(element);
-                elementHandlers?.delete(handler);
-                if (!elementHandlers?.size) {
-                    observer?.unobserve(element);
-                }
-            });
-        };
-    }
-
-    const windowCallbacks = new Set();
-    let windowResizeHandler;
-    function createWindowResizeHandler() {
-        windowResizeHandler = () => {
-            const size = {
-                width: window.innerWidth,
-                height: window.innerHeight,
-            };
-            const info = {
-                target: window,
-                size,
-                contentSize: size,
-            };
-            windowCallbacks.forEach((callback) => callback(info));
-        };
-        window.addEventListener("resize", windowResizeHandler);
-    }
-    function resizeWindow(callback) {
-        windowCallbacks.add(callback);
-        if (!windowResizeHandler)
-            createWindowResizeHandler();
-        return () => {
-            windowCallbacks.delete(callback);
-            if (!windowCallbacks.size && windowResizeHandler) {
-                windowResizeHandler = undefined;
-            }
-        };
-    }
-
-    function resize(a, b) {
-        return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
-    }
-
     /**
      * A time in milliseconds, beyond which we consider the scroll velocity to be 0.
      */
@@ -7290,6 +7373,7 @@
     exports.ViewTransitionBuilder = ViewTransitionBuilder;
     exports.acceleratedValues = acceleratedValues;
     exports.activeAnimations = activeAnimations;
+    exports.addAttrValue = addAttrValue;
     exports.addStyleValue = addStyleValue;
     exports.addUniqueItem = addUniqueItem;
     exports.alpha = alpha;
@@ -7302,6 +7386,7 @@
     exports.anticipate = anticipate;
     exports.applyPxDefaults = applyPxDefaults;
     exports.attachSpring = attachSpring;
+    exports.attrEffect = attrEffect;
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
@@ -7410,10 +7495,12 @@
     exports.press = press;
     exports.progress = progress;
     exports.progressPercentage = progressPercentage;
+    exports.propEffect = propEffect;
     exports.px = px;
     exports.readTransformValue = readTransformValue;
     exports.recordStats = recordStats;
     exports.removeItem = removeItem;
+    exports.resize = resize;
     exports.resolveElements = resolveElements;
     exports.reverseEasing = reverseEasing;
     exports.rgbUnit = rgbUnit;
@@ -7437,6 +7524,7 @@
     exports.supportsLinearEasing = supportsLinearEasing;
     exports.supportsPartialKeyframes = supportsPartialKeyframes;
     exports.supportsScrollTimeline = supportsScrollTimeline;
+    exports.svgEffect = svgEffect;
     exports.sync = sync;
     exports.testValueType = testValueType;
     exports.time = time;