@mui/x-data-grid 5.6.1 → 5.9.0

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

@@ -3,12 +3,12 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents } from '../../../models/events';
-import { checkGridRowIdIsValid } from '../../../models/gridRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector, gridRowGroupingNameSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { checkGridRowIdIsValid } from './gridRowsUtils';
 
 function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   var id = getRowId ? getRowId(rowModel) : rowModel.id;
@@ -44,16 +44,17 @@ var convertGridRowsPropToState = function convertGridRowsPropToState(_ref) {
   };
 };
 
-var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTree, apiRef, rowCountProp) {
+var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTree, apiRef, rowCountProp, loadingProp) {
   var value = rowsCache.state.value;
   var rowCount = rowCountProp != null ? rowCountProp : 0;
-  var groupingResponse = apiRef.current.unstable_groupRows(_extends({}, value, {
+  var groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
     previousTree: previousTree
   }));
   var dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(function (node) {
     return node.parent == null;
   }).length;
   return _extends({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
@@ -76,15 +77,11 @@ export var rowsStateInitializer = function rowsStateInitializer(state, props, ap
     lastUpdateMs: Date.now()
   };
   return _extends({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
+    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount, props.loading),
     rowsCache: rowsCache // TODO remove from state
 
   });
 };
-/**
- * @requires useGridRowGroupsPreProcessing (method)
- */
-
 export var useGridRows = function useGridRows(apiRef, props) {
   if (process.env.NODE_ENV !== 'production') {
     // Freeze rows for immutability
@@ -96,27 +93,24 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
   var currentPage = useGridVisibleRows(apiRef, props);
   var getRow = React.useCallback(function (id) {
-    var _gridRowsLookupSelect;
+    var _ref2;
 
-    return (_gridRowsLookupSelect = gridRowsLookupSelector(apiRef)[id]) != null ? _gridRowsLookupSelect : null;
+    return (_ref2 = gridRowsLookupSelector(apiRef)[id]) != null ? _ref2 : null;
   }, [apiRef]);
   var lookup = React.useMemo(function () {
-    return currentPage.rows.reduce(function (acc, _ref2, index) {
-      var id = _ref2.id;
+    return currentPage.rows.reduce(function (acc, _ref3, index) {
+      var id = _ref3.id;
       acc[id] = index;
       return acc;
     }, {});
   }, [currentPage.rows]);
-  var getRowIndexRelativeToVisibleRows = React.useCallback(function (id) {
-    return lookup[id];
-  }, [lookup]);
   var throttledRowsChange = React.useCallback(function (newState, throttle) {
     var run = function run() {
       rowsCache.current.timeout = null;
       rowsCache.current.lastUpdateMs = Date.now();
       apiRef.current.setState(function (state) {
         return _extends({}, state, {
-          rows: getRowsStateFromCache(rowsCache.current, gridRowTreeSelector(apiRef), apiRef, props.rowCount)
+          rows: getRowsStateFromCache(rowsCache.current, gridRowTreeSelector(apiRef), apiRef, props.rowCount, props.loading)
         });
       });
       apiRef.current.publishEvent(GridEvents.rowsSet);
@@ -143,7 +137,11 @@ export var useGridRows = function useGridRows(apiRef, props) {
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
+  /**
+   * API METHODS
+   */
+
   var setRows = React.useCallback(function (rows) {
     logger.debug("Updating all rows, new length ".concat(rows.length));
     throttledRowsChange(convertGridRowsPropToState({
@@ -156,7 +154,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
     if (props.signature === 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.
       throw new Error(["MUI: You can't update several rows at once in `apiRef.current.updateRows` on the DataGrid.", 'You need to upgrade to the DataGridPro component to unlock this feature.'].join('\n'));
-    } // we removes duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
+    } // we remove duplicate updates. A server can batch updates, and send several updates for the same row in one fn call.
 
 
     var uniqUpdates = new Map();
@@ -218,6 +216,9 @@ export var useGridRows = function useGridRows(apiRef, props) {
   var getAllRowIds = React.useCallback(function () {
     return gridRowIdsSelector(apiRef);
   }, [apiRef]);
+  var getRowIndexRelativeToVisibleRows = React.useCallback(function (id) {
+    return lookup[id];
+  }, [lookup]);
   var setRowChildrenExpansion = React.useCallback(function (id, isExpanded) {
     var currentNode = apiRef.current.getRowNode(id);
 
@@ -244,6 +245,61 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
     return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  var rowApi = {
+    getRow: getRow,
+    getRowModels: getRowModels,
+    getRowsCount: getRowsCount,
+    getAllRowIds: getAllRowIds,
+    setRows: setRows,
+    updateRows: updateRows,
+    setRowChildrenExpansion: setRowChildrenExpansion,
+    getRowNode: getRowNode,
+    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows
+  };
+  /**
+   * EVENTS
+   */
+
+  var groupRows = React.useCallback(function () {
+    logger.info("Row grouping pre-processing have changed, regenerating the row tree");
+    var rows;
+
+    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+      // The `props.rows` has not changed since the last row grouping
+      // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
+      rows = undefined;
+    } else {
+      // The `props.rows` has changed since the last row grouping
+      // We must use the new `props.rows` on the new grouping
+      // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
+      rows = props.rows;
+    }
+
+    throttledRowsChange(convertGridRowsPropToState({
+      rows: rows,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  var handleStrategyProcessorChange = React.useCallback(function (methodName) {
+    if (methodName === 'rowTreeCreation') {
+      groupRows();
+    }
+  }, [groupRows]);
+  var handleStrategyActivityChange = React.useCallback(function () {
+    // `rowTreeCreation` is the only processor ran when `strategyAvailabilityChange` is fired.
+    // All the other processors listen to `rowsSet` which will be published by the `groupRows` method below.
+    if (apiRef.current.unstable_getActiveStrategy('rowTree') !== gridRowGroupingNameSelector(apiRef)) {
+      groupRows();
+    }
+  }, [apiRef, groupRows]);
+  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  useGridApiMethod(apiRef, rowApi, 'GridRowApi');
+  /**
+   * EFFECTS
+   */
+
   React.useEffect(function () {
     return function () {
       if (rowsCache.current.timeout !== null) {
@@ -273,38 +329,4 @@ export var useGridRows = function useGridRows(apiRef, props) {
       prevState: rowsCache.current.state
     }), false);
   }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
-  var handleGroupRows = React.useCallback(function () {
-    logger.info("Row grouping pre-processing have changed, regenerating the row tree");
-    var rows;
-
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
-      // The `props.rows` has not changed since the last row grouping
-      // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
-      rows = undefined;
-    } else {
-      // The `props.rows` has changed since the last row grouping
-      // We must use the new `props.rows` on the new grouping
-      // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
-      rows = props.rows;
-    }
-
-    throttledRowsChange(convertGridRowsPropToState({
-      rows: rows,
-      getRowId: props.getRowId,
-      prevState: rowsCache.current.state
-    }), false);
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
-  useGridApiEventHandler(apiRef, GridEvents.rowGroupsPreProcessingChange, handleGroupRows);
-  var rowApi = {
-    getRow: getRow,
-    getRowModels: getRowModels,
-    getRowsCount: getRowsCount,
-    getAllRowIds: getAllRowIds,
-    setRows: setRows,
-    updateRows: updateRows,
-    setRowChildrenExpansion: setRowChildrenExpansion,
-    getRowNode: getRowNode,
-    getRowIndexRelativeToVisibleRows: getRowIndexRelativeToVisibleRows
-  };
-  useGridApiMethod(apiRef, rowApi, 'GridRowApi');
 };

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

@@ -7,8 +7,7 @@ import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../dens
 import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
-import { GridEvents } from '../../../models/events/gridEvents';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export var rowsMetaStateInitializer = function rowsMetaStateInitializer(state) {
   return _extends({}, state, {
     rowsMeta: {
@@ -65,16 +64,17 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
         if (getRowSpacing) {
           var _spacing$top, _spacing$bottom;
 
-          var index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          var indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
           var spacing = getRowSpacing(_extends({}, row, {
-            isFirstVisible: index === 0,
-            isLastVisible: index === currentPage.rows.length - 1
+            isFirstVisible: indexRelativeToCurrentPage === 0,
+            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+            indexRelativeToCurrentPage: indexRelativeToCurrentPage
           }));
           initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
         }
 
-        var sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        var sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
         var finalRowHeight = Object.values(sizes).reduce(function (acc2, value) {
           return acc2 + value;
         }, 0);
@@ -122,14 +122,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   React.useEffect(function () {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  var handlePreProcessorRegister = React.useCallback(function (name) {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   var rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

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

@@ -0,0 +1,36 @@
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
+
+var flatRowTreeCreationMethod = function flatRowTreeCreationMethod(_ref) {
+  var ids = _ref.ids,
+      idRowsLookup = _ref.idRowsLookup,
+      previousTree = _ref.previousTree;
+  var tree = {};
+
+  for (var i = 0; i < ids.length; i += 1) {
+    var rowId = ids[i];
+
+    if (previousTree && previousTree[rowId]) {
+      tree[rowId] = previousTree[rowId];
+    } else {
+      tree[rowId] = {
+        id: rowId,
+        depth: 0,
+        parent: null,
+        groupingKey: '',
+        groupingField: null
+      };
+    }
+  }
+
+  return {
+    groupingName: GRID_DEFAULT_STRATEGY,
+    tree: tree,
+    treeDepth: 1,
+    idRowsLookup: idRowsLookup,
+    ids: ids
+  };
+};
+
+export var useGridRowsPreProcessors = function useGridRowsPreProcessors(apiRef) {
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'rowTreeCreation', flatRowTreeCreationMethod);
+};

package/legacy/hooks/features/scroll/useGridScroll.js

@@ -2,11 +2,12 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
 import * as React from 'react';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPaginationSelector';
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridNativeEventListener } from '../../utils/useGridNativeEventListener'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 
 function scrollIntoView(dimensions) {
@@ -31,6 +32,8 @@ function scrollIntoView(dimensions) {
  * @requires useGridColumns (state) - can be after, async only
  * @requires useGridRows (state) - can be after, async only
  * @requires useGridRowsMeta (state) - can be after, async only
+ * @requires useGridFilter (state)
+ * @requires useGridColumnSpanning (method)
  */
 
 
@@ -38,11 +41,13 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridScroll');
   var colRef = apiRef.current.columnHeadersElementRef;
   var windowRef = apiRef.current.windowRef;
+  var visibleSortedRows = useGridSelector(apiRef, gridVisibleSortedRowEntriesSelector);
   var scrollToIndexes = React.useCallback(function (params) {
     var totalRowCount = gridRowCountSelector(apiRef);
     var visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    var scrollToHeader = params.rowIndex == null;
 
-    if (totalRowCount === 0 || visibleColumns.length === 0) {
+    if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
     }
 
@@ -51,10 +56,27 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
 
     if (params.colIndex != null) {
       var columnPositions = gridColumnPositionsSelector(apiRef);
+      var cellWidth;
+
+      if (typeof params.rowIndex !== 'undefined') {
+        var _visibleSortedRows$pa;
+
+        var rowId = (_visibleSortedRows$pa = visibleSortedRows[params.rowIndex]) == null ? void 0 : _visibleSortedRows$pa.id;
+        var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, params.colIndex);
+
+        if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+          cellWidth = cellColSpanInfo.cellProps.width;
+        }
+      }
+
+      if (typeof cellWidth === 'undefined') {
+        cellWidth = visibleColumns[params.colIndex].computedWidth;
+      }
+
       scrollCoordinates.left = scrollIntoView({
         clientHeight: windowRef.current.clientWidth,
         scrollTop: windowRef.current.scrollLeft,
-        offsetHeight: visibleColumns[params.colIndex].computedWidth,
+        offsetHeight: cellWidth,
         offsetTop: columnPositions[params.colIndex]
       });
     }
@@ -73,7 +95,7 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
       });
     }
 
-    scrollCoordinates = apiRef.current.unstable_applyPreProcessors('scrollToIndexes', scrollCoordinates, params);
+    scrollCoordinates = apiRef.current.unstable_applyPipeProcessors('scrollToIndexes', scrollCoordinates, params);
 
     if (_typeof(scrollCoordinates.left) !== undefined || _typeof(scrollCoordinates.top) !== undefined) {
       apiRef.current.scroll(scrollCoordinates);
@@ -81,7 +103,7 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
     }
 
     return false;
-  }, [logger, apiRef, windowRef, props.pagination]);
+  }, [logger, apiRef, windowRef, props.pagination, visibleSortedRows]);
   var scroll = React.useCallback(function (params) {
     if (windowRef.current && params.left != null && colRef.current) {
       colRef.current.scrollLeft = params.left;
@@ -115,13 +137,4 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
     getScrollPosition: getScrollPosition
   };
   useGridApiMethod(apiRef, scrollApi, 'GridScrollApi');
-  var preventScroll = React.useCallback(function (event) {
-    event.target.scrollLeft = 0;
-    event.target.scrollTop = 0;
-  }, []);
-  useGridNativeEventListener(apiRef, function () {
-    var _apiRef$current, _apiRef$current$rende, _apiRef$current$rende2;
-
-    return (_apiRef$current = apiRef.current) == null ? void 0 : (_apiRef$current$rende = _apiRef$current.renderingZoneRef) == null ? void 0 : (_apiRef$current$rende2 = _apiRef$current$rende.current) == null ? void 0 : _apiRef$current$rende2.parentElement;
-  }, 'scroll', preventScroll);
 };

package/legacy/hooks/features/selection/useGridSelection.js

@@ -6,14 +6,15 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { isGridCellRoot } from '../../../utils/domUtils';
 import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
 import { GridCellModes } from '../../../models/gridEditRowModel';
-import { isKeyboardEvent } from '../../../utils/keyboardUtils';
-import { getVisibleRows } from '../../utils/useGridVisibleRows';
+import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
+import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 
 var getSelectionModelPropValue = function getSelectionModelPropValue(selectionModelProp, prevSelectionModel) {
   if (selectionModelProp == null) {
@@ -39,8 +40,10 @@ export var selectionStateInitializer = function selectionStateInitializer(state,
   });
 };
 /**
- * @requires useGridRows (state, method)
- * @requires useGridParamsApi (method)
+ * @requires useGridRows (state, method) - can be after
+ * @requires useGridParamsApi (method) - can be after
+ * @requires useGridFocus (state) - can be after
+ * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
 export var useGridSelection = function useGridSelection(apiRef, props) {
@@ -63,7 +66,8 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       pagination = props.pagination,
       paginationMode = props.paginationMode;
   var canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
-  var expandRowRangeSelection = React.useCallback(function (id) {
+  var visibleRows = useGridVisibleRows(apiRef, props);
+  var expandMouseRowRangeSelection = React.useCallback(function (id) {
     var _lastRowToggled$curre;
 
     var endId = id;
@@ -79,6 +83,10 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
         return rowId === endId;
       });
 
+      if (startIndex === endIndex) {
+        return;
+      }
+
       if (startIndex > endIndex) {
         endId = visibleRowIds[endIndex + 1];
       } else {
@@ -187,17 +195,18 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       return;
     }
 
-    logger.debug("Expanding selection from row ".concat(startId, " to row ").concat(endId));
-    var visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
-    var startIndex = visibleRowIds.indexOf(startId);
-    var endIndex = visibleRowIds.indexOf(endId);
+    logger.debug("Expanding selection from row ".concat(startId, " to row ").concat(endId)); // Using rows from all pages allow to select a range across several pages
+
+    var allPagesRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+    var startIndex = allPagesRowIds.indexOf(startId);
+    var endIndex = allPagesRowIds.indexOf(endId);
 
     var _ref2 = startIndex > endIndex ? [endIndex, startIndex] : [startIndex, endIndex],
         _ref3 = _slicedToArray(_ref2, 2),
         start = _ref3[0],
         end = _ref3[1];
 
-    var rowsBetweenStartAndEnd = visibleRowIds.slice(start, end + 1);
+    var rowsBetweenStartAndEnd = allPagesRowIds.slice(start, end + 1);
     apiRef.current.selectRows(rowsBetweenStartAndEnd, isSelected, resetSelection);
   }, [apiRef, logger]);
   var selectionApi = {
@@ -257,7 +266,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       return;
     }
 
-    if (params.field === '__detail_panel_toggle__') {
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }
@@ -271,11 +280,11 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     }
 
     if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandRowRangeSelection, handleSingleRowSelection]);
+  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   var preventSelectionOnShift = React.useCallback(function (params, event) {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
@@ -285,35 +294,80 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
   }, [canHaveMultipleSelection]);
   var handleRowSelectionCheckboxChange = React.useCallback(function (params, event) {
     if (event.nativeEvent.shiftKey) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       apiRef.current.selectRow(params.id, params.value);
     }
-  }, [apiRef, expandRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection]);
   var handleHeaderSelectionCheckboxChange = React.useCallback(function (params) {
     var shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     var rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridVisibleSortedRowIdsSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
   var handleCellKeyDown = React.useCallback(function (params, event) {
-    // Ignore portal
+    // Get the most recent cell mode because it may have been changed by another listener
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {
+      return;
+    } // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    // TODO replace with !event.currentTarget.contains(event.target as Element)
-    if (!isGridCellRoot(event.target)) {
+
+
+    if (!event.currentTarget.contains(event.target)) {
       return;
-    } // Get the most recent params because the cell mode may have changed by another listener
+    }
 
+    if (isNavigationKey(event.key) && event.shiftKey) {
+      // The cell that has focus after the keyboard navigation
+      var focusCell = gridFocusCellSelector(apiRef);
 
-    var cellParams = apiRef.current.getCellParams(params.id, params.field);
-    var isEditMode = cellParams.cellMode === GridCellModes.Edit;
+      if (focusCell && focusCell.id !== params.id) {
+        event.preventDefault();
+        var isNextRowSelected = apiRef.current.isRowSelected(focusCell.id);
 
-    if (isEditMode) {
-      return;
+        if (!canHaveMultipleSelection) {
+          apiRef.current.selectRow(focusCell.id, !isNextRowSelected, true);
+          return;
+        }
+
+        var newRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(focusCell.id);
+        var previousRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+        var start;
+        var end;
+
+        if (newRowIndex > previousRowIndex) {
+          if (isNextRowSelected) {
+            // We are navigating to the bottom of the page and adding selected rows
+            start = previousRowIndex;
+            end = newRowIndex - 1;
+          } else {
+            // We are navigating to the bottom of the page and removing selected rows
+            start = previousRowIndex;
+            end = newRowIndex;
+          }
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (isNextRowSelected) {
+            // We are navigating to the top of the page and removing selected rows
+            start = newRowIndex + 1;
+            end = previousRowIndex;
+          } else {
+            // We are navigating to the top of the page and adding selected rows
+            start = newRowIndex;
+            end = previousRowIndex;
+          }
+        }
+
+        var rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(function (row) {
+          return row.id;
+        });
+        apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
+        return;
+      }
     }
 
     if (event.key === ' ' && event.shiftKey) {
       event.preventDefault();
-      handleSingleRowSelection(cellParams.id, event);
+      handleSingleRowSelection(params.id, event);
       return;
     }
 
@@ -321,8 +375,8 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
+  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  useGridApiEventHandler(apiRef, GridEvents.sortedRowsSet, removeOutdatedSelection);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
   useGridApiEventHandler(apiRef, GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);

package/legacy/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
 
@@ -44,5 +44,5 @@ export var useGridSelectionPreProcessors = function useGridSelectionPreProcessor
 
     return columnsState;
   }, [apiRef, classes, props.checkboxSelection]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
 };