framer-motion 8.2.2 → 8.2.3

package/dist/cjs/index.js

@@ -1359,12 +1359,12 @@ function useDomEvent(ref, eventName, handler, options) {
  */
 function useFocusGesture({ whileFocus, visualElement, }) {
     const { animationState } = visualElement;
-    const onFocus = () => {
+    const onFocus = React.useCallback(() => {
         animationState && animationState.setActive(exports.AnimationType.Focus, true);
-    };
-    const onBlur = () => {
+    }, [animationState]);
+    const onBlur = React.useCallback(() => {
         animationState && animationState.setActive(exports.AnimationType.Focus, false);
-    };
+    }, [animationState]);
     useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
     useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
 }
@@ -1463,12 +1463,16 @@ function createHoverEvent(visualElement, isActive, callback) {
     };
 }
 function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
-    usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
-        ? createHoverEvent(visualElement, true, onHoverStart)
-        : undefined, { passive: !onHoverStart });
-    usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
-        ? createHoverEvent(visualElement, false, onHoverEnd)
-        : undefined, { passive: !onHoverEnd });
+    usePointerEvent(visualElement, "pointerenter", React.useMemo(() => {
+        return onHoverStart || whileHover
+            ? createHoverEvent(visualElement, true, onHoverStart)
+            : undefined;
+    }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
+    usePointerEvent(visualElement, "pointerleave", React.useMemo(() => {
+        return onHoverEnd || whileHover
+            ? createHoverEvent(visualElement, false, onHoverEnd)
+            : undefined;
+    }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
 }
 
 /**
@@ -1508,7 +1512,7 @@ const pipe = (...transformers) => transformers.reduce(combineFunctions);
  * @param handlers -
  * @internal
  */
-function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, }) {
+function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, ...props }) {
     const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
     const isPressing = React.useRef(false);
     const cancelPointerEndListeners = React.useRef(null);
@@ -1516,7 +1520,10 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
      * Only set listener to passive if there are no external listeners.
      */
     const eventOptions = {
-        passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
+        passive: !(onTapStart ||
+            onTap ||
+            onTapCancel ||
+            props["onPointerDown"]),
     };
     function removePointerEndListener() {
         cancelPointerEndListeners.current && cancelPointerEndListeners.current();
@@ -1545,7 +1552,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
             return;
         onTapCancel && onTapCancel(event, info);
     }
-    function onPointerDown(event, info) {
+    const startPress = React.useCallback((event, info) => {
         removePointerEndListener();
         if (isPressing.current)
             return;
@@ -1557,8 +1564,8 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         visualElement.animationState &&
             visualElement.animationState.setActive(exports.AnimationType.Tap, true);
         onTapStart && onTapStart(event, info);
-    }
-    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
+    }, [onTapStart, visualElement]);
+    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
 }
 
