@mui/x-data-grid 5.8.0 → 5.9.0

package/node/hooks/features/focus/useGridFocus.js

@@ -130,21 +130,31 @@ const useGridFocus = (apiRef, props) => {
       rowIndexToFocus += 1;
     }
 
+    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
+      pagination: props.pagination,
+      paginationMode: props.paginationMode
+    });
+
     if (columnIndexToFocus >= visibleColumns.length) {
-      // Go to next row if we are at the last column
+      // Go to next row if we are after the last column
       rowIndexToFocus += 1;
-      columnIndexToFocus = 0;
+
+      if (rowIndexToFocus < currentPage.rows.length) {
+        // Go to first column of the next row if there's one more row
+        columnIndexToFocus = 0;
+      }
     } else if (columnIndexToFocus < 0) {
-      // Go to previous row if we are at the first column
+      // Go to previous row if we are before the first column
       rowIndexToFocus -= 1;
-      columnIndexToFocus = visibleColumns.length - 1;
+
+      if (rowIndexToFocus >= 0) {
+        // Go to last column of the previous if there's one more row
+        columnIndexToFocus = visibleColumns.length - 1;
+      }
     }
 
-    const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
-    rowIndexToFocus = (0, _utils2.clamp)(rowIndexToFocus, currentPage.range.firstRowIndex, currentPage.range.lastRowIndex);
+    rowIndexToFocus = (0, _utils2.clamp)(rowIndexToFocus, 0, currentPage.rows.length - 1);
+    columnIndexToFocus = (0, _utils2.clamp)(columnIndexToFocus, 0, visibleColumns.length - 1);
     const rowToFocus = currentPage.rows[rowIndexToFocus];
     const columnToFocus = visibleColumns[columnIndexToFocus];
     apiRef.current.setCellFocus(rowToFocus.id, columnToFocus.field);

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -27,6 +27,8 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 
+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; }
@@ -38,20 +40,39 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @requires useGridDimensions (method) - can be after
  * @requires useGridFocus (method) - can be after
  * @requires useGridScroll (method) - can be after
+ * @requires useGridColumnSpanning (method) - can be after
  */
 const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridKeyboardNavigation');
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
-  const goToCell = React.useCallback((colIndex, rowIndex) => {
+  /**
+   * @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`.
+   */
+
+  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+    var _visibleSortedRows$ro;
+
+    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
+    const rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
+    const 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 ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
       rowIndex
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
-    const visibleSortedRows = (0, _gridFilterSelector.gridVisibleSortedRowEntriesSelector)(apiRef);
-    const node = visibleSortedRows[rowIndex];
-    apiRef.current.setCellFocus(node.id, field);
+    apiRef.current.setCellFocus(rowId, field);
   }, [apiRef, logger]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
@@ -104,7 +125,7 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore);
+            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
           }
 
           break;
@@ -123,9 +144,9 @@ const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "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;
@@ -133,6 +154,18 @@ const useGridKeyboardNavigation = (apiRef, props) => {
 
       case ' ':
         {
+          const field = params.field;
+
+          if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+            break;
+          }
+
+          const colDef = params.colDef;
+
+          if (colDef && colDef.type === 'treeDataGroup') {
+            break;
+          }
+
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
             goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
           }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -12,6 +12,8 @@ const gridRowsStateSelector = state => state.rows;
 exports.gridRowsStateSelector = gridRowsStateSelector;
 const gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalRowCount);
 exports.gridRowCountSelector = gridRowCountSelector;
+const gridRowsLoadingSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.loading);
+exports.gridRowsLoadingSelector = gridRowsLoadingSelector;
 const gridTopLevelRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
 exports.gridTopLevelRowCountSelector = gridTopLevelRowCountSelector;
 const gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.idRowsLookup);

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

