@mui/x-data-grid 8.18.0 → 8.19.0

package/esm/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -106,15 +106,32 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       // There is one exception for the checkBoxHeader
       return;
     }
+    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled for header/all, or if we are tabbing to the content area while `tabNavigation` is enabled for content only
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'content' && event.shiftKey)) {
+      return;
+    }
     const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
-    const lastRowIndexInPage = currentPageRows.length - 1;
+    const lastRowIndexInPage = currentPageRows.length > 0 ? currentPageRows.length - 1 : null;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     const columnGroupMaxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the header area while only content `tabNavigation` is enabled, go to the first cell
+    if (event.key === 'Tab' && props.tabNavigation === 'content' && !event.shiftKey) {
+      if (firstRowIndexInPage !== null) {
+        goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+        event.preventDefault();
+      }
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
@@ -182,6 +199,36 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           }
           break;
         }
+      case 'Tab':
+        {
+          if (event.shiftKey) {
+            // if the key is pressed on the first column header, Shift+Tab should go to the group header if it is there or allow default behavior
+            if (colIndexBefore === firstColIndex) {
+              if (columnGroupMaxDepth > 0) {
+                goToGroupHeader(lastColIndex, columnGroupMaxDepth - 1, event);
+              } else {
+                shouldPreventDefault = false;
+              }
+            } else {
+              goToHeader(colIndexBefore - 1, event);
+            }
+          } else if (colIndexBefore === lastColIndex) {
+            // the key is pressed at the last column header. go to the first header filter or the first cell
+            if (headerFilteringEnabled) {
+              goToHeaderFilter(firstColIndex, event);
+            }
+            // this point can be reached if tabbing is enabled for all content or just header.
+            // if it is not enabled for all content or there is no data, then do not focus on the first cell
+            else if (props.tabNavigation === 'all' && firstRowIndexInPage !== null) {
+              goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+            } else {
+              shouldPreventDefault = false;
+            }
+          } else {
+            goToHeader(colIndexBefore + 1, event);
+          }
+          break;
+        }
       case ' ':
         {
           // prevent Space event from scrolling
@@ -195,27 +242,43 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
     const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
-    if (isEditing || isHeaderMenuOpen || !isNavigationKey(event.key)) {
+    if (isHeaderMenuOpen || isEditing && event.key !== 'Tab') {
+      return;
+    }
+    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled for header/all, or if we are tabbing to the content area while `tabNavigation` is enabled for content only
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'content' && event.shiftKey)) {
       return;
     }
     const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const firstRowIndexInPage = 0;
-    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
+    const lastRowIndexInPage = currentPageRows.length > 0 ? currentPageRows.length - 1 : null;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the header area while only content `tabNavigation` is enabled, go to the first cell
+    if (event.key === 'Tab' && props.tabNavigation === 'content' && !event.shiftKey) {
+      if (firstRowIndexInPage !== null) {
+        goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+        event.preventDefault();
+      }
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
-          const rowId = getRowIdFromIndex(firstRowIndexInPage);
-          if (firstRowIndexInPage !== null && rowId != null) {
-            goToCell(colIndexBefore, rowId);
+          if (firstRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
           break;
         }
@@ -269,6 +332,29 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           goToHeaderFilter(lastColIndex, event);
           break;
         }
+      case 'Tab':
+        {
+          if (event.shiftKey) {
+            // if the key is pressed on the first header filter, Shift+Tab should go to the column header
+            if (colIndexBefore === firstColIndex) {
+              goToHeader(lastColIndex, event);
+            } else {
+              goToHeaderFilter(colIndexBefore - 1, event);
+            }
+          } else if (colIndexBefore === lastColIndex) {
+            // the key is pressed at the last header filter.
+            // this point can be reached if `tabNavigation` is enabled for all content or just header.
+            // if it is not enabled for all content or there is no data, then do not focus on the first cell
+            if (props.tabNavigation === 'all' && firstRowIndexInPage !== null) {
+              goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+            } else {
+              shouldPreventDefault = false;
+            }
+          } else {
+            goToHeaderFilter(colIndexBefore + 1, event);
+          }
+          break;
+        }
       case ' ':
         {
           // prevent Space event from scrolling
@@ -282,7 +368,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
@@ -297,15 +383,32 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       depth,
       maxDepth
     } = params;
+    if (!isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled for header/all, or if we are tabbing to the content area while `tabNavigation` is enabled for content only
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'content' && event.shiftKey)) {
+      return;
+    }
     const currentPageRows = getCurrentPageRows();
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const currentColIndex = apiRef.current.getColumnIndex(currentField);
     const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
