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

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

@@ -29,6 +29,12 @@ var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelTog
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
+var _focus = require("../focus");
+
+var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
+
+var _useGridSelector = require("../../utils/useGridSelector");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -90,6 +96,16 @@ 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]);
@@ -261,6 +277,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef).length - 1;
+    const columnGroupMaxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
     let shouldPreventDefault = true;
 
     switch (event.key) {
@@ -291,6 +308,15 @@ const useGridKeyboardNavigation = (apiRef, props) => {
           break;
         }
 
+      case 'ArrowUp':
+        {
+          if (columnGroupMaxDepth > 0) {
+            goToGroupHeader(colIndexBefore, columnGroupMaxDepth - 1, event);
+          }
+
+          break;
+        }
+
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
@@ -336,7 +362,117 @@ const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToCell, getRowIdFromIndex, goToHeader, goToGroupHeader]);
+  const focusedColumnGroup = (0, _useGridSelector.useGridSelector)(apiRef, _focus.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 = (0, _gridColumnsSelector.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)) {
@@ -352,6 +488,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
   }, [apiRef]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellNavigationKeyDown', handleCellNavigationKeyDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnGroupHeaderKeyDown', handleColumnGroupHeaderKeyDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
 };
 

package/node/hooks/features/{selection/gridSelectionSelector.js → rowSelection/gridRowSelectionSelector.js}

@@ -3,20 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectedIdsLookupSelector = exports.selectedGridRowsSelector = exports.selectedGridRowsCountSelector = exports.gridSelectionStateSelector = void 0;
+exports.selectedIdsLookupSelector = exports.selectedGridRowsSelector = exports.selectedGridRowsCountSelector = exports.gridRowSelectionStateSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
-const gridSelectionStateSelector = state => state.selection;
+const gridRowSelectionStateSelector = state => state.rowSelection;
 
-exports.gridSelectionStateSelector = gridSelectionStateSelector;
-const selectedGridRowsCountSelector = (0, _createSelector.createSelector)(gridSelectionStateSelector, selection => selection.length);
+exports.gridRowSelectionStateSelector = gridRowSelectionStateSelector;
+const selectedGridRowsCountSelector = (0, _createSelector.createSelector)(gridRowSelectionStateSelector, selection => selection.length);
 exports.selectedGridRowsCountSelector = selectedGridRowsCountSelector;
-const selectedGridRowsSelector = (0, _createSelector.createSelector)(gridSelectionStateSelector, _gridRowsSelector.gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
+const selectedGridRowsSelector = (0, _createSelector.createSelector)(gridRowSelectionStateSelector, _gridRowsSelector.gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));
 exports.selectedGridRowsSelector = selectedGridRowsSelector;
-const selectedIdsLookupSelector = (0, _createSelector.createSelector)(gridSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
+const selectedIdsLookupSelector = (0, _createSelector.createSelector)(gridRowSelectionStateSelector, selection => selection.reduce((lookup, rowId) => {
   lookup[rowId] = rowId;
   return lookup;
 }, {}));

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
+
+Object.keys(_gridRowSelectionSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRowSelectionSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRowSelectionSelector[key];
+    }
+  });
+});

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelection = exports.selectionStateInitializer = void 0;
+exports.useGridRowSelection = exports.rowSelectionStateInitializer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,7 +19,7 @@ var _useGridLogger = require("../../utils/useGridLogger");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
-var _gridSelectionSelector = require("./gridSelectionSelector");
+var _gridRowSelectionSelector = require("./gridRowSelectionSelector");
 
 var _pagination = require("../pagination");
 
@@ -57,11 +57,11 @@ const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   return [selectionModelProp];
 };
 
