@mui/x-data-grid 5.6.0 → 5.8.0

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

@@ -1,11 +1,12 @@
 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) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;
@@ -47,15 +48,13 @@ const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) =>
     value
   } = rowsCache.state;
   const rowCount = rowCountProp ?? 0;
-  const groupingResponse = apiRef.current.unstable_groupRows(_extends({}, value, {
+  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
     previousTree
   }));
-  const dataTopLevelRowCount = Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
-  const totalRowCount = rowCount > groupingResponse.ids.length ? rowCount : groupingResponse.ids.length;
-  const totalTopLevelRowCount = rowCount > dataTopLevelRowCount ? rowCount : dataTopLevelRowCount;
+  const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return _extends({}, groupingResponse, {
-    totalRowCount,
-    totalTopLevelRowCount
+    totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
+    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
 };
 
@@ -81,10 +80,6 @@ export const rowsStateInitializer = (state, props, apiRef) => {
 
   });
 };
-/**
- * @requires useGridRowGroupsPreProcessing (method)
- */
-
 export const useGridRows = (apiRef, props) => {
   if (process.env.NODE_ENV !== 'production') {
     // Freeze rows for immutability
@@ -94,7 +89,14 @@ export const useGridRows = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRows');
   const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
 
+  const currentPage = useGridVisibleRows(apiRef, props);
   const getRow = React.useCallback(id => gridRowsLookupSelector(apiRef)[id] ?? null, [apiRef]);
+  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
+    id
+  }, index) => {
+    acc[id] = index;
+    return acc;
+  }, {}), [currentPage.rows]);
   const throttledRowsChange = React.useCallback((newState, throttle) => {
     const run = () => {
       rowsCache.current.timeout = null;
@@ -127,6 +129,10 @@ export const useGridRows = (apiRef, props) => {
 
     run();
   }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  /**
+   * API METHODS
+   */
+
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
     throttledRowsChange(convertGridRowsPropToState({
@@ -139,7 +145,7 @@ export const 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.
 
 
     const uniqUpdates = new Map();
@@ -193,6 +199,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => gridRowCountSelector(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => gridRowIdsSelector(apiRef), [apiRef]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
 
@@ -217,6 +224,61 @@ export const useGridRows = (apiRef, props) => {
     apiRef.current.publishEvent(GridEvents.rowExpansionChange, newNode);
   }, [apiRef]);
   const getRowNode = React.useCallback(id => gridRowTreeSelector(apiRef)[id] ?? null, [apiRef]);
+  const rowApi = {
+    getRow,
+    getRowModels,
+    getRowsCount,
+    getAllRowIds,
+    setRows,
+    updateRows,
+    setRowChildrenExpansion,
+    getRowNode,
+    getRowIndexRelativeToVisibleRows
+  };
+  /**
+   * EVENTS
+   */
+
+  const groupRows = React.useCallback(() => {
+    logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
+    let 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,
+      getRowId: props.getRowId,
+      prevState: rowsCache.current.state
+    }), false);
+  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'rowTreeCreation') {
+      groupRows();
+    }
+  }, [groupRows]);
+  const handleStrategyActivityChange = React.useCallback(() => {
+    // `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(() => {
     return () => {
       if (rowsCache.current.timeout !== null) {
@@ -246,37 +308,4 @@ export const useGridRows = (apiRef, props) => {
       prevState: rowsCache.current.state
     }), false);
   }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
-  const handleGroupRows = React.useCallback(() => {
-    logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
-    let 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,
-      getRowId: props.getRowId,
-      prevState: rowsCache.current.state
-    }), false);
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
-  useGridApiEventHandler(apiRef, GridEvents.rowGroupsPreProcessingChange, handleGroupRows);
-  const rowApi = {
-    getRow,
-    getRowModels,
-    getRowsCount,
-    getAllRowIds,
-    setRows,
-    updateRows,
-    setRowChildrenExpansion,
-    getRowNode
-  };
-  useGridApiMethod(apiRef, rowApi, 'GridRowApi');
 };

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

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../density/densitySelector';
 import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { GridEvents } from '../../../models/events/gridEvents';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+export const rowsMetaStateInitializer = state => _extends({}, state, {
+  rowsMeta: {
+    currentPageTotalHeight: 0,
+    positions: []
+  }
+});
 /**
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
@@ -18,32 +23,20 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 export const useGridRowsMeta = (apiRef, props) => {
   const {
     getRowHeight,
-    pagination,
-    paginationMode
+    getRowSpacing
   } = props;
   const rowsHeightLookup = React.useRef({});
   const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    rowsMeta: {
-      currentPageTotalHeight: 0,
-      positions: []
-    }
-  }));
+  const currentPage = useGridVisibleRows(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
-    const {
-      rows
-    } = getCurrentPageRows(apiRef, {
-      pagination,
-      paginationMode
-    });
     apiRef.current.setState(state => {
       const positions = [];
       const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
       const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
-      const currentPageTotalHeight = rows.reduce((acc, row) => {
+      const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
         positions.push(acc);
         let baseRowHeight;
         const isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
@@ -60,15 +53,28 @@ export const useGridRowsMeta = (apiRef, props) => {
               densityFactor
             })) ?? currentRowHeight;
           }
-        }
+        } // We use an object to make simple to check if a height is already added or not
 
-        const heights = apiRef.current.unstable_applyPreProcessors('rowHeight', {
+
+        const initialHeights = {
           base: baseRowHeight
-        }, // We use an object to make simple to check if a size was already added or not
-        row);
-        const finalRowHeight = Object.values(heights).reduce((acc2, value) => acc2 + value, 0);
+        };
+
+        if (getRowSpacing) {
+          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const spacing = getRowSpacing(_extends({}, row, {
+            isFirstVisible: index === 0,
+            isLastVisible: index === currentPage.rows.length - 1
+          }));
+          initialHeights.spacingTop = spacing.top ?? 0;
+          initialHeights.spacingBottom = spacing.bottom ?? 0;
+        }
+
+        const sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
+        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
         rowsHeightLookup.current[row.id] = {
           value: baseRowHeight,
+          sizes,
           isResized
         };
         return acc + finalRowHeight;
@@ -81,14 +87,19 @@ export const useGridRowsMeta = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, pagination, paginationMode, getRowHeight]);
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
   const getTargetRowHeight = rowId => rowsHeightLookup.current[rowId]?.value || rowHeight;
 
+  const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
+
   const setRowHeight = React.useCallback((id, height) => {
     rowsHeightLookup.current[id] = {
       value: height,
-      isResized: true
+      isResized: true,
+      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
+        base: height
+      })
     };
     hydrateRowsMeta();
   }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
@@ -97,16 +108,17 @@ export const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlePreProcessorRegister = React.useCallback(name => {
+  const handlepipeProcessorRegister = React.useCallback(name => {
     if (name !== 'rowHeight') {
       return;
     }
 
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
+    unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');

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

@@ -0,0 +1,37 @@
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
+
+const flatRowTreeCreationMethod = ({
+  ids,
+  idRowsLookup,
+  previousTree
+}) => {
+  const tree = {};
+
+  for (let i = 0; i < ids.length; i += 1) {
+    const 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,
+    treeDepth: 1,
+    idRowsLookup,
+    ids
+  };
+};
+
+export const useGridRowsPreProcessors = apiRef => {
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'rowTreeCreation', flatRowTreeCreationMethod);
+};

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

@@ -4,8 +4,7 @@ import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector } fro
 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 { useGridApiMethod } from '../../utils/useGridApiMethod'; // 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) {
@@ -42,8 +41,9 @@ export const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = gridRowCountSelector(apiRef);
     const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const scrollToHeader = params.rowIndex == null;
 
-    if (totalRowCount === 0 || visibleColumns.length === 0) {
+    if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
     }
 
@@ -74,7 +74,7 @@ export const 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);
@@ -116,9 +116,4 @@ export const useGridScroll = (apiRef, props) => {
     getScrollPosition
   };
   useGridApiMethod(apiRef, scrollApi, 'GridScrollApi');
-  const preventScroll = React.useCallback(event => {
-    event.target.scrollLeft = 0;
-    event.target.scrollTop = 0;
-  }, []);
-  useGridNativeEventListener(apiRef, () => apiRef.current?.renderingZoneRef?.current?.parentElement, 'scroll', preventScroll);
 };

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

@@ -5,36 +5,46 @@ 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 { useGridStateInit } from '../../utils/useGridStateInit';
 import { GridCellModes } from '../../../models/gridEditRowModel';
-import { isKeyboardEvent } from '../../../utils/keyboardUtils';
-import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
+import { getVisibleRows, useGridVisibleRows } from '../../utils/useGridVisibleRows';
+
+const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
+  if (selectionModelProp == null) {
+    return selectionModelProp;
+  }
+
+  if (Array.isArray(selectionModelProp)) {
+    return selectionModelProp;
+  }
+
+  if (prevSelectionModel && prevSelectionModel[0] === selectionModelProp) {
+    return prevSelectionModel;
+  }
+
+  return [selectionModelProp];
+};
+
+export const selectionStateInitializer = (state, props) => _extends({}, state, {
+  selection: getSelectionModelPropValue(props.selectionModel) ?? []
+});
 /**
- * @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 const useGridSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
   const propSelectionModel = React.useMemo(() => {
-    if (props.selectionModel == null) {
-      return props.selectionModel;
-    }
-
-    if (Array.isArray(props.selectionModel)) {
-      return props.selectionModel;
-    }
-
-    return [props.selectionModel];
-  }, [props.selectionModel]);
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    selection: propSelectionModel ?? []
-  }));
+    return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
+  }, [apiRef, props.selectionModel]);
   const lastRowToggled = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'selection',
@@ -52,7 +62,8 @@ export const useGridSelection = (apiRef, props) => {
     paginationMode
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
-  const expandRowRangeSelection = React.useCallback(id => {
+  const visibleRows = useGridVisibleRows(apiRef, props);
+  const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;
     const isSelected = apiRef.current.isRowSelected(id);
@@ -62,6 +73,10 @@ export const useGridSelection = (apiRef, props) => {
       const startIndex = visibleRowIds.findIndex(rowId => rowId === startId);
       const endIndex = visibleRowIds.findIndex(rowId => rowId === endId);
 
+      if (startIndex === endIndex) {
+        return;
+      }
+
       if (startIndex > endIndex) {
         endId = visibleRowIds[endIndex + 1];
       } else {
@@ -153,12 +168,13 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    logger.debug(`Expanding selection from row ${startId} to row ${endId}`);
-    const visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
-    const startIndex = visibleRowIds.indexOf(startId);
-    const endIndex = visibleRowIds.indexOf(endId);
+    logger.debug(`Expanding selection from row ${startId} to row ${endId}`); // Using rows from all pages allow to select a range across several pages
+
+    const allPagesRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+    const startIndex = allPagesRowIds.indexOf(startId);
+    const endIndex = allPagesRowIds.indexOf(endId);
     const [start, end] = startIndex > endIndex ? [endIndex, startIndex] : [startIndex, endIndex];
-    const rowsBetweenStartAndEnd = visibleRowIds.slice(start, end + 1);
+    const rowsBetweenStartAndEnd = allPagesRowIds.slice(start, end + 1);
     apiRef.current.selectRows(rowsBetweenStartAndEnd, isSelected, resetSelection);
   }, [apiRef, logger]);
   const selectionApi = {
@@ -232,11 +248,11 @@ export const 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]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       window.getSelection()?.removeAllRanges();
@@ -244,35 +260,78 @@ export const useGridSelection = (apiRef, props) => {
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
     if (event.nativeEvent.shiftKey) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       apiRef.current.selectRow(params.id, params.value);
     }
-  }, [apiRef, expandRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridVisibleSortedRowIdsSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
   const handleCellKeyDown = React.useCallback((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
+      const focusCell = gridFocusCellSelector(apiRef);
 
-    const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    const isEditMode = cellParams.cellMode === GridCellModes.Edit;
+      if (focusCell && focusCell.id !== params.id) {
+        event.preventDefault();
+        const isNextRowSelected = apiRef.current.isRowSelected(focusCell.id);
 
-    if (isEditMode) {
-      return;
+        if (!canHaveMultipleSelection) {
+          apiRef.current.selectRow(focusCell.id, !isNextRowSelected, true);
+          return;
+        }
+
+        const newRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(focusCell.id);
+        const previousRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+        let start;
+        let 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;
+          }
+        }
+
+        const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
+        apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
+        return;
+      }
     }
 
     if (event.key === ' ' && event.shiftKey) {
       event.preventDefault();
-      handleSingleRowSelection(cellParams.id, event);
+      handleSingleRowSelection(params.id, event);
       return;
     }
 
@@ -280,7 +339,7 @@ export const useGridSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows]);
+  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
@@ -319,7 +378,7 @@ export const useGridSelection = (apiRef, props) => {
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
         rows: currentPageRows
-      } = getCurrentPageRows(apiRef, {
+      } = getVisibleRows(apiRef, {
         pagination,
         paginationMode
       });

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

@@ -1,7 +1,7 @@
 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';
 
@@ -43,5 +43,5 @@ export const useGridSelectionPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [apiRef, classes, props.checkboxSelection]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
 };