-    const firstRowIndexInPage = 0;
-    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstRowIndexInPage = currentPageRows.length > 0 ? 0 : null;
+    const lastRowIndexInPage = currentPageRows.length > 0 ? currentPageRows.length - 1 : null;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the header area while only content `tabNavigation` is enabled, go to the first cell
+    if (event.key === 'Tab' && props.tabNavigation === 'content' && !event.shiftKey) {
+      if (firstRowIndexInPage !== null) {
+        goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
+        event.preventDefault();
+      }
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
@@ -356,6 +459,37 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           goToGroupHeader(lastColIndex, currentDepth, event);
           break;
         }
+      case 'Tab':
+        {
+          if (event.shiftKey) {
+            const remainingLeftColumns = fields.indexOf(currentField);
+            const targetColIndex = currentColIndex - remainingLeftColumns - 1;
+            if (targetColIndex < firstColIndex) {
+              if (depth === 0) {
+                // if the key is pressed on the first column group header at the top level, Shift+Tab should allow default behavior
+                shouldPreventDefault = false;
+              } else {
+                // Navigate to last column group header at the previous depth
+                goToGroupHeader(lastColIndex, currentDepth - 1, event);
+              }
+            } else {
+              goToGroupHeader(targetColIndex, currentDepth, event);
+            }
+          } else {
+            const remainingRightColumns = fields.length - fields.indexOf(currentField) - 1;
+            const targetColIndex = currentColIndex + remainingRightColumns + 1;
+            if (targetColIndex > lastColIndex && depth === maxDepth - 1) {
+              // the key is pressed at the last column group header at the deepest level. go to the first column header
+              goToHeader(firstColIndex, event);
+            } else if (targetColIndex > lastColIndex) {
+              // go down a depth level
+              goToGroupHeader(firstColIndex, currentDepth + 1, event);
+            } else {
+              goToGroupHeader(targetColIndex, currentDepth, event);
+            }
+          }
+          break;
+        }
       case ' ':
         {
           // prevent Space event from scrolling
@@ -369,7 +503,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (isEventTargetInPortal(event)) {
@@ -378,7 +512,12 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
     // Get the most recent params because the cell mode may have changed by another listener
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    if (cellParams.cellMode === GridCellModes.Edit || !isNavigationKey(event.key)) {
+    if (cellParams.cellMode === GridCellModes.Edit || !isNavigationKey(event.key) && event.key !== 'Tab') {
+      return;
+    }
+
+    // Tab key is only allowed if tabbing is enabled or if we are tabbing to the header area while `tabNavigation` is enabled for header only (with Shift+Tab)
+    if (event.key === 'Tab' && (props.tabNavigation === 'none' || props.tabNavigation === 'header' && !event.shiftKey)) {
       return;
     }
     const canUpdateFocus = apiRef.current.unstable_applyPipeProcessors('canUpdateFocus', true, {
@@ -392,14 +531,22 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (currentPageRows.length === 0) {
       return;
     }
+    const previousAreaNavigationFn = headerFilteringEnabled ? goToHeaderFilter : goToHeader;
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const lastColIndex = Math.max(0, gridVisibleColumnDefinitionsSelector(apiRef).length - 1);
     let shouldPreventDefault = true;
+
+    // If we are tabbing inside the content area while only header `tabNavigation` is enabled, go to the last header filter or column header
+    if (event.key === 'Tab' && props.tabNavigation === 'header' && event.shiftKey) {
+      previousAreaNavigationFn(lastColIndex, event);
+      event.preventDefault();
+      return;
+    }
     switch (event.key) {
       case 'ArrowDown':
         {
@@ -413,10 +560,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           if (rowIndexBefore > firstRowIndexInPage) {
             goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore - 1));
-          } else if (headerFilteringEnabled) {
-            goToHeaderFilter(colIndexBefore, event);
           } else {
-            goToHeader(colIndexBefore, event);
+            previousAreaNavigationFn(colIndexBefore, event);
           }
           break;
         }
@@ -448,10 +593,29 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         }
       case 'Tab':
         {
-          // "Tab" is only triggered by the row / cell editing feature
-          if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
-          } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
+          if (event.shiftKey) {
+            // if the key is pressed on the first cell, Shift+Tab should go to the last column header
+            // same is if `tabNavigation` is enabled for header only
+            if (colIndexBefore === firstColIndex && rowIndexBefore === firstRowIndexInPage) {
+              if (props.tabNavigation === 'all') {
+                previousAreaNavigationFn(lastColIndex, event);
+              } else {
+                shouldPreventDefault = false;
+              }
+            } else if (colIndexBefore === firstColIndex) {
+              goToCell(lastColIndex, getRowIdFromIndex(rowIndexBefore - 1));
+            } else {
+              goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
+            }
+          } else if (colIndexBefore === lastColIndex) {
+            // the key is pressed at the last column. if it is also the last row, do not to anything to allow the default behavior
+            // otherwise, go to the first column of the next row
+            if (rowIndexBefore !== lastRowIndexInPage) {
+              goToCell(firstColIndex, getRowIdFromIndex(rowIndexBefore + 1));
+            } else {
+              shouldPreventDefault = false;
+            }
+          } else {
             goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
           break;
@@ -515,7 +679,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, props.tabNavigation, getCurrentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/esm/hooks/features/pagination/useGridPaginationMeta.js

@@ -2,12 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridLogger, useGridSelector, useGridApiMethod } from "../../utils/index.js";
+import { useGridLogger, useGridApiMethod } from "../../utils/index.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPaginationMetaSelector } from "./gridPaginationSelector.js";
 export const useGridPaginationMeta = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationMeta');
-  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
   apiRef.current.registerControlState({
     stateId: 'paginationMeta',
     propModel: props.paginationMeta,
@@ -20,6 +19,7 @@ export const useGridPaginationMeta = (apiRef, props) => {
    * API METHODS
    */
   const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    const paginationMeta = gridPaginationMetaSelector(apiRef);
     if (paginationMeta === newPaginationMeta) {
       return;
     }
@@ -29,7 +29,7 @@ export const useGridPaginationMeta = (apiRef, props) => {
         meta: newPaginationMeta
       })
     }));
-  }, [apiRef, logger, paginationMeta]);
+  }, [apiRef, logger]);
   const paginationMetaApi = {
     setPaginationMeta
   };

