@react-aria/selection 3.20.0 → 3.21.0

package/dist/useTypeSelect.module.js

@@ -18,7 +18,7 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
     let { keyboardDelegate: keyboardDelegate, selectionManager: selectionManager, onTypeSelect: onTypeSelect } = options;
     let state = (0, $dAE4Y$useRef)({
         search: '',
-        timeout: null
+        timeout: undefined
     }).current;
     let onKeyDown = (e)=>{
         let character = $fb3050f43d946246$var$getStringForKey(e.key);
@@ -32,14 +32,16 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
             if (!('continuePropagation' in e)) e.stopPropagation();
         }
         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);
+            }
         }
         clearTimeout(state.timeout);
         state.timeout = setTimeout(()=>{
@@ -50,7 +52,7 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
         typeSelectProps: {
             // Using a capturing listener to catch the keydown event before
             // other hooks in order to handle the Spacebar event.
-            onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+            onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
         }
     };
 }

package/dist/useTypeSelect.module.js.map

@@ -1 +1 @@
-{"mappings":";;AAAA;;;;;;;;;;CAUC;AAMD;;CAEC,GACD,MAAM,mDAA6B,MAAM,WAAW;AA2B7C,SAAS,0CAAc,OAA8B;IAC1D,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,gBAAE,YAAY,EAAC,GAAG;IACzD,IAAI,QAAQ,CAAA,GAAA,aAAK,EAAE;QACjB,QAAQ;QACR,SAAS;IACX,GAAG,OAAO;IAEV,IAAI,YAAY,CAAC;QACf,IAAI,YAAY,sCAAgB,EAAE,GAAG;QACrC,IAAI,CAAC,aAAa,EAAE,OAAO,IAAI,EAAE,OAAO,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAC5E;QAGF,8EAA8E;QAC9E,8EAA8E;QAC9E,+EAA+E;QAC/E,4EAA4E;QAC5E,IAAI,cAAc,OAAO,MAAM,MAAM,CAAC,IAAI,GAAG,MAAM,GAAG,GAAG;YACvD,EAAE,cAAc;YAChB,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;QAErB;QAEA,MAAM,MAAM,IAAI;QAEhB,2CAA2C;QAC3C,+FAA+F;QAC/F,IAAI,MAAM,iBAAiB,eAAe,CAAC,MAAM,MAAM,EAAE,iBAAiB,UAAU;QAEpF,wCAAwC;QACxC,IAAI,OAAO,MACT,MAAM,iBAAiB,eAAe,CAAC,MAAM,MAAM;QAGrD,IAAI,OAAO,MAAM;YACf,iBAAiB,aAAa,CAAC;YAC/B,IAAI,cACF,aAAa;QAEjB;QAEA,aAAa,MAAM,OAAO;QAC1B,MAAM,OAAO,GAAG,WAAW;YACzB,MAAM,MAAM,GAAG;QACjB,GAAG;IACL;IAEA,OAAO;QACL,iBAAiB;YACf,+DAA+D;YAC/D,qDAAqD;YACrD,kBAAkB,iBAAiB,eAAe,GAAG,YAAY;QACnE;IACF;AACF;AAEA,SAAS,sCAAgB,GAAW;IAClC,mDAAmD;IACnD,+DAA+D;IAC/D,6BAA6B;IAC7B,0CAA0C;IAC1C,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC,UAAU,IAAI,CAAC,MACtC,OAAO;IAGT,OAAO;AACT","sources":["packages/@react-aria/selection/src/useTypeSelect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';\nimport {KeyboardEvent, useRef} from 'react';\nimport {MultipleSelectionManager} from '@react-stately/selection';\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface AriaTypeSelectOptions {\n  /**\n   * A delegate that returns collection item keys with respect to visual layout.\n   */\n  keyboardDelegate: KeyboardDelegate,\n  /**\n   * An interface for reading and updating multiple selection state.\n   */\n  selectionManager: MultipleSelectionManager,\n  /**\n   * Called when an item is focused by typing.\n   */\n  onTypeSelect?: (key: Key) => void\n}\n\nexport interface TypeSelectAria {\n  /**\n   * Props to be spread on the owner of the options.\n   */\n  typeSelectProps: DOMAttributes\n}\n\n/**\n * Handles typeahead interactions with collections.\n */\nexport function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {\n  let {keyboardDelegate, selectionManager, onTypeSelect} = options;\n  let state = useRef({\n    search: '',\n    timeout: null\n  }).current;\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    let character = getStringForKey(e.key);\n    if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    // Do not propagate the Spacebar event if it's meant to be part of the search.\n    // When we time out, the search term becomes empty, hence the check on length.\n    // Trimming is to account for the case of pressing the Spacebar more than once,\n    // which should cycle through the selection/deselection of the focused item.\n    if (character === ' ' && state.search.trim().length > 0) {\n      e.preventDefault();\n      if (!('continuePropagation' in e)) {\n        e.stopPropagation();\n      }\n    }\n\n    state.search += character;\n\n    // Use the delegate to find a key to focus.\n    // Prioritize items after the currently focused item, falling back to searching the whole list.\n    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);\n\n    // If no key found, search from the top.\n    if (key == null) {\n      key = keyboardDelegate.getKeyForSearch(state.search);\n    }\n\n    if (key != null) {\n      selectionManager.setFocusedKey(key);\n      if (onTypeSelect) {\n        onTypeSelect(key);\n      }\n    }\n\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = '';\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  return {\n    typeSelectProps: {\n      // Using a capturing listener to catch the keydown event before\n      // other hooks in order to handle the Spacebar event.\n      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null\n    }\n  };\n}\n\nfunction getStringForKey(key: string) {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n\n  return '';\n}\n"],"names":[],"version":3,"file":"useTypeSelect.module.js.map"}
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAMD;;CAEC,GACD,MAAM,mDAA6B,MAAM,WAAW;AA2B7C,SAAS,0CAAc,OAA8B;IAC1D,IAAI,oBAAC,gBAAgB,oBAAE,gBAAgB,gBAAE,YAAY,EAAC,GAAG;IACzD,IAAI,QAAQ,CAAA,GAAA,aAAK,EAAwE;QACvF,QAAQ;QACR,SAAS;IACX,GAAG,OAAO;IAEV,IAAI,YAAY,CAAC;QACf,IAAI,YAAY,sCAAgB,EAAE,GAAG;QACrC,IAAI,CAAC,aAAa,EAAE,OAAO,IAAI,EAAE,OAAO,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAC5E;QAGF,8EAA8E;QAC9E,8EAA8E;QAC9E,+EAA+E;QAC/E,4EAA4E;QAC5E,IAAI,cAAc,OAAO,MAAM,MAAM,CAAC,IAAI,GAAG,MAAM,GAAG,GAAG;YACvD,EAAE,cAAc;YAChB,IAAI,CAAE,CAAA,yBAAyB,CAAA,GAC7B,EAAE,eAAe;QAErB;QAEA,MAAM,MAAM,IAAI;QAEhB,IAAI,iBAAiB,eAAe,IAAI,MAAM;YAC5C,2CAA2C;YAC3C,+FAA+F;YAC/F,IAAI,MAAM,iBAAiB,eAAe,CAAC,MAAM,MAAM,EAAE,iBAAiB,UAAU;YAEpF,wCAAwC;YACxC,IAAI,OAAO,MACT,MAAM,iBAAiB,eAAe,CAAC,MAAM,MAAM;YAGrD,IAAI,OAAO,MAAM;gBACf,iBAAiB,aAAa,CAAC;gBAC/B,IAAI,cACF,aAAa;YAEjB;QACF;QAEA,aAAa,MAAM,OAAO;QAC1B,MAAM,OAAO,GAAG,WAAW;YACzB,MAAM,MAAM,GAAG;QACjB,GAAG;IACL;IAEA,OAAO;QACL,iBAAiB;YACf,+DAA+D;YAC/D,qDAAqD;YACrD,kBAAkB,iBAAiB,eAAe,GAAG,YAAY;QACnE;IACF;AACF;AAEA,SAAS,sCAAgB,GAAW;IAClC,mDAAmD;IACnD,+DAA+D;IAC/D,6BAA6B;IAC7B,0CAA0C;IAC1C,IAAI,IAAI,MAAM,KAAK,KAAK,CAAC,UAAU,IAAI,CAAC,MACtC,OAAO;IAGT,OAAO;AACT","sources":["packages/@react-aria/selection/src/useTypeSelect.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, Key, KeyboardDelegate} from '@react-types/shared';\nimport {KeyboardEvent, useRef} from 'react';\nimport {MultipleSelectionManager} from '@react-stately/selection';\n\n/**\n * Controls how long to wait before clearing the typeahead buffer.\n */\nconst TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000; // 1 second\n\nexport interface AriaTypeSelectOptions {\n  /**\n   * A delegate that returns collection item keys with respect to visual layout.\n   */\n  keyboardDelegate: KeyboardDelegate,\n  /**\n   * An interface for reading and updating multiple selection state.\n   */\n  selectionManager: MultipleSelectionManager,\n  /**\n   * Called when an item is focused by typing.\n   */\n  onTypeSelect?: (key: Key) => void\n}\n\nexport interface TypeSelectAria {\n  /**\n   * Props to be spread on the owner of the options.\n   */\n  typeSelectProps: DOMAttributes\n}\n\n/**\n * Handles typeahead interactions with collections.\n */\nexport function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {\n  let {keyboardDelegate, selectionManager, onTypeSelect} = options;\n  let state = useRef<{search: string, timeout: ReturnType<typeof setTimeout> | undefined}>({\n    search: '',\n    timeout: undefined\n  }).current;\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    let character = getStringForKey(e.key);\n    if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target as HTMLElement)) {\n      return;\n    }\n\n    // Do not propagate the Spacebar event if it's meant to be part of the search.\n    // When we time out, the search term becomes empty, hence the check on length.\n    // Trimming is to account for the case of pressing the Spacebar more than once,\n    // which should cycle through the selection/deselection of the focused item.\n    if (character === ' ' && state.search.trim().length > 0) {\n      e.preventDefault();\n      if (!('continuePropagation' in e)) {\n        e.stopPropagation();\n      }\n    }\n\n    state.search += character;\n\n    if (keyboardDelegate.getKeyForSearch != null) {\n      // Use the delegate to find a key to focus.\n      // Prioritize items after the currently focused item, falling back to searching the whole list.\n      let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);\n\n      // If no key found, search from the top.\n      if (key == null) {\n        key = keyboardDelegate.getKeyForSearch(state.search);\n      }\n\n      if (key != null) {\n        selectionManager.setFocusedKey(key);\n        if (onTypeSelect) {\n          onTypeSelect(key);\n        }\n      }\n    }\n\n    clearTimeout(state.timeout);\n    state.timeout = setTimeout(() => {\n      state.search = '';\n    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);\n  };\n\n  return {\n    typeSelectProps: {\n      // Using a capturing listener to catch the keydown event before\n      // other hooks in order to handle the Spacebar event.\n      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined\n    }\n  };\n}\n\nfunction getStringForKey(key: string) {\n  // If the key is of length 1, it is an ASCII value.\n  // Otherwise, if there are no ASCII characters in the key name,\n  // it is a Unicode character.\n  // See https://www.w3.org/TR/uievents-key/\n  if (key.length === 1 || !/^[A-Z]/i.test(key)) {\n    return key;\n  }\n\n  return '';\n}\n"],"names":[],"version":3,"file":"useTypeSelect.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/selection",
-  "version": "3.20.0",
+  "version": "3.21.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,19 +22,20 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.18.3",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.3",
-    "@react-aria/utils": "^3.25.3",
-    "@react-stately/selection": "^3.17.0",
-    "@react-types/shared": "^3.25.0",
+    "@react-aria/focus": "^3.19.0",
+    "@react-aria/i18n": "^3.12.4",
+    "@react-aria/interactions": "^3.22.5",
+    "@react-aria/utils": "^3.26.0",
+    "@react-stately/selection": "^3.18.0",
+    "@react-types/shared": "^3.26.0",
     "@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"
