framer-motion 7.6.5 → 7.6.7

package/dist/es/render/utils/motion-values.mjs

@@ -22,7 +22,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "7.6.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.5 may not work as expected.`);
+                warnOnce(nextValue.version === "7.6.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.7 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/value/index.mjs

@@ -24,7 +24,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 = "7.6.5";
+        this.version = "7.6.7";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/framer-motion.dev.js

@@ -3426,7 +3426,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 = "7.6.5";
+            this.version = "7.6.7";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -4906,7 +4906,7 @@
                      * If the MotionValue is a percentage value convert to px
                      */
                     if (percent.test(current)) {
-                        const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis];
+                        const measuredAxis = (_b = (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.layoutBox[axis];
                         if (measuredAxis) {
                             const length = calcLength(measuredAxis);
                             current = length * (parseFloat(current) / 100);
@@ -5007,7 +5007,7 @@
             }
             else {
                 if (dragConstraints && layout) {
-                    this.constraints = calcRelativeConstraints(layout.actual, dragConstraints);
+                    this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints);
                 }
                 else {
                     this.constraints = false;
@@ -5024,7 +5024,7 @@
                 !this.hasMutatedConstraints) {
                 eachAxis((axis) => {
                     if (this.getAxisMotionValue(axis)) {
-                        this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], this.constraints[axis]);
+                        this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]);
                     }
                 });
             }
@@ -5040,7 +5040,7 @@
             if (!projection || !projection.layout)
                 return false;
             const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint());
-            let measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox);
+            let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox);
             /**
              * If there's an onMeasureDragConstraints listener we call it and
              * if different constraints are returned, set constraints to that
@@ -5122,7 +5122,7 @@
                 const { projection } = this.visualElement;
                 const axisValue = this.getAxisMotionValue(axis);
                 if (projection && projection.layout) {
-                    const { min, max } = projection.layout.actual[axis];
+                    const { min, max } = projection.layout.layoutBox[axis];
                     axisValue.set(point[axis] - mix$1(min, max, 0.5));
                 }
             });
@@ -5689,7 +5689,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.6.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.5 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.6.7", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.6.7 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -5843,17 +5843,6 @@
                     }
                 }
             }
-            /**
-             * Update external values with initial values
-             */
-            if (props.values) {
-                for (const key in props.values) {
-                    const value = props.values[key];
-                    if (latestValues[key] !== undefined && isMotionValue(value)) {
-                        value.set(latestValues[key]);
-                    }
-                }
-            }
         }
         /**
          * This method takes React props and returns found MotionValues. For example, HTML
@@ -6889,7 +6878,7 @@
     const animationTarget = 1000;
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
-            constructor(id, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+            constructor(elementId, latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
                 /**
                  * A Set containing all this component's children. This is used to iterate
                  * through the children.
@@ -6942,7 +6931,7 @@
                 /**
                  * An object representing the calculated contextual/accumulated/tree scale.
                  * This will be used to scale calculcated projection transforms, as these are
-                 * calculated in screen-space but need to be scaled for elements to actually
+                 * calculated in screen-space but need to be scaled for elements to layoutly
                  * make it to their calculated destinations.
                  *
                  * TODO: Lazy-init
@@ -6972,13 +6961,13 @@
                  */
                 // TODO Only running on root node
                 this.sharedNodes = new Map();
-                this.id = id;
+                this.elementId = elementId;
                 this.latestValues = latestValues;
                 this.root = parent ? parent.root || parent : this;
                 this.path = parent ? [...parent.path, parent] : [];
                 this.parent = parent;
                 this.depth = parent ? parent.depth + 1 : 0;
-                id && this.root.registerPotentialNode(id, this);
+                elementId && this.root.registerPotentialNode(elementId, this);
                 for (let i = 0; i < this.path.length; i++) {
                     this.path[i].shouldResetTransform = true;
                 }
@@ -7017,7 +7006,7 @@
                 }
                 this.root.nodes.add(this);
                 (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this);
