@mui/x-data-grid 7.23.5 → 7.24.0

package/node/hooks/features/filter/gridFilterUtils.js

@@ -26,7 +26,7 @@ function getHasEval() {
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operator.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
@@ -144,7 +144,7 @@ let filterItemsApplierId = 1;
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 const buildAggregatedFilterItemsApplier = (filterModel, apiRef, disableEval) => {
@@ -192,7 +192,7 @@ const shouldQuickFilterExcludeHiddenColumns = filterModel => {
 /**
  * Generates a method to easily check if a row is matching the current quick filter.
  * @param {any[]} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridPrivateApiCommunity>} apiRef The API of the grid.
  * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
  */
 exports.shouldQuickFilterExcludeHiddenColumns = shouldQuickFilterExcludeHiddenColumns;

package/node/hooks/features/pagination/gridPaginationSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+exports.gridVisibleRowsSelector = exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginationEnabledClientSideSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -17,10 +17,16 @@ const ALL_RESULTS_PAGE_VALUE = -1;
 const gridPaginationSelector = state => state.pagination;
 
 /**
- * Get the pagination model
  * @category Pagination
+ * @ignore - do not document.
  */
 exports.gridPaginationSelector = gridPaginationSelector;
+const gridPaginationEnabledClientSideSelector = exports.gridPaginationEnabledClientSideSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
+
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
 const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.paginationModel);
 
 /**
@@ -57,7 +63,10 @@ const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelecto
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.
  * @category Pagination
  */
-const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = exports.gridPaginationRowRangeSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, _gridFilterSelector.gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+  if (!clientSidePaginationEnabled) {
+    return null;
+  }
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.pageSize - 1, visibleTopLevelRowCount - 1);
@@ -119,4 +128,33 @@ const gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibl
     return [];
   }
   return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+const gridVisibleRowsSelector = exports.gridVisibleRowsSelector = (0, _createSelector.createSelectorMemoized)(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, _gridFilterSelector.gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
+  if (clientPaginationEnabled) {
+    return {
+      rows: paginationRows,
+      range: paginationRowRange,
+      rowToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.model, index);
+        return lookup;
+      }, new Map())
+    };
+  }
+  return {
+    rows: expandedSortedRowEntries,
+    range: expandedSortedRowEntries.length === 0 ? null : {
+      firstRowIndex: 0,
+      lastRowIndex: expandedSortedRowEntries.length - 1
+    },
+    rowToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.model, index);
+      return lookup;
+    }, new Map())
+  };
 });

package/node/hooks/features/pagination/useGridPagination.js

@@ -16,11 +16,13 @@ const paginationStateInitializer = (state, props) => {
   const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
   const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return (0, _extends2.default)({}, state, {
-    pagination: {
+    pagination: (0, _extends2.default)({}, state.pagination, {
       paginationModel,
       rowCount,
-      meta
-    }
+      meta,
+      enabled: props.pagination === true,
+      paginationMode: props.paginationMode
+    })
   });
 };
 

package/node/hooks/features/pagination/useGridPaginationModel.js

@@ -164,13 +164,35 @@ const useGridPaginationModel = (apiRef, props) => {
   /**
    * EFFECTS
    */
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    if (!props.pagination) {
+      return;
+    }
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       pagination: (0, _extends2.default)({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
       })
     }));
-  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  }, [apiRef, props.paginationModel, props.signature, props.pagination]);
+  React.useEffect(() => {
+    apiRef.current.setState(state => {
+      const isEnabled = props.pagination === true;
+      if (state.pagination.paginationMode === props.paginationMode || state.pagination.enabled === isEnabled) {
+        return state;
+      }
+      return (0, _extends2.default)({}, state, {
+        pagination: (0, _extends2.default)({}, state.pagination, {
+          paginationMode: props.paginationMode,
+          enabled: props.pagination === true
+        })
+      });
+    });
+  }, [apiRef, props.paginationMode, props.pagination]);
   React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
 };
 exports.useGridPaginationModel = useGridPaginationModel;

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

@@ -24,8 +24,8 @@ const preferencePanelStateInitializer = (state, props) => (0, _extends2.default)
 exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 const useGridPreferencesPanel = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
