@ceed/ads 1.20.1 → 1.21.0

package/dist/components/DataTable/hooks.d.ts

@@ -45,7 +45,7 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
     focusedRowId: InferredIdType<T, GetId> | null;
     onRowFocus: (rowId: InferredIdType<T, GetId>) => void;
     onAllCheckboxChange: () => void;
-    onCheckboxChange: (event: any, selectedModel: InferredIdType<T, GetId>) => void;
+    onCheckboxChange: (event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, selectedModel: InferredIdType<T, GetId>) => void;
     columns: ColumnDef<T, InferredIdType<T, GetId>>[];
     processedColumnGroups: {
         groups: import("./types").ProcessedColumnGroup[][];
@@ -53,4 +53,14 @@ export declare function useDataTableRenderer<T extends Record<PropertyKey, unkno
         fieldsInGroupingModel: Set<keyof T>;
     } | null;
     onTotalSelect: () => void;
+    selectionAnchor: {
+        rowId: InferredIdType<T, GetId>;
+        rowIndex: number;
+        wasSelected: boolean;
+    } | null;
+    setSelectionAnchor: import("react").Dispatch<import("react").SetStateAction<{
+        rowId: InferredIdType<T, GetId>;
+        rowIndex: number;
+        wasSelected: boolean;
+    } | null>>;
 };

package/dist/components/data-display/DataTable.md

@@ -377,12 +377,82 @@ const [selectionModel, setSelectionModel] = useState<string[]>([]);
 />;
 ```
 
+## Keyboard Accessibility
+
+DataTable supports keyboard interactions for improved accessibility.
+
+### Shift+Click Range Selection
+
+Hold the Shift key while clicking checkboxes to select or deselect a range of rows at once.
+The selection state is applied based on the last clicked checkbox's resulting state.
+
+```tsx
+<Stack spacing={2}>
+  <Typography level="body-sm">
+    Hold Shift and click checkboxes to select a range of rows. The selection state is applied based on the first
+    clicked checkbox&apos;s resulting state.
+  </Typography>
+  <DataTable {...args} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} />
+  <Typography level="body-xs">Selected IDs: {selectionModel.join(', ') || 'None'}</Typography>
+</Stack>
+```
+
+**How it works:**
+
+1. Click a checkbox to select/deselect a row (this becomes the "anchor")
+2. Hold Shift and click another checkbox
+3. All rows between the anchor and the clicked row will be set to the same state
+
+**Edge cases handled:**
+
+- Works seamlessly with virtual scrolling (rows don't need to be visible)
+- Selection anchor resets when data changes or page changes
+- Respects `isRowSelectable` - non-selectable rows are skipped in range
+
+### Keyboard Navigation
+
+When a row has focus, use keyboard shortcuts to navigate and interact with rows.
+
+```tsx
+<Stack spacing={2}>
+  <Typography level="body-sm">
+    Click a row to focus, then use keyboard to navigate. Arrow Up/Down to move, Space to toggle selection,
+    Home/End to jump to first/last row, PageUp/PageDown to move by 10 rows. Hold Shift with any navigation key to
+    extend selection.
+  </Typography>
+  <DataTable {...args} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} />
+  <Typography level="body-xs">Selected IDs: {selectionModel.join(', ') || 'None'}</Typography>
+</Stack>
+```
+
+**Supported keys:**
+
+| Key                    | Action                                      |
+| ---------------------- | ------------------------------------------- |
+| `↑` Arrow Up           | Move focus to previous row                  |
+| `↓` Arrow Down         | Move focus to next row                      |
+| `Space`                | Toggle checkbox selection                   |
+| `Home`                 | Move focus to first row                     |
+| `End`                  | Move focus to last row                      |
+| `Page Up`              | Move focus up by 10 rows                    |
+| `Page Down`            | Move focus down by 10 rows                  |
+| `Shift + ↑/↓`          | Move focus and extend selection             |
+| `Shift + Home/End`     | Jump to first/last row and extend selection |
+| `Shift + Page Up/Down` | Move by 10 rows and extend selection        |
+
+**Notes:**
+
+- Click any row first to establish focus
+- Tab key skips checkboxes and moves directly between rows
+- Works with virtual scrolling - target row is automatically scrolled into view
+- Follows WAI-ARIA Grid pattern for accessibility
+
 ## Styles and Layout
 
 ### Back Office Style
 
 ```tsx
