motion 12.7.5 → 12.8.2

package/dist/motion.dev.js

@@ -892,7 +892,7 @@
     function mixNumber(a, b) {
         return (p) => mixNumber$1(a, b, p);
     }
-    function getMixer$1(a) {
+    function getMixer(a) {
         if (typeof a === "number") {
             return mixNumber;
         }
@@ -914,7 +914,7 @@
     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);
@@ -927,7 +927,7 @@
         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) => {
@@ -977,7 +977,7 @@
             typeof p === "number") {
             return mixNumber$1(from, to, p);
         }
-        const mixer = getMixer$1(from);
+        const mixer = getMixer(from);
         return mixer(from, to);
     }
 
@@ -3085,7 +3085,6 @@
         backgroundPositionY: px,
         ...transformValueTypes,
         zIndex: int,
-        size: px,
         // SVG
         fillOpacity: alpha,
         strokeOpacity: alpha,
@@ -3739,6 +3738,17 @@
         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.
@@ -3767,7 +3777,7 @@
              * 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
@@ -3911,8 +3921,6 @@
          * @public
          */
         set(v, render = true) {
-            if (v === "none")
-                console.trace();
             if (!render || !this.passiveEffect) {
                 this.updateAndNotify(v, render);
             }
@@ -4036,6 +4044,7 @@
          * @public
          */
         destroy() {
+            this.events.destroy?.notify();
             this.clearListeners();
             this.stop();
             if (this.stopPassiveEffect) {
@@ -4047,6 +4056,89 @@
         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
      */
@@ -4732,11 +4824,6 @@
         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) => {
@@ -4789,6 +4876,10 @@
             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 || {};
@@ -5147,7 +5238,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    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)) {
@@ -5280,8 +5371,7 @@
                     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 } : {};
@@ -5483,7 +5573,6 @@
             if (this.handleChildMotionValue) {
                 this.handleChildMotionValue();
             }
-            this.onUpdate && this.onUpdate(this);
         }
         getProps() {
             return this.props;
@@ -5825,25 +5914,10 @@
         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);
@@ -5859,20 +5933,26 @@
         }
         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)
@@ -5918,24 +5998,6 @@
 
     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.
@@ -5995,11 +6057,6 @@
             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];
@@ -6015,11 +6072,6 @@
         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);
         }
@@ -6976,24 +7028,6 @@
         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;
@@ -7065,7 +7099,7 @@
     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;
@@ -7092,6 +7126,7 @@
     exports.isZeroValueString = isZeroValueString;
     exports.keyframes = keyframes;
     exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
+    exports.mapValue = mapValue;
     exports.maxGeneratorDuration = maxGeneratorDuration;
     exports.memo = memo;
     exports.microtask = microtask;
@@ -7151,6 +7186,7 @@
     exports.transform = transform;
     exports.transformPropOrder = transformPropOrder;
     exports.transformProps = transformProps;
+    exports.transformValue = transformValue;
     exports.transformValueTypes = transformValueTypes;
     exports.velocityPerSecond = velocityPerSecond;
     exports.vh = vh;