-  const hideTimeout = React.useRef();
-  const immediateTimeout = React.useRef();
+  const hideTimeout = React.useRef(undefined);
+  const immediateTimeout = React.useRef(undefined);
 
   /**
    * API METHODS

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

@@ -22,7 +22,7 @@ const gridRowMaximumTreeDepthSelector = exports.gridRowMaximumTreeDepthSelector
   if (entries.length === 0) {
     return 1;
   }
-  return entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] + 1;
+  return (entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] ?? 0) + 1;
 });
 const gridDataRowIdsSelector = exports.gridDataRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIds);
 

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

@@ -48,7 +48,7 @@ const useGridRows = (apiRef, props) => {
     }
   }
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridRows');
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
+  const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef);
   const lastUpdateMs = React.useRef(Date.now());
   const lastRowCount = React.useRef(props.rowCount);
   const timeout = (0, _useTimeout.useTimeout)();

package/node/hooks/features/sorting/gridSortingUtils.js

@@ -28,7 +28,7 @@ const isDesc = direction => direction === 'desc';
 /**
  * Transform an item of the sorting model into a method comparing two rows.
  * @param {GridSortItem} sortItem The sort item we want to apply.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridParsedSortItem | null} The parsed sort item. Returns `null` is the sort item is not valid.
  */
 const parseSortItem = (sortItem, apiRef) => {
@@ -81,7 +81,7 @@ const compareRows = (parsedSortItems, row1, row2) => {
 /**
  * Generates a method to easily sort a list of rows according to the current sort model.
  * @param {GridSortModel} sortModel The model with which we want to sort the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @param {React.RefObject<GridApiCommunity>} apiRef The API of the grid.
  * @returns {GridSortingModelApplier | null} A method that generates a list of sorted row ids from a list of rows according to the current sort model. If `null`, we consider that the rows should remain in the order there were provided.
  */
 const buildAggregatedSortingApplier = (sortModel, apiRef) => {

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridFocusedVirtualCellSelector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reselect = require("reselect");
+var _createSelector = require("../../../utils/createSelector");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
+var _focus = require("../focus");
+var _pagination = require("../pagination");
+var _rows = require("../rows");
+const gridIsFocusedCellOutOfContex = (0, _reselect.createSelector)(_focus.gridFocusCellSelector, _gridVirtualizationSelectors.gridRenderContextSelector, _pagination.gridVisibleRowsSelector, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _rows.gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
+  if (!focusedCell) {
+    return false;
+  }
+  const row = rows[focusedCell.id];
+  if (!row) {
+    return false;
+  }
+  const rowIndex = currentPage.rowToIndexMap.get(row);
+  const columnIndex = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex).findIndex(column => column.field === focusedCell.field);
+  const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
+  return !isInRenderContext;
+});
+const gridFocusedVirtualCellSelector = exports.gridFocusedVirtualCellSelector = (0, _createSelector.createSelectorMemoized)(gridIsFocusedCellOutOfContex, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _pagination.gridVisibleRowsSelector, _rows.gridRowsLookupSelector, _focus.gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
+  if (!isFocusedCellOutOfRenderContext) {
+    return null;
+  }
+  const row = rows[focusedCell.id];
+  if (!row) {
+    return null;
+  }
+  const rowIndex = currentPage.rowToIndexMap.get(row);
+  if (rowIndex === undefined) {
+    return null;
+  }
+  const columnIndex = visibleColumns.findIndex(column => column.field === focusedCell.field);
+  if (columnIndex === -1) {
+    return null;
+  }
+  return (0, _extends2.default)({}, focusedCell, {
+    rowIndex,
+    columnIndex
+  });
+});

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

@@ -24,7 +24,6 @@ var _useRunOnce = require("../../utils/useRunOnce");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
-var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _utils2 = require("../../utils");
 var platform = _interopRequireWildcard(require("../../../utils/platform"));
@@ -37,6 +36,7 @@ var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
 var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _gridRowsUtils = require("../rows/gridRowsUtils");
