motion 12.14.0 → 12.15.0

package/dist/cjs/index.js

@@ -3347,6 +3347,152 @@ const acceleratedValues = new Set([
     // "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.
@@ -3669,106 +3815,6 @@ function motionValue(init, options) {
     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",
@@ -3810,6 +3856,11 @@ const addStyleValue = (element, state, key, value) => {
     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);
             });
@@ -3842,6 +3893,38 @@ const addStyleValue = (element, state, key, value) => {
 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);
 
@@ -7289,6 +7372,7 @@ exports.SubscriptionManager = SubscriptionManager;
 exports.ViewTransitionBuilder = ViewTransitionBuilder;
 exports.acceleratedValues = acceleratedValues;
 exports.activeAnimations = activeAnimations;
+exports.addAttrValue = addAttrValue;
 exports.addStyleValue = addStyleValue;
 exports.addUniqueItem = addUniqueItem;
 exports.alpha = alpha;
@@ -7301,6 +7385,7 @@ exports.animationMapKey = animationMapKey;
 exports.anticipate = anticipate;
 exports.applyPxDefaults = applyPxDefaults;
 exports.attachSpring = attachSpring;
+exports.attrEffect = attrEffect;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
@@ -7409,6 +7494,7 @@ exports.positionalKeys = positionalKeys;
 exports.press = press;
 exports.progress = progress;
 exports.progressPercentage = progressPercentage;
+exports.propEffect = propEffect;
 exports.px = px;
 exports.readTransformValue = readTransformValue;
 exports.recordStats = recordStats;
@@ -7436,6 +7522,7 @@ exports.supportsFlags = supportsFlags;
 exports.supportsLinearEasing = supportsLinearEasing;
 exports.supportsPartialKeyframes = supportsPartialKeyframes;
 exports.supportsScrollTimeline = supportsScrollTimeline;
+exports.svgEffect = svgEffect;
 exports.sync = sync;
 exports.testValueType = testValueType;
 exports.time = time;

package/dist/cjs/react-client.js

@@ -3168,6 +3168,31 @@ class DOMKeyframesResolver extends KeyframeResolver {
     }
 }
 
+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);
+}
+
+/**
+ * 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;
+};
+
 /**
  * Maximum time between the value of two frames, beyond which we
  * assume the velocity has since been 0.
@@ -3484,31 +3509,6 @@ function motionValue(init, options) {
     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);
-}
-
-/**
- * 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;
-};
-
 const { schedule: microtask, cancel: cancelMicrotask } = 
 /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 

package/dist/es/motion/lib/index.mjs

@@ -39,7 +39,10 @@ export { supportsPartialKeyframes } from '../../motion-dom/dist/es/animation/waa
 export { supportsBrowserAnimation } from '../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs';
 export { acceleratedValues } from '../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs';
 export { generateLinearEasing } from '../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+export { addAttrValue, attrEffect } from '../../motion-dom/dist/es/effects/attr/index.mjs';
+export { propEffect } from '../../motion-dom/dist/es/effects/prop/index.mjs';
 export { addStyleValue, styleEffect } from '../../motion-dom/dist/es/effects/style/index.mjs';
+export { svgEffect } from '../../motion-dom/dist/es/effects/svg/index.mjs';
 export { createRenderBatcher } from '../../motion-dom/dist/es/frameloop/batcher.mjs';
 export { cancelMicrotask, microtask } from '../../motion-dom/dist/es/frameloop/microtask.mjs';
 export { time } from '../../motion-dom/dist/es/frameloop/sync-time.mjs';

package/dist/es/motion/lib/react.mjs

@@ -138,7 +138,10 @@ export { supportsPartialKeyframes } from '../../motion-dom/dist/es/animation/waa
 export { supportsBrowserAnimation } from '../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs';
 export { acceleratedValues } from '../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs';
 export { generateLinearEasing } from '../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+export { addAttrValue, attrEffect } from '../../motion-dom/dist/es/effects/attr/index.mjs';
+export { propEffect } from '../../motion-dom/dist/es/effects/prop/index.mjs';
 export { addStyleValue, styleEffect } from '../../motion-dom/dist/es/effects/style/index.mjs';
+export { svgEffect } from '../../motion-dom/dist/es/effects/svg/index.mjs';
 export { createRenderBatcher } from '../../motion-dom/dist/es/frameloop/batcher.mjs';
 export { cancelMicrotask, microtask } from '../../motion-dom/dist/es/frameloop/microtask.mjs';
 export { time } from '../../motion-dom/dist/es/frameloop/sync-time.mjs';

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

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

@@ -0,0 +1,9 @@
+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,5 +1,6 @@
 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';
@@ -11,6 +12,11 @@ const addStyleValue = (element, state, key, value) => {
     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);
             });

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

@@ -0,0 +1,41 @@
+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/render/dom/utils/camel-to-dash.mjs

@@ -0,0 +1,5 @@
+function camelToDash(str) {
+    return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
+
+export { camelToDash };