framer-motion 12.7.5-alpha.2 → 12.8.0

package/dist/framer-motion.dev.js

@@ -1348,7 +1348,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;
         }
@@ -1370,7 +1370,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);
@@ -1383,7 +1383,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) => {
@@ -1433,7 +1433,7 @@
             typeof p === "number") {
             return mixNumber$1(from, to, p);
         }
-        const mixer = getMixer$1(from);
+        const mixer = getMixer(from);
         return mixer(from, to);
     }
 
@@ -3541,7 +3541,6 @@
         backgroundPositionY: px,
         ...transformValueTypes,
         zIndex: int,
-        size: px,
         // SVG
         fillOpacity: alpha,
         strokeOpacity: alpha,
@@ -3577,7 +3576,7 @@
         let defaultValueType = getDefaultValueType(key);
         if (defaultValueType !== filter)
             defaultValueType = complex;
-        // If value is not recognised as animatable, ie "one", create an animatable version origin based on the target
+        // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
         return defaultValueType.getAnimatableNone
             ? defaultValueType.getAnimatableNone(value)
             : undefined;
@@ -4195,6 +4194,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.
@@ -4223,7 +4233,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-alpha.2";
+            this.version = "12.8.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
@@ -4492,6 +4502,7 @@
          * @public
          */
         destroy() {
+            this.events.destroy?.notify();
             this.clearListeners();
             this.stop();
             if (this.stopPassiveEffect) {
@@ -4503,6 +4514,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
      */
@@ -5128,28 +5222,13 @@
         return () => cancelFrame(checkElapsed);
     }
 
-    const isKeyframesTarget = (v) => {
-        return Array.isArray(v);
-    };
-
-    const isCustomValue = (v) => {
-        return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-    };
-    const resolveFinalValueInKeyframes = (v) => {
-        // TODO maybe throw if v.length - 1 is placeholder token?
-        return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-    };
-
     /**
      * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
      *
      * TODO: Remove and move to library
      */
     function resolveMotionValue(value) {
-        const unwrappedValue = isMotionValue(value) ? value.get() : value;
-        return isCustomValue(unwrappedValue)
-            ? unwrappedValue.toValue()
-            : unwrappedValue;
+        return isMotionValue(value) ? value.get() : value;
     }
 
     const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
@@ -7499,7 +7578,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.7.5-alpha.2", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5-alpha.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -8559,6 +8638,10 @@
         return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
     }
 
+    const isKeyframesTarget = (v) => {
+        return Array.isArray(v);
+    };
+
     /**
      * Set VisualElement's MotionValue, creating a new MotionValue for it if
      * it doesn't exist.
@@ -8571,6 +8654,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 || {};
@@ -11280,24 +11367,6 @@
         return value;
     }
 
-    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;
-    }
-
     function useCombineMotionValues(values, combineValues) {
         /**
          * Initialise the returned motion value. This remains the same between renders.
@@ -13708,7 +13777,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;
@@ -13741,6 +13810,7 @@
     exports.m = m;
     exports.makeUseVisualState = makeUseVisualState;
     exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
+    exports.mapValue = mapValue;
     exports.maxGeneratorDuration = maxGeneratorDuration;
     exports.memo = memo;
     exports.microtask = microtask;
@@ -13804,6 +13874,7 @@
     exports.transform = transform;
     exports.transformPropOrder = transformPropOrder;
     exports.transformProps = transformProps;
+    exports.transformValue = transformValue;
     exports.transformValueTypes = transformValueTypes;
     exports.unwrapMotionComponent = unwrapMotionComponent;
     exports.useAnimate = useAnimate;