package/esm/hooks/features/pagination/useGridPaginationModel.js

@@ -60,6 +60,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       pageSize: currentModel.pageSize
     });
   }, [apiRef, logger]);
+  const debouncedSetPage = React.useMemo(() => debounce(setPage, 0), [setPage]);
   const setPageSize = React.useCallback(pageSize => {
     const currentModel = gridPaginationModelSelector(apiRef);
     if (pageSize === currentModel.pageSize) {
@@ -154,9 +155,11 @@ export const useGridPaginationModel = (apiRef, props) => {
     }
     const pageCount = gridPageCountSelector(apiRef);
     if (paginationModel.page > pageCount - 1) {
-      apiRef.current.setPage(Math.max(0, pageCount - 1));
+      queueMicrotask(() => {
+        debouncedSetPage(Math.max(0, pageCount - 1));
+      });
     }
-  }, [apiRef]);
+  }, [apiRef, debouncedSetPage]);
 
   /**
    * Goes to the first row of the grid
@@ -164,7 +167,7 @@ export const useGridPaginationModel = (apiRef, props) => {
   const navigateToStart = React.useCallback(() => {
     const paginationModel = gridPaginationModelSelector(apiRef);
     if (paginationModel.page !== 0) {
-      apiRef.current.setPage(0);
+      debouncedSetPage(0);
     }
 
     // If the page was not changed it might be needed to scroll to the top
@@ -174,7 +177,7 @@ export const useGridPaginationModel = (apiRef, props) => {
         top: 0
       });
     }
-  }, [apiRef]);
+  }, [apiRef, debouncedSetPage]);
   const debouncedNavigateToStart = React.useMemo(() => debounce(navigateToStart, 0), [navigateToStart]);
 
   /**

package/esm/hooks/features/pagination/useGridRowCount.js

@@ -3,16 +3,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { useStoreEffect } from '@mui/x-internals/store';
 import { gridFilteredTopLevelRowCountSelector } from "../filter/index.js";
-import { useGridLogger, useGridSelector, useGridApiMethod, useGridEvent } from "../../utils/index.js";
+import { useGridLogger, useGridApiMethod, useGridEvent } from "../../utils/index.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { gridPaginationRowCountSelector, gridPaginationMetaSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 export const useGridRowCount = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowCount');
-  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const rowCountState = useGridSelector(apiRef, gridPaginationRowCountSelector);
-  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
-  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const previousPageSize = useLazyRef(() => gridPaginationModelSelector(apiRef).pageSize);
   apiRef.current.registerControlState({
     stateId: 'paginationRowCount',
@@ -26,6 +23,7 @@ export const useGridRowCount = (apiRef, props) => {
    * API METHODS
    */
   const setRowCount = React.useCallback(newRowCount => {
+    const rowCountState = gridPaginationRowCountSelector(apiRef);
     if (rowCountState === newRowCount) {
       return;
     }
@@ -35,7 +33,7 @@ export const useGridRowCount = (apiRef, props) => {
         rowCount: newRowCount
       })
     }));