-                this.id && this.root.potentialNodes.delete(this.id);
+                this.elementId && this.root.potentialNodes.delete(this.elementId);
                 if (isLayoutDirty && (layout || layoutId)) {
                     this.isLayoutDirty = true;
                 }
@@ -7233,14 +7222,7 @@
             updateSnapshot() {
                 if (this.snapshot || !this.instance)
                     return;
-                const measured = this.measure();
-                const layout = this.removeTransform(this.removeElementScroll(measured));
-                roundBox(layout);
-                this.snapshot = {
-                    measured,
-                    layout,
-                    latestValues: {},
-                };
+                this.snapshot = this.measure();
             }
             updateLayout() {
                 var _a;
@@ -7265,18 +7247,13 @@
                         node.updateScroll();
                     }
                 }
-                const measured = this.measure();
-                roundBox(measured);
                 const prevLayout = this.layout;
-                this.layout = {
-                    measured,
-                    actual: this.removeElementScroll(measured),
-                };
+                this.layout = this.measure(false);
                 this.layoutCorrected = createBox();
                 this.isLayoutDirty = false;
                 this.projectionDelta = undefined;
-                this.notifyListeners("measure", this.layout.actual);
-                (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual);
+                this.notifyListeners("measure", this.layout.layoutBox);
+                (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notify("LayoutMeasure", this.layout.layoutBox, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.layoutBox);
             }
             updateScroll() {
                 if (this.options.layoutScroll && this.instance) {
@@ -7302,7 +7279,25 @@
                     this.scheduleRender();
                 }
             }
-            measure() {
+            measure(removeTransform = true) {
+                const pageBox = this.measurePageBox();
+                let layoutBox = this.removeElementScroll(pageBox);
+                /**
+                 * Measurements taken during the pre-render stage
+                 * still have transforms applied so we remove them
+                 * via calculation.
+                 */
+                if (removeTransform) {
+                    layoutBox = this.removeTransform(layoutBox);
+                }
+                roundBox(layoutBox);
+                return {
+                    measuredBox: pageBox,
+                    layoutBox,
+                    latestValues: {},
+                };
+            }
+            measurePageBox() {
                 const { visualElement } = this.options;
                 if (!visualElement)
                     return createBox();
@@ -7383,9 +7378,9 @@
                         continue;
                     hasScale(node.latestValues) && node.updateSnapshot();
                     const sourceBox = createBox();
-                    const nodeBox = node.measure();
+                    const nodeBox = node.measurePageBox();
                     copyBoxInto(sourceBox, nodeBox);
-                    removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox);
+                    removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layoutBox, sourceBox);
                 }
                 if (hasTransform(this.latestValues)) {
                     removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -7439,7 +7434,7 @@
                         this.relativeParent = relativeParent;
                         this.relativeTarget = createBox();
                         this.relativeTargetOrigin = createBox();
-                        calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, relativeParent.layout.actual);
+                        calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
                         copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
                     }
                     else {
@@ -7473,10 +7468,10 @@
                 else if (this.targetDelta) {
                     if (Boolean(this.resumingFrom)) {
                         // TODO: This is creating a new object every frame
-                        this.target = this.applyTransform(this.layout.actual);
+                        this.target = this.applyTransform(this.layout.layoutBox);
                     }
                     else {
-                        copyBoxInto(this.target, this.layout.actual);
+                        copyBoxInto(this.target, this.layout.layoutBox);
                     }
                     applyBoxDelta(this.target, this.targetDelta);
                 }
@@ -7484,7 +7479,7 @@
                     /**
                      * If no target, use own layout as target
                      */
-                    copyBoxInto(this.target, this.layout.actual);
+                    copyBoxInto(this.target, this.layout.layoutBox);
                 }
                 /**
                  * If we've been told to attempt to resolve a relative target, do so.
@@ -7541,7 +7536,7 @@
                  * Reset the corrected box with the latest values from box, as we're then going
                  * to perform mutative operations on it.
                  */