-  }
-}
+  },
+  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+}

package/src/DOMLayoutDelegate.ts

@@ -13,14 +13,17 @@
 import {Key, LayoutDelegate, Rect, RefObject, Size} from '@react-types/shared';
 
 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;
   }
 
   getItemRect(key: Key): Rect | null {
     let container = this.ref.current;
+    if (!container) {
+      return null;
+    }
     let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
     if (!item) {
       return null;
@@ -40,18 +43,18 @@ export class DOMLayoutDelegate implements LayoutDelegate {
   getContentSize(): Size {
     let container = this.ref.current;
     return {
-      width: container.scrollWidth,
-      height: container.scrollHeight
+      width: container?.scrollWidth ?? 0,
+      height: container?.scrollHeight ?? 0
     };
   }
 
   getVisibleRect(): Rect {
     let container = this.ref.current;
     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
     };
   }
 }

package/src/ListKeyboardDelegate.ts

@@ -74,47 +74,54 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return this.disabledBehavior === 'all' && (item.props?.isDisabled || this.disabledKeys.has(item.key));
   }
 
-  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);
     }
 
     return null;
   }
 
   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));
   }
 
   private findKey(
     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;
     }
 
     // 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));
+      tempKey = nextKey(tempKey);
+      if (tempKey == null) {
+        break;
+      }
+      itemRect = this.layoutDelegate.getItemRect(tempKey);
+    } while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
 
