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

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

@@ -5,7 +5,7 @@ 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';
@@ -13,11 +13,13 @@ export var focusStateInitializer = function focusStateInitializer(state) {
   return _extends({}, state, {
     focus: {
       cell: null,
-      columnHeader: null
+      columnHeader: null,
+      columnGroupHeader: null
     },
     tabIndex: {
       cell: null,
-      columnHeader: null
+      columnHeader: null,
+      columnGroupHeader: null
     }
   });
 };
@@ -53,14 +55,16 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
             id: id,
             field: field
           },
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         },
         focus: {
           cell: {
             id: id,
             field: field
           },
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       });
     });
@@ -89,18 +93,53 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
           columnHeader: {
             field: field
           },
-          cell: null
+          cell: null,
+          columnGroupHeader: null
         },
         focus: {
           columnHeader: {
             field: field
           },
-          cell: null
+          cell: null,
+          columnGroupHeader: null
         }
       });
     });
     apiRef.current.forceUpdate();
   }, [apiRef, logger, publishCellFocusOut]);
+  var setColumnGroupHeaderFocus = React.useCallback(function (field, depth) {
+    var event = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var cell = gridFocusCellSelector(apiRef);
+
+    if (cell) {
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+    }
+
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        tabIndex: {
+          columnGroupHeader: {
+            field: field,
+            depth: depth
+          },
+          columnHeader: null,
+          cell: null
+        },
+        focus: {
+          columnGroupHeader: {
+            field: field,
+            depth: depth
+          },
+          columnHeader: null,
+          cell: null
+        }
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  var getColumnGroupHeaderFocus = React.useCallback(function () {
+    return unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+  }, [apiRef]);
   var moveFocusToRelativeCell = React.useCallback(function (id, field, direction) {
     var columnIndexToFocus = apiRef.current.getColumnIndex(field);
     var rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
@@ -175,13 +214,30 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
 
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef]);
+  var focussedColumnGroup = unstable_gridFocusColumnGroupHeaderSelector(apiRef);
+  var handleColumnGroupHeaderFocus = React.useCallback(function (_ref3, event) {
+    var fields = _ref3.fields,
+        depth = _ref3.depth;
+
+    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]);
   var handleBlur = React.useCallback(function () {
     logger.debug("Clearing focus");
     apiRef.current.setState(function (state) {
       return _extends({}, state, {
         focus: {
           cell: null,
-          columnHeader: null
+          columnHeader: null,
+          columnGroupHeader: null
         }
       });
     });
@@ -219,7 +275,8 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
         return _extends({}, state, {
           focus: {
             cell: null,
-            columnHeader: null
+            columnHeader: null,
+            columnGroupHeader: null
           }
         });
       });
@@ -248,7 +305,8 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
         return _extends({}, state, {
           focus: {
             cell: null,
-            columnHeader: null
+            columnHeader: null,
+            columnGroupHeader: null
           }
         });
       });
