@react-aria/selection 3.20.1 → 3.22.0

package/dist/useSelectableCollection.mjs

@@ -1,9 +1,9 @@
-import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.mjs";
+import {isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.mjs";
 import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.mjs";
+import {useRouter as $3H3GQ$useRouter, isCtrlKeyPressed as $3H3GQ$isCtrlKeyPressed, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, FOCUS_EVENT as $3H3GQ$FOCUS_EVENT, useEffectEvent as $3H3GQ$useEffectEvent, UPDATE_ACTIVEDESCENDANT as $3H3GQ$UPDATE_ACTIVEDESCENDANT, useUpdateLayoutEffect as $3H3GQ$useUpdateLayoutEffect, CLEAR_FOCUS_EVENT as $3H3GQ$CLEAR_FOCUS_EVENT, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
 import {flushSync as $3H3GQ$flushSync} from "react-dom";
 import {useRef as $3H3GQ$useRef, useEffect as $3H3GQ$useEffect} from "react";
 import {getFocusableTreeWalker as $3H3GQ$getFocusableTreeWalker, focusSafely as $3H3GQ$focusSafely} from "@react-aria/focus";
-import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
 import {getInteractionModality as $3H3GQ$getInteractionModality} from "@react-aria/interactions";
 import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
 
@@ -31,21 +31,23 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
     let { direction: direction } = (0, $3H3GQ$useLocale)();
     let router = (0, $3H3GQ$useRouter)();
     let onKeyDown = (e)=>{
+        var _ref_current;
         // Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
         if (e.altKey && e.key === 'Tab') e.preventDefault();
         // Keyboard events bubble through portals. Don't handle keyboard events
         // for elements outside the collection (e.g. menus).
-        if (!ref.current.contains(e.target)) return;
+        if (!((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) return;
         const navigateToKey = (key, childFocus)=>{
             if (key != null) {
                 if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
+                    var _scrollRef_current;
                     // Set focused key and re-render synchronously to bring item into view if needed.
                     (0, $3H3GQ$flushSync)(()=>{
                         manager.setFocusedKey(key, childFocus);
                     });
-                    let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
+                    let item = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
                     let itemProps = manager.getItemProps(key);
-                    router.open(item, e, itemProps.href, itemProps.routerOptions);
+                    if (item) router.open(item, e, itemProps.href, itemProps.routerOptions);
                     return;
                 }
                 manager.setFocusedKey(key, childFocus);
@@ -80,7 +82,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             case 'ArrowLeft':
                 if (delegate.getKeyLeftOf) {
                     var _delegate_getKeyLeftOf, _delegate_getFirstKey2, _delegate_getLastKey2;
-                    let nextKey = (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey);
+                    let nextKey = manager.focusedKey != null ? (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey) : null;
                     if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -91,7 +93,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             case 'ArrowRight':
                 if (delegate.getKeyRightOf) {
                     var _delegate_getKeyRightOf, _delegate_getLastKey3, _delegate_getFirstKey3;
-                    let nextKey = (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey);
+                    let nextKey = manager.focusedKey != null ? (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey) : null;
                     if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -101,24 +103,30 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 break;
             case 'Home':
                 if (delegate.getFirstKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
-                    let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
+                    let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $3H3GQ$isCtrlKeyPressed)(e));
                     manager.setFocusedKey(firstKey);
-                    if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
-                    else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    if (firstKey != null) {
+                        if ((0, $3H3GQ$isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
+                        else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    }
                 }
                 break;
             case 'End':
                 if (delegate.getLastKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
-                    let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
+                    let lastKey = delegate.getLastKey(manager.focusedKey, (0, $3H3GQ$isCtrlKeyPressed)(e));
                     manager.setFocusedKey(lastKey);
-                    if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
-                    else if (selectOnFocus) manager.replaceSelection(lastKey);
+                    if (lastKey != null) {
+                        if ((0, $3H3GQ$isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
+                        else if (selectOnFocus) manager.replaceSelection(lastKey);
+                    }
                 }
                 break;
             case 'PageDown':
-                if (delegate.getKeyPageBelow) {
+                if (delegate.getKeyPageBelow && manager.focusedKey != null) {
                     let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -127,7 +135,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 }
                 break;
             case 'PageUp':
-                if (delegate.getKeyPageAbove) {
+                if (delegate.getKeyPageAbove && manager.focusedKey != null) {
                     let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -136,7 +144,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 }
                 break;
             case 'a':
-                if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
+                if ((0, $3H3GQ$isCtrlKeyPressed)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
                     e.preventDefault();
                     manager.selectAll();
                 }
@@ -161,7 +169,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                         let walker = (0, $3H3GQ$getFocusableTreeWalker)(ref.current, {
                             tabbable: true
                         });
-                        let next;
+                        let next = undefined;
                         let last;
                         do {
                             last = walker.lastChild();
@@ -179,10 +187,12 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
         top: 0,
         left: 0
     });
-    (0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
+    (0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? undefined : ()=>{
+        var _scrollRef_current, _scrollRef_current1;
+        var _scrollRef_current_scrollTop, _scrollRef_current_scrollLeft;
         scrollPos.current = {
-            top: scrollRef.current.scrollTop,
-            left: scrollRef.current.scrollLeft
+            top: (_scrollRef_current_scrollTop = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTop) !== null && _scrollRef_current_scrollTop !== void 0 ? _scrollRef_current_scrollTop : 0,
+            left: (_scrollRef_current_scrollLeft = (_scrollRef_current1 = scrollRef.current) === null || _scrollRef_current1 === void 0 ? void 0 : _scrollRef_current1.scrollLeft) !== null && _scrollRef_current_scrollLeft !== void 0 ? _scrollRef_current_scrollLeft : 0
         };
     });
     let onFocus = (e)=>{
@@ -195,6 +205,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
         if (!e.currentTarget.contains(e.target)) return;
         manager.setFocused(true);
         if (manager.focusedKey == null) {
+            var _delegate_getLastKey, _delegate_getFirstKey;
             let navigateToFirstKey = (key)=>{
                 if (key != null) {
                     manager.setFocusedKey(key);
@@ -206,14 +217,14 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             // and either focus the first or last item accordingly.
             let relatedTarget = e.relatedTarget;
             var _manager_lastSelectedKey, _manager_firstSelectedKey;
-            if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey());
-            else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey());
-        } else if (!isVirtualized) {
+            if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate));
+            else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate));
+        } else if (!isVirtualized && scrollRef.current) {
             // Restore the scroll position to what it was before.
             scrollRef.current.scrollTop = scrollPos.current.top;
             scrollRef.current.scrollLeft = scrollPos.current.left;
         }
-        if (manager.focusedKey != null) {
+        if (manager.focusedKey != null && scrollRef.current) {
             // Refocus and scroll the focused item into view if it exists within the scrollable region.
             let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
             if (element) {
@@ -230,13 +241,75 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
         // Don't set blurred and then focused again if moving focus within the collection.
         if (!e.currentTarget.contains(e.relatedTarget)) manager.setFocused(false);
     };
+    // Ref to track whether the first item in the collection should be automatically focused. Specifically used for autocomplete when user types
+    // to focus the first key AFTER the collection updates.
+    // TODO: potentially expand the usage of this
+    let shouldVirtualFocusFirst = (0, $3H3GQ$useRef)(false);
+    // Add event listeners for custom virtual events. These handle updating the focused key in response to various keyboard events
+    // at the autocomplete level
+    // TODO: fix type later
+    (0, $3H3GQ$useEvent)(ref, (0, $3H3GQ$FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        let { detail: detail } = e;
+        e.stopPropagation();
+        manager.setFocused(true);
+        // If the user is typing forwards, autofocus the first option in the list.
+        if ((detail === null || detail === void 0 ? void 0 : detail.focusStrategy) === 'first') shouldVirtualFocusFirst.current = true;
+    });
+    let updateActiveDescendant = (0, $3H3GQ$useEffectEvent)(()=>{
+        var _delegate_getFirstKey;
+        var _delegate_getFirstKey1;
+        let keyToFocus = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
+        // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+        if (keyToFocus == null) {
+            var _ref_current;
+            (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(new CustomEvent((0, $3H3GQ$UPDATE_ACTIVEDESCENDANT), {
+                cancelable: true,
+                bubbles: true
+            }));
+            // If there wasn't a focusable key but the collection had items, then that means we aren't in an intermediate load state and all keys are disabled.
+            // Reset shouldVirtualFocusFirst so that we don't erronously autofocus an item when the collection is filtered again.
+            if (manager.collection.size > 0) shouldVirtualFocusFirst.current = false;
+        } else {
+            manager.setFocusedKey(keyToFocus);
+            // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key
+            // If there wasn't a key to focus, we might be in a temporary loading state so we'll want to still focus the first key
+            // after the collection updates after load
+            shouldVirtualFocusFirst.current = false;
+        }
+    });
+    (0, $3H3GQ$useUpdateLayoutEffect)(()=>{
+        if (shouldVirtualFocusFirst.current) updateActiveDescendant();
+    }, [
+        manager.collection,
+        updateActiveDescendant
+    ]);
+    let resetFocusFirstFlag = (0, $3H3GQ$useEffectEvent)(()=>{
+        // If user causes the focused key to change in any other way, clear shouldVirtualFocusFirst so we don't
+        // accidentally move focus from under them. Skip this if the collection was empty because we might be in a load
+        // state and will still want to focus the first item after load
+        if (manager.collection.size > 0) shouldVirtualFocusFirst.current = false;
+    });
+    (0, $3H3GQ$useUpdateLayoutEffect)(()=>{
+        resetFocusFirstFlag();
+    }, [
+        manager.focusedKey,
+        resetFocusFirstFlag
+    ]);
+    (0, $3H3GQ$useEvent)(ref, (0, $3H3GQ$CLEAR_FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        e.stopPropagation();
+        manager.setFocused(false);
+        manager.setFocusedKey(null);
+    });
     const autoFocusRef = (0, $3H3GQ$useRef)(autoFocus);
     (0, $3H3GQ$useEffect)(()=>{
         if (autoFocusRef.current) {
+            var _delegate_getFirstKey, _delegate_getLastKey;
             let focusedKey = null;
+            var _delegate_getFirstKey1;
             // Check focus strategy to determine which item to focus
-            if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
-            if (autoFocus === 'last') focusedKey = delegate.getLastKey();
+            if (autoFocus === 'first') focusedKey = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
+            var _delegate_getLastKey1;
+            if (autoFocus === 'last') focusedKey = (_delegate_getLastKey1 = (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)) !== null && _delegate_getLastKey1 !== void 0 ? _delegate_getLastKey1 : null;
             // If there are any selected keys, make the first one the new focus target
             let selectedKeys = manager.selectedKeys;
             if (selectedKeys.size) {
@@ -248,14 +321,14 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             manager.setFocused(true);
             manager.setFocusedKey(focusedKey);
             // If no default focus key is selected, focus the collection itself.
-            if (focusedKey == null && !shouldUseVirtualFocus) (0, $3H3GQ$focusSafely)(ref.current);
+            if (focusedKey == null && !shouldUseVirtualFocus && ref.current) (0, $3H3GQ$focusSafely)(ref.current);
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // Scroll the focused element into view when the focusedKey changes.
     let lastFocusedKey = (0, $3H3GQ$useRef)(manager.focusedKey);
     (0, $3H3GQ$useEffect)(()=>{
-        if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+        if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) {
             let modality = (0, $3H3GQ$getInteractionModality)();
             let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
             if (!element) // If item element wasn't found, return early (don't update autoFocusRef and lastFocusedKey).
@@ -270,7 +343,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             }
         }
         // If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
-        if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $3H3GQ$focusSafely)(ref.current);
+        if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) (0, $3H3GQ$focusSafely)(ref.current);
         lastFocusedKey.current = manager.focusedKey;
         autoFocusRef.current = false;
     });
@@ -296,10 +369,9 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
     if (!disallowTypeAhead) handlers = (0, $3H3GQ$mergeProps)(typeSelectProps, handlers);
     // If nothing is focused within the collection, make the collection itself tabbable.
     // This will be marshalled to either the first or last item depending on where focus came from.
-    // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
-    // to move real DOM focus to the element anyway.
-    let tabIndex;
+    let tabIndex = undefined;
     if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
+    else tabIndex = -1;
     return {
         collectionProps: {
             ...handlers,

package/dist/useSelectableCollection.module.js

@@ -1,9 +1,9 @@
-import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
+import {isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
 import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.module.js";
+import {useRouter as $3H3GQ$useRouter, isCtrlKeyPressed as $3H3GQ$isCtrlKeyPressed, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, FOCUS_EVENT as $3H3GQ$FOCUS_EVENT, useEffectEvent as $3H3GQ$useEffectEvent, UPDATE_ACTIVEDESCENDANT as $3H3GQ$UPDATE_ACTIVEDESCENDANT, useUpdateLayoutEffect as $3H3GQ$useUpdateLayoutEffect, CLEAR_FOCUS_EVENT as $3H3GQ$CLEAR_FOCUS_EVENT, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
 import {flushSync as $3H3GQ$flushSync} from "react-dom";
 import {useRef as $3H3GQ$useRef, useEffect as $3H3GQ$useEffect} from "react";
 import {getFocusableTreeWalker as $3H3GQ$getFocusableTreeWalker, focusSafely as $3H3GQ$focusSafely} from "@react-aria/focus";
-import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, scrollIntoView as $3H3GQ$scrollIntoView, mergeProps as $3H3GQ$mergeProps} from "@react-aria/utils";
 import {getInteractionModality as $3H3GQ$getInteractionModality} from "@react-aria/interactions";
 import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
 
@@ -31,21 +31,23 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
     let { direction: direction } = (0, $3H3GQ$useLocale)();
     let router = (0, $3H3GQ$useRouter)();
     let onKeyDown = (e)=>{
+        var _ref_current;
         // Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
         if (e.altKey && e.key === 'Tab') e.preventDefault();
         // Keyboard events bubble through portals. Don't handle keyboard events
         // for elements outside the collection (e.g. menus).
-        if (!ref.current.contains(e.target)) return;
+        if (!((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(e.target))) return;
         const navigateToKey = (key, childFocus)=>{
             if (key != null) {
                 if (manager.isLink(key) && linkBehavior === 'selection' && selectOnFocus && !(0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) {
+                    var _scrollRef_current;
                     // Set focused key and re-render synchronously to bring item into view if needed.
                     (0, $3H3GQ$flushSync)(()=>{
                         manager.setFocusedKey(key, childFocus);
                     });
-                    let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
+                    let item = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
                     let itemProps = manager.getItemProps(key);
-                    router.open(item, e, itemProps.href, itemProps.routerOptions);
+                    if (item) router.open(item, e, itemProps.href, itemProps.routerOptions);
                     return;
                 }
                 manager.setFocusedKey(key, childFocus);
@@ -80,7 +82,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             case 'ArrowLeft':
                 if (delegate.getKeyLeftOf) {
                     var _delegate_getKeyLeftOf, _delegate_getFirstKey2, _delegate_getLastKey2;
-                    let nextKey = (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey);
+                    let nextKey = manager.focusedKey != null ? (_delegate_getKeyLeftOf = delegate.getKeyLeftOf) === null || _delegate_getKeyLeftOf === void 0 ? void 0 : _delegate_getKeyLeftOf.call(delegate, manager.focusedKey) : null;
                     if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -91,7 +93,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             case 'ArrowRight':
                 if (delegate.getKeyRightOf) {
                     var _delegate_getKeyRightOf, _delegate_getLastKey3, _delegate_getFirstKey3;
-                    let nextKey = (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey);
+                    let nextKey = manager.focusedKey != null ? (_delegate_getKeyRightOf = delegate.getKeyRightOf) === null || _delegate_getKeyRightOf === void 0 ? void 0 : _delegate_getKeyRightOf.call(delegate, manager.focusedKey) : null;
                     if (nextKey == null && shouldFocusWrap) nextKey = direction === 'rtl' ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -101,24 +103,30 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 break;
             case 'Home':
                 if (delegate.getFirstKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
-                    let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
+                    let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $3H3GQ$isCtrlKeyPressed)(e));
                     manager.setFocusedKey(firstKey);
-                    if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
-                    else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    if (firstKey != null) {
+                        if ((0, $3H3GQ$isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
+                        else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    }
                 }
                 break;
             case 'End':
                 if (delegate.getLastKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
-                    let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(e));
+                    let lastKey = delegate.getLastKey(manager.focusedKey, (0, $3H3GQ$isCtrlKeyPressed)(e));
                     manager.setFocusedKey(lastKey);
-                    if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
-                    else if (selectOnFocus) manager.replaceSelection(lastKey);
+                    if (lastKey != null) {
+                        if ((0, $3H3GQ$isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
+                        else if (selectOnFocus) manager.replaceSelection(lastKey);
+                    }
                 }
                 break;
             case 'PageDown':
-                if (delegate.getKeyPageBelow) {
+                if (delegate.getKeyPageBelow && manager.focusedKey != null) {
                     let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -127,7 +135,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 }
                 break;
             case 'PageUp':
-                if (delegate.getKeyPageAbove) {
+                if (delegate.getKeyPageAbove && manager.focusedKey != null) {
                     let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
                     if (nextKey != null) {
                         e.preventDefault();
@@ -136,7 +144,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 }
                 break;
             case 'a':
-                if ((0, $feb5ffebff200149$export$16792effe837dba3)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
+                if ((0, $3H3GQ$isCtrlKeyPressed)(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
                     e.preventDefault();
                     manager.selectAll();
                 }
@@ -161,7 +169,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                         let walker = (0, $3H3GQ$getFocusableTreeWalker)(ref.current, {
                             tabbable: true
                         });
-                        let next;
+                        let next = undefined;
                         let last;
                         do {
                             last = walker.lastChild();
@@ -179,10 +187,12 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
         top: 0,
         left: 0
     });
-    (0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
+    (0, $3H3GQ$useEvent)(scrollRef, 'scroll', isVirtualized ? undefined : ()=>{
+        var _scrollRef_current, _scrollRef_current1;
+        var _scrollRef_current_scrollTop, _scrollRef_current_scrollLeft;
         scrollPos.current = {
-            top: scrollRef.current.scrollTop,
-            left: scrollRef.current.scrollLeft
+            top: (_scrollRef_current_scrollTop = (_scrollRef_current = scrollRef.current) === null || _scrollRef_current === void 0 ? void 0 : _scrollRef_current.scrollTop) !== null && _scrollRef_current_scrollTop !== void 0 ? _scrollRef_current_scrollTop : 0,
+            left: (_scrollRef_current_scrollLeft = (_scrollRef_current1 = scrollRef.current) === null || _scrollRef_current1 === void 0 ? void 0 : _scrollRef_current1.scrollLeft) !== null && _scrollRef_current_scrollLeft !== void 0 ? _scrollRef_current_scrollLeft : 0
         };
     });
     let onFocus = (e)=>{
@@ -195,6 +205,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
         if (!e.currentTarget.contains(e.target)) return;
         manager.setFocused(true);
         if (manager.focusedKey == null) {
+            var _delegate_getLastKey, _delegate_getFirstKey;
             let navigateToFirstKey = (key)=>{
                 if (key != null) {
                     manager.setFocusedKey(key);
@@ -206,14 +217,14 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             // and either focus the first or last item accordingly.
             let relatedTarget = e.relatedTarget;
             var _manager_lastSelectedKey, _manager_firstSelectedKey;
-            if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : delegate.getLastKey());
-            else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : delegate.getFirstKey());
-        } else if (!isVirtualized) {
+            if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) navigateToFirstKey((_manager_lastSelectedKey = manager.lastSelectedKey) !== null && _manager_lastSelectedKey !== void 0 ? _manager_lastSelectedKey : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate));
+            else navigateToFirstKey((_manager_firstSelectedKey = manager.firstSelectedKey) !== null && _manager_firstSelectedKey !== void 0 ? _manager_firstSelectedKey : (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate));
+        } else if (!isVirtualized && scrollRef.current) {
             // Restore the scroll position to what it was before.
             scrollRef.current.scrollTop = scrollPos.current.top;
             scrollRef.current.scrollLeft = scrollPos.current.left;
         }
-        if (manager.focusedKey != null) {
+        if (manager.focusedKey != null && scrollRef.current) {
             // Refocus and scroll the focused item into view if it exists within the scrollable region.
             let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
             if (element) {
@@ -230,13 +241,75 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
         // Don't set blurred and then focused again if moving focus within the collection.
         if (!e.currentTarget.contains(e.relatedTarget)) manager.setFocused(false);
     };
+    // Ref to track whether the first item in the collection should be automatically focused. Specifically used for autocomplete when user types
+    // to focus the first key AFTER the collection updates.
+    // TODO: potentially expand the usage of this
+    let shouldVirtualFocusFirst = (0, $3H3GQ$useRef)(false);
+    // Add event listeners for custom virtual events. These handle updating the focused key in response to various keyboard events
+    // at the autocomplete level
+    // TODO: fix type later
+    (0, $3H3GQ$useEvent)(ref, (0, $3H3GQ$FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        let { detail: detail } = e;
+        e.stopPropagation();
+        manager.setFocused(true);
+        // If the user is typing forwards, autofocus the first option in the list.
+        if ((detail === null || detail === void 0 ? void 0 : detail.focusStrategy) === 'first') shouldVirtualFocusFirst.current = true;
+    });
+    let updateActiveDescendant = (0, $3H3GQ$useEffectEvent)(()=>{
+        var _delegate_getFirstKey;
+        var _delegate_getFirstKey1;
+        let keyToFocus = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
+        // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+        if (keyToFocus == null) {
+            var _ref_current;
+            (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(new CustomEvent((0, $3H3GQ$UPDATE_ACTIVEDESCENDANT), {
+                cancelable: true,
+                bubbles: true
+            }));
+            // If there wasn't a focusable key but the collection had items, then that means we aren't in an intermediate load state and all keys are disabled.
+            // Reset shouldVirtualFocusFirst so that we don't erronously autofocus an item when the collection is filtered again.
+            if (manager.collection.size > 0) shouldVirtualFocusFirst.current = false;
+        } else {
+            manager.setFocusedKey(keyToFocus);
+            // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key
+            // If there wasn't a key to focus, we might be in a temporary loading state so we'll want to still focus the first key
+            // after the collection updates after load
+            shouldVirtualFocusFirst.current = false;
+        }
+    });
+    (0, $3H3GQ$useUpdateLayoutEffect)(()=>{
+        if (shouldVirtualFocusFirst.current) updateActiveDescendant();
+    }, [
+        manager.collection,
+        updateActiveDescendant
+    ]);
+    let resetFocusFirstFlag = (0, $3H3GQ$useEffectEvent)(()=>{
+        // If user causes the focused key to change in any other way, clear shouldVirtualFocusFirst so we don't
+        // accidentally move focus from under them. Skip this if the collection was empty because we might be in a load
+        // state and will still want to focus the first item after load
+        if (manager.collection.size > 0) shouldVirtualFocusFirst.current = false;
+    });
+    (0, $3H3GQ$useUpdateLayoutEffect)(()=>{
+        resetFocusFirstFlag();
+    }, [
+        manager.focusedKey,
+        resetFocusFirstFlag
+    ]);
+    (0, $3H3GQ$useEvent)(ref, (0, $3H3GQ$CLEAR_FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        e.stopPropagation();
+        manager.setFocused(false);
+        manager.setFocusedKey(null);
+    });
     const autoFocusRef = (0, $3H3GQ$useRef)(autoFocus);
     (0, $3H3GQ$useEffect)(()=>{
         if (autoFocusRef.current) {
+            var _delegate_getFirstKey, _delegate_getLastKey;
             let focusedKey = null;
+            var _delegate_getFirstKey1;
             // Check focus strategy to determine which item to focus
-            if (autoFocus === 'first') focusedKey = delegate.getFirstKey();
-            if (autoFocus === 'last') focusedKey = delegate.getLastKey();
+            if (autoFocus === 'first') focusedKey = (_delegate_getFirstKey1 = (_delegate_getFirstKey = delegate.getFirstKey) === null || _delegate_getFirstKey === void 0 ? void 0 : _delegate_getFirstKey.call(delegate)) !== null && _delegate_getFirstKey1 !== void 0 ? _delegate_getFirstKey1 : null;
+            var _delegate_getLastKey1;
+            if (autoFocus === 'last') focusedKey = (_delegate_getLastKey1 = (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate)) !== null && _delegate_getLastKey1 !== void 0 ? _delegate_getLastKey1 : null;
             // If there are any selected keys, make the first one the new focus target
             let selectedKeys = manager.selectedKeys;
             if (selectedKeys.size) {
@@ -248,14 +321,14 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             manager.setFocused(true);
             manager.setFocusedKey(focusedKey);
             // If no default focus key is selected, focus the collection itself.
-            if (focusedKey == null && !shouldUseVirtualFocus) (0, $3H3GQ$focusSafely)(ref.current);
+            if (focusedKey == null && !shouldUseVirtualFocus && ref.current) (0, $3H3GQ$focusSafely)(ref.current);
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // Scroll the focused element into view when the focusedKey changes.
     let lastFocusedKey = (0, $3H3GQ$useRef)(manager.focusedKey);
     (0, $3H3GQ$useEffect)(()=>{
-        if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+        if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) {
             let modality = (0, $3H3GQ$getInteractionModality)();
             let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
             if (!element) // If item element wasn't found, return early (don't update autoFocusRef and lastFocusedKey).
@@ -270,7 +343,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             }
         }
         // If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
-        if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $3H3GQ$focusSafely)(ref.current);
+        if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) (0, $3H3GQ$focusSafely)(ref.current);
         lastFocusedKey.current = manager.focusedKey;
         autoFocusRef.current = false;
     });
@@ -296,10 +369,9 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
     if (!disallowTypeAhead) handlers = (0, $3H3GQ$mergeProps)(typeSelectProps, handlers);
     // If nothing is focused within the collection, make the collection itself tabbable.
     // This will be marshalled to either the first or last item depending on where focus came from.
-    // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
-    // to move real DOM focus to the element anyway.
-    let tabIndex;
+    let tabIndex = undefined;
     if (!shouldUseVirtualFocus) tabIndex = manager.focusedKey == null ? 0 : -1;
+    else tabIndex = -1;
     return {
         collectionProps: {
             ...handlers,