@@ -2055,7 +2062,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 = "8.2.2";
+        this.version = "8.2.3";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5911,7 +5918,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.2.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.2 may not work as expected.`);
+                warnOnce(nextValue.version === "8.2.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -1,5 +1,6 @@
 import { AnimationType } from '../render/utils/types.mjs';
 import { useDomEvent } from '../events/use-dom-event.mjs';
+import { useCallback } from 'react';
 
 /**
  *
@@ -9,12 +10,12 @@ import { useDomEvent } from '../events/use-dom-event.mjs';
  */
 function useFocusGesture({ whileFocus, visualElement, }) {
     const { animationState } = visualElement;
-    const onFocus = () => {
+    const onFocus = useCallback(() => {
         animationState && animationState.setActive(AnimationType.Focus, true);
-    };
-    const onBlur = () => {
+    }, [animationState]);
+    const onBlur = useCallback(() => {
         animationState && animationState.setActive(AnimationType.Focus, false);
-    };
+    }, [animationState]);
     useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
     useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
 }

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

@@ -1,6 +1,7 @@
 import { AnimationType } from '../render/utils/types.mjs';
 import { usePointerEvent } from '../events/use-pointer-event.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
+import { useMemo } from 'react';
 
 function isMouseEvent(event) {
     return event.type !== "pen" && event.type !== "touch";
@@ -19,12 +20,16 @@ function createHoverEvent(visualElement, isActive, callback) {
     };
 }
 function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
-    usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
-        ? createHoverEvent(visualElement, true, onHoverStart)
-        : undefined, { passive: !onHoverStart });
-    usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
-        ? createHoverEvent(visualElement, false, onHoverEnd)
-        : undefined, { passive: !onHoverEnd });
+    usePointerEvent(visualElement, "pointerenter", useMemo(() => {
+        return onHoverStart || whileHover
+            ? createHoverEvent(visualElement, true, onHoverStart)
+            : undefined;
+    }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
+    usePointerEvent(visualElement, "pointerleave", useMemo(() => {
+        return onHoverEnd || whileHover
+            ? createHoverEvent(visualElement, false, onHoverEnd)
+            : undefined;
+    }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
 }
 
 export { useHoverGesture };

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

@@ -1,6 +1,6 @@
-import { useRef } from 'react';
+import { useRef, useCallback } from 'react';
 import { isNodeOrChild } from './utils/is-node-or-child.mjs';
-import { usePointerEvent, addPointerEvent } from '../events/use-pointer-event.mjs';
+import { addPointerEvent, usePointerEvent } from '../events/use-pointer-event.mjs';
 import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
 import { AnimationType } from '../render/utils/types.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
@@ -10,7 +10,7 @@ import { pipe } from '../utils/pipe.mjs';
  * @param handlers -
  * @internal
  */
-function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, }) {
+function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, ...props }) {
     const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
     const isPressing = useRef(false);
     const cancelPointerEndListeners = useRef(null);
@@ -18,7 +18,10 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
      * Only set listener to passive if there are no external listeners.
      */
     const eventOptions = {
-        passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
+        passive: !(onTapStart ||
+            onTap ||
+            onTapCancel ||
+            props["onPointerDown"]),
     };
     function removePointerEndListener() {
         cancelPointerEndListeners.current && cancelPointerEndListeners.current();
@@ -47,7 +50,7 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
             return;
         onTapCancel && onTapCancel(event, info);
     }
-    function onPointerDown(event, info) {
+    const startPress = useCallback((event, info) => {
         removePointerEndListener();
         if (isPressing.current)
             return;
@@ -59,8 +62,8 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         visualElement.animationState &&
             visualElement.animationState.setActive(AnimationType.Tap, true);
         onTapStart && onTapStart(event, info);
-    }
-    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
+    }, [onTapStart, visualElement]);
+    usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
     useUnmountEffect(removePointerEndListener);
 }
 

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

package/dist/es/value/index.mjs

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

package/dist/framer-motion.dev.js

@@ -1357,12 +1357,12 @@
      */
     function useFocusGesture({ whileFocus, visualElement, }) {
         const { animationState } = visualElement;
-        const onFocus = () => {
+        const onFocus = React.useCallback(() => {
             animationState && animationState.setActive(exports.AnimationType.Focus, true);
-        };
-        const onBlur = () => {
+        }, [animationState]);
+        const onBlur = React.useCallback(() => {
             animationState && animationState.setActive(exports.AnimationType.Focus, false);
-        };
+        }, [animationState]);
         useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
         useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
     }
@@ -1461,12 +1461,16 @@
         };
     }
     function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
-        usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover
-            ? createHoverEvent(visualElement, true, onHoverStart)
-            : undefined, { passive: !onHoverStart });
-        usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover
-            ? createHoverEvent(visualElement, false, onHoverEnd)
-            : undefined, { passive: !onHoverEnd });
+        usePointerEvent(visualElement, "pointerenter", React.useMemo(() => {
+            return onHoverStart || whileHover
+                ? createHoverEvent(visualElement, true, onHoverStart)
+                : undefined;
+        }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });
+        usePointerEvent(visualElement, "pointerleave", React.useMemo(() => {
+            return onHoverEnd || whileHover
+                ? createHoverEvent(visualElement, false, onHoverEnd)
+                : undefined;
+        }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });
     }
 
     /**
@@ -1506,7 +1510,7 @@
      * @param handlers -
      * @internal
      */
-    function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, }) {
+    function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, ...props }) {
         const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;
         const isPressing = React.useRef(false);
         const cancelPointerEndListeners = React.useRef(null);
@@ -1514,7 +1518,10 @@
          * Only set listener to passive if there are no external listeners.
          */
         const eventOptions = {
-            passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
+            passive: !(onTapStart ||
+                onTap ||
+                onTapCancel ||
+                props["onPointerDown"]),
         };
         function removePointerEndListener() {
             cancelPointerEndListeners.current && cancelPointerEndListeners.current();
@@ -1543,7 +1550,7 @@
                 return;
             onTapCancel && onTapCancel(event, info);
         }
-        function onPointerDown(event, info) {
+        const startPress = React.useCallback((event, info) => {
             removePointerEndListener();
             if (isPressing.current)
                 return;
@@ -1555,8 +1562,8 @@
             visualElement.animationState &&
                 visualElement.animationState.setActive(exports.AnimationType.Tap, true);
             onTapStart && onTapStart(event, info);
-        }
-        usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
+        }, [onTapStart, visualElement]);
+        usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
         useUnmountEffect(removePointerEndListener);
     }
 
@@ -2053,7 +2060,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 = "8.2.2";
+            this.version = "8.2.3";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5924,7 +5931,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.2.2", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.2 may not work as expected.`);
+                    warnOnce(nextValue.version === "8.2.3", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.3 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {