framer-motion 12.7.5 → 12.8.2

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-RWnxg4Sz.js');
+var create = require('./create-M6GRDJBe.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-RWnxg4Sz.js → create-M6GRDJBe.js}

@@ -364,28 +364,13 @@ function delay(callback, timeout) {
     return () => motionDom.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"];
@@ -2735,7 +2720,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                motionUtils.warnOnce(nextValue.version === "12.7.5", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5 may not work as expected.`);
+                motionUtils.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)) {
@@ -2903,8 +2888,7 @@ class VisualElement {
                 motionDom.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 } : {};
@@ -3106,7 +3090,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -3609,6 +3592,10 @@ function resolveVariant(visualElement, definition, custom) {
     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.
@@ -3621,6 +3608,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionDom.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 || {};
@@ -4504,7 +4495,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);
@@ -4898,7 +4889,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]);
             }
         });
         /**
@@ -5850,25 +5841,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
-        : motionDom.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);
@@ -5884,20 +5860,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)
@@ -5961,20 +5943,11 @@ function createUseRender(forwardMotionProps = false) {
     return useRender;
 }
 
-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) => {
@@ -6046,22 +6019,41 @@ 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 scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+    const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+    for (const key in props) {
+        if (isMotionValue(props[key]) ||
+            isMotionValue(prevProps[key])) {
+            const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
+                ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
+                : key;
+            newValues[targetKey] = props[key];
+        }
     }
+    return newValues;
+}
+
+const svgMotionConfig = {
+    useVisualState: makeUseVisualState({
+        scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
+        createRenderState: createSvgRenderState,
+    }),
+};
+
+function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
+    return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {
+        const baseConfig = isSVGComponent(Component)
+            ? svgMotionConfig
+            : htmlMotionConfig;
+        const config = {
+            ...baseConfig,
+            preloadedFeatures,
+            useRender: createUseRender(forwardMotionProps),
+            createVisualElement,
+            Component,
+        };
+        return createRendererMotionComponent(config);
+    };
 }
 
 /**
@@ -6100,93 +6092,12 @@ function renderSVG(element, renderState, _styleProp, projection) {
     }
 }
 
-function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-    const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
-    for (const key in props) {
-        if (isMotionValue(props[key]) ||
-            isMotionValue(prevProps[key])) {
-            const targetKey = motionDom.transformPropOrder.indexOf(key) !== -1
-                ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
-                : key;
-            newValues[targetKey] = props[key];
-        }
-    }
-    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 (motionDom.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;
-            motionDom.frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                motionDom.frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
-    }),
-};
-
-function createMotionComponentFactory(preloadedFeatures, createVisualElement) {
-    return function createMotionComponent(Component, { forwardMotionProps } = { forwardMotionProps: false }) {
-        const baseConfig = isSVGComponent(Component)
-            ? svgMotionConfig
-            : htmlMotionConfig;
-        const config = {
-            ...baseConfig,
-            preloadedFeatures,
-            useRender: createUseRender(forwardMotionProps),
-            createVisualElement,
-            Component,
-        };
-        return createRendererMotionComponent(config);
-    };
-}
-
 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];
@@ -6202,11 +6113,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            motionDom.frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }

package/dist/cjs/dom.js

@@ -345,11 +345,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) => {
@@ -402,6 +397,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionDom.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 || {};
@@ -760,7 +759,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                motionUtils.warnOnce(nextValue.version === "12.7.5", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5 may not work as expected.`);
+                motionUtils.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)) {
@@ -893,8 +892,7 @@ class VisualElement {
                 motionDom.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 } : {};
@@ -1096,7 +1094,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -1438,25 +1435,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
-        : motionDom.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);
@@ -1472,20 +1454,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)
@@ -1531,24 +1519,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.
@@ -1608,11 +1578,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];
@@ -1628,11 +1593,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            motionDom.frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }
@@ -2589,24 +2549,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 = motionDom.interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
-    return useImmediate ? interpolator(inputValue) : interpolator;
-}
-
 exports.animate = animate;
 exports.animateMini = animateMini;
 exports.createScopedAnimate = createScopedAnimate;
@@ -2617,7 +2559,6 @@ exports.inView = inView;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
 exports.stagger = stagger;
-exports.transform = transform;
 Object.keys(motionDom).forEach(function (k) {
     if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,

package/dist/cjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var create = require('./create-RWnxg4Sz.js');
+var create = require('./create-M6GRDJBe.js');
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
@@ -636,24 +636,6 @@ function useMotionValue(initial) {
     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 = motionDom.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.
@@ -707,7 +689,7 @@ function useTransform(input, inputRangeOrTransformer, outputRange, options) {
     }
     const transformer = typeof inputRangeOrTransformer === "function"
         ? inputRangeOrTransformer
-        : transform(inputRangeOrTransformer, outputRange, options);
+        : motionDom.transform(inputRangeOrTransformer, outputRange, options);
     return Array.isArray(input)
         ? useListTransform(input, transformer)
         : useListTransform([input], ([latest]) => transformer(latest));
@@ -3021,7 +3003,6 @@ exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
 exports.stagger = stagger;
 exports.startOptimizedAppearAnimation = startOptimizedAppearAnimation;
-exports.transform = transform;
 exports.unwrapMotionComponent = unwrapMotionComponent;
 exports.useAnimate = useAnimate;
 exports.useAnimateMini = useAnimateMini;