@@ -257,7 +315,9 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   useGridApiMethod(apiRef, {
     setCellFocus: setCellFocus,
     setColumnHeaderFocus: setColumnHeaderFocus,
-    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell
+    unstable_moveFocusToRelativeCell: moveFocusToRelativeCell,
+    unstable_setColumnGroupHeaderFocus: setColumnGroupHeaderFocus,
+    unstable_getColumnGroupHeaderFocus: getColumnGroupHeaderFocus
   }, 'GridFocusApi');
   React.useEffect(function () {
     var doc = ownerDocument(apiRef.current.rootElementRef.current);
@@ -272,5 +332,6 @@ export var useGridFocus = function useGridFocus(apiRef, props) {
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridApiEventHandler(apiRef, 'cellModeChange', handleCellModeChange);
   useGridApiEventHandler(apiRef, 'columnHeaderFocus', handleColumnHeaderFocus);
+  useGridApiEventHandler(apiRef, 'columnGroupHeaderFocus', handleColumnGroupHeaderFocus);
   useGridApiEventHandler(apiRef, 'rowsSet', handleRowSet);
 };

package/legacy/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/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -11,6 +11,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) {
   var pinnedRows = gridPinnedRowsSelector(apiRef) || {};
@@ -74,6 +77,14 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     var field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  var goToGroupHeader = React.useCallback(function (colIndex, depth, event) {
+    logger.debug("Navigating to header col ".concat(colIndex));
+    apiRef.current.scrollToIndexes({
+      colIndex: colIndex
+    });
+    var field = apiRef.current.getVisibleColumns()[colIndex].field;
+    apiRef.current.unstable_setColumnGroupHeaderFocus(field, depth, event);
+  }, [apiRef, logger]);
   var getRowIdFromIndex = React.useCallback(function (rowIndex) {
     return currentPageRows[rowIndex].id;
   }, [currentPageRows]);
@@ -247,6 +258,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     var lastRowIndexInPage = currentPageRows.length - 1;
     var firstColIndex = 0;
     var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    var columnGroupMaxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
     var shouldPreventDefault = true;
 
     switch (event.key) {
@@ -277,6 +289,15 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
           break;
         }
 
+      case 'ArrowUp':
+        {
+          if (columnGroupMaxDepth > 0) {
+            goToGroupHeader(colIndexBefore, columnGroupMaxDepth - 1, event);
+          }
+
+          break;
+        }
+
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
@@ -322,7 +343,113 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  var focusedColumnGroup = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  var handleColumnGroupHeaderKeyDown = React.useCallback(function (params, event) {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return;
+    }
+
+    if (focusedColumnGroup === null) {
+      return;
+    }
+
+    var currentField = focusedColumnGroup.field,
+        currentDepth = focusedColumnGroup.depth;
+    var fields = params.fields,
+        depth = params.depth,
+        maxDepth = params.maxDepth;
+    var viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+    var currentColIndex = apiRef.current.getColumnIndex(currentField);
+    var colIndexBefore = currentField ? apiRef.current.getColumnIndex(currentField) : 0;
+    var firstRowIndexInPage = 0;
+    var lastRowIndexInPage = currentPageRows.length - 1;
+    var firstColIndex = 0;
+    var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    var 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':
+        {
+          var remainingRightColumns = fields.length - fields.indexOf(currentField) - 1;
+
+          if (currentColIndex + remainingRightColumns + 1 <= lastColIndex) {
+            goToGroupHeader(currentColIndex + remainingRightColumns + 1, currentDepth, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          var 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]);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {
@@ -338,5 +465,6 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
   }, [apiRef]);
   useGridApiEventHandler(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
   useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

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

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

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

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

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

@@ -5,7 +5,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';
@@ -31,11 +31,11 @@ var getSelectionModelPropValue = function getSelectionModelPropValue(selectionMo
   return [selectionModelProp];
 };
 
-export var selectionStateInitializer = function selectionStateInitializer(state, props) {
+export var rowSelectionStateInitializer = function rowSelectionStateInitializer(state, props) {
   var _getSelectionModelPro;
 
   return _extends({}, state, {
-    selection: (_getSelectionModelPro = getSelectionModelPropValue(props.selectionModel)) != null ? _getSelectionModelPro : []
+    rowSelection: (_getSelectionModelPro = getSelectionModelPropValue(props.rowSelectionModel)) != null ? _getSelectionModelPro : []
   });
 };
 /**
@@ -45,26 +45,26 @@ export var selectionStateInitializer = function selectionStateInitializer(state,
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
-export var useGridSelection = function useGridSelection(apiRef, props) {
+export var useGridRowSelection = function useGridRowSelection(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridSelection');
-  var propSelectionModel = React.useMemo(function () {
-    return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
-  }, [apiRef, props.selectionModel]);
+  var propRowSelectionModel = React.useMemo(function () {
+    return getSelectionModelPropValue(props.rowSelectionModel, gridRowSelectionStateSelector(apiRef.current.state));
+  }, [apiRef, props.rowSelectionModel]);
   var 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'
   });
   var checkboxSelection = props.checkboxSelection,
-      disableMultipleSelection = props.disableMultipleSelection,
-      disableSelectionOnClick = props.disableSelectionOnClick,
+      disableMultipleRowSelection = props.disableMultipleRowSelection,
+      disableRowSelectionOnClick = props.disableRowSelectionOnClick,
       pagination = props.pagination,
       paginationMode = props.paginationMode,
       propIsRowSelectable = props.isRowSelectable;
-  var canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
+  var canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
   var visibleRows = useGridVisibleRows(apiRef, props);
   var expandMouseRowRangeSelection = React.useCallback(function (id) {
     var _lastRowToggled$curre;
@@ -103,21 +103,21 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
    * API METHODS
    */
 
-  var setSelectionModel = React.useCallback(function (model) {
-    var currentModel = gridSelectionStateSelector(apiRef.current.state);
+  var setRowSelectionModel = React.useCallback(function (model) {
+    var currentModel = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (currentModel !== model) {
       logger.debug("Setting selection model");
       apiRef.current.setState(function (state) {
         return _extends({}, state, {
-          selection: model
+          rowSelection: model
         });
       });
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
   var isRowSelected = React.useCallback(function (id) {
-    return gridSelectionStateSelector(apiRef.current.state).includes(id);
+    return gridRowSelectionStateSelector(apiRef.current.state).includes(id);
   }, [apiRef]);
   var isRowSelectable = React.useCallback(function (id) {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
@@ -147,10 +147,10 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
 
     if (resetSelection) {
       logger.debug("Setting selection for row ".concat(id));
-      apiRef.current.setSelectionModel(isSelected ? [id] : []);
+      apiRef.current.setRowSelectionModel(isSelected ? [id] : []);
     } else {
       logger.debug("Toggling selection for row ".concat(id));
-      var selection = gridSelectionStateSelector(apiRef.current.state);
+      var selection = gridRowSelectionStateSelector(apiRef.current.state);
       var newSelection = selection.filter(function (el) {
         return el !== id;
       });
@@ -162,7 +162,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       var isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
       if (isSelectionValid) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
@@ -194,7 +194,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     var isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
     if (isSelectionValid) {
-      apiRef.current.setSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(newSelection);
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
   var selectRowRange = React.useCallback(function (_ref) {
@@ -225,7 +225,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     selectRow: selectRow,
     selectRows: selectRows,
     selectRowRange: selectRowRange,
-    setSelectionModel: setSelectionModel,
+    setRowSelectionModel: setRowSelectionModel,
     getSelectedRows: getSelectedRows,
     isRowSelected: isRowSelected,
     isRowSelectable: isRowSelectable
@@ -240,7 +240,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       return;
     }
 
-    var currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    var currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     var rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
     var selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
@@ -254,7 +254,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     });
 
     if (hasChanged) {
-      apiRef.current.setSelectionModel(Object.values(selectionLookup));
+      apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
     }
   }, [apiRef, props.keepNonExistentRowsSelected]);
   var handleSingleRowSelection = React.useCallback(function (id, event) {
@@ -274,7 +274,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   var handleCellClick = React.useCallback(function (params, event) {
-    if (disableSelectionOnClick) {
+    if (disableRowSelectionOnClick) {
       return;
     }
 
@@ -305,7 +305,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
+  }, [disableRowSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   var preventSelectionOnShift = React.useCallback(function (params, event) {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
@@ -408,18 +408,18 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
    */
 
   React.useEffect(function () {
-    if (propSelectionModel !== undefined) {
-      apiRef.current.setSelectionModel(propSelectionModel);
+    if (propRowSelectionModel !== undefined) {
+      apiRef.current.setRowSelectionModel(propRowSelectionModel);
     }
-  }, [apiRef, propSelectionModel]);
-  var isStateControlled = propSelectionModel != null;
+  }, [apiRef, propRowSelectionModel]);
+  var isStateControlled = propRowSelectionModel != null;
   React.useEffect(function () {
     if (isStateControlled) {
       return;
     } // props.isRowSelectable changed
 
 
-    var currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    var currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (isRowSelectable) {
       var newSelection = currentSelection.filter(function (id) {
@@ -427,12 +427,12 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       });
 
       if (newSelection.length < currentSelection.length) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, isRowSelectable, isStateControlled]);
   React.useEffect(function () {
-    var currentSelection = gridSelectionStateSelector(apiRef.current.state);
+    var currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
 
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       var _getVisibleRows = getVisibleRows(apiRef, {
@@ -455,7 +455,7 @@ export var useGridSelection = function 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/legacy/hooks/features/{selection/useGridSelectionPreProcessors.js → rowSelection/useGridRowSelectionPreProcessors.js}

@@ -17,7 +17,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   }, [classes]);
 };
 
-export var useGridSelectionPreProcessors = function useGridSelectionPreProcessors(apiRef, props) {
+export var useGridRowSelectionPreProcessors = function useGridRowSelectionPreProcessors(apiRef, props) {
   var ownerState = {
     classes: props.classes
   };

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

@@ -39,7 +39,8 @@ export var getRowIdFromRowModel = function getRowIdFromRowModel(rowModel, getRow
 export var createRowsInternalCache = function createRowsInternalCache(_ref) {
   var rows = _ref.rows,
       getRowId = _ref.getRowId,
-      loading = _ref.loading;
+      loading = _ref.loading,
+      rowCount = _ref.rowCount;
   var updates = {
     type: 'full',
     rows: []
@@ -60,6 +61,7 @@ export var createRowsInternalCache = function createRowsInternalCache(_ref) {
   return {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     updates: updates,
     dataRowIdToIdLookup: dataRowIdToIdLookup,
     dataRowIdToModelLookup: dataRowIdToModelLookup
@@ -278,7 +280,8 @@ export var updateCacheWithNewRows = function updateCacheWithNewRows(_ref4) {
     dataRowIdToIdLookup: dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
-    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates
+    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,
+    rowCountPropBeforePartialUpdates: previousCache.rowCountPropBeforePartialUpdates
   };
 };
 export function calculatePinnedRowsHeight(apiRef) {