@react-aria/interactions - npm Package Compare versions

Comparing version 3.0.0-nightly-cdba74876-250121 to 3.0.0-nightly-d21bb3bc5-250311

dist/main.js

@@ -13,2 +13,4 @@ var $e1dbec26039c051d$exports = require("./Pressable.main.js");
 var $3cd7b5d0eebf0ca9$exports = require("./useLongPress.main.js");
+var $15f8fd80892557ff$exports = require("./useFocusable.main.js");
+var $2833058fcd3993f5$exports = require("./focusSafely.main.js");
 
@@ -39,2 +41,7 @@
 $parcel$export(module.exports, "useLongPress", () => $3cd7b5d0eebf0ca9$exports.useLongPress);
+$parcel$export(module.exports, "useFocusable", () => $15f8fd80892557ff$exports.useFocusable);
+$parcel$export(module.exports, "FocusableProvider", () => $15f8fd80892557ff$exports.FocusableProvider);
+$parcel$export(module.exports, "Focusable", () => $15f8fd80892557ff$exports.Focusable);
+$parcel$export(module.exports, "FocusableContext", () => $15f8fd80892557ff$exports.FocusableContext);
+$parcel$export(module.exports, "focusSafely", () => $2833058fcd3993f5$exports.focusSafely);
 /*
@@ -64,2 +71,4 @@ * Copyright 2020 Adobe. All rights reserved.
 
+
+
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -13,2 +13,4 @@ import {Pressable as $3b117e43dc0ca95d$export$27c701ed9e449e99} from "./Pressable.module.js";
 import {useLongPress as $8a26561d2877236e$export$c24ed0104d07eab9} from "./useLongPress.module.js";
+import {Focusable as $f645667febf57a63$export$35a3bebf7ef2d934, FocusableContext as $f645667febf57a63$export$f9762fab77588ecb, FocusableProvider as $f645667febf57a63$export$13f3202a3e5ddd5, useFocusable as $f645667febf57a63$export$4c014de7c8940b4c} from "./useFocusable.module.js";
+import {focusSafely as $3ad3f6e1647bc98d$export$80f3e147d781571c} from "./focusSafely.module.js";
 
@@ -39,3 +41,5 @@ /*
 
-export {$3b117e43dc0ca95d$export$27c701ed9e449e99 as Pressable, $f1ab8c75478c6f73$export$3351871ee4b288b8 as PressResponder, $f1ab8c75478c6f73$export$cf75428e0b9ed1ea as ClearPressResponder, $a1ea59d68270f0dd$export$f8168d8dd8fd66e6 as useFocus, $507fabe10e71c6fb$export$b9b3dfddab17db27 as isFocusVisible, $507fabe10e71c6fb$export$630ff653c5ada6a9 as getInteractionModality, $507fabe10e71c6fb$export$8397ddfc504fdb9a as setInteractionModality, $507fabe10e71c6fb$export$2f1888112f558a7d as addWindowFocusTracking, $507fabe10e71c6fb$export$98e20ec92f614cfe as useInteractionModality, $507fabe10e71c6fb$export$ffd9e5021c1fb2d6 as useFocusVisible, $507fabe10e71c6fb$export$ec71b4b83ac08ec3 as useFocusVisibleListener, $9ab94262bd0047c7$export$420e68273165f4ec as useFocusWithin, $6179b936705e76d3$export$ae780daf29e6d456 as useHover, $e0b6e0b68ec7f50f$export$872b660ac5a1ff98 as useInteractOutside, $46d819fcbaf35654$export$8f71654801c2f7cd as useKeyboard, $e8a7022cf87cba2a$export$36da96379f79f245 as useMove, $f6c31cce2adf654f$export$45712eceda6fad21 as usePress, $7d0a636d7a4dcefd$export$2123ff2b87c81ca as useScrollWheel, $8a26561d2877236e$export$c24ed0104d07eab9 as useLongPress};
+
+
+export {$3b117e43dc0ca95d$export$27c701ed9e449e99 as Pressable, $f1ab8c75478c6f73$export$3351871ee4b288b8 as PressResponder, $f1ab8c75478c6f73$export$cf75428e0b9ed1ea as ClearPressResponder, $a1ea59d68270f0dd$export$f8168d8dd8fd66e6 as useFocus, $507fabe10e71c6fb$export$b9b3dfddab17db27 as isFocusVisible, $507fabe10e71c6fb$export$630ff653c5ada6a9 as getInteractionModality, $507fabe10e71c6fb$export$8397ddfc504fdb9a as setInteractionModality, $507fabe10e71c6fb$export$2f1888112f558a7d as addWindowFocusTracking, $507fabe10e71c6fb$export$98e20ec92f614cfe as useInteractionModality, $507fabe10e71c6fb$export$ffd9e5021c1fb2d6 as useFocusVisible, $507fabe10e71c6fb$export$ec71b4b83ac08ec3 as useFocusVisibleListener, $9ab94262bd0047c7$export$420e68273165f4ec as useFocusWithin, $6179b936705e76d3$export$ae780daf29e6d456 as useHover, $e0b6e0b68ec7f50f$export$872b660ac5a1ff98 as useInteractOutside, $46d819fcbaf35654$export$8f71654801c2f7cd as useKeyboard, $e8a7022cf87cba2a$export$36da96379f79f245 as useMove, $f6c31cce2adf654f$export$45712eceda6fad21 as usePress, $7d0a636d7a4dcefd$export$2123ff2b87c81ca as useScrollWheel, $8a26561d2877236e$export$c24ed0104d07eab9 as useLongPress, $f645667febf57a63$export$4c014de7c8940b4c as useFocusable, $f645667febf57a63$export$13f3202a3e5ddd5 as FocusableProvider, $f645667febf57a63$export$35a3bebf7ef2d934 as Focusable, $f645667febf57a63$export$f9762fab77588ecb as FocusableContext, $3ad3f6e1647bc98d$export$80f3e147d781571c as focusSafely};
 //# sourceMappingURL=module.js.map

dist/Pressable.main.js

 var $0294ea432cd92340$exports = require("./usePress.main.js");
+var $15f8fd80892557ff$exports = require("./useFocusable.main.js");
 var $ev4bP$reactariautils = require("@react-aria/utils");
@@ -28,2 +29,3 @@ var $ev4bP$react = require("react");
 
+
 const $e1dbec26039c051d$export$27c701ed9e449e99 = /*#__PURE__*/ (0, ($parcel$interopDefault($ev4bP$react))).forwardRef(({ children: children, ...props }, ref)=>{
@@ -35,7 +37,29 @@ ref = (0, $ev4bP$reactariautils.useObjectRef)(ref);
     });
+    let { focusableProps: focusableProps } = (0, $15f8fd80892557ff$exports.useFocusable)(props, ref);
     let child = (0, ($parcel$interopDefault($ev4bP$react))).Children.only(children);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($ev4bP$react))).cloneElement(child, // @ts-ignore
-    {
-        ref: ref,
-        ...(0, $ev4bP$reactariautils.mergeProps)(child.props, pressProps)
+    (0, $ev4bP$react.useEffect)(()=>{
+        let el = ref.current;
+        if (!el || !(el instanceof (0, $ev4bP$reactariautils.getOwnerWindow)(el).Element)) {
+            console.error('<Pressable> child must forward its ref to a DOM element.');
+            return;
+        }
+        if (!(0, $ev4bP$reactariautils.isFocusable)(el)) {
+            console.warn('<Pressable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+            return;
+        }
+        if (el.localName !== 'button' && el.localName !== 'input' && el.localName !== 'select' && el.localName !== 'textarea' && el.localName !== 'a' && el.localName !== 'area' && el.localName !== 'summary') {
+            let role = el.getAttribute('role');
+            if (!role) console.warn('<Pressable> child must have an interactive ARIA role.');
+            else if (// https://w3c.github.io/aria/#widget_roles
+            role !== 'application' && role !== 'button' && role !== 'checkbox' && role !== 'combobox' && role !== 'gridcell' && role !== 'link' && role !== 'menuitem' && role !== 'menuitemcheckbox' && role !== 'menuitemradio' && role !== 'option' && role !== 'radio' && role !== 'searchbox' && role !== 'separator' && role !== 'slider' && role !== 'spinbutton' && role !== 'switch' && role !== 'tab' && role !== 'textbox' && role !== 'treeitem') console.warn(`<Pressable> child must have an interactive ARIA role. Got "${role}".`);
+        }
+    }, [
+        ref
+    ]);
+    // @ts-ignore
+    let childRef = parseInt((0, ($parcel$interopDefault($ev4bP$react))).version, 10) < 19 ? child.ref : child.props.ref;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($ev4bP$react))).cloneElement(child, {
+        ...(0, $ev4bP$reactariautils.mergeProps)(pressProps, focusableProps, child.props),
+        // @ts-ignore
+        ref: (0, $ev4bP$reactariautils.mergeRefs)(childRef, ref)
     });
@@ -42,0 +66,0 @@ });