@@ -64,7 +64,7 @@ const convertGridRowsPropToState = ({
   };
 };
 
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) => {
+const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
   const {
     value
   } = rowsCache.state;
@@ -74,6 +74,7 @@ const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) =>
   }));
   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,7 +97,7 @@ 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
 
   });
@@ -130,7 +131,7 @@ const useGridRows = (apiRef, props) => {
       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();
@@ -156,7 +157,7 @@ const useGridRows = (apiRef, props) => {
     }
 
     run();
-  }, [props.throttleRowsMs, props.rowCount, apiRef]);
+  }, [props.throttleRowsMs, props.rowCount, props.loading, apiRef]);
   /**
    * API METHODS
    */

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,10 +90,11 @@ 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;
@@ -147,14 +146,7 @@ const useGridRowsMeta = (apiRef, props) => {
   React.useEffect(() => {
     hydrateRowsMeta();
   }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
-  const handlepipeProcessorRegister = React.useCallback(name => {
-    if (name !== 'rowHeight') {
-      return;
-    }
-
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,

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,6 +21,8 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
+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); }
 
 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; }
@@ -49,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)
  */
 
 
@@ -56,6 +62,7 @@ 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);
@@ -70,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]
       });
     }
@@ -100,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;

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

@@ -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; }
@@ -268,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;
     }
@@ -376,7 +378,7 @@ const useGridSelection = (apiRef, props) => {
       selectRows(apiRef.current.getAllRowIds(), true);
     }
   }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.visibleRowsSet, removeOutdatedSelection);
+  (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/sorting/useGridSorting.js

@@ -111,17 +111,16 @@ const useGridSorting = (apiRef, props) => {
    */
 
   const applySorting = React.useCallback(() => {
-    if (props.sortingMode === _gridFeatureMode.GridFeatureModeConstant.server) {
-      logger.debug('Skipping sorting rows as sortingMode = server');
-      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        sorting: (0, _extends2.default)({}, state.sorting, {
-          sortedRows: (0, _rows.gridRowIdsSelector)(state, apiRef.current.instanceId)
-        })
-      }));
-      return;
-    }
-
     apiRef.current.setState(state => {
+      if (props.sortingMode === _gridFeatureMode.GridFeatureModeConstant.server) {
+        logger.debug('Skipping sorting rows as sortingMode = server');
+        return (0, _extends2.default)({}, state, {
+          sorting: (0, _extends2.default)({}, state.sorting, {
+            sortedRows: (0, _rows.gridRowIdsSelector)(state, apiRef.current.instanceId)
+          })
+        });
+      }
+
       const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(state, apiRef.current.instanceId);
       const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, apiRef);
       const sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
@@ -133,6 +132,7 @@ const useGridSorting = (apiRef, props) => {
         })
       });
     });
+    apiRef.current.publishEvent(_events.GridEvents.sortedRowsSet);
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getIndexFromScroll = getIndexFromScroll;
-exports.useGridVirtualScroller = void 0;
+exports.useGridVirtualScroller = exports.getRenderableIndexes = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -14,6 +14,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
 var _utils = require("@mui/material/utils");
 
 var _useGridApiContext = require("../../utils/useGridApiContext");
@@ -42,6 +44,8 @@ var _gridSelectionSelector = require("../selection/gridSelectionSelector");
 
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
+var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["style"];
@@ -65,9 +69,19 @@ function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positi
   return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
 }
 