-<DataTable rows={args.rows} columns={args.columns} checkboxSelection={args.checkboxSelection} hoverRow={args.hoverRow} noWrap={args.noWrap} stripe={args.stripe} stickyHeader={args.stickyHeader} slots={args.slots} slotProps={args.slotProps} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} />
+<DataTable rows={args.rows} columns={args.columns} checkboxSelection={args.checkboxSelection} hoverRow={args.hoverRow} noWrap={args.noWrap} stripe={args.stripe} stickyHeader={args.stickyHeader} slots={args.slots} slotProps={args.slotProps} selectionModel={selectionModel} onSelectionModelChange={setSelectionModel} pagination={args.pagination} />
 ```
 
 #### Commonly Used Table Options

package/dist/index.cjs

@@ -627,11 +627,13 @@ function Autocomplete(props) {
   );
   const slotProps = (0, import_react6.useMemo)(
     () => ({
+      ...props.slotProps,
       listbox: {
+        ...props.slotProps?.listbox,
         hasSecondaryText: options.some((opt) => opt.secondaryText)
       }
     }),
-    [options]
+    [options, props.slotProps]
   );
   const handleChange = (0, import_react6.useCallback)(
     (event, value2) => {
@@ -3279,6 +3281,7 @@ function useDataTableRenderer({
   const onSelectionModelChangeRef = (0, import_react25.useRef)(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = (0, import_react25.useState)(null);
+  const [selectionAnchor, setSelectionAnchor] = (0, import_react25.useState)(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
@@ -3356,6 +3359,29 @@ function useDataTableRenderer({
     }),
     [dataInPage, isRowSelectable, getId]
   );
+  const handleRangeSelection = (0, import_react25.useCallback)(
+    (anchor, targetIndex) => {
+      const startIndex = Math.min(anchor.rowIndex, targetIndex);
+      const endIndex = Math.max(anchor.rowIndex, targetIndex);
+      const rowIdsInRange = [];
+      for (let i = startIndex; i <= endIndex; i++) {
+        const row = dataInPage[i];
+        if (!row) continue;
+        const rowId = getId(row, i);
+        if (isRowSelectable && !isRowSelectable({ row, id: rowId })) continue;
+        rowIdsInRange.push(rowId);
+      }
+      if (anchor.wasSelected) {
+        const currentSet = new Set(selectionModel || []);
+        rowIdsInRange.forEach((id) => currentSet.add(id));
+        onSelectionModelChange?.(Array.from(currentSet));
+      } else {
+        const removeSet = new Set(rowIdsInRange);
+        onSelectionModelChange?.((selectionModel || []).filter((id) => !removeSet.has(id)));
+      }
+    },
+    [dataInPage, getId, isRowSelectable, selectionModel, onSelectionModelChange]
+  );
   const isAllSelected = (0, import_react25.useMemo)(
     () => selectableDataInPage.length > 0 && selectableDataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
     [selectableDataInPage, selectedModelSet, getId]
@@ -3455,7 +3481,15 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   (0, import_react25.useEffect)(() => {
     onSelectionModelChangeRef.current?.([]);
+    setSelectionAnchor(null);
   }, [page]);
+  const prevRowsRef = (0, import_react25.useRef)(_rows);
+  (0, import_react25.useEffect)(() => {
+    if (prevRowsRef.current !== _rows) {
+      setSelectionAnchor(null);
+      prevRowsRef.current = _rows;
+    }
+  }, [_rows]);
   return {
     rowCount,
     selectableRowCount,
@@ -3486,15 +3520,34 @@ function useDataTableRenderer({
     }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
     onCheckboxChange: (0, import_react25.useCallback)(
       (event, selectedModel) => {
-        if (selectedModelSet.has(selectedModel)) {
-          const newSelectionModel = (selectionModel || []).filter((model) => model !== selectedModel);
-          onSelectionModelChange?.(newSelectionModel);
+        const isShiftClick = "shiftKey" in event && event.shiftKey;
+        const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
+        if (isShiftClick && selectionAnchor !== null) {
+          handleRangeSelection(selectionAnchor, rowIndex);
         } else {
-          const newSelectionModel = [...selectionModel || [], selectedModel];
-          onSelectionModelChange?.(newSelectionModel);
+          const isCurrentlySelected = selectedModelSet.has(selectedModel);
+          const newIsSelected = !isCurrentlySelected;
+          if (isCurrentlySelected) {
+            onSelectionModelChange?.((selectionModel || []).filter((m) => m !== selectedModel));
+          } else {
+            onSelectionModelChange?.([...selectionModel || [], selectedModel]);
+          }
+          setSelectionAnchor({
+            rowId: selectedModel,
+            rowIndex,
+            wasSelected: newIsSelected
+          });
         }
       },
-      [selectionModel, onSelectionModelChange, selectedModelSet]
+      [
+        selectionModel,
+        onSelectionModelChange,
+        selectedModelSet,
+        dataInPage,
+        getId,
+        selectionAnchor,
+        handleRangeSelection
+      ]
     ),
     columns,
     processedColumnGroups,
@@ -3504,7 +3557,10 @@ function useDataTableRenderer({
         return isRowSelectable({ row, id: getId(row, i) });
       });
       onSelectionModelChange?.(isTotalSelected ? [] : selectableRows.map(getId), !isTotalSelected);
-    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
+    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable]),
+    // Selection anchor for keyboard navigation
+    selectionAnchor,
+    setSelectionAnchor
   };
 }
 
@@ -3871,7 +3927,10 @@ function Component(props, apiRef) {
     onRowFocus,
     onTotalSelect,
     HeadCell: HeadCell2,
-    BodyRow: BodyRow2
+    BodyRow: BodyRow2,
+    // For keyboard selection
+    selectionAnchor,
+    setSelectionAnchor
   } = useDataTableRenderer(props);
   const virtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: dataInPage.length,
@@ -3897,18 +3956,104 @@ function Component(props, apiRef) {
     [onRowFocus]
   );
   const getCheckboxClickHandler = (0, import_react28.useCallback)(
-    () => (e) => {
-      e.stopPropagation();
-    },
-    []
-  );
-  const getCheckboxChangeHandler = (0, import_react28.useCallback)(
     (rowId, row) => (e) => {
+      e.stopPropagation();
       if (isRowSelectableCheck(rowId, row)) {
         onCheckboxChange(e, rowId);
       }
+      onRowFocus(rowId);
+    },
+    [onCheckboxChange, isRowSelectableCheck, onRowFocus]
+  );
+  const handleTableKeyDown = (0, import_react28.useCallback)(
+    (e) => {
+      const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
+      if (!supportedKeys.includes(e.key)) return;
+      const activeElement = document.activeElement;
+      const currentRowId = activeElement?.closest("[data-row-id]")?.getAttribute("data-row-id");
+      if (!currentRowId) return;
+      const currentIndex = dataInPage.findIndex((row, i) => String(getId(row, i)) === currentRowId);
+      if (currentIndex === -1) return;
+      if (e.key === " ") {
+        e.preventDefault();
+        const row = dataInPage[currentIndex];
+        const rowId = getId(row, currentIndex);
+        if (checkboxSelection && isRowSelectableCheck(rowId, row)) {
+          onCheckboxChange(e, rowId);
+        }
+        return;
+      }
+      let nextIndex;
+      switch (e.key) {
+        case "ArrowUp":
+          nextIndex = currentIndex - 1;
+          break;
+        case "ArrowDown":
+          nextIndex = currentIndex + 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = dataInPage.length - 1;
+          break;
+        case "PageUp":
+          nextIndex = Math.max(0, currentIndex - 10);
+          break;
+        case "PageDown":
+          nextIndex = Math.min(dataInPage.length - 1, currentIndex + 10);
+          break;
+        default:
+          return;
+      }
+      if (nextIndex < 0 || nextIndex >= dataInPage.length) return;
+      if (nextIndex === currentIndex) return;
+      e.preventDefault();
+      const nextRow = dataInPage[nextIndex];
+      const nextRowId = getId(nextRow, nextIndex);
+      if (e.shiftKey && checkboxSelection && isRowSelectableCheck(nextRowId, nextRow)) {
+        let anchor = selectionAnchor;
+        if (anchor === null) {
+          const currentRow = dataInPage[currentIndex];
+          const currentRowId2 = getId(currentRow, currentIndex);
+          const currentIsSelected = isSelectedRow(currentRowId2);
+          anchor = {
+            rowId: currentRowId2,
+            rowIndex: currentIndex,
+            wasSelected: currentIsSelected
+          };
+          setSelectionAnchor(anchor);
+        }
+        const targetShouldBeSelected = anchor.wasSelected;
+        const isCurrentlySelected = isSelectedRow(nextRowId);
+        if (targetShouldBeSelected !== isCurrentlySelected) {
+          if (targetShouldBeSelected) {
+            onSelectionModelChange?.([...selectionModel || [], nextRowId]);
+          } else {
+            onSelectionModelChange?.((selectionModel || []).filter((id) => id !== nextRowId));
+          }
+        }
+      }
+      onRowFocus(nextRowId);
+      virtualizer.scrollToIndex(nextIndex, { align: "auto" });
+      requestAnimationFrame(() => {
+        tableBodyRef.current?.querySelector(`[data-row-id='${nextRowId}']`)?.focus();
+      });
     },
-    [onCheckboxChange, isRowSelectableCheck]
+    [
+      dataInPage,
+      getId,
+      checkboxSelection,
+      isRowSelectableCheck,
+      isSelectedRow,
+      onCheckboxChange,
+      selectionAnchor,
+      setSelectionAnchor,
+      selectionModel,
+      onSelectionModelChange,
+      onRowFocus,
+      virtualizer
+    ]
   );
   (0, import_react28.useImperativeHandle)(apiRef, () => ({
     getRowIndexRelativeToVisibleRows(rowId) {
@@ -4059,6 +4204,7 @@ function Component(props, apiRef) {
         VirtualizedTableBody,
         {
           ref: tableBodyRef,
+          onKeyDown: handleTableKeyDown,
           style: {
             height: `${totalSize}px`
           },
@@ -4121,10 +4267,10 @@ function Component(props, apiRef) {
               /* @__PURE__ */ import_react28.default.createElement(
                 RenderCheckbox,
                 {
-                  onClick: getCheckboxClickHandler(),
-                  onChange: getCheckboxChangeHandler(rowId, row),
+                  onClick: getCheckboxClickHandler(rowId, row),
                   checked: isSelectedRow(rowId),
                   disabled: !isRowSelectableCheck(rowId, row),
+                  tabIndex: -1,
                   ...checkboxProps
                 }
               )

package/dist/index.js

@@ -531,11 +531,13 @@ function Autocomplete(props) {
   );
   const slotProps = useMemo(
     () => ({
+      ...props.slotProps,
       listbox: {
+        ...props.slotProps?.listbox,
         hasSecondaryText: options.some((opt) => opt.secondaryText)
       }
     }),
-    [options]
+    [options, props.slotProps]
   );
   const handleChange = useCallback2(
     (event, value2) => {
@@ -3210,6 +3212,7 @@ function useDataTableRenderer({
   const onSelectionModelChangeRef = useRef5(onSelectionModelChange);
   onSelectionModelChangeRef.current = onSelectionModelChange;
   const [focusedRowId, setFocusedRowId] = useState8(null);
+  const [selectionAnchor, setSelectionAnchor] = useState8(null);
   const [sortModel, setSortModel] = useControlledState(
     controlledSortModel,
     initialState?.sorting?.sortModel ?? [],
@@ -3287,6 +3290,29 @@ function useDataTableRenderer({
     }),
     [dataInPage, isRowSelectable, getId]
   );
+  const handleRangeSelection = useCallback9(
+    (anchor, targetIndex) => {
+      const startIndex = Math.min(anchor.rowIndex, targetIndex);
+      const endIndex = Math.max(anchor.rowIndex, targetIndex);
+      const rowIdsInRange = [];
+      for (let i = startIndex; i <= endIndex; i++) {
+        const row = dataInPage[i];
+        if (!row) continue;
+        const rowId = getId(row, i);
+        if (isRowSelectable && !isRowSelectable({ row, id: rowId })) continue;
+        rowIdsInRange.push(rowId);
+      }
+      if (anchor.wasSelected) {
+        const currentSet = new Set(selectionModel || []);
+        rowIdsInRange.forEach((id) => currentSet.add(id));
+        onSelectionModelChange?.(Array.from(currentSet));
+      } else {
+        const removeSet = new Set(rowIdsInRange);
+        onSelectionModelChange?.((selectionModel || []).filter((id) => !removeSet.has(id)));
+      }
+    },
+    [dataInPage, getId, isRowSelectable, selectionModel, onSelectionModelChange]
+  );
   const isAllSelected = useMemo9(
     () => selectableDataInPage.length > 0 && selectableDataInPage.every((row, i) => selectedModelSet.has(getId(row, i))),
     [selectableDataInPage, selectedModelSet, getId]
@@ -3386,7 +3412,15 @@ function useDataTableRenderer({
   }, [page, rowCount, pageSize, handlePageChange]);
   useEffect5(() => {
     onSelectionModelChangeRef.current?.([]);
+    setSelectionAnchor(null);
   }, [page]);
+  const prevRowsRef = useRef5(_rows);
+  useEffect5(() => {
+    if (prevRowsRef.current !== _rows) {
+      setSelectionAnchor(null);
+      prevRowsRef.current = _rows;
+    }
+  }, [_rows]);
   return {
     rowCount,
     selectableRowCount,
@@ -3417,15 +3451,34 @@ function useDataTableRenderer({
     }, [isAllSelected, selectableDataInPage, onSelectionModelChange, getId]),
     onCheckboxChange: useCallback9(
       (event, selectedModel) => {
-        if (selectedModelSet.has(selectedModel)) {
-          const newSelectionModel = (selectionModel || []).filter((model) => model !== selectedModel);
-          onSelectionModelChange?.(newSelectionModel);
+        const isShiftClick = "shiftKey" in event && event.shiftKey;
+        const rowIndex = dataInPage.findIndex((row, i) => getId(row, i) === selectedModel);
+        if (isShiftClick && selectionAnchor !== null) {
+          handleRangeSelection(selectionAnchor, rowIndex);
         } else {
-          const newSelectionModel = [...selectionModel || [], selectedModel];
-          onSelectionModelChange?.(newSelectionModel);
+          const isCurrentlySelected = selectedModelSet.has(selectedModel);
+          const newIsSelected = !isCurrentlySelected;
+          if (isCurrentlySelected) {
+            onSelectionModelChange?.((selectionModel || []).filter((m) => m !== selectedModel));
+          } else {
+            onSelectionModelChange?.([...selectionModel || [], selectedModel]);
+          }
+          setSelectionAnchor({
+            rowId: selectedModel,
+            rowIndex,
+            wasSelected: newIsSelected
+          });
         }
       },
-      [selectionModel, onSelectionModelChange, selectedModelSet]
+      [
+        selectionModel,
+        onSelectionModelChange,
+        selectedModelSet,
+        dataInPage,
+        getId,
+        selectionAnchor,
+        handleRangeSelection
+      ]
     ),
     columns,
     processedColumnGroups,
@@ -3435,7 +3488,10 @@ function useDataTableRenderer({
         return isRowSelectable({ row, id: getId(row, i) });
       });
       onSelectionModelChange?.(isTotalSelected ? [] : selectableRows.map(getId), !isTotalSelected);
-    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable])
+    }, [isTotalSelected, rows, onSelectionModelChange, getId, isRowSelectable]),
+    // Selection anchor for keyboard navigation
+    selectionAnchor,
+    setSelectionAnchor
   };
 }
 
@@ -3802,7 +3858,10 @@ function Component(props, apiRef) {
     onRowFocus,
     onTotalSelect,
     HeadCell: HeadCell2,
-    BodyRow: BodyRow2
+    BodyRow: BodyRow2,
+    // For keyboard selection
+    selectionAnchor,
+    setSelectionAnchor
   } = useDataTableRenderer(props);
   const virtualizer = useVirtualizer2({
     count: dataInPage.length,
@@ -3828,18 +3887,104 @@ function Component(props, apiRef) {
     [onRowFocus]
   );
   const getCheckboxClickHandler = useCallback11(
-    () => (e) => {
-      e.stopPropagation();
-    },
-    []
-  );
-  const getCheckboxChangeHandler = useCallback11(
     (rowId, row) => (e) => {
+      e.stopPropagation();
       if (isRowSelectableCheck(rowId, row)) {
         onCheckboxChange(e, rowId);
       }
+      onRowFocus(rowId);
+    },
+    [onCheckboxChange, isRowSelectableCheck, onRowFocus]
+  );
+  const handleTableKeyDown = useCallback11(
+    (e) => {
+      const supportedKeys = ["ArrowUp", "ArrowDown", " ", "Home", "End", "PageUp", "PageDown"];
+      if (!supportedKeys.includes(e.key)) return;
+      const activeElement = document.activeElement;
+      const currentRowId = activeElement?.closest("[data-row-id]")?.getAttribute("data-row-id");
+      if (!currentRowId) return;
+      const currentIndex = dataInPage.findIndex((row, i) => String(getId(row, i)) === currentRowId);
+      if (currentIndex === -1) return;
+      if (e.key === " ") {
+        e.preventDefault();
+        const row = dataInPage[currentIndex];
+        const rowId = getId(row, currentIndex);
+        if (checkboxSelection && isRowSelectableCheck(rowId, row)) {
+          onCheckboxChange(e, rowId);
+        }
+        return;
+      }
+      let nextIndex;
+      switch (e.key) {
+        case "ArrowUp":
+          nextIndex = currentIndex - 1;
+          break;
+        case "ArrowDown":
+          nextIndex = currentIndex + 1;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = dataInPage.length - 1;
+          break;
+        case "PageUp":
+          nextIndex = Math.max(0, currentIndex - 10);
+          break;
+        case "PageDown":
+          nextIndex = Math.min(dataInPage.length - 1, currentIndex + 10);
+          break;
+        default:
+          return;
+      }
+      if (nextIndex < 0 || nextIndex >= dataInPage.length) return;
+      if (nextIndex === currentIndex) return;
+      e.preventDefault();
+      const nextRow = dataInPage[nextIndex];
+      const nextRowId = getId(nextRow, nextIndex);
+      if (e.shiftKey && checkboxSelection && isRowSelectableCheck(nextRowId, nextRow)) {
+        let anchor = selectionAnchor;
+        if (anchor === null) {
+          const currentRow = dataInPage[currentIndex];
+          const currentRowId2 = getId(currentRow, currentIndex);
+          const currentIsSelected = isSelectedRow(currentRowId2);
+          anchor = {
+            rowId: currentRowId2,
+            rowIndex: currentIndex,
+            wasSelected: currentIsSelected
+          };
+          setSelectionAnchor(anchor);
+        }
+        const targetShouldBeSelected = anchor.wasSelected;
+        const isCurrentlySelected = isSelectedRow(nextRowId);
+        if (targetShouldBeSelected !== isCurrentlySelected) {
+          if (targetShouldBeSelected) {
+            onSelectionModelChange?.([...selectionModel || [], nextRowId]);
+          } else {
+            onSelectionModelChange?.((selectionModel || []).filter((id) => id !== nextRowId));
+          }
+        }
+      }
+      onRowFocus(nextRowId);
+      virtualizer.scrollToIndex(nextIndex, { align: "auto" });
+      requestAnimationFrame(() => {
+        tableBodyRef.current?.querySelector(`[data-row-id='${nextRowId}']`)?.focus();
+      });
     },
-    [onCheckboxChange, isRowSelectableCheck]
+    [
+      dataInPage,
+      getId,
+      checkboxSelection,
+      isRowSelectableCheck,
+      isSelectedRow,
+      onCheckboxChange,
+      selectionAnchor,
+      setSelectionAnchor,
+      selectionModel,
+      onSelectionModelChange,
+      onRowFocus,
+      virtualizer
+    ]
   );
   useImperativeHandle2(apiRef, () => ({
     getRowIndexRelativeToVisibleRows(rowId) {
@@ -3990,6 +4135,7 @@ function Component(props, apiRef) {
         VirtualizedTableBody,
         {
           ref: tableBodyRef,
+          onKeyDown: handleTableKeyDown,
           style: {
             height: `${totalSize}px`
           },
@@ -4052,10 +4198,10 @@ function Component(props, apiRef) {
               /* @__PURE__ */ React25.createElement(
                 RenderCheckbox,
                 {
-                  onClick: getCheckboxClickHandler(),
-                  onChange: getCheckboxChangeHandler(rowId, row),
+                  onClick: getCheckboxClickHandler(rowId, row),
                   checked: isSelectedRow(rowId),
                   disabled: !isRowSelectableCheck(rowId, row),
+                  tabIndex: -1,
                   ...checkboxProps
                 }
               )