@react-aria/interactions 3.26.0 → 3.27.1

package/src/index.ts

@@ -41,7 +41,7 @@ export type {HoverProps, HoverResult} from './useHover';
 export type {InteractOutsideProps} from './useInteractOutside';
 export type {KeyboardProps, KeyboardResult} from './useKeyboard';
 export type {PressProps, PressHookProps, PressResult} from './usePress';
-export type {PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents} from '@react-types/shared';
+export type {PressEvent, PressEvents, LongPressEvent, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents} from '@react-types/shared';
 export type {MoveResult} from './useMove';
 export type {LongPressProps, LongPressResult} from './useLongPress';
 export type {ScrollWheelProps} from './useScrollWheel';

package/src/useFocus.ts

@@ -43,7 +43,7 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
   } = props;
 
   const onBlur: FocusProps<Target>['onBlur'] = useCallback((e: FocusEvent<Target>) => {
-    if (e.target === e.currentTarget) {
+    if (getEventTarget(e) === e.currentTarget) {
       if (onBlurProp) {
         onBlurProp(e);
       }
@@ -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(e.target);
+    let eventTarget = getEventTarget(e);
+    const ownerDocument = getOwnerDocument(eventTarget);
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
-    if (e.target === e.currentTarget && activeElement === getEventTarget(e.nativeEvent)) {
+    if (eventTarget === e.currentTarget && eventTarget === activeElement) {
       if (onFocusProp) {
         onFocusProp(e);
       }

package/src/useFocusVisible.ts

@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
+import {getActiveElement, getEventTarget, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
 import {PointerType} from '@react-types/shared';
 import {useEffect, useState} from 'react';
@@ -39,7 +39,7 @@ export interface FocusVisibleResult {
 
 let currentModality: null | Modality = null;
 let currentPointerType: PointerType = 'keyboard';
-let changeHandlers = new Set<Handler>();
+export const changeHandlers = new Set<Handler>();
 interface GlobalListenerData {
   focus: () => void
 }
@@ -98,7 +98,7 @@ function handleFocusEvent(e: FocusEvent) {
   // Firefox fires two extra focus events when the user first clicks into an iframe:
   // first on the window, then on the document. We ignore these events so they don't
   // cause keyboard focus rings to appear.
-  if (e.target === window || e.target === document || ignoreFocusEvent || !e.isTrusted) {
+  if (getEventTarget(e) === window || getEventTarget(e) === document || ignoreFocusEvent || !e.isTrusted) {
     return;
   }
 
@@ -302,18 +302,20 @@ const nonTextInputTypes = new Set([
  * focus visible style can be properly set.
  */
 function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
-  let document = getOwnerDocument(e?.target as Element);
-  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLInputElement : HTMLInputElement;
-  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement;
-  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLElement : HTMLElement;
-  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).KeyboardEvent : KeyboardEvent;
+  let document = getOwnerDocument(e ? getEventTarget(e) as Element : undefined);
+  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
+  let activeElement = getActiveElement(document);
   isTextInput = isTextInput ||
-    (document.activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(document.activeElement.type)) ||
-    document.activeElement instanceof IHTMLTextAreaElement ||
-    (document.activeElement instanceof IHTMLElement && document.activeElement.isContentEditable);
+    (activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(activeElement.type)) ||
+    activeElement instanceof IHTMLTextAreaElement ||
+    (activeElement instanceof IHTMLElement && activeElement.isContentEditable);
   return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
 }
 
@@ -333,10 +335,13 @@ export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResu
 /**
  * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
  */
-export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {isTextInput?: boolean}): void {
+export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {enabled?: boolean, isTextInput?: boolean}): void {
   setupGlobalFocusEvents();
 
   useEffect(() => {
+    if (opts?.enabled === false) {
+      return;
+    }
     let handler = (modality: Modality, e: HandlerEvent) => {
       // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
       if (!isKeyboardFocusEvent(!!(opts?.isTextInput), modality, e)) {
@@ -351,3 +356,4 @@ export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyA
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }
+

package/src/useFocusWithin.ts

@@ -54,14 +54,14 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
 
   let onBlur = useCallback((e: FocusEvent) => {
     // Ignore events bubbling through portals.
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget, getEventTarget(e))) {
       return;
     }
 
     // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
     // when moving focus inside the element. Only trigger if the currentTarget doesn't
     // include the relatedTarget (where focus is moving).
-    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {
+    if (state.current.isFocusWithin && !nodeContains(e.currentTarget as Element, e.relatedTarget as Element)) {
       state.current.isFocusWithin = false;
       removeAllGlobalListeners();
 
@@ -78,15 +78,16 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
   let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
   let onFocus = useCallback((e: FocusEvent) => {
     // Ignore events bubbling through portals.
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget, getEventTarget(e))) {
       return;
     }
 
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
-    const ownerDocument = getOwnerDocument(e.target);
+    let eventTarget = getEventTarget(e);
+    const ownerDocument = getOwnerDocument(eventTarget);
     const activeElement = getActiveElement(ownerDocument);
-    if (!state.current.isFocusWithin && activeElement === getEventTarget(e.nativeEvent)) {
+    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, e.target as Element)) {
-          let nativeEvent = new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target});
+        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);

package/src/useHover.ts

@@ -16,7 +16,7 @@
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 import {DOMAttributes, HoverEvents} from '@react-types/shared';
-import {getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
+import {getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
 
 export interface HoverProps extends HoverEvents {
@@ -108,7 +108,7 @@ export function useHover(props: HoverProps): HoverResult {
   let {hoverProps, triggerHoverEnd} = useMemo(() => {
     let triggerHoverStart = (event, pointerType) => {
       state.pointerType = pointerType;
-      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {
+      if (isDisabled || pointerType === 'touch' || state.isHovered || !nodeContains(event.currentTarget, getEventTarget(event) as Element)) {
         return;
       }
 
@@ -120,8 +120,8 @@ export function useHover(props: HoverProps): HoverResult {
       // even though the originally hovered target may have shrunk in size so it is no longer hovered.
       // However, a pointerover event will be fired on the new target the mouse is over.
       // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
-      addGlobalListener(getOwnerDocument(event.target), 'pointerover', e => {
-        if (state.isHovered && state.target && !nodeContains(state.target, e.target as Element)) {
+      addGlobalListener(getOwnerDocument(getEventTarget(event) as Element), 'pointerover', e => {
+        if (state.isHovered && state.target && !nodeContains(state.target, getEventTarget(e) as Element)) {
           triggerHoverEnd(e, e.pointerType);
         }
       }, {capture: true});
@@ -180,7 +180,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onPointerLeave = (e) => {
-        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
+        if (!isDisabled && nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
           triggerHoverEnd(e, e.pointerType);
         }
       };
@@ -198,7 +198,7 @@ export function useHover(props: HoverProps): HoverResult {
       };
 
       hoverProps.onMouseLeave = (e) => {
-        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {
+        if (!isDisabled && nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
           triggerHoverEnd(e, 'mouse');
         }
       };

package/src/useInteractOutside.ts

@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, useEffectEvent} from '@react-aria/utils';
+import {getEventTarget, getOwnerDocument, nodeContains, useEffectEvent} from '@react-aria/utils';
 import {RefObject} from '@react-types/shared';
 import {useEffect, useRef} from 'react';
 
@@ -118,14 +118,15 @@ function isValidEvent(event, ref) {
   if (event.button > 0) {
     return false;
   }
-  if (event.target) {
+  let target = getEventTarget(event) as Element;
+  if (target) {
     // if the event target is no longer in the document, ignore
-    const ownerDocument = event.target.ownerDocument;
-    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {
+    const ownerDocument = target.ownerDocument;
+    if (!ownerDocument || !nodeContains(ownerDocument.documentElement, target)) {
       return false;
     }
     // If the target is within a top layer element (e.g. toasts), ignore.
-    if (event.target.closest('[data-react-aria-top-layer]')) {
+    if (target.closest('[data-react-aria-top-layer]')) {
       return false;
     }
   }

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>
 }
 
@@ -84,7 +84,8 @@ interface EventBase {
   altKey: boolean,
   clientX?: number,
   clientY?: number,
-  targetTouches?: Array<{clientX?: number, clientY?: number}>
+  targetTouches?: Array<{clientX?: number, clientY?: number}>,
+  key?: string
 }
 
 export interface PressResult {
@@ -98,7 +99,9 @@ function usePressResponderContext(props: PressHookProps): PressHookProps {
   // Consume context from <PressResponder> and merge with props.
   let context = useContext(PressResponderContext);
   if (context) {
-    let {register, ...contextProps} = context;
+    // Prevent mergeProps from merging ref.
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let {register, ref, ...contextProps} = context;
     props = mergeProps(contextProps, props) as PressHookProps;
     register();
   }
@@ -117,6 +120,7 @@ class PressEvent implements IPressEvent {
   altKey: boolean;
   x: number;
   y: number;
+  key: string | undefined;
   #shouldStopPropagation = true;
 
   constructor(type: IPressEvent['type'], pointerType: PointerType, originalEvent: EventBase, state?: PressState) {
@@ -146,6 +150,7 @@ class PressEvent implements IPressEvent {
     this.altKey = originalEvent.altKey;
     this.x = x;
     this.y = y;
+    this.key = originalEvent.key;
   }
 
   continuePropagation() {
@@ -334,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);
@@ -374,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');
         }
       };
@@ -393,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
@@ -417,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);
@@ -450,7 +457,7 @@ export function usePress(props: PressHookProps): PressResult {
           return;
         }
 
-        if (state.target && state.target.contains(e.target as Element) && state.pointerType != null) {
+        if (state.target && nodeContains(state.target, 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 {
@@ -466,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,
@@ -488,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();
           }
 
@@ -524,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;
         }
 
@@ -563,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;
         }
 
@@ -594,9 +601,15 @@ 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) {
-            target.releasePointerCapture(e.pointerId);
+            if ('hasPointerCapture' in target) {
+              if (target.hasPointerCapture(e.pointerId)) {
+                target.releasePointerCapture(e.pointerId);
+              }
+            } else {
+              (target as Element).releasePointerCapture(e.pointerId);
+            }
           }
         }
 
@@ -606,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;
         }
 
@@ -624,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;
         }
 
@@ -651,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;
         }
 
@@ -664,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;
         }
 
@@ -694,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;
         }
 
@@ -710,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;
         }
 
@@ -727,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;
         }
 
@@ -737,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;
         }
 
@@ -764,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;
         }
 
@@ -792,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;
         }
 
@@ -827,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;
         }
 
@@ -838,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;
         }
 
@@ -911,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');
@@ -977,7 +990,8 @@ function createEvent(target: FocusableElement, e: EventBase): EventBase {
     metaKey: e.metaKey,
     altKey: e.altKey,
     clientX,
-    clientY
+    clientY,
+    key: e.key
   };
 }
 

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) {