framer-motion 10.2.4 → 10.2.5

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-62da7859.js');
+var wrap = require('./wrap-0d5542ae.js');
 
 
 

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-62da7859.js');
+var wrap = require('./wrap-0d5542ae.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4227,10 +4227,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.target = undefined;
             this.isLayoutDirty = false;
         }
-        /**
-         * Frame calculations
-         */
-        resolveTargetDelta() {
+        resolveTargetDelta(forceRecalculation = false) {
             var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
@@ -4246,7 +4243,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * We don't use transform for this step of processing so we don't
              * need to check whether any nodes have changed transform.
              */
-            const canSkip = !((isShared && this.isSharedProjectionDirty) ||
+            const canSkip = !(forceRecalculation ||
+                (isShared && this.isSharedProjectionDirty) ||
                 this.isProjectionDirty ||
                 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
                 this.attemptToResolveRelativeTarget);
@@ -4258,6 +4256,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             if (!this.layout || !(layout || layoutId))
                 return;
+            this.resolvedRelativeTargetAt = wrap.frameData.timestamp;
             /**
              * If we don't have a targetDelta but do have a layout, we can attempt to resolve
              * a relativeParent. This will allow a component to perform scale correction
@@ -4298,6 +4297,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.relativeTargetOrigin &&
                 this.relativeParent &&
                 this.relativeParent.target) {
+                /**
+                 * If the parent target isn't up-to-date, force it to update.
+                 * This is an unfortunate de-optimisation as it means any updating relative
+                 * projection will cause all the relative parents to recalculate back
+                 * up the tree.
+                 */
+                if (this.relativeParent.resolvedRelativeTargetAt !==
+                    wrap.frameData.timestamp) {
+                    this.relativeParent.resolveTargetDelta(true);
+                }
                 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
                 /**
                  * If we've only got a targetDelta, resolve it into a target
@@ -4384,6 +4393,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 (this.isSharedProjectionDirty || this.isTransformDirty)) {
                 canSkip = false;
             }
+            /**
+             * If we have resolved the target this frame we must recalculate the
+             * projection to ensure it visually represents the internal calculations.
+             */
+            if (this.resolvedRelativeTargetAt === wrap.frameData.timestamp) {
+                canSkip = false;
+            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;
@@ -5516,7 +5532,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                wrap.warnOnce(nextValue.version === "10.2.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.4 may not work as expected.`);
+                wrap.warnOnce(nextValue.version === "10.2.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.5 may not work as expected.`);
             }
         }
         else if (wrap.isMotionValue(prevValue)) {

package/dist/cjs/{wrap-62da7859.js → wrap-0d5542ae.js}

@@ -404,7 +404,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 = "10.2.4";
+        this.version = "10.2.5";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2365,24 +2365,6 @@ function delay(callback, timeout) {
     return () => cancelSync.read(checkElapsed);
 }
 
-const isCustomValueType = (v) => {
-    return typeof v === "object" && v.mix;
-};
-const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
-function transform(...args) {
-    const useImmediate = !Array.isArray(args[0]);
-    const argOffset = useImmediate ? 0 : -1;
-    const inputValue = args[0 + argOffset];
-    const inputRange = args[1 + argOffset];
-    const outputRange = args[2 + argOffset];
-    const options = args[3 + argOffset];
-    const interpolator = interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
-    return useImmediate ? interpolator(inputValue) : interpolator;
-}
-
 function resolveElements(elements, selectorCache) {
     var _a;
     if (typeof elements === "string") {
@@ -2858,6 +2840,24 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
     return () => observer.disconnect();
 }
 
+const isCustomValueType = (v) => {
+    return typeof v === "object" && v.mix;
+};
+const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
+    });
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
 const wrap = (min, max, v) => {
     const rangeSize = max - min;
     return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;

package/dist/es/projection/node/create-projection-node.mjs

@@ -20,6 +20,7 @@ import { globalProjectionState } from './state.mjs';
 import { delay } from '../../utils/delay.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { record } from '../../debug/record.mjs';
+import { frameData } from '../../frameloop/data.mjs';
 
 const transformAxes = ["", "X", "Y", "Z"];
 /**
@@ -629,10 +630,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.target = undefined;
             this.isLayoutDirty = false;
         }
-        /**
-         * Frame calculations
-         */
-        resolveTargetDelta() {
+        resolveTargetDelta(forceRecalculation = false) {
             var _a;
             /**
              * Once the dirty status of nodes has been spread through the tree, we also
@@ -648,7 +646,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              * We don't use transform for this step of processing so we don't
              * need to check whether any nodes have changed transform.
              */
-            const canSkip = !((isShared && this.isSharedProjectionDirty) ||
+            const canSkip = !(forceRecalculation ||
+                (isShared && this.isSharedProjectionDirty) ||
                 this.isProjectionDirty ||
                 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
                 this.attemptToResolveRelativeTarget);
@@ -660,6 +659,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             if (!this.layout || !(layout || layoutId))
                 return;
+            this.resolvedRelativeTargetAt = frameData.timestamp;
             /**
              * If we don't have a targetDelta but do have a layout, we can attempt to resolve
              * a relativeParent. This will allow a component to perform scale correction
@@ -700,6 +700,16 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 this.relativeTargetOrigin &&
                 this.relativeParent &&
                 this.relativeParent.target) {
+                /**
+                 * If the parent target isn't up-to-date, force it to update.
+                 * This is an unfortunate de-optimisation as it means any updating relative
+                 * projection will cause all the relative parents to recalculate back
+                 * up the tree.
+                 */
+                if (this.relativeParent.resolvedRelativeTargetAt !==
+                    frameData.timestamp) {
+                    this.relativeParent.resolveTargetDelta(true);
+                }
                 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
                 /**
                  * If we've only got a targetDelta, resolve it into a target
@@ -786,6 +796,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                 (this.isSharedProjectionDirty || this.isTransformDirty)) {
                 canSkip = false;
             }
+            /**
+             * If we have resolved the target this frame we must recalculate the
+             * projection to ensure it visually represents the internal calculations.
+             */
+            if (this.resolvedRelativeTargetAt === frameData.timestamp) {
+                canSkip = false;
+            }
             if (canSkip)
                 return;
             const { layout, layoutId } = this.options;

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

package/dist/es/value/index.mjs

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