simplify and add special cases

Author: snowystinger

packages/@react-aria/dnd/src/DragManager.ts

@@ -257,25 +257,26 @@ class DragSession {
 
   onFocus(e: FocusEvent): void {
     let activateButton = this.getCurrentActivateButton();
-    if (getEventTarget(e) === activateButton) {
+    let eventTarget = getEventTarget(e);
+    if (eventTarget === activateButton) {
       // TODO: canceling this breaks the focus ring. Revisit when we support tabbing.
       this.cancelEvent(e);
       return;
     }
 
     // Prevent focus events, except to the original drag target.
-    if (getEventTarget(e) !== this.dragTarget.element) {
+    if (eventTarget !== this.dragTarget.element) {
       this.cancelEvent(e);
     }
 
     // Ignore focus events on the window/document (JSDOM). Will be handled in onBlur, below.
-    if (!(getEventTarget(e) instanceof HTMLElement) || getEventTarget(e) === this.dragTarget.element) {
+    if (!(eventTarget instanceof HTMLElement) || eventTarget === this.dragTarget.element) {
       return;
     }
 
     let dropTarget =
-      this.validDropTargets.find(target => target.element === getEventTarget(e) as HTMLElement) ||
-      this.validDropTargets.find(target => nodeContains(target.element, getEventTarget(e) as HTMLElement));
+      this.validDropTargets.find(target => target.element === eventTarget) ||
+      this.validDropTargets.find(target => nodeContains(target.element, eventTarget));
 
     if (!dropTarget) {
       // if (e.target === activateButton) {
@@ -289,7 +290,7 @@ class DragSession {
       return;
     }
 
-    let item = dropItems.get(getEventTarget(e) as HTMLElement);
+    let item = dropItems.get(eventTarget);
     if (dropTarget) {
       this.setCurrentDropTarget(dropTarget, item);
     }
@@ -321,10 +322,11 @@ class DragSession {
     this.cancelEvent(e);
     if (isVirtualClick(e) || this.isVirtualClick) {
       let dropElements = dropItems.values();
-      let item = [...dropElements].find(item => item.element === getEventTarget(e) as HTMLElement || nodeContains(item.activateButtonRef?.current, getEventTarget(e) as HTMLElement));
-      let dropTarget = this.validDropTargets.find(target => nodeContains(target.element, getEventTarget(e) as HTMLElement));
+      let eventTarget = getEventTarget(e) as HTMLElement;
+      let item = [...dropElements].find(item => item.element === eventTarget || nodeContains(item.activateButtonRef?.current, eventTarget));
+      let dropTarget = this.validDropTargets.find(target => nodeContains(target.element, eventTarget));
       let activateButton = item?.activateButtonRef?.current ?? dropTarget?.activateButtonRef?.current;
-      if (nodeContains(activateButton, getEventTarget(e) as HTMLElement) && dropTarget) {
+      if (nodeContains(activateButton, eventTarget) && dropTarget) {
         this.activate(dropTarget, item);
         return;
       }
@@ -350,7 +352,8 @@ class DragSession {
 
   cancelEvent(e: Event): void {
     // Allow focusin and focusout on the drag target so focus ring works properly.
-    if ((e.type === 'focusin' || e.type === 'focusout') && (getEventTarget(e) === this.dragTarget?.element || getEventTarget(e) === this.getCurrentActivateButton())) {
+    let eventTarget = getEventTarget(e);
+    if ((e.type === 'focusin' || e.type === 'focusout') && (eventTarget === this.dragTarget?.element || eventTarget === this.getCurrentActivateButton())) {
       return;
     }
 

packages/@react-aria/dnd/src/useDrag.ts

@@ -15,10 +15,10 @@ import {DragEndEvent, DragItem, DragMoveEvent, DragPreviewRenderer, DragStartEve
 import {DragEvent, HTMLAttributes, version as ReactVersion, useEffect, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, EFFECT_ALLOWED} from './constants';
+import {getEventTarget, isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners} from '@react-aria/utils';
 import {globalDropEffect, setGlobalAllowedDropOperations, setGlobalDropEffect, useDragModality, writeToDataTransfer} from './utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {isVirtualClick, isVirtualPointerEvent, useDescription, useGlobalListeners} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DragOptions {
@@ -102,7 +102,7 @@ export function useDrag(options: DragOptions): DragResult {
     // If this drag was initiated by a mobile screen reader (e.g. VoiceOver or TalkBack), enter virtual dragging mode.
     if (modalityOnPointerDown.current === 'virtual') {
       e.preventDefault();
-      startDragging(e.target as HTMLElement);
+      startDragging(getEventTarget(e) as HTMLElement);
       modalityOnPointerDown.current = null;
       return;
     }
@@ -188,9 +188,9 @@ export function useDrag(options: DragOptions): DragResult {
 
     // Wait a frame before we set dragging to true so that the browser has time to
     // render the preview image before we update the element that has been dragged.
-    let target = e.target;
+    let target = getEventTarget(e);
     requestAnimationFrame(() => {
-      setDragging(target as Element);
+      setDragging(target);
     });
   };
 
@@ -340,24 +340,24 @@ export function useDrag(options: DragOptions): DragResult {
         }
       },
       onKeyDownCapture(e) {
-        if (e.target === e.currentTarget && e.key === 'Enter') {
+        if (getEventTarget(e) === e.currentTarget && e.key === 'Enter') {
           e.preventDefault();
           e.stopPropagation();
         }
       },
       onKeyUpCapture(e) {
-        if (e.target === e.currentTarget && e.key === 'Enter') {
+        if (getEventTarget(e) === e.currentTarget && e.key === 'Enter') {
           e.preventDefault();
           e.stopPropagation();
-          startDragging(e.target as HTMLElement);
+          startDragging(getEventTarget(e));
         }
       },
       onClick(e) {
         // Handle NVDA/JAWS in browse mode, and touch screen readers. In this case, no keyboard events are fired.
         if (isVirtualClick(e.nativeEvent) || modalityOnPointerDown.current === 'virtual') {
           e.preventDefault();
           e.stopPropagation();
-          startDragging(e.target as HTMLElement);
+          startDragging(getEventTarget(e));
         }
       }
     };

packages/@react-aria/dnd/src/useDrop.ts

@@ -16,7 +16,7 @@ import {DragEvent, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, globalAllowedDropOperations, globalDndState, readFromDataTransfer, setGlobalDnDState, setGlobalDropEffect} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
-import {isIPad, isMac, nodeContains, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
+import {getEventTarget, isIPad, isMac, nodeContains, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {useVirtualDrop} from './useVirtualDrop';
 
 export interface DropOptions {
@@ -186,7 +186,7 @@ export function useDrop(options: DropOptions): DropResult {
   let onDragEnter = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    state.dragOverElements.add(e.target as Element);
+    state.dragOverElements.add(getEventTarget(e));
     if (state.dragOverElements.size > 1) {
       return;
     }
@@ -232,7 +232,7 @@ export function useDrop(options: DropOptions): DropResult {
     // events will never be fired for these. This can happen, for example, with drop
     // indicators between items, which disappear when the drop target changes.
 
-    state.dragOverElements.delete(e.target as Element);
+    state.dragOverElements.delete(getEventTarget(e));
     for (let element of state.dragOverElements) {
       if (!nodeContains(e.currentTarget, element)) {
         state.dragOverElements.delete(element);

packages/@react-aria/interactions/src/useFocus.ts

@@ -63,9 +63,10 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
 
-    const ownerDocument = getOwnerDocument(getEventTarget(e));
+    let eventTarget = getEventTarget(e);
+    const ownerDocument = getOwnerDocument(eventTarget);
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
-    if (getEventTarget(e) === e.currentTarget && activeElement === getEventTarget(e)) {
+    if (eventTarget === e.currentTarget && eventTarget === activeElement) {
       if (onFocusProp) {
         onFocusProp(e);
       }

packages/@react-aria/interactions/src/useFocusVisible.ts

@@ -303,10 +303,11 @@ const nonTextInputTypes = new Set([
  */
 function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
   let document = getOwnerDocument(e ? getEventTarget(e) as Element : undefined);
-  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(e ? getEventTarget(e) as Element : undefined).HTMLInputElement : HTMLInputElement;
-  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e ? getEventTarget(e) as Element : undefined).HTMLTextAreaElement : HTMLTextAreaElement;
-  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(e ? getEventTarget(e) as Element : undefined).HTMLElement : HTMLElement;
-  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(e ? getEventTarget(e) as Element : undefined).KeyboardEvent : KeyboardEvent;
+  let eventTarget = e ? getEventTarget(e) as Element : undefined;
+  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).HTMLInputElement : HTMLInputElement;
+  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).HTMLTextAreaElement : HTMLTextAreaElement;
+  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).HTMLElement : HTMLElement;
+  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).KeyboardEvent : KeyboardEvent;
 
   // For keyboard events that occur on a non-input element that will move focus into input element (aka ArrowLeft going from Datepicker button to the main input group)
   // we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element

packages/@react-aria/interactions/src/useFocusWithin.ts

@@ -84,9 +84,10 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
 
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
-    const ownerDocument = getOwnerDocument(getEventTarget(e));
+    let eventTarget = getEventTarget(e);
+    const ownerDocument = getOwnerDocument(eventTarget);
     const activeElement = getActiveElement(ownerDocument);
-    if (!state.current.isFocusWithin && activeElement === getEventTarget(e)) {
+    if (!state.current.isFocusWithin && activeElement === eventTarget) {
       if (onFocusWithin) {
         onFocusWithin(e);
       }
@@ -103,8 +104,9 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
       // can manually fire onBlur.
       let currentTarget = e.currentTarget;
       addGlobalListener(ownerDocument, 'focus', e => {
-        if (state.current.isFocusWithin && !nodeContains(currentTarget, getEventTarget(e) as Element)) {
-          let nativeEvent = new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: getEventTarget(e)});
+        let eventTarget = getEventTarget(e);
+        if (state.current.isFocusWithin && !nodeContains(currentTarget, eventTarget as Element)) {
+          let nativeEvent = new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: eventTarget});
           setEventTarget(nativeEvent, currentTarget);
           let event = createSyntheticEvent<FocusEvent>(nativeEvent);
           onBlur(event);

packages/@react-aria/overlays/src/useCloseOnScroll.ts

@@ -47,7 +47,7 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
       // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
       // such as in a combobox. Clicking the dropdown button places focus on the input, and if the
       // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
-      if (getEventTarget(e) instanceof HTMLInputElement || getEventTarget(e) instanceof HTMLTextAreaElement) {
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
         return;
       }
 

packages/@react-aria/select/src/HiddenSelect.tsx

@@ -92,9 +92,10 @@ export function useHiddenSelect<T, M extends SelectionMode = 'single'>(props: Ar
 
   let setValue = state.setValue;
   let onChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
-    if (getEventTarget(e).multiple) {
+    let eventTarget = getEventTarget(e);
+    if (eventTarget.multiple) {
       setValue(Array.from(
-        getEventTarget(e).selectedOptions,
+        eventTarget.selectedOptions,
         (option) => option.value
       ) as any);
     } else {

packages/@react-aria/utils/src/runAfterTransition.ts

@@ -32,19 +32,20 @@ function setupGlobalEvents() {
   }
 
   let onTransitionStart = (e: Event) => {
-    if (!isTransitionEvent(e) || !getEventTarget(e)) {
+    let eventTarget = getEventTarget(e);
+    if (!isTransitionEvent(e) || !eventTarget) {
       return;
     }
     // Add the transitioning property to the list for this element.
-    let transitions = transitionsByElement.get(getEventTarget(e));
+    let transitions = transitionsByElement.get(eventTarget);
     if (!transitions) {
       transitions = new Set();
-      transitionsByElement.set(getEventTarget(e), transitions);
+      transitionsByElement.set(eventTarget, transitions);
 
       // The transitioncancel event must be registered on the element itself, rather than as a global
       // event. This enables us to handle when the node is deleted from the document while it is transitioning.
       // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
-      getEventTarget(e).addEventListener('transitioncancel', onTransitionEnd, {
+      eventTarget.addEventListener('transitioncancel', onTransitionEnd, {
         once: true
       });
     }
@@ -53,11 +54,12 @@ function setupGlobalEvents() {
   };
 
   let onTransitionEnd = (e: Event) => {
-    if (!isTransitionEvent(e) || !getEventTarget(e)) {
+    let eventTarget = getEventTarget(e);
+    if (!isTransitionEvent(e) || !eventTarget) {
       return;
     }
     // Remove property from list of transitioning properties.
-    let properties = transitionsByElement.get(getEventTarget(e));
+    let properties = transitionsByElement.get(eventTarget);
     if (!properties) {
       return;
     }
@@ -66,8 +68,8 @@ function setupGlobalEvents() {
 
     // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
     if (properties.size === 0) {
-      getEventTarget(e).removeEventListener('transitioncancel', onTransitionEnd);
-      transitionsByElement.delete(getEventTarget(e));
+      eventTarget.removeEventListener('transitioncancel', onTransitionEnd);
+      transitionsByElement.delete(eventTarget);
     }
 
     // If no transitioning elements, call all of the queued callbacks.

packages/@react-aria/utils/src/useDrag1D.ts

@@ -12,8 +12,8 @@
 
  /* eslint-disable rulesdir/pure-render */
 
+import {getEventTarget, nodeContains} from './shadowdom/DOMFunctions';
 import {getOffset} from './getOffset';
-import {nodeContains} from './shadowdom/DOMFunctions';
 import {Orientation} from '@react-types/shared';
 import React, {HTMLAttributes, MutableRefObject, useRef} from 'react';
 
@@ -81,7 +81,7 @@ export function useDrag1D(props: UseDrag1DProps): HTMLAttributes<HTMLElement> {
   };
 
   let onMouseUp = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
+    let target = getEventTarget(e) as HTMLElement;
     dragging.current = false;
     let nextOffset = getNextOffset(e);
     if (handlers.current.onDrag) {