dist/Pressable.module.js

 import {usePress as $f6c31cce2adf654f$export$45712eceda6fad21} from "./usePress.module.js";
-import {useObjectRef as $hhDyF$useObjectRef, mergeProps as $hhDyF$mergeProps} from "@react-aria/utils";
-import $hhDyF$react from "react";
+import {useFocusable as $f645667febf57a63$export$4c014de7c8940b4c} from "./useFocusable.module.js";
+import {useObjectRef as $hhDyF$useObjectRef, getOwnerWindow as $hhDyF$getOwnerWindow, isFocusable as $hhDyF$isFocusable, mergeProps as $hhDyF$mergeProps, mergeRefs as $hhDyF$mergeRefs} from "@react-aria/utils";
+import $hhDyF$react, {useEffect as $hhDyF$useEffect} from "react";
 
@@ -18,2 +19,3 @@ /*
 
+
 const $3b117e43dc0ca95d$export$27c701ed9e449e99 = /*#__PURE__*/ (0, $hhDyF$react).forwardRef(({ children: children, ...props }, ref)=>{
@@ -25,7 +27,29 @@ ref = (0, $hhDyF$useObjectRef)(ref);
     });
+    let { focusableProps: focusableProps } = (0, $f645667febf57a63$export$4c014de7c8940b4c)(props, ref);
     let child = (0, $hhDyF$react).Children.only(children);
-    return /*#__PURE__*/ (0, $hhDyF$react).cloneElement(child, // @ts-ignore
-    {
-        ref: ref,
-        ...(0, $hhDyF$mergeProps)(child.props, pressProps)
+    (0, $hhDyF$useEffect)(()=>{
+        let el = ref.current;
+        if (!el || !(el instanceof (0, $hhDyF$getOwnerWindow)(el).Element)) {
+            console.error('<Pressable> child must forward its ref to a DOM element.');
+            return;
+        }
+        if (!(0, $hhDyF$isFocusable)(el)) {
+            console.warn('<Pressable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+            return;
+        }
+        if (el.localName !== 'button' && el.localName !== 'input' && el.localName !== 'select' && el.localName !== 'textarea' && el.localName !== 'a' && el.localName !== 'area' && el.localName !== 'summary') {
+            let role = el.getAttribute('role');
+            if (!role) console.warn('<Pressable> child must have an interactive ARIA role.');
+            else if (// https://w3c.github.io/aria/#widget_roles
+            role !== 'application' && role !== 'button' && role !== 'checkbox' && role !== 'combobox' && role !== 'gridcell' && role !== 'link' && role !== 'menuitem' && role !== 'menuitemcheckbox' && role !== 'menuitemradio' && role !== 'option' && role !== 'radio' && role !== 'searchbox' && role !== 'separator' && role !== 'slider' && role !== 'spinbutton' && role !== 'switch' && role !== 'tab' && role !== 'textbox' && role !== 'treeitem') console.warn(`<Pressable> child must have an interactive ARIA role. Got "${role}".`);
+        }
+    }, [
+        ref
+    ]);
+    // @ts-ignore
+    let childRef = parseInt((0, $hhDyF$react).version, 10) < 19 ? child.ref : child.props.ref;
+    return /*#__PURE__*/ (0, $hhDyF$react).cloneElement(child, {
+        ...(0, $hhDyF$mergeProps)(pressProps, focusableProps, child.props),
+        // @ts-ignore
+        ref: (0, $hhDyF$mergeRefs)(childRef, ref)
     });
@@ -32,0 +56,0 @@ });

dist/textSelection.main.js

@@ -37,4 +37,5 @@ var $20aJV$reactariautils = require("@react-aria/utils");
         // Ignore state since it doesn't apply for non iOS
-        $f7e14e656343df57$var$modifiedElementMap.set(target, target.style.userSelect);
-        target.style.userSelect = 'none';
+        let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+        $f7e14e656343df57$var$modifiedElementMap.set(target, target.style[property]);
+        target.style[property] = 'none';
     }
@@ -68,3 +69,4 @@ }
             let targetOldUserSelect = $f7e14e656343df57$var$modifiedElementMap.get(target);
-            if (target.style.userSelect === 'none') target.style.userSelect = targetOldUserSelect;
+            let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+            if (target.style[property] === 'none') target.style[property] = targetOldUserSelect;
             if (target.getAttribute('style') === '') target.removeAttribute('style');
@@ -71,0 +73,0 @@ $f7e14e656343df57$var$modifiedElementMap.delete(target);

dist/textSelection.module.js

@@ -30,4 +30,5 @@ import {isIOS as $7R18e$isIOS, getOwnerDocument as $7R18e$getOwnerDocument, runAfterTransition as $7R18e$runAfterTransition} from "@react-aria/utils";
         // Ignore state since it doesn't apply for non iOS
-        $14c0b72509d70225$var$modifiedElementMap.set(target, target.style.userSelect);
-        target.style.userSelect = 'none';
+        let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+        $14c0b72509d70225$var$modifiedElementMap.set(target, target.style[property]);
+        target.style[property] = 'none';
     }
@@ -61,3 +62,4 @@ }
             let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
-            if (target.style.userSelect === 'none') target.style.userSelect = targetOldUserSelect;
+            let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+            if (target.style[property] === 'none') target.style[property] = targetOldUserSelect;
             if (target.getAttribute('style') === '') target.removeAttribute('style');
@@ -64,0 +66,0 @@ $14c0b72509d70225$var$modifiedElementMap.delete(target);

dist/types.d.ts