+var _gridFocusedVirtualCellSelector = require("./gridFocusedVirtualCellSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -84,12 +84,9 @@ const useGridVirtualScroller = () => {
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = (0, _RtlProvider.useRtl)();
-  const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
-  const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
   const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSelectionSelector.selectedIdsLookupSelector);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
-  const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
@@ -97,6 +94,8 @@ const useGridVirtualScroller = () => {
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
+  const isRenderContextReady = React.useRef(false);
+  const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
     if (!node) {
@@ -104,7 +103,10 @@ const useGridVirtualScroller = () => {
     }
     const initialRect = node.getBoundingClientRect();
     let lastSize = roundDimensions(initialRect);
-    apiRef.current.publishEvent('resize', lastSize);
+    if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
+      previousSize.current = lastSize;
+      apiRef.current.publishEvent('resize', lastSize);
+    }
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
@@ -145,17 +147,15 @@ const useGridVirtualScroller = () => {
    * work that's not necessary. Thus we store the context at the start of the scroll in `frozenContext`, and the rows
    * that are part of this old context will keep their same render context as to avoid re-rendering.
    */
-  const scrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
+  const scrollPosition = React.useRef(rootProps.initialState?.scroll ?? EMPTY_SCROLL_POSITION);
+  const ignoreNextScrollEvent = React.useRef(false);
   const previousContextScrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
   const previousRowContext = React.useRef(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
+  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
   const scrollTimeout = (0, _useTimeout.default)();
   const frozenContext = React.useRef(undefined);
   const scrollCache = (0, _useLazyRef.default)(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
-  const focusedCell = {
-    rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
-    columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
-  };
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
@@ -239,6 +239,10 @@ const useGridVirtualScroller = () => {
     updateRenderContext(nextRenderContext);
   };
   const handleScroll = (0, _utils.unstable_useEventCallback)(event => {
+    if (ignoreNextScrollEvent.current) {
+      ignoreNextScrollEvent.current = false;
+      return;
+    }
     const {
       scrollTop,
       scrollLeft
@@ -297,14 +301,14 @@ const useGridVirtualScroller = () => {
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = params.rows ? (0, _utils3.range)(0, params.rows.length) : (0, _utils3.range)(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
-    if (!isPinnedSection && focusedCell.rowIndex !== -1) {
-      if (focusedCell.rowIndex < firstRowToRender) {
-        virtualRowIndex = focusedCell.rowIndex;
-        rowIndexes.unshift(virtualRowIndex);
+    if (!isPinnedSection && focusedVirtualCell) {
+      if (focusedVirtualCell.rowIndex < firstRowToRender) {
+        rowIndexes.unshift(focusedVirtualCell.rowIndex);
+        virtualRowIndex = focusedVirtualCell.rowIndex;
       }
-      if (focusedCell.rowIndex >= lastRowToRender) {
-        virtualRowIndex = focusedCell.rowIndex;
-        rowIndexes.push(virtualRowIndex);
+      if (focusedVirtualCell.rowIndex > lastRowToRender) {
+        rowIndexes.push(focusedVirtualCell.rowIndex);
+        virtualRowIndex = focusedVirtualCell.rowIndex;
       }
     }
     const rows = [];
@@ -344,7 +348,6 @@ const useGridVirtualScroller = () => {
           });
         }
       }
-      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -369,19 +372,16 @@ const useGridVirtualScroller = () => {
           isLastVisible = isLastVisibleInSection;
         }
       }
-      const isVirtualRow = rowIndexInPage === virtualRowIndex;
-      const isNotVisible = isVirtualRow;
-      let tabbableCell = null;
-      if (cellTabIndex !== null && cellTabIndex.id === id) {
-        const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
-        tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
-      }
       let currentRenderContext = baseRenderContext;
       if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
+      const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
+      const isVirtualFocusColumn = focusedVirtualCell?.rowIndex === rowIndex;
       const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
+      const firstColumnIndex = currentRenderContext.firstColumnIndex;
+      const lastColumnIndex = currentRenderContext.lastColumnIndex;
       rows.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
         rowId: id,
@@ -389,19 +389,21 @@ const useGridVirtualScroller = () => {
         selected: isSelected,
         offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
-        dimensions: dimensions,
+        columnsTotalWidth: dimensions.columnsTotalWidth,
         rowHeight: baseRowHeight,
-        tabbableCell: tabbableCell,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
-        renderContext: currentRenderContext,
-        focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
+        firstColumnIndex: firstColumnIndex,
+        lastColumnIndex: lastColumnIndex,
+        focusedColumnIndex: isVirtualFocusColumn ? focusedVirtualCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isNotVisible,
-        showBottomBorder: showBottomBorder
+        isNotVisible: isVirtualFocusRow,
+        showBottomBorder: showBottomBorder,
+        scrollbarWidth: dimensions.hasScrollY ? dimensions.scrollbarSize : 0,
+        gridHasFiller: dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width
       }, rowProps), id));
-      if (isNotVisible) {
+      if (isVirtualFocusRow) {
         return;
       }
       const panel = panels.get(id);
@@ -432,18 +434,21 @@ const useGridVirtualScroller = () => {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
-  React.useEffect(() => {
-    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [apiRef, contentSize]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    // TODO a scroll reset should not be necessary
-    if (enabledForColumns) {
-      scrollerRef.current.scrollLeft = 0;
+  const onContentSizeApplied = React.useCallback(node => {
+    if (!node) {
+      return;
     }
-    if (enabledForRows) {
-      scrollerRef.current.scrollTop = 0;
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange', {
+      columnsTotalWidth,
+      contentHeight
+    });
+  }, [apiRef, columnsTotalWidth, contentHeight]);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (!isRenderContextReady.current) {
+      return;
     }
-  }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+    apiRef.current.updateRenderContext?.();
+  }, [apiRef, enabledForColumns, enabledForRows]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (listView) {
       scrollerRef.current.scrollLeft = 0;
@@ -458,6 +463,53 @@ const useGridVirtualScroller = () => {
       left: scrollPosition.current.left,
       renderContext: initialRenderContext
     });
+    isRenderContextReady.current = true;
+    if (rootProps.initialState?.scroll && scrollerRef.current) {
+      const scroller = scrollerRef.current;
+      const {
+        top,
+        left
+      } = rootProps.initialState.scroll;
+
+      // On initial mount, if we have columns available, we can restore the horizontal scroll immediately, but we need to skip the resulting scroll event, otherwise we would recalculate the render context at position top=0, left=restoredValue, but the initial render context is already calculated based on the initial value of scrollPosition ref.
+      const isScrollRestored = {
+        top: !(top > 0),
+        left: !(left > 0)
+      };
+      if (!isScrollRestored.left && columnsTotalWidth) {
+        scroller.scrollLeft = left;
+        ignoreNextScrollEvent.current = true;
+        isScrollRestored.left = true;
+      }
+
+      // For the sake of completeness, but I'm not sure if contentHeight is ever available at this point. Maybe when virtualisation is disabled?
+      if (!isScrollRestored.top && contentHeight) {
+        scroller.scrollTop = top;
+        ignoreNextScrollEvent.current = true;
+        isScrollRestored.top = true;
+      }
+
+      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise there's nowhere to scroll), but before paint to avoid reflows
+      if (!isScrollRestored.top || !isScrollRestored.left) {
+        const unsubscribeContentSizeChange = apiRef.current.subscribeEvent('virtualScrollerContentSizeChange', params => {
+          if (!isScrollRestored.left && params.columnsTotalWidth) {
+            scroller.scrollLeft = left;
+            ignoreNextScrollEvent.current = true;
+            isScrollRestored.left = true;
+          }
+          if (!isScrollRestored.top && params.contentHeight) {
+            scroller.scrollTop = top;
+            ignoreNextScrollEvent.current = true;
+            isScrollRestored.top = true;
+          }
+          if (isScrollRestored.left && isScrollRestored.top) {
+            unsubscribeContentSizeChange();
+          }
+        });
+        return unsubscribeContentSizeChange;
+      }
+    }
+    return undefined;
   });
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
@@ -485,7 +537,8 @@ const useGridVirtualScroller = () => {
     }),
     getContentProps: () => ({
       style: contentSize,
-      role: 'presentation'
+      role: 'presentation',
+      ref: onContentSizeApplied
     }),
     getRenderZoneProps: () => ({
       role: 'rowgroup'

package/node/hooks/utils/useGridApiEventHandler.js

@@ -34,7 +34,7 @@ function createUseGridApiEventHandler(registryContainer) {
     }
     const [objectRetainedByReact] = React.useState(new ObjectToBeRetainedByReact());
     const subscription = React.useRef(null);
-    const handlerRef = React.useRef();
+    const handlerRef = React.useRef(null);
     handlerRef.current = handler;
     const cleanupTokenRef = React.useRef(null);
     if (!subscription.current && handlerRef.current) {

package/node/hooks/utils/useGridVisibleRows.js

@@ -1,34 +1,13 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridVisibleRows = exports.getVisibleRows = void 0;
-var React = _interopRequireWildcard(require("react"));
 var _gridPaginationSelector = require("../features/pagination/gridPaginationSelector");
-var _gridFilterSelector = require("../features/filter/gridFilterSelector");
+var _ = require(".");
 const getVisibleRows = (apiRef, props) => {
-  let rows;
-  let range;
-  if (props.pagination && props.paginationMode === 'client') {
-    range = (0, _gridPaginationSelector.gridPaginationRowRangeSelector)(apiRef);
-    rows = (0, _gridPaginationSelector.gridPaginatedVisibleSortedGridRowEntriesSelector)(apiRef);
-  } else {
-    rows = (0, _gridFilterSelector.gridExpandedSortedRowEntriesSelector)(apiRef);
-    if (rows.length === 0) {
-      range = null;
-    } else {
-      range = {
-        firstRowIndex: 0,
-        lastRowIndex: rows.length - 1
-      };
-    }
-  }
-  return {
-    rows,
-    range
-  };
+  return (0, _gridPaginationSelector.gridVisibleRowsSelector)(apiRef);
 };
 
 /**
@@ -40,10 +19,6 @@ const getVisibleRows = (apiRef, props) => {
  */
 exports.getVisibleRows = getVisibleRows;
 const useGridVisibleRows = (apiRef, props) => {
-  const response = getVisibleRows(apiRef, props);
-  return React.useMemo(() => ({
-    rows: response.rows,
-    range: response.range
-  }), [response.rows, response.range]);
+  return (0, _.useGridSelector)(apiRef, _gridPaginationSelector.gridVisibleRowsSelector);
 };
 exports.useGridVisibleRows = useGridVisibleRows;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.23.5
+ * @mui/x-data-grid v7.24.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/constants.js

@@ -3,7 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
+exports.PinnedColumnPosition = exports.GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
 const GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
 const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
+let PinnedColumnPosition = exports.PinnedColumnPosition = /*#__PURE__*/function (PinnedColumnPosition) {
+  PinnedColumnPosition[PinnedColumnPosition["NONE"] = 0] = "NONE";
+  PinnedColumnPosition[PinnedColumnPosition["LEFT"] = 1] = "LEFT";
+  PinnedColumnPosition[PinnedColumnPosition["RIGHT"] = 2] = "RIGHT";
+  PinnedColumnPosition[PinnedColumnPosition["VIRTUAL"] = 3] = "VIRTUAL";
+  return PinnedColumnPosition;
+}({});

package/node/internals/index.js

@@ -821,6 +821,18 @@ Object.keys(_createControllablePromise).forEach(function (key) {
     }
   });
 });
+var _rtlFlipSide = require("../utils/rtlFlipSide");
+Object.keys(_rtlFlipSide).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _rtlFlipSide[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rtlFlipSide[key];
+    }
+  });
+});
 var _createSelector = require("../utils/createSelector");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _domUtils = require("../utils/domUtils");

package/node/internals/utils/attachPinnedStyle.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.attachPinnedStyle = attachPinnedStyle;
+var _rtlFlipSide = require("../../utils/rtlFlipSide");
+function attachPinnedStyle(style, isRtl, pinnedPosition, pinnedOffset) {
+  const side = (0, _rtlFlipSide.rtlFlipSide)(pinnedPosition, isRtl);
+  if (!side || pinnedOffset === undefined) {
+    return style;
+  }
+  style[side] = pinnedOffset;
+  return style;
+}