framer-motion 10.2.3 → 10.2.5

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-27fda06a.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-27fda06a.js');
+var wrap = require('./wrap-0d5542ae.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2392,7 +2392,7 @@ function getVelocity(history, timeDelta) {
     if (!timestampedPoint) {
         return { x: 0, y: 0 };
     }
-    const time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000;
+    const time = wrap.millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
     if (time === 0) {
         return { x: 0, y: 0 };
     }
@@ -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.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.3 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)) {
@@ -7114,6 +7130,16 @@ function useSpring(source, config = {}) {
     return value;
 }
 
+function useMotionValueEvent(value, event, callback) {
+    /**
+     * useInsertionEffect will create subscriptions before any other
+     * effects will run. Effects run upwards through the tree so it
+     * can be that binding a useLayoutEffect higher up the tree can
+     * miss changes from lower down the tree.
+     */
+    React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
+}
+
 /**
  * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes.
  *
@@ -7127,11 +7153,9 @@ function useSpring(source, config = {}) {
  */
 function useVelocity(value) {
     const velocity = useMotionValue(value.getVelocity());
-    React.useEffect(() => {
-        return value.on("velocityChange", (newVelocity) => {
-            velocity.set(newVelocity);
-        });
-    }, [value]);
+    useMotionValueEvent(value, "velocityChange", (newVelocity) => {
+        velocity.set(newVelocity);
+    });
     return velocity;
 }
 
@@ -7250,16 +7274,6 @@ function useWillChange() {
     return useConstant(() => new WillChangeMotionValue("auto"));
 }
 
-function useMotionValueEvent(value, event, callback) {
-    /**
-     * useInsertionEffect will create subscriptions before any other
-     * effects will run. Effects run upwards through the tree so it
-     * can be that binding a useLayoutEffect higher up the tree can
-     * miss changes from lower down the tree.
-     */
-    React.useInsertionEffect(() => value.on(event, callback), [value, event, callback]);
-}
-
 /**
  * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
  *
@@ -7681,7 +7695,8 @@ sync) {
          */
         sync.update(() => {
             if (value.animation) {
-                value.animation.currentTime = performance.now() - sampledTime;
+                value.animation.currentTime =
+                    performance.now() - wrap.millisecondsToSeconds(sampledTime);
             }
         });
         /**
@@ -7884,7 +7899,6 @@ exports.easeInOut = wrap.easeInOut;
 exports.easeOut = wrap.easeOut;
 exports.frameData = wrap.frameData;
 exports.inView = wrap.inView;
-exports.inertia = wrap.inertia;
 exports.interpolate = wrap.interpolate;
 Object.defineProperty(exports, 'invariant', {
     enumerable: true,