framer-motion 12.9.2 → 12.9.3

package/dist/cjs/client.js

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

package/dist/cjs/{create-CFQWONF8.js → create-CIsbGW8k.js}

@@ -1229,6 +1229,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             stack && stack.remove(this);
             this.parent && this.parent.children.delete(this);
             this.instance = undefined;
+            this.eventHandlers.clear();
             motionDom.cancelFrame(this.updateProjection);
         }
         // only on the root
@@ -2720,7 +2721,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                motionUtils.warnOnce(nextValue.version === "12.9.2", `Attempting to mix Motion versions ${nextValue.version} with 12.9.2 may not work as expected.`);
+                motionUtils.warnOnce(nextValue.version === "12.9.3", `Attempting to mix Motion versions ${nextValue.version} with 12.9.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -2952,6 +2953,7 @@ class VisualElement {
     }
     unmount() {
         this.projection && this.projection.unmount();
+        this.projection = undefined;
         motionDom.cancelFrame(this.notifyUpdate);
         motionDom.cancelFrame(this.render);
         this.valueSubscriptions.forEach((remove) => remove());

package/dist/cjs/dom.js

@@ -669,11 +669,38 @@ function isSVGElement(element) {
     return element instanceof SVGElement && element.tagName !== "svg";
 }
 
-const createAxis = () => ({ min: 0, max: 0 });
-const createBox = () => ({
-    x: createAxis(),
-    y: createAxis(),
-});
+/**
+ * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
+ * it's easier to consider each axis individually. This function returns a bounding box
+ * as a map of single-axis min/max values.
+ */
+function convertBoundingBoxToBox({ top, left, right, bottom, }) {
+    return {
+        x: { min: left, max: right },
+        y: { min: top, max: bottom },
+    };
+}
+/**
+ * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
+ * provided by Framer to allow measured points to be corrected for device scaling. This is used
+ * when measuring DOM elements and DOM event points.
+ */
+function transformBoxPoints(point, transformPoint) {
+    if (!transformPoint)
+        return point;
+    const topLeft = transformPoint({ x: point.left, y: point.top });
+    const bottomRight = transformPoint({ x: point.right, y: point.bottom });
+    return {
+        top: topLeft.y,
+        left: topLeft.x,
+        bottom: bottomRight.y,
+        right: bottomRight.x,
+    };
+}
+
+function measureViewportBox(instance, transformPoint) {
+    return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
+}
 
 const featureProps = {
     animation: [
@@ -702,6 +729,12 @@ for (const key in featureProps) {
     };
 }
 
+const createAxis = () => ({ min: 0, max: 0 });
+const createBox = () => ({
+    x: createAxis(),
+    y: createAxis(),
+});
+
 const isBrowser = typeof window !== "undefined";
 
 // Does this device prefer reduced motion? Returns `null` server-side.
@@ -770,7 +803,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                motionUtils.warnOnce(nextValue.version === "12.9.2", `Attempting to mix Motion versions ${nextValue.version} with 12.9.2 may not work as expected.`);
+                motionUtils.warnOnce(nextValue.version === "12.9.3", `Attempting to mix Motion versions ${nextValue.version} with 12.9.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -967,6 +1000,7 @@ class VisualElement {
     }
     unmount() {
         this.projection && this.projection.unmount();
+        this.projection = undefined;
         motionDom.cancelFrame(this.notifyUpdate);
         motionDom.cancelFrame(this.render);
         this.valueSubscriptions.forEach((remove) => remove());
@@ -1417,6 +1451,107 @@ function buildHTMLStyles(state, latestValues, transformTemplate) {
     }
 }
 
+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]);
+    }
+}
+
+const scaleCorrectors = {};
+
+function isForcedMotionValue(key, { layout, layoutId }) {
+    return (motionDom.transformProps.has(key) ||
+        key.startsWith("origin") ||
+        ((layout || layoutId !== undefined) &&
+            (!!scaleCorrectors[key] || key === "opacity")));
+}
+
+function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
+    const { style } = props;
+    const newValues = {};
+    for (const key in style) {
+        if (isMotionValue(style[key]) ||
+            (prevProps.style &&
+                isMotionValue(prevProps.style[key])) ||
+            isForcedMotionValue(key, props) ||
+            visualElement?.getValue(key)?.liveStyle !== undefined) {
+            newValues[key] = style[key];
+        }
+    }
+    return newValues;
+}
+
+function getComputedStyle$1(element) {
+    return window.getComputedStyle(element);
+}
+class HTMLVisualElement extends DOMVisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "html";
+        this.renderInstance = renderHTML;
+    }
+    readValueFromInstance(instance, key) {
+        if (motionDom.transformProps.has(key)) {
+            return motionDom.readTransformValue(instance, key);
+        }
+        else {
+            const computedStyle = getComputedStyle$1(instance);
+            const value = (motionDom.isCSSVariableName(key)
+                ? computedStyle.getPropertyValue(key)
+                : computedStyle[key]) || 0;
+            return typeof value === "string" ? value.trim() : value;
+        }
+    }
+    measureInstanceViewportBox(instance, { transformPagePoint }) {
+        return measureViewportBox(instance, transformPagePoint);
+    }
+    build(renderState, latestValues, props) {
+        buildHTMLStyles(renderState, latestValues, props.transformTemplate);
+    }
+    scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+        return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+    }
+}
+
+function isObjectKey(key, object) {
+    return key in object;
+}
+class ObjectVisualElement extends VisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "object";
+    }
+    readValueFromInstance(instance, key) {
+        if (isObjectKey(key, instance)) {
+            const value = instance[key];
+            if (typeof value === "string" || typeof value === "number") {
+                return value;
+            }
+        }
+        return undefined;
+    }
+    getBaseTargetFromProps() {
+        return undefined;
+    }
+    removeValueFromRenderState(key, renderState) {
+        delete renderState.output[key];
+    }
+    measureInstanceViewportBox() {
+        return createBox();
+    }
+    build(renderState, latestValues) {
+        Object.assign(renderState.output, latestValues);
+    }
+    renderInstance(instance, { output }) {
+        Object.assign(instance, output);
+    }
+    sortInstanceNodePosition() {
+        return 0;
+    }
+}
+
 const dashKeys = {
     offset: "stroke-dashoffset",
     array: "stroke-dasharray",
@@ -1530,14 +1665,6 @@ const camelCaseAttributes = new Set([
 
 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]);
-    }
-}
-
 function renderSVG(element, renderState, _styleProp, projection) {
     renderHTML(element, renderState, undefined, projection);
     for (const key in renderState.attrs) {
@@ -1545,30 +1672,6 @@ function renderSVG(element, renderState, _styleProp, projection) {
     }
 }
 
-const scaleCorrectors = {};
-
-function isForcedMotionValue(key, { layout, layoutId }) {
-    return (motionDom.transformProps.has(key) ||
-        key.startsWith("origin") ||
-        ((layout || layoutId !== undefined) &&
-            (!!scaleCorrectors[key] || key === "opacity")));
-}
-
-function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    const { style } = props;
-    const newValues = {};
-    for (const key in style) {
-        if (isMotionValue(style[key]) ||
-            (prevProps.style &&
-                isMotionValue(prevProps.style[key])) ||
-            isForcedMotionValue(key, props) ||
-            visualElement?.getValue(key)?.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) {
@@ -1616,108 +1719,6 @@ class SVGVisualElement extends DOMVisualElement {
     }
 }
 
-/**
- * Bounding boxes tend to be defined as top, left, right, bottom. For various operations
- * it's easier to consider each axis individually. This function returns a bounding box
- * as a map of single-axis min/max values.
- */
-function convertBoundingBoxToBox({ top, left, right, bottom, }) {
-    return {
-        x: { min: left, max: right },
-        y: { min: top, max: bottom },
-    };
-}
-/**
- * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function
- * provided by Framer to allow measured points to be corrected for device scaling. This is used
- * when measuring DOM elements and DOM event points.
- */
-function transformBoxPoints(point, transformPoint) {
-    if (!transformPoint)
-        return point;
-    const topLeft = transformPoint({ x: point.left, y: point.top });
-    const bottomRight = transformPoint({ x: point.right, y: point.bottom });
-    return {
-        top: topLeft.y,
-        left: topLeft.x,
-        bottom: bottomRight.y,
-        right: bottomRight.x,
-    };
-}
-
-function measureViewportBox(instance, transformPoint) {
-    return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
-}
-
-function getComputedStyle$1(element) {
-    return window.getComputedStyle(element);
-}
-class HTMLVisualElement extends DOMVisualElement {
-    constructor() {
-        super(...arguments);
-        this.type = "html";
-        this.renderInstance = renderHTML;
-    }
-    readValueFromInstance(instance, key) {
-        if (motionDom.transformProps.has(key)) {
-            return motionDom.readTransformValue(instance, key);
-        }
-        else {
-            const computedStyle = getComputedStyle$1(instance);
-            const value = (motionDom.isCSSVariableName(key)
-                ? computedStyle.getPropertyValue(key)
-                : computedStyle[key]) || 0;
-            return typeof value === "string" ? value.trim() : value;
-        }
-    }
-    measureInstanceViewportBox(instance, { transformPagePoint }) {
-        return measureViewportBox(instance, transformPagePoint);
-    }
-    build(renderState, latestValues, props) {
-        buildHTMLStyles(renderState, latestValues, props.transformTemplate);
-    }
-    scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-        return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
-    }
-}
-
-function isObjectKey(key, object) {
-    return key in object;
-}
-class ObjectVisualElement extends VisualElement {
-    constructor() {
-        super(...arguments);
-        this.type = "object";
-    }
-    readValueFromInstance(instance, key) {
-        if (isObjectKey(key, instance)) {
-            const value = instance[key];
-            if (typeof value === "string" || typeof value === "number") {
-                return value;
-            }
-        }
-        return undefined;
-    }
-    getBaseTargetFromProps() {
-        return undefined;
-    }
-    removeValueFromRenderState(key, renderState) {
-        delete renderState.output[key];
-    }
-    measureInstanceViewportBox() {
-        return createBox();
-    }
-    build(renderState, latestValues) {
-        Object.assign(renderState.output, latestValues);
-    }
-    renderInstance(instance, { output }) {
-        Object.assign(instance, output);
-    }
-    sortInstanceNodePosition() {
-        return 0;
-    }
-}
-
 function createDOMVisualElement(element) {
     const options = {
         presenceContext: null,

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