-  }, [apiRef, logger, rowCountState]);
+  }, [apiRef, logger]);
   const paginationRowCountApi = {
     setRowCount
   };
@@ -83,28 +81,46 @@ export const useGridRowCount = (apiRef, props) => {
     }
     if (model.pageSize !== previousPageSize.current) {
       previousPageSize.current = model.pageSize;
+      const rowCountState = gridPaginationRowCountSelector(apiRef);
       if (rowCountState === -1) {
         // Row count unknown and page size changed, reset the page
         apiRef.current.setPage(0);
       }
     }
-  }, [props.paginationMode, previousPageSize, rowCountState, apiRef]);
+  }, [props.paginationMode, previousPageSize, apiRef]);
   useGridEvent(apiRef, 'paginationModelChange', handlePaginationModelChange);
 
   /**
    * EFFECTS
    */
   React.useEffect(() => {
-    if (props.paginationMode === 'client') {
-      apiRef.current.setRowCount(visibleTopLevelRowCount);
-    } else if (props.rowCount != null) {
+    if (props.paginationMode === 'server' && props.rowCount != null) {
       apiRef.current.setRowCount(props.rowCount);
     }
-  }, [apiRef, props.paginationMode, visibleTopLevelRowCount, props.rowCount]);
-  const isLastPage = paginationMeta.hasNextPage === false;
-  React.useEffect(() => {
-    if (isLastPage && rowCountState === -1) {
+  }, [apiRef, props.paginationMode, props.rowCount]);
+  useStoreEffect(
+  // typings not supported currently, but methods work
+  apiRef.current.store, () => {
+    const isLastPage = gridPaginationMetaSelector(apiRef).hasNextPage === false;
+    if (isLastPage) {
+      return true;
+    }
+    if (props.paginationMode === 'client') {
+      return gridFilteredTopLevelRowCountSelector(apiRef);
+    }
+    return undefined;
+  }, (_, isLastPageOrRowCount) => {
+    if (isLastPageOrRowCount === true && gridPaginationRowCountSelector(apiRef) !== -1) {
+      const visibleTopLevelRowCount = gridFilteredTopLevelRowCountSelector(apiRef);
+      const paginationModel = gridPaginationModelSelector(apiRef);
       apiRef.current.setRowCount(paginationModel.pageSize * paginationModel.page + visibleTopLevelRowCount);
+    } else if (typeof isLastPageOrRowCount === 'number') {
+      apiRef.current.setRowCount(isLastPageOrRowCount);
+    }
+  });
+  React.useEffect(() => {
+    if (props.paginationMode === 'client') {
+      apiRef.current.setRowCount(gridFilteredTopLevelRowCountSelector(apiRef));
     }
-  }, [apiRef, visibleTopLevelRowCount, isLastPage, rowCountState, paginationModel]);
+  }, [apiRef, props.paginationMode]);
 };

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -62,7 +62,6 @@ export const useGridRowSelection = (apiRef, props) => {
     isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
-  const tree = useGridSelector(apiRef, gridRowTreeSelector);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
@@ -128,6 +127,7 @@ export const useGridRowSelection = (apiRef, props) => {
     if (!apiRef.current.isRowSelectable(id)) {
       return;
     }
+    const tree = gridRowTreeSelector(apiRef);
     lastRowToggled.current = id;
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
@@ -173,12 +173,13 @@ export const useGridRowSelection = (apiRef, props) => {
         apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       }
     }
-  }, [apiRef, logger, applyAutoSelection, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
+  }, [apiRef, logger, applyAutoSelection, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, canHaveMultipleSelection]);
   const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
     logger.debug(`Setting selection for several rows`);
     if (props.rowSelection === false) {
       return;
     }