-                copyBoxInto(this.layoutCorrected, this.layout.actual);
+                copyBoxInto(this.layoutCorrected, this.layout.layoutBox);
                 /**
                  * Apply all the parent deltas to this box to produce the corrected box. This
                  * is the layout box, as it will appear on screen as a result of the transforms of its parents.
@@ -7618,7 +7613,7 @@
                         this.relativeTargetOrigin &&
                         this.layout &&
                         ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) {
-                        calcRelativePosition(relativeLayout, this.layout.actual, this.relativeParent.layout.actual);
+                        calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
                         mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress);
                     }
                     if (isSharedLayoutAnimation) {
@@ -7702,12 +7697,12 @@
                 if (this !== lead &&
                     this.layout &&
                     layout &&
-                    shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                    shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
                     target = this.target || createBox();
-                    const xLength = calcLength(this.layout.actual.x);
+                    const xLength = calcLength(this.layout.layoutBox.x);
                     target.x.min = lead.target.x.min;
                     target.x.max = target.x.min + xLength;
-                    const yLength = calcLength(this.layout.actual.y);
+                    const yLength = calcLength(this.layout.layoutBox.y);
                     target.y.min = lead.target.y.min;
                     target.y.max = target.y.min + yLength;
                 }
@@ -7721,7 +7716,7 @@
                 /**
                  * Update the delta between the corrected box and the final target box, after
                  * user-set transforms are applied to it. This will be used by the renderer to
-                 * create a transform style that will reproject the element from its actual layout
+                 * create a transform style that will reproject the element from its layout layout
                  * into the desired bounding box.
                  */
                 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues);
@@ -7877,7 +7872,7 @@
                 }
                 else {
                     /**
-                     * Or we're not animating at all, set the lead component to its actual
+                     * Or we're not animating at all, set the lead component to its layout
                      * opacity and other components to hidden.
                      */
                     styles.opacity =
@@ -7941,37 +7936,37 @@
             node.layout &&
             snapshot &&
             node.hasListeners("didUpdate")) {
-            const { actual: layout, measured: measuredLayout } = node.layout;
+            const { layoutBox: layout, measuredBox: measuredLayout } = node.layout;
             const { animationType } = node.options;
             // TODO Maybe we want to also resize the layout snapshot so we don't trigger
             // animations for instance if layout="size" and an element has only changed position
             if (animationType === "size") {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
-                        ? snapshot.measured[axis]
-                        : snapshot.layout[axis];
+                        ? snapshot.measuredBox[axis]
+                        : snapshot.layoutBox[axis];
                     const length = calcLength(axisSnapshot);
                     axisSnapshot.min = layout[axis].min;
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
-            else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
+            else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
-                        ? snapshot.measured[axis]
-                        : snapshot.layout[axis];
+                        ? snapshot.measuredBox[axis]
+                        : snapshot.layoutBox[axis];
                     const length = calcLength(layout[axis]);
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
             const layoutDelta = createDelta();
-            calcBoxDelta(layoutDelta, layout, snapshot.layout);
+            calcBoxDelta(layoutDelta, layout, snapshot.layoutBox);
             const visualDelta = createDelta();
             if (snapshot.isShared) {
-                calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured);
+                calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox);
             }
             else {
-                calcBoxDelta(visualDelta, layout, snapshot.layout);
+                calcBoxDelta(visualDelta, layout, snapshot.layoutBox);
             }
             const hasLayoutChanged = !isDeltaZero(layoutDelta);
             let hasRelativeTargetChanged = false;
@@ -7985,9 +7980,9 @@
                     const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
                     if (parentSnapshot && parentLayout) {
                         const relativeSnapshot = createBox();
-                        calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout);
+                        calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
                         const relativeLayout = createBox();
-                        calcRelativePosition(relativeLayout, layout, parentLayout.actual);
+                        calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
                         if (!boxEquals(relativeSnapshot, relativeLayout)) {
                             hasRelativeTargetChanged = true;
                         }