-const selectionStateInitializer = (state, props) => {
+const rowSelectionStateInitializer = (state, props) => {
   var _getSelectionModelPro;
 
   return (0, _extends2.default)({}, state, {
-    selection: (_getSelectionModelPro = getSelectionModelPropValue(props.selectionModel)) != null ? _getSelectionModelPro : []
+    rowSelection: (_getSelectionModelPro = getSelectionModelPropValue(props.rowSelectionModel)) != null ? _getSelectionModelPro : []
   });
 };
 /**
@@ -72,30 +72,30 @@ const selectionStateInitializer = (state, props) => {
  */
 
 
-exports.selectionStateInitializer = selectionStateInitializer;
+exports.rowSelectionStateInitializer = rowSelectionStateInitializer;
 
-const useGridSelection = (apiRef, props) => {
+const useGridRowSelection = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridSelection');
-  const propSelectionModel = React.useMemo(() => {
-    return getSelectionModelPropValue(props.selectionModel, (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state));
-  }, [apiRef, props.selectionModel]);
+  const propRowSelectionModel = React.useMemo(() => {
+    return getSelectionModelPropValue(props.rowSelectionModel, (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state));
+  }, [apiRef, props.rowSelectionModel]);
   const lastRowToggled = React.useRef(null);
   apiRef.current.unstable_registerControlState({
-    stateId: 'selection',
-    propModel: propSelectionModel,
-    propOnChange: props.onSelectionModelChange,
-    stateSelector: _gridSelectionSelector.gridSelectionStateSelector,
-    changeEvent: 'selectionChange'
+    stateId: 'rowSelection',
+    propModel: propRowSelectionModel,
+    propOnChange: props.onRowSelectionModelChange,
+    stateSelector: _gridRowSelectionSelector.gridRowSelectionStateSelector,
+    changeEvent: 'rowSelectionChange'
   });
   const {
     checkboxSelection,
-    disableMultipleSelection,
-    disableSelectionOnClick,
+    disableMultipleRowSelection,
+    disableRowSelectionOnClick,
     pagination,
     paginationMode,
     isRowSelectable: propIsRowSelectable
   } = props;
-  const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
+  const canHaveMultipleSelection = !disableMultipleRowSelection || checkboxSelection;
   const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const expandMouseRowRangeSelection = React.useCallback(id => {
     var _lastRowToggled$curre;
@@ -130,18 +130,18 @@ const useGridSelection = (apiRef, props) => {
    * API METHODS
    */
 
-  const setSelectionModel = React.useCallback(model => {
-    const currentModel = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
+  const setRowSelectionModel = React.useCallback(model => {
+    const currentModel = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
 
     if (currentModel !== model) {
       logger.debug(`Setting selection model`);
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        selection: model
+        rowSelection: model
       }));
       apiRef.current.forceUpdate();
     }
   }, [apiRef, logger]);
-  const isRowSelected = React.useCallback(id => (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state).includes(id), [apiRef]);
+  const isRowSelected = React.useCallback(id => (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
@@ -155,7 +155,7 @@ const useGridSelection = (apiRef, props) => {
 
     return true;
   }, [apiRef, propIsRowSelectable]);
-  const getSelectedRows = React.useCallback(() => (0, _gridSelectionSelector.selectedGridRowsSelector)(apiRef), [apiRef]);
+  const getSelectedRows = React.useCallback(() => (0, _gridRowSelectionSelector.selectedGridRowsSelector)(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
     if (!apiRef.current.isRowSelectable(id)) {
       return;
@@ -165,10 +165,10 @@ 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 = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
+      const selection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
       const newSelection = selection.filter(el => el !== id);
 
       if (isSelected) {
@@ -178,7 +178,7 @@ const useGridSelection = (apiRef, props) => {
       const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
 
       if (isSelectionValid) {
-        apiRef.current.setSelectionModel(newSelection);
+        apiRef.current.setRowSelectionModel(newSelection);
       }
     }
   }, [apiRef, logger, canHaveMultipleSelection]);
@@ -191,7 +191,7 @@ const useGridSelection = (apiRef, props) => {
       newSelection = isSelected ? selectableIds : [];
     } else {
       // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
-      const selectionLookup = (0, _extends2.default)({}, (0, _gridSelectionSelector.selectedIdsLookupSelector)(apiRef));
+      const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
       selectableIds.forEach(id => {
         if (isSelected) {
           selectionLookup[id] = id;
@@ -205,7 +205,7 @@ 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(({
@@ -229,7 +229,7 @@ const useGridSelection = (apiRef, props) => {
     selectRow,
     selectRows,
     selectRowRange,
-    setSelectionModel,
+    setRowSelectionModel,
     getSelectedRows,
     isRowSelected,
     isRowSelectable
@@ -244,10 +244,10 @@ const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    const currentSelection = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
+    const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
     const rowsLookup = (0, _gridRowsSelector.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 = (0, _extends2.default)({}, (0, _gridSelectionSelector.selectedIdsLookupSelector)(apiRef));
+    const selectionLookup = (0, _extends2.default)({}, (0, _gridRowSelectionSelector.selectedIdsLookupSelector)(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
       if (!rowsLookup[id]) {
@@ -257,7 +257,7 @@ 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) => {
@@ -277,7 +277,7 @@ const useGridSelection = (apiRef, props) => {
     }
   }, [apiRef, canHaveMultipleSelection, checkboxSelection]);
   const handleCellClick = React.useCallback((params, event) => {
-    if (disableSelectionOnClick) {
+    if (disableRowSelectionOnClick) {
       return;
     }
 
@@ -308,7 +308,7 @@ 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) {
       var _window$getSelection;
@@ -409,29 +409,29 @@ 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 = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
+    const currentSelection = (0, _gridRowSelectionSelector.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 = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
+    const currentSelection = (0, _gridRowSelectionSelector.gridRowSelectionStateSelector)(apiRef.current.state);
 
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
@@ -455,9 +455,9 @@ 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]);
 };
 
-exports.useGridSelection = useGridSelection;
+exports.useGridRowSelection = useGridRowSelection;

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridSelectionPreProcessors = void 0;
+exports.useGridRowSelectionPreProcessors = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   }, [classes]);
 };
 
-const useGridSelectionPreProcessors = (apiRef, props) => {
+const useGridRowSelectionPreProcessors = (apiRef, props) => {
   const ownerState = {
     classes: props.classes
   };
@@ -65,4 +65,4 @@ const useGridSelectionPreProcessors = (apiRef, props) => {
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', updateSelectionColumn);
 };
 
-exports.useGridSelectionPreProcessors = useGridSelectionPreProcessors;
+exports.useGridRowSelectionPreProcessors = useGridRowSelectionPreProcessors;

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

@@ -60,7 +60,8 @@ exports.getRowIdFromRowModel = getRowIdFromRowModel;
 const createRowsInternalCache = ({
   rows,
   getRowId,
-  loading
+  loading,
+  rowCount
 }) => {
   const updates = {
     type: 'full',
@@ -80,6 +81,7 @@ const createRowsInternalCache = ({
   return {
     rowsBeforePartialUpdates: rows,
     loadingPropBeforePartialUpdates: loading,
+    rowCountPropBeforePartialUpdates: rowCount,
     updates,
     dataRowIdToIdLookup,
     dataRowIdToModelLookup
@@ -302,7 +304,8 @@ const updateCacheWithNewRows = ({
     dataRowIdToIdLookup,
     updates: partialUpdates,
     rowsBeforePartialUpdates: previousCache.rowsBeforePartialUpdates,
-    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates
+    loadingPropBeforePartialUpdates: previousCache.loadingPropBeforePartialUpdates,
+    rowCountPropBeforePartialUpdates: previousCache.rowCountPropBeforePartialUpdates
   };
 };
 

package/node/hooks/features/rows/useGridRows.js

@@ -37,7 +37,8 @@ const rowsStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.rows = (0, _gridRowsUtils.createRowsInternalCache)({
     rows: props.rows,
     getRowId: props.getRowId,
-    loading: props.loading
+    loading: props.loading,
+    rowCount: props.rowCount
   });
   return (0, _extends2.default)({}, state, {
     rows: (0, _gridRowsUtils.getRowsStateFromCache)({
@@ -138,11 +139,12 @@ const useGridRows = (apiRef, props) => {
       cache: (0, _gridRowsUtils.createRowsInternalCache)({
         rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       }),
       throttle: true
     });
-  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === _useGridApiEventHandler.GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -373,7 +375,8 @@ const useGridRows = (apiRef, props) => {
       cache = (0, _gridRowsUtils.createRowsInternalCache)({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       });
     }
 
@@ -381,7 +384,7 @@ const useGridRows = (apiRef, props) => {
       cache,
       throttle: false
     });
-  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, props.rowCount, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -444,7 +447,8 @@ const useGridRows = (apiRef, props) => {
     }
 
     const areNewRowsAlreadyInState = apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows;
-    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
+    const isNewLoadingAlreadyInState = apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading;
+    const isNewRowCountAlreadyInState = apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates === props.rowCount; // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
     if (areNewRowsAlreadyInState) {
       // If the loading prop has changed, we need to update its value in the state because it won't be done by `throttledRowsChange`
@@ -458,6 +462,17 @@ const useGridRows = (apiRef, props) => {
         apiRef.current.forceUpdate();
       }
 
+      if (!isNewRowCountAlreadyInState) {
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          rows: (0, _extends2.default)({}, state.rows, {
+            totalRowCount: Math.max(props.rowCount || 0, state.rows.totalRowCount),
+            totalTopLevelRowCount: Math.max(props.rowCount || 0, state.rows.totalTopLevelRowCount)
+          })
+        }));
+        apiRef.current.unstable_caches.rows.rowCountPropBeforePartialUpdates = props.rowCount;
+        apiRef.current.forceUpdate();
+      }
+
       return;
     }
 
@@ -466,7 +481,8 @@ const useGridRows = (apiRef, props) => {
       cache: (0, _gridRowsUtils.createRowsInternalCache)({
         rows: props.rows,
         getRowId: props.getRowId,
-        loading: props.loading
+        loading: props.loading,
+        rowCount: props.rowCount
       }),
       throttle: false
     });

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -28,7 +28,7 @@ var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
 var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 
-var _gridEditRowsSelector = require("../editRows/gridEditRowsSelector");
+var _gridEditingSelectors = require("../editing/gridEditingSelectors");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
@@ -36,7 +36,7 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _utils2 = require("../../../utils/utils");
 
-var _gridSelectionSelector = require("../selection/gridSelectionSelector");
+var _gridRowSelectionSelector = require("../rowSelection/gridRowSelectionSelector");
 
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
@@ -109,8 +109,8 @@ const useGridVirtualScroller = props => {
   const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
   const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
   const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
-  const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditRowsSelector.gridEditRowsStateSelector);
-  const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSelectionSelector.selectedIdsLookupSelector);
+  const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
+  const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSelectionSelector.selectedIdsLookupSelector);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const renderZoneRef = React.useRef(null);
   const rootRef = React.useRef(null);

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v6.0.0-alpha.2
+/** @license MUI v6.0.0-alpha.4
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.