motion 12.11.4 → 12.12.1

package/dist/cjs/index.js

@@ -52,6 +52,10 @@ const MotionGlobalConfig = {};
  */
 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%"
  */
@@ -1423,7 +1427,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
@@ -2596,6 +2600,14 @@ function canAnimate(keyframes, name, type, velocity) {
         ((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.
  */
@@ -2604,16 +2616,13 @@ const acceleratedValues$1 = 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();
@@ -4029,7 +4038,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")) {
@@ -4174,6 +4183,22 @@ function recordStats() {
     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;
@@ -4268,6 +4293,74 @@ function mapValue(inputValue, inputRange, outputRange, options) {
     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
  */
@@ -4604,8 +4697,6 @@ const cancelSync = stepsOrder.reduce((acc, key) => {
     return acc;
 }, {});
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -5266,10 +5357,6 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
     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
@@ -6329,7 +6416,7 @@ function createDOMVisualElement(element) {
             latestValues: {},
         },
     };
-    const node = isSVGElement(element)
+    const node = isSVGElement(element) && !isSVGSVGElement(element)
         ? new SVGVisualElement(options)
         : new HTMLVisualElement(options);
     node.mount(element);
@@ -6553,7 +6640,7 @@ function getElementSize(target, borderBoxSize) {
         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 {
@@ -6695,7 +6782,7 @@ function calcInset(element, container) {
     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;
@@ -7186,6 +7273,7 @@ exports.animateView = animateView;
 exports.animationMapKey = animationMapKey;
 exports.anticipate = anticipate;
 exports.applyPxDefaults = applyPxDefaults;
+exports.attachSpring = attachSpring;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
@@ -7253,9 +7341,14 @@ exports.isDragActive = isDragActive;
 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;
@@ -7304,6 +7397,7 @@ exports.secondsToMilliseconds = secondsToMilliseconds;
 exports.setDragLock = setDragLock;
 exports.setStyle = setStyle;
 exports.spring = spring;
+exports.springValue = springValue;
 exports.stagger = stagger;
 exports.startWaapiAnimation = startWaapiAnimation;
 exports.statsBuffer = statsBuffer;

package/dist/cjs/react-client.js

@@ -91,6 +91,10 @@ const MotionGlobalConfig = {};
  */
 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%"
  */
@@ -1432,7 +1436,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
@@ -2591,6 +2595,14 @@ function canAnimate(keyframes, name, type, velocity) {
         ((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.
  */
@@ -2599,16 +2611,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();
@@ -3730,7 +3739,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")) {
@@ -3741,6 +3750,24 @@ function press(targetOrSelector, onPressStart, options = {}) {
     return cancelEvents;
 }
 
+/**
+ * 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";
+}
+
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
 /**
  * A list of all ValueTypes
  */
@@ -3780,8 +3807,6 @@ function setTarget(visualElement, definition) {
     }
 }
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
@@ -5955,10 +5980,6 @@ function animateSingleValue(value, keyframes, options) {
     return motionValue$1.animation;
 }
 
-function isSVGElement(element) {
-    return element instanceof SVGElement && element.tagName !== "svg";
-}
-
 const compareByDepth = (a, b) => a.depth - b.depth;
 
 class FlatTree {
@@ -6550,7 +6571,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
         mount(instance) {
             if (this.instance)
                 return;
-            this.isSVG = isSVGElement(instance);
+            this.isSVG = isSVGElement(instance) && !isSVGSVGElement(instance);
             this.instance = instance;
             const { layoutId, layout, visualElement } = this.options;
             if (visualElement && !visualElement.current) {
@@ -8652,6 +8673,112 @@ function useHTMLProps(props, visualState) {
     return htmlProps;
 }
 
+const dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+const camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    const keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = px.transform(-offset);
+    // Build the dash array
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
+    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
+}
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
+// This is object creation, which we try to avoid per-frame.
+...latest }, isSVGTag, transformTemplate, styleProp) {
+    buildHTMLStyles(state, latest, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
+    state.attrs = state.style;
+    state.style = {};
+    const { attrs, style } = state;
+    /**
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
+     */
+    if (attrs.transform) {
+        style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = styleProp?.transformBox ?? "fill-box";
+        delete attrs.transformBox;
+    }
+    // Render attrX/attrY/attrScale as attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    if (attrScale !== undefined)
+        attrs.scale = attrScale;
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+function useSVGProps(props, visualState, _isStatic, Component) {
+    const visualProps = react.useMemo(() => {
+        const state = createSvgRenderState();
+        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
+        return {
+            ...state.attrs,
+            style: { ...state.style },
+        };
+    }, [visualState]);
+    if (props.style) {
+        const rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+    return visualProps;
+}
+
 /**
  * A list of all valid MotionProps.
  *
@@ -8823,112 +8950,6 @@ function isSVGComponent(Component) {
     return false;
 }
 
-const dashKeys = {
-    offset: "stroke-dashoffset",
-    array: "stroke-dasharray",
-};
-const camelKeys = {
-    offset: "strokeDashoffset",
-    array: "strokeDasharray",
-};
-/**
- * Build SVG path properties. Uses the path's measured length to convert
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
- * and stroke-dasharray attributes.
- *
- * This function is mutative to reduce per-frame GC.
- */
-function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
-    // Normalise path length by setting SVG attribute pathLength to 1
-    attrs.pathLength = 1;
-    // We use dash case when setting attributes directly to the DOM node and camel case
-    // when defining props on a React component.
-    const keys = useDashCase ? dashKeys : camelKeys;
-    // Build the dash offset
-    attrs[keys.offset] = px.transform(-offset);
-    // Build the dash array
-    const pathLength = px.transform(length);
-    const pathSpacing = px.transform(spacing);
-    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
-}
-
-/**
- * Build SVG visual attrbutes, like cx and style.transform
- */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
-// This is object creation, which we try to avoid per-frame.
-...latest }, isSVGTag, transformTemplate, styleProp) {
-    buildHTMLStyles(state, latest, transformTemplate);
-    /**
-     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
-     * as normal HTML tags.
-     */
-    if (isSVGTag) {
-        if (state.style.viewBox) {
-            state.attrs.viewBox = state.style.viewBox;
-        }
-        return;
-    }
-    state.attrs = state.style;
-    state.style = {};
-    const { attrs, style } = state;
-    /**
-     * However, we apply transforms as CSS transforms.
-     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
-     */
-    if (attrs.transform) {
-        style.transform = attrs.transform;
-        delete attrs.transform;
-    }
-    if (style.transform || attrs.transformOrigin) {
-        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
-        delete attrs.transformOrigin;
-    }
-    if (style.transform) {
-        /**
-         * SVG's element transform-origin uses its own median as a reference.
-         * Therefore, transformBox becomes a fill-box
-         */
-        style.transformBox = styleProp?.transformBox ?? "fill-box";
-        delete attrs.transformBox;
-    }
-    // Render attrX/attrY/attrScale as attributes
-    if (attrX !== undefined)
-        attrs.x = attrX;
-    if (attrY !== undefined)
-        attrs.y = attrY;
-    if (attrScale !== undefined)
-        attrs.scale = attrScale;
-    // Build SVG path if one has been defined
-    if (pathLength !== undefined) {
-        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
-    }
-}
-
-const createSvgRenderState = () => ({
-    ...createHtmlRenderState(),
-    attrs: {},
-});
-
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
-function useSVGProps(props, visualState, _isStatic, Component) {
-    const visualProps = react.useMemo(() => {
-        const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
-        return {
-            ...state.attrs,
-            style: { ...state.style },
-        };
-    }, [visualState]);
-    if (props.style) {
-        const rawStyles = {};
-        copyRawValuesOnly(rawStyles, props.style, props);
-        visualProps.style = { ...rawStyles, ...visualProps.style };
-    }
-    return visualProps;
-}
-
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, ref, { latestValues }, isStatic) => {
         const useVisualProps = isSVGComponent(Component)