@mui/x-data-grid 5.8.0 → 5.11.0

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,10 +64,11 @@ 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;
@@ -122,14 +122,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   React.useEffect(function () {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  var handlepipeProcessorRegister = React.useCallback(function (name) {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
+  useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   var rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

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

@@ -3,6 +3,7 @@ import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../c
 var flatRowTreeCreationMethod = function flatRowTreeCreationMethod(_ref) {
   var ids = _ref.ids,
       idRowsLookup = _ref.idRowsLookup,
+      idToIdLookup = _ref.idToIdLookup,
       previousTree = _ref.previousTree;
   var tree = {};
 
@@ -27,6 +28,7 @@ var flatRowTreeCreationMethod = function flatRowTreeCreationMethod(_ref) {
     tree: tree,
     treeDepth: 1,
     idRowsLookup: idRowsLookup,
+    idToIdLookup: idToIdLookup,
     ids: ids
   };
 };

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

@@ -2,10 +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'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+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) {
@@ -13,7 +15,12 @@ function scrollIntoView(dimensions) {
       scrollTop = dimensions.scrollTop,
       offsetHeight = dimensions.offsetHeight,
       offsetTop = dimensions.offsetTop;
-  var elementBottom = offsetTop + offsetHeight;
+  var elementBottom = offsetTop + offsetHeight; // Always scroll to top when cell is higher than viewport to avoid scroll jump
+  // See https://github.com/mui/mui-x/issues/4513 and https://github.com/mui/mui-x/issues/4514
+
+  if (offsetHeight > clientHeight) {
+    return offsetTop;
+  }
 
   if (elementBottom - clientHeight > scrollTop) {
     return elementBottom - clientHeight;
@@ -30,6 +37,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)
  */
 
 
@@ -37,6 +46,7 @@ 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);
@@ -51,10 +61,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]
       });
     }
@@ -81,7 +108,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;

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

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -14,6 +13,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../..
 import { GridCellModes } from '../../../models/gridEditRowModel';
 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) {
@@ -56,7 +56,7 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     propModel: propSelectionModel,
     propOnChange: props.onSelectionModelChange,
     stateSelector: gridSelectionStateSelector,
-    changeEvent: GridEvents.selectionChange
+    changeEvent: 'selectionChange'
   });
   var checkboxSelection = props.checkboxSelection,
       disableMultipleSelection = props.disableMultipleSelection,
@@ -222,6 +222,10 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
    */
 
   var removeOutdatedSelection = React.useCallback(function () {
+    if (props.keepNonExistentRowsSelected) {
+      return;
+    }
+
     var currentSelection = gridSelectionStateSelector(apiRef.current.state);
     var rowsLookup = gridRowsLookupSelector(apiRef); // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
 
@@ -238,12 +242,12 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
     if (hasChanged) {
       apiRef.current.setSelectionModel(Object.values(selectionLookup));
     }
-  }, [apiRef]);
+  }, [apiRef, props.keepNonExistentRowsSelected]);
   var handleSingleRowSelection = React.useCallback(function (id, event) {
     var hasCtrlKey = event.metaKey || event.ctrlKey; // multiple selection is only allowed if:
     // - it is a checkboxSelection
     // - it is a keyboard selection
-    // - CTRL is pressed
+    // - Ctrl is pressed
 
     var isMultipleSelectionDisabled = !checkboxSelection && !hasCtrlKey && !isKeyboardEvent(event);
     var resetSelection = !canHaveMultipleSelection || isMultipleSelectionDisabled;
@@ -265,7 +269,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;
     }
@@ -375,12 +379,12 @@ export var useGridSelection = function useGridSelection(apiRef, props) {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
-  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
-  useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.headerSelectionCheckboxChange, handleHeaderSelectionCheckboxChange);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventSelectionOnShift);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', removeOutdatedSelection);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', handleRowSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'headerSelectionCheckboxChange', handleHeaderSelectionCheckboxChange);
+  useGridApiEventHandler(apiRef, 'cellMouseDown', preventSelectionOnShift);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   /**
    * EFFECTS
    */

package/legacy/hooks/features/sorting/useGridSorting.js

@@ -1,7 +1,6 @@
 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 { GridFeatureModeConstant } from '../../../models/gridFeatureMode';
 import { isEnterKey } from '../../../utils/keyboardUtils';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
@@ -37,7 +36,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
     propModel: props.sortModel,
     propOnChange: props.onSortModelChange,
     stateSelector: gridSortModelSelector,
