@mui/x-data-grid 6.0.0-alpha.2 → 6.0.0-alpha.4

package/modern/hooks/features/export/useGridPrintExport.js

@@ -4,7 +4,7 @@ import { ownerDocument } from '@mui/material/utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridVisibleRowCountSelector } from '../filter/gridFilterSelector';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
+import { gridTotalHeaderHeightSelector } from '../columnGrouping/gridColumnGroupsSelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -81,7 +81,7 @@ export const useGridPrintExport = (apiRef, props) => {
       return;
     }
 
-    const totalHeaderHeight = gridDensityTotalHeaderHeightSelector(apiRef);
+    const totalHeaderHeight = gridTotalHeaderHeightSelector(apiRef);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);

package/modern/hooks/features/focus/gridFocusStateSelector.js

@@ -1,7 +1,11 @@
 import { createSelector } from '../../../utils/createSelector';
 export const gridFocusStateSelector = state => state.focus;
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
-export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);
+export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const unstable_gridFocusColumnGroupHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnGroupHeader);
 export const gridTabIndexStateSelector = state => state.tabIndex;
 export const gridTabIndexCellSelector = createSelector(gridTabIndexStateSelector, state => state.cell);
-export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader);
+export const gridTabIndexColumnHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnHeader); // eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const unstable_gridTabIndexColumnGroupHeaderSelector = createSelector(gridTabIndexStateSelector, state => state.columnGroupHeader);

package/modern/hooks/features/focus/useGridFocus.js

