@react-aria/interactions 3.19.0 → 3.20.0

package/src/usePress.ts

@@ -17,7 +17,7 @@
 
 import {disableTextSelection, restoreTextSelection} from './textSelection';
 import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents} from '@react-types/shared';
-import {focusWithoutScrolling, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
+import {focusWithoutScrolling, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
 import {PressResponderContext} from './context';
 import {RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
 
@@ -53,13 +53,13 @@ interface PressState {
   activePointerId: any,
   target: FocusableElement | null,
   isOverTarget: boolean,
-  pointerType: PointerType,
+  pointerType: PointerType | null,
   userSelect?: string,
   metaKeyEvents?: Map<string, KeyboardEvent>
 }
 
 interface EventBase {
-  currentTarget: EventTarget,
+  currentTarget: EventTarget | null,
   shiftKey: boolean,
   ctrlKey: boolean,
   metaKey: boolean,
@@ -157,7 +157,7 @@ export function usePress(props: PressHookProps): PressResult {
   let triggerPressStart = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
     if (isDisabled || state.didFirePressStart) {
-      return;
+      return false;
     }
 
     let shouldStopPropagation = true;
@@ -181,7 +181,7 @@ export function usePress(props: PressHookProps): PressResult {
   let triggerPressEnd = useEffectEvent((originalEvent: EventBase, pointerType: PointerType, wasPressed = true) => {
     let state = ref.current;
     if (!state.didFirePressStart) {
-      return;
+      return false;
     }
 
     state.ignoreClickAfterPress = true;
@@ -214,7 +214,7 @@ export function usePress(props: PressHookProps): PressResult {
   let triggerPressUp = useEffectEvent((originalEvent: EventBase, pointerType: PointerType) => {
     let state = ref.current;
     if (isDisabled) {
-      return;
+      return false;
     }
 
     if (onPressUp) {
@@ -230,8 +230,8 @@ export function usePress(props: PressHookProps): PressResult {
 
   let cancel = useEffectEvent((e: EventBase) => {
     let state = ref.current;
-    if (state.isPressed) {
-      if (state.isOverTarget) {
+    if (state.isPressed && state.target) {
+      if (state.isOverTarget && state.pointerType != null) {
         triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
       }
       state.isPressed = false;
@@ -271,7 +271,7 @@ export function usePress(props: PressHookProps): PressResult {
 
             // 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.
-            addGlobalListener(document, 'keyup', onKeyUp, false);
+            addGlobalListener(getOwnerDocument(e.currentTarget), 'keyup', onKeyUp, false);
           }
 
           if (shouldStopPropagation) {
@@ -286,14 +286,14 @@ export function usePress(props: PressHookProps): PressResult {
           // https://bugs.webkit.org/show_bug.cgi?id=55291
           // https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
           if (e.metaKey && isMac()) {
-            state.metaKeyEvents.set(e.key, e.nativeEvent);
+            state.metaKeyEvents?.set(e.key, e.nativeEvent);
           }
         } else if (e.key === 'Meta') {
           state.metaKeyEvents = new Map();
         }
       },
       onKeyUp(e) {
-        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target as Element)) {
+        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target as Element) && state.target) {
           triggerPressUp(createEvent(state.target, e), 'keyboard');
         }
       },
@@ -302,7 +302,7 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        if (e && e.button === 0 && !state.isTriggeringEvent && !openLink.isOpening) {
+        if (e && e.button === 0 && !state.isTriggeringEvent && !(openLink as any).isOpening) {
           let shouldStopPropagation = true;
           if (isDisabled) {
             e.preventDefault();
@@ -332,7 +332,7 @@ export function usePress(props: PressHookProps): PressResult {
     };
 
     let onKeyUp = (e: KeyboardEvent) => {
-      if (state.isPressed && isValidKeyboardEvent(e, state.target)) {
+      if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
         if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
           e.preventDefault();
         }
@@ -362,9 +362,9 @@ export function usePress(props: PressHookProps): PressResult {
         // 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 = null;
+        state.metaKeyEvents = undefined;
         for (let event of events.values()) {
-          state.target.dispatchEvent(new KeyboardEvent('keyup', event));
+          state.target?.dispatchEvent(new KeyboardEvent('keyup', event));
         }
       }
     };
@@ -410,9 +410,9 @@ export function usePress(props: PressHookProps): PressResult {
 
           shouldStopPropagation = triggerPressStart(e, state.pointerType);
 
-          addGlobalListener(document, 'pointermove', onPointerMove, false);
-          addGlobalListener(document, 'pointerup', onPointerUp, false);
-          addGlobalListener(document, 'pointercancel', onPointerCancel, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointermove', onPointerMove, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointerup', onPointerUp, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointercancel', onPointerCancel, false);
         }
 
         if (shouldStopPropagation) {
@@ -459,12 +459,12 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        if (isOverTarget(e, state.target)) {
-          if (!state.isOverTarget) {
+        if (state.target && isOverTarget(e, state.target)) {
+          if (!state.isOverTarget && state.pointerType != null) {
             state.isOverTarget = true;
             triggerPressStart(createEvent(state.target, e), state.pointerType);
           }
-        } else if (state.isOverTarget) {
+        } else if (state.target && state.isOverTarget && state.pointerType != null) {
           state.isOverTarget = false;
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
           cancelOnPointerExit(e);
@@ -472,10 +472,10 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       let onPointerUp = (e: PointerEvent) => {
-        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0) {
-          if (isOverTarget(e, state.target)) {
+        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
+          if (isOverTarget(e, state.target) && state.pointerType != null) {
             triggerPressEnd(createEvent(state.target, e), state.pointerType);
-          } else if (state.isOverTarget) {
+          } else if (state.isOverTarget && state.pointerType != null) {
             triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
           }
 
@@ -534,7 +534,7 @@ export function usePress(props: PressHookProps): PressResult {
           e.stopPropagation();
         }
 
-        addGlobalListener(document, 'mouseup', onMouseUp, false);
+        addGlobalListener(getOwnerDocument(e.currentTarget), 'mouseup', onMouseUp, false);
       };
 
       pressProps.onMouseEnter = (e) => {
@@ -543,7 +543,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let shouldStopPropagation = true;
-        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
           state.isOverTarget = true;
           shouldStopPropagation = triggerPressStart(e, state.pointerType);
         }
@@ -559,7 +559,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
 
         let shouldStopPropagation = true;
-        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
           state.isOverTarget = false;
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
           cancelOnPointerExit(e);
@@ -594,9 +594,9 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        if (isOverTarget(e, state.target)) {
+        if (state.target && isOverTarget(e, state.target) && state.pointerType != null) {
           triggerPressEnd(createEvent(state.target, e), state.pointerType);
-        } else if (state.isOverTarget) {
+        } else if (state.target && state.isOverTarget && state.pointerType != null) {
           triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
         }
 
@@ -634,7 +634,7 @@ export function usePress(props: PressHookProps): PressResult {
           e.stopPropagation();
         }
 
-        addGlobalListener(window, 'scroll', onScroll, true);
+        addGlobalListener(getOwnerWindow(e.currentTarget), 'scroll', onScroll, true);
       };
 
       pressProps.onTouchMove = (e) => {
@@ -650,11 +650,11 @@ export function usePress(props: PressHookProps): PressResult {
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
         let shouldStopPropagation = true;
         if (touch && isOverTarget(touch, e.currentTarget)) {
-          if (!state.isOverTarget) {
+          if (!state.isOverTarget && state.pointerType != null) {
             state.isOverTarget = true;
             shouldStopPropagation = triggerPressStart(e, state.pointerType);
           }
-        } else if (state.isOverTarget) {
+        } else if (state.isOverTarget && state.pointerType != null) {
           state.isOverTarget = false;
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
           cancelOnPointerExit(e);
@@ -677,10 +677,10 @@ export function usePress(props: PressHookProps): PressResult {
 
         let touch = getTouchById(e.nativeEvent, state.activePointerId);
         let shouldStopPropagation = true;
-        if (touch && isOverTarget(touch, e.currentTarget)) {
+        if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType != null) {
           triggerPressUp(e, state.pointerType);
           shouldStopPropagation = triggerPressEnd(e, state.pointerType);
-        } else if (state.isOverTarget) {
+        } else if (state.isOverTarget && state.pointerType != null) {
           shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
         }
 
@@ -692,7 +692,7 @@ export function usePress(props: PressHookProps): PressResult {
         state.activePointerId = null;
         state.isOverTarget = false;
         state.ignoreEmulatedMouseEvents = true;
-        if (!allowTextSelectionOnPress) {
+        if (state.target && !allowTextSelectionOnPress) {
           restoreTextSelection(state.target);
         }
         removeAllGlobalListeners();
@@ -750,7 +750,7 @@ export function usePress(props: PressHookProps): PressResult {
     return () => {
       if (!allowTextSelectionOnPress) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        restoreTextSelection(ref.current.target);
+        restoreTextSelection(ref.current.target ?? undefined);
       }
     };
   }, [allowTextSelectionOnPress]);
@@ -773,8 +773,8 @@ function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boo
   // "Spacebar" is for IE 11
   return (
     (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') &&
-    !((element instanceof HTMLInputElement && !isValidInputKey(element, key)) ||
-      element instanceof HTMLTextAreaElement ||
+    !((element instanceof getOwnerWindow(element).HTMLInputElement && !isValidInputKey(element, key)) ||
+      element instanceof getOwnerWindow(element).HTMLTextAreaElement ||
       element.isContentEditable) &&
     // Links should only trigger with Enter key
     !((role === 'link' || (!role && isHTMLAnchorLink(element))) && key !== 'Enter')
@@ -830,8 +830,18 @@ interface EventPoint {
 }
 
 function getPointClientRect(point: EventPoint): Rect {
-  let offsetX = (point.width / 2) || point.radiusX || 0;
-  let offsetY = (point.height / 2) || point.radiusY || 0;
+  let offsetX = 0;
+  let offsetY = 0;
+  if (point.width !== undefined) {
+    offsetX = (point.width / 2);
+  } else if (point.radiusX !== undefined) {
+    offsetX = point.radiusX;
+  }
+  if (point.height !== undefined) {
+    offsetY = (point.height / 2);
+  } else if (point.radiusY !== undefined) {
+    offsetY = point.radiusY;
+  }
 
   return {
     top: point.clientY - offsetY,

package/src/useScrollWheel.ts

@@ -37,5 +37,5 @@ export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLEleme
     }
   }, [onScroll]);
 
-  useEvent(ref, 'wheel', isDisabled ? null : onScrollHandler);
+  useEvent(ref, 'wheel', isDisabled ? undefined : onScrollHandler);
 }

package/src/utils.ts

@@ -64,7 +64,7 @@ export class SyntheticFocusEvent<Target = Element> implements ReactFocusEvent<Ta
 export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEvent<Target>) => void) {
   let stateRef = useRef({
     isFocused: false,
-    observer: null as MutationObserver
+    observer: null as MutationObserver | null
   });
 
   // Clean up MutationObserver on unmount. See below.
@@ -98,12 +98,12 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
       stateRef.current.isFocused = true;
 
       let target = e.target;
-      let onBlurHandler = (e: FocusEvent) => {
+      let onBlurHandler: EventListenerOrEventListenerObject | null = (e) => {
         stateRef.current.isFocused = false;
 
         if (target.disabled) {
           // For backward compatibility, dispatch a (fake) React synthetic event.
-          dispatchBlur(new SyntheticFocusEvent('blur', e));
+          dispatchBlur(new SyntheticFocusEvent('blur', e as FocusEvent));
         }
 
         // We no longer need the MutationObserver once the target is blurred.
@@ -117,7 +117,7 @@ export function useSyntheticBlurEvent<Target = Element>(onBlur: (e: ReactFocusEv
 
       stateRef.current.observer = new MutationObserver(() => {
         if (stateRef.current.isFocused && target.disabled) {
-          stateRef.current.observer.disconnect();
+          stateRef.current.observer?.disconnect();
           let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
           target.dispatchEvent(new FocusEvent('blur', {relatedTarget: relatedTargetEl}));
           target.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: relatedTargetEl}));