+    const tree = gridRowTreeSelector(apiRef);
     const selectableIds = new Set();
     for (let i = 0; i < ids.length; i += 1) {
       const id = ids[i];
@@ -239,7 +240,7 @@ export const useGridRowSelection = (apiRef, props) => {
     if (isSelectionValid) {
       apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
     }
-  }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
+  }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, props.rowSelection]);
   const getPropagatedRowSelectionModel = React.useCallback(inputSelectionModel => {
     if (!isNestedData || !applyAutoSelection || inputSelectionModel.type === 'exclude' || inputSelectionModel.ids.size === 0 && inputSelectionModel.type === 'include') {
       return inputSelectionModel;
@@ -248,6 +249,7 @@ export const useGridRowSelection = (apiRef, props) => {
       type: inputSelectionModel.type,
       ids: new Set(inputSelectionModel.ids)
     };
+    const tree = gridRowTreeSelector(apiRef);
     const selectionManager = createRowSelectionManager(propagatedSelectionModel);
     const addRow = rowId => {
       selectionManager.select(rowId);
@@ -256,7 +258,7 @@ export const useGridRowSelection = (apiRef, props) => {
       findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow, selectionManager);
     }
     return propagatedSelectionModel;
-  }, [apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, isNestedData, applyAutoSelection]);
+  }, [apiRef, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents, isNestedData, applyAutoSelection]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -325,7 +327,7 @@ export const useGridRowSelection = (apiRef, props) => {
       if (!props.rowSelectionPropagation?.parents) {
         continue;
       }
-      const node = tree[id];
+      const node = rowTree[id];
       if (node?.type === 'group') {
         const isAutoGenerated = node.isAutoGenerated;
         if (isAutoGenerated) {
@@ -366,7 +368,7 @@ export const useGridRowSelection = (apiRef, props) => {
         apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree, getRowsToBeSelected]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, getRowsToBeSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 
@@ -530,7 +532,6 @@ export const useGridRowSelection = (apiRef, props) => {
     }
     apiRef.current.setRowSelectionModel(propRowSelectionModel);
   });
-  useGridEvent(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection(true)));
   useGridEvent(apiRef, 'filteredRowsSet', runIfRowSelectionIsEnabled(() => removeOutdatedSelection()));
   useGridEvent(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   useGridEvent(apiRef, 'rowSelectionCheckboxChange', runIfRowSelectionIsEnabled(handleRowSelectionCheckboxChange));

package/esm/hooks/features/rowSelection/utils.d.ts

@@ -13,6 +13,7 @@ export declare const checkboxPropsSelector: (args_0: import("react").RefObject<{
 }) => {
   isIndeterminate: boolean;
   isChecked: boolean;
+  isSelectable: boolean;
 };
 export declare function isMultipleRowSelectionEnabled(props: Pick<DataGridProcessedProps, 'signature' | 'disableMultipleRowSelection' | 'checkboxSelection'>): boolean;
 export declare const findRowsToSelect: (apiRef: RefObject<GridPrivateApiCommunity>, tree: GridRowTreeConfig, selectedRow: GridRowId, autoSelectDescendants: boolean, autoSelectParents: boolean, addRow: (rowId: GridRowId) => void, rowSelectionManager?: RowSelectionManager) => void;

package/esm/hooks/features/rowSelection/utils.js

@@ -3,8 +3,10 @@ import { GRID_ROOT_GROUP_ID } from "../rows/gridRowsUtils.js";
 import { gridFilteredRowsLookupSelector } from "../filter/gridFilterSelector.js";
 import { gridSortedRowIdsSelector } from "../sorting/gridSortingSelector.js";
 import { gridRowSelectionManagerSelector } from "./gridRowSelectionSelector.js";
-import { gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { createSelector } from "../../../utils/createSelector.js";
+import { gridColumnDefinitionsSelector } from "../columns/index.js";
+import { gridRowSelectableSelector } from "../../core/gridPropsSelectors.js";
 export const ROW_SELECTION_PROPAGATION_DEFAULT = {
   parents: true,
   descendants: true
@@ -27,15 +29,25 @@ function getGridRowGroupSelectableDescendants(apiRef, groupId) {
   }
   return descendants;
 }
-export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, (rowTree, filteredRowsLookup, rowSelectionManager, {
+export const checkboxPropsSelector = createSelector(gridColumnDefinitionsSelector, gridRowTreeSelector, gridFilteredRowsLookupSelector, gridRowSelectionManagerSelector, gridRowsLookupSelector, gridRowSelectableSelector, (columns, rowTree, filteredRowsLookup, rowSelectionManager, rowsLookup, isRowSelectable, {
   groupId,
   autoSelectParents
 }) => {
   const groupNode = rowTree[groupId];
+  const rowParams = {
+    id: groupId,
+    row: rowsLookup[groupId],
+    columns
+  };
+  let isSelectable = true;
+  if (typeof isRowSelectable === 'function') {
+    isSelectable = isRowSelectable(rowParams);
+  }
   if (!groupNode || groupNode.type !== 'group' || rowSelectionManager.has(groupId)) {
     return {
       isIndeterminate: false,
-      isChecked: rowSelectionManager.has(groupId)
+      isChecked: rowSelectionManager.has(groupId),
+      isSelectable
     };
   }
   let hasSelectedDescendant = false;
@@ -60,7 +72,8 @@ export const checkboxPropsSelector = createSelector(gridRowTreeSelector, gridFil
   traverseDescendants(groupId);
   return {
     isIndeterminate: hasSelectedDescendant && hasUnSelectedDescendant,
-    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false
+    isChecked: autoSelectParents ? hasSelectedDescendant && !hasUnSelectedDescendant : false,
+    isSelectable
   };
 });
 export function isMultipleRowSelectionEnabled(props) {