@@ -1,3 +0,3 @@
-import { DOMAttributes, PressEvents, RefObject, FocusableElement, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
-import React, { ReactElement, ReactNode, FocusEvent } from "react";
+import { DOMAttributes, PressEvents, RefObject, FocusableElement, FocusEvents, KeyboardEvents, FocusableDOMProps, FocusableProps, HoverEvents, MoveEvents, ScrollEvents, LongPressEvent } from "@react-types/shared";
+import React, { MutableRefObject, ReactElement, ReactNode, FocusEvent } from "react";
 export interface PressProps extends PressEvents {
@@ -36,13 +36,2 @@ /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
 export function usePress(props: PressHookProps): PressResult;
-interface PressableProps extends PressProps {
-    children: ReactElement<DOMAttributes, string>;
-}
-export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<HTMLElement>>;
-interface PressResponderProps extends PressProps {
-    children: ReactNode;
-}
-export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<FocusableElement>>;
-export function ClearPressResponder({ children }: {
-    children: ReactNode;
-}): React.JSX.Element;
 export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
@@ -61,2 +50,54 @@ /** Whether the focus events should be disabled. */
 export function useFocus<Target extends FocusableElement = FocusableElement>(props: FocusProps<Target>): FocusResult<Target>;
+export interface KeyboardProps extends KeyboardEvents {
+    /** Whether the keyboard events should be disabled. */
+    isDisabled?: boolean;
+}
+export interface KeyboardResult {
+    /** Props to spread onto the target element. */
+    keyboardProps: DOMAttributes;
+}
+/**
+ * Handles keyboard interactions for a focusable element.
+ */
+export function useKeyboard(props: KeyboardProps): KeyboardResult;
+export interface FocusableOptions<T = FocusableElement> extends FocusableProps<T>, FocusableDOMProps {
+    /** Whether focus should be disabled. */
+    isDisabled?: boolean;
+}
+export interface FocusableProviderProps extends DOMAttributes {
+    /** The child element to provide DOM props to. */
+    children?: ReactNode;
+}
+interface FocusableContextValue extends FocusableProviderProps {
+    ref?: MutableRefObject<FocusableElement | null>;
+}
+/** @private */
+export let FocusableContext: React.Context<FocusableContextValue | null>;
+/**
+ * Provides DOM props to the nearest focusable child.
+ */
+export const FocusableProvider: React.ForwardRefExoticComponent<FocusableProviderProps & React.RefAttributes<FocusableElement>>;
+export interface FocusableAria {
+    /** Props for the focusable element. */
+    focusableProps: DOMAttributes;
+}
+/**
+ * Used to make an element focusable and capable of auto focus.
+ */
+export function useFocusable<T extends FocusableElement = FocusableElement>(props: FocusableOptions<T>, domRef: RefObject<FocusableElement | null>): FocusableAria;
+interface FocusableComponentProps extends FocusableOptions {
+    children: ReactElement<DOMAttributes, string>;
+}
+export const Focusable: React.ForwardRefExoticComponent<FocusableComponentProps & React.RefAttributes<FocusableElement>>;
+interface PressableProps extends PressProps {
+    children: ReactElement<DOMAttributes, string>;
+}
+export const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<FocusableElement>>;
+interface PressResponderProps extends PressProps {
+    children: ReactNode;
+}
+export const PressResponder: React.ForwardRefExoticComponent<PressResponderProps & React.RefAttributes<FocusableElement>>;
+export function ClearPressResponder({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
 export type Modality = 'keyboard' | 'pointer' | 'virtual';
@@ -156,14 +197,2 @@ export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
 export function useInteractOutside(props: InteractOutsideProps): void;
-export interface KeyboardProps extends KeyboardEvents {
-    /** Whether the keyboard events should be disabled. */
-    isDisabled?: boolean;
-}
-export interface KeyboardResult {
-    /** Props to spread onto the target element. */
-    keyboardProps: DOMAttributes;
-}
-/**
- * Handles keyboard interactions for a focusable element.
- */
-export function useKeyboard(props: KeyboardProps): KeyboardResult;
 export interface MoveResult {
@@ -219,4 +248,9 @@ /** Props to spread on the target element. */
 export function useLongPress(props: LongPressProps): LongPressResult;
+/**
+ * A utility function that focuses an element while avoiding undesired side effects such
+ * as page scrolling and screen reader issues with CSS transitions.
+ */
+export function focusSafely(element: FocusableElement): void;
 export type { PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents } from '@react-types/shared';
 
 //# sourceMappingURL=types.d.ts.map

dist/useFocus.main.js

@@ -45,3 +45,4 @@ var $625cf83917e112ad$exports = require("./utils.main.js");
         const ownerDocument = (0, $hrHul$reactariautils.getOwnerDocument)(e.target);
-        if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
+        const activeElement = ownerDocument ? (0, $hrHul$reactariautils.getActiveElement)(ownerDocument) : (0, $hrHul$reactariautils.getActiveElement)();
+        if (e.target === e.currentTarget && activeElement === (0, $hrHul$reactariautils.getEventTarget)(e.nativeEvent)) {
             if (onFocusProp) onFocusProp(e);
@@ -48,0 +49,0 @@ if (onFocusChange) onFocusChange(true);

dist/useFocus.module.js

 import {useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.module.js";
 import {useCallback as $hf0lj$useCallback} from "react";
-import {getOwnerDocument as $hf0lj$getOwnerDocument} from "@react-aria/utils";
+import {getOwnerDocument as $hf0lj$getOwnerDocument, getActiveElement as $hf0lj$getActiveElement, getEventTarget as $hf0lj$getEventTarget} from "@react-aria/utils";
 
@@ -39,3 +39,4 @@ /*
         const ownerDocument = (0, $hf0lj$getOwnerDocument)(e.target);
-        if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
+        const activeElement = ownerDocument ? (0, $hf0lj$getActiveElement)(ownerDocument) : (0, $hf0lj$getActiveElement)();
+        if (e.target === e.currentTarget && activeElement === (0, $hf0lj$getEventTarget)(e.nativeEvent)) {
             if (onFocusProp) onFocusProp(e);
@@ -42,0 +43,0 @@ if (onFocusChange) onFocusChange(true);

dist/useFocusVisible.main.js

@@ -79,3 +79,3 @@ var $625cf83917e112ad$exports = require("./utils.main.js");
     // cause keyboard focus rings to appear.
-    if (e.target === window || e.target === document || (0, $625cf83917e112ad$exports.ignoreFocusEvent)) return;
+    if (e.target === window || e.target === document || (0, $625cf83917e112ad$exports.ignoreFocusEvent) || !e.isTrusted) return;
     // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
@@ -214,3 +214,3 @@ // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
  */ function $e77252a287ef94ab$var$isKeyboardFocusEvent(isTextInput, modality, e) {
-    var _e_target;
+    let document1 = (0, $cR3F8$reactariautils.getOwnerDocument)(e === null || e === void 0 ? void 0 : e.target);
     const IHTMLInputElement = typeof window !== 'undefined' ? (0, $cR3F8$reactariautils.getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
@@ -220,3 +220,5 @@ const IHTMLTextAreaElement = typeof window !== 'undefined' ? (0, $cR3F8$reactariautils.getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
     const IKeyboardEvent = typeof window !== 'undefined' ? (0, $cR3F8$reactariautils.getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
-    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !$e77252a287ef94ab$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
+    // 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
+    isTextInput = isTextInput || document1.activeElement instanceof IHTMLInputElement && !$e77252a287ef94ab$var$nonTextInputTypes.has(document1.activeElement.type) || document1.activeElement instanceof IHTMLTextAreaElement || document1.activeElement instanceof IHTMLElement && document1.activeElement.isContentEditable;
     return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !$e77252a287ef94ab$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
@@ -242,2 +244,3 @@ }
         let handler = (modality, e)=>{
+            // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
             if (!$e77252a287ef94ab$var$isKeyboardFocusEvent(!!(opts === null || opts === void 0 ? void 0 : opts.isTextInput), modality, e)) return;
@@ -244,0 +247,0 @@ fn($e77252a287ef94ab$export$b9b3dfddab17db27());

dist/useFocusVisible.module.js

@@ -67,3 +67,3 @@ import {ignoreFocusEvent as $8a9cb279dc87e130$export$fda7da73ab5d4c48} from "./utils.module.js";
     // cause keyboard focus rings to appear.
-    if (e.target === window || e.target === document || (0, $8a9cb279dc87e130$export$fda7da73ab5d4c48)) return;
+    if (e.target === window || e.target === document || (0, $8a9cb279dc87e130$export$fda7da73ab5d4c48) || !e.isTrusted) return;
     // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
@@ -202,3 +202,3 @@ // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
  */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
-    var _e_target;
+    let document1 = (0, $28AnR$getOwnerDocument)(e === null || e === void 0 ? void 0 : e.target);
     const IHTMLInputElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
@@ -208,3 +208,5 @@ const IHTMLTextAreaElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
     const IKeyboardEvent = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
-    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
+    // 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
+    isTextInput = isTextInput || document1.activeElement instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(document1.activeElement.type) || document1.activeElement instanceof IHTMLTextAreaElement || document1.activeElement instanceof IHTMLElement && document1.activeElement.isContentEditable;
     return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
@@ -230,2 +232,3 @@ }
         let handler = (modality, e)=>{
+            // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
             if (!$507fabe10e71c6fb$var$isKeyboardFocusEvent(!!(opts === null || opts === void 0 ? void 0 : opts.isTextInput), modality, e)) return;
@@ -232,0 +235,0 @@ fn($507fabe10e71c6fb$export$b9b3dfddab17db27());

dist/useFocusWithin.main.js

 var $625cf83917e112ad$exports = require("./utils.main.js");
 var $kDAhS$react = require("react");
+var $kDAhS$reactariautils = require("@react-aria/utils");
 
@@ -26,2 +27,3 @@
 
+
 function $d16842bbd0359d1b$export$420e68273165f4ec(props) {
@@ -32,3 +34,6 @@ let { isDisabled: isDisabled, onBlurWithin: onBlurWithin, onFocusWithin: onFocusWithin, onFocusWithinChange: onFocusWithinChange } = props;
     });
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $kDAhS$reactariautils.useGlobalListeners)();
     let onBlur = (0, $kDAhS$react.useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
@@ -39,2 +44,3 @@ // when moving focus inside the element. Only trigger if the currentTarget doesn't
             state.current.isFocusWithin = false;
+            removeAllGlobalListeners();
             if (onBlurWithin) onBlurWithin(e);
@@ -46,9 +52,14 @@ if (onFocusWithinChange) onFocusWithinChange(false);
         onFocusWithinChange,
-        state
+        state,
+        removeAllGlobalListeners
     ]);
     let onSyntheticFocus = (0, $625cf83917e112ad$exports.useSyntheticBlurEvent)(onBlur);
     let onFocus = (0, $kDAhS$react.useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // Double check that document.activeElement actually matches e.target in case a previously chained
         // focus handler already moved focus somewhere else.
-        if (!state.current.isFocusWithin && document.activeElement === e.target) {
+        const ownerDocument = (0, $kDAhS$reactariautils.getOwnerDocument)(e.target);
+        const activeElement = (0, $kDAhS$reactariautils.getActiveElement)(ownerDocument);
+        if (!state.current.isFocusWithin && activeElement === (0, $kDAhS$reactariautils.getEventTarget)(e.nativeEvent)) {
             if (onFocusWithin) onFocusWithin(e);
@@ -58,2 +69,18 @@ if (onFocusWithinChange) onFocusWithinChange(true);
             onSyntheticFocus(e);
+            // Browsers don't fire blur events when elements are removed from the DOM.
+            // However, if a focus event occurs outside the element we're tracking, we
+            // can manually fire onBlur.
+            let currentTarget = e.currentTarget;
+            addGlobalListener(ownerDocument, 'focus', (e)=>{
+                if (state.current.isFocusWithin && !(0, $kDAhS$reactariautils.nodeContains)(currentTarget, e.target)) {
+                    let event = new (0, $625cf83917e112ad$exports.SyntheticFocusEvent)('blur', new ownerDocument.defaultView.FocusEvent('blur', {
+                        relatedTarget: e.target
+                    }));
+                    event.target = currentTarget;
+                    event.currentTarget = currentTarget;
+                    onBlur(event);
+                }
+            }, {
+                capture: true
+            });
         }
@@ -63,7 +90,9 @@ }, [
         onFocusWithinChange,
-        onSyntheticFocus
+        onSyntheticFocus,
+        addGlobalListener,
+        onBlur
     ]);
     if (isDisabled) return {
         focusWithinProps: {
-            // These should not have been null, that would conflict in mergeProps
+            // These cannot be null, that would conflict in mergeProps
             onFocus: undefined,
@@ -70,0 +99,0 @@ onBlur: undefined

dist/useFocusWithin.module.js

@@ -1,3 +0,4 @@
-import {useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.module.js";
+import {SyntheticFocusEvent as $8a9cb279dc87e130$export$905e7fc544a71f36, useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.module.js";
 import {useRef as $3b9Q0$useRef, useCallback as $3b9Q0$useCallback} from "react";
+import {useGlobalListeners as $3b9Q0$useGlobalListeners, getOwnerDocument as $3b9Q0$getOwnerDocument, getActiveElement as $3b9Q0$getActiveElement, getEventTarget as $3b9Q0$getEventTarget, nodeContains as $3b9Q0$nodeContains} from "@react-aria/utils";
 
@@ -20,2 +21,3 @@ /*
 
+
 function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
@@ -26,3 +28,6 @@ let { isDisabled: isDisabled, onBlurWithin: onBlurWithin, onFocusWithin: onFocusWithin, onFocusWithinChange: onFocusWithinChange } = props;
     });
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $3b9Q0$useGlobalListeners)();
     let onBlur = (0, $3b9Q0$useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
@@ -33,2 +38,3 @@ // when moving focus inside the element. Only trigger if the currentTarget doesn't
             state.current.isFocusWithin = false;
+            removeAllGlobalListeners();
             if (onBlurWithin) onBlurWithin(e);
@@ -40,9 +46,14 @@ if (onFocusWithinChange) onFocusWithinChange(false);
         onFocusWithinChange,
-        state
+        state,
+        removeAllGlobalListeners
     ]);
     let onSyntheticFocus = (0, $8a9cb279dc87e130$export$715c682d09d639cc)(onBlur);
     let onFocus = (0, $3b9Q0$useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // Double check that document.activeElement actually matches e.target in case a previously chained
         // focus handler already moved focus somewhere else.
-        if (!state.current.isFocusWithin && document.activeElement === e.target) {
+        const ownerDocument = (0, $3b9Q0$getOwnerDocument)(e.target);
+        const activeElement = (0, $3b9Q0$getActiveElement)(ownerDocument);
+        if (!state.current.isFocusWithin && activeElement === (0, $3b9Q0$getEventTarget)(e.nativeEvent)) {
             if (onFocusWithin) onFocusWithin(e);
@@ -52,2 +63,18 @@ if (onFocusWithinChange) onFocusWithinChange(true);
             onSyntheticFocus(e);
+            // Browsers don't fire blur events when elements are removed from the DOM.
+            // However, if a focus event occurs outside the element we're tracking, we
+            // can manually fire onBlur.
+            let currentTarget = e.currentTarget;
+            addGlobalListener(ownerDocument, 'focus', (e)=>{
+                if (state.current.isFocusWithin && !(0, $3b9Q0$nodeContains)(currentTarget, e.target)) {
+                    let event = new (0, $8a9cb279dc87e130$export$905e7fc544a71f36)('blur', new ownerDocument.defaultView.FocusEvent('blur', {
+                        relatedTarget: e.target
+                    }));
+                    event.target = currentTarget;
+                    event.currentTarget = currentTarget;
+                    onBlur(event);
+                }
+            }, {
+                capture: true
+            });
         }
@@ -57,7 +84,9 @@ }, [
         onFocusWithinChange,
-        onSyntheticFocus
+        onSyntheticFocus,
+        addGlobalListener,
+        onBlur
     ]);
     if (isDisabled) return {
         focusWithinProps: {
-            // These should not have been null, that would conflict in mergeProps
+            // These cannot be null, that would conflict in mergeProps
             onFocus: undefined,
@@ -64,0 +93,0 @@ onBlur: undefined

dist/useHover.main.js

@@ -0,1 +1,2 @@
+var $82z6W$reactariautils = require("@react-aria/utils");
 var $82z6W$react = require("react");
@@ -24,2 +25,3 @@
 
+
 // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
@@ -65,2 +67,3 @@ // We want to ignore these emulated events so they do not trigger hover behavior.
     (0, $82z6W$react.useEffect)($ffbc150311c75f01$var$setupGlobalTouchEvents, []);
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $82z6W$reactariautils.useGlobalListeners)();
     let { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd } = (0, $82z6W$react.useMemo)(()=>{
@@ -73,2 +76,11 @@ let triggerHoverStart = (event, pointerType)=>{
             state.target = target;
+            // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+            // 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((0, $82z6W$reactariautils.getOwnerDocument)(event.target), 'pointerover', (e)=>{
+                if (state.isHovered && state.target && !(0, $82z6W$reactariautils.nodeContains)(state.target, e.target)) triggerHoverEnd(e, e.pointerType);
+            }, {
+                capture: true
+            });
             if (onHoverStart) onHoverStart({
@@ -83,7 +95,8 @@ type: 'hoverstart',
         let triggerHoverEnd = (event, pointerType)=>{
+            let target = state.target;
             state.pointerType = '';
             state.target = null;
-            if (pointerType === 'touch' || !state.isHovered) return;
+            if (pointerType === 'touch' || !state.isHovered || !target) return;
             state.isHovered = false;
-            let target = event.currentTarget;
+            removeAllGlobalListeners();
             if (onHoverEnd) onHoverEnd({
@@ -127,3 +140,5 @@ type: 'hoverend',
         isDisabled,
-        state
+        state,
+        addGlobalListener,
+        removeAllGlobalListeners
     ]);
@@ -130,0 +145,0 @@ (0, $82z6W$react.useEffect)(()=>{

dist/useHover.module.js

@@ -0,1 +1,2 @@
+import {useGlobalListeners as $AWxnT$useGlobalListeners, getOwnerDocument as $AWxnT$getOwnerDocument, nodeContains as $AWxnT$nodeContains} from "@react-aria/utils";
 import {useState as $AWxnT$useState, useRef as $AWxnT$useRef, useEffect as $AWxnT$useEffect, useMemo as $AWxnT$useMemo} from "react";
@@ -18,2 +19,3 @@
 
+
 // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
@@ -59,2 +61,3 @@ // We want to ignore these emulated events so they do not trigger hover behavior.
     (0, $AWxnT$useEffect)($6179b936705e76d3$var$setupGlobalTouchEvents, []);
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $AWxnT$useGlobalListeners)();
     let { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd } = (0, $AWxnT$useMemo)(()=>{
@@ -67,2 +70,11 @@ let triggerHoverStart = (event, pointerType)=>{
             state.target = target;
+            // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+            // 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((0, $AWxnT$getOwnerDocument)(event.target), 'pointerover', (e)=>{
+                if (state.isHovered && state.target && !(0, $AWxnT$nodeContains)(state.target, e.target)) triggerHoverEnd(e, e.pointerType);
+            }, {
+                capture: true
+            });
             if (onHoverStart) onHoverStart({
@@ -77,7 +89,8 @@ type: 'hoverstart',
         let triggerHoverEnd = (event, pointerType)=>{
+            let target = state.target;
             state.pointerType = '';
             state.target = null;
-            if (pointerType === 'touch' || !state.isHovered) return;
+            if (pointerType === 'touch' || !state.isHovered || !target) return;
             state.isHovered = false;
-            let target = event.currentTarget;
+            removeAllGlobalListeners();
             if (onHoverEnd) onHoverEnd({
@@ -121,3 +134,5 @@ type: 'hoverend',
         isDisabled,
-        state
+        state,
+        addGlobalListener,
+        removeAllGlobalListeners
     ]);
@@ -124,0 +139,0 @@ (0, $AWxnT$useEffect)(()=>{

dist/useInteractOutside.main.js

@@ -97,3 +97,8 @@ var $9Icr4$reactariautils = require("@react-aria/utils");
     }
-    return ref.current && !ref.current.contains(event.target);
+    if (!ref.current) return false;
+    // When the event source is inside a Shadow DOM, event.target is just the shadow root.
+    // Using event.composedPath instead means we can get the actual element inside the shadow root.
+    // This only works if the shadow root is open, there is no way to detect if it is closed.
+    // If the event composed path contains the ref, interaction is inside.
+    return !event.composedPath().includes(ref.current);
 }
@@ -100,0 +105,0 @@

dist/useInteractOutside.module.js

@@ -91,3 +91,8 @@ import {useEffectEvent as $ispOf$useEffectEvent, getOwnerDocument as $ispOf$getOwnerDocument} from "@react-aria/utils";
     }
-    return ref.current && !ref.current.contains(event.target);
+    if (!ref.current) return false;
+    // When the event source is inside a Shadow DOM, event.target is just the shadow root.
+    // Using event.composedPath instead means we can get the actual element inside the shadow root.
+    // This only works if the shadow root is open, there is no way to detect if it is closed.
+    // If the event composed path contains the ref, interaction is inside.
+    return !event.composedPath().includes(ref.current);
 }
@@ -94,0 +99,0 @@

dist/usePress.main.js

@@ -181,5 +181,5 @@ var $f7e14e656343df57$exports = require("./textSelection.main.js");
             onKeyDown (e) {
-                if ($0294ea432cd92340$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target)) {
+                if ($0294ea432cd92340$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && (0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) {
                     var _state_metaKeyEvents;
-                    if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
+                    if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard((0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent), e.key)) e.preventDefault();
                     // If the event is repeating, it may have started on a different element
@@ -199,3 +199,3 @@ // after which focus moved to the current element. Ignore these events and
                         let pressUp = (e)=>{
-                            if ($0294ea432cd92340$var$isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target) && state.target) triggerPressUp($0294ea432cd92340$var$createEvent(state.target, e), 'keyboard');
+                            if ($0294ea432cd92340$var$isValidKeyboardEvent(e, originalTarget) && !e.repeat && (0, $bBqCQ$reactariautils.nodeContains)(originalTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e)) && state.target) triggerPressUp($0294ea432cd92340$var$createEvent(state.target, e), 'keyboard');
                         };
@@ -216,3 +216,3 @@ addGlobalListener((0, $bBqCQ$reactariautils.getOwnerDocument)(e.currentTarget), 'keyup', (0, $bBqCQ$reactariautils.chain)(pressUp, onKeyUp), true);
             onClick (e) {
-                if (e && !e.currentTarget.contains(e.target)) return;
+                if (e && !(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 if (e && e.button === 0 && !state.isTriggeringEvent && !(0, $bBqCQ$reactariautils.openLink).isOpening) {
@@ -243,5 +243,5 @@ let shouldStopPropagation = true;
                 var _state_metaKeyEvents1;
-                if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
-                let target = e.target;
-                triggerPressEnd($0294ea432cd92340$var$createEvent(state.target, e), 'keyboard', state.target.contains(target));
+                if ($0294ea432cd92340$var$shouldPreventDefaultKeyboard((0, $bBqCQ$reactariautils.getEventTarget)(e), e.key)) e.preventDefault();
+                let target = (0, $bBqCQ$reactariautils.getEventTarget)(e);
+                triggerPressEnd($0294ea432cd92340$var$createEvent(state.target, e), 'keyboard', (0, $bBqCQ$reactariautils.nodeContains)(state.target, (0, $bBqCQ$reactariautils.getEventTarget)(e)));
                 removeAllGlobalListeners();
@@ -251,3 +251,3 @@ // If a link was triggered with a key other than Enter, open the URL ourselves.
                 // only applies when using the Enter key.
-                if (e.key !== 'Enter' && $0294ea432cd92340$var$isHTMLAnchorLink(state.target) && state.target.contains(target) && !e[$0294ea432cd92340$var$LINK_CLICKED]) {
+                if (e.key !== 'Enter' && $0294ea432cd92340$var$isHTMLAnchorLink(state.target) && (0, $bBqCQ$reactariautils.nodeContains)(state.target, target) && !e[$0294ea432cd92340$var$LINK_CLICKED]) {
                     // Store a hidden property on the event so we only trigger link click once,
@@ -273,3 +273,3 @@ // even if there are multiple usePress instances attached to the element.
                 // Only handle left clicks, and ignore events that bubbled through portals.
-                if (e.button !== 0 || !e.currentTarget.contains(e.target)) return;
+                if (e.button !== 0 || !(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 // iOS safari fires pointer events from VoiceOver with incorrect coordinates/target.
@@ -294,3 +294,3 @@ // Ignore and let the onClick handler take care of it instead.
                     // This enables onPointerLeave and onPointerEnter to fire.
-                    let target = e.target;
+                    let target = (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent);
                     if ('releasePointerCapture' in target) target.releasePointerCapture(e.pointerId);
@@ -303,3 +303,3 @@ addGlobalListener((0, $bBqCQ$reactariautils.getOwnerDocument)(e.currentTarget), 'pointerup', onPointerUp, false);
             pressProps.onMouseDown = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 if (e.button === 0) {
@@ -315,3 +315,3 @@ if (preventFocusOnPress) {
                 // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
-                if (!e.currentTarget.contains(e.target) || state.pointerType === 'virtual') return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent)) || state.pointerType === 'virtual') return;
                 // Only handle left clicks
@@ -335,3 +335,3 @@ if (e.button === 0) triggerPressUp(e, state.pointerType || e.pointerType);
                 if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
-                    if (state.target.contains(e.target) && state.pointerType != null) {
+                    if ((0, $bBqCQ$reactariautils.nodeContains)(state.target, (0, $bBqCQ$reactariautils.getEventTarget)(e)) && state.pointerType != null) {
                         // Wait for onClick to fire onPress. This avoids browser issues when the DOM
@@ -344,3 +344,5 @@ // is mutated between onPointerUp and onClick, and is more compatible with third party libraries.
                         // This timeout is canceled during the click event in case the real one fires first.
-                        // In testing, a 0ms delay is too short. 5ms seems long enough for the browser to fire the real events.
+                        // 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;
@@ -355,3 +357,3 @@ let timeout = setTimeout(()=>{
                             }
-                        }, 5);
+                        }, 80);
                         // Use a capturing listener to track if a click occurred.
@@ -370,3 +372,3 @@ // If stopPropagation is called it may never reach our handler.
             pressProps.onDragStart = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
@@ -380,3 +382,3 @@ cancel(e);
                 // Only handle left clicks
-                if (e.button !== 0 || !e.currentTarget.contains(e.target)) return;
+                if (e.button !== 0 || !(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 if (state.ignoreEmulatedMouseEvents) {
@@ -400,3 +402,3 @@ e.stopPropagation();
             pressProps.onMouseEnter = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 let shouldStopPropagation = true;
@@ -410,3 +412,3 @@ if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
             pressProps.onMouseLeave = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 let shouldStopPropagation = true;
@@ -421,3 +423,3 @@ if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
             pressProps.onMouseUp = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 if (!state.ignoreEmulatedMouseEvents && e.button === 0) triggerPressUp(e, state.pointerType || 'mouse');
@@ -437,3 +439,3 @@ };
             pressProps.onTouchStart = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 let touch = $0294ea432cd92340$var$getTouchFromEvent(e.nativeEvent);
@@ -453,3 +455,3 @@ if (!touch) return;
             pressProps.onTouchMove = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 if (!state.isPressed) {
@@ -474,3 +476,3 @@ e.stopPropagation();
             pressProps.onTouchEnd = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 if (!state.isPressed) {
@@ -495,3 +497,3 @@ e.stopPropagation();
             pressProps.onTouchCancel = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 e.stopPropagation();
@@ -501,3 +503,3 @@ if (state.isPressed) cancel($0294ea432cd92340$var$createTouchEvent(state.target, e));
             let onScroll = (e)=>{
-                if (state.isPressed && e.target.contains(state.target)) cancel({
+                if (state.isPressed && (0, $bBqCQ$reactariautils.nodeContains)((0, $bBqCQ$reactariautils.getEventTarget)(e), state.target)) cancel({
                     currentTarget: state.target,
@@ -511,3 +513,3 @@ shiftKey: false,
             pressProps.onDragStart = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $bBqCQ$reactariautils.nodeContains)(e.currentTarget, (0, $bBqCQ$reactariautils.getEventTarget)(e.nativeEvent))) return;
                 cancel(e);
@@ -514,0 +516,0 @@ };

dist/usePress.module.js

@@ -7,3 +7,3 @@ import {disableTextSelection as $14c0b72509d70225$export$16a4697467175487, restoreTextSelection as $14c0b72509d70225$export$b0d6fa1ab32e3295} from "./textSelection.module.js";
 import {_ as $7mdmh$_2} from "@swc/helpers/_/_class_private_field_set";
-import {mergeProps as $7mdmh$mergeProps, useSyncRef as $7mdmh$useSyncRef, useGlobalListeners as $7mdmh$useGlobalListeners, useEffectEvent as $7mdmh$useEffectEvent, getOwnerDocument as $7mdmh$getOwnerDocument, chain as $7mdmh$chain, isMac as $7mdmh$isMac, openLink as $7mdmh$openLink, isVirtualClick as $7mdmh$isVirtualClick, isVirtualPointerEvent as $7mdmh$isVirtualPointerEvent, focusWithoutScrolling as $7mdmh$focusWithoutScrolling, getOwnerWindow as $7mdmh$getOwnerWindow} from "@react-aria/utils";
+import {mergeProps as $7mdmh$mergeProps, useSyncRef as $7mdmh$useSyncRef, useGlobalListeners as $7mdmh$useGlobalListeners, useEffectEvent as $7mdmh$useEffectEvent, nodeContains as $7mdmh$nodeContains, getEventTarget as $7mdmh$getEventTarget, getOwnerDocument as $7mdmh$getOwnerDocument, chain as $7mdmh$chain, isMac as $7mdmh$isMac, openLink as $7mdmh$openLink, isVirtualClick as $7mdmh$isVirtualClick, isVirtualPointerEvent as $7mdmh$isVirtualPointerEvent, focusWithoutScrolling as $7mdmh$focusWithoutScrolling, getOwnerWindow as $7mdmh$getOwnerWindow} from "@react-aria/utils";
 import {flushSync as $7mdmh$flushSync} from "react-dom";
@@ -176,5 +176,5 @@ import {useContext as $7mdmh$useContext, useState as $7mdmh$useState, useRef as $7mdmh$useRef, useMemo as $7mdmh$useMemo, useEffect as $7mdmh$useEffect} from "react";
             onKeyDown (e) {
-                if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target)) {
+                if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && (0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) {
                     var _state_metaKeyEvents;
-                    if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
+                    if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard((0, $7mdmh$getEventTarget)(e.nativeEvent), e.key)) e.preventDefault();
                     // If the event is repeating, it may have started on a different element
@@ -194,3 +194,3 @@ // after which focus moved to the current element. Ignore these events and
                         let pressUp = (e)=>{
-                            if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target) && state.target) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), 'keyboard');
+                            if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e, originalTarget) && !e.repeat && (0, $7mdmh$nodeContains)(originalTarget, (0, $7mdmh$getEventTarget)(e)) && state.target) triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), 'keyboard');
                         };
@@ -211,3 +211,3 @@ addGlobalListener((0, $7mdmh$getOwnerDocument)(e.currentTarget), 'keyup', (0, $7mdmh$chain)(pressUp, onKeyUp), true);
             onClick (e) {
-                if (e && !e.currentTarget.contains(e.target)) return;
+                if (e && !(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 if (e && e.button === 0 && !state.isTriggeringEvent && !(0, $7mdmh$openLink).isOpening) {
@@ -238,5 +238,5 @@ let shouldStopPropagation = true;
                 var _state_metaKeyEvents1;
-                if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key)) e.preventDefault();
-                let target = e.target;
-                triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), 'keyboard', state.target.contains(target));
+                if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard((0, $7mdmh$getEventTarget)(e), e.key)) e.preventDefault();
+                let target = (0, $7mdmh$getEventTarget)(e);
+                triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), 'keyboard', (0, $7mdmh$nodeContains)(state.target, (0, $7mdmh$getEventTarget)(e)));
                 removeAllGlobalListeners();
@@ -246,3 +246,3 @@ // If a link was triggered with a key other than Enter, open the URL ourselves.
                 // only applies when using the Enter key.
-                if (e.key !== 'Enter' && $f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) && state.target.contains(target) && !e[$f6c31cce2adf654f$var$LINK_CLICKED]) {
+                if (e.key !== 'Enter' && $f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) && (0, $7mdmh$nodeContains)(state.target, target) && !e[$f6c31cce2adf654f$var$LINK_CLICKED]) {
                     // Store a hidden property on the event so we only trigger link click once,
@@ -268,3 +268,3 @@ // even if there are multiple usePress instances attached to the element.
                 // Only handle left clicks, and ignore events that bubbled through portals.
-                if (e.button !== 0 || !e.currentTarget.contains(e.target)) return;
+                if (e.button !== 0 || !(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 // iOS safari fires pointer events from VoiceOver with incorrect coordinates/target.
@@ -289,3 +289,3 @@ // Ignore and let the onClick handler take care of it instead.
                     // This enables onPointerLeave and onPointerEnter to fire.
-                    let target = e.target;
+                    let target = (0, $7mdmh$getEventTarget)(e.nativeEvent);
                     if ('releasePointerCapture' in target) target.releasePointerCapture(e.pointerId);
@@ -298,3 +298,3 @@ addGlobalListener((0, $7mdmh$getOwnerDocument)(e.currentTarget), 'pointerup', onPointerUp, false);
             pressProps.onMouseDown = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 if (e.button === 0) {
@@ -310,3 +310,3 @@ if (preventFocusOnPress) {
                 // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
-                if (!e.currentTarget.contains(e.target) || state.pointerType === 'virtual') return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent)) || state.pointerType === 'virtual') return;
                 // Only handle left clicks
@@ -330,3 +330,3 @@ if (e.button === 0) triggerPressUp(e, state.pointerType || e.pointerType);
                 if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
-                    if (state.target.contains(e.target) && state.pointerType != null) {
+                    if ((0, $7mdmh$nodeContains)(state.target, (0, $7mdmh$getEventTarget)(e)) && state.pointerType != null) {
                         // Wait for onClick to fire onPress. This avoids browser issues when the DOM
@@ -339,3 +339,5 @@ // is mutated between onPointerUp and onClick, and is more compatible with third party libraries.
                         // This timeout is canceled during the click event in case the real one fires first.
-                        // In testing, a 0ms delay is too short. 5ms seems long enough for the browser to fire the real events.
+                        // 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;
@@ -350,3 +352,3 @@ let timeout = setTimeout(()=>{
                             }
-                        }, 5);
+                        }, 80);
                         // Use a capturing listener to track if a click occurred.
@@ -365,3 +367,3 @@ // If stopPropagation is called it may never reach our handler.
             pressProps.onDragStart = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
@@ -375,3 +377,3 @@ cancel(e);
                 // Only handle left clicks
-                if (e.button !== 0 || !e.currentTarget.contains(e.target)) return;
+                if (e.button !== 0 || !(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 if (state.ignoreEmulatedMouseEvents) {
@@ -395,3 +397,3 @@ e.stopPropagation();
             pressProps.onMouseEnter = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 let shouldStopPropagation = true;
@@ -405,3 +407,3 @@ if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
             pressProps.onMouseLeave = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 let shouldStopPropagation = true;
@@ -416,3 +418,3 @@ if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
             pressProps.onMouseUp = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 if (!state.ignoreEmulatedMouseEvents && e.button === 0) triggerPressUp(e, state.pointerType || 'mouse');
@@ -432,3 +434,3 @@ };
             pressProps.onTouchStart = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 let touch = $f6c31cce2adf654f$var$getTouchFromEvent(e.nativeEvent);
@@ -448,3 +450,3 @@ if (!touch) return;
             pressProps.onTouchMove = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 if (!state.isPressed) {
@@ -469,3 +471,3 @@ e.stopPropagation();
             pressProps.onTouchEnd = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 if (!state.isPressed) {
@@ -490,3 +492,3 @@ e.stopPropagation();
             pressProps.onTouchCancel = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 e.stopPropagation();
@@ -496,3 +498,3 @@ if (state.isPressed) cancel($f6c31cce2adf654f$var$createTouchEvent(state.target, e));
             let onScroll = (e)=>{
-                if (state.isPressed && e.target.contains(state.target)) cancel({
+                if (state.isPressed && (0, $7mdmh$nodeContains)((0, $7mdmh$getEventTarget)(e), state.target)) cancel({
                     currentTarget: state.target,
@@ -506,3 +508,3 @@ shiftKey: false,
             pressProps.onDragStart = (e)=>{
-                if (!e.currentTarget.contains(e.target)) return;
+                if (!(0, $7mdmh$nodeContains)(e.currentTarget, (0, $7mdmh$getEventTarget)(e.nativeEvent))) return;
                 cancel(e);
@@ -509,0 +511,0 @@ };

dist/utils.main.js

@@ -9,2 +9,3 @@ var $iJhOP$reactariautils = require("@react-aria/utils");
 
+$parcel$export(module.exports, "SyntheticFocusEvent", () => $625cf83917e112ad$export$905e7fc544a71f36);
 $parcel$export(module.exports, "useSyntheticBlurEvent", () => $625cf83917e112ad$export$715c682d09d639cc);
@@ -11,0 +12,0 @@ $parcel$export(module.exports, "ignoreFocusEvent", () => $625cf83917e112ad$export$fda7da73ab5d4c48);

package.json

 {
   "name": "@react-aria/interactions",
-  "version": "3.0.0-nightly-cdba74876-250121",
+  "version": "3.0.0-nightly-d21bb3bc5-250311",
   "description": "Spectrum UI components in React",
@@ -25,5 +25,6 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/ssr": "3.0.0-nightly-cdba74876-250121",
-    "@react-aria/utils": "3.0.0-nightly-cdba74876-250121",
-    "@react-types/shared": "3.0.0-nightly-cdba74876-250121",
+    "@react-aria/ssr": "3.0.0-nightly-d21bb3bc5-250311",
+    "@react-aria/utils": "3.0.0-nightly-d21bb3bc5-250311",
+    "@react-stately/flags": "3.0.0-nightly-d21bb3bc5-250311",
+    "@react-types/shared": "3.0.0-nightly-d21bb3bc5-250311",
     "@swc/helpers": "^0.5.0"
@@ -30,0 +31,0 @@ },

src/index.ts

@@ -33,2 +33,4 @@ /*
 export {useLongPress} from './useLongPress';
+export {useFocusable, FocusableProvider, Focusable, FocusableContext} from './useFocusable';
+export {focusSafely} from './focusSafely';
 
@@ -46,1 +48,2 @@ export type {FocusProps, FocusResult} from './useFocus';
 export type {ScrollWheelProps} from './useScrollWheel';
+export type {FocusableAria, FocusableOptions, FocusableProviderProps} from './useFocusable';

src/textSelection.ts

@@ -49,4 +49,5 @@ /*
     // Ignore state since it doesn't apply for non iOS
-    modifiedElementMap.set(target, target.style.userSelect);
-    target.style.userSelect = 'none';
+    let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
+    modifiedElementMap.set(target, target.style[property]);
+    target.style[property] = 'none';
   }
@@ -89,5 +90,6 @@ }
       let targetOldUserSelect = modifiedElementMap.get(target) as string;
+      let property = 'userSelect' in target.style ? 'userSelect' : 'webkitUserSelect';
 
-      if (target.style.userSelect === 'none') {
-        target.style.userSelect = targetOldUserSelect;
+      if (target.style[property] === 'none') {
+        target.style[property] = targetOldUserSelect;
       }
@@ -94,0 +96,0 @@

src/useFocus.ts

@@ -20,3 +20,3 @@ /*
 import {FocusEvent, useCallback} from 'react';
-import {getOwnerDocument} from '@react-aria/utils';
+import {getActiveElement, getEventTarget, getOwnerDocument} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
@@ -68,4 +68,4 @@
     const ownerDocument = getOwnerDocument(e.target);
-
-    if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
+    const activeElement = ownerDocument ? getActiveElement(ownerDocument) : getActiveElement();
+    if (e.target === e.currentTarget && activeElement === getEventTarget(e.nativeEvent)) {
       if (onFocusProp) {
@@ -72,0 +72,0 @@ onFocusProp(e);

src/useFocusVisible.ts

@@ -96,3 +96,3 @@ /*
   // cause keyboard focus rings to appear.
-  if (e.target === window || e.target === document || ignoreFocusEvent) {
+  if (e.target === window || e.target === document || ignoreFocusEvent || !e.isTrusted) {
     return;
@@ -185,2 +185,3 @@ }
   documentObject.removeEventListener('click', handleClickEvent, true);
+
   windowObject.removeEventListener('focus', handleFocusEvent, true);
@@ -294,2 +295,3 @@ windowObject.removeEventListener('blur', handleWindowBlur, false);
 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;
@@ -300,6 +302,8 @@ const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement;
 
+  // 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
   isTextInput = isTextInput ||
-    (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||
-    e?.target instanceof IHTMLTextAreaElement ||
-    (e?.target instanceof IHTMLElement && e?.target.isContentEditable);
+    (document.activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(document.activeElement.type)) ||
+    document.activeElement instanceof IHTMLTextAreaElement ||
+    (document.activeElement instanceof IHTMLElement && document.activeElement.isContentEditable);
   return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
@@ -329,2 +333,3 @@ }
     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)) {
@@ -331,0 +336,0 @@ return;

src/useFocusWithin.ts

@@ -20,3 +20,4 @@ /*
 import {FocusEvent, useCallback, useRef} from 'react';
-import {useSyntheticBlurEvent} from './utils';
+import {getActiveElement, getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
+import {SyntheticFocusEvent, useSyntheticBlurEvent} from './utils';
 
@@ -53,3 +54,10 @@ export interface FocusWithinProps {
 
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
+
   let onBlur = useCallback((e: FocusEvent) => {
+    // Ignore events bubbling through portals.
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
@@ -60,2 +68,3 @@ // when moving focus inside the element. Only trigger if the currentTarget doesn't
       state.current.isFocusWithin = false;
+      removeAllGlobalListeners();
 
@@ -70,9 +79,16 @@ if (onBlurWithin) {
     }
-  }, [onBlurWithin, onFocusWithinChange, state]);
+  }, [onBlurWithin, onFocusWithinChange, state, removeAllGlobalListeners]);
 
   let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
   let onFocus = useCallback((e: FocusEvent) => {
+    // Ignore events bubbling through portals.
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
-    if (!state.current.isFocusWithin && document.activeElement === e.target) {
+    const ownerDocument = getOwnerDocument(e.target);
+    const activeElement = getActiveElement(ownerDocument);
+    if (!state.current.isFocusWithin && activeElement === getEventTarget(e.nativeEvent)) {
       if (onFocusWithin) {
@@ -88,4 +104,17 @@ onFocusWithin(e);
       onSyntheticFocus(e);
+
+      // Browsers don't fire blur events when elements are removed from the DOM.
+      // However, if a focus event occurs outside the element we're tracking, we
+      // can manually fire onBlur.
+      let currentTarget = e.currentTarget;
+      addGlobalListener(ownerDocument, 'focus', e => {
+        if (state.current.isFocusWithin && !nodeContains(currentTarget, e.target as Element)) {
+          let event = new SyntheticFocusEvent('blur', new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target}));
+          event.target = currentTarget;
+          event.currentTarget = currentTarget;
+          onBlur(event);
+        }
+      }, {capture: true});
     }
-  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus]);
+  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus, addGlobalListener, onBlur]);
 
@@ -95,3 +124,3 @@ if (isDisabled) {
       focusWithinProps: {
-        // These should not have been null, that would conflict in mergeProps
+        // These cannot be null, that would conflict in mergeProps
         onFocus: undefined,
@@ -98,0 +127,0 @@ onBlur: undefined

src/useHover.ts

@@ -19,2 +19,3 @@ /*
 import {DOMAttributes, HoverEvents} from '@react-types/shared';
+import {getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
@@ -104,2 +105,3 @@
   useEffect(setupGlobalTouchEvents, []);
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
 
@@ -117,2 +119,12 @@ let {hoverProps, triggerHoverEnd} = useMemo(() => {
 
+      // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+      // 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)) {
+          triggerHoverEnd(e, e.pointerType);
+        }
+      }, {capture: true});
+
       if (onHoverStart) {
@@ -134,6 +146,7 @@ onHoverStart({
     let triggerHoverEnd = (event, pointerType) => {
+      let target = state.target;
       state.pointerType = '';
       state.target = null;
 
-      if (pointerType === 'touch' || !state.isHovered) {
+      if (pointerType === 'touch' || !state.isHovered || !target) {
         return;
@@ -143,3 +156,4 @@ }
       state.isHovered = false;
-      let target = event.currentTarget;
+      removeAllGlobalListeners();
+
       if (onHoverEnd) {
@@ -196,3 +210,3 @@ onHoverEnd({
     return {hoverProps, triggerHoverEnd};
-  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);
+  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state, addGlobalListener, removeAllGlobalListeners]);
 
@@ -199,0 +213,0 @@ useEffect(() => {

src/useInteractOutside.ts

@@ -119,3 +119,2 @@ /*
   }
-
   if (event.target) {
@@ -127,3 +126,2 @@ // if the event target is no longer in the document, ignore
     }
-
     // If the target is within a top layer element (e.g. toasts), ignore.
@@ -135,3 +133,11 @@ if (event.target.closest('[data-react-aria-top-layer]')) {
 
-  return ref.current && !ref.current.contains(event.target);
+  if (!ref.current) {
+    return false;
+  }
+
+  // When the event source is inside a Shadow DOM, event.target is just the shadow root.
+  // Using event.composedPath instead means we can get the actual element inside the shadow root.
+  // This only works if the shadow root is open, there is no way to detect if it is closed.
+  // If the event composed path contains the ref, interaction is inside.
+  return !event.composedPath().includes(ref.current);
 }

src/usePress.ts

@@ -18,3 +18,18 @@ /*
 
-import {chain, focusWithoutScrolling, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, isVirtualPointerEvent, mergeProps, openLink, useEffectEvent, useGlobalListeners, useSyncRef} from '@react-aria/utils';
+import {
+  chain,
+  focusWithoutScrolling,
+  getEventTarget,
+  getOwnerDocument,
+  getOwnerWindow,
+  isMac,
+  isVirtualClick,
+  isVirtualPointerEvent,
+  mergeProps,
+  nodeContains,
+  openLink,
+  useEffectEvent,
+  useGlobalListeners,
+  useSyncRef
+} from '@react-aria/utils';
 import {disableTextSelection, restoreTextSelection} from './textSelection';
@@ -288,4 +303,4 @@ import {DOMAttributes, FocusableElement, PressEvent as IPressEvent, PointerType, PressEvents, RefObject} from '@react-types/shared';
       onKeyDown(e) {
-        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target as Element)) {
-          if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
+        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
+          if (shouldPreventDefaultKeyboard(getEventTarget(e.nativeEvent), e.key)) {
             e.preventDefault();
@@ -309,3 +324,3 @@ }
             let pressUp = (e) => {
-              if (isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target as Element) && state.target) {
+              if (isValidKeyboardEvent(e, originalTarget) && !e.repeat && nodeContains(originalTarget, getEventTarget(e)) && state.target) {
                 triggerPressUp(createEvent(state.target, e), 'keyboard');
@@ -337,3 +352,3 @@ }
       onClick(e) {
-        if (e && !e.currentTarget.contains(e.target as Element)) {
+        if (e && !nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -372,8 +387,8 @@ }
       if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
-        if (shouldPreventDefaultKeyboard(e.target as Element, e.key)) {
+        if (shouldPreventDefaultKeyboard(getEventTarget(e), e.key)) {
           e.preventDefault();
         }
 
-        let target = e.target as Element;
-        triggerPressEnd(createEvent(state.target, e), 'keyboard', state.target.contains(target));
+        let target = getEventTarget(e);
+        triggerPressEnd(createEvent(state.target, e), 'keyboard', nodeContains(state.target, getEventTarget(e)));
         removeAllGlobalListeners();
@@ -384,3 +399,3 @@
         // only applies when using the Enter key.
-        if (e.key !== 'Enter' && isHTMLAnchorLink(state.target) && state.target.contains(target) && !e[LINK_CLICKED]) {
+        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,
@@ -409,3 +424,3 @@ // even if there are multiple usePress instances attached to the element.
         // Only handle left clicks, and ignore events that bubbled through portals.
-        if (e.button !== 0 || !e.currentTarget.contains(e.target as Element)) {
+        if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -430,3 +445,3 @@ }
           state.activePointerId = e.pointerId;
-          state.target = e.currentTarget;
+          state.target = e.currentTarget as FocusableElement;
 
@@ -441,3 +456,3 @@ if (!allowTextSelectionOnPress) {
           // This enables onPointerLeave and onPointerEnter to fire.
-          let target = e.target as Element;
+          let target = getEventTarget(e.nativeEvent);
           if ('releasePointerCapture' in target) {
@@ -457,3 +472,3 @@ target.releasePointerCapture(e.pointerId);
       pressProps.onMouseDown = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -476,3 +491,3 @@ }
         // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
-        if (!e.currentTarget.contains(e.target as Element) || state.pointerType === 'virtual') {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent)) || state.pointerType === 'virtual') {
           return;
@@ -504,3 +519,3 @@ }
         if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
-          if (state.target.contains(e.target as Element) && state.pointerType != null) {
+          if (nodeContains(state.target, getEventTarget(e)) && state.pointerType != null) {
             // Wait for onClick to fire onPress. This avoids browser issues when the DOM
@@ -513,3 +528,5 @@ // is mutated between onPointerUp and onClick, and is more compatible with third party libraries.
             // This timeout is canceled during the click event in case the real one fires first.
-            // In testing, a 0ms delay is too short. 5ms seems long enough for the browser to fire the real events.
+            // 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;
@@ -525,3 +542,3 @@ let timeout = setTimeout(() => {
               }
-            }, 5);
+            }, 80);
             // Use a capturing listener to track if a click occurred.
@@ -545,3 +562,3 @@ // If stopPropagation is called it may never reach our handler.
       pressProps.onDragStart = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -559,3 +576,3 @@ }
         // Only handle left clicks
-        if (e.button !== 0 || !e.currentTarget.contains(e.target as Element)) {
+        if (e.button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -591,3 +608,3 @@ }
       pressProps.onMouseEnter = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -608,3 +625,3 @@ }
       pressProps.onMouseLeave = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -626,3 +643,3 @@ }
       pressProps.onMouseUp = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -658,3 +675,3 @@ }
       pressProps.onTouchStart = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -687,3 +704,3 @@ }
       pressProps.onTouchMove = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -716,3 +733,3 @@ }
       pressProps.onTouchEnd = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -750,3 +767,3 @@ }
       pressProps.onTouchCancel = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -762,3 +779,3 @@ }
       let onScroll = (e: Event) => {
-        if (state.isPressed && (e.target as Element).contains(state.target)) {
+        if (state.isPressed && nodeContains(getEventTarget(e), state.target)) {
           cancel({
@@ -775,3 +792,3 @@ currentTarget: state.target,
       pressProps.onDragStart = (e) => {
-        if (!e.currentTarget.contains(e.target as Element)) {
+        if (!nodeContains(e.currentTarget, getEventTarget(e.nativeEvent))) {
           return;
@@ -778,0 +795,0 @@ }

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 2 instances in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 4 instances in 1 package

Improved metrics

Total package byte prevSize

831918

14.1%

Number of package files

118

8.26%

Number of low license alerts

16

-11.11%

Lines of code

9587

10.5%

Worsened metrics

Dependency count

7

16.67%

Dependency changes

• + Added

  @react-stately/flags@3.0.0-nightly-d21bb3bc5-250311

• + Added

  @react-aria/ssr@3.0.0-nightly-d21bb3bc5-250311
  (transitive)

• + Added

  @react-aria/utils@3.0.0-nightly-d21bb3bc5-250311
  (transitive)

• + Added

  @react-stately/flags@3.0.0-nightly-d21bb3bc5-250311
  (transitive)

• + Added

  @react-stately/utils@3.0.0-nightly-d21bb3bc5-250311
  (transitive)

• + Added

  @react-types/shared@3.0.0-nightly-d21bb3bc5-250311
  (transitive)

• - Removed

  @react-aria/ssr@3.0.0-nightly-cdba74876-250121
  (transitive)

• - Removed

  @react-aria/utils@3.0.0-nightly-cdba74876-250121
  (transitive)

• - Removed

  @react-stately/utils@3.0.0-nightly-cdba74876-250121
  (transitive)

• - Removed

  @react-types/shared@3.0.0-nightly-cdba74876-250121
  (transitive)

• Updated

  @react-aria/ssr@3.0.0-nightly-d21bb3bc5-250311

• Updated

  @react-aria/utils@3.0.0-nightly-d21bb3bc5-250311

• Updated

  @react-types/shared@3.0.0-nightly-d21bb3bc5-250311