motion 12.14.0 → 12.16.0

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 };

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es}/resize/handle-element.mjs

@@ -1,30 +1,29 @@
-import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
-import { isSVGElement } from '../../../../../../motion-dom/dist/es/utils/is-svg-element.mjs';
+import { isSVGElement } from '../utils/is-svg-element.mjs';
+import { resolveElements } from '../utils/resolve-elements.mjs';
 
 const resizeHandlers = new WeakMap();
 let observer;
-function getElementSize(target, borderBoxSize) {
-    if (borderBoxSize) {
-        const { inlineSize, blockSize } = borderBoxSize[0];
-        return { width: inlineSize, height: blockSize };
+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();
+        return target.getBBox()[svgAxis];
     }
     else {
-        return {
-            width: target.offsetWidth,
-            height: target.offsetHeight,
-        };
+        return target[htmlAxis];
     }
-}
-function notifyTarget({ target, contentRect, borderBoxSize, }) {
+};
+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,
-            contentSize: contentRect,
-            get size() {
-                return getElementSize(target, borderBoxSize);
+        handler(target, {
+            get width() {
+                return getWidth(target, borderBoxSize);
+            },
+            get height() {
+                return getHeight(target, borderBoxSize);
             },
         });
     });

package/dist/es/{framer-motion/dist/es/render/dom → motion-dom/dist/es}/resize/handle-window.mjs

@@ -2,14 +2,13 @@ const windowCallbacks = new Set();
 let windowResizeHandler;
 function createWindowResizeHandler() {
     windowResizeHandler = () => {
-        const size = {
-            width: window.innerWidth,
-            height: window.innerHeight,
-        };
         const info = {
-            target: window,
-            size,
-            contentSize: size,
+            get width() {
+                return window.innerWidth;
+            },
+            get height() {
+                return window.innerHeight;
+            },
         };
         windowCallbacks.forEach((callback) => callback(info));
     };
@@ -21,7 +20,9 @@ function resizeWindow(callback) {
         createWindowResizeHandler();
     return () => {
         windowCallbacks.delete(callback);
-        if (!windowCallbacks.size && windowResizeHandler) {
+        if (!windowCallbacks.size &&
+            typeof windowResizeHandler === "function") {
+            window.removeEventListener("resize", windowResizeHandler);
             windowResizeHandler = undefined;
         }
     };