motion 12.7.5 → 12.8.2

package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs

@@ -4,12 +4,10 @@ import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';
-import { updateSVGDimensions } from './utils/measure.mjs';
 import { renderSVG } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 import { getDefaultValueType } from '../../../../../motion-dom/dist/es/value/types/maps/defaults.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
@@ -17,11 +15,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];
@@ -37,11 +30,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);
     }

package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs

@@ -1,56 +1,11 @@
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
-import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
-import { isSVGTag } from './utils/is-svg-tag.mjs';
-import { updateSVGDimensions } from './utils/measure.mjs';
-import { renderSVG } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
-import { transformProps } from '../../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
-import { frame } from '../../../../../motion-dom/dist/es/frameloop/frame.mjs';
 
-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);
-                });
-            });
-        },
     }),
 };
 

package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs

@@ -1,11 +1,10 @@
 import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
 import { buildSVGPath } from './path.mjs';
-import { calcSVGTransformOrigin } from './transform-origin.mjs';
 
 /**
  * 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);
@@ -21,20 +20,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)

package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs

@@ -17,7 +17,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)) {

package/dist/es/framer-motion/dist/es/render/utils/setters.mjs

@@ -1,4 +1,4 @@
-import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
+import { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';
 import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
 
@@ -14,6 +14,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 || {};

package/dist/es/framer-motion/dist/es/value/use-transform.mjs

@@ -1,7 +1,7 @@
-import { transform } from '../utils/transform.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useCombineMotionValues } from './use-combine-values.mjs';
 import { useComputed } from './use-computed.mjs';
+import { transform } from '../../../../motion-dom/dist/es/utils/transform.mjs';
 
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
     if (typeof input === "function") {

package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs

@@ -1,4 +1,3 @@
-import { isCustomValue } from '../../utils/resolve-value.mjs';
 import { isMotionValue } from './is-motion-value.mjs';
 
 /**
@@ -7,10 +6,7 @@ import { isMotionValue } from './is-motion-value.mjs';
  * 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;
 }
 
 export { resolveMotionValue };

package/dist/es/motion/lib/index.mjs

@@ -6,7 +6,6 @@ export { inView } from '../../framer-motion/dist/es/render/dom/viewport/index.mj
 export { stagger } from '../../framer-motion/dist/es/animation/utils/stagger.mjs';
 export { delayInSeconds as delay } from '../../framer-motion/dist/es/utils/delay.mjs';
 export { distance, distance2D } from '../../framer-motion/dist/es/utils/distance.mjs';
-export { transform } from '../../framer-motion/dist/es/utils/transform.mjs';
 export { AsyncMotionValueAnimation } from '../../motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs';
 export { GroupAnimation } from '../../motion-dom/dist/es/animation/GroupAnimation.mjs';
 export { GroupAnimationWithThen } from '../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
@@ -69,7 +68,10 @@ export { resolveElements } from '../../motion-dom/dist/es/utils/resolve-elements
 export { supportsFlags } from '../../motion-dom/dist/es/utils/supports/flags.mjs';
 export { supportsLinearEasing } from '../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 export { supportsScrollTimeline } from '../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs';
+export { transform } from '../../motion-dom/dist/es/utils/transform.mjs';
 export { MotionValue, collectMotionValues, motionValue } from '../../motion-dom/dist/es/value/index.mjs';
+export { mapValue } from '../../motion-dom/dist/es/value/map-value.mjs';
+export { transformValue } from '../../motion-dom/dist/es/value/transform-value.mjs';
 export { color } from '../../motion-dom/dist/es/value/types/color/index.mjs';
 export { hex } from '../../motion-dom/dist/es/value/types/color/hex.mjs';
 export { hsla } from '../../motion-dom/dist/es/value/types/color/hsla.mjs';

package/dist/es/motion/lib/react.mjs

@@ -78,7 +78,6 @@ export { scroll } from '../../framer-motion/dist/es/render/dom/scroll/index.mjs'
 export { scrollInfo } from '../../framer-motion/dist/es/render/dom/scroll/track.mjs';
 export { inView } from '../../framer-motion/dist/es/render/dom/viewport/index.mjs';
 export { stagger } from '../../framer-motion/dist/es/animation/utils/stagger.mjs';
-export { transform } from '../../framer-motion/dist/es/utils/transform.mjs';
 export { distance, distance2D } from '../../framer-motion/dist/es/utils/distance.mjs';
 export { addUniqueItem, moveItem, removeItem } from '../../motion-utils/dist/es/array.mjs';
 export { clamp } from '../../motion-utils/dist/es/clamp.mjs';
@@ -168,7 +167,10 @@ export { resolveElements } from '../../motion-dom/dist/es/utils/resolve-elements
 export { supportsFlags } from '../../motion-dom/dist/es/utils/supports/flags.mjs';
 export { supportsLinearEasing } from '../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 export { supportsScrollTimeline } from '../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs';
+export { transform } from '../../motion-dom/dist/es/utils/transform.mjs';
 export { MotionValue, collectMotionValues, motionValue } from '../../motion-dom/dist/es/value/index.mjs';
+export { mapValue } from '../../motion-dom/dist/es/value/map-value.mjs';
+export { transformValue } from '../../motion-dom/dist/es/value/transform-value.mjs';
 export { color } from '../../motion-dom/dist/es/value/types/color/index.mjs';
 export { hex } from '../../motion-dom/dist/es/value/types/color/hex.mjs';
 export { hsla } from '../../motion-dom/dist/es/value/types/color/hsla.mjs';

package/dist/es/{framer-motion → motion-dom}/dist/es/utils/transform.mjs

@@ -1,9 +1,5 @@
-import { interpolate } from '../../../../motion-dom/dist/es/utils/interpolate.mjs';
+import { interpolate } from './interpolate.mjs';
 
-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;
@@ -11,10 +7,7 @@ function transform(...args) {
     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,
-    });
+    const interpolator = interpolate(inputRange, outputRange, options);
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -32,7 +32,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
@@ -176,8 +176,6 @@ class MotionValue {
      * @public
      */
     set(v, render = true) {
-        if (v === "none")
-            console.trace();
         if (!render || !this.passiveEffect) {
             this.updateAndNotify(v, render);
         }
@@ -301,6 +299,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
         if (this.stopPassiveEffect) {

package/dist/es/motion-dom/dist/es/value/map-value.mjs

@@ -0,0 +1,46 @@
+import { transform } from '../utils/transform.mjs';
+import { transformValue } from './transform-value.mjs';
+
+/**
+ * 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()));
+}
+
+export { mapValue };

package/dist/es/motion-dom/dist/es/value/subscribe-value.mjs

@@ -0,0 +1,13 @@
+import { cancelFrame, frame } from '../frameloop/frame.mjs';
+
+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);
+    });
+}
+
+export { subscribeValue };

package/dist/es/motion-dom/dist/es/value/transform-value.mjs

@@ -0,0 +1,35 @@
+import { collectMotionValues, motionValue } from './index.mjs';
+import { subscribeValue } from './subscribe-value.mjs';
+
+/**
+ * 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;
+}
+
+export { transformValue };

package/dist/es/motion-dom/dist/es/value/types/maps/number.mjs

@@ -41,7 +41,6 @@ const numberValueTypes = {
     backgroundPositionY: px,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,