@@ -5,18 +5,20 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { gridFocusCellSelector } from './gridFocusStateSelector';
+import { gridFocusCellSelector, unstable_gridFocusColumnGroupHeaderSelector } from './gridFocusStateSelector';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { clamp } from '../../../utils/utils';
 export const focusStateInitializer = state => _extends({}, state, {
   focus: {
     cell: null,
-    columnHeader: null
+    columnHeader: null,
+    columnGroupHeader: null
   },
   tabIndex: {
     cell: null,
-    columnHeader: null
+    columnHeader: null,
+    columnGroupHeader: null
   }
 });
 /**
@@ -51,14 +53,16 @@ export const useGridFocus = (apiRef, props) => {
             id,
             field
           },
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         },
         focus: {
           cell: {
             id,
             field
           },
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       });
     });
@@ -86,18 +90,50 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: {
             field
           },
-          cell: null
+          cell: null,
+          columnGroupHeader: null
         },
         focus: {
           columnHeader: {
             field
           },
-          cell: null
+          cell: null,
+          columnGroupHeader: null
         }
       });
     });
     apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
+  const setColumnGroupHeaderFocus = React.useCallback((field, depth, event = {}) => {
+    const cell = gridFocusCellSelector(apiRef);
+
+    if (cell) {
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+    }
+
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        tabIndex: {
+          columnGroupHeader: {
+            field,
+            depth
+          },
+          columnHeader: null,
+          cell: null
+        },
+        focus: {
+          columnGroupHeader: {
+            field,
+            depth
+          },
+          columnHeader: null,
+          cell: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const getColumnGroupHeaderFocus = React.useCallback(() => unstable_gridFocusColumnGroupHeaderSelector(apiRef), [apiRef]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
     let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
@@ -173,12 +209,29 @@ export const useGridFocus = (apiRef, props) => {
 
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef]);
+  const focussedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+  const handleColumnGroupHeaderFocus = React.useCallback(({
+    fields,
+    depth
+  }, event) => {
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
+    if (focussedColumnGroup !== null && focussedColumnGroup.depth === depth && fields.includes(focussedColumnGroup.field)) {
+      // This group cell has already been focused
+      return;
+    }
+
+    apiRef.current.unstable_setColumnGroupHeaderFocus(fields[0], depth, event);
+  }, [apiRef, focussedColumnGroup]);
   const handleBlur = React.useCallback(() => {
     logger.debug(`Clearing focus`);
     apiRef.current.setState(state => _extends({}, state, {
       focus: {
         cell: null,
-        columnHeader: null
+        columnHeader: null,
+        columnGroupHeader: null
       }
     }));
   }, [logger, apiRef]);
@@ -214,7 +267,8 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setState(state => _extends({}, state, {
         focus: {
           cell: null,
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       }));
       apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
@@ -241,7 +295,8 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.setState(state => _extends({}, state, {
         focus: {
           cell: null,
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       }));
     }
@@ -249,7 +304,9 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiMethod(apiRef, {
     setCellFocus,
     setColumnHeaderFocus,
-    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
+    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell,
+    unstable_setColumnGroupHeaderFocus: setColumnGroupHeaderFocus,
+    unstable_getColumnGroupHeaderFocus: getColumnGroupHeaderFocus
   }, 'GridFocusApi');
   React.useEffect(() => {
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
@@ -264,5 +321,6 @@ export const useGridFocus = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
   useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'columnGroupHeaderFocus', handleColumnGroupHeaderFocus);
   useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
 };

package/modern/hooks/features/index.js

@@ -3,13 +3,13 @@ export * from './columnMenu';
 export * from './columns';
 export * from './columnGrouping';
 export * from './density';
-export * from './editRows';
+export * from './editing';
 export * from './filter';
 export * from './focus';
 export * from './pagination';
 export * from './preferencesPanel';
 export * from './rows';
-export * from './selection';
+export * from './rowSelection';
 export * from './sorting';
 export * from './dimensions';
 export * from './statePersistence';

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

@@ -10,6 +10,9 @@ import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
+import { unstable_gridFocusColumnGroupHeaderSelector } from '../focus';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
@@ -68,6 +71,16 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  const goToGroupHeader = React.useCallback((colIndex, depth, event) => {
+    logger.debug(`Navigating to header col ${colIndex}`);
+    apiRef.current.scrollToIndexes({
+      colIndex
+    });
+    const {
+      field
+    } = apiRef.current.getVisibleColumns()[colIndex];
+    apiRef.current.unstable_setColumnGroupHeaderFocus(field, depth, event);
+  }, [apiRef, logger]);
   const getRowIdFromIndex = React.useCallback(rowIndex => {
     return currentPageRows[rowIndex].id;
   }, [currentPageRows]);
@@ -239,6 +252,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const columnGroupMaxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
     let shouldPreventDefault = true;
 
     switch (event.key) {
@@ -269,6 +283,15 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           break;
         }
 
+      case 'ArrowUp':
+        {
+          if (columnGroupMaxDepth > 0) {
+            goToGroupHeader(colIndexBefore, columnGroupMaxDepth - 1, event);
+          }
+
+          break;
+        }
+
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
@@ -314,7 +337,117 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  const focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return;
+    }
+
+    if (focusedColumnGroup === null) {
+      return;
+    }
+
+    const {
+      field: currentField,
+      depth: currentDepth
+    } = focusedColumnGroup;
+    const {
+      fields,
+      depth,
+      maxDepth
+    } = params;
+    const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+    const currentColIndex = apiRef.current.getColumnIndex(currentField);
+    const colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
+    const firstColIndex = 0;
+    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    let shouldPreventDefault = true;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        {
+          if (depth === maxDepth - 1) {
+            goToHeader(currentColIndex, event);
+          } else {
+            goToGroupHeader(currentColIndex, currentDepth + 1, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          if (depth > 0) {
+            goToGroupHeader(currentColIndex, currentDepth - 1, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowRight':
+        {
+          const remainingRightColumns = fields.length - fields.indexOf(currentField) - 1;
+
+          if (currentColIndex + remainingRightColumns + 1 <= lastColIndex) {
+            goToGroupHeader(currentColIndex + remainingRightColumns + 1, currentDepth, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          const remainingLeftColumns = fields.indexOf(currentField);
+
+          if (currentColIndex - remainingLeftColumns - 1 >= firstColIndex) {
+            goToGroupHeader(currentColIndex - remainingLeftColumns - 1, currentDepth, event);
+          }
+
+          break;
+        }
+
+      case 'PageDown':
+        {
+          if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage)));
+          }
+
+          break;
+        }
+
+      case 'Home':
+        {
+          goToGroupHeader(firstColIndex, currentDepth, event);
+          break;
+        }
+
+      case 'End':
+        {
+          goToGroupHeader(lastColIndex, currentDepth, event);
+          break;
+        }
+
+      case ' ':
+        {
+          // prevent Space event from scrolling
+          break;
+        }
+
+      default:
+        {
+          shouldPreventDefault = false;
+        }
+    }
+
+    if (shouldPreventDefault) {
+      event.preventDefault();
+    }
+  }, [apiRef, focusedColumnGroup, currentPageRows.length, goToHeader, goToGroupHeader, goToCell, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {
@@ -330,5 +463,6 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   }, [apiRef]);
   useGridApiEventHandler(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/modern/hooks/features/rowSelection/gridRowSelectionSelector.js

@@ -0,0 +1,9 @@
+import { createSelector } from '../../../utils/createSelector';
+import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+export const gridRowSelectionStateSelector = state => state.rowSelection;
+export const selectedGridRowsCountSelector = createSelector(gridRowSelectionStateSelector, selection => selection.length);
+export const selectedGridRowsSelector = createSelector(gridRowSelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
+export const selectedIdsLookupSelector = createSelector(gridRowSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
+  lookup[rowId] = rowId;
+  return lookup;
+}, {}));

package/modern/hooks/features/rowSelection/index.js

@@ -0,0 +1 @@
+export * from './gridRowSelectionSelector';

package/modern/hooks/features/{selection/useGridSelection.js → rowSelection/useGridRowSelection.js}

@@ -4,7 +4,7 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
+import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridRowSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
 import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
@@ -30,8 +30,8 @@ const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   return [selectionModelProp];
 };
 
-export const selectionStateInitializer = (state, props) => _extends({}, state, {
-  selection: getSelectionModelPropValue(props.selectionModel) ?? []
+export const rowSelectionStateInitializer = (state, props) => _extends({}, state, {
+  rowSelection: getSelectionModelPropValue(props.rowSelectionModel) ?? []
 });
 /**
  * @requires useGridRows (state, method) - can be after
@@ -40,28 +40,28 @@ export const selectionStateInitializer = (state, props) => _extends({}, state, {
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
-export const useGridSelection = (apiRef, props) => {
+export const useGridRowSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
-  const propSelectionModel = React.useMemo(() => {
-    return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
-  }, [apiRef, props.selectionModel]);
+  const propRowSelectionModel = React.useMemo(() => {
+    return getSelectionModelPropValue(props.rowSelectionModel, gridRowSelectionStateSelector(apiRef.current.state));
+  }, [apiRef, props.rowSelectionModel]);
   const lastRowToggled = React.useRef(null);
   apiRef.current.unstable_registerControlState({
-    stateId: 'selection',
-    propModel: propSelectionModel,
-    propOnChange: props.onSelectionModelChange,
-    stateSelector: gridSelectionStateSelector,
-    changeEvent: 'selectionChange'
+    stateId: 'rowSelection',
+    propModel: propRowSelectionModel,
+    propOnChange: props.onRowSelectionModelChange,
+    stateSelector: gridRowSelectionStateSelector,
+    changeEvent: 'rowSelectionChange'
   });
   const {
     checkboxSelection,
-    disableMultipleSelection,
-    disableSelectionOnClick,
+    disableMultipleRowSelection,
+    disableRowSelectionOnClick,
     pagination,
     paginationMode,
     isRowSelectable: propIsRowSelectable
   } = props;
-  const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
+  const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
   const visibleRows = useGridVisibleRows(apiRef, props);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
@@ -94,18 +94,18 @@ export const useGridSelection = (apiRef, props) => {
    * API METHODS
    */
 
