motion 12.8.0 → 12.9.0

package/dist/cjs/react-client.js

@@ -1873,7 +1873,6 @@ class JSAnimation extends WithPromise {
         this.holdTime = null;
     }
     finish() {
-        this.notifyFinished();
         this.teardown();
         this.state = "finished";
         const { onComplete } = this.options;
@@ -1886,6 +1885,7 @@ class JSAnimation extends WithPromise {
         this.teardown();
     }
     teardown() {
+        this.notifyFinished();
         this.state = "idle";
         this.stopDriver();
         this.startTime = this.holdTime = null;
@@ -2325,7 +2325,7 @@ class NativeAnimation extends WithPromise {
         this.isStopped = false;
         if (!options)
             return;
-        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
         this.options = options;
@@ -2351,8 +2351,13 @@ class NativeAnimation extends WithPromise {
                 }
                 this.animation.cancel();
             }
+            onComplete?.();
             this.notifyFinished();
         };
+        /**
+         * TODO: In a breaking change, we should replace this with `.notifyCancel()`
+         */
+        this.animation.oncancel = () => this.notifyFinished();
     }
     play() {
         if (this.isStopped)
@@ -2677,7 +2682,7 @@ class AsyncMotionValueAnimation extends WithPromise {
     }
     onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
         this.keyframeResolver = undefined;
-        const { name, type, velocity, delay, isHandoff, onUpdate, onComplete } = options;
+        const { name, type, velocity, delay, isHandoff, onUpdate } = options;
         this.resolvedAt = time.now();
         /**
          * If we can't animate this value with the resolved keyframes
@@ -2727,12 +2732,7 @@ class AsyncMotionValueAnimation extends WithPromise {
                 element: resolvedOptions.motionValue.owner.current,
             })
             : new JSAnimation(resolvedOptions);
-        animation.finished
-            .then(() => {
-            onComplete?.();
-            this.notifyFinished();
-        })
-            .catch(noop);
+        animation.finished.then(() => this.notifyFinished()).catch(noop);
         if (this.pendingTimeline) {
             this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -3171,6 +3171,22 @@ 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);
+}
+
 const { schedule: microtask, cancel: cancelMicrotask } = 
 /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
@@ -3207,22 +3223,6 @@ function setDragLock(axis) {
     }
 }
 
-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 setupGesture(elementOrSelector, options) {
     const elements = resolveElements(elementOrSelector);
     const gestureAbortController = new AbortController();
@@ -3449,7 +3449,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.8.0";
+        this.version = "12.9.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3475,12 +3475,12 @@ class MotionValue {
             this.prev = this.current;
             this.setCurrent(v);
             // Update update subscribers
-            if (this.current !== this.prev && this.events.change) {
-                this.events.change.notify(this.current);
+            if (this.current !== this.prev) {
+                this.events.change?.notify(this.current);
             }
             // Update render subscribers
-            if (render && this.events.renderRequest) {
-                this.events.renderRequest.notify(this.current);
+            if (render) {
+                this.events.renderRequest?.notify(this.current);
             }
         };
         this.hasAnimated = false;
@@ -3593,8 +3593,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
@@ -3986,6 +3984,17 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             delay,
             ...getValueTransition(transition || {}, key),
         };
+        /**
+         * If the value is already at the defined target, skip the animation.
+         */
+        const currentValue = value.get();
+        if (currentValue !== undefined &&
+            !value.isAnimating &&
+            !Array.isArray(valueTarget) &&
+            valueTarget === currentValue &&
+            !valueTransition.velocity) {
+            continue;
+        }
         /**
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.
@@ -5085,7 +5094,7 @@ function calcViewportConstraints(layoutBox, constraintsBox) {
  * Calculate a transform origin relative to the source axis, between 0-1, that results
  * in an asthetically pleasing scale/transform needed to project from source to target.
  */
-function calcOrigin$1(source, target) {
+function calcOrigin(source, target) {
     let origin = 0.5;
     const sourceLength = calcLength(source);
     const targetLength = calcLength(target);
@@ -5479,7 +5488,7 @@ class VisualElementDragControls {
             const axisValue = this.getAxisMotionValue(axis);
             if (axisValue && this.constraints !== false) {
                 const latest = axisValue.get();
-                boxProgress[axis] = calcOrigin$1({ min: latest, max: latest }, this.constraints[axis]);
+                boxProgress[axis] = calcOrigin({ min: latest, max: latest }, this.constraints[axis]);
             }
         });
         /**
@@ -8832,25 +8841,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
-function calcOrigin(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+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) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -8866,20 +8860,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * 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) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    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 = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
@@ -8958,20 +8958,11 @@ function useConstant(init) {
     return ref.current;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
@@ -9058,68 +9049,6 @@ const htmlMotionConfig = {
     }),
 };
 
-function updateSVGDimensions(instance, renderState) {
-    try {
-        renderState.dimensions =
-            typeof instance.getBBox === "function"
-                ? instance.getBBox()
-                : instance.getBoundingClientRect();
-    }
-    catch (e) {
-        // Most likely trying to measure an unrendered element under Firefox
-        renderState.dimensions = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-        };
-    }
-}
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
@@ -9134,49 +9063,10 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
-            if (!current)
-                return;
-            let hasTransform = !!props.drag;
-            if (!hasTransform) {
-                for (const key in latestValues) {
-                    if (transformProps.has(key)) {
-                        hasTransform = true;
-                        break;
-                    }
-                }
-            }
-            if (!hasTransform)
-                return;
-            let needsMeasure = !prevProps;
-            if (prevProps) {
-                /**
-                 * Check the layout props for changes, if any are found we need to
-                 * measure the element again.
-                 */
-                for (let i = 0; i < layoutProps.length; i++) {
-                    const key = layoutProps[i];
-                    if (props[key] !==
-                        prevProps[key]) {
-                        needsMeasure = true;
-                    }
-                }
-            }
-            if (!needsMeasure)
-                return;
-            frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
     }),
 };
 
@@ -9232,7 +9122,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
+                warnOnce(nextValue.version === "12.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -9365,8 +9255,7 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState, onUpdate } = visualState;
-        this.onUpdate = onUpdate;
+        const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -9568,7 +9457,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -9766,6 +9654,14 @@ class DOMVisualElement extends VisualElement {
     }
 }
 
+function renderHTML(element, { style, vars }, styleProp, projection) {
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (const key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
 function getComputedStyle$1(element) {
     return window.getComputedStyle(element);
 }
@@ -9798,17 +9694,48 @@ class HTMLVisualElement extends DOMVisualElement {
     }
 }
 
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+]);
+
+function renderSVG(element, renderState, _styleProp, projection) {
+    renderHTML(element, renderState, undefined, projection);
+    for (const key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
-        this.updateDimensions = () => {
-            if (this.current && !this.renderState.dimensions) {
-                updateSVGDimensions(this.current, this.renderState);
-            }
-        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -9824,11 +9751,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }