@react-aria/selection - npm Package Compare versions

Comparing version 3.0.0-nightly-4f85a359f-241022 to 3.0.0-nightly-50c7ada5d-241219

dist/DOMLayoutDelegate.main.js

@@ -20,2 +20,3 @@
         let container = this.ref.current;
+        if (!container) return null;
         let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
@@ -34,5 +35,6 @@ if (!item) return null;
         let container = this.ref.current;
+        var _container_scrollWidth, _container_scrollHeight;
         return {
-            width: container.scrollWidth,
-            height: container.scrollHeight
+            width: (_container_scrollWidth = container === null || container === void 0 ? void 0 : container.scrollWidth) !== null && _container_scrollWidth !== void 0 ? _container_scrollWidth : 0,
+            height: (_container_scrollHeight = container === null || container === void 0 ? void 0 : container.scrollHeight) !== null && _container_scrollHeight !== void 0 ? _container_scrollHeight : 0
         };
@@ -42,7 +44,8 @@ }
         let container = this.ref.current;
+        var _container_scrollLeft, _container_scrollTop, _container_offsetWidth, _container_offsetHeight;
         return {
-            x: container.scrollLeft,
-            y: container.scrollTop,
-            width: container.offsetWidth,
-            height: container.offsetHeight
+            x: (_container_scrollLeft = container === null || container === void 0 ? void 0 : container.scrollLeft) !== null && _container_scrollLeft !== void 0 ? _container_scrollLeft : 0,
+            y: (_container_scrollTop = container === null || container === void 0 ? void 0 : container.scrollTop) !== null && _container_scrollTop !== void 0 ? _container_scrollTop : 0,
+            width: (_container_offsetWidth = container === null || container === void 0 ? void 0 : container.offsetWidth) !== null && _container_offsetWidth !== void 0 ? _container_offsetWidth : 0,
+            height: (_container_offsetHeight = container === null || container === void 0 ? void 0 : container.offsetHeight) !== null && _container_offsetHeight !== void 0 ? _container_offsetHeight : 0
         };
@@ -49,0 +52,0 @@ }

dist/DOMLayoutDelegate.module.js

@@ -14,2 +14,3 @@ /*
         let container = this.ref.current;
+        if (!container) return null;
         let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
@@ -28,5 +29,6 @@ if (!item) return null;
         let container = this.ref.current;
+        var _container_scrollWidth, _container_scrollHeight;
         return {
-            width: container.scrollWidth,
-            height: container.scrollHeight
+            width: (_container_scrollWidth = container === null || container === void 0 ? void 0 : container.scrollWidth) !== null && _container_scrollWidth !== void 0 ? _container_scrollWidth : 0,
+            height: (_container_scrollHeight = container === null || container === void 0 ? void 0 : container.scrollHeight) !== null && _container_scrollHeight !== void 0 ? _container_scrollHeight : 0
         };
@@ -36,7 +38,8 @@ }
         let container = this.ref.current;
+        var _container_scrollLeft, _container_scrollTop, _container_offsetWidth, _container_offsetHeight;
         return {
-            x: container.scrollLeft,
-            y: container.scrollTop,
-            width: container.offsetWidth,
-            height: container.offsetHeight
+            x: (_container_scrollLeft = container === null || container === void 0 ? void 0 : container.scrollLeft) !== null && _container_scrollLeft !== void 0 ? _container_scrollLeft : 0,
+            y: (_container_scrollTop = container === null || container === void 0 ? void 0 : container.scrollTop) !== null && _container_scrollTop !== void 0 ? _container_scrollTop : 0,
+            width: (_container_offsetWidth = container === null || container === void 0 ? void 0 : container.offsetWidth) !== null && _container_offsetWidth !== void 0 ? _container_offsetWidth : 0,
+            height: (_container_offsetHeight = container === null || container === void 0 ? void 0 : container.offsetHeight) !== null && _container_offsetHeight !== void 0 ? _container_offsetHeight : 0
         };
@@ -43,0 +46,0 @@ }

dist/ListKeyboardDelegate.main.js

@@ -28,6 +28,7 @@ var $2ac4508142683dcb$exports = require("./DOMLayoutDelegate.main.js");
     findNextNonDisabled(key, getNext) {
-        while(key != null){
-            let item = this.collection.getItem(key);
-            if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return key;
-            key = getNext(key);
+        let nextKey = key;
+        while(nextKey != null){
+            let item = this.collection.getItem(nextKey);
+            if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return nextKey;
+            nextKey = getNext(nextKey);
         }
@@ -37,19 +38,23 @@ return null;
     getNextKey(key) {
-        key = this.collection.getKeyAfter(key);
-        return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key));
+        let nextKey = key;
+        nextKey = this.collection.getKeyAfter(nextKey);
+        return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyAfter(key));
     }
     getPreviousKey(key) {
-        key = this.collection.getKeyBefore(key);
-        return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key));
+        let nextKey = key;
+        nextKey = this.collection.getKeyBefore(nextKey);
+        return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyBefore(key));
     }
     findKey(key, nextKey, shouldSkip) {
-        let itemRect = this.layoutDelegate.getItemRect(key);
-        if (!itemRect) return null;
+        let tempKey = key;
+        let itemRect = this.layoutDelegate.getItemRect(tempKey);
+        if (!itemRect || tempKey == null) return null;
         // Find the item above or below in the same column.
         let prevRect = itemRect;
         do {
-            key = nextKey(key);
-            itemRect = this.layoutDelegate.getItemRect(key);
-        }while (itemRect && shouldSkip(prevRect, itemRect));
-        return key;
+            tempKey = nextKey(tempKey);
+            if (tempKey == null) break;
+            itemRect = this.layoutDelegate.getItemRect(tempKey);
+        }while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
+        return tempKey;
     }
@@ -111,17 +116,18 @@ isSameRow(prevRect, itemRect) {
         if (!itemRect) return null;
-        if (!(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getFirstKey();
+        if (menu && !(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getFirstKey();
+        let nextKey = key;
         if (this.orientation === 'horizontal') {
             let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
-            while(itemRect && itemRect.x > pageX){
-                key = this.getKeyAbove(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.x > pageX && nextKey != null){
+                nextKey = this.getKeyAbove(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         } else {
             let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
-            while(itemRect && itemRect.y > pageY){
-                key = this.getKeyAbove(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.y > pageY && nextKey != null){
+                nextKey = this.getKeyAbove(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         }
-        return key !== null && key !== void 0 ? key : this.getFirstKey();
+        return nextKey !== null && nextKey !== void 0 ? nextKey : this.getFirstKey();
     }
@@ -132,17 +138,18 @@ getKeyPageBelow(key) {
         if (!itemRect) return null;
-        if (!(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getLastKey();
+        if (menu && !(0, $doKEG$reactariautils.isScrollable)(menu)) return this.getLastKey();
+        let nextKey = key;
         if (this.orientation === 'horizontal') {
             let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
-            while(itemRect && itemRect.x < pageX){
-                key = this.getKeyBelow(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.x < pageX && nextKey != null){
+                nextKey = this.getKeyBelow(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         } else {
             let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
-            while(itemRect && itemRect.y < pageY){
-                key = this.getKeyBelow(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.y < pageY && nextKey != null){
+                nextKey = this.getKeyBelow(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         }
-        return key !== null && key !== void 0 ? key : this.getLastKey();
+        return nextKey !== null && nextKey !== void 0 ? nextKey : this.getLastKey();
     }
@@ -155,2 +162,3 @@ getKeyForSearch(search, fromKey) {
             let item = collection.getItem(key);
+            if (!item) return null;
             let substring = item.textValue.slice(0, search.length);
@@ -157,0 +165,0 @@ if (item.textValue && this.collator.compare(substring, search) === 0) return key;

dist/ListKeyboardDelegate.module.js

@@ -22,6 +22,7 @@ import {DOMLayoutDelegate as $657e4dc4a6e88df0$export$8f5ed9ff9f511381} from "./DOMLayoutDelegate.module.js";
     findNextNonDisabled(key, getNext) {
-        while(key != null){
-            let item = this.collection.getItem(key);
-            if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return key;
-            key = getNext(key);
+        let nextKey = key;
+        while(nextKey != null){
+            let item = this.collection.getItem(nextKey);
+            if ((item === null || item === void 0 ? void 0 : item.type) === 'item' && !this.isDisabled(item)) return nextKey;
+            nextKey = getNext(nextKey);
         }
@@ -31,19 +32,23 @@ return null;
     getNextKey(key) {
-        key = this.collection.getKeyAfter(key);
-        return this.findNextNonDisabled(key, (key)=>this.collection.getKeyAfter(key));
+        let nextKey = key;
+        nextKey = this.collection.getKeyAfter(nextKey);
+        return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyAfter(key));
     }
     getPreviousKey(key) {
-        key = this.collection.getKeyBefore(key);
-        return this.findNextNonDisabled(key, (key)=>this.collection.getKeyBefore(key));
+        let nextKey = key;
+        nextKey = this.collection.getKeyBefore(nextKey);
+        return this.findNextNonDisabled(nextKey, (key)=>this.collection.getKeyBefore(key));
     }
     findKey(key, nextKey, shouldSkip) {
-        let itemRect = this.layoutDelegate.getItemRect(key);
-        if (!itemRect) return null;
+        let tempKey = key;
+        let itemRect = this.layoutDelegate.getItemRect(tempKey);
+        if (!itemRect || tempKey == null) return null;
         // Find the item above or below in the same column.
         let prevRect = itemRect;
         do {
-            key = nextKey(key);
-            itemRect = this.layoutDelegate.getItemRect(key);
-        }while (itemRect && shouldSkip(prevRect, itemRect));
-        return key;
+            tempKey = nextKey(tempKey);
+            if (tempKey == null) break;
+            itemRect = this.layoutDelegate.getItemRect(tempKey);
+        }while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
+        return tempKey;
     }
@@ -105,17 +110,18 @@ isSameRow(prevRect, itemRect) {
         if (!itemRect) return null;
-        if (!(0, $eak97$isScrollable)(menu)) return this.getFirstKey();
+        if (menu && !(0, $eak97$isScrollable)(menu)) return this.getFirstKey();
+        let nextKey = key;
         if (this.orientation === 'horizontal') {
             let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
-            while(itemRect && itemRect.x > pageX){
-                key = this.getKeyAbove(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.x > pageX && nextKey != null){
+                nextKey = this.getKeyAbove(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         } else {
             let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
-            while(itemRect && itemRect.y > pageY){
-                key = this.getKeyAbove(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.y > pageY && nextKey != null){
+                nextKey = this.getKeyAbove(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         }
-        return key !== null && key !== void 0 ? key : this.getFirstKey();
+        return nextKey !== null && nextKey !== void 0 ? nextKey : this.getFirstKey();
     }
@@ -126,17 +132,18 @@ getKeyPageBelow(key) {
         if (!itemRect) return null;
-        if (!(0, $eak97$isScrollable)(menu)) return this.getLastKey();
+        if (menu && !(0, $eak97$isScrollable)(menu)) return this.getLastKey();
+        let nextKey = key;
         if (this.orientation === 'horizontal') {
             let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
-            while(itemRect && itemRect.x < pageX){
-                key = this.getKeyBelow(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.x < pageX && nextKey != null){
+                nextKey = this.getKeyBelow(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         } else {
             let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
-            while(itemRect && itemRect.y < pageY){
-                key = this.getKeyBelow(key);
-                itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+            while(itemRect && itemRect.y < pageY && nextKey != null){
+                nextKey = this.getKeyBelow(nextKey);
+                itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
             }
         }
-        return key !== null && key !== void 0 ? key : this.getLastKey();
+        return nextKey !== null && nextKey !== void 0 ? nextKey : this.getLastKey();
     }
@@ -149,2 +156,3 @@ getKeyForSearch(search, fromKey) {
             let item = collection.getItem(key);
+            if (!item) return null;
             let substring = item.textValue.slice(0, search.length);
@@ -151,0 +159,0 @@ if (item.textValue && this.collator.compare(substring, search) === 0) return key;

dist/types.d.ts

@@ -1,2 +0,2 @@
-import { DOMAttributes, Key, KeyboardDelegate, FocusStrategy, RefObject, FocusableElement, LayoutDelegate, Rect, Size, Collection, Direction, DisabledBehavior, Node, Orientation } from "@react-types/shared";
+import { DOMAttributes, Key, KeyboardDelegate, FocusStrategy, RefObject, DOMProps, FocusableElement, LayoutDelegate, Rect, Size, Collection, Direction, DisabledBehavior, Node, Orientation } from "@react-types/shared";
 import { MultipleSelectionManager } from "@react-stately/selection";
@@ -104,3 +104,3 @@ export interface AriaTypeSelectOptions {
 export function useSelectableCollection(options: AriaSelectableCollectionOptions): SelectableCollectionAria;
-export interface SelectableItemOptions {
+export interface SelectableItemOptions extends DOMProps {
     /**
@@ -192,3 +192,3 @@ * An interface for reading and updating multiple selection state.
 export class DOMLayoutDelegate implements LayoutDelegate {
-    constructor(ref: RefObject<HTMLElement>);
+    constructor(ref: RefObject<HTMLElement | null>);
     getItemRect(key: Key): Rect | null;
@@ -212,13 +212,13 @@ getContentSize(): Size;
     constructor(options: ListKeyboardDelegateOptions<T>);
-    getNextKey(key: Key): Key;
-    getPreviousKey(key: Key): Key;
-    getKeyBelow(key: Key): Key;
-    getKeyAbove(key: Key): Key;
-    getKeyRightOf(key: Key): Key;
-    getKeyLeftOf(key: Key): Key;
-    getFirstKey(): Key;
-    getLastKey(): Key;
-    getKeyPageAbove(key: Key): Key;
-    getKeyPageBelow(key: Key): Key;
-    getKeyForSearch(search: string, fromKey?: Key): Key;
+    getNextKey(key: Key): Key | null;
+    getPreviousKey(key: Key): Key | null;
+    getKeyBelow(key: Key): Key | null;
+    getKeyAbove(key: Key): Key | null;
+    getKeyRightOf?(key: Key): Key | null;
+    getKeyLeftOf?(key: Key): Key | null;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getKeyPageAbove(key: Key): Key | null;
+    getKeyPageBelow(key: Key): Key | null;
+    getKeyForSearch(search: string, fromKey?: Key): Key | null;
 }
@@ -225,0 +225,0 @@ export interface AriaSelectableListOptions extends Omit<AriaSelectableCollectionOptions, 'keyboardDelegate'> {

dist/useSelectableCollection.main.js

 var $ee0bdf4faa47f2a8$exports = require("./utils.main.js");
 var $a1189052f36475e8$exports = require("./useTypeSelect.main.js");
+var $bT8Bh$reactariautils = require("@react-aria/utils");
 var $bT8Bh$reactdom = require("react-dom");
 var $bT8Bh$react = require("react");
 var $bT8Bh$reactariafocus = require("@react-aria/focus");
-var $bT8Bh$reactariautils = require("@react-aria/utils");
 var $bT8Bh$reactariainteractions = require("@react-aria/interactions");
@@ -40,2 +40,3 @@ var $bT8Bh$reactariai18n = require("@react-aria/i18n");
     let onKeyDown = (e)=>{
+        var _ref_current;
         // Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
@@ -45,6 +46,7 @@ if (e.altKey && e.key === 'Tab') e.preventDefault();
         // 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, $ee0bdf4faa47f2a8$exports.isNonContiguousSelectionModifier)(e)) {
+                    var _scrollRef_current;
                     // Set focused key and re-render synchronously to bring item into view if needed.
@@ -54,5 +56,5 @@ (0, $bT8Bh$reactdom.flushSync)(()=>{
                     });
-                    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;
@@ -92,3 +94,3 @@ }
                     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);
@@ -104,3 +106,3 @@ if (nextKey != null) {
                     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);
@@ -115,7 +117,10 @@ if (nextKey != null) {
                 if (delegate.getFirstKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
                     let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e));
                     manager.setFocusedKey(firstKey);
-                    if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
-                    else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    if (firstKey != null) {
+                        if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
+                        else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    }
                 }
@@ -125,11 +130,14 @@ break;
                 if (delegate.getLastKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
                     let lastKey = delegate.getLastKey(manager.focusedKey, (0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e));
                     manager.setFocusedKey(lastKey);
-                    if ((0, $ee0bdf4faa47f2a8$exports.isCtrlKeyPressed)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(lastKey);
-                    else if (selectOnFocus) manager.replaceSelection(lastKey);
+                    if (lastKey != null) {
+                        if ((0, $ee0bdf4faa47f2a8$exports.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);
@@ -143,3 +151,3 @@ if (nextKey != null) {
             case 'PageUp':
-                if (delegate.getKeyPageAbove) {
+                if (delegate.getKeyPageAbove && manager.focusedKey != null) {
                     let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
@@ -178,3 +186,3 @@ if (nextKey != null) {
                         });
-                        let next;
+                        let next = undefined;
                         let last;
@@ -197,6 +205,8 @@ do {
     });
-    (0, $bT8Bh$reactariautils.useEvent)(scrollRef, 'scroll', isVirtualized ? null : ()=>{
+    (0, $bT8Bh$reactariautils.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
         };
@@ -214,2 +224,3 @@ });
         if (manager.focusedKey == null) {
+            var _delegate_getLastKey, _delegate_getFirstKey;
             let navigateToFirstKey = (key)=>{
@@ -226,5 +237,5 @@ if (key != null) {
             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.
@@ -234,3 +245,3 @@ scrollRef.current.scrollTop = scrollPos.current.top;
         }
-        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.
@@ -252,9 +263,37 @@ let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
     };
+    // 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, $bT8Bh$reactariautils.useEvent)(ref, (0, $bT8Bh$reactariautils.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') {
+            var _delegate_getFirstKey, _ref_current;
+            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) (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(new CustomEvent((0, $bT8Bh$reactariautils.UPDATE_ACTIVEDESCENDANT), {
+                cancelable: true,
+                bubbles: true
+            }));
+            manager.setFocusedKey(keyToFocus);
+        }
+    });
+    (0, $bT8Bh$reactariautils.useEvent)(ref, (0, $bT8Bh$reactariautils.CLEAR_FOCUS_EVENT), !shouldUseVirtualFocus ? undefined : (e)=>{
+        e.stopPropagation();
+        manager.setFocused(false);
+        manager.setFocusedKey(null);
+    });
     const autoFocusRef = (0, $bT8Bh$react.useRef)(autoFocus);
     (0, $bT8Bh$react.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
@@ -271,3 +310,3 @@ let selectedKeys = manager.selectedKeys;
             // If no default focus key is selected, focus the collection itself.
-            if (focusedKey == null && !shouldUseVirtualFocus) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current);
+            if (focusedKey == null && !shouldUseVirtualFocus && ref.current) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current);
         }
@@ -279,3 +318,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, $bT8Bh$react.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, $bT8Bh$reactariainteractions.getInteractionModality)();
@@ -295,3 +334,3 @@ let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
         // 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, $bT8Bh$reactariafocus.focusSafely)(ref.current);
+        if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) (0, $bT8Bh$reactariafocus.focusSafely)(ref.current);
         lastFocusedKey.current = manager.focusedKey;
@@ -322,6 +361,5 @@ autoFocusRef.current = false;
     // 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 {
@@ -328,0 +366,0 @@ collectionProps: {

dist/useSelectableCollection.module.js

 import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
 import {useTypeSelect as $fb3050f43d946246$export$e32c88dfddc6e1d8} from "./useTypeSelect.module.js";
+import {useRouter as $3H3GQ$useRouter, focusWithoutScrolling as $3H3GQ$focusWithoutScrolling, useEvent as $3H3GQ$useEvent, scrollIntoViewport as $3H3GQ$scrollIntoViewport, FOCUS_EVENT as $3H3GQ$FOCUS_EVENT, UPDATE_ACTIVEDESCENDANT as $3H3GQ$UPDATE_ACTIVEDESCENDANT, 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";
@@ -34,2 +34,3 @@ import {useLocale as $3H3GQ$useLocale} from "@react-aria/i18n";
     let onKeyDown = (e)=>{
+        var _ref_current;
         // Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
@@ -39,6 +40,7 @@ if (e.altKey && e.key === 'Tab') e.preventDefault();
         // 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.
@@ -48,5 +50,5 @@ (0, $3H3GQ$flushSync)(()=>{
                     });
-                    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;
@@ -86,3 +88,3 @@ }
                     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);
@@ -98,3 +100,3 @@ if (nextKey != null) {
                     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);
@@ -109,7 +111,10 @@ if (nextKey != null) {
                 if (delegate.getFirstKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
                     let firstKey = delegate.getFirstKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(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, $feb5ffebff200149$export$16792effe837dba3)(e) && e.shiftKey && manager.selectionMode === 'multiple') manager.extendSelection(firstKey);
+                        else if (selectOnFocus) manager.replaceSelection(firstKey);
+                    }
                 }
@@ -119,11 +124,14 @@ break;
                 if (delegate.getLastKey) {
+                    if (manager.focusedKey === null && e.shiftKey) return;
                     e.preventDefault();
                     let lastKey = delegate.getLastKey(manager.focusedKey, (0, $feb5ffebff200149$export$16792effe837dba3)(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, $feb5ffebff200149$export$16792effe837dba3)(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);
@@ -137,3 +145,3 @@ if (nextKey != null) {
             case 'PageUp':
-                if (delegate.getKeyPageAbove) {
+                if (delegate.getKeyPageAbove && manager.focusedKey != null) {
                     let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
@@ -172,3 +180,3 @@ if (nextKey != null) {
                         });
-                        let next;
+                        let next = undefined;
                         let last;
@@ -191,6 +199,8 @@ do {
     });
-    (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
         };
@@ -208,2 +218,3 @@ });
         if (manager.focusedKey == null) {
+            var _delegate_getLastKey, _delegate_getFirstKey;
             let navigateToFirstKey = (key)=>{
@@ -220,5 +231,5 @@ if (key != null) {
             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.
@@ -228,3 +239,3 @@ scrollRef.current.scrollTop = scrollPos.current.top;
         }
-        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.
@@ -246,9 +257,37 @@ let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
     };
+    // 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') {
+            var _delegate_getFirstKey, _ref_current;
+            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) (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(new CustomEvent((0, $3H3GQ$UPDATE_ACTIVEDESCENDANT), {
+                cancelable: true,
+                bubbles: true
+            }));
+            manager.setFocusedKey(keyToFocus);
+        }
+    });
+    (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
@@ -265,3 +304,3 @@ let selectedKeys = manager.selectedKeys;
             // 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);
         }
@@ -273,3 +312,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
     (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)();
@@ -289,3 +328,3 @@ let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`);
         // 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;
@@ -316,6 +355,5 @@ autoFocusRef.current = false;
     // 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 {
@@ -322,0 +360,0 @@ collectionProps: {

dist/useSelectableItem.main.js

@@ -29,4 +29,5 @@ var $ee0bdf4faa47f2a8$exports = require("./utils.main.js");
 function $433b1145b0781e10$export$ecf600387e221c37(options) {
-    let { selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
+    let { id: id, selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
     let router = (0, $i4XHw$reactariautils.useRouter)();
+    id = (0, $i4XHw$reactariautils.useId)(id);
     let onSelect = (e)=>{
@@ -37,3 +38,3 @@ if (e.pointerType === 'keyboard' && (0, $ee0bdf4faa47f2a8$exports.isNonContiguousSelectionModifier)(e)) manager.toggleSelection(key);
             if (manager.isLink(key)) {
-                if (linkBehavior === 'selection') {
+                if (linkBehavior === 'selection' && ref.current) {
                     let itemProps = manager.getItemProps(key);
@@ -58,5 +59,14 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
         let isFocused = key === manager.focusedKey;
-        if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-            if (focus) focus();
-            else if (document.activeElement !== ref.current) (0, $i4XHw$reactariafocus.focusSafely)(ref.current);
+        if (isFocused && manager.isFocused) {
+            if (!shouldUseVirtualFocus) {
+                if (focus) focus();
+                else if (document.activeElement !== ref.current && ref.current) (0, $i4XHw$reactariafocus.focusSafely)(ref.current);
+            } else {
+                var _ref_current;
+                let updateActiveDescendant = new CustomEvent((0, $i4XHw$reactariautils.UPDATE_ACTIVEDESCENDANT), {
+                    cancelable: true,
+                    bubbles: true
+                });
+                (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(updateActiveDescendant);
+            }
         }
@@ -104,3 +114,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
         if (onAction) onAction();
-        if (hasLinkAction) {
+        if (hasLinkAction && ref.current) {
             let itemProps = manager.getItemProps(key);
@@ -124,3 +134,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
         };
-        // If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
+        // If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
         // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
@@ -134,6 +144,8 @@ if (!allowsDifferentPressOrigin) itemPressProps.onPress = (e)=>{
         else {
-            itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{
-                if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e);
+            itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{
+                if (e.pointerType === 'mouse' && allowsSelection) onSelect(e);
             };
-            itemPressProps.onPress = hasPrimaryAction ? performAction : null;
+            itemPressProps.onPress = hasPrimaryAction ? performAction : (e)=>{
+                if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) onSelect(e);
+            };
         }
@@ -199,3 +211,4 @@ } else {
             onDragStartCapture: onDragStartCapture,
-            onClick: onClick
+            onClick: onClick,
+            id: id
         }),
@@ -202,0 +215,0 @@ isPressed: isPressed,

dist/useSelectableItem.module.js

 import {isCtrlKeyPressed as $feb5ffebff200149$export$16792effe837dba3, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
 import {focusSafely as $581M0$focusSafely} from "@react-aria/focus";
-import {useRouter as $581M0$useRouter, openLink as $581M0$openLink, mergeProps as $581M0$mergeProps} from "@react-aria/utils";
+import {useRouter as $581M0$useRouter, useId as $581M0$useId, UPDATE_ACTIVEDESCENDANT as $581M0$UPDATE_ACTIVEDESCENDANT, openLink as $581M0$openLink, mergeProps as $581M0$mergeProps} from "@react-aria/utils";
 import {usePress as $581M0$usePress, useLongPress as $581M0$useLongPress} from "@react-aria/interactions";
@@ -23,4 +23,5 @@ import {useEffect as $581M0$useEffect, useRef as $581M0$useRef} from "react";
 function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
-    let { selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
+    let { id: id, selectionManager: manager, key: key, ref: ref, shouldSelectOnPressUp: shouldSelectOnPressUp, shouldUseVirtualFocus: shouldUseVirtualFocus, focus: focus, isDisabled: isDisabled, onAction: onAction, allowsDifferentPressOrigin: allowsDifferentPressOrigin, linkBehavior: linkBehavior = 'action' } = options;
     let router = (0, $581M0$useRouter)();
+    id = (0, $581M0$useId)(id);
     let onSelect = (e)=>{
@@ -31,3 +32,3 @@ if (e.pointerType === 'keyboard' && (0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.toggleSelection(key);
             if (manager.isLink(key)) {
-                if (linkBehavior === 'selection') {
+                if (linkBehavior === 'selection' && ref.current) {
                     let itemProps = manager.getItemProps(key);
@@ -52,5 +53,14 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
         let isFocused = key === manager.focusedKey;
-        if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-            if (focus) focus();
-            else if (document.activeElement !== ref.current) (0, $581M0$focusSafely)(ref.current);
+        if (isFocused && manager.isFocused) {
+            if (!shouldUseVirtualFocus) {
+                if (focus) focus();
+                else if (document.activeElement !== ref.current && ref.current) (0, $581M0$focusSafely)(ref.current);
+            } else {
+                var _ref_current;
+                let updateActiveDescendant = new CustomEvent((0, $581M0$UPDATE_ACTIVEDESCENDANT), {
+                    cancelable: true,
+                    bubbles: true
+                });
+                (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(updateActiveDescendant);
+            }
         }
@@ -98,3 +108,3 @@ // eslint-disable-next-line react-hooks/exhaustive-deps
         if (onAction) onAction();
-        if (hasLinkAction) {
+        if (hasLinkAction && ref.current) {
             let itemProps = manager.getItemProps(key);
@@ -118,3 +128,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
         };
-        // If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
+        // If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
         // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
@@ -128,6 +138,8 @@ if (!allowsDifferentPressOrigin) itemPressProps.onPress = (e)=>{
         else {
-            itemPressProps.onPressUp = hasPrimaryAction ? null : (e)=>{
-                if (e.pointerType !== 'keyboard' && allowsSelection) onSelect(e);
+            itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e)=>{
+                if (e.pointerType === 'mouse' && allowsSelection) onSelect(e);
             };
-            itemPressProps.onPress = hasPrimaryAction ? performAction : null;
+            itemPressProps.onPress = hasPrimaryAction ? performAction : (e)=>{
+                if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) onSelect(e);
+            };
         }
@@ -193,3 +205,4 @@ } else {
             onDragStartCapture: onDragStartCapture,
-            onClick: onClick
+            onClick: onClick,
+            id: id
         }),
@@ -196,0 +209,0 @@ isPressed: isPressed,

dist/useTypeSelect.main.js

@@ -27,3 +27,3 @@ var $3XJlT$react = require("react");
         search: '',
-        timeout: null
+        timeout: undefined
     }).current;
@@ -42,10 +42,12 @@ let onKeyDown = (e)=>{
         state.search += character;
-        // Use the delegate to find a key to focus.
-        // Prioritize items after the currently focused item, falling back to searching the whole list.
-        let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
-        // If no key found, search from the top.
-        if (key == null) key = keyboardDelegate.getKeyForSearch(state.search);
-        if (key != null) {
-            selectionManager.setFocusedKey(key);
-            if (onTypeSelect) onTypeSelect(key);
+        if (keyboardDelegate.getKeyForSearch != null) {
+            // Use the delegate to find a key to focus.
+            // Prioritize items after the currently focused item, falling back to searching the whole list.
+            let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+            // If no key found, search from the top.
+            if (key == null) key = keyboardDelegate.getKeyForSearch(state.search);
+            if (key != null) {
+                selectionManager.setFocusedKey(key);
+                if (onTypeSelect) onTypeSelect(key);
+            }
         }
@@ -61,3 +63,3 @@ clearTimeout(state.timeout);
             // other hooks in order to handle the Spacebar event.
-            onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+            onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
         }
@@ -64,0 +66,0 @@ };

dist/useTypeSelect.module.js

@@ -21,3 +21,3 @@ import {useRef as $dAE4Y$useRef} from "react";
         search: '',
-        timeout: null
+        timeout: undefined
     }).current;
@@ -36,10 +36,12 @@ let onKeyDown = (e)=>{
         state.search += character;
-        // Use the delegate to find a key to focus.
-        // Prioritize items after the currently focused item, falling back to searching the whole list.
-        let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
-        // If no key found, search from the top.
-        if (key == null) key = keyboardDelegate.getKeyForSearch(state.search);
-        if (key != null) {
-            selectionManager.setFocusedKey(key);
-            if (onTypeSelect) onTypeSelect(key);
+        if (keyboardDelegate.getKeyForSearch != null) {
+            // Use the delegate to find a key to focus.
+            // Prioritize items after the currently focused item, falling back to searching the whole list.
+            let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+            // If no key found, search from the top.
+            if (key == null) key = keyboardDelegate.getKeyForSearch(state.search);
+            if (key != null) {
+                selectionManager.setFocusedKey(key);
+                if (onTypeSelect) onTypeSelect(key);
+            }
         }
@@ -55,3 +57,3 @@ clearTimeout(state.timeout);
             // other hooks in order to handle the Spacebar event.
-            onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+            onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
         }
@@ -58,0 +60,0 @@ };

package.json

 {
   "name": "@react-aria/selection",
-  "version": "3.0.0-nightly-4f85a359f-241022",
+  "version": "3.0.0-nightly-50c7ada5d-241219",
   "description": "Spectrum UI components in React",
@@ -25,18 +25,17 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "^3.0.0-nightly-4f85a359f-241022",
-    "@react-aria/i18n": "^3.0.0-nightly-4f85a359f-241022",
-    "@react-aria/interactions": "^3.0.0-nightly-4f85a359f-241022",
-    "@react-aria/utils": "^3.0.0-nightly-4f85a359f-241022",
-    "@react-stately/selection": "^3.0.0-nightly-4f85a359f-241022",
-    "@react-types/shared": "^3.0.0-nightly-4f85a359f-241022",
+    "@react-aria/focus": "3.0.0-nightly-50c7ada5d-241219",
+    "@react-aria/i18n": "3.0.0-nightly-50c7ada5d-241219",
+    "@react-aria/interactions": "3.0.0-nightly-50c7ada5d-241219",
+    "@react-aria/utils": "3.0.0-nightly-50c7ada5d-241219",
+    "@react-stately/selection": "3.0.0-nightly-50c7ada5d-241219",
+    "@react-types/shared": "3.0.0-nightly-50c7ada5d-241219",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "stableVersion": "3.20.1"
+  }
 }

src/DOMLayoutDelegate.ts

@@ -16,5 +16,5 @@ /*
 export class DOMLayoutDelegate implements LayoutDelegate {
-  private ref: RefObject<HTMLElement>;
+  private ref: RefObject<HTMLElement | null>;
 
-  constructor(ref: RefObject<HTMLElement>) {
+  constructor(ref: RefObject<HTMLElement | null>) {
     this.ref = ref;
@@ -25,2 +25,5 @@ }
     let container = this.ref.current;
+    if (!container) {
+      return null;
+    }
     let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
@@ -45,4 +48,4 @@ if (!item) {
     return {
-      width: container.scrollWidth,
-      height: container.scrollHeight
+      width: container?.scrollWidth ?? 0,
+      height: container?.scrollHeight ?? 0
     };
@@ -54,8 +57,8 @@ }
     return {
-      x: container.scrollLeft,
-      y: container.scrollTop,
-      width: container.offsetWidth,
-      height: container.offsetHeight
+      x: container?.scrollLeft ?? 0,
+      y: container?.scrollTop ?? 0,
+      width: container?.offsetWidth ?? 0,
+      height: container?.offsetHeight ?? 0
     };
   }
 }

src/ListKeyboardDelegate.ts

@@ -77,10 +77,11 @@ /*
 
-  private findNextNonDisabled(key: Key, getNext: (key: Key) => Key | null): Key | null {
-    while (key != null) {
-      let item = this.collection.getItem(key);
+  private findNextNonDisabled(key: Key | null, getNext: (key: Key) => Key | null): Key | null {
+    let nextKey = key;
+    while (nextKey != null) {
+      let item = this.collection.getItem(nextKey);
       if (item?.type === 'item' && !this.isDisabled(item)) {
-        return key;
+        return nextKey;
       }
 
-      key = getNext(key);
+      nextKey = getNext(nextKey);
     }
@@ -92,9 +93,11 @@
   getNextKey(key: Key) {
-    key = this.collection.getKeyAfter(key);
-    return this.findNextNonDisabled(key, key => this.collection.getKeyAfter(key));
+    let nextKey: Key | null = key;
+    nextKey = this.collection.getKeyAfter(nextKey);
+    return this.findNextNonDisabled(nextKey, key => this.collection.getKeyAfter(key));
   }
 
   getPreviousKey(key: Key) {
-    key = this.collection.getKeyBefore(key);
-    return this.findNextNonDisabled(key, key => this.collection.getKeyBefore(key));
+    let nextKey: Key | null = key;
+    nextKey = this.collection.getKeyBefore(nextKey);
+    return this.findNextNonDisabled(nextKey, key => this.collection.getKeyBefore(key));
   }
@@ -104,7 +107,8 @@
     key: Key,
-    nextKey: (key: Key) => Key,
+    nextKey: (key: Key) => Key | null,
     shouldSkip: (prevRect: Rect, itemRect: Rect) => boolean
   ) {
-    let itemRect = this.layoutDelegate.getItemRect(key);
-    if (!itemRect) {
+    let tempKey: Key | null = key;
+    let itemRect = this.layoutDelegate.getItemRect(tempKey);
+    if (!itemRect || tempKey == null) {
       return null;
@@ -116,7 +120,10 @@ }
     do {
-      key = nextKey(key);
-      itemRect = this.layoutDelegate.getItemRect(key);
-    } while (itemRect && shouldSkip(prevRect, itemRect));
+      tempKey = nextKey(tempKey);
+      if (tempKey == null) {
+        break;
+      }
+      itemRect = this.layoutDelegate.getItemRect(tempKey);
+    } while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
 
-    return key;
+    return tempKey;
   }
@@ -152,3 +159,3 @@
 
-  getKeyRightOf(key: Key) {
+  getKeyRightOf?(key: Key) {
     // This is a temporary solution for CardView until we refactor useSelectableCollection.
@@ -175,3 +182,3 @@ // https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042
 
-  getKeyLeftOf(key: Key) {
+  getKeyLeftOf?(key: Key) {
     let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf';
@@ -213,12 +220,13 @@ if (this.layoutDelegate[layoutDelegateMethod]) {
 
-    if (!isScrollable(menu)) {
+    if (menu && !isScrollable(menu)) {
       return this.getFirstKey();
     }
 
+    let nextKey: Key | null = key;
     if (this.orientation === 'horizontal') {
       let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
 
-      while (itemRect && itemRect.x > pageX) {
-        key = this.getKeyAbove(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.x > pageX && nextKey != null) {
+        nextKey = this.getKeyAbove(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
@@ -228,9 +236,9 @@ } else {
 
-      while (itemRect && itemRect.y > pageY) {
-        key = this.getKeyAbove(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.y > pageY && nextKey != null) {
+        nextKey = this.getKeyAbove(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
     }
 
-    return key ?? this.getFirstKey();
+    return nextKey ?? this.getFirstKey();
   }
@@ -245,12 +253,13 @@
 
-    if (!isScrollable(menu)) {
+    if (menu && !isScrollable(menu)) {
       return this.getLastKey();
     }
 
+    let nextKey: Key | null = key;
     if (this.orientation === 'horizontal') {
       let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
 
-      while (itemRect && itemRect.x < pageX) {
-        key = this.getKeyBelow(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.x < pageX && nextKey != null) {
+        nextKey = this.getKeyBelow(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
@@ -260,9 +269,9 @@ } else {
 
-      while (itemRect && itemRect.y < pageY) {
-        key = this.getKeyBelow(key);
-        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
+      while (itemRect && itemRect.y < pageY && nextKey != null) {
+        nextKey = this.getKeyBelow(nextKey);
+        itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
       }
     }
 
-    return key ?? this.getLastKey();
+    return nextKey ?? this.getLastKey();
   }
@@ -279,2 +288,5 @@
       let item = collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       let substring = item.textValue.slice(0, search.length);
@@ -281,0 +293,0 @@ if (item.textValue && this.collator.compare(substring, search) === 0) {

src/useSelectableCollection.ts

@@ -13,2 +13,3 @@ /*
 
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling,  mergeProps, scrollIntoView, scrollIntoViewport, UPDATE_ACTIVEDESCENDANT, useEvent, useRouter} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, FocusStrategy, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
@@ -18,3 +19,2 @@ import {flushSync} from 'react-dom';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {focusWithoutScrolling, mergeProps, scrollIntoView, scrollIntoViewport, useEvent, useRouter} from '@react-aria/utils';
 import {getInteractionModality} from '@react-aria/interactions';
@@ -133,3 +133,3 @@ import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
     // for elements outside the collection (e.g. menus).
-    if (!ref.current.contains(e.target as Element)) {
+    if (!ref.current?.contains(e.target as Element)) {
       return;
@@ -146,5 +146,7 @@ }
 
-          let item = scrollRef.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
+          let item = 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);
+          }
 
@@ -201,3 +203,3 @@ return;
         if (delegate.getKeyLeftOf) {
-          let nextKey = delegate.getKeyLeftOf?.(manager.focusedKey);
+          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyLeftOf?.(manager.focusedKey) : null;
           if (nextKey == null && shouldFocusWrap) {
@@ -215,3 +217,3 @@ nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
         if (delegate.getKeyRightOf) {
-          let nextKey = delegate.getKeyRightOf?.(manager.focusedKey);
+          let nextKey: Key | undefined | null = manager.focusedKey != null ? delegate.getKeyRightOf?.(manager.focusedKey) : null;
           if (nextKey == null && shouldFocusWrap) {
@@ -229,9 +231,14 @@ nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
         if (delegate.getFirstKey) {
+          if (manager.focusedKey === null && e.shiftKey) {
+            return;
+          }
           e.preventDefault();
-          let firstKey = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e));
+          let firstKey: Key | null = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(firstKey);
-          if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
-            manager.extendSelection(firstKey);
-          } else if (selectOnFocus) {
-            manager.replaceSelection(firstKey);
+          if (firstKey != null) {
+            if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+              manager.extendSelection(firstKey);
+            } else if (selectOnFocus) {
+              manager.replaceSelection(firstKey);
+            }
           }
@@ -242,9 +249,14 @@ }
         if (delegate.getLastKey) {
+          if (manager.focusedKey === null && e.shiftKey) {
+            return;
+          }
           e.preventDefault();
           let lastKey = delegate.getLastKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(lastKey);
-          if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
-            manager.extendSelection(lastKey);
-          } else if (selectOnFocus) {
-            manager.replaceSelection(lastKey);
+          if (lastKey != null) {
+            if (isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+              manager.extendSelection(lastKey);
+            } else if (selectOnFocus) {
+              manager.replaceSelection(lastKey);
+            }
           }
@@ -254,3 +266,3 @@ }
       case 'PageDown':
-        if (delegate.getKeyPageBelow) {
+        if (delegate.getKeyPageBelow && manager.focusedKey != null) {
           let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
@@ -264,3 +276,3 @@ if (nextKey != null) {
       case 'PageUp':
-        if (delegate.getKeyPageAbove) {
+        if (delegate.getKeyPageAbove && manager.focusedKey != null) {
           let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
@@ -298,3 +310,3 @@ if (nextKey != null) {
             let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-            let next: FocusableElement;
+            let next: FocusableElement | undefined = undefined;
             let last: FocusableElement;
@@ -321,6 +333,6 @@ do {
   let scrollPos = useRef({top: 0, left: 0});
-  useEvent(scrollRef, 'scroll', isVirtualized ? null : () => {
+  useEvent(scrollRef, 'scroll', isVirtualized ? undefined : () => {
     scrollPos.current = {
-      top: scrollRef.current.scrollTop,
-      left: scrollRef.current.scrollLeft
+      top: scrollRef.current?.scrollTop ?? 0,
+      left: scrollRef.current?.scrollLeft ?? 0
     };
@@ -347,3 +359,3 @@ });
     if (manager.focusedKey == null) {
-      let navigateToFirstKey = (key: Key | undefined) => {
+      let navigateToFirstKey = (key: Key | undefined | null) => {
         if (key != null) {
@@ -361,7 +373,7 @@ manager.setFocusedKey(key);
       if (relatedTarget && (e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)) {
-        navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey());
+        navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey?.());
       } else {
-        navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey());
+        navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
       }
-    } else if (!isVirtualized) {
+    } else if (!isVirtualized && scrollRef.current) {
       // Restore the scroll position to what it was before.
@@ -372,3 +384,3 @@ scrollRef.current.scrollTop = scrollPos.current.top;
 
-    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.
@@ -397,12 +409,43 @@ let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
 
+  // 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
+  useEvent(ref, FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e: any) => {
+    let {detail} = e;
+    e.stopPropagation();
+    manager.setFocused(true);
+
+    // If the user is typing forwards, autofocus the first option in the list.
+    if (detail?.focusStrategy === 'first') {
+      let keyToFocus = delegate.getFirstKey?.() ?? null;
+      // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+      if (keyToFocus == null) {
+        ref.current?.dispatchEvent(
+          new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
+            cancelable: true,
+            bubbles: true
+          })
+        );
+      }
+
+      manager.setFocusedKey(keyToFocus);
+    }
+  });
+
+  useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e) => {
+    e.stopPropagation();
+    manager.setFocused(false);
+    manager.setFocusedKey(null);
+  });
+
   const autoFocusRef = useRef(autoFocus);
   useEffect(() => {
     if (autoFocusRef.current) {
-      let focusedKey = null;
+      let focusedKey: Key | null = null;
 
       // Check focus strategy to determine which item to focus
       if (autoFocus === 'first') {
-        focusedKey = delegate.getFirstKey();
+        focusedKey = delegate.getFirstKey?.() ?? null;
       } if (autoFocus === 'last') {
-        focusedKey = delegate.getLastKey();
+        focusedKey = delegate.getLastKey?.() ?? null;
       }
@@ -425,3 +468,3 @@
       // If no default focus key is selected, focus the collection itself.
-      if (focusedKey == null && !shouldUseVirtualFocus) {
+      if (focusedKey == null && !shouldUseVirtualFocus && ref.current) {
         focusSafely(ref.current);
@@ -436,3 +479,3 @@ }
   useEffect(() => {
-    if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef?.current) {
+    if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) {
       let modality = getInteractionModality();
@@ -457,3 +500,3 @@ let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
     // 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) {
+    if (!shouldUseVirtualFocus && manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null && ref.current) {
       focusSafely(ref.current);
@@ -496,7 +539,7 @@ }
   // 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: number;
+  let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
     tabIndex = manager.focusedKey == null ? 0 : -1;
+  } else {
+    tabIndex = -1;
   }
@@ -503,0 +546,0 @@

src/useSelectableItem.ts

@@ -13,6 +13,6 @@ /*
 
-import {DOMAttributes, FocusableElement, Key, LongPressEvent, PressEvent, RefObject} from '@react-types/shared';
+import {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
 import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
-import {mergeProps, openLink, useRouter} from '@react-aria/utils';
+import {mergeProps, openLink, UPDATE_ACTIVEDESCENDANT, useId, useRouter} from '@react-aria/utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
@@ -22,3 +22,3 @@ import {PressProps, useLongPress, usePress} from '@react-aria/interactions';
 
-export interface SelectableItemOptions {
+export interface SelectableItemOptions extends DOMProps {
   /**
@@ -113,2 +113,3 @@ * An interface for reading and updating multiple selection state.
   let {
+    id,
     selectionManager: manager,
@@ -126,3 +127,3 @@ key,
   let router = useRouter();
-
+  id = useId(id);
   let onSelect = (e: PressEvent | LongPressEvent | PointerEvent) => {
@@ -137,3 +138,3 @@ if (e.pointerType === 'keyboard' && isNonContiguousSelectionModifier(e)) {
       if (manager.isLink(key)) {
-        if (linkBehavior === 'selection') {
+        if (linkBehavior === 'selection' && ref.current) {
           let itemProps = manager.getItemProps(key);
@@ -169,7 +170,16 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
     let isFocused = key === manager.focusedKey;
-    if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-      if (focus) {
-        focus();
-      } else if (document.activeElement !== ref.current) {
-        focusSafely(ref.current);
+    if (isFocused && manager.isFocused) {
+      if (!shouldUseVirtualFocus) {
+        if (focus) {
+          focus();
+        } else if (document.activeElement !== ref.current && ref.current) {
+          focusSafely(ref.current);
+        }
+      } else {
+        let updateActiveDescendant = new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
+          cancelable: true,
+          bubbles: true
+        });
+
+        ref.current?.dispatchEvent(updateActiveDescendant);
       }
@@ -216,3 +226,3 @@ }
   let hasAction = hasPrimaryAction || hasSecondaryAction;
-  let modality = useRef(null);
+  let modality = useRef<PointerType | null>(null);
 
@@ -228,3 +238,3 @@ let longPressEnabled = hasAction && allowsSelection;
 
-    if (hasLinkAction) {
+    if (hasLinkAction && ref.current) {
       let itemProps = manager.getItemProps(key);
@@ -252,3 +262,3 @@ router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
 
-    // If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
+    // If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
     // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
@@ -268,4 +278,4 @@ if (!allowsDifferentPressOrigin) {
     } else {
-      itemPressProps.onPressUp = hasPrimaryAction ? null : (e) => {
-        if (e.pointerType !== 'keyboard' && allowsSelection) {
+      itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => {
+        if (e.pointerType === 'mouse' && allowsSelection) {
           onSelect(e);
@@ -275,3 +285,7 @@ }
 
-      itemPressProps.onPress = hasPrimaryAction ? performAction : null;
+      itemPressProps.onPress = hasPrimaryAction ? performAction : (e) => {
+        if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) {
+          onSelect(e);
+        }
+      };
     }
@@ -366,3 +380,3 @@ } else {
       longPressEnabled ? longPressProps : {},
-      {onDoubleClick, onDragStartCapture, onClick}
+      {onDoubleClick, onDragStartCapture, onClick, id}
     ),
@@ -369,0 +383,0 @@ isPressed,

src/useTypeSelect.ts

@@ -49,5 +49,5 @@ /*
   let {keyboardDelegate, selectionManager, onTypeSelect} = options;
-  let state = useRef({
+  let state = useRef<{search: string, timeout: ReturnType<typeof setTimeout> | undefined}>({
     search: '',
-    timeout: null
+    timeout: undefined
   }).current;
@@ -74,15 +74,17 @@
 
-    // Use the delegate to find a key to focus.
-    // Prioritize items after the currently focused item, falling back to searching the whole list.
-    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+    if (keyboardDelegate.getKeyForSearch != null) {
+      // Use the delegate to find a key to focus.
+      // Prioritize items after the currently focused item, falling back to searching the whole list.
+      let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
 
-    // If no key found, search from the top.
-    if (key == null) {
-      key = keyboardDelegate.getKeyForSearch(state.search);
-    }
+      // If no key found, search from the top.
+      if (key == null) {
+        key = keyboardDelegate.getKeyForSearch(state.search);
+      }
 
-    if (key != null) {
-      selectionManager.setFocusedKey(key);
-      if (onTypeSelect) {
-        onTypeSelect(key);
+      if (key != null) {
+        selectionManager.setFocusedKey(key);
+        if (onTypeSelect) {
+          onTypeSelect(key);
+        }
       }
@@ -101,3 +103,3 @@ }
       // other hooks in order to handle the Spacebar event.
-      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
     }
@@ -104,0 +106,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

406652

increased by8.85%

Lines of code

4553

increased by6.23%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@internationalized/message@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@internationalized/number@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@internationalized/string@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-aria/focus@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-aria/i18n@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-aria/interactions@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-aria/ssr@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-aria/utils@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-stately/collections@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-stately/selection@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-stately/utils@3.0.0-nightly-50c7ada5d-241219(transitive)

• + Added@react-types/shared@3.0.0-nightly-50c7ada5d-241219(transitive)

• - Removed@internationalized/date@3.6.0(transitive)

• - Removed@internationalized/message@3.1.6(transitive)

• - Removed@internationalized/number@3.6.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-aria/focus@3.19.0(transitive)

• - Removed@react-aria/i18n@3.12.4(transitive)

• - Removed@react-aria/interactions@3.22.5(transitive)

• - Removed@react-aria/ssr@3.9.7(transitive)

• - Removed@react-aria/utils@3.26.0(transitive)

• - Removed@react-stately/collections@3.12.0(transitive)

• - Removed@react-stately/selection@3.18.0(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/shared@3.26.0(transitive)

• Updated@react-aria/focus@3.0.0-nightly-50c7ada5d-241219

• Updated@react-aria/i18n@3.0.0-nightly-50c7ada5d-241219

• Updated@react-aria/interactions@3.0.0-nightly-50c7ada5d-241219

• Updated@react-aria/utils@3.0.0-nightly-50c7ada5d-241219

• Updated@react-stately/selection@3.0.0-nightly-50c7ada5d-241219

• Updated@react-types/shared@3.0.0-nightly-50c7ada5d-241219