-    return key;
+    return tempKey;
   }
 
   private isSameRow(prevRect: Rect, itemRect: Rect) {
@@ -145,7 +152,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return right ? this.getPreviousKey(key) : this.getNextKey(key);
   }
 
-  getKeyRightOf(key: Key) {
+  getKeyRightOf?(key: Key) {
     // This is a temporary solution for CardView until we refactor useSelectableCollection.
     // https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042
     let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyRightOf' : 'getKeyLeftOf';
@@ -167,7 +174,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return null;
   }
 
-  getKeyLeftOf(key: Key) {
+  getKeyLeftOf?(key: Key) {
     let layoutDelegateMethod = this.direction === 'ltr' ? 'getKeyLeftOf' : 'getKeyRightOf';
     if (this.layoutDelegate[layoutDelegateMethod]) {
       key = this.layoutDelegate[layoutDelegateMethod](key);
@@ -204,27 +211,28 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       return null;
     }
 
-    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);
       }
     } 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 ?? this.getFirstKey();
+    return nextKey ?? this.getFirstKey();
   }
 
   getKeyPageBelow(key: Key) {
@@ -234,27 +242,28 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       return null;
     }
 
-    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);
       }
     } 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 ?? this.getLastKey();
+    return nextKey ?? this.getLastKey();
   }
 
   getKeyForSearch(search: string, fromKey?: Key) {
@@ -266,6 +275,9 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     let key = fromKey || this.getFirstKey();
     while (key != null) {
       let item = collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       let substring = item.textValue.slice(0, search.length);
       if (item.textValue && this.collator.compare(substring, search) === 0) {
         return key;

package/src/useSelectableCollection.ts

@@ -128,7 +128,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
     // Keyboard events bubble through portals. Don't handle keyboard events
     // 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;
     }
 
@@ -140,9 +140,11 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
             manager.setFocusedKey(key, childFocus);
           });
 
