framer-motion 12.0.10 → 12.1.0

package/dist/cjs/client.js

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

package/dist/cjs/{create-CGH8xAz7.js → create-DLcVgZwy.js}

@@ -13,30 +13,6 @@ function isAnimationControls(v) {
         typeof v.start === "function");
 }
 
-const isKeyframesTarget = (v) => {
-    return Array.isArray(v);
-};
-
-function shallowCompare(next, prev) {
-    if (!Array.isArray(prev))
-        return false;
-    const prevLength = prev.length;
-    if (prevLength !== next.length)
-        return false;
-    for (let i = 0; i < prevLength; i++) {
-        if (prev[i] !== next[i])
-            return false;
-    }
-    return true;
-}
-
-/**
- * Decides if the supplied variable is variant label
- */
-function isVariantLabel(v) {
-    return typeof v === "string" || Array.isArray(v);
-}
-
 function getValueState(visualElement) {
     const state = [{}, {}];
     visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
@@ -77,17 +53,6 @@ function resolveVariant(visualElement, definition, custom) {
     return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
 }
 
-const variantPriorityOrder = [
-    "animate",
-    "whileInView",
-    "whileFocus",
-    "whileHover",
-    "whileTap",
-    "whileDrag",
-    "exit",
-];
-const variantProps = ["initial", ...variantPriorityOrder];
-
 const MotionGlobalConfig = {
     skipAnimations: false,
     useManualTiming: false,
@@ -282,6 +247,10 @@ const positionalKeys = new Set([
     ...transformPropOrder,
 ]);
 
+const isKeyframesTarget = (v) => {
+    return Array.isArray(v);
+};
+
 const isCustomValue = (v) => {
     return Boolean(v && typeof v === "object" && v.mix && v.toValue);
 };
@@ -424,7 +393,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 = "12.0.10";
+        this.version = "12.1.0";
         /**
          * 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
@@ -3627,6 +3596,37 @@ function animateVisualElement(visualElement, definition, options = {}) {
     });
 }
 
+function shallowCompare(next, prev) {
+    if (!Array.isArray(prev))
+        return false;
+    const prevLength = prev.length;
+    if (prevLength !== next.length)
+        return false;
+    for (let i = 0; i < prevLength; i++) {
+        if (prev[i] !== next[i])
+            return false;
+    }
+    return true;
+}
+
+/**
+ * Decides if the supplied variable is variant label
+ */
+function isVariantLabel(v) {
+    return typeof v === "string" || Array.isArray(v);
+}
+
+const variantPriorityOrder = [
+    "animate",
+    "whileInView",
+    "whileFocus",
+    "whileHover",
+    "whileTap",
+    "whileDrag",
+    "exit",
+];
+const variantProps = ["initial", ...variantPriorityOrder];
+
 const numVariantProps = variantProps.length;
 function getVariantContext(visualElement) {
     if (!visualElement)
@@ -4033,11 +4033,16 @@ class ExitAnimationFeature extends Feature {
         }
         const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
         if (onExitComplete && !isPresent) {
-            exitAnimation.then(() => onExitComplete(this.id));
+            exitAnimation.then(() => {
+                onExitComplete(this.id);
+            });
         }
     }
     mount() {
-        const { register } = this.node.presenceContext || {};
+        const { register, onExitComplete } = this.node.presenceContext || {};
+        if (onExitComplete) {
+            onExitComplete(this.id);
+        }
         if (register) {
             this.unmount = register(this.id);
         }
@@ -4533,7 +4538,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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.1.0", `Attempting to mix Motion versions ${nextValue.version} with 12.1.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4730,7 +4735,6 @@ class VisualElement {
         this.update(this.props, this.presenceContext);
     }
     unmount() {
-        visualElementStore.delete(this.current);
         this.projection && this.projection.unmount();
         cancelFrame(this.notifyUpdate);
         cancelFrame(this.render);
@@ -5284,28 +5288,6 @@ 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";
-
-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.
  */
@@ -5335,6 +5317,34 @@ const camelCaseAttributes = new Set([
     "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) {
@@ -5389,69 +5399,6 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     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);
@@ -9247,6 +9194,13 @@ function getProjectionFunctionality(props) {
     };
 }
 
+const createHtmlRenderState = () => ({
+    style: {},
+    transform: {},
+    transformOrigin: {},
+    vars: {},
+});
+
 function copyRawValuesOnly(target, source, props) {
     for (const key in source) {
         if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
@@ -9356,6 +9310,11 @@ function isSVGComponent(Component) {
     return false;
 }
 
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
 function useSVGProps(props, visualState, _isStatic, Component) {
     const visualProps = React.useMemo(() => {
         const state = createSvgRenderState();
@@ -9405,6 +9364,52 @@ const htmlMotionConfig = {
     }),
 };
 
+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)

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 = "12.0.10";
+        this.version = "12.1.0";
         /**
          * 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
@@ -3928,7 +3928,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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.1.0", `Attempting to mix Motion versions ${nextValue.version} with 12.1.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -4125,7 +4125,6 @@ class VisualElement {
         this.update(this.props, this.presenceContext);
     }
     unmount() {
-        visualElementStore.delete(this.current);
         this.projection && this.projection.unmount();
         cancelFrame(this.notifyUpdate);
         cancelFrame(this.render);
@@ -4679,16 +4678,6 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
 }
 
-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.
  */
@@ -4718,6 +4707,34 @@ const camelCaseAttributes = new Set([
     "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) {
@@ -4764,24 +4781,6 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     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,
-        };
-    }
-}
-
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);

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-CGH8xAz7.js');
+var create = require('./create-DLcVgZwy.js');
 var motionUtils = require('motion-utils');
 var motionDom = require('motion-dom');
 

package/dist/cjs/m.js

@@ -1352,6 +1352,24 @@ const htmlMotionConfig = {
 
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : motionUtils.noop, true);
 
+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.
@@ -1410,23 +1428,6 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     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({