@mui/x-data-grid 5.7.0 → 5.10.0

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

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

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

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

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

@@ -13,7 +13,7 @@ import { gridRowIdsSelector, gridRowTreeSelector } from '../rows';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
 import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export var sortingStateInitializer = function sortingStateInitializer(state, props) {
   var _ref, _props$sortModel, _props$initialState, _props$initialState$s;
 
@@ -86,19 +86,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 +107,7 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
         })
       });
     });
+    apiRef.current.publishEvent(GridEvents.sortedRowsSet);
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   var setSortModel = React.useCallback(function (model) {
@@ -206,8 +204,8 @@ export var useGridSorting = function useGridSorting(apiRef, props) {
     var rowTree = gridRowTreeSelector(apiRef);
     return params.sortRowList(Object.values(rowTree));
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'sorting', flatSortingMethod);
   /**
    * EVENTS

package/legacy/hooks/features/statePersistence/useGridStatePersistence.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils';
 export var useGridStatePersistence = function useGridStatePersistence(apiRef) {
   var exportState = React.useCallback(function () {
-    var stateToExport = apiRef.current.unstable_applyPreProcessors('exportState', {});
+    var stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {});
     return stateToExport;
   }, [apiRef]);
   var restoreState = React.useCallback(function (stateToRestore) {
-    var response = apiRef.current.unstable_applyPreProcessors('restoreState', {
+    var response = apiRef.current.unstable_applyPipeProcessors('restoreState', {
       callbacks: []
     }, {
       stateToRestore: stateToRestore

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';
@@ -17,8 +18,9 @@ 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 +37,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 +97,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);
@@ -121,28 +129,17 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
   }, []);
   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)];
-  };
-
   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 +149,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 +169,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,
@@ -213,14 +220,25 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       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(GridEvents.virtualScrollerWheel, {}, event);
+  };
+
+  var handleTouchMove = function handleTouchMove(event) {
+    apiRef.current.publishEvent(GridEvents.virtualScrollerTouchMove, {}, event);
+  };
+
   var getRows = function getRows() {
     var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
       renderContext: renderContext
@@ -251,6 +269,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 +289,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 +335,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));
@@ -364,6 +400,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       return _extends({
         ref: handleRef,
         onScroll: handleScroll,
+        onWheel: handleWheel,
+        onTouchMove: handleTouchMove,
         style: _extends({}, style, rootStyle)
       }, other);
     },

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.7.0
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/internals/index.js

@@ -3,20 +3,20 @@ export { GridVirtualScrollerContent } from '../components/virtualization/GridVir
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
 export { GridColumnHeaders } from '../components/columnHeaders/GridColumnHeaders';
 export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
-export { useGridRegisterPreProcessor } from '../hooks/core/preProcessing';
+export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
 export { useGridRegisterStrategyProcessor } from '../hooks/core/strategyProcessing';
 export { useGridInitialization } from '../hooks/core/useGridInitialization';
 export { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
 export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
+export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
-export { useGridKeyboard } from '../hooks/features/keyboard/useGridKeyboard';
-export { useGridKeyboardNavigation } from '../hooks/features/keyboard/useGridKeyboardNavigation';
+export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
 export { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
 export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
 export { useGridEditing as useGridEditing_new, editingStateInitializer as editingStateInitializer_new } from '../hooks/features/editRows/useGridEditing.new';

package/legacy/locales/arSD.js

@@ -115,6 +115,8 @@ var arSDGrid = {
   },
   // Master/detail
   expandDetailPanel: 'توسيع',
-  collapseDetailPanel: 'طوي'
+  collapseDetailPanel: 'طوي' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export var arSD = getGridLocalization(arSDGrid, arSDCore);

package/legacy/locales/bgBG.js

@@ -115,6 +115,8 @@ var bgBGGrid = {
   },
   // Master/detail
   expandDetailPanel: 'Разгъване',
-  collapseDetailPanel: 'Свиване'
+  collapseDetailPanel: 'Свиване' // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
+
 };
 export var bgBG = getGridLocalization(bgBGGrid, bgBGCore);

package/legacy/locales/csCZ.js

@@ -142,6 +142,8 @@ var csCZGrid = {
   } // Master/detail
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
+  // Row reordering text
+  // rowReorderingHeaderName: 'Row reordering',
 
 };
 export var csCZ = getGridLocalization(csCZGrid, csCZCore);