motion 12.7.5 → 12.8.2

package/dist/cjs/index.js

@@ -890,7 +890,7 @@ function mixVisibility(origin, target) {
 function mixNumber(a, b) {
     return (p) => mixNumber$1(a, b, p);
 }
-function getMixer$1(a) {
+function getMixer(a) {
     if (typeof a === "number") {
         return mixNumber;
     }
@@ -912,7 +912,7 @@ function getMixer$1(a) {
 function mixArray(a, b) {
     const output = [...a];
     const numValues = output.length;
-    const blendValue = a.map((v, i) => getMixer$1(v)(v, b[i]));
+    const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
     return (p) => {
         for (let i = 0; i < numValues; i++) {
             output[i] = blendValue[i](p);
@@ -925,7 +925,7 @@ function mixObject(a, b) {
     const blendValue = {};
     for (const key in output) {
         if (a[key] !== undefined && b[key] !== undefined) {
-            blendValue[key] = getMixer$1(a[key])(a[key], b[key]);
+            blendValue[key] = getMixer(a[key])(a[key], b[key]);
         }
     }
     return (v) => {
@@ -975,7 +975,7 @@ function mix(from, to, p) {
         typeof p === "number") {
         return mixNumber$1(from, to, p);
     }
-    const mixer = getMixer$1(from);
+    const mixer = getMixer(from);
     return mixer(from, to);
 }
 
@@ -3084,7 +3084,6 @@ const numberValueTypes = {
     backgroundPositionY: px,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -3738,6 +3737,17 @@ function recordStats() {
     return reportStats;
 }
 
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, options);
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
 /**
  * Maximum time between the value of two frames, beyond which we
  * assume the velocity has since been 0.
@@ -3766,7 +3776,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.7.5";
+        this.version = "12.8.1";
         /**
          * 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
@@ -3910,8 +3920,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
@@ -4035,6 +4043,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
         if (this.stopPassiveEffect) {
@@ -4046,6 +4055,89 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 
+function subscribeValue(inputValues, outputValue, getLatest) {
+    const update = () => outputValue.set(getLatest());
+    const scheduleUpdate = () => frame.preRender(update, false, true);
+    const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
+    outputValue.on("destroy", () => {
+        subscriptions.forEach((unsubscribe) => unsubscribe());
+        cancelFrame(update);
+    });
+}
+
+/**
+ * Create a `MotionValue` that transforms the output of other `MotionValue`s by
+ * passing their latest values through a transform function.
+ *
+ * Whenever a `MotionValue` referred to in the provided function is updated,
+ * it will be re-evaluated.
+ *
+ * ```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 transformValue(transform) {
+    const collectedValues = [];
+    /**
+     * Open session of collectMotionValues. Any MotionValue that calls get()
+     * inside transform will be saved into this array.
+     */
+    collectMotionValues.current = collectedValues;
+    const initialValue = transform();
+    collectMotionValues.current = undefined;
+    const value = motionValue(initialValue);
+    subscribeValue(collectedValues, value, transform);
+    return value;
+}
+
+/**
+ * Create a `MotionValue` that maps the output of another `MotionValue` by
+ * mapping it from one range of values into another.
+ *
+ * @remarks
+ *
+ * Given an input range of `[-200, -100, 100, 200]` and an output range of
+ * `[0, 1, 1, 0]`, the returned `MotionValue` will:
+ *
+ * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
+ * - When provided a value between `-100` and `100`, will return `1`.
+ * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
+ *
+ * The input range must be a linear series of numbers. The output range
+ * can be any value type supported by Motion: numbers, colors, shadows, etc.
+ *
+ * Every value in the output range must be of the same type and in the same format.
+ *
+ * ```jsx
+ * const x = motionValue(0)
+ * const xRange = [-200, -100, 100, 200]
+ * const opacityRange = [0, 1, 1, 0]
+ * const opacity = mapValue(x, xRange, opacityRange)
+ * ```
+ *
+ * @param inputValue - `MotionValue`
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+ * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
+ * @param options -
+ *
+ *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
+ *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
+ *
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function mapValue(inputValue, inputRange, outputRange, options) {
+    const map = transform(inputRange, outputRange, options);
+    return transformValue(() => map(inputValue.get()));
+}
+
 /**
  * A list of all ValueTypes
  */
@@ -4731,11 +4823,6 @@ const isKeyframesTarget = (v) => {
     return Array.isArray(v);
 };
 
-const resolveFinalValueInKeyframes = (v) => {
-    // TODO maybe throw if v.length - 1 is placeholder token?
-    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-
 function getValueState(visualElement) {
     const state = [{}, {}];
     visualElement?.values.forEach((value, key) => {
@@ -4788,6 +4875,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionValue(value));
     }
 }
+function resolveFinalValueInKeyframes(v) {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+}
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
     let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
@@ -5146,7 +5237,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.5", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5 may not work as expected.`);
+                warnOnce(nextValue.version === "12.8.2", `Attempting to mix Motion versions ${nextValue.version} with 12.8.2 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5279,8 +5370,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 } : {};
@@ -5482,7 +5572,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -5824,25 +5913,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);
@@ -5858,20 +5932,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)
@@ -5917,24 +5997,6 @@ const camelCaseAttributes = new Set([
 
 const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
 
-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.
@@ -5994,11 +6056,6 @@ class SVGVisualElement extends DOMVisualElement {
         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];
@@ -6014,11 +6071,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);
     }
@@ -6975,24 +7027,6 @@ function distance2D(a, b) {
     return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
 
-const isCustomValueType = (v) => {
-    return v && typeof v === "object" && v.mix;
-};
-const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
-function transform(...args) {
-    const useImmediate = !Array.isArray(args[0]);
-    const argOffset = useImmediate ? 0 : -1;
-    const inputValue = args[0 + argOffset];
-    const inputRange = args[1 + argOffset];
-    const outputRange = args[2 + argOffset];
-    const options = args[3 + argOffset];
-    const interpolator = interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
-    return useImmediate ? interpolator(inputValue) : interpolator;
-}
-
 exports.AsyncMotionValueAnimation = AsyncMotionValueAnimation;
 exports.DOMKeyframesResolver = DOMKeyframesResolver;
 exports.GroupAnimation = GroupAnimation;
@@ -7064,7 +7098,7 @@ exports.getAnimationMap = getAnimationMap;
 exports.getComputedStyle = getComputedStyle$2;
 exports.getDefaultValueType = getDefaultValueType;
 exports.getEasingForSegment = getEasingForSegment;
-exports.getMixer = getMixer$1;
+exports.getMixer = getMixer;
 exports.getValueAsType = getValueAsType;
 exports.getValueTransition = getValueTransition$1;
 exports.getVariableValue = getVariableValue;
@@ -7091,6 +7125,7 @@ exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
 exports.isZeroValueString = isZeroValueString;
 exports.keyframes = keyframes;
 exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
+exports.mapValue = mapValue;
 exports.maxGeneratorDuration = maxGeneratorDuration;
 exports.memo = memo;
 exports.microtask = microtask;
@@ -7150,6 +7185,7 @@ exports.time = time;
 exports.transform = transform;
 exports.transformPropOrder = transformPropOrder;
 exports.transformProps = transformProps;
+exports.transformValue = transformValue;
 exports.transformValueTypes = transformValueTypes;
 exports.velocityPerSecond = velocityPerSecond;
 exports.vh = vh;