motion 11.17.0 → 11.17.1

package/dist/cjs/react-m.js

@@ -142,7 +142,9 @@ function isRefObject(ref) {
  */
 function useMotionRef(visualState, visualElement, externalRef) {
     return react.useCallback((instance) => {
-        instance && visualState.mount && visualState.mount(instance);
+        if (instance) {
+            visualState.onMount && visualState.onMount(instance);
+        }
         if (visualElement) {
             if (instance) {
                 visualElement.mount(instance);
@@ -604,117 +606,7 @@ function isSVGComponent(Component) {
     return false;
 }
 
-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.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
-/**
- * Generate a list of every possible transform key.
- */
-const transformPropOrder = [
-    "transformPerspective",
-    "x",
-    "y",
-    "z",
-    "translateX",
-    "translateY",
-    "translateZ",
-    "scale",
-    "scaleX",
-    "scaleY",
-    "rotate",
-    "rotateX",
-    "rotateY",
-    "rotateZ",
-    "skew",
-    "skewX",
-    "skewY",
-];
-/**
- * A quick lookup for transform props.
- */
-const transformProps = new Set(transformPropOrder);
-
-const scaleCorrectors = {};
-
-function isForcedMotionValue(key, { layout, layoutId }) {
-    return (transformProps.has(key) ||
-        key.startsWith("origin") ||
-        ((layout || layoutId !== undefined) &&
-            (!!scaleCorrectors[key] || key === "opacity")));
-}
-
-function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    var _a;
-    const { style } = props;
-    const newValues = {};
-    for (const key in style) {
-        if (isMotionValue(style[key]) ||
-            (prevProps.style &&
-                isMotionValue(prevProps.style[key])) ||
-            isForcedMotionValue(key, props) ||
-            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
-            newValues[key] = style[key];
-        }
-    }
-    return newValues;
-}
-
-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 { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 
 function getValueState(visualElement) {
     const state = [{}, {}];
@@ -770,6 +662,8 @@ const isCustomValue = (v) => {
     return Boolean(v && typeof v === "object" && v.mix && v.toValue);
 };
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
@@ -782,13 +676,19 @@ function resolveMotionValue(value) {
         : unwrappedValue;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onMount) {
-        state.mount = (instance) => onMount(props, instance, state);
+    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;
 }
@@ -854,17 +754,32 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
     return values;
 }
 
-const createHtmlRenderState = () => ({
-    style: {},
-    transform: {},
-    transformOrigin: {},
-    vars: {},
-});
-
-const createSvgRenderState = () => ({
-    ...createHtmlRenderState(),
-    attrs: {},
-});
+/**
+ * Generate a list of every possible transform key.
+ */
+const transformPropOrder = [
+    "transformPerspective",
+    "x",
+    "y",
+    "z",
+    "translateX",
+    "translateY",
+    "translateZ",
+    "scale",
+    "scaleX",
+    "scaleY",
+    "rotate",
+    "rotateX",
+    "rotateY",
+    "rotateZ",
+    "skew",
+    "skewX",
+    "skewY",
+];
+/**
+ * A quick lookup for transform props.
+ */
+const transformProps = new Set(transformPropOrder);
 
 const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
 const isCSSVariableName = 
@@ -1202,36 +1117,159 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
 }
 
+const createHtmlRenderState = () => ({
+    style: {},
+    transform: {},
+    transformOrigin: {},
+    vars: {},
+});
+
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
 const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
 
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+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.
+ */
+const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+]);
 
+function renderSVG(element, renderState, _styleProp, projection) {
+    renderHTML(element, renderState, undefined, projection);
+    for (const key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
+const scaleCorrectors = {};
+
+function isForcedMotionValue(key, { layout, layoutId }) {
+    return (transformProps.has(key) ||
+        key.startsWith("origin") ||
+        ((layout || layoutId !== undefined) &&
+            (!!scaleCorrectors[key] || key === "opacity")));
+}
+
+function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
+    var _a;
+    const { style } = props;
+    const newValues = {};
+    for (const key in style) {
+        if (isMotionValue(style[key]) ||
+            (prevProps.style &&
+                isMotionValue(prevProps.style[key])) ||
+            isForcedMotionValue(key, props) ||
+            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+            newValues[key] = style[key];
+        }
+    }
+    return newValues;
+}
+
+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;
+}
+
+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,
-        onMount: (props, instance, { renderState, latestValues }) => {
-            frame.read(() => {
-                try {
-                    renderState.dimensions =
-                        typeof instance.getBBox ===
-                            "function"
-                            ? instance.getBBox()
-                            : instance.getBoundingClientRect();
+        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;
+                    }
                 }
-                catch (e) {
-                    // Most likely trying to measure an unrendered element under Firefox
-                    renderState.dimensions = {
-                        x: 0,
-                        y: 0,
-                        width: 0,
-                        height: 0,
-                    };
+            }
+            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(instance.tagName), props.transformTemplate);
-                renderSVG(instance, renderState);
+                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                renderSVG(current, renderState);
             });
         },
     }),

