@mui/x-data-grid 5.7.0 → 5.10.0

package/legacy/hooks/features/{keyboard → keyboardNavigation}/useGridKeyboardNavigation.js

@@ -7,31 +7,51 @@ import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelecto
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
 import { gridClasses } from '../../../constants/gridClasses';
+import { GridCellModes } from '../../../models/gridEditRowModel';
+import { isNavigationKey } from '../../../utils/keyboardUtils';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 /**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
  * @requires useGridSorting (method) - can be after
+ * @requires useGridFilter (state) - can be after
+ * @requires useGridColumns (state, method) - can be after
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 
 export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   var currentPage = useGridVisibleRows(apiRef, props);
+  /**
+   * @param {number} colIndex Index of the column to focus
+   * @param {number} rowIndex index of the row to focus
+   * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
+   */
+
   var goToCell = React.useCallback(function (colIndex, rowIndex) {
+    var _visibleSortedRows$ro;
+
+    var closestColumnToUse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left';
+    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    var rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    var nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
+      if (closestColumnToUse === 'left') {
+        colIndex = nextCellColSpanInfo.leftVisibleCellIndex;
+      } else if (closestColumnToUse === 'right') {
+        colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
+      }
+    }
+
     logger.debug("Navigating to cell row ".concat(rowIndex, ", col ").concat(colIndex));
     apiRef.current.scrollToIndexes({
       colIndex: colIndex,
       rowIndex: rowIndex
     });
     var field = apiRef.current.getVisibleColumns()[colIndex].field;
-    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    var node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   var goToHeader = React.useCallback(function (colIndex, event) {
     logger.debug("Navigating to header col ".concat(colIndex));
@@ -86,7 +106,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -105,16 +125,36 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
         }
 
-      case 'PageDown':
       case ' ':
+        {
+          var field = params.field;
+
+          if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          var colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
+          if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
+            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+          }
+
+          break;
+        }
+
+      case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
@@ -269,6 +309,20 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       event.preventDefault();
     }
   }, [apiRef, currentPage, goToCell, goToHeader]);
+  var handleCellKeyDown = React.useCallback(function (params, event) {
+    // Ignore portal
+    if (!event.currentTarget.contains(event.target)) {
+      return;
+    } // Get the most recent params because the cell mode may have changed by another listener
+
+
+    var cellParams = apiRef.current.getCellParams(params.id, params.field);
+
+    if (cellParams.cellMode !== GridCellModes.Edit && isNavigationKey(event.key)) {
+      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, cellParams, event);
+    }
+  }, [apiRef]);
   useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
 };

package/legacy/hooks/features/pagination/useGridPage.js

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { GridEvents } from '../../../models/events';
 import { gridVisibleTopLevelRowCountSelector } from '../filter';
