framer-motion 12.8.0 → 12.8.2

package/dist/framer-motion.dev.js

@@ -4233,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.8.0";
+            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
@@ -4377,8 +4377,6 @@
          * @public
          */
         set(v, render = true) {
-            if (v === "none")
-                console.trace();
             if (!render || !this.passiveEffect) {
                 this.updateAndNotify(v, render);
             }
@@ -7578,7 +7576,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 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)) {
@@ -7746,8 +7744,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 } : {};
@@ -7949,7 +7946,6 @@
             if (this.handleChildMotionValue) {
                 this.handleChildMotionValue();
             }
-            this.onUpdate && this.onUpdate(this);
         }
         getProps() {
             return this.props;
@@ -9541,7 +9537,7 @@
      * 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);
@@ -9935,7 +9931,7 @@
                 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]);
                 }
             });
             /**
@@ -10886,25 +10882,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);
@@ -10920,20 +10901,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)
@@ -10997,20 +10984,11 @@
         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) => {
@@ -11082,22 +11060,41 @@
         }),
     };
 
-    function updateSVGDimensions(instance, renderState) {
-        try {
-            renderState.dimensions =
-                typeof instance.getBBox === "function"
-                    ? instance.getBBox()
-                    : instance.getBoundingClientRect();
+    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 = transformPropOrder.indexOf(key) !== -1
+                    ? "attr" + key.charAt(0).toUpperCase() + key.substring(1)
+                    : key;
+                newValues[targetKey] = props[key];
+            }
         }
-        catch (e) {
-            // Most likely trying to measure an unrendered element under Firefox
-            renderState.dimensions = {
-                x: 0,
-                y: 0,
-                width: 0,
-                height: 0,
+        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);
+        };
     }
 
     /**
@@ -11136,93 +11133,12 @@
         }
     }
 
-    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 = 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 (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);
-                    });
-                });
-            },
-        }),
-    };
-
-    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];
@@ -11238,11 +11154,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);
         }