motion 12.11.4 → 12.12.1

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

@@ -1,3 +1,4 @@
+import { isHTMLElement } from '../../../utils/is-html-element.mjs';
 import { memo } from '../../../../../../motion-utils/dist/es/memo.mjs';
 
 /**
@@ -8,16 +9,13 @@ const acceleratedValues = new Set([
     "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.
+    // 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 (!motionValue ||
-        !motionValue.owner ||
-        !(motionValue.owner.current instanceof HTMLElement)) {
+    if (!isHTMLElement(motionValue?.owner?.current)) {
         return false;
     }
     const { onUpdate, transformTemplate } = motionValue.owner.getProps();

package/dist/es/motion-dom/dist/es/gestures/press/index.mjs

@@ -1,3 +1,4 @@
+import { isHTMLElement } from '../../utils/is-html-element.mjs';
 import { isDragActive } from '../drag/state/is-active.mjs';
 import { isNodeOrChild } from '../utils/is-node-or-child.mjs';
 import { isPrimaryPointer } from '../utils/is-primary-pointer.mjs';
@@ -68,7 +69,7 @@ function press(targetOrSelector, onPressStart, options = {}) {
     targets.forEach((target) => {
         const pointerDownTarget = options.useGlobalTarget ? window : target;
         pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-        if (target instanceof HTMLElement) {
+        if (isHTMLElement(target)) {
             target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
             if (!isElementKeyboardAccessible(target) &&
                 !target.hasAttribute("tabindex")) {

package/dist/es/motion-dom/dist/es/utils/interpolate.mjs

@@ -34,7 +34,7 @@ function createMixers(output, ease, customMixer) {
  * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
  * ```
  *
- * TODO Revist this approach once we've moved to data models for values,
+ * TODO Revisit this approach once we've moved to data models for values,
  * probably not needed to pregenerate mixer functions.
  *
  * @public

package/dist/es/motion-dom/dist/es/utils/is-html-element.mjs

@@ -0,0 +1,11 @@
+import { isObject } from '../../../../motion-utils/dist/es/is-object.mjs';
+
+/**
+ * Checks if an element is an HTML element in a way
+ * that works across iframes
+ */
+function isHTMLElement(element) {
+    return isObject(element) && "offsetHeight" in element;
+}
+
+export { isHTMLElement };

package/dist/es/motion-dom/dist/es/utils/is-svg-element.mjs

@@ -0,0 +1,11 @@
+import { isObject } from '../../../../motion-utils/dist/es/is-object.mjs';
+
+/**
+ * Checks if an element is an SVG element in a way
+ * that works across iframes
+ */
+function isSVGElement(element) {
+    return isObject(element) && "ownerSVGElement" in element;
+}
+
+export { isSVGElement };

package/dist/es/motion-dom/dist/es/utils/is-svg-svg-element.mjs

@@ -0,0 +1,11 @@
+import { isSVGElement } from './is-svg-element.mjs';
+
+/**
+ * Checks if an element is specifically an SVGSVGElement (the root SVG element)
+ * in a way that works across iframes
+ */
+function isSVGSVGElement(element) {
+    return isSVGElement(element) && element.tagName === "svg";
+}
+
+export { isSVGSVGElement };

package/dist/es/motion-dom/dist/es/value/spring-value.mjs