-    changeEvent: GridEvents.sortModelChange
+    changeEvent: 'sortModelChange'
   });
   var upsertSortModel = React.useCallback(function (field, sortItem) {
     var sortModel = gridSortModelSelector(apiRef);
@@ -86,19 +85,16 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
    */
 
   var applySorting = React.useCallback(function () {
-    if (props.sortingMode === GridFeatureModeConstant.server) {
-      logger.debug('Skipping sorting rows as sortingMode = server');
-      apiRef.current.setState(function (state) {
+    apiRef.current.setState(function (state) {
+      if (props.sortingMode === GridFeatureModeConstant.server) {
+        logger.debug('Skipping sorting rows as sortingMode = server');
         return _extends({}, state, {
           sorting: _extends({}, state.sorting, {
             sortedRows: gridRowIdsSelector(state, apiRef.current.instanceId)
           })
         });
-      });
-      return;
-    }
+      }
 
-    apiRef.current.setState(function (state) {
       var sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
       var sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       var sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
@@ -110,6 +106,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
         })
       });
     });
+    apiRef.current.publishEvent('sortedRowsSet');
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   var setSortModel = React.useCallback(function (model) {
@@ -221,7 +218,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
   var handleColumnHeaderKeyDown = React.useCallback(function (_ref3, event) {
     var colDef = _ref3.colDef;
 
-    // CTRL + Enter opens the column menu
+    // Ctrl + Enter opens the column menu
     if (isEnterKey(event.key) && !event.ctrlKey && !event.metaKey) {
       sortColumn(colDef, undefined, event.shiftKey);
     }
@@ -246,11 +243,11 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderClick, handleColumnHeaderClick);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
+  useGridApiEventHandler(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  useGridApiEventHandler(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  useGridApiEventHandler(apiRef, 'rowsSet', apiRef.current.applySorting);
+  useGridApiEventHandler(apiRef, 'columnsChange', handleColumnsChange);
+  useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 var _excluded = ["style"];
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -12,13 +13,13 @@ import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
+
 import { jsx as _jsx } from "react/jsx-runtime";
-// Uses binary search to avoid looping through all possible positions
 export function getIndexFromScroll(offset, positions) {
   var sliceStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var sliceEnd = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : positions.length;
@@ -35,9 +36,15 @@ export function getIndexFromScroll(offset, positions) {
   var itemOffset = positions[pivot];
   return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
 }
+export var getRenderableIndexes = function getRenderableIndexes(_ref) {
+  var firstIndex = _ref.firstIndex,
+      lastIndex = _ref.lastIndex,
+      buffer = _ref.buffer,
+      minFirstIndex = _ref.minFirstIndex,
+      maxLastIndex = _ref.maxLastIndex;
+  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+};
 export var useGridVirtualScroller = function useGridVirtualScroller(props) {
-  var _currentPage$range2;
-
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
@@ -89,9 +96,9 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       };
     }
 
-    var _ref = scrollPosition.current,
-        top = _ref.top,
-        left = _ref.left;
+    var _ref2 = scrollPosition.current,
+        top = _ref2.top,
+        left = _ref2.left;
     var firstRowIndex = getIndexFromScroll(top, rowsMeta.positions);
     var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
     var firstColumnIndex = getIndexFromScroll(left, columnPositions);
@@ -120,29 +127,18 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       setContainerWidth(rootRef.current.clientWidth);
     }
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
-
-  var getRenderableIndexes = function getRenderableIndexes(_ref2) {
-    var firstIndex = _ref2.firstIndex,
-        lastIndex = _ref2.lastIndex,
-        buffer = _ref2.buffer,
-        minFirstIndex = _ref2.minFirstIndex,
-        maxLastIndex = _ref2.maxLastIndex;
-    return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-  };
-
+  useGridApiEventHandler(apiRef, 'resize', handleResize);
   var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
-    var _currentPage$range;
-
     var _getRenderableIndexes = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
-      maxLastIndex: ((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.lastRowIndex) || 0,
+      maxLastIndex: currentPage.rows.length,
       buffer: rootProps.rowBuffer
     }),
-        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 1),
-        firstRowToRender = _getRenderableIndexes2[0];
+        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
+        firstRowToRender = _getRenderableIndexes2[0],
+        lastRowToRender = _getRenderableIndexes2[1];
 
     var _getRenderableIndexes3 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
@@ -152,8 +148,15 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       buffer: rootProps.columnBuffer
     }),
         _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 1),
-        firstColumnToRender = _getRenderableIndexes4[0];
-
+        initialFirstColumnToRender = _getRenderableIndexes4[0];
+
+    var firstColumnToRender = getFirstNonSpannedColumnToRender({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef: apiRef,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     var top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
     var left = gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
 
@@ -165,19 +168,22 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         left: left
       });
     }
