framer-motion 6.3.5 → 6.3.7

package/dist/cjs/index.js

@@ -470,6 +470,11 @@ var MotionValue = /** @class */ (function () {
      */
     function MotionValue(init) {
         var _this = this;
+        /**
+         * 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 = "6.3.7";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -3884,8 +3889,9 @@ exports.AnimationType = void 0;
 })(exports.AnimationType || (exports.AnimationType = {}));
 
 function addDomEvent(target, eventName, handler, options) {
+    if (options === void 0) { options = { passive: true }; }
     target.addEventListener(eventName, handler, options);
-    return function () { return target.removeEventListener(eventName, handler, options); };
+    return function () { return target.removeEventListener(eventName, handler); };
 }
 /**
  * Attaches an event listener directly to the provided DOM element.
@@ -4112,10 +4118,10 @@ function useHoverGesture(_a) {
     var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;
     usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
         ? createHoverEvent(visualElement, true, onHoverStart)
-        : undefined);
+        : undefined, { passive: !onHoverStart });
     usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
         ? createHoverEvent(visualElement, false, onHoverEnd)
-        : undefined);
+        : undefined, { passive: !onHoverEnd });
 }
 
 /**
@@ -4150,6 +4156,12 @@ function useTapGesture(_a) {
     var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
     var isPressing = React.useRef(false);
     var cancelPointerEndListeners = React.useRef(null);
+    /**
+     * Only set listener to passive if there are no external listeners.
+     */
+    var eventOptions = {
+        passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
+    };
     function removePointerEndListener() {
         var _a;
         (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
@@ -4184,14 +4196,14 @@ function useTapGesture(_a) {
         if (isPressing.current)
             return;
         isPressing.current = true;
-        cancelPointerEndListeners.current = popmotion.pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
+        cancelPointerEndListeners.current = popmotion.pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         /**
          * Ensure we trigger animations before firing event callback
          */
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Tap, true);
         onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
     }
-    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
+    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
 }
 
@@ -5783,7 +5795,7 @@ var VisualElementDragControls = /** @class */ (function () {
          * constraints as the window resizes.
          */
         var stopResizeListener = addDomEvent(window, "resize", function () {
-            _this.scalePositionWithinConstraints();
+            return _this.scalePositionWithinConstraints();
         });
         /**
          * If the element's layout changes, calculate the delta and apply that to
@@ -5955,6 +5967,13 @@ function updateMotionValuesFromProps(element, next, prev) {
              * to our visual element's motion value map.
              */
             element.addValue(key, nextValue);
+            /**
+             * Check the version of the incoming motion value with this version
+             * and warn against mismatches.
+             */
+            if (process.env.NODE_ENV === "development") {
+                warnOnce(nextValue.version !== "6.3.7", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.7 may not work as expected."));
+            }
         }
         else if (isMotionValue(prevValue)) {
             /**
@@ -7056,10 +7075,7 @@ var layoutFeatures = {
 };
 
 var DocumentProjectionNode = createProjectionNode({
-    attachResizeListener: function (ref, notify) {
-        ref.addEventListener("resize", notify, { passive: true });
-        return function () { return ref.removeEventListener("resize", notify); };
-    },
+    attachResizeListener: function (ref, notify) { return addDomEvent(ref, "resize", notify); },
     measureScroll: function () { return ({
         x: document.documentElement.scrollLeft || document.body.scrollLeft,
         y: document.documentElement.scrollTop || document.body.scrollTop,
@@ -7915,7 +7931,7 @@ function useElementScroll(ref) {
         if (!element)
             return;
         var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-        var scrollListener = addDomEvent(element, "scroll", updateScrollValues, { passive: true });
+        var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
         var resizeListener = addDomEvent(element, "resize", updateScrollValues);
         return function () {
             scrollListener && scrollListener();
@@ -7938,7 +7954,7 @@ var hasListeners = false;
 function addEventListeners() {
     hasListeners = true;
     var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-    addDomEvent(window, "scroll", updateScrollValues, { passive: true });
+    addDomEvent(window, "scroll", updateScrollValues);
     addDomEvent(window, "resize", updateScrollValues);
 }
 /**

package/dist/es/events/use-dom-event.mjs

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
 
 function addDomEvent(target, eventName, handler, options) {
+    if (options === void 0) { options = { passive: true }; }
     target.addEventListener(eventName, handler, options);
-    return function () { return target.removeEventListener(eventName, handler, options); };
+    return function () { return target.removeEventListener(eventName, handler); };
 }
 /**
  * Attaches an event listener directly to the provided DOM element.

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

@@ -388,7 +388,7 @@ var VisualElementDragControls = /** @class */ (function () {
          * constraints as the window resizes.
          */
         var stopResizeListener = addDomEvent(window, "resize", function () {
-            _this.scalePositionWithinConstraints();
+            return _this.scalePositionWithinConstraints();
         });
         /**
          * If the element's layout changes, calculate the delta and apply that to

package/dist/es/gestures/use-hover-gesture.mjs

@@ -19,10 +19,10 @@ function useHoverGesture(_a) {
     var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;
     usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
         ? createHoverEvent(visualElement, true, onHoverStart)
-        : undefined);
+        : undefined, { passive: !onHoverStart });
     usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
         ? createHoverEvent(visualElement, false, onHoverEnd)
-        : undefined);
+        : undefined, { passive: !onHoverEnd });
 }
 
 export { useHoverGesture };

package/dist/es/gestures/use-tap-gesture.mjs

@@ -15,6 +15,12 @@ function useTapGesture(_a) {
     var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
     var isPressing = useRef(false);
     var cancelPointerEndListeners = useRef(null);
+    /**
+     * Only set listener to passive if there are no external listeners.
+     */
+    var eventOptions = {
+        passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
+    };
     function removePointerEndListener() {
         var _a;
         (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
@@ -49,14 +55,14 @@ function useTapGesture(_a) {
         if (isPressing.current)
             return;
         isPressing.current = true;
-        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
+        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         /**
          * Ensure we trigger animations before firing event callback
          */
         (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true);
         onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
     }
-    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
+    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
 }
 

package/dist/es/projection/node/DocumentProjectionNode.mjs

@@ -1,10 +1,8 @@
 import { createProjectionNode } from './create-projection-node.mjs';
+import { addDomEvent } from '../../events/use-dom-event.mjs';
 
 var DocumentProjectionNode = createProjectionNode({
-    attachResizeListener: function (ref, notify) {
-        ref.addEventListener("resize", notify, { passive: true });
-        return function () { return ref.removeEventListener("resize", notify); };
-    },
+    attachResizeListener: function (ref, notify) { return addDomEvent(ref, "resize", notify); },
     measureScroll: function () { return ({
         x: document.documentElement.scrollLeft || document.body.scrollLeft,
         y: document.documentElement.scrollTop || document.body.scrollTop,

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

@@ -1,3 +1,4 @@
+import { warnOnce } from '../../utils/warn-once.mjs';
 import { motionValue } from '../../value/index.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
@@ -12,6 +13,13 @@ function updateMotionValuesFromProps(element, next, prev) {
              * to our visual element's motion value map.
              */
             element.addValue(key, nextValue);
+            /**
+             * Check the version of the incoming motion value with this version
+             * and warn against mismatches.
+             */
+            if (process.env.NODE_ENV === "development") {
+                warnOnce(nextValue.version !== "6.3.7", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.7 may not work as expected."));
+            }
         }
         else if (isMotionValue(prevValue)) {
             /**

package/dist/es/value/index.mjs

@@ -21,6 +21,11 @@ var MotionValue = /** @class */ (function () {
      */
     function MotionValue(init) {
         var _this = this;
+        /**
+         * 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 = "6.3.7";
         /**
          * Duration, in milliseconds, since last updating frame.
          *

package/dist/es/value/scroll/use-element-scroll.mjs

@@ -45,7 +45,7 @@ function useElementScroll(ref) {
         if (!element)
             return;
         var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-        var scrollListener = addDomEvent(element, "scroll", updateScrollValues, { passive: true });
+        var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
         var resizeListener = addDomEvent(element, "resize", updateScrollValues);
         return function () {
             scrollListener && scrollListener();

package/dist/es/value/scroll/use-viewport-scroll.mjs

@@ -15,7 +15,7 @@ var hasListeners = false;
 function addEventListeners() {
     hasListeners = true;
     var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-    addDomEvent(window, "scroll", updateScrollValues, { passive: true });
+    addDomEvent(window, "scroll", updateScrollValues);
     addDomEvent(window, "resize", updateScrollValues);
 }
 /**

package/dist/framer-motion.dev.js

@@ -1695,6 +1695,11 @@
          */
         function MotionValue(init) {
             var _this = this;
+            /**
+             * 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 = "6.3.7";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5109,8 +5114,9 @@
     })(exports.AnimationType || (exports.AnimationType = {}));
 
     function addDomEvent(target, eventName, handler, options) {
+        if (options === void 0) { options = { passive: true }; }
         target.addEventListener(eventName, handler, options);
-        return function () { return target.removeEventListener(eventName, handler, options); };
+        return function () { return target.removeEventListener(eventName, handler); };
     }
     /**
      * Attaches an event listener directly to the provided DOM element.
@@ -5337,10 +5343,10 @@
         var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement;
         usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
             ? createHoverEvent(visualElement, true, onHoverStart)
-            : undefined);
+            : undefined, { passive: !onHoverStart });
         usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
             ? createHoverEvent(visualElement, false, onHoverEnd)
-            : undefined);
+            : undefined, { passive: !onHoverEnd });
     }
 
     /**
@@ -5375,6 +5381,12 @@
         var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
         var isPressing = React.useRef(false);
         var cancelPointerEndListeners = React.useRef(null);
+        /**
+         * Only set listener to passive if there are no external listeners.
+         */
+        var eventOptions = {
+            passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
+        };
         function removePointerEndListener() {
             var _a;
             (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
@@ -5409,14 +5421,14 @@
             if (isPressing.current)
                 return;
             isPressing.current = true;
-            cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel));
+            cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
             /**
              * Ensure we trigger animations before firing event callback
              */
             (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Tap, true);
             onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
         }
-        usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined);
+        usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
         useUnmountEffect(removePointerEndListener);
     }
 
@@ -7008,7 +7020,7 @@
              * constraints as the window resizes.
              */
             var stopResizeListener = addDomEvent(window, "resize", function () {
-                _this.scalePositionWithinConstraints();
+                return _this.scalePositionWithinConstraints();
             });
             /**
              * If the element's layout changes, calculate the delta and apply that to
@@ -7180,6 +7192,13 @@
                  * to our visual element's motion value map.
                  */
                 element.addValue(key, nextValue);
+                /**
+                 * Check the version of the incoming motion value with this version
+                 * and warn against mismatches.
+                 */
+                {
+                    warnOnce(nextValue.version !== "6.3.7", "Attempting to mix Framer Motion versions ".concat(nextValue.version, " with 6.3.7 may not work as expected."));
+                }
             }
             else if (isMotionValue(prevValue)) {
                 /**
@@ -8281,10 +8300,7 @@
     };
 
     var DocumentProjectionNode = createProjectionNode({
-        attachResizeListener: function (ref, notify) {
-            ref.addEventListener("resize", notify, { passive: true });
-            return function () { return ref.removeEventListener("resize", notify); };
-        },
+        attachResizeListener: function (ref, notify) { return addDomEvent(ref, "resize", notify); },
         measureScroll: function () { return ({
             x: document.documentElement.scrollLeft || document.body.scrollLeft,
             y: document.documentElement.scrollTop || document.body.scrollTop,
@@ -9139,7 +9155,7 @@
             if (!element)
                 return;
             var updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element));
-            var scrollListener = addDomEvent(element, "scroll", updateScrollValues, { passive: true });
+            var scrollListener = addDomEvent(element, "scroll", updateScrollValues);
             var resizeListener = addDomEvent(element, "resize", updateScrollValues);
             return function () {
                 scrollListener && scrollListener();
@@ -9162,7 +9178,7 @@
     function addEventListeners() {
         hasListeners = true;
         var updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
-        addDomEvent(window, "scroll", updateScrollValues, { passive: true });
+        addDomEvent(window, "scroll", updateScrollValues);
         addDomEvent(window, "resize", updateScrollValues);
     }
     /**