@@ -0,0 +1,72 @@
+import { motionValue } from './index.mjs';
+import { JSAnimation } from '../animation/JSAnimation.mjs';
+import { isMotionValue } from './utils/is-motion-value.mjs';
+import { frame } from '../frameloop/frame.mjs';
+
+/**
+ * Create a `MotionValue` that animates to its latest value using a spring.
+ * Can either be a value or track another `MotionValue`.
+ *
+ * ```jsx
+ * const x = motionValue(0)
+ * const y = transformValue(() => x.get() * 2) // double x
+ * ```
+ *
+ * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function springValue(source, options) {
+    const initialValue = isMotionValue(source) ? source.get() : source;
+    const value = motionValue(initialValue);
+    attachSpring(value, source, options);
+    return value;
+}
+function attachSpring(value, source, options) {
+    const initialValue = value.get();
+    let activeAnimation = null;
+    let latestValue = initialValue;
+    let latestSetter;
+    const unit = typeof initialValue === "string"
+        ? initialValue.replace(/[\d.-]/g, "")
+        : undefined;
+    const stopAnimation = () => {
+        if (activeAnimation) {
+            activeAnimation.stop();
+            activeAnimation = null;
+        }
+    };
+    const startAnimation = () => {
+        stopAnimation();
+        activeAnimation = new JSAnimation({
+            keyframes: [asNumber(value.get()), asNumber(latestValue)],
+            velocity: value.getVelocity(),
+            type: "spring",
+            restDelta: 0.001,
+            restSpeed: 0.01,
+            ...options,
+            onUpdate: latestSetter,
+        });
+    };
+    value.attach((v, set) => {
+        latestValue = v;
+        latestSetter = (latest) => set(parseValue(latest, unit));
+        frame.postRender(startAnimation);
+        return value.get();
+    }, stopAnimation);
+    let unsubscribe = undefined;
+    if (isMotionValue(source)) {
+        unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
+        value.on("destroy", unsubscribe);
+    }
+    return unsubscribe;
+}
+function parseValue(v, unit) {
+    return unit ? v + unit : v;
+}
+function asNumber(v) {
+    return typeof v === "number" ? v : parseFloat(v);
+}
+
+export { attachSpring, springValue };

package/dist/es/motion-utils/dist/es/is-object.mjs

@@ -0,0 +1,5 @@
+function isObject(value) {
+    return typeof value === "object" && value !== null;
+}
+
+export { isObject };

package/dist/motion.dev.js

@@ -54,6 +54,10 @@
      */
     const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
 
+    function isObject(value) {
+        return typeof value === "object" && value !== null;
+    }
+
     /**
      * Check if the value is a zero value string like "0px" or "0%"
      */