-          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);
+          }
 
           return;
         }
@@ -194,7 +196,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'ArrowLeft': {
         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) {
             nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
           }
@@ -207,7 +209,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'ArrowRight': {
         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) {
             nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
           }
@@ -221,12 +223,14 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       case 'Home':
         if (delegate.getFirstKey) {
           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);
+            }
           }
         }
         break;
@@ -235,15 +239,17 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
           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);
+            }
           }
         }
         break;
       case 'PageDown':
-        if (delegate.getKeyPageBelow) {
+        if (delegate.getKeyPageBelow && manager.focusedKey != null) {
           let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
           if (nextKey != null) {
             e.preventDefault();
@@ -252,7 +258,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
         }
         break;
       case 'PageUp':
-        if (delegate.getKeyPageAbove) {
+        if (delegate.getKeyPageAbove && manager.focusedKey != null) {
           let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
           if (nextKey != null) {
             e.preventDefault();
@@ -285,7 +291,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
             ref.current.focus();
           } else {
             let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-            let next: FocusableElement;
+            let next: FocusableElement | undefined = undefined;
             let last: FocusableElement;
             do {
               last = walker.lastChild() as FocusableElement;
@@ -307,10 +313,10 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // Store the scroll position so we can restore it later.
   /// TODO: should this happen all the time??
   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
     };
   });
 
@@ -332,7 +338,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     manager.setFocused(true);
 
     if (manager.focusedKey == null) {
-      let navigateToFirstKey = (key: Key | undefined) => {
+      let navigateToFirstKey = (key: Key | undefined | null) => {
         if (key != null) {
           manager.setFocusedKey(key);
           if (selectOnFocus) {
@@ -345,17 +351,17 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       // and either focus the first or last item accordingly.
       let relatedTarget = e.relatedTarget as Element;
       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.
       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())}"]`) as HTMLElement;
       if (element) {
@@ -382,13 +388,13 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   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;
       }
 
       // If there are any selected keys, make the first one the new focus target
@@ -406,7 +412,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       manager.setFocusedKey(focusedKey);
 
       // If no default focus key is selected, focus the collection itself.
-      if (focusedKey == null && !shouldUseVirtualFocus) {
+      if (focusedKey == null && !shouldUseVirtualFocus && ref.current) {
         focusSafely(ref.current);
       }
     }
@@ -416,7 +422,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // Scroll the focused element into view when the focusedKey changes.
   let lastFocusedKey = useRef(manager.focusedKey);
   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();
       let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
       if (!element) {
@@ -436,7 +442,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     }
 
     // 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);
     }
 
@@ -476,7 +482,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   // 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;
   }

package/src/useSelectableItem.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, Key, LongPressEvent, PressEvent, RefObject} from '@react-types/shared';
+import {DOMAttributes, 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';
@@ -130,7 +130,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       }
 
       if (manager.isLink(key)) {
-        if (linkBehavior === 'selection') {
+        if (linkBehavior === 'selection' && ref.current) {
           let itemProps = manager.getItemProps(key);
           router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
           // Always set selected keys back to what they were so that select and combobox close.
@@ -164,7 +164,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
       if (focus) {
         focus();
-      } else if (document.activeElement !== ref.current) {
+      } else if (document.activeElement !== ref.current && ref.current) {
         focusSafely(ref.current);
       }
     }
@@ -207,7 +207,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   );
   let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';
   let hasAction = hasPrimaryAction || hasSecondaryAction;
-  let modality = useRef(null);
+  let modality = useRef<PointerType | null>(null);
 
   let longPressEnabled = hasAction && allowsSelection;
   let longPressEnabledOnPressStart = useRef(false);
@@ -218,7 +218,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       onAction();
     }
 
-    if (hasLinkAction) {
+    if (hasLinkAction && ref.current) {
       let itemProps = manager.getItemProps(key);
       router.open(ref.current, e, itemProps.href, itemProps.routerOptions);
     }
@@ -256,13 +256,13 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
         }
       };
     } else {
-      itemPressProps.onPressUp = hasPrimaryAction ? null : (e) => {
+      itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => {
         if (e.pointerType !== 'keyboard' && allowsSelection) {
           onSelect(e);
         }
       };
 
-      itemPressProps.onPress = hasPrimaryAction ? performAction : null;
+      itemPressProps.onPress = hasPrimaryAction ? performAction : undefined;
     }
   } else {
     itemPressProps.onPressStart = (e) => {

package/src/useTypeSelect.ts

@@ -46,9 +46,9 @@ export interface TypeSelectAria {
  */
 export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
   let {keyboardDelegate, selectionManager, onTypeSelect} = options;
-  let state = useRef({
+  let state = useRef<{search: string, timeout: ReturnType<typeof setTimeout> | undefined}>({
     search: '',
-    timeout: null
+    timeout: undefined
   }).current;
 
   let onKeyDown = (e: KeyboardEvent) => {
@@ -70,19 +70,21 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
 
     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 (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);
+        }
       }
     }
 
@@ -96,7 +98,7 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
     typeSelectProps: {
       // Using a capturing listener to catch the keydown event before
       // other hooks in order to handle the Spacebar event.
-      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : undefined
     }
   };
 }