@mui/x-data-grid 5.6.1 → 5.9.0

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

@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _events = require("../../../models/events");
 
-var _gridRows = require("../../../models/gridRows");
-
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -25,13 +23,15 @@ var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
+var _gridRowsUtils = require("./gridRowsUtils");
+
 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; }
 
 function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;
-  (0, _gridRows.checkGridRowIdIsValid)(id, rowModel, detailErrorMessage);
+  (0, _gridRowsUtils.checkGridRowIdIsValid)(id, rowModel, detailErrorMessage);
   return id;
 }
 
@@ -64,16 +64,17 @@ const convertGridRowsPropToState = ({
   };
 };
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
   const {
     value
   } = rowsCache.state;
   const rowCount = rowCountProp != null ? rowCountProp : 0;
-  const groupingResponse = apiRef.current.unstable_groupRows((0, _extends2.default)({}, value, {
+  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', (0, _extends2.default)({}, value, {
     previousTree
   }));
   const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return (0, _extends2.default)({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
@@ -96,15 +97,11 @@ const rowsStateInitializer = (state, props, apiRef) => {
     lastUpdateMs: Date.now()
   };
   return (0, _extends2.default)({}, state, {
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount),
+    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount, props.loading),
     rowsCache // TODO remove from state
 
   });
 };
-/**
- * @requires useGridRowGroupsPreProcessing (method)
- */
-
 
 exports.rowsStateInitializer = rowsStateInitializer;
 
@@ -119,9 +116,9 @@ const useGridRows = (apiRef, props) => {
 
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const getRow = React.useCallback(id => {
-    var _gridRowsLookupSelect;
+    var _ref;
 
-    return (_gridRowsLookupSelect = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id]) != null ? _gridRowsLookupSelect : null;
+    return (_ref = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef)[id]) != null ? _ref : null;
   }, [apiRef]);
   const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
     id
@@ -129,13 +126,12 @@ const useGridRows = (apiRef, props) => {
     acc[id] = index;
     return acc;
   }, {}), [currentPage.rows]);
-  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
   const throttledRowsChange = React.useCallback((newState, throttle) => {
     const run = () => {
       rowsCache.current.timeout = null;
       rowsCache.current.lastUpdateMs = Date.now();
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount)
+        rows: getRowsStateFromCache(rowsCache.current, (0, _gridRowsSelector.gridRowTreeSelector)(apiRef), apiRef, props.rowCount, props.loading)
       }));
       apiRef.current.publishEvent(_events.GridEvents.rowsSet);
       apiRef.current.forceUpdate();
@@ -161,7 +157,11 @@ const useGridRows = (apiRef, props) => {
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
+  /**
+   * API METHODS
+   */
+
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
     throttledRowsChange(convertGridRowsPropToState({
@@ -174,7 +174,7 @@ const useGridRows = (apiRef, props) => {
     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.
       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();
@@ -227,6 +227,7 @@ const useGridRows = (apiRef, props) => {
   }, [apiRef]);
   const getRowsCount = React.useCallback(() => (0, _gridRowsSelector.gridRowCountSelector)(apiRef), [apiRef]);
   const getAllRowIds = React.useCallback(() => (0, _gridRowsSelector.gridRowIdsSelector)(apiRef), [apiRef]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
   const setRowChildrenExpansion = React.useCallback((id, isExpanded) => {
     const currentNode = apiRef.current.getRowNode(id);
 
@@ -254,6 +255,61 @@ const useGridRows = (apiRef, props) => {
 
     return (_gridRowTreeSelector$ = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef)[id]) != null ? _gridRowTreeSelector$ : 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') !== (0, _gridRowsSelector.gridRowGroupingNameSelector)(apiRef)) {
+      groupRows();
+    }
+  }, [apiRef, groupRows]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.strategyAvailabilityChange, handleStrategyActivityChange);
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'GridRowApi');
+  /**
+   * EFFECTS
+   */
+
   React.useEffect(() => {
     return () => {
       if (rowsCache.current.timeout !== null) {
@@ -283,40 +339,6 @@ 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]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowGroupsPreProcessingChange, handleGroupRows);
-  const rowApi = {
-    getRow,
-    getRowModels,
-    getRowsCount,
-    getAllRowIds,
-    setRows,
-    updateRows,
-    setRowChildrenExpansion,
-    getRowNode,
-    getRowIndexRelativeToVisibleRows
-  };
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowApi, 'GridRowApi');
 };
 
 exports.useGridRows = useGridRows;

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

@@ -25,9 +25,7 @@ var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 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); }
 
@@ -92,16 +90,17 @@ const useGridRowsMeta = (apiRef, props) => {
         if (getRowSpacing) {
           var _spacing$top, _spacing$bottom;
 
-          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
           const spacing = getRowSpacing((0, _extends2.default)({}, row, {
-            isFirstVisible: index === 0,
-            isLastVisible: index === currentPage.rows.length - 1
+            isFirstVisible: indexRelativeToCurrentPage === 0,
+            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+            indexRelativeToCurrentPage
           }));
           initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
           initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
         }
 
-        const sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        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,
@@ -147,14 +146,7 @@ const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRowsPreProcessors = void 0;
+
+var _strategyProcessing = require("../../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: _strategyProcessing.GRID_DEFAULT_STRATEGY,
+    tree,
+    treeDepth: 1,
+    idRowsLookup,
+    ids
+  };
+};
+
+const useGridRowsPreProcessors = apiRef => {
+  (0, _strategyProcessing.useGridRegisterStrategyProcessor)(apiRef, _strategyProcessing.GRID_DEFAULT_STRATEGY, 'rowTreeCreation', flatRowTreeCreationMethod);
+};
+
+exports.useGridRowsPreProcessors = useGridRowsPreProcessors;

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

@@ -11,6 +11,8 @@ var _useGridLogger = require("../../utils/useGridLogger");
 
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 
+var _useGridSelector = require("../../utils/useGridSelector");
+
 var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -19,7 +21,7 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
-var _useGridNativeEventListener = require("../../utils/useGridNativeEventListener");
+var _gridFilterSelector = require("../filter/gridFilterSelector");
 
 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); }
 