-import { gridPageSelector } from './gridPaginationSelector';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { gridPageSelector, gridPageSizeSelector } from './gridPaginationSelector';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { buildWarning } from '../../../utils/warning';
 export var getPageCount = function getPageCount(rowCount, pageSize) {
   if (pageSize > 0 && rowCount > 0) {
@@ -95,8 +95,8 @@ export var useGridPage = function useGridPage(apiRef, props) {
     apiRef.current.setState(mergeStateWithPage(page));
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -114,7 +114,14 @@ export var useGridPage = function useGridPage(apiRef, props) {
     apiRef.current.forceUpdate();
   };
 
+  var handlePageChange = function handlePageChange() {
+    return apiRef.current.scrollToIndexes({
+      rowIndex: gridPageSelector(apiRef) * gridPageSizeSelector(apiRef)
+    });
+  };
+
   useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
+  useGridApiEventHandler(apiRef, GridEvents.pageChange, handlePageChange);
   /**
    * EFFECTS
    */

package/legacy/hooks/features/pagination/useGridPageSize.js

@@ -4,7 +4,7 @@ import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export var defaultPageSize = function defaultPageSize(autoPageSize) {
   return autoPageSize ? 0 : 100;
 };
@@ -90,8 +90,8 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */

package/legacy/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+import { useGridSelector } from '../../utils/useGridSelector';
 export var preferencePanelStateInitializer = function preferencePanelStateInitializer(state, props) {
   var _props$initialState$p, _props$initialState;
 
@@ -19,6 +21,7 @@ export var preferencePanelStateInitializer = function preferencePanelStateInitia
 
 export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
   var logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
+  var preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   var hideTimeout = React.useRef();
   var immediateTimeout = React.useRef();
   /**
@@ -27,6 +30,13 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
 
   var hidePreferences = React.useCallback(function () {
     logger.debug('Hiding Preferences Panel');
+
+    if (preferencePanelState.openedPanelValue) {
+      apiRef.current.publishEvent(GridEvents.preferencePanelClose, {
+        openedPanelValue: preferencePanelState.openedPanelValue
+      });
+    }
+
     apiRef.current.setState(function (state) {
       return _extends({}, state, {
         preferencePanel: {
@@ -35,7 +45,7 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, logger]); // This is to prevent the preferences from closing when you open a select box or another panel,
+  }, [apiRef, logger, preferencePanelState.openedPanelValue]); // This is to prevent the preferences from closing when you open a select box or another panel,
   // The issue is in MUI core V4 => Fixed in V5
 
   var doNotHidePanel = React.useCallback(function () {
@@ -59,8 +69,11 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
         })
       });
     });
+    apiRef.current.publishEvent(GridEvents.preferencePanelOpen, {
+      openedPanelValue: newValue
+    });
     apiRef.current.forceUpdate();
-  }, [doNotHidePanel, apiRef, logger]);
+  }, [logger, doNotHidePanel, apiRef]);
   useGridApiMethod(apiRef, {
     showPreferences: showPreferences,
     hidePreferences: hidePreferencesDelayed
@@ -93,8 +106,8 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EFFECTS
    */

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

@@ -5,6 +5,9 @@ export var gridRowsStateSelector = function gridRowsStateSelector(state) {
 export var gridRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.totalRowCount;
 });
+export var gridRowsLoadingSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows.loading;
+});
 export var gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.totalTopLevelRowCount;
 });

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

@@ -0,0 +1,13 @@
+/**
+ * A helper function to check if the id provided is valid.
+ * @param {GridRowId} id Id as [[GridRowId]].
+ * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
+ * @param {string} detailErrorMessage A custom error message to display for invalid IDs
+ */
+export function checkGridRowIdIsValid(id, row) {
+  var detailErrorMessage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'A row was provided without id in the rows prop:';
+
+  if (id == null) {
+    throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+  }
+}

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

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
 export * from './gridRowsSelector';
-export {};
+export { checkGridRowIdIsValid } from './gridRowsUtils';

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, 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,7 +44,7 @@ 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_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
@@ -54,6 +54,7 @@ var getRowsStateFromCache = function getRowsStateFromCache(rowsCache, previousTr
     return node.parent == null;
   }).length;
   return _extends({}, groupingResponse, {
+    loading: loadingProp,
     totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
     totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
@@ -76,7 +77,7 @@ 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
 
   });
@@ -92,13 +93,13 @@ 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;
     }, {});
@@ -109,7 +110,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
       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);
@@ -136,7 +137,7 @@ export var useGridRows = function useGridRows(apiRef, props) {
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
   /**
    * API METHODS
    */
@@ -244,12 +245,37 @@ export var useGridRows = function useGridRows(apiRef, props) {
 
     return (_gridRowTreeSelector$ = gridRowTreeSelector(apiRef)[id]) != null ? _gridRowTreeSelector$ : null;
   }, [apiRef]);
+  var setRowIndex = React.useCallback(function (rowId, targetIndex) {
+    var allRows = gridRowIdsSelector(apiRef);
+    var oldIndex = allRows.findIndex(function (row) {
+      return row === rowId;
+    });
+
+    if (oldIndex === targetIndex) {
+      return;
+    }
+
+    logger.debug("Moving row ".concat(rowId, " to index ").concat(targetIndex));
+
+    var updatedRows = _toConsumableArray(allRows);
+
+    updatedRows.splice(targetIndex, 0, updatedRows.splice(oldIndex, 1)[0]);
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        rows: _extends({}, state.rows, {
+          ids: updatedRows
+        })
+      });
+    });
+    apiRef.current.applySorting();
+  }, [apiRef, logger]);
   var rowApi = {
     getRow: getRow,
     getRowModels: getRowModels,
     getRowsCount: getRowsCount,
     getAllRowIds: getAllRowIds,
     setRows: setRows,
+    setRowIndex: setRowIndex,
     updateRows: updateRows,
     setRowChildrenExpansion: setRowChildrenExpansion,
     getRowNode: getRowNode,

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/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);
 };