framer-motion 12.0.10 → 12.0.11

package/dist/framer-motion.dev.js

@@ -1078,7 +1078,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.0.10";
+            this.version = "12.0.11";
             /**
              * 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
@@ -5857,7 +5857,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "12.0.10", `Attempting to mix Motion versions ${nextValue.version} with 12.0.10 may not work as expected.`);
+                    warnOnce(nextValue.version === "12.0.11", `Attempting to mix Motion versions ${nextValue.version} with 12.0.11 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -6608,28 +6608,6 @@
         }
     }
 
-    const createHtmlRenderState = () => ({
-        style: {},
-        transform: {},
-        transformOrigin: {},
-        vars: {},
-    });
-
-    const createSvgRenderState = () => ({
-        ...createHtmlRenderState(),
-        attrs: {},
-    });
-
-    const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
-    function renderHTML(element, { style, vars }, styleProp, projection) {
-        Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-        // Loop over any CSS variables and assign those.
-        for (const key in vars) {
-            element.style.setProperty(key, vars[key]);
-        }
-    }
-
     /**
      * A set of attribute names that are always read/written as camel case.
      */
@@ -6659,6 +6637,34 @@
         "lengthAdjust",
     ]);
 
+    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.
+        for (const key in vars) {
+            element.style.setProperty(key, vars[key]);
+        }
+    }
+
     function renderSVG(element, renderState, _styleProp, projection) {
         renderHTML(element, renderState, undefined, projection);
         for (const key in renderState.attrs) {
@@ -6713,69 +6719,6 @@
         return newValues;
     }
 
-    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,
-            };
-        }
-    }
-    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);
-                    });
-                });
-            },
-        }),
-    };
-
     class SVGVisualElement extends DOMVisualElement {
         constructor() {
             super(...arguments);
@@ -11727,6 +11670,13 @@
         };
     }
 
+    const createHtmlRenderState = () => ({
+        style: {},
+        transform: {},
+        transformOrigin: {},
+        vars: {},
+    });
+
     function copyRawValuesOnly(target, source, props) {
         for (const key in source) {
             if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
@@ -11836,6 +11786,11 @@
         return false;
     }
 
+    const createSvgRenderState = () => ({
+        ...createHtmlRenderState(),
+        attrs: {},
+    });
+
     function useSVGProps(props, visualState, _isStatic, Component) {
         const visualProps = React$1.useMemo(() => {
             const state = createSvgRenderState();
@@ -11885,6 +11840,52 @@
         }),
     };
 
+    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)