@react-aria/grid 3.10.5 → 3.11.1

package/dist/zh-TW.module.js.map

@@ -1 +1 @@
-{"mappings":";AAAA,4BAAiB;IAAG,kBAAkB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,IAAI,CAAC,gBAAE,CAAC;IAClE,qBAAqB,CAAC,gFAAU,CAAC;IACjC,UAAU,CAAC,gBAAE,CAAC;IACd,eAAe,CAAC,gEAAQ,CAAC;IACzB,iBAAiB,CAAC,MAAM,YAAc,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,MAAM,CAAC,wDAAO,CAAC;YAAE,KAAK,IAAM,CAAC,yBAAI,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yBAAI,CAAC;YAAE,OAAO,IAAM,CAAC,yBAAI,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yBAAI,CAAC;QAAA,GAAG,QAAC,CAAC;IACzM,gBAAgB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,IAAI,CAAC,gBAAE,CAAC;AAChD","sources":["packages/@react-aria/grid/intl/zh-TW.json"],"sourcesContent":["{\n  \"deselectedItem\": \"未選取「{item}」。\",\n  \"longPressToSelect\": \"長按以進入選擇模式。\",\n  \"select\": \"選取\",\n  \"selectedAll\": \"已選取所有項目。\",\n  \"selectedCount\": \"{count, plural, =0 {未選取任何項目} one {已選取 # 個項目} other {已選取 # 個項目}}。\",\n  \"selectedItem\": \"已選取「{item}」。\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}
+{"mappings":";AAAA,4BAAiB;IAAG,kBAAkB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,IAAI,CAAC,gBAAE,CAAC;IAClE,qBAAqB,CAAC,gFAAU,CAAC;IACjC,UAAU,CAAC,gBAAE,CAAC;IACd,eAAe,CAAC,gEAAQ,CAAC;IACzB,iBAAiB,CAAC,MAAM,YAAc,GAAG,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,MAAM,CAAC,wDAAO,CAAC;YAAE,KAAK,IAAM,CAAC,yBAAI,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yBAAI,CAAC;YAAE,OAAO,IAAM,CAAC,yBAAI,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yBAAI,CAAC;QAAA,GAAG,QAAC,CAAC;IACzM,gBAAgB,CAAC,OAAS,CAAC,gCAAI,EAAE,KAAK,IAAI,CAAC,gBAAE,CAAC;AAChD","sources":["packages/@react-aria/grid/intl/zh-TW.json"],"sourcesContent":["{\n  \"deselectedItem\": \"未選取「{item}」。\",\n  \"longPressToSelect\": \"長按以進入選擇模式。\",\n  \"select\": \"選取\",\n  \"selectedAll\": \"已選取所有項目。\",\n  \"selectedCount\": \"{count, plural, =0 {未選取任何項目} one {已選取 # 個項目} other {已選取 # 個項目}}。\",\n  \"selectedItem\": \"已選取「{item}」。\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/grid",
-  "version": "3.10.5",
+  "version": "3.11.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,26 +22,26 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.18.4",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.4",
-    "@react-aria/live-announcer": "^3.4.0",
-    "@react-aria/selection": "^3.20.1",
-    "@react-aria/utils": "^3.25.3",
-    "@react-stately/collections": "^3.11.0",
-    "@react-stately/grid": "^3.9.3",
-    "@react-stately/selection": "^3.17.0",
-    "@react-types/checkbox": "^3.8.4",
-    "@react-types/grid": "^3.2.9",
-    "@react-types/shared": "^3.25.0",
+    "@react-aria/focus": "^3.19.1",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/live-announcer": "^3.4.1",
+    "@react-aria/selection": "^3.22.0",
+    "@react-aria/utils": "^3.27.0",
+    "@react-stately/collections": "^3.12.1",
+    "@react-stately/grid": "^3.10.1",
+    "@react-stately/selection": "^3.19.0",
+    "@react-types/checkbox": "^3.9.1",
+    "@react-types/grid": "^3.2.11",
+    "@react-types/shared": "^3.27.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": "8e0a28d188cdbdbd2b32296fa034b1b02ddde229"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/GridKeyboardDelegate.ts

@@ -33,7 +33,7 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
   protected disabledKeys: Set<Key>;
   protected disabledBehavior: DisabledBehavior;
   protected direction: Direction;
-  protected collator: Intl.Collator;
+  protected collator: Intl.Collator | undefined;
   protected layoutDelegate: LayoutDelegate;
   protected focusMode;
 
@@ -43,7 +43,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
     this.disabledBehavior = options.disabledBehavior || 'all';
     this.direction = options.direction;
     this.collator = options.collator;
-    this.layoutDelegate = options.layoutDelegate || (options.layout ? new DeprecatedLayoutDelegate(options.layout) : new DOMLayoutDelegate(options.ref));
+    if (!options.layout && !options.ref) {
+      throw new Error('Either a layout or a ref must be specified.');
+    }
+    this.layoutDelegate = options.layoutDelegate || (options.layout ? new DeprecatedLayoutDelegate(options.layout) : new DOMLayoutDelegate(options.ref!));
     this.focusMode = options.focusMode || 'row';
   }
 
@@ -66,12 +69,16 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     while (key != null) {
       let item = this.collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       if (!this.isDisabled(item) && (!pred || pred(item))) {
         return key;
       }
 
       key = this.collection.getKeyBefore(key);
     }
+    return null;
   }
 
   protected findNextKey(fromKey?: Key, pred?: (item: Node<T>) => boolean) {
@@ -81,23 +88,34 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     while (key != null) {
       let item = this.collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       if (!this.isDisabled(item) && (!pred || pred(item))) {
         return key;
       }
 
       key = this.collection.getKeyAfter(key);
+      if (key == null) {
+        return null;
+      }
     }
+    return null;
   }
 
-  getKeyBelow(key: Key) {
+  getKeyBelow(fromKey: Key) {
+    let key: Key | null = fromKey;
     let startItem = this.collection.getItem(key);
     if (!startItem) {
-      return;
+      return null;
     }
 
     // If focus was on a cell, start searching from the parent row
     if (this.isCell(startItem)) {
-      key = startItem.parentKey;
+      key = startItem.parentKey ?? null;
+    }
+    if (key == null) {
+      return null;
     }
 
     // Find the next item
@@ -106,7 +124,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
       // If focus was on a cell, focus the cell with the same index in the next row.
       if (this.isCell(startItem)) {
         let item = this.collection.getItem(key);
-        return getNthItem(getChildNodes(item, this.collection), startItem.index).key;
+        if (!item) {
+          return null;
+        }
+        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key ?? null;
       }
 
       // Otherwise, focus the next row
@@ -114,17 +135,22 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
         return key;
       }
     }
+    return null;
   }
 
-  getKeyAbove(key: Key) {
+  getKeyAbove(fromKey: Key) {
+    let key: Key | null = fromKey;
     let startItem = this.collection.getItem(key);
     if (!startItem) {
-      return;
+      return null;
     }
 
     // If focus is on a cell, start searching from the parent row
     if (this.isCell(startItem)) {
-      key = startItem.parentKey;
+      key = startItem.parentKey ?? null;
+    }
+    if (key == null) {
+      return null;
     }
 
     // Find the previous item
@@ -133,7 +159,10 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
       // If focus was on a cell, focus the cell with the same index in the previous row.
       if (this.isCell(startItem)) {
         let item = this.collection.getItem(key);
-        return getNthItem(getChildNodes(item, this.collection), startItem.index).key;
+        if (!item) {
+          return null;
+        }
+        return getNthItem(getChildNodes(item, this.collection), startItem.index ?? 0)?.key || null;
       }
 
       // Otherwise, focus the previous row
@@ -141,141 +170,165 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
         return key;
       }
     }
+    return null;
   }
 
   getKeyRightOf(key: Key) {
     let item = this.collection.getItem(key);
     if (!item) {
-      return;
+      return null;
     }
 
     // If focus is on a row, focus the first child cell.
     if (this.isRow(item)) {
       let children = getChildNodes(item, this.collection);
-      return this.direction === 'rtl'
-        ? getLastItem(children).key
-        : getFirstItem(children).key;
+      return (this.direction === 'rtl'
+        ? getLastItem(children)?.key
+        : getFirstItem(children)?.key) ?? null;
     }
 
     // If focus is on a cell, focus the next cell if any,
     // otherwise focus the parent row.
-    if (this.isCell(item)) {
+    if (this.isCell(item) && item.parentKey != null) {
       let parent = this.collection.getItem(item.parentKey);
+      if (!parent) {
+        return null;
+      }
       let children = getChildNodes(parent, this.collection);
-      let next = this.direction === 'rtl'
+      let next = (this.direction === 'rtl'
         ? getNthItem(children, item.index - 1)
-        : getNthItem(children, item.index + 1);
+        : getNthItem(children, item.index + 1)) ?? null;
 
       if (next) {
-        return next.key;
+        return next.key ?? null;
       }
 
       // focus row only if focusMode is set to row
       if (this.focusMode === 'row') {
-        return item.parentKey;
+        return item.parentKey ?? null;
       }
 
-      return this.direction === 'rtl' ? this.getFirstKey(key) : this.getLastKey(key);
+      return (this.direction === 'rtl' ? this.getFirstKey(key) : this.getLastKey(key)) ?? null;
     }
+    return null;
   }
 
   getKeyLeftOf(key: Key) {
     let item = this.collection.getItem(key);
     if (!item) {
-      return;
+      return null;
     }
 
     // If focus is on a row, focus the last child cell.
     if (this.isRow(item)) {
       let children = getChildNodes(item, this.collection);
-      return this.direction === 'rtl'
-        ? getFirstItem(children).key
-        : getLastItem(children).key;
+      return (this.direction === 'rtl'
+        ? getFirstItem(children)?.key
+        : getLastItem(children)?.key) ?? null;
     }
 
     // If focus is on a cell, focus the previous cell if any,
     // otherwise focus the parent row.
-    if (this.isCell(item)) {
+    if (this.isCell(item) && item.parentKey != null) {
       let parent = this.collection.getItem(item.parentKey);
+      if (!parent) {
+        return null;
+      }
       let children = getChildNodes(parent, this.collection);
-      let prev = this.direction === 'rtl'
+      let prev = (this.direction === 'rtl'
         ? getNthItem(children, item.index + 1)
-        : getNthItem(children, item.index - 1);
+        : getNthItem(children, item.index - 1)) ?? null;
 
       if (prev) {
-        return prev.key;
+        return prev.key ?? null;
       }
 
       // focus row only if focusMode is set to row
       if (this.focusMode === 'row') {
-        return item.parentKey;
+        return item.parentKey ?? null;
       }
 
-      return this.direction === 'rtl' ? this.getLastKey(key) : this.getFirstKey(key);
+      return (this.direction === 'rtl' ? this.getLastKey(key) : this.getFirstKey(key)) ?? null;
     }
+    return null;
   }
 
-  getFirstKey(key?: Key, global?: boolean) {
-    let item: Node<T>;
+  getFirstKey(fromKey?: Key, global?: boolean) {
+    let key: Key | null = fromKey ?? null;
+    let item: Node<T> | undefined | null;
     if (key != null) {
       item = this.collection.getItem(key);
       if (!item) {
-        return;
+        return null;
       }
 
       // If global flag is not set, and a cell is currently focused,
       // move focus to the first cell in the parent row.
-      if (this.isCell(item) && !global) {
+      if (this.isCell(item) && !global && item.parentKey != null) {
         let parent = this.collection.getItem(item.parentKey);
-        return getFirstItem(getChildNodes(parent, this.collection)).key;
+        if (!parent) {
+          return null;
+        }
+        return getFirstItem(getChildNodes(parent, this.collection))?.key ?? null;
       }
     }
 
     // Find the first row
-    key = this.findNextKey(null, item => item.type === 'item');
+    key = this.findNextKey(undefined, item => item.type === 'item');
 
     // If global flag is set (or if focus mode is cell), focus the first cell in the first row.
-    if ((key != null && item && this.isCell(item) && global) || this.focusMode === 'cell') {
+    if (key != null && ((item && this.isCell(item) && global) || this.focusMode === 'cell')) {
       let item = this.collection.getItem(key);
-      key = getFirstItem(getChildNodes(item, this.collection)).key;
+      if (!item) {
+        return null;
+      }
+      key = getFirstItem(getChildNodes(item, this.collection))?.key ?? null;
     }
 
     // Otherwise, focus the row itself.
     return key;
   }
 
-  getLastKey(key?: Key, global?: boolean) {
-    let item: Node<T>;
+  getLastKey(fromKey?: Key, global?: boolean) {
+    let key: Key | null = fromKey ?? null;
+    let item: Node<T> | undefined | null;
     if (key != null) {
       item = this.collection.getItem(key);
       if (!item) {
-        return;
+        return null;
       }
 
       // If global flag is not set, and a cell is currently focused,
       // move focus to the last cell in the parent row.
-      if (this.isCell(item) && !global) {
+      if (this.isCell(item) && !global && item.parentKey != null) {
         let parent = this.collection.getItem(item.parentKey);
+        if (!parent) {
+          return null;
+        }
         let children = getChildNodes(parent, this.collection);
-        return getLastItem(children).key;
+        return getLastItem(children)?.key ?? null;
       }
     }
 
     // Find the last row
-    key = this.findPreviousKey(null, item => item.type === 'item');
+    key = this.findPreviousKey(undefined, item => item.type === 'item');
 
     // If global flag is set (or if focus mode is cell), focus the last cell in the last row.
-    if ((key != null && item && this.isCell(item) && global) || this.focusMode === 'cell') {
+    if (key != null && ((item && this.isCell(item) && global) || this.focusMode === 'cell')) {
       let item = this.collection.getItem(key);
+      if (!item) {
+        return null;
+      }
       let children = getChildNodes(item, this.collection);
-      key = getLastItem(children).key;
+      key = getLastItem(children)?.key ?? null;
     }
 
     // Otherwise, focus the row itself.
     return key;
   }
 
-  getKeyPageAbove(key: Key) {
+  getKeyPageAbove(fromKey: Key) {
+    let key: Key | null = fromKey;
     let itemRect = this.layoutDelegate.getItemRect(key);
     if (!itemRect) {
       return null;
@@ -283,15 +336,19 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
 
     let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
 
-    while (itemRect && itemRect.y > pageY) {
-      key = this.getKeyAbove(key);
+    while (itemRect && itemRect.y > pageY && key != null) {
+      key = this.getKeyAbove(key) ?? null;
+      if (key == null) {
+        break;
+      }
       itemRect = this.layoutDelegate.getItemRect(key);
     }
 
     return key;
   }
 
-  getKeyPageBelow(key: Key) {
+  getKeyPageBelow(fromKey: Key) {
+    let key: Key | null = fromKey;
     let itemRect = this.layoutDelegate.getItemRect(key);
 
     if (!itemRect) {
@@ -316,29 +373,39 @@ export class GridKeyboardDelegate<T, C extends GridCollection<T>> implements Key
   }
 
   getKeyForSearch(search: string, fromKey?: Key) {
+    let key: Key | null = fromKey ?? null;
     if (!this.collator) {
       return null;
     }
 
     let collection = this.collection;
-    let key = fromKey ?? this.getFirstKey();
+    key = fromKey ?? this.getFirstKey();
+    if (key == null) {
+      return null;
+    }
 
     // If the starting key is a cell, search from its parent row.
     let startItem = collection.getItem(key);
+    if (!startItem) {
+      return null;
+    }
     if (startItem.type === 'cell') {
-      key = startItem.parentKey;
+      key = startItem.parentKey ?? null;
     }
 
     let hasWrapped = false;
     while (key != null) {
       let item = collection.getItem(key);
+      if (!item) {
+        return null;
+      }
 
       // check row text value for match
       if (item.textValue) {
         let substring = item.textValue.slice(0, search.length);
         if (this.collator.compare(substring, search) === 0) {
           if (this.isRow(item) && this.focusMode === 'cell') {
-            return getFirstItem(getChildNodes(item, this.collection)).key;
+            return getFirstItem(getChildNodes(item, this.collection))?.key ?? null;
           }
 
           return item.key;

package/src/useGrid.ts

@@ -149,7 +149,7 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     },
     state.isKeyboardNavigationDisabled ? navDisabledHandlers : collectionProps,
     // If collection is empty, make sure the grid is tabbable unless there is a child tabbable element.
-    state.collection.size === 0 && {tabIndex: hasTabbableChild ? -1 : 0},
+    (state.collection.size === 0 && {tabIndex: hasTabbableChild ? -1 : 0}) || undefined,
     descriptionProps
   );
 

package/src/useGridCell.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, Key, RefObject} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {getScrollParent, mergeProps, scrollIntoViewport} from '@react-aria/utils';
 import {GridCollection, GridNode} from '@react-types/grid';
@@ -60,36 +60,38 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   } = props;
 
   let {direction} = useLocale();
-  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state);
+  let {keyboardDelegate, actions: {onCellAction}} = gridMap.get(state)!;
 
   // We need to track the key of the item at the time it was last focused so that we force
   // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
-  let keyWhenFocused = useRef(null);
+  let keyWhenFocused = useRef<Key | null>(null);
 
   // Handles focusing the cell. If there is a focusable child,
   // it is focused, otherwise the cell itself is focused.
   let focus = () => {
-    let treeWalker = getFocusableTreeWalker(ref.current);
-    if (focusMode === 'child') {
-      // If focus is already on a focusable child within the cell, early return so we don't shift focus
-      if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
-        return;
-      }
+    if (ref.current) {
+      let treeWalker = getFocusableTreeWalker(ref.current);
+      if (focusMode === 'child') {
+        // If focus is already on a focusable child within the cell, early return so we don't shift focus
+        if (ref.current.contains(document.activeElement) && ref.current !== document.activeElement) {
+          return;
+        }
 
-      let focusable = state.selectionManager.childFocusStrategy === 'last'
-        ? last(treeWalker)
-        : treeWalker.firstChild() as FocusableElement;
-      if (focusable) {
-        focusSafely(focusable);
-        return;
+        let focusable = state.selectionManager.childFocusStrategy === 'last'
+          ? last(treeWalker)
+          : treeWalker.firstChild() as FocusableElement;
+        if (focusable) {
+          focusSafely(focusable);
+          return;
+        }
       }
-    }
 
-    if (
-      (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
-      !ref.current.contains(document.activeElement)
-    ) {
-      focusSafely(ref.current);
+      if (
+        (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
+        !ref.current.contains(document.activeElement)
+      ) {
+        focusSafely(ref.current);
+      }
     }
   };
 
@@ -105,7 +107,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
   });
 
   let onKeyDownCapture = (e: ReactKeyboardEvent) => {
-    if (!e.currentTarget.contains(e.target as Element) || state.isKeyboardNavigationDisabled) {
+    if (!e.currentTarget.contains(e.target as Element) || state.isKeyboardNavigationDisabled || !ref.current || !document.activeElement) {
       return;
     }
 
@@ -115,7 +117,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
     switch (e.key) {
       case 'ArrowLeft': {
         // Find the next focusable element within the cell.
-        let focusable = direction === 'rtl'
+        let focusable: FocusableElement | null = direction === 'rtl'
           ? walker.nextNode() as FocusableElement
           : walker.previousNode() as FocusableElement;
 
@@ -135,12 +137,12 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           // of this one, only one column, and the grid doesn't focus rows, then the next key will be the
           // same as this one. In that case we need to handle focusing either the cell or the first/last
           // child, depending on the focus mode.
-          let prev = keyboardDelegate.getKeyLeftOf(node.key);
+          let prev = keyboardDelegate.getKeyLeftOf?.(node.key);
           if (prev !== node.key) {
             // We prevent the capturing event from reaching children of the cell, e.g. pickers.
             // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
             // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
-            ref.current.parentElement.dispatchEvent(
+            ref.current.parentElement?.dispatchEvent(
               new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
             );
             break;
@@ -163,7 +165,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
         break;
       }
       case 'ArrowRight': {
-        let focusable = direction === 'rtl'
+        let focusable: FocusableElement | null = direction === 'rtl'
           ? walker.previousNode() as FocusableElement
           : walker.nextNode() as FocusableElement;
 
@@ -177,12 +179,12 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
           focusSafely(focusable);
           scrollIntoViewport(focusable, {containingElement: getScrollParent(ref.current)});
         } else {
-          let next = keyboardDelegate.getKeyRightOf(node.key);
+          let next = keyboardDelegate.getKeyRightOf?.(node.key);
           if (next !== node.key) {
             // We prevent the capturing event from reaching children of the cell, e.g. pickers.
             // We want arrow keys to navigate to the next cell instead. We need to re-dispatch
             // the event from a higher parent so it still bubbles and gets handled by useSelectableCollection.
-            ref.current.parentElement.dispatchEvent(
+            ref.current.parentElement?.dispatchEvent(
               new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
             );
             break;
@@ -212,7 +214,7 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
         if (!e.altKey && ref.current.contains(e.target as Element)) {
           e.stopPropagation();
           e.preventDefault();
-          ref.current.parentElement.dispatchEvent(
+          ref.current.parentElement?.dispatchEvent(
             new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
           );
         }
@@ -266,7 +268,9 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
       let tabindex = el.getAttribute('tabindex');
       el.removeAttribute('tabindex');
       requestAnimationFrame(() => {
-        el.setAttribute('tabindex', tabindex);
+        if (tabindex != null) {
+          el.setAttribute('tabindex', tabindex);
+        }
       });
     };
   }
@@ -278,10 +282,10 @@ export function useGridCell<T, C extends GridCollection<T>>(props: GridCellProps
 }
 
 function last(walker: TreeWalker) {
-  let next: FocusableElement;
-  let last: FocusableElement;
+  let next: FocusableElement | null = null;
+  let last: FocusableElement | null = null;
   do {
-    last = walker.lastChild() as FocusableElement;
+    last = walker.lastChild() as FocusableElement | null;
     if (last) {
       next = last;
     }

package/src/useGridRow.ts

@@ -52,8 +52,8 @@ export function useGridRow<T, C extends GridCollection<T>, S extends GridState<T
     onAction
   } = props;
 
-  let {actions} = gridMap.get(state);
-  let onRowAction = actions.onRowAction ? () => actions.onRowAction(node.key) : onAction;
+  let {actions} = gridMap.get(state)!;
+  let onRowAction = actions.onRowAction ? () => actions.onRowAction?.(node.key) : onAction;
   let {itemProps, ...states} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,

package/src/useGridSelectionAnnouncement.ts

@@ -58,7 +58,7 @@ export function useGridSelectionAnnouncement<T>(props: GridSelectionAnnouncement
 
     // If adding or removing a single row from the selection, announce the name of that item.
     let isReplace = state.selectionManager.selectionBehavior === 'replace';
-    let messages = [];
+    let messages: string[] = [];
 
     if ((state.selectionManager.selectedKeys.size === 1 && isReplace)) {
       if (state.collection.getItem(state.selectionManager.selectedKeys.keys().next().value)) {

package/src/useHighlightSelectionDescription.ts

@@ -39,7 +39,7 @@ export function useHighlightSelectionDescription(props: HighlightSelectionDescri
     let selectionMode = props.selectionManager.selectionMode;
     let selectionBehavior = props.selectionManager.selectionBehavior;
 
-    let message = undefined;
+    let message: string | undefined;
     if (shouldLongPress) {
       message = stringFormatter.format('longPressToSelect');
     }

package/src/utils.ts

@@ -17,8 +17,8 @@ import type {Key, KeyboardDelegate} from '@react-types/shared';
 interface GridMapShared {
   keyboardDelegate: KeyboardDelegate,
   actions: {
-    onRowAction: (key: Key) => void,
-    onCellAction: (key: Key) => void
+    onRowAction?: (key: Key) => void,
+    onCellAction?: (key: Key) => void
   }
 }