-const useGridVirtualScroller = props => {
-  var _currentPage$range2;
+const getRenderableIndexes = ({
+  firstIndex,
+  lastIndex,
+  buffer,
+  minFirstIndex,
+  maxLastIndex
+}) => {
+  return [(0, _utils2.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+};
+
+exports.getRenderableIndexes = getRenderableIndexes;
 
+const useGridVirtualScroller = props => {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
@@ -142,34 +156,28 @@ const useGridVirtualScroller = props => {
     }
   }, []);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.resize, handleResize);
-
-  const getRenderableIndexes = ({
-    firstIndex,
-    lastIndex,
-    buffer,
-    minFirstIndex,
-    maxLastIndex
-  }) => {
-    return [(0, _utils2.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-  };
-
   const updateRenderZonePosition = React.useCallback(nextRenderContext => {
-    var _currentPage$range;
-
-    const [firstRowToRender] = getRenderableIndexes({
+    const [firstRowToRender, lastRowToRender] = 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
     });
-    const [firstColumnToRender] = getRenderableIndexes({
+    const [initialFirstColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: renderZoneMinColumnIndex,
       maxLastIndex: renderZoneMaxColumnIndex,
       buffer: rootProps.columnBuffer
     });
+    const firstColumnToRender = (0, _gridColumnsUtils.getFirstNonSpannedColumnToRender)({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const top = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state).positions[firstRowToRender];
     const left = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
 
@@ -181,19 +189,22 @@ const useGridVirtualScroller = props => {
         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(() => {
+    if (renderContext) {
+      updateRenderZonePosition(renderContext);
+    }
+  }, [renderContext, updateRenderZonePosition]);
   const updateRenderContext = React.useCallback(nextRenderContext => {
     setRenderContext(nextRenderContext);
-    updateRenderZonePosition(nextRenderContext);
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext, updateRenderZonePosition]);
+  }, [setRenderContext, prevRenderContext]);
   React.useEffect(() => {
     if (containerWidth == null) {
       return;
     }
 
     const initialRenderContext = computeRenderContext();
-    prevRenderContext.current = initialRenderContext;
     updateRenderContext(initialRenderContext);
     const {
       top,
@@ -231,10 +242,13 @@ const useGridVirtualScroller = props => {
       top: scrollTop,
       left: scrollLeft,
       renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
-    });
+    }, event);
 
     if (shouldSetState) {
-      updateRenderContext(nextRenderContext);
+      // Prevents batching render context changes
+      ReactDOM.flushSync(() => {
+        updateRenderContext(nextRenderContext);
+      });
       prevTotalWidth.current = columnsTotalWidth;
     }
   };
@@ -262,14 +276,32 @@ const useGridVirtualScroller = props => {
       maxLastIndex: currentPage.rows.length,
       buffer: rowBuffer
     });
-    const [firstColumnToRender, lastColumnToRender] = getRenderableIndexes({
+    const renderedRows = [];
+
+    for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+      const row = currentPage.rows[i];
+      renderedRows.push(row);
+      apiRef.current.unstable_calculateColSpan({
+        rowId: row.id,
+        minFirstColumn,
+        maxLastColumn
+      });
+    }
+
+    const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: minFirstColumn,
       maxLastIndex: maxLastColumn,
       buffer: columnBuffer
     });
-    const renderedRows = currentPage.rows.slice(firstRowToRender, lastRowToRender);
+    const firstColumnToRender = (0, _gridColumnsUtils.getFirstNonSpannedColumnToRender)({
+      firstColumnToRender: initialFirstColumnToRender,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     const rows = [];
 

package/node/index.js

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

package/node/internals/index.js

@@ -159,6 +159,12 @@ Object.defineProperty(exports, "useGridColumnMenu", {
     return _useGridColumnMenu.useGridColumnMenu;
   }
 });
+Object.defineProperty(exports, "useGridColumnSpanning", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnSpanning.useGridColumnSpanning;
+  }
+});
 Object.defineProperty(exports, "useGridColumns", {
   enumerable: true,
   get: function () {
@@ -352,6 +358,8 @@ var _useGridColumnMenu = require("../hooks/features/columnMenu/useGridColumnMenu
 
 var _useGridColumns = require("../hooks/features/columns/useGridColumns");
 
+var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpanning");
+
 var _useGridDensity = require("../hooks/features/density/useGridDensity");
 
 var _useGridCsvExport = require("../hooks/features/export/useGridCsvExport");