package/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs

@@ -7,7 +7,9 @@ import { isRefObject } from '../../utils/is-ref-object.mjs';
  */
 function useMotionRef(visualState, visualElement, externalRef) {
     return useCallback((instance) => {
-        instance && visualState.mount && visualState.mount(instance);
+        if (instance) {
+            visualState.onMount && visualState.onMount(instance);
+        }
         if (visualElement) {
             if (instance) {
                 visualElement.mount(instance);

package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs

@@ -1,19 +1,25 @@
 import { useContext } from 'react';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
+import { MotionContext } from '../../context/MotionContext/index.mjs';
 import { PresenceContext } from '../../context/PresenceContext.mjs';
+import { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';
 import { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
-import { MotionContext } from '../../context/MotionContext/index.mjs';
-import { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onMount) {
-        state.mount = (instance) => onMount(props, instance, state);
+    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;
 }

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -114,7 +114,8 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState } = visualState;
+        const { latestValues, renderState, onUpdate } = visualState;
+        this.onUpdate = onUpdate;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -314,6 +315,7 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
+        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;

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

@@ -1,37 +1,68 @@
-import { renderSVG } from './utils/render.mjs';
-import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
+import { frame } from '../../frameloop/frame.mjs';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
-import { createSvgRenderState } from './utils/create-render-state.mjs';
+import { transformProps } from '../html/utils/keys-transform.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 { frame } from '../../frameloop/frame.mjs';
+import { renderSVG } from './utils/render.mjs';
+import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
+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,
-        onMount: (props, instance, { renderState, latestValues }) => {
-            frame.read(() => {
-                try {
-                    renderState.dimensions =
-                        typeof instance.getBBox ===
-                            "function"
-                            ? instance.getBBox()
-                            : instance.getBoundingClientRect();
+        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;
+                    }
                 }
-                catch (e) {
-                    // Most likely trying to measure an unrendered element under Firefox
-                    renderState.dimensions = {
-                        x: 0,
-                        y: 0,
-                        width: 0,
-                        height: 0,
-                    };
+            }
+            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(instance.tagName), props.transformTemplate);
-                renderSVG(instance, renderState);
+                buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
+                renderSVG(current, renderState);
             });
         },
     }),

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 === "11.17.0", `Attempting to mix Motion versions ${nextValue.version} with 11.17.0 may not work as expected.`);
+                warnOnce(nextValue.version === "11.17.1", `Attempting to mix Motion versions ${nextValue.version} with 11.17.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -34,7 +34,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.17.0";
+        this.version = "11.17.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

package/dist/motion.dev.js

@@ -1369,7 +1369,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 = "11.17.0";
+            this.version = "11.17.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
@@ -4299,7 +4299,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.17.0", `Attempting to mix Motion versions ${nextValue.version} with 11.17.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.17.1", `Attempting to mix Motion versions ${nextValue.version} with 11.17.1 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -4432,7 +4432,8 @@
                     frame.render(this.render, false, true);
                 }
             };
-            const { latestValues, renderState } = visualState;
+            const { latestValues, renderState, onUpdate } = visualState;
+            this.onUpdate = onUpdate;
             this.latestValues = latestValues;
             this.baseTarget = { ...latestValues };
             this.initialValues = props.initial ? { ...latestValues } : {};
@@ -4632,6 +4633,7 @@
             if (this.handleChildMotionValue) {
                 this.handleChildMotionValue();
             }
+            this.onUpdate && this.onUpdate(this);
         }
         getProps() {
             return this.props;