framer-motion 11.18.0 → 11.18.1

package/dist/cjs/client.js

@@ -409,7 +409,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 = "11.18.0";
+        this.version = "11.18.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
@@ -5201,7 +5201,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.18.0", `Attempting to mix Motion versions ${nextValue.version} with 11.18.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.18.1", `Attempting to mix Motion versions ${nextValue.version} with 11.18.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5858,21 +5858,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-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}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -5902,6 +5887,21 @@ 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
+        : 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
  */
@@ -9086,10 +9086,12 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => updateSVGDimensions(current, renderState));
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                renderSVG(current, renderState);
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/cjs/dom.js

@@ -994,7 +994,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 = "11.18.0";
+        this.version = "11.18.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
@@ -3924,7 +3924,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.18.0", `Attempting to mix Motion versions ${nextValue.version} with 11.18.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.18.1", `Attempting to mix Motion versions ${nextValue.version} with 11.18.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4581,21 +4581,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-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}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -4625,6 +4610,21 @@ 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
+        : 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
  */

package/dist/cjs/index.js

@@ -445,7 +445,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 = "11.18.0";
+        this.version = "11.18.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
@@ -5215,7 +5215,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.18.0", `Attempting to mix Motion versions ${nextValue.version} with 11.18.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.18.1", `Attempting to mix Motion versions ${nextValue.version} with 11.18.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5872,21 +5872,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-function calcOrigin$1(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$1(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -5916,6 +5901,21 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
+function calcOrigin$1(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$1(originX, dimensions.x, dimensions.width);
+    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
+    return `${pxOriginX} ${pxOriginY}`;
+}
+
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
@@ -11095,10 +11095,12 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => updateSVGDimensions(current, renderState));
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                renderSVG(current, renderState);
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/cjs/m.js

@@ -1010,21 +1010,6 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
-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}`;
-}
-
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -1054,6 +1039,21 @@ 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
+        : 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
  */
@@ -1250,10 +1250,12 @@ const svgMotionConfig = {
             }
             if (!needsMeasure)
                 return;
-            frame.read(() => updateSVGDimensions(current, renderState));
-            frame.render(() => {
-                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                renderSVG(current, renderState);
+            frame.read(() => {
+                updateSVGDimensions(current, renderState);
+                frame.render(() => {
+                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                    renderSVG(current, renderState);
+                });
             });
         },
     }),

package/dist/client.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import * as React$1 from 'react';
+import * as react from 'react';
 import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, JSX } from 'react';
 import { AnimationPlaybackControls, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, Easing, Transition as Transition$1, ProgressTimeline } from 'motion-dom';
 
@@ -1232,7 +1232,7 @@ declare class DragControls {
      *
      * @public
      */
-    start(event: React$1.PointerEvent | PointerEvent, options?: DragControlOptions): void;
+    start(event: react.PointerEvent | PointerEvent, options?: DragControlOptions): void;
 }
 
 type DragElastic = boolean | number | Partial<BoundingBox>;
@@ -2375,9 +2375,9 @@ declare global {
 
 type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
-declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.ComponentType<Props>, { forwardMotionProps }?: {
+declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | react.ComponentType<Props>, { forwardMotionProps }?: {
     forwardMotionProps: boolean;
-}) => TagName extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "animate" | "stop" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ComponentType<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
+}) => TagName extends "symbol" | "clipPath" | "filter" | "mask" | "marker" | "text" | "animate" | "stop" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : react.ComponentType<MotionComponentProps<react.PropsWithChildren<Props>>>;
 
 /**
  * HTML components