motion 12.13.0 → 12.15.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",
@@ -3805,17 +3851,34 @@
         return transformIsDefault ? "none" : transform.trim();
     }
 
+    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$1(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]);
@@ -3828,7 +3891,40 @@
         }
         return state.set(key, value, render, computed);
     };
-    const styleEffect = createSelectorEffect(createEffect(addStyleValue));
+    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);
@@ -7277,6 +7373,7 @@
     exports.ViewTransitionBuilder = ViewTransitionBuilder;
     exports.acceleratedValues = acceleratedValues;
     exports.activeAnimations = activeAnimations;
+    exports.addAttrValue = addAttrValue;
     exports.addStyleValue = addStyleValue;
     exports.addUniqueItem = addUniqueItem;
     exports.alpha = alpha;
@@ -7289,6 +7386,7 @@
     exports.anticipate = anticipate;
     exports.applyPxDefaults = applyPxDefaults;
     exports.attachSpring = attachSpring;
+    exports.attrEffect = attrEffect;
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
@@ -7397,6 +7495,7 @@
     exports.press = press;
     exports.progress = progress;
     exports.progressPercentage = progressPercentage;
+    exports.propEffect = propEffect;
     exports.px = px;
     exports.readTransformValue = readTransformValue;
     exports.recordStats = recordStats;
@@ -7424,6 +7523,7 @@
     exports.supportsLinearEasing = supportsLinearEasing;
     exports.supportsPartialKeyframes = supportsPartialKeyframes;
     exports.supportsScrollTimeline = supportsScrollTimeline;
+    exports.svgEffect = svgEffect;
     exports.sync = sync;
     exports.testValueType = testValueType;
     exports.time = time;