framer-motion 8.2.0 → 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.0";
+        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.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 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)) {
@@ -9439,11 +9446,6 @@ function animationControls() {
      * Track whether the host component has mounted.
      */
     let hasMounted = false;
-    /**
-     * Pending animations that are started before a component is mounted.
-     * TODO: Remove this as animations should only run in effects
-     */
-    const pendingAnimations = [];
     /**
      * A collection of linked component animation controls.
      */
@@ -9454,29 +9456,14 @@ function animationControls() {
             return () => void subscribers.delete(visualElement);
         },
         start(definition, transitionOverride) {
-            /**
-             * TODO: We only perform this hasMounted check because in Framer we used to
-             * encourage the ability to start an animation within the render phase. This
-             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-             * we can ditch this.
-             */
-            if (hasMounted) {
-                const animations = [];
-                subscribers.forEach((visualElement) => {
-                    animations.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride,
-                    }));
-                });
-                return Promise.all(animations);
-            }
-            else {
-                return new Promise((resolve) => {
-                    pendingAnimations.push({
-                        animation: [definition, transitionOverride],
-                        resolve,
-                    });
-                });
-            }
+            heyListen.invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            const animations = [];
+            subscribers.forEach((visualElement) => {
+                animations.push(animateVisualElement(visualElement, definition, {
+                    transitionOverride,
+                }));
+            });
+            return Promise.all(animations);
         },
         set(definition) {
             heyListen.invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
@@ -9491,9 +9478,6 @@ function animationControls() {
         },
         mount() {
             hasMounted = true;
-            pendingAnimations.forEach(({ animation, resolve }) => {
-                controls.start(...animation).then(resolve);
-            });
             return () => {
                 hasMounted = false;
                 controls.stop();
@@ -9534,7 +9518,7 @@ function animationControls() {
  */
 function useAnimationControls() {
     const controls = useConstant(animationControls);
-    React.useEffect(controls.mount, []);
+    useIsomorphicLayoutEffect(controls.mount, []);
     return controls;
 }
 const useAnimation = useAnimationControls;

package/dist/es/animation/hooks/animation-controls.mjs

@@ -1,5 +1,5 @@
 import { invariant } from 'hey-listen';
-import { stopAnimation, animateVisualElement } from '../../render/utils/animation.mjs';
+import { animateVisualElement, stopAnimation } from '../../render/utils/animation.mjs';
 import { setValues } from '../../render/utils/setters.mjs';
 
 /**
@@ -10,11 +10,6 @@ function animationControls() {
      * Track whether the host component has mounted.
      */
     let hasMounted = false;
-    /**
-     * Pending animations that are started before a component is mounted.
-     * TODO: Remove this as animations should only run in effects
-     */
-    const pendingAnimations = [];
     /**
      * A collection of linked component animation controls.
      */
@@ -25,29 +20,14 @@ function animationControls() {
             return () => void subscribers.delete(visualElement);
         },
         start(definition, transitionOverride) {
-            /**
-             * TODO: We only perform this hasMounted check because in Framer we used to
-             * encourage the ability to start an animation within the render phase. This
-             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-             * we can ditch this.
-             */
-            if (hasMounted) {
-                const animations = [];
-                subscribers.forEach((visualElement) => {
-                    animations.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride,
-                    }));
-                });
-                return Promise.all(animations);
-            }
-            else {
-                return new Promise((resolve) => {
-                    pendingAnimations.push({
-                        animation: [definition, transitionOverride],
-                        resolve,
-                    });
-                });
-            }
+            invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            const animations = [];
+            subscribers.forEach((visualElement) => {
+                animations.push(animateVisualElement(visualElement, definition, {
+                    transitionOverride,
+                }));
+            });
+            return Promise.all(animations);
         },
         set(definition) {
             invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
@@ -62,9 +42,6 @@ function animationControls() {
         },
         mount() {
             hasMounted = true;
-            pendingAnimations.forEach(({ animation, resolve }) => {
-                controls.start(...animation).then(resolve);
-            });
             return () => {
                 hasMounted = false;
                 controls.stop();

package/dist/es/animation/hooks/use-animation.mjs

@@ -1,6 +1,6 @@
 import { animationControls } from './animation-controls.mjs';
-import { useEffect } from 'react';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
 /**
  * Creates `AnimationControls`, which can be used to manually start, stop
@@ -33,7 +33,7 @@ import { useConstant } from '../../utils/use-constant.mjs';
  */
 function useAnimationControls() {
     const controls = useConstant(animationControls);
-    useEffect(controls.mount, []);
+    useIsomorphicLayoutEffect(controls.mount, []);
     return controls;
 }
 const useAnimation = useAnimationControls;

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.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 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.0";
+        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.0";
+            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.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.2.0 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)) {
@@ -10058,11 +10065,6 @@
          * Track whether the host component has mounted.
          */
         let hasMounted = false;
-        /**
-         * Pending animations that are started before a component is mounted.
-         * TODO: Remove this as animations should only run in effects
-         */
-        const pendingAnimations = [];
         /**
          * A collection of linked component animation controls.
          */
@@ -10073,29 +10075,14 @@
                 return () => void subscribers.delete(visualElement);
             },
             start(definition, transitionOverride) {
-                /**
-                 * TODO: We only perform this hasMounted check because in Framer we used to
-                 * encourage the ability to start an animation within the render phase. This
-                 * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-                 * we can ditch this.
-                 */
-                if (hasMounted) {
-                    const animations = [];
-                    subscribers.forEach((visualElement) => {
-                        animations.push(animateVisualElement(visualElement, definition, {
-                            transitionOverride,
-                        }));
-                    });
-                    return Promise.all(animations);
-                }
-                else {
-                    return new Promise((resolve) => {
-                        pendingAnimations.push({
-                            animation: [definition, transitionOverride],
-                            resolve,
-                        });
-                    });
-                }
+                invariant(hasMounted, "controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+                const animations = [];
+                subscribers.forEach((visualElement) => {
+                    animations.push(animateVisualElement(visualElement, definition, {
+                        transitionOverride,
+                    }));
+                });
+                return Promise.all(animations);
             },
             set(definition) {
                 invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
@@ -10110,9 +10097,6 @@
             },
             mount() {
                 hasMounted = true;
-                pendingAnimations.forEach(({ animation, resolve }) => {
-                    controls.start(...animation).then(resolve);
-                });
                 return () => {
                     hasMounted = false;
                     controls.stop();
@@ -10153,7 +10137,7 @@
      */
     function useAnimationControls() {
         const controls = useConstant(animationControls);
-        React.useEffect(controls.mount, []);
+        useIsomorphicLayoutEffect(controls.mount, []);
         return controls;
     }
     const useAnimation = useAnimationControls;