@react-aria/interactions 3.27.0 → 3.27.1

package/src/usePress.ts

@@ -72,7 +72,7 @@ interface PressState {
   isOverTarget: boolean,
   pointerType: PointerType | null,
   userSelect?: string,
-  metaKeyEvents?: Map<string, KeyboardEvent>,
+  metaKeyEvents?: Map<string, globalThis.KeyboardEvent>,
   disposables: Array<() => void>
 }
 
@@ -339,12 +339,12 @@ export function usePress(props: PressHookProps): PressResult {
     if (isElemKeyPressed) {
       let onKeyUp = (e: KeyboardEvent) => {
         if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
-          if (shouldPreventDefaultKeyboard(getEventTarget(e), e.key)) {
+          if (shouldPreventDefaultKeyboard(getEventTarget(e) as Element, e.key)) {
             e.preventDefault();
           }
 
-          let target = getEventTarget(e);
-          let wasPressed = nodeContains(state.target, getEventTarget(e));
+          let target = getEventTarget(e) as Element;
+          let wasPressed = nodeContains(state.target, target);
           triggerPressEndEvent(createEvent(state.target, e), 'keyboard', wasPressed);
           if (wasPressed) {
             triggerSyntheticClickEvent(e, state.target);
@@ -379,8 +379,8 @@ export function usePress(props: PressHookProps): PressResult {
       // 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) {
+      let pressUp = (e: KeyboardEvent) => {
+        if (originalTarget && isValidKeyboardEvent(e, originalTarget) && !e.repeat && nodeContains(originalTarget, getEventTarget(e) as Element) && state.target) {
           triggerPressUpEvent(createEvent(state.target, e), 'keyboard');
         }
       };
@@ -398,7 +398,7 @@ export function usePress(props: PressHookProps): PressResult {
     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) {
+          if (nodeContains(state.target, getEventTarget(e) as Element) && 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
@@ -422,7 +422,9 @@ export function usePress(props: PressHookProps): PressResult {
             }, 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);
+            if (e.currentTarget) {
+              addGlobalListener(e.currentTarget, 'click', () => clicked = true, true);
+            }
             state.disposables.push(() => clearTimeout(timeout));
           } else {
             cancelEvent(e);
@@ -471,7 +473,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
     } else if (isPointerPressed === 'touch' && process.env.NODE_ENV === 'test') {
       let onScroll = (e: Event) => {
-        if (state.isPressed && nodeContains(getEventTarget(e), state.target)) {
+        if (state.isPressed && nodeContains(getEventTarget(e) as Element, state.target)) {
           cancelEvent({
             currentTarget: state.target,
             shiftKey: false,
@@ -493,8 +495,8 @@ export function usePress(props: PressHookProps): PressResult {
     let state = ref.current;
     let pressProps: DOMAttributes = {
       onKeyDown(e) {
-        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
-          if (shouldPreventDefaultKeyboard(getEventTarget(e.nativeEvent), e.key)) {
+        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget as Element) && nodeContains(e.currentTarget as Element, getEventTarget(e) as Element)) {
+          if (shouldPreventDefaultKeyboard(getEventTarget(e) as Element, e.key)) {
             e.preventDefault();
           }
 
@@ -529,7 +531,7 @@ export function usePress(props: PressHookProps): PressResult {
         }
       },
       onClick(e) {
-        if (e && !nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (e && !nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -568,7 +570,7 @@ export function usePress(props: PressHookProps): PressResult {
     if (typeof PointerEvent !== 'undefined') {
       pressProps.onPointerDown = (e) => {
         // Only handle left clicks, and ignore events that bubbled through portals.
-        if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -599,7 +601,7 @@ export function usePress(props: PressHookProps): PressResult {
 
           // Release pointer capture so that touch interactions can leave the original target.
           // This enables onPointerLeave and onPointerEnter to fire.
-          let target = getEventTarget(e.nativeEvent);
+          let target = getEventTarget(e);
           if ('releasePointerCapture' in target) {
             if ('hasPointerCapture' in target) {
               if (target.hasPointerCapture(e.pointerId)) {
@@ -617,7 +619,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseDown = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -635,7 +637,7 @@ export function usePress(props: PressHookProps): PressResult {
 
       pressProps.onPointerUp = (e) => {
         // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent)) || state.pointerType === 'virtual') {
+        if (!nodeContains(e.currentTarget, getEventTarget(e)) || state.pointerType === 'virtual') {
           return;
         }
 
@@ -662,7 +664,7 @@ export function usePress(props: PressHookProps): PressResult {
 
 
       pressProps.onDragStart = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -675,7 +677,7 @@ export function usePress(props: PressHookProps): PressResult {
 
       pressProps.onMouseDown = (e) => {
         // Only handle left clicks
-        if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -705,7 +707,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseEnter = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -721,7 +723,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseLeave = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -738,7 +740,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onMouseUp = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -748,7 +750,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchStart = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -775,7 +777,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchMove = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -803,7 +805,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchEnd = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -838,7 +840,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onTouchCancel = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -849,7 +851,7 @@ export function usePress(props: PressHookProps): PressResult {
       };
 
       pressProps.onDragStart = (e) => {
-        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e))) {
           return;
         }
 
@@ -922,7 +924,7 @@ function isHTMLAnchorLink(target: Element): target is HTMLAnchorElement {
   return target.tagName === 'A' && target.hasAttribute('href');
 }
 
-function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Element): boolean {
+function isValidKeyboardEvent(event: KeyboardEvent | globalThis.KeyboardEvent, currentTarget: Element): boolean {
   const {key, code} = event;
   const element = currentTarget as HTMLElement;
   const role = element.getAttribute('role');

package/src/utils.ts

@@ -11,7 +11,7 @@
  */
 
 import {FocusableElement} from '@react-types/shared';
-import {focusWithoutScrolling, getOwnerWindow, isFocusable, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, getActiveElement, getEventTarget, 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.
@@ -54,15 +54,16 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
     // Most browsers fire a native focusout event in this case, except for Firefox. In that case, we use a
     // MutationObserver to watch for the disabled attribute, and dispatch these events ourselves.
     // For browsers that do, focusout fires before the MutationObserver, so onBlur should not fire twice.
+    let eventTarget = getEventTarget(e);
     if (
-      e.target instanceof HTMLButtonElement ||
-      e.target instanceof HTMLInputElement ||
-      e.target instanceof HTMLTextAreaElement ||
-      e.target instanceof HTMLSelectElement
+      eventTarget instanceof HTMLButtonElement ||
+      eventTarget instanceof HTMLInputElement ||
+      eventTarget instanceof HTMLTextAreaElement ||
+      eventTarget instanceof HTMLSelectElement
     ) {
       stateRef.current.isFocused = true;
 
-      let target = e.target;
+      let target = eventTarget;
       let onBlurHandler: EventListenerOrEventListenerObject | null = (e) => {
         stateRef.current.isFocused = false;
 
@@ -84,7 +85,7 @@ export function useSyntheticBlurEvent<Target extends Element = Element>(onBlur:
       stateRef.current.observer = new MutationObserver(() => {
         if (stateRef.current.isFocused && target.disabled) {
           stateRef.current.observer?.disconnect();
-          let relatedTargetEl = target === document.activeElement ? null : document.activeElement;
+          let relatedTargetEl = target === getActiveElement() ? null : getActiveElement();
           target.dispatchEvent(new FocusEvent('blur', {relatedTarget: relatedTargetEl}));
           target.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: relatedTargetEl}));
         }
@@ -117,13 +118,13 @@ export function preventFocus(target: FocusableElement | null): (() => void) | un
   ignoreFocusEvent = true;
   let isRefocusing = false;
   let onBlur = (e: FocusEvent) => {
-    if (e.target === activeElement || isRefocusing) {
+    if (getEventTarget(e) === activeElement || isRefocusing) {
       e.stopImmediatePropagation();
     }
   };
 
   let onFocusOut = (e: FocusEvent) => {
-    if (e.target === activeElement || isRefocusing) {
+    if (getEventTarget(e) === activeElement || isRefocusing) {
       e.stopImmediatePropagation();
 
       // If there was no focusable ancestor, we don't expect a focus event.
@@ -137,13 +138,13 @@ export function preventFocus(target: FocusableElement | null): (() => void) | un
   };
 
   let onFocus = (e: FocusEvent) => {
-    if (e.target === target || isRefocusing) {
+    if (getEventTarget(e) === target || isRefocusing) {
       e.stopImmediatePropagation();
     }
   };
 
   let onFocusIn = (e: FocusEvent) => {
-    if (e.target === target || isRefocusing) {
+    if (getEventTarget(e) === target || isRefocusing) {
       e.stopImmediatePropagation();
 
       if (!isRefocusing) {