-  }, [apiRef, (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex, onRenderZonePositioning, renderZoneMaxColumnIndex, renderZoneMinColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer]);
+  React.useLayoutEffect(function () {
+    if (renderContext) {
+      updateRenderZonePosition(renderContext);
+    }
+  }, [renderContext, updateRenderZonePosition]);
   var updateRenderContext = React.useCallback(function (nextRenderContext) {
     setRenderContext(nextRenderContext);
-    updateRenderZonePosition(nextRenderContext);
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext, updateRenderZonePosition]);
+  }, [setRenderContext, prevRenderContext]);
   React.useEffect(function () {
     if (containerWidth == null) {
       return;
     }
 
     var initialRenderContext = computeRenderContext();
-    prevRenderContext.current = initialRenderContext;
     updateRenderContext(initialRenderContext);
     var _ref3 = scrollPosition.current,
         top = _ref3.top,
@@ -187,7 +193,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       left: left,
       renderContext: initialRenderContext
     };
-    apiRef.current.publishEvent(GridEvents.rowsScroll, params);
+    apiRef.current.publishEvent('rowsScroll', params);
   }, [apiRef, computeRenderContext, containerWidth, updateRenderContext]);
 
   var handleScroll = function handleScroll(event) {
@@ -209,18 +215,29 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
     var shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
 
-    apiRef.current.publishEvent(GridEvents.rowsScroll, {
+    apiRef.current.publishEvent('rowsScroll', {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
-    });
+    }, event);
 
     if (shouldSetState) {
-      updateRenderContext(nextRenderContext);
+      // Prevents batching render context changes
+      ReactDOM.flushSync(function () {
+        updateRenderContext(nextRenderContext);
+      });
       prevTotalWidth.current = columnsTotalWidth;
     }
   };
 
+  var handleWheel = function handleWheel(event) {
+    apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
+  };
+
+  var handleTouchMove = function handleTouchMove(event) {
+    apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
+  };
+
   var getRows = function getRows() {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       renderContext: renderContext
@@ -251,6 +268,18 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         firstRowToRender = _getRenderableIndexes6[0],
         lastRowToRender = _getRenderableIndexes6[1];
 
+    var renderedRows = [];
+
+    for (var i = firstRowToRender; i < lastRowToRender; i += 1) {
+      var row = currentPage.rows[i];
+      renderedRows.push(row);
+      apiRef.current.unstable_calculateColSpan({
+        rowId: row.id,
+        minFirstColumn: minFirstColumn,
+        maxLastColumn: maxLastColumn
+      });
+    }
+
     var _getRenderableIndexes7 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
@@ -259,20 +288,26 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       buffer: columnBuffer
     }),
         _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
-        firstColumnToRender = _getRenderableIndexes8[0],
+        initialFirstColumnToRender = _getRenderableIndexes8[0],
         lastColumnToRender = _getRenderableIndexes8[1];
 
