@react-aria/interactions 3.25.6 → 3.26.0

package/src/usePress.ts

@@ -29,6 +29,7 @@ import {
   openLink,
   useEffectEvent,
   useGlobalListeners,
+  useLayoutEffect,
   useSyncRef
 } from '@react-aria/utils';
 import {createSyntheticEvent, preventFocus, setEventTarget} from './utils';
@@ -36,7 +37,7 @@ import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents, RefObject} from '@react-types/shared';
 import {flushSync} from 'react-dom';
 import {PressResponderContext} from './context';
-import {MouseEvent as RMouseEvent, TouchEvent as RTouchEvent, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import {MouseEvent as RMouseEvent, TouchEvent as RTouchEvent, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
 export interface PressProps extends PressEvents {
   /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
@@ -195,9 +196,9 @@ export function usePress(props: PressHookProps): PressResult {
     disposables: []
   });
 
-  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
+  let {addGlobalListener, removeAllGlobalListeners, removeGlobalListener} = useGlobalListeners();
 
-  let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+  let triggerPressStart = useCallback((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
     if (isDisabled || state.didFirePressStart) {
       return false;
@@ -219,9 +220,9 @@ export function usePress(props: PressHookProps): PressResult {
     state.didFirePressStart = true;
     setPressed(true);
     return shouldStopPropagation;
-  });
+  }, [isDisabled, onPressStart, onPressChange]);
 
-  let triggerPressEnd = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
+  let triggerPressEnd = useCallback((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
     let state = ref.current;
     if (!state.didFirePressStart) {
       return false;
@@ -251,9 +252,10 @@ export function usePress(props: PressHookProps): PressResult {
 
     state.isTriggeringEvent = false;
     return shouldStopPropagation;
-  });
+  }, [isDisabled, onPressEnd, onPressChange, onPress]);
+  let triggerPressEndEvent = useEffectEvent(triggerPressEnd);
 
-  let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
+  let triggerPressUp = useCallback((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
     if (isDisabled) {
       return false;
@@ -268,15 +270,17 @@ export function usePress(props: PressHookProps): PressResult {
     }
 
     return true;
-  });
+  }, [isDisabled, onPressUp]);
+  let triggerPressUpEvent = useEffectEvent(triggerPressUp);
 
-  let cancel = useEffectEvent((e: EventBase) => {
+  let cancel = useCallback((e: EventBase) => {
     let state = ref.current;
     if (state.isPressed && state.target) {
       if (state.didFirePressStart && state.pointerType != null) {
         triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
       }
       state.isPressed = false;
+      setIsPointerPressed(null);
       state.isOverTarget = false;
       state.activePointerId = null;
       state.pointerType = null;
@@ -289,23 +293,24 @@ export function usePress(props: PressHookProps): PressResult {
       }
       state.disposables = [];
     }
-  });
+  }, [allowTextSelectionOnPress, removeAllGlobalListeners, triggerPressEnd]);
+  let cancelEvent = useEffectEvent(cancel);
 
-  let cancelOnPointerExit = useEffectEvent((e: EventBase) => {
+  let cancelOnPointerExit = useCallback((e: EventBase) => {
     if (shouldCancelOnPointerExit) {
       cancel(e);
     }
-  });
+  }, [shouldCancelOnPointerExit, cancel]);
 
-  let triggerClick = useEffectEvent((e: RMouseEvent<FocusableElement>) => {
+  let triggerClick = useCallback((e: RMouseEvent<FocusableElement>) => {
     if (isDisabled) {
       return;
     }
 
     onClick?.(e);
-  });
+  }, [isDisabled, onClick]);
 
-  let triggerSyntheticClick = useEffectEvent((e: KeyboardEvent | TouchEvent, target: FocusableElement) => {
+  let triggerSyntheticClick = useCallback((e: KeyboardEvent | TouchEvent, target: FocusableElement) => {
     if (isDisabled) {
       return;
     }
@@ -320,7 +325,164 @@ export function usePress(props: PressHookProps): PressResult {
       setEventTarget(event, target);
       onClick(createSyntheticEvent(event));
     }
-  });
+  }, [isDisabled, onClick]);
+  let triggerSyntheticClickEvent = useEffectEvent(triggerSyntheticClick);
+
+  let [isElemKeyPressed, setIsElemKeyPressed] = useState<boolean>(false);
+  useLayoutEffect(() => {
+    let state = ref.current;
+    if (isElemKeyPressed) {
+      let onKeyUp = (e: KeyboardEvent) => {
+        if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
+          if (shouldPreventDefaultKeyboard(getEventTarget(e), e.key)) {
+            e.preventDefault();
+          }
+
+          let target = getEventTarget(e);
+          let wasPressed = nodeContains(state.target, getEventTarget(e));
+          triggerPressEndEvent(createEvent(state.target, e), 'keyboard', wasPressed);
+          if (wasPressed) {
+            triggerSyntheticClickEvent(e, state.target);
+          }
+          removeAllGlobalListeners();
+
+          // If a link was triggered with a key other than Enter, open the URL ourselves.
+          // This means the link has a role override, and the default browser behavior
+          // only applies when using the Enter key.
+          if (e.key !== 'Enter' && isHTMLAnchorLink(state.target) && nodeContains(state.target, target) && !e[LINK_CLICKED]) {
+            // Store a hidden property on the event so we only trigger link click once,
+            // even if there are multiple usePress instances attached to the element.
+            e[LINK_CLICKED] = true;
+            openLink(state.target, e, false);
+          }
+
+          state.isPressed = false;
+          setIsElemKeyPressed(false);
+          state.metaKeyEvents?.delete(e.key);
+        } else if (e.key === 'Meta' && state.metaKeyEvents?.size) {
+          // If we recorded keydown events that occurred while the Meta key was pressed,
+          // and those haven't received keyup events already, fire keyup events ourselves.
+          // See comment above for more info about the macOS bug causing this.
+          let events = state.metaKeyEvents;
+          state.metaKeyEvents = undefined;
+          for (let event of events.values()) {
+            state.target?.dispatchEvent(new KeyboardEvent('keyup', event));
+          }
+        }
+      };
+      // Focus may move before the key up event, so register the event on the document
+      // instead of the same element where the key down event occurred. Make it capturing so that it will trigger
+      // before stopPropagation from useKeyboard on a child element may happen and thus we can still call triggerPress for the parent element.
+      let originalTarget = state.target;
+      let pressUp = (e) => {
+        if (originalTarget && isValidKeyboardEvent(e, originalTarget) && !e.repeat && nodeContains(originalTarget, getEventTarget(e)) && state.target) {
+          triggerPressUpEvent(createEvent(state.target, e), 'keyboard');
+        }
+      };
+      let listener = chain(pressUp, onKeyUp);
+      addGlobalListener(getOwnerDocument(state.target), 'keyup', listener, true);
+      return () => {
+        removeGlobalListener(getOwnerDocument(state.target), 'keyup', listener, true);
+      };
+    }
+  }, [isElemKeyPressed, addGlobalListener, removeAllGlobalListeners, removeGlobalListener]);
+
+  let [isPointerPressed, setIsPointerPressed] = useState<'pointer' | 'mouse' | 'touch' | null>(null);
+  useLayoutEffect(() => {
+    let state = ref.current;
+    if (isPointerPressed === 'pointer') {
+      let onPointerUp = (e: PointerEvent) => {
+        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
+          if (nodeContains(state.target, getEventTarget(e)) && state.pointerType != null) {
+            // Wait for onClick to fire onPress. This avoids browser issues when the DOM
+            // is mutated between onPointerUp and onClick, and is more compatible with third party libraries.
+            // https://github.com/adobe/react-spectrum/issues/1513
+            // https://issues.chromium.org/issues/40732224
+            // However, iOS and Android do not focus or fire onClick after a long press.
+            // We work around this by triggering a click ourselves after a timeout.
+            // This timeout is canceled during the click event in case the real one fires first.
+            // The timeout must be at least 32ms, because Safari on iOS delays the click event on
+            // non-form elements without certain ARIA roles (for hover emulation).
+            // https://github.com/WebKit/WebKit/blob/dccfae42bb29bd4bdef052e469f604a9387241c0/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L875-L892
+            let clicked = false;
+            let timeout = setTimeout(() => {
+              if (state.isPressed && state.target instanceof HTMLElement) {
+                if (clicked) {
+                  cancelEvent(e);
+                } else {
+                  focusWithoutScrolling(state.target);
+                  state.target.click();
+                }
+              }
+            }, 80);
+            // Use a capturing listener to track if a click occurred.
+            // If stopPropagation is called it may never reach our handler.
+            addGlobalListener(e.currentTarget as Document, 'click', () => clicked = true, true);
+            state.disposables.push(() => clearTimeout(timeout));
+          } else {
+            cancelEvent(e);
+          }
+
+          // Ignore subsequent onPointerLeave event before onClick on touch devices.
+          state.isOverTarget = false;
+        }
+      };
+
+      let onPointerCancel = (e: PointerEvent) => {
+        cancelEvent(e);
+      };
+
+      addGlobalListener(getOwnerDocument(state.target), 'pointerup', onPointerUp, false);
+      addGlobalListener(getOwnerDocument(state.target), 'pointercancel', onPointerCancel, false);
+      return () => {
+        removeGlobalListener(getOwnerDocument(state.target), 'pointerup', onPointerUp, false);
+        removeGlobalListener(getOwnerDocument(state.target), 'pointercancel', onPointerCancel, false);
+      };
+    } else if (isPointerPressed === 'mouse' && process.env.NODE_ENV === 'test') {
+      let onMouseUp = (e: MouseEvent) => {
+        // Only handle left clicks
+        if (e.button !== 0) {
+          return;
+        }
+
+        if (state.ignoreEmulatedMouseEvents) {
+          state.ignoreEmulatedMouseEvents = false;
+          return;
+        }
+
+        if (state.target && state.target.contains(e.target as Element) && state.pointerType != null) {
+          // Wait for onClick to fire onPress. This avoids browser issues when the DOM
+          // is mutated between onMouseUp and onClick, and is more compatible with third party libraries.
+        } else {
+          cancelEvent(e);
+        }
+
+        state.isOverTarget = false;
+      };
+
+      addGlobalListener(getOwnerDocument(state.target), 'mouseup', onMouseUp, false);
+      return () => {
+        removeGlobalListener(getOwnerDocument(state.target), 'mouseup', onMouseUp, false);
+      };
+    } else if (isPointerPressed === 'touch' && process.env.NODE_ENV === 'test') {
+      let onScroll = (e: Event) => {
+        if (state.isPressed && nodeContains(getEventTarget(e), state.target)) {
+          cancelEvent({
+            currentTarget: state.target,
+            shiftKey: false,
+            ctrlKey: false,
+            metaKey: false,
+            altKey: false
+          });
+        }
+      };
+
+      addGlobalListener(getOwnerWindow(state.target), 'scroll', onScroll, true);
+      return () => {
+        removeGlobalListener(getOwnerWindow(state.target), 'scroll', onScroll, true);
+      };
+    }
+  }, [isPointerPressed, addGlobalListener, removeGlobalListener]);
 
   let pressProps = useMemo(() => {
     let state = ref.current;
@@ -338,20 +500,9 @@ export function usePress(props: PressHookProps): PressResult {
           if (!state.isPressed && !e.repeat) {
             state.target = e.currentTarget;
             state.isPressed = true;
+            setIsElemKeyPressed(true);
             state.pointerType = 'keyboard';
             shouldStopPropagation = triggerPressStart(e, 'keyboard');
-
-            // Focus may move before the key up event, so register the event on the document
-            // instead of the same element where the key down event occurred. Make it capturing so that it will trigger
-            // before stopPropagation from useKeyboard on a child element may happen and thus we can still call triggerPress for the parent element.
-            let originalTarget = e.currentTarget;
-            let pressUp = (e) => {
-              if (isValidKeyboardEvent(e, originalTarget) && !e.repeat && nodeContains(originalTarget, getEventTarget(e)) && state.target) {
-                triggerPressUp(createEvent(state.target, e), 'keyboard');
-              }
-            };
-
-            addGlobalListener(getOwnerDocument(e.currentTarget), 'keyup', chain(pressUp, onKeyUp), true);
           }
 
           if (shouldStopPropagation) {
@@ -409,44 +560,6 @@ export function usePress(props: PressHookProps): PressResult {
       }
     };
 
-    let onKeyUp = (e: KeyboardEvent) => {
-      if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
-        if (shouldPreventDefaultKeyboard(getEventTarget(e), e.key)) {
-          e.preventDefault();
-        }
-
-        let target = getEventTarget(e);
-        let wasPressed = nodeContains(state.target, getEventTarget(e));
-        triggerPressEnd(createEvent(state.target, e), 'keyboard', wasPressed);
-        if (wasPressed) {
-          triggerSyntheticClick(e, state.target);
-        }
-        removeAllGlobalListeners();
-
-        // If a link was triggered with a key other than Enter, open the URL ourselves.
-        // This means the link has a role override, and the default browser behavior
-        // only applies when using the Enter key.
-        if (e.key !== 'Enter' && isHTMLAnchorLink(state.target) && nodeContains(state.target, target) && !e[LINK_CLICKED]) {
-          // Store a hidden property on the event so we only trigger link click once,
-          // even if there are multiple usePress instances attached to the element.
-          e[LINK_CLICKED] = true;
-          openLink(state.target, e, false);
-        }
-
-        state.isPressed = false;
-        state.metaKeyEvents?.delete(e.key);
-      } else if (e.key === 'Meta' && state.metaKeyEvents?.size) {
-        // If we recorded keydown events that occurred while the Meta key was pressed,
-        // and those haven't received keyup events already, fire keyup events ourselves.
-        // See comment above for more info about the macOS bug causing this.
-        let events = state.metaKeyEvents;
-        state.metaKeyEvents = undefined;
-        for (let event of events.values()) {
-          state.target?.dispatchEvent(new KeyboardEvent('keyup', event));
-        }
-      }
-    };
-
     if (typeof PointerEvent !== 'undefined') {
       pressProps.onPointerDown = (e) => {
         // Only handle left clicks, and ignore events that bubbled through portals.
@@ -468,6 +581,7 @@ export function usePress(props: PressHookProps): PressResult {
         let shouldStopPropagation = true;
         if (!state.isPressed) {
           state.isPressed = true;
+          setIsPointerPressed('pointer');
           state.isOverTarget = true;
           state.activePointerId = e.pointerId;
           state.target = e.currentTarget as FocusableElement;
@@ -484,9 +598,6 @@ export function usePress(props: PressHookProps): PressResult {
           if ('releasePointerCapture' in target) {
             target.releasePointerCapture(e.pointerId);
           }
-
-          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointerup', onPointerUp, false);
-          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointercancel', onPointerCancel, false);
         }
 
         if (shouldStopPropagation) {
@@ -538,46 +649,6 @@ export function usePress(props: PressHookProps): PressResult {
         }
       };
 
-      let onPointerUp = (e: PointerEvent) => {
-        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
-          if (nodeContains(state.target, getEventTarget(e)) && state.pointerType != null) {
-            // Wait for onClick to fire onPress. This avoids browser issues when the DOM
-            // is mutated between onPointerUp and onClick, and is more compatible with third party libraries.
-            // https://github.com/adobe/react-spectrum/issues/1513
-            // https://issues.chromium.org/issues/40732224
-            // However, iOS and Android do not focus or fire onClick after a long press.
-            // We work around this by triggering a click ourselves after a timeout.
-            // This timeout is canceled during the click event in case the real one fires first.
-            // The timeout must be at least 32ms, because Safari on iOS delays the click event on
-            // non-form elements without certain ARIA roles (for hover emulation).
-            // https://github.com/WebKit/WebKit/blob/dccfae42bb29bd4bdef052e469f604a9387241c0/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L875-L892
-            let clicked = false;
-            let timeout = setTimeout(() => {
-              if (state.isPressed && state.target instanceof HTMLElement) {
-                if (clicked) {
-                  cancel(e);
-                } else {
-                  focusWithoutScrolling(state.target);
-                  state.target.click();
-                }
-              }
-            }, 80);
-            // Use a capturing listener to track if a click occurred.
-            // If stopPropagation is called it may never reach our handler.
-            addGlobalListener(e.currentTarget as Document, 'click', () => clicked = true, true);
-            state.disposables.push(() => clearTimeout(timeout));
-          } else {
-            cancel(e);
-          }
-
-          // Ignore subsequent onPointerLeave event before onClick on touch devices.
-          state.isOverTarget = false;
-        }
-      };
-
-      let onPointerCancel = (e: PointerEvent) => {
-        cancel(e);
-      };
 
       pressProps.onDragStart = (e) => {
         if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
@@ -603,6 +674,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         state.isPressed = true;
+        setIsPointerPressed('mouse');
         state.isOverTarget = true;
         state.target = e.currentTarget;
         state.pointerType = isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse';
@@ -619,8 +691,6 @@ export function usePress(props: PressHookProps): PressResult {
             state.disposables.push(dispose);
           }
         }
-
-        addGlobalListener(getOwnerDocument(e.currentTarget), 'mouseup', onMouseUp, false);
       };
 
       pressProps.onMouseEnter = (e) => {
@@ -666,27 +736,6 @@ export function usePress(props: PressHookProps): PressResult {
         }
       };
 
-      let onMouseUp = (e: MouseEvent) => {
-        // Only handle left clicks
-        if (e.button !== 0) {
-          return;
-        }
-
-        if (state.ignoreEmulatedMouseEvents) {
-          state.ignoreEmulatedMouseEvents = false;
-          return;
-        }
-
-        if (state.target && state.target.contains(e.target as Element) && state.pointerType != null) {
-          // Wait for onClick to fire onPress. This avoids browser issues when the DOM
-          // is mutated between onMouseUp and onClick, and is more compatible with third party libraries.
-        } else {
-          cancel(e);
-        }
-
-        state.isOverTarget = false;
-      };
-
       pressProps.onTouchStart = (e) => {
         if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -700,6 +749,7 @@ export function usePress(props: PressHookProps): PressResult {
         state.ignoreEmulatedMouseEvents = true;
         state.isOverTarget = true;
         state.isPressed = true;
+        setIsPointerPressed('touch');
         state.target = e.currentTarget;
         state.pointerType = 'touch';
 
@@ -711,8 +761,6 @@ export function usePress(props: PressHookProps): PressResult {
         if (shouldStopPropagation) {
           e.stopPropagation();
         }
-
-        addGlobalListener(getOwnerWindow(e.currentTarget), 'scroll', onScroll, true);
       };
 
       pressProps.onTouchMove = (e) => {
@@ -768,6 +816,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         state.isPressed = false;
+        setIsPointerPressed(null);
         state.activePointerId = null;
         state.isOverTarget = false;
         state.ignoreEmulatedMouseEvents = true;
@@ -788,18 +837,6 @@ export function usePress(props: PressHookProps): PressResult {
         }
       };
 
-      let onScroll = (e: Event) => {
-        if (state.isPressed && nodeContains(getEventTarget(e), state.target)) {
-          cancel({
-            currentTarget: state.target,
-            shiftKey: false,
-            ctrlKey: false,
-            metaKey: false,
-            altKey: false
-          });
-        }
-      };
-
       pressProps.onDragStart = (e) => {
         if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -811,7 +848,6 @@ export function usePress(props: PressHookProps): PressResult {
 
     return pressProps;
   }, [
-    addGlobalListener,
     isDisabled,
     preventFocusOnPress,
     removeAllGlobalListeners,

package/src/utils.ts

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import {focusWithoutScrolling, getOwnerWindow, isFocusable, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, getOwnerWindow, isFocusable, useLayoutEffect} from '@react-aria/utils';
 import {FocusEvent as ReactFocusEvent, SyntheticEvent, useCallback, useRef} from 'react';
 
 // Turn a native event into a React synthetic event.
@@ -48,10 +48,6 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
     };
   }, []);
 
-  let dispatchBlur = useEffectEvent((e: ReactFocusEvent<Target>) => {
-    onBlur?.(e);
-  });
-
   // This function is called during a React onFocus event.
   return useCallback((e: ReactFocusEvent<Target>) => {
     // React does not fire onBlur when an element is disabled. https://github.com/facebook/react/issues/9142
@@ -73,7 +69,7 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
         if (target.disabled) {
           // For backward compatibility, dispatch a (fake) React synthetic event.
           let event = createSyntheticEvent<ReactFocusEvent<Target>>(e);
-          dispatchBlur(event);
+          onBlur?.(event);
         }
 
         // We no longer need the MutationObserver once the target is blurred.
@@ -96,7 +92,7 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
 
       stateRef.current.observer.observe(target, {attributes: true, attributeFilter: ['disabled']});
     }
-  }, [dispatchBlur]);
+  }, [onBlur]);
 }
 
 export let ignoreFocusEvent = false;