framer-motion 8.5.5 → 9.0.1-css-var-fix

package/dist/cjs/index.js

@@ -809,6 +809,10 @@ function useHTMLProps(props, visualState, isStatic) {
                 ? "none"
                 : `pan-${props.drag === "x" ? "y" : "x"}`;
     }
+    if (props.tabIndex === undefined &&
+        (props.onTap || props.onTapStart || props.whileTap)) {
+        htmlProps.tabIndex = 0;
+    }
     htmlProps.style = style;
     return htmlProps;
 }
@@ -1353,19 +1357,33 @@ function useDomEvent(ref, eventName, handler, options) {
     }, [ref, eventName, handler, options]);
 }
 
-/**
- *
- * @param props
- * @param ref
- * @internal
- */
 function useFocusGesture({ whileFocus, visualElement, }) {
+    const isFocusActive = React.useRef(false);
     const { animationState } = visualElement;
     const onFocus = React.useCallback(() => {
-        animationState && animationState.setActive(exports.AnimationType.Focus, true);
+        let isFocusVisible = false;
+        /**
+         * If this element doesn't match focus-visible then don't
+         * apply whileHover. But, if matches throws that focus-visible
+         * is not a valid selector then in that browser outline styles will be applied
+         * to the element by default and we want to match that behaviour with whileFocus.
+         */
+        try {
+            isFocusVisible = visualElement.current.matches(":focus-visible");
+        }
+        catch (e) {
+            isFocusVisible = true;
+        }
+        if (!isFocusVisible || !animationState)
+            return;
+        animationState.setActive(exports.AnimationType.Focus, true);
+        isFocusActive.current = true;
     }, [animationState]);
     const onBlur = React.useCallback(() => {
-        animationState && animationState.setActive(exports.AnimationType.Focus, false);
+        if (!isFocusActive.current || !animationState)
+            return;
+        animationState.setActive(exports.AnimationType.Focus, false);
+        isFocusActive.current = false;
     }, [animationState]);
     useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
     useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
@@ -1518,6 +1536,12 @@ function useUnmountEffect(callback) {
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
+function fireSyntheticPointerEvent(name, handler) {
+    if (!handler)
+        return;
+    const syntheticPointerEvent = new PointerEvent("pointer" + name);
+    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
+}
 /**
  * @param handlers -
  * @internal
@@ -1566,13 +1590,8 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
             return;
         (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
     }
-    const startPress = React.useCallback((event, info) => {
+    function onPointerStart(event, info) {
         var _a;
-        removePointerEndListener();
-        if (isPressing.current)
-            return;
-        isPressing.current = true;
-        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         const latestProps = visualElement.getProps();
         /**
          * Ensure we trigger animations before firing event callback
@@ -1581,8 +1600,43 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
             visualElement.animationState.setActive(exports.AnimationType.Tap, true);
         }
         (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
-    }, [Boolean(onTapStart), visualElement]);
+    }
+    const callbackDependencies = [
+        Boolean(onTapStart),
+        Boolean(onTap),
+        Boolean(whileTap),
+        visualElement,
+    ];
+    const startPress = React.useCallback((event, info) => {
+        removePointerEndListener();
+        if (isPressing.current)
+            return;
+        isPressing.current = true;
+        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+        onPointerStart(event, info);
+    }, callbackDependencies);
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
+    const startAccessiblePress = React.useCallback(() => {
+        const stopKeydownListener = addDomEvent(visualElement.current, "keydown", (event) => {
+            if (event.key !== "Enter" || isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = addDomEvent(visualElement.current, "keyup", () => {
+                if (event.key !== "Enter" || !checkPointerEnd())
+                    return;
+                fireSyntheticPointerEvent("up", visualElement.getProps().onTap);
+            }, eventOptions);
+            fireSyntheticPointerEvent("down", onPointerStart);
+        });
+        const stopBlurListener = addDomEvent(visualElement.current, "blur", () => {
+            stopKeydownListener();
+            stopBlurListener();
+            if (isPressing.current) {
+                fireSyntheticPointerEvent("cancel", onPointerCancel);
+            }
+        });
+    }, callbackDependencies);
+    useDomEvent(visualElement, "focus", hasPressListeners ? startAccessiblePress : undefined);
     useUnmountEffect(removePointerEndListener);
 }
 
@@ -2079,7 +2133,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.5.5";
+        this.version = "9.0.1-css-var-fix";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -5650,10 +5704,12 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
             continue;
         // Clone target if it hasn't already been
         target[key] = resolved;
+        if (!transitionEnd)
+            transitionEnd = {};
         // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
         // CSS variable. This will ensure that after the animation the component will reflect
         // changes in the value of the CSS variable.
-        if (transitionEnd && transitionEnd[key] === undefined) {
+        if (transitionEnd[key] === undefined) {
             transitionEnd[key] = current;
         }
     }
@@ -5928,7 +5984,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "8.5.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.5 may not work as expected.`);
+                warnOnce(nextValue.version === "9.0.1-css-var-fix", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.1-css-var-fix may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

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

@@ -1,20 +1,34 @@
 import { AnimationType } from '../render/utils/types.mjs';
 import { useDomEvent } from '../events/use-dom-event.mjs';
-import { useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 
-/**
- *
- * @param props
- * @param ref
- * @internal
- */
 function useFocusGesture({ whileFocus, visualElement, }) {
+    const isFocusActive = useRef(false);
     const { animationState } = visualElement;
     const onFocus = useCallback(() => {
-        animationState && animationState.setActive(AnimationType.Focus, true);
+        let isFocusVisible = false;
+        /**
+         * If this element doesn't match focus-visible then don't
+         * apply whileHover. But, if matches throws that focus-visible
+         * is not a valid selector then in that browser outline styles will be applied
+         * to the element by default and we want to match that behaviour with whileFocus.
+         */
+        try {
+            isFocusVisible = visualElement.current.matches(":focus-visible");
+        }
+        catch (e) {
+            isFocusVisible = true;
+        }
+        if (!isFocusVisible || !animationState)
+            return;
+        animationState.setActive(AnimationType.Focus, true);
+        isFocusActive.current = true;
     }, [animationState]);
     const onBlur = useCallback(() => {
-        animationState && animationState.setActive(AnimationType.Focus, false);
+        if (!isFocusActive.current || !animationState)
+            return;
+        animationState.setActive(AnimationType.Focus, false);
+        isFocusActive.current = false;
     }, [animationState]);
     useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
     useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);

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

@@ -5,7 +5,15 @@ import { useUnmountEffect } from '../utils/use-unmount-effect.mjs';
 import { AnimationType } from '../render/utils/types.mjs';
 import { isDragActive } from './drag/utils/lock.mjs';
 import { pipe } from '../utils/pipe.mjs';
+import { addDomEvent, useDomEvent } from '../events/use-dom-event.mjs';
+import { extractEventInfo } from '../events/event-info.mjs';
 
+function fireSyntheticPointerEvent(name, handler) {
+    if (!handler)
+        return;
+    const syntheticPointerEvent = new PointerEvent("pointer" + name);
+    handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
+}
 /**
  * @param handlers -
  * @internal
@@ -54,13 +62,8 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
             return;
         (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
     }
-    const startPress = useCallback((event, info) => {
+    function onPointerStart(event, info) {
         var _a;
-        removePointerEndListener();
-        if (isPressing.current)
-            return;
-        isPressing.current = true;
-        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
         const latestProps = visualElement.getProps();
         /**
          * Ensure we trigger animations before firing event callback
@@ -69,8 +72,43 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
             visualElement.animationState.setActive(AnimationType.Tap, true);
         }
         (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
-    }, [Boolean(onTapStart), visualElement]);
+    }
+    const callbackDependencies = [
+        Boolean(onTapStart),
+        Boolean(onTap),
+        Boolean(whileTap),
+        visualElement,
+    ];
+    const startPress = useCallback((event, info) => {
+        removePointerEndListener();
+        if (isPressing.current)
+            return;
+        isPressing.current = true;
+        cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+        onPointerStart(event, info);
+    }, callbackDependencies);
     usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
+    const startAccessiblePress = useCallback(() => {
+        const stopKeydownListener = addDomEvent(visualElement.current, "keydown", (event) => {
+            if (event.key !== "Enter" || isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = addDomEvent(visualElement.current, "keyup", () => {
+                if (event.key !== "Enter" || !checkPointerEnd())
+                    return;
+                fireSyntheticPointerEvent("up", visualElement.getProps().onTap);
+            }, eventOptions);
+            fireSyntheticPointerEvent("down", onPointerStart);
+        });
+        const stopBlurListener = addDomEvent(visualElement.current, "blur", () => {
+            stopKeydownListener();
+            stopBlurListener();
+            if (isPressing.current) {
+                fireSyntheticPointerEvent("cancel", onPointerCancel);
+            }
+        });
+    }, callbackDependencies);
+    useDomEvent(visualElement, "focus", hasPressListeners ? startAccessiblePress : undefined);
     useUnmountEffect(removePointerEndListener);
 }
 

package/dist/es/render/dom/utils/css-variables-conversion.mjs

@@ -74,10 +74,12 @@ function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
             continue;
         // Clone target if it hasn't already been
         target[key] = resolved;
+        if (!transitionEnd)
+            transitionEnd = {};
         // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
         // CSS variable. This will ensure that after the animation the component will reflect
         // changes in the value of the CSS variable.
-        if (transitionEnd && transitionEnd[key] === undefined) {
+        if (transitionEnd[key] === undefined) {
             transitionEnd[key] = current;
         }
     }

package/dist/es/render/html/use-props.mjs

@@ -46,6 +46,10 @@ function useHTMLProps(props, visualState, isStatic) {
                 ? "none"
                 : `pan-${props.drag === "x" ? "y" : "x"}`;
     }
+    if (props.tabIndex === undefined &&
+        (props.onTap || props.onTapStart || props.whileTap)) {
+        htmlProps.tabIndex = 0;
+    }
     htmlProps.style = style;
     return htmlProps;
 }

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

package/dist/framer-motion.dev.js

@@ -807,6 +807,10 @@
                     ? "none"
                     : `pan-${props.drag === "x" ? "y" : "x"}`;
         }
+        if (props.tabIndex === undefined &&
+            (props.onTap || props.onTapStart || props.whileTap)) {
+            htmlProps.tabIndex = 0;
+        }
         htmlProps.style = style;
         return htmlProps;
     }
@@ -1351,19 +1355,33 @@
         }, [ref, eventName, handler, options]);
     }
 
-    /**
-     *
-     * @param props
-     * @param ref
-     * @internal
-     */
     function useFocusGesture({ whileFocus, visualElement, }) {
+        const isFocusActive = React.useRef(false);
         const { animationState } = visualElement;
         const onFocus = React.useCallback(() => {
-            animationState && animationState.setActive(exports.AnimationType.Focus, true);
+            let isFocusVisible = false;
+            /**
+             * If this element doesn't match focus-visible then don't
+             * apply whileHover. But, if matches throws that focus-visible
+             * is not a valid selector then in that browser outline styles will be applied
+             * to the element by default and we want to match that behaviour with whileFocus.
+             */
+            try {
+                isFocusVisible = visualElement.current.matches(":focus-visible");
+            }
+            catch (e) {
+                isFocusVisible = true;
+            }
+            if (!isFocusVisible || !animationState)
+                return;
+            animationState.setActive(exports.AnimationType.Focus, true);
+            isFocusActive.current = true;
         }, [animationState]);
         const onBlur = React.useCallback(() => {
-            animationState && animationState.setActive(exports.AnimationType.Focus, false);
+            if (!isFocusActive.current || !animationState)
+                return;
+            animationState.setActive(exports.AnimationType.Focus, false);
+            isFocusActive.current = false;
         }, [animationState]);
         useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
         useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
@@ -1516,6 +1534,12 @@
     const combineFunctions = (a, b) => (v) => b(a(v));
     const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
+    function fireSyntheticPointerEvent(name, handler) {
+        if (!handler)
+            return;
+        const syntheticPointerEvent = new PointerEvent("pointer" + name);
+        handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent));
+    }
     /**
      * @param handlers -
      * @internal
@@ -1564,13 +1588,8 @@
                 return;
             (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);
         }
-        const startPress = React.useCallback((event, info) => {
+        function onPointerStart(event, info) {
             var _a;
-            removePointerEndListener();
-            if (isPressing.current)
-                return;
-            isPressing.current = true;
-            cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
             const latestProps = visualElement.getProps();
             /**
              * Ensure we trigger animations before firing event callback
@@ -1579,8 +1598,43 @@
                 visualElement.animationState.setActive(exports.AnimationType.Tap, true);
             }
             (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);
-        }, [Boolean(onTapStart), visualElement]);
+        }
+        const callbackDependencies = [
+            Boolean(onTapStart),
+            Boolean(onTap),
+            Boolean(whileTap),
+            visualElement,
+        ];
+        const startPress = React.useCallback((event, info) => {
+            removePointerEndListener();
+            if (isPressing.current)
+                return;
+            isPressing.current = true;
+            cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp, eventOptions), addPointerEvent(window, "pointercancel", onPointerCancel, eventOptions));
+            onPointerStart(event, info);
+        }, callbackDependencies);
         usePointerEvent(visualElement, "pointerdown", hasPressListeners ? startPress : undefined, eventOptions);
+        const startAccessiblePress = React.useCallback(() => {
+            const stopKeydownListener = addDomEvent(visualElement.current, "keydown", (event) => {
+                if (event.key !== "Enter" || isPressing.current)
+                    return;
+                isPressing.current = true;
+                cancelPointerEndListeners.current = addDomEvent(visualElement.current, "keyup", () => {
+                    if (event.key !== "Enter" || !checkPointerEnd())
+                        return;
+                    fireSyntheticPointerEvent("up", visualElement.getProps().onTap);
+                }, eventOptions);
+                fireSyntheticPointerEvent("down", onPointerStart);
+            });
+            const stopBlurListener = addDomEvent(visualElement.current, "blur", () => {
+                stopKeydownListener();
+                stopBlurListener();
+                if (isPressing.current) {
+                    fireSyntheticPointerEvent("cancel", onPointerCancel);
+                }
+            });
+        }, callbackDependencies);
+        useDomEvent(visualElement, "focus", hasPressListeners ? startAccessiblePress : undefined);
         useUnmountEffect(removePointerEndListener);
     }
 
@@ -2077,7 +2131,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.5.5";
+            this.version = "9.0.1-css-var-fix";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -5663,10 +5717,12 @@
                 continue;
             // Clone target if it hasn't already been
             target[key] = resolved;
+            if (!transitionEnd)
+                transitionEnd = {};
             // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
             // CSS variable. This will ensure that after the animation the component will reflect
             // changes in the value of the CSS variable.
-            if (transitionEnd && transitionEnd[key] === undefined) {
+            if (transitionEnd[key] === undefined) {
                 transitionEnd[key] = current;
             }
         }
@@ -5941,7 +5997,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "8.5.5", `Attempting to mix Framer Motion versions ${nextValue.version} with 8.5.5 may not work as expected.`);
+                    warnOnce(nextValue.version === "9.0.1-css-var-fix", `Attempting to mix Framer Motion versions ${nextValue.version} with 9.0.1-css-var-fix may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {