framer-motion 10.1.0-alpha.4 → 10.2.0

package/dist/cjs/dom-entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var wrap = require('./wrap-e83e4b10.js');
+var wrap = require('./wrap-752dc0be.js');
 
 
 

package/dist/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var wrap = require('./wrap-e83e4b10.js');
+var wrap = require('./wrap-752dc0be.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1249,7 +1249,7 @@ function addHoverEvent(node, isActive) {
             node.animationState.setActive("whileHover", isActive);
         }
         if (props[callbackName]) {
-            props[callbackName](event, info);
+            wrap.sync.update(() => props[callbackName](event, info));
         }
     };
     return addPointerEvent(node.current, eventName, handleEvent, {
@@ -1339,13 +1339,15 @@ class PressGesture extends Feature {
                 if (!this.checkPressEnd())
                     return;
                 const { onTap, onTapCancel } = this.node.getProps();
-                /**
-                 * We only count this as a tap gesture if the event.target is the same
-                 * as, or a child of, this component's element
-                 */
-                !isNodeOrChild(this.node.current, endEvent.target)
-                    ? onTapCancel && onTapCancel(endEvent, endInfo)
-                    : onTap && onTap(endEvent, endInfo);
+                wrap.sync.update(() => {
+                    /**
+                     * We only count this as a tap gesture if the event.target is the same
+                     * as, or a child of, this component's element
+                     */
+                    !isNodeOrChild(this.node.current, endEvent.target)
+                        ? onTapCancel && onTapCancel(endEvent, endInfo)
+                        : onTap && onTap(endEvent, endInfo);
+                });
             };
             const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
             const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
@@ -1359,7 +1361,12 @@ class PressGesture extends Feature {
                 const handleKeyup = (keyupEvent) => {
                     if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
                         return;
-                    fireSyntheticPointerEvent("up", this.node.getProps().onTap);
+                    fireSyntheticPointerEvent("up", (event, info) => {
+                        const { onTap } = this.node.getProps();
+                        if (onTap) {
+                            wrap.sync.update(() => onTap(event, info));
+                        }
+                    });
                 };
                 this.removeEndListeners();
                 this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
@@ -1386,7 +1393,9 @@ class PressGesture extends Feature {
         if (whileTap && this.node.animationState) {
             this.node.animationState.setActive("whileTap", true);
         }
-        onTapStart && onTapStart(event, info);
+        if (onTapStart) {
+            wrap.sync.update(() => onTapStart(event, info));
+        }
     }
     checkPressEnd() {
         this.removeEndListeners();
@@ -1401,7 +1410,9 @@ class PressGesture extends Feature {
         if (!this.checkPressEnd())
             return;
         const { onTapCancel } = this.node.getProps();
-        onTapCancel && onTapCancel(event, info);
+        if (onTapCancel) {
+            wrap.sync.update(() => onTapCancel(event, info));
+        }
     }
     mount() {
         const props = this.node.getProps();
@@ -2840,7 +2851,9 @@ class VisualElementDragControls {
                 this.originPoint[axis] = current;
             });
             // Fire onDragStart event
-            onDragStart && onDragStart(event, info);
+            if (onDragStart) {
+                wrap.sync.update(() => onDragStart(event, info));
+            }
             const { animationState } = this.visualElement;
             animationState && animationState.setActive("whileDrag", true);
         };
@@ -2892,7 +2905,9 @@ class VisualElementDragControls {
         const { velocity } = info;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
-        onDragEnd && onDragEnd(event, info);
+        if (onDragEnd) {
+            wrap.sync.update(() => onDragEnd(event, info));
+        }
     }
     cancel() {
         this.isDragging = false;
@@ -3217,6 +3232,11 @@ class DragGesture extends Feature {
     }
 }
 
+const asyncHandler = (handler) => (event, info) => {
+    if (handler) {
+        wrap.sync.update(() => handler(event, info));
+    }
+};
 class PanGesture extends Feature {
     constructor() {
         super(...arguments);
@@ -3228,12 +3248,14 @@ class PanGesture extends Feature {
     createPanHandlers() {
         const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
         return {
-            onSessionStart: onPanSessionStart,
-            onStart: onPanStart,
+            onSessionStart: asyncHandler(onPanSessionStart),
+            onStart: asyncHandler(onPanStart),
             onMove: onPan,
             onEnd: (event, info) => {
                 delete this.session;
-                onPanEnd && onPanEnd(event, info);
+                if (onPanEnd) {
+                    wrap.sync.update(() => onPanEnd(event, info));
+                }
             },
         };
     }
@@ -5494,7 +5516,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                wrap.warnOnce(nextValue.version === "10.1.0-alpha.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.1.0-alpha.4 may not work as expected.`);
+                wrap.warnOnce(nextValue.version === "10.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.0 may not work as expected.`);
             }
         }
         else if (wrap.isMotionValue(prevValue)) {

package/dist/cjs/{wrap-e83e4b10.js → wrap-752dc0be.js}

@@ -157,13 +157,6 @@ const numberValueTypes = {
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
-const noop = (any) => any;
-
-const frameData = {
-    delta: 0,
-    timestamp: 0,
-};
-
 /*
   Detect and load appropriate clock setting for the execution environment
  */
@@ -262,6 +255,11 @@ function createRenderStep(runNextFrame) {
     return step;
 }
 
+const frameData = {
+    delta: 0,
+    timestamp: 0,
+};
+
 const maxElapsed$1 = 40;
 let useDefaultElapsed = true;
 let runNextFrame = false;
@@ -316,6 +314,8 @@ const startLoop = () => {
         onNextFrame(processFrame);
 };
 
+const noop = (any) => any;
+
 function addUniqueItem(arr, item) {
     if (arr.indexOf(item) === -1)
         arr.push(item);
@@ -415,7 +415,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.1.0-alpha.4";
+        this.version = "10.2.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -1828,7 +1828,10 @@ function mapEasingToNativeEasing(easing) {
 }
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
-    return element.animate({ [valueName]: keyframes, offset: times }, {
+    const keyframeOptions = { [valueName]: keyframes };
+    if (times)
+        keyframeOptions.offset = times;
+    return element.animate(keyframeOptions, {
         delay,
         duration,
         easing: mapEasingToNativeEasing(ease),

package/dist/dom-entry.d.ts

@@ -414,9 +414,14 @@ interface MotionValueEventCallbacks<V> {
     renderRequest: () => void;
     velocityChange: (latestVelocity: number) => void;
 }
+interface ResolvedValues {
+    [key: string]: string | number;
+}
 interface Owner {
     current: HTMLElement | unknown;
-    getProps: () => any;
+    getProps: () => {
+        onUpdate?: (latest: ResolvedValues) => void;
+    };
 }
 interface MotionValueOptions {
     owner?: Owner;

package/dist/es/animation/waapi/index.mjs

@@ -1,7 +1,10 @@
 import { mapEasingToNativeEasing } from './easing.mjs';
 
 function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) {
-    return element.animate({ [valueName]: keyframes, offset: times }, {
+    const keyframeOptions = { [valueName]: keyframes };
+    if (times)
+        keyframeOptions.offset = times;
+    return element.animate(keyframeOptions, {
         delay,
         duration,
         easing: mapEasingToNativeEasing(ease),

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -14,6 +14,7 @@ import { calcLength } from '../../projection/geometry/delta-calc.mjs';
 import { mix } from '../../utils/mix.mjs';
 import { percent } from '../../value/types/numbers/units.mjs';
 import { createMotionValueAnimation } from '../../animation/index.mjs';
+import { sync } from '../../frameloop/index.mjs';
 
 const elementDragControls = new WeakMap();
 /**
@@ -94,7 +95,9 @@ class VisualElementDragControls {
                 this.originPoint[axis] = current;
             });
             // Fire onDragStart event
-            onDragStart && onDragStart(event, info);
+            if (onDragStart) {
+                sync.update(() => onDragStart(event, info));
+            }
             const { animationState } = this.visualElement;
             animationState && animationState.setActive("whileDrag", true);
         };
@@ -146,7 +149,9 @@ class VisualElementDragControls {
         const { velocity } = info;
         this.startAnimation(velocity);
         const { onDragEnd } = this.getProps();
-        onDragEnd && onDragEnd(event, info);
+        if (onDragEnd) {
+            sync.update(() => onDragEnd(event, info));
+        }
     }
     cancel() {
         this.isDragging = false;

package/dist/es/gestures/hover.mjs

@@ -2,6 +2,7 @@ import { addPointerEvent } from '../events/add-pointer-event.mjs';
 import { pipe } from '../utils/pipe.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
+import { sync } from '../frameloop/index.mjs';
 
 function addHoverEvent(node, isActive) {
     const eventName = "pointer" + (isActive ? "enter" : "leave");
@@ -14,7 +15,7 @@ function addHoverEvent(node, isActive) {
             node.animationState.setActive("whileHover", isActive);
         }
         if (props[callbackName]) {
-            props[callbackName](event, info);
+            sync.update(() => props[callbackName](event, info));
         }
     };
     return addPointerEvent(node.current, eventName, handleEvent, {

package/dist/es/gestures/pan/index.mjs

@@ -2,7 +2,13 @@ import { PanSession } from './PanSession.mjs';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { Feature } from '../../motion/features/Feature.mjs';
 import { noop } from '../../utils/noop.mjs';
+import { sync } from '../../frameloop/index.mjs';
 
+const asyncHandler = (handler) => (event, info) => {
+    if (handler) {
+        sync.update(() => handler(event, info));
+    }
+};
 class PanGesture extends Feature {
     constructor() {
         super(...arguments);
@@ -14,12 +20,14 @@ class PanGesture extends Feature {
     createPanHandlers() {
         const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps();
         return {
-            onSessionStart: onPanSessionStart,
-            onStart: onPanStart,
+            onSessionStart: asyncHandler(onPanSessionStart),
+            onStart: asyncHandler(onPanStart),
             onMove: onPan,
             onEnd: (event, info) => {
                 delete this.session;
-                onPanEnd && onPanEnd(event, info);
+                if (onPanEnd) {
+                    sync.update(() => onPanEnd(event, info));
+                }
             },
         };
     }

package/dist/es/gestures/press.mjs

@@ -6,6 +6,7 @@ import { pipe } from '../utils/pipe.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { isNodeOrChild } from './utils/is-node-or-child.mjs';
 import { noop } from '../utils/noop.mjs';
+import { sync } from '../frameloop/index.mjs';
 
 function fireSyntheticPointerEvent(name, handler) {
     if (!handler)
@@ -28,13 +29,15 @@ class PressGesture extends Feature {
                 if (!this.checkPressEnd())
                     return;
                 const { onTap, onTapCancel } = this.node.getProps();
-                /**
-                 * We only count this as a tap gesture if the event.target is the same
-                 * as, or a child of, this component's element
-                 */
-                !isNodeOrChild(this.node.current, endEvent.target)
-                    ? onTapCancel && onTapCancel(endEvent, endInfo)
-                    : onTap && onTap(endEvent, endInfo);
+                sync.update(() => {
+                    /**
+                     * We only count this as a tap gesture if the event.target is the same
+                     * as, or a child of, this component's element
+                     */
+                    !isNodeOrChild(this.node.current, endEvent.target)
+                        ? onTapCancel && onTapCancel(endEvent, endInfo)
+                        : onTap && onTap(endEvent, endInfo);
+                });
             };
             const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) });
             const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) });
@@ -48,7 +51,12 @@ class PressGesture extends Feature {
                 const handleKeyup = (keyupEvent) => {
                     if (keyupEvent.key !== "Enter" || !this.checkPressEnd())
                         return;
-                    fireSyntheticPointerEvent("up", this.node.getProps().onTap);
+                    fireSyntheticPointerEvent("up", (event, info) => {
+                        const { onTap } = this.node.getProps();
+                        if (onTap) {
+                            sync.update(() => onTap(event, info));
+                        }
+                    });
                 };
                 this.removeEndListeners();
                 this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup);
@@ -75,7 +83,9 @@ class PressGesture extends Feature {
         if (whileTap && this.node.animationState) {
             this.node.animationState.setActive("whileTap", true);
         }
-        onTapStart && onTapStart(event, info);
+        if (onTapStart) {
+            sync.update(() => onTapStart(event, info));
+        }
     }
     checkPressEnd() {
         this.removeEndListeners();
@@ -90,7 +100,9 @@ class PressGesture extends Feature {
         if (!this.checkPressEnd())
             return;
         const { onTapCancel } = this.node.getProps();
-        onTapCancel && onTapCancel(event, info);
+        if (onTapCancel) {
+            sync.update(() => onTapCancel(event, info));
+        }
     }
     mount() {
         const props = this.node.getProps();

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.1.0-alpha.4", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.1.0-alpha.4 may not work as expected.`);
+                warnOnce(nextValue.version === "10.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.2.0 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.1.0-alpha.4";
+        this.version = "10.2.0";
         /**
          * Duration, in milliseconds, since last updating frame.
          *