@@ -1425,7 +1429,7 @@
      * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
      * ```
      *
-     * TODO Revist this approach once we've moved to data models for values,
+     * TODO Revisit this approach once we've moved to data models for values,
      * probably not needed to pregenerate mixer functions.
      *
      * @public
@@ -2597,6 +2601,14 @@
             ((type === "spring" || isGenerator(type)) && velocity));
     }
 
+    /**
+     * Checks if an element is an HTML element in a way
+     * that works across iframes
+     */
+    function isHTMLElement(element) {
+        return isObject(element) && "offsetHeight" in element;
+    }
+
     /**
      * A list of values that can be hardware-accelerated.
      */
@@ -2605,16 +2617,13 @@
         "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.
+        // 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 (!motionValue ||
-            !motionValue.owner ||
-            !(motionValue.owner.current instanceof HTMLElement)) {
+        if (!isHTMLElement(motionValue?.owner?.current)) {
             return false;
         }
         const { onUpdate, transformTemplate } = motionValue.owner.getProps();
@@ -4030,7 +4039,7 @@
         targets.forEach((target) => {
             const pointerDownTarget = options.useGlobalTarget ? window : target;
             pointerDownTarget.addEventListener("pointerdown", startPress, eventOptions);
-            if (target instanceof HTMLElement) {
+            if (isHTMLElement(target)) {
                 target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
                 if (!isElementKeyboardAccessible(target) &&
                     !target.hasAttribute("tabindex")) {
@@ -4175,6 +4184,22 @@
         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
+     */
+    function isSVGSVGElement(element) {
+        return isSVGElement(element) && element.tagName === "svg";
+    }
+
     function transform(...args) {
         const useImmediate = !Array.isArray(args[0]);
         const argOffset = useImmediate ? 0 : -1;
@@ -4269,6 +4294,74 @@
         return transformValue(() => map(inputValue.get()));
     }
 
+    const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+    /**
+     * Create a `MotionValue` that animates to its latest value using a spring.
+     * Can either be a value or track another `MotionValue`.
+     *
+     * ```jsx
+     * const x = motionValue(0)
+     * const y = transformValue(() => x.get() * 2) // double x
+     * ```
+     *
+     * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+     * @returns `MotionValue`
+     *
+     * @public
+     */
+    function springValue(source, options) {
+        const initialValue = isMotionValue(source) ? source.get() : source;
+        const value = motionValue(initialValue);
+        attachSpring(value, source, options);
+        return value;
+    }
+    function attachSpring(value, source, options) {
+        const initialValue = value.get();
+        let activeAnimation = null;
+        let latestValue = initialValue;
+        let latestSetter;
+        const unit = typeof initialValue === "string"
+            ? initialValue.replace(/[\d.-]/g, "")
+            : undefined;
+        const stopAnimation = () => {
+            if (activeAnimation) {
+                activeAnimation.stop();
+                activeAnimation = null;
+            }
+        };
+        const startAnimation = () => {
+            stopAnimation();
+            activeAnimation = new JSAnimation({
+                keyframes: [asNumber(value.get()), asNumber(latestValue)],
+                velocity: value.getVelocity(),
+                type: "spring",
+                restDelta: 0.001,
+                restSpeed: 0.01,
+                ...options,
+                onUpdate: latestSetter,
+            });
+        };
+        value.attach((v, set) => {
+            latestValue = v;
+            latestSetter = (latest) => set(parseValue(latest, unit));
+            frame.postRender(startAnimation);
+            return value.get();
+        }, stopAnimation);
+        let unsubscribe = undefined;
+        if (isMotionValue(source)) {
+            unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
+            value.on("destroy", unsubscribe);
+        }
+        return unsubscribe;
+    }
+    function parseValue(v, unit) {
+        return unit ? v + unit : v;
+    }
+    function asNumber(v) {
+        return typeof v === "number" ? v : parseFloat(v);
+    }
+
     /**
      * A list of all ValueTypes
      */
@@ -4605,8 +4698,6 @@
         return acc;
     }, {});
 
-    const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
     function isDOMKeyframes(keyframes) {
         return typeof keyframes === "object" && !Array.isArray(keyframes);
     }
@@ -5267,10 +5358,6 @@
         return animations;
     }
 
-    function isSVGElement(element) {
-        return element instanceof SVGElement && element.tagName !== "svg";
-    }
-
     /**
      * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
      * it's easier to consider each axis individually. This function returns a bounding box
@@ -6330,7 +6417,7 @@
                 latestValues: {},
             },
         };
-        const node = isSVGElement(element)
+        const node = isSVGElement(element) && !isSVGSVGElement(element)
             ? new SVGVisualElement(options)
             : new HTMLVisualElement(options);
         node.mount(element);
@@ -6554,7 +6641,7 @@
             const { inlineSize, blockSize } = borderBoxSize[0];
             return { width: inlineSize, height: blockSize };
         }
-        else if (target instanceof SVGElement && "getBBox" in target) {
+        else if (isSVGElement(target) && "getBBox" in target) {
             return target.getBBox();
         }
         else {
@@ -6696,7 +6783,7 @@
         const inset = { x: 0, y: 0 };
         let current = element;
         while (current && current !== container) {
-            if (current instanceof HTMLElement) {
+            if (isHTMLElement(current)) {
                 inset.x += current.offsetLeft;
                 inset.y += current.offsetTop;
                 current = current.offsetParent;
@@ -7187,6 +7274,7 @@
     exports.animationMapKey = animationMapKey;
     exports.anticipate = anticipate;
     exports.applyPxDefaults = applyPxDefaults;
+    exports.attachSpring = attachSpring;
     exports.backIn = backIn;
     exports.backInOut = backInOut;
     exports.backOut = backOut;
@@ -7254,9 +7342,14 @@
     exports.isDragging = isDragging;
     exports.isEasingArray = isEasingArray;
     exports.isGenerator = isGenerator;
+    exports.isHTMLElement = isHTMLElement;
+    exports.isMotionValue = isMotionValue;
     exports.isNodeOrChild = isNodeOrChild;
     exports.isNumericalString = isNumericalString;
+    exports.isObject = isObject;
     exports.isPrimaryPointer = isPrimaryPointer;
+    exports.isSVGElement = isSVGElement;
+    exports.isSVGSVGElement = isSVGSVGElement;
     exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
     exports.isZeroValueString = isZeroValueString;
     exports.keyframes = keyframes;
@@ -7305,6 +7398,7 @@
     exports.setDragLock = setDragLock;
     exports.setStyle = setStyle;
     exports.spring = spring;
+    exports.springValue = springValue;
     exports.stagger = stagger;
     exports.startWaapiAnimation = startWaapiAnimation;
     exports.statsBuffer = statsBuffer;