-  const setSelectionModel = React.useCallback(model => {
-    const currentModel = gridSelectionStateSelector(apiRef.current.state);
+  const setRowSelectionModel = React.useCallback(model => {
+    const currentModel = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (currentModel !== model) {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => _extends({}, state, {
-        selection: model
+        rowSelection: model
       }));
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
-  const isRowSelected = React.useCallback(id => gridSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
+  const isRowSelected = React.useCallback(id => gridRowSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
@@ -129,10 +129,10 @@ export const useGridSelection = (apiRef, props) => {
 
     if (resetSelection) {
       logger.debug(`Setting selection for row ${id}`);
-      apiRef.current.setSelectionModel(isSelected ? [id] : []);
+      apiRef.current.setRowSelectionModel(isSelected ? [id] : []);
     } else {
       logger.debug(`Toggling selection for row ${id}`);
-      const selection = gridSelectionStateSelector(apiRef.current.state);
+      const selection = gridRowSelectionStateSelector(apiRef.current.state);
       const newSelection = selection.filter(el => el !== id);
 
       if (isSelected) {
@@ -142,7 +142,7 @@ export const useGridSelection = (apiRef, props) => {
       const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
       if (isSelectionValid) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
@@ -170,7 +170,7 @@ export const useGridSelection = (apiRef, props) => {
     const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
     if (isSelectionValid) {
-      apiRef.current.setSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(newSelection);
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
   const selectRowRange = React.useCallback(({
@@ -194,7 +194,7 @@ export const useGridSelection = (apiRef, props) => {
     selectRow,
     selectRows,
     selectRowRange,
-    setSelectionModel,
+    setRowSelectionModel,
     getSelectedRows,
     isRowSelected,
     isRowSelectable
@@ -209,7 +209,7 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
@@ -223,7 +223,7 @@ export const useGridSelection = (apiRef, props) => {
     });
 
     if (hasChanged) {
-      apiRef.current.setSelectionModel(Object.values(selectionLookup));
+      apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
     }
   }, [apiRef, props.keepNonExistentRowsSelected]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
@@ -243,7 +243,7 @@ export const useGridSelection = (apiRef, props) => {
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleCellClick = React.useCallback((params, event) => {
-    if (disableSelectionOnClick) {
+    if (disableRowSelectionOnClick) {
       return;
     }
 
@@ -274,7 +274,7 @@ export const useGridSelection = (apiRef, props) => {
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
+  }, [disableRowSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       window.getSelection()?.removeAllRanges();
@@ -373,29 +373,29 @@ export const useGridSelection = (apiRef, props) => {
    */
 
   React.useEffect(() => {
-    if (propSelectionModel !== undefined) {
-      apiRef.current.setSelectionModel(propSelectionModel);
+    if (propRowSelectionModel !== undefined) {
+      apiRef.current.setRowSelectionModel(propRowSelectionModel);
     }
-  }, [apiRef, propSelectionModel]);
-  const isStateControlled = propSelectionModel != null;
+  }, [apiRef, propRowSelectionModel]);
+  const isStateControlled = propRowSelectionModel != null;
   React.useEffect(() => {
     if (isStateControlled) {
       return;
     } // props.isRowSelectable changed
 
 
-    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (isRowSelectable) {
       const newSelection = currentSelection.filter(id => isRowSelectable(id));
 
       if (newSelection.length < currentSelection.length) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, isRowSelectable, isStateControlled]);
   React.useEffect(() => {
-    const currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
@@ -419,7 +419,7 @@ export const useGridSelection = (apiRef, props) => {
 
         return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page
       });
-      apiRef.current.setSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
+      apiRef.current.setRowSelectionModel(firstSelectableRow !== undefined ? [firstSelectableRow] : []);
     }
-  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleSelection, isRowSelectable, pagination, paginationMode]);
+  }, [apiRef, canHaveMultipleSelection, checkboxSelection, disableMultipleRowSelection, isRowSelectable, pagination, paginationMode]);
 };

package/modern/hooks/features/{selection/useGridSelectionPreProcessors.js → rowSelection/useGridRowSelectionPreProcessors.js}

@@ -18,7 +18,7 @@ const useUtilityClasses = ownerState => {
   }, [classes]);
 };
 
-export const useGridSelectionPreProcessors = (apiRef, props) => {
+export const useGridRowSelectionPreProcessors = (apiRef, props) => {
   const ownerState = {
     classes: props.classes
   };

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -34,7 +34,8 @@ export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) =>
 export const createRowsInternalCache = ({
   rows,
   getRowId,
-  loading
+  loading,
+  rowCount
 }) => {
   const updates = {
     type: 'full',
@@ -54,6 +55,7 @@ export const createRowsInternalCache = ({
   return {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     updates,
     dataRowIdToIdLookup,
     dataRowIdToModelLookup
@@ -262,7 +264,8 @@ export const updateCacheWithNewRows = ({
     dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
-    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates
+    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,
+    rowCountPropBeforePartialUpdates: previousCache.rowCountPropBeforePartialUpdates
   };
 };
 export function calculatePinnedRowsHeight(apiRef) {