-    var renderedRows = currentPage.rows.slice(firstRowToRender, lastRowToRender);
+    var firstColumnToRender = getFirstNonSpannedColumnToRender({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef: apiRef,
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     var rows = [];
 
-    for (var i = 0; i < renderedRows.length; i += 1) {
+    for (var _i = 0; _i < renderedRows.length; _i += 1) {
       var _rootProps$components;
 
-      var _renderedRows$i = renderedRows[i],
-          _id = _renderedRows$i.id,
-          _model = _renderedRows$i.model;
-      var lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
+      var _renderedRows$_i = renderedRows[_i],
+          _id = _renderedRows$_i.id,
+          _model = _renderedRows$_i.model;
+      var lastVisibleRowIndex = firstRowToRender + _i === currentPage.rows.length - 1;
       var targetRowHeight = apiRef.current.unstable_getRowHeight(_id);
       var isSelected = void 0;
 
@@ -299,7 +334,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
-        index: currentPage.range.firstRowIndex + firstRowToRender + i,
+        index: currentPage.range.firstRowIndex + firstRowToRender + _i,
         containerWidth: availableSpace,
         isLastVisible: lastVisibleRowIndex
       }, typeof getRowProps === 'function' ? getRowProps(_id, _model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), _id));
@@ -333,7 +368,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     return size;
   }, [rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, currentPage.rows.length, needsHorizontalScrollbar, rootProps.autoHeight, rowHeight]);
   React.useEffect(function () {
-    apiRef.current.publishEvent(GridEvents.virtualScrollerContentSizeChange);
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
   if (rootProps.autoHeight && currentPage.rows.length === 0) {
@@ -364,6 +399,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

package/legacy/hooks/utils/useGridApiEventHandler.js

@@ -9,22 +9,27 @@ import { FinalizationRegistryBasedCleanupTracking } from '../../utils/cleanupTra
  * Signal to the underlying logic what version of the public component API
  * of the data grid is exposed.
  */
-var GridSignature; // We use class to make it easier to detect in heap snapshots by name
+var GridSignature;
 
 (function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";
   GridSignature["DataGridPro"] = "DataGridPro";
 })(GridSignature || (GridSignature = {}));
 
+// We use class to make it easier to detect in heap snapshots by name
 var ObjectToBeRetainedByReact = /*#__PURE__*/_createClass(function ObjectToBeRetainedByReact() {
   _classCallCheck(this, ObjectToBeRetainedByReact);
 }); // Based on https://github.com/Bnaya/use-dispose-uncommitted/blob/main/src/finalization-registry-based-impl.ts
 // Check https://github.com/facebook/react/issues/15317 to get more information
 
 
-export function createUseGridApiEventHandler(registry) {
+export function createUseGridApiEventHandler(registryContainer) {
   var cleanupTokensCounter = 0;
   return function useGridApiEventHandler(apiRef, eventName, handler, options) {
+    if (registryContainer.registry === null) {
+      registryContainer.registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking();
+    }
+
     var _React$useState = React.useState(new ObjectToBeRetainedByReact()),
         _React$useState2 = _slicedToArray(_React$useState, 1),
         objectRetainedByReact = _React$useState2[0];
@@ -48,7 +53,7 @@ export function createUseGridApiEventHandler(registry) {
       cleanupTokenRef.current = {
         cleanupToken: cleanupTokensCounter
       };
-      registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
+      registryContainer.registry.register(objectRetainedByReact, // The callback below will be called once this reference stops being retained
       function () {
         var _subscription$current;
 
@@ -61,7 +66,7 @@ export function createUseGridApiEventHandler(registry) {
       subscription.current = null;
 
       if (cleanupTokenRef.current) {
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
     }
@@ -79,10 +84,10 @@ export function createUseGridApiEventHandler(registry) {
         subscription.current = apiRef.current.subscribeEvent(eventName, _enhancedHandler, options);
       }
 
-      if (cleanupTokenRef.current && registry) {
+      if (cleanupTokenRef.current && registryContainer.registry) {
         // If the effect was called, it means that this render was committed
         // so we can trust the cleanup function to remove the listener.
-        registry.unregister(cleanupTokenRef.current);
+        registryContainer.registry.unregister(cleanupTokenRef.current);
         cleanupTokenRef.current = null;
       }
 
@@ -95,12 +100,18 @@ export function createUseGridApiEventHandler(registry) {
     }, [apiRef, eventName, options]);
   };
 }
-var registry = typeof FinalizationRegistry !== 'undefined' ? new FinalizationRegistryBasedCleanupTracking() : new TimerBasedCleanupTracking(); // eslint-disable-next-line @typescript-eslint/naming-convention
+var registryContainer = {
+  registry: null
+}; // TODO: move to @mui/x-data-grid/internals
+// eslint-disable-next-line @typescript-eslint/naming-convention
 
 export var unstable_resetCleanupTracking = function unstable_resetCleanupTracking() {
-  return registry.reset();
+  var _registryContainer$re;
+
+  (_registryContainer$re = registryContainer.registry) == null ? void 0 : _registryContainer$re.reset();
+  registryContainer.registry = null;
 };
-export var useGridApiEventHandler = createUseGridApiEventHandler(registry);
+export var useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);
 var optionsSubscriberOptions = {
   isFirst: true
 };

package/legacy/hooks/utils/useGridNativeEventListener.js

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { isFunction } from '../../utils/utils';
 import { useGridLogger } from './useGridLogger';
 export var useGridNativeEventListener = function useGridNativeEventListener(apiRef, ref, eventName, handler, options) {
@@ -38,7 +37,7 @@ export var useGridNativeEventListener = function useGridNativeEventListener(apiR
         boundElem.removeEventListener(eventName, wrapHandler, options);
       };
 
-      apiRef.current.subscribeEvent(GridEvents.unmount, unsubscribe);
+      apiRef.current.subscribeEvent('unmount', unsubscribe);
     }
   }, [ref, wrapHandler, eventName, added, logger, options, apiRef]);
 };

package/legacy/hooks/utils/useGridSelector.js

@@ -1,7 +1,7 @@
 import { buildWarning } from '../../utils/warning';
 
 function isOutputSelector(selector) {
-  return selector.cache;
+  return selector.acceptsApiRef;
 }
 
 var stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);