@@ -51,6 +53,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)
  */
 
 
@@ -58,11 +62,13 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersElementRef;
   const windowRef = apiRef.current.windowRef;
+  const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridVisibleSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
     const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const scrollToHeader = params.rowIndex == null;
 
-    if (totalRowCount === 0 || visibleColumns.length === 0) {
+    if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
     }
 
@@ -71,10 +77,27 @@ const useGridScroll = (apiRef, props) => {
 
     if (params.colIndex != null) {
       const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
+      let cellWidth;
+
+      if (typeof params.rowIndex !== 'undefined') {
+        var _visibleSortedRows$pa;
+
+        const rowId = (_visibleSortedRows$pa = visibleSortedRows[params.rowIndex]) == null ? void 0 : _visibleSortedRows$pa.id;
+        const 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]
       });
     }
@@ -93,7 +116,7 @@ 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);
@@ -101,7 +124,7 @@ const useGridScroll = (apiRef, props) => {
     }
 
     return false;
-  }, [logger, apiRef, windowRef, props.pagination]);
+  }, [logger, apiRef, windowRef, props.pagination, visibleSortedRows]);
   const scroll = React.useCallback(params => {
     if (windowRef.current && params.left != null && colRef.current) {
       colRef.current.scrollLeft = params.left;
@@ -135,15 +158,6 @@ const useGridScroll = (apiRef, props) => {
     getScrollPosition
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, scrollApi, 'GridScrollApi');
-  const preventScroll = React.useCallback(event => {
-    event.target.scrollLeft = 0;
-    event.target.scrollTop = 0;
-  }, []);
-  (0, _useGridNativeEventListener.useGridNativeEventListener)(apiRef, () => {
-    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);
 };
 
 exports.useGridScroll = useGridScroll;

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

@@ -21,12 +21,12 @@ var _useGridLogger = require("../../utils/useGridLogger");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
-var _domUtils = require("../../../utils/domUtils");
-
 var _gridSelectionSelector = require("./gridSelectionSelector");
 
 var _pagination = require("../pagination");
 
+var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
+
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 
 var _colDef = require("../../../colDef");
@@ -37,6 +37,8 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
+var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+
 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; }
@@ -65,8 +67,10 @@ const selectionStateInitializer = (state, props) => {
   });
 };
 /**
- * @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)
  */
 
 
@@ -94,7 +98,8 @@ const useGridSelection = (apiRef, props) => {
     paginationMode
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
-  const expandRowRangeSelection = React.useCallback(id => {
+  const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const expandMouseRowRangeSelection = React.useCallback(id => {
     var _lastRowToggled$curre;
 
     let endId = id;
@@ -106,6 +111,10 @@ 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 {
@@ -196,12 +205,13 @@ const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    logger.debug(`Expanding selection from row ${startId} to row ${endId}`);
-    const visibleRowIds = (0, _gridFilterSelector.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 = (0, _gridFilterSelector.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 = {
@@ -260,7 +270,7 @@ const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    if (params.field === '__detail_panel_toggle__') {
+    if (params.field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }
@@ -274,11 +284,11 @@ 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) {
       var _window$getSelection;
@@ -288,35 +298,78 @@ 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 ? (0, _pagination.gridPaginatedVisibleSortedGridRowIdsSelector)(apiRef) : (0, _gridFilterSelector.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) === _gridEditRowModel.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 (!(0, _domUtils.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 ((0, _keyboardUtils.isNavigationKey)(event.key) && event.shiftKey) {
+      // The cell that has focus after the keyboard navigation
+      const focusCell = (0, _gridFocusStateSelector.gridFocusCellSelector)(apiRef);
 
-    const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    const isEditMode = cellParams.cellMode === _gridEditRowModel.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;
     }
 
@@ -324,8 +377,8 @@ const useGridSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.visibleRowsSet, removeOutdatedSelection);
+  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.sortedRowsSet, removeOutdatedSelection);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellClick, handleCellClick);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);

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

@@ -13,7 +13,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _material = require("@mui/material");
 
-var _preProcessing = require("../../core/preProcessing");
+var _pipeProcessing = require("../../core/pipeProcessing");
 
 var _constants = require("../../../constants");
 
@@ -60,7 +60,7 @@ const useGridSelectionPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [apiRef, classes, props.checkboxSelection]);
-  (0, _preProcessing.useGridRegisterPreProcessor)(apiRef, 'hydrateColumns', updateSelectionColumn);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', updateSelectionColumn);
 };
 
 exports.useGridSelectionPreProcessors = useGridSelectionPreProcessors;