@mui/x-data-grid 7.19.0 → 7.21.0

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -246,7 +246,11 @@ export const useGridRowSelection = (apiRef, props) => {
   /*
    * EVENTS
    */
+  const isFirstRender = React.useRef(true);
   const removeOutdatedSelection = React.useCallback((sortModelUpdated = false) => {
+    if (isFirstRender.current) {
+      return;
+    }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
 
@@ -254,7 +258,7 @@ export const useGridRowSelection = (apiRef, props) => {
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] === false) {
+      if (filteredRowsLookup[id] !== true) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -408,7 +412,7 @@ export const useGridRowSelection = (apiRef, props) => {
       handleSingleRowSelection(params.id, event);
       return;
     }
-    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
+    if (String.fromCharCode(event.keyCode) === 'A' && (event.ctrlKey || event.metaKey)) {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
@@ -462,4 +466,9 @@ export const useGridRowSelection = (apiRef, props) => {
   React.useEffect(() => {
     runIfRowSelectionIsEnabled(removeOutdatedSelection);
   }, [removeOutdatedSelection, runIfRowSelectionIsEnabled]);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    }
+  }, []);
 };

package/modern/hooks/features/rowSelection/utils.js

@@ -44,21 +44,21 @@ export function getCheckboxPropsSelector(groupId, autoSelectParents) {
         isChecked: true
       };
     }
-    let selectableDescendentsCount = 0;
-    let selectedDescendentsCount = 0;
+    let selectableDescendantsCount = 0;
+    let selectedDescendantsCount = 0;
     const startIndex = sortedRowIds.findIndex(id => id === groupId) + 1;
     for (let index = startIndex; index < sortedRowIds.length && rowTree[sortedRowIds[index]]?.depth > groupNode.depth; index += 1) {
       const id = sortedRowIds[index];
       if (filteredRowsLookup[id] !== false) {
-        selectableDescendentsCount += 1;
+        selectableDescendantsCount += 1;
         if (rowSelectionLookup[id] !== undefined) {
-          selectedDescendentsCount += 1;
+          selectedDescendantsCount += 1;
         }
       }
     }
     return {
-      isIndeterminate: selectedDescendentsCount > 0 && selectedDescendentsCount < selectableDescendentsCount || selectedDescendentsCount === selectableDescendentsCount && rowSelectionLookup[groupId] === undefined,
-      isChecked: autoSelectParents ? selectedDescendentsCount > 0 : rowSelectionLookup[groupId] === groupId
+      isIndeterminate: selectedDescendantsCount > 0 && (selectedDescendantsCount < selectableDescendantsCount || rowSelectionLookup[groupId] === undefined),
+      isChecked: autoSelectParents ? selectedDescendantsCount > 0 : rowSelectionLookup[groupId] === groupId
     };
   });
 }

package/modern/hooks/features/rows/gridRowsMetaInterfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -24,7 +24,7 @@ export const buildRootGroup = () => ({
  */
 export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
-    throw new Error(['MUI X: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
+    throw new Error(['MUI X: The Data Grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
 export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
@@ -306,4 +306,17 @@ export function computeRowsUpdates(apiRef, updates, getRowId) {
     }
   });
   return nonPinnedRowsUpdates;
-}
+}
+let warnedOnceInvalidRowHeight = false;
+export const getValidRowHeight = (rowHeightProp, defaultRowHeight, warningMessage) => {
+  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
+    return rowHeightProp;
+  }
+  if (process.env.NODE_ENV !== 'production' && !warnedOnceInvalidRowHeight && typeof rowHeightProp !== 'undefined' && rowHeightProp !== null) {
+    console.warn(warningMessage);
+    warnedOnceInvalidRowHeight = true;
+  }
+  return defaultRowHeight;
+};
+export const rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
+export const getRowHeightWarning = [`MUI X: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');

package/modern/hooks/features/rows/useGridParamsApi.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from "../../../utils/domUtils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 export class MissingRowIdError extends Error {}
 
 /**
@@ -12,7 +13,7 @@ export class MissingRowIdError extends Error {}
  * TODO: Impossible priority - useGridEditing also needs to be after useGridParamsApi
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
-export function useGridParamsApi(apiRef) {
+export function useGridParamsApi(apiRef, props) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
     colDef: apiRef.current.getColumn(field)
@@ -30,7 +31,7 @@ export function useGridParamsApi(apiRef) {
     return params;
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
-    const colDef = apiRef.current.getColumn(field);
+    const colDef = props.unstable_listView ? gridListColumnSelector(apiRef.current.state) : apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
@@ -59,7 +60,7 @@ export function useGridParamsApi(apiRef) {
     }
     params.isEditable = colDef && apiRef.current.isCellEditable(params);
     return params;
-  }, [apiRef]);
+  }, [apiRef, props.unstable_listView]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);

package/modern/hooks/features/rows/useGridRowSpanning.js

@@ -202,7 +202,7 @@ export const useGridRowSpanning = (apiRef, props) => {
     }
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: renderContext.lastRowIndex - 1
+      lastRowIndex: Math.min(renderContext.lastRowIndex - 1, range.lastRowIndex)
     }, processedRange.current);
     if (rangeToProcess === null) {
       return;

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { unstable_debounce as debounce } from '@mui/utils';
+import useLazyRef from '@mui/utils/useLazyRef';
+import { ResizeObserver } from "../../../utils/ResizeObserver.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { eslintUseValue } from "../../../utils/utils.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { gridDensityFactorSelector } from "../density/densitySelector.js";
@@ -10,29 +12,21 @@ import { gridPaginationSelector } from "../pagination/gridPaginationSelector.js"
 import { gridSortModelSelector } from "../sorting/gridSortingSelector.js";
 import { useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
 import { gridPinnedRowsSelector } from "./gridRowsSelector.js";
-import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../DataGrid/useDataGridProps.js";
+import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
+import { getValidRowHeight, getRowHeightWarning } from "./gridRowsUtils.js";
+/* eslint-disable no-underscore-dangle */
 
-// TODO: I think the row heights can now be encoded as a single `size` instead of `sizes.baseXxxx`
-
-export const rowsMetaStateInitializer = state => _extends({}, state, {
-  rowsMeta: {
-    currentPageTotalHeight: 0,
-    positions: []
-  }
-});
-let warnedOnceInvalidRowHeight = false;
-const getValidRowHeight = (rowHeightProp, defaultRowHeight, warningMessage) => {
-  if (typeof rowHeightProp === 'number' && rowHeightProp > 0) {
-    return rowHeightProp;
-  }
-  if (process.env.NODE_ENV !== 'production' && !warnedOnceInvalidRowHeight && typeof rowHeightProp !== 'undefined' && rowHeightProp !== null) {
-    console.warn(warningMessage);
-    warnedOnceInvalidRowHeight = true;
-  }
-  return defaultRowHeight;
+export const rowsMetaStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.rowsMeta = {
+    heights: new Map()
+  };
+  return _extends({}, state, {
+    rowsMeta: {
+      currentPageTotalHeight: 0,
+      positions: []
+    }
+  });
 };
-const rowHeightWarning = [`MUI X: The \`rowHeight\` prop should be a number greater than 0.`, `The default value will be used instead.`].join('\n');
-const getRowHeightWarning = [`MUI X: The \`getRowHeight\` prop should return a number greater than 0 or 'auto'.`, `The default value will be used instead.`].join('\n');
 
 /**
  * @requires useGridPageSize (method)
@@ -44,105 +38,94 @@ export const useGridRowsMeta = (apiRef, props) => {
     getRowSpacing,
     getEstimatedRowHeight
   } = props;
-  const rowsHeightLookup = React.useRef(Object.create(null));
-
-  // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+  const heightCache = apiRef.current.caches.rowsMeta.heights;
   const lastMeasuredRowIndex = React.useRef(-1);
   const hasRowWithAutoHeight = React.useRef(false);
+  const isHeightMetaValid = React.useRef(false);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const validRowHeight = getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning);
-  const rowHeight = Math.floor(validRowHeight * densityFactor);
-  const hydrateRowsMeta = React.useCallback(() => {
-    hasRowWithAutoHeight.current = false;
-    const calculateRowProcessedSizes = row => {
-      if (!rowsHeightLookup.current[row.id]) {
-        rowsHeightLookup.current[row.id] = {
-          sizes: {
-            baseCenter: rowHeight
-          },
-          isResized: false,
-          autoHeight: false,
-          needsFirstMeasurement: true // Assume all rows will need to be measured by default
-        };
-      }
-      const {
-        isResized,
-        needsFirstMeasurement,
-        sizes
-      } = rowsHeightLookup.current[row.id];
-      let baseRowHeight = typeof rowHeight === 'number' && rowHeight > 0 ? rowHeight : 52;
-      const existingBaseRowHeight = sizes.baseCenter;
-      if (isResized) {
-        // Do not recalculate resized row height and use the value from the lookup
-        baseRowHeight = existingBaseRowHeight;
-      } else if (getRowHeightProp) {
-        const rowHeightFromUser = getRowHeightProp(_extends({}, row, {
-          densityFactor
-        }));
-        if (rowHeightFromUser === 'auto') {
-          if (needsFirstMeasurement) {
-            const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
-              densityFactor
-            })) : rowHeight;
+  const rowHeight = useGridSelector(apiRef, () => gridDimensionsSelector(apiRef.current.state).rowHeight);
+  const getRowHeightEntry = rowId => {
+    let entry = heightCache.get(rowId);
+    if (entry === undefined) {
+      entry = {
+        content: rowHeight,
+        spacingTop: 0,
+        spacingBottom: 0,
+        detail: 0,
+        autoHeight: false,
+        needsFirstMeasurement: true
+      };
+      heightCache.set(rowId, entry);
+    }
+    return entry;
+  };
+  const processHeightEntry = React.useCallback(row => {
+    // HACK: rowHeight trails behind the most up-to-date value just enough to
+    // mess the initial rowsMeta hydration :/
+    const baseRowHeight = gridDimensionsSelector(apiRef.current.state).rowHeight;
+    eslintUseValue(rowHeight);
+    const entry = apiRef.current.getRowHeightEntry(row.id);
+    if (!getRowHeightProp) {
+      entry.content = baseRowHeight;
+      entry.needsFirstMeasurement = false;
+    } else {
+      const rowHeightFromUser = getRowHeightProp(_extends({}, row, {
+        densityFactor
+      }));
+      if (rowHeightFromUser === 'auto') {
+        if (entry.needsFirstMeasurement) {
+          const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
+            densityFactor
+          })) : baseRowHeight;
 
-            // If the row was not measured yet use the estimated row height
-            baseRowHeight = estimatedRowHeight ?? rowHeight;
-          } else {
-            baseRowHeight = existingBaseRowHeight;
-          }
-          hasRowWithAutoHeight.current = true;
-          rowsHeightLookup.current[row.id].autoHeight = true;
-        } else {
-          // Default back to base rowHeight if getRowHeight returns invalid value.
-          baseRowHeight = getValidRowHeight(rowHeightFromUser, rowHeight, getRowHeightWarning);
-          rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-          rowsHeightLookup.current[row.id].autoHeight = false;
+          // If the row was not measured yet use the estimated row height
+          entry.content = estimatedRowHeight ?? baseRowHeight;
         }
+        hasRowWithAutoHeight.current = true;
+        entry.autoHeight = true;
       } else {
-        rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-      }
-      const initialHeights = {
-        baseCenter: baseRowHeight
-      };
-      if (getRowSpacing) {
-        const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-        const spacing = getRowSpacing(_extends({}, row, {
-          isFirstVisible: indexRelativeToCurrentPage === 0,
-          isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-          indexRelativeToCurrentPage
-        }));
-        initialHeights.spacingTop = spacing.top ?? 0;
-        initialHeights.spacingBottom = spacing.bottom ?? 0;
+        // Default back to base rowHeight if getRowHeight returns invalid value.
+        entry.content = getValidRowHeight(rowHeightFromUser, baseRowHeight, getRowHeightWarning);
+        entry.needsFirstMeasurement = false;
+        entry.autoHeight = false;
       }
-      const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
-      rowsHeightLookup.current[row.id].sizes = processedSizes;
-      return processedSizes;
-    };
+    }
+    if (getRowSpacing) {
+      const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+      const spacing = getRowSpacing(_extends({}, row, {
+        isFirstVisible: indexRelativeToCurrentPage === 0,
+        isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+        indexRelativeToCurrentPage
+      }));
+      entry.spacingTop = spacing.top ?? 0;
+      entry.spacingBottom = spacing.bottom ?? 0;
+    } else {
+      entry.spacingTop = 0;
+      entry.spacingBottom = 0;
+    }
+    apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row);
+    return entry;
+  }, [apiRef, currentPage.rows.length, getRowHeightProp, getEstimatedRowHeight, rowHeight, getRowSpacing, densityFactor]);
+  const hydrateRowsMeta = React.useCallback(() => {
+    hasRowWithAutoHeight.current = false;
+    pinnedRows.top.forEach(processHeightEntry);
+    pinnedRows.bottom.forEach(processHeightEntry);
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
-      let otherSizes = 0;
-      const processedSizes = calculateRowProcessedSizes(row);
-      /* eslint-disable-next-line guard-for-in */
-      for (const key in processedSizes) {
-        const value = processedSizes[key];
-        if (key !== 'baseCenter') {
-          otherSizes += value;
-        }
-      }
-      return acc + processedSizes.baseCenter + otherSizes;
+      const entry = processHeightEntry(row);
+      const total = entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
+      return acc + total;
     }, 0);
-    pinnedRows?.top?.forEach(row => {
-      calculateRowProcessedSizes(row);
-    });
-    pinnedRows?.bottom?.forEach(row => {
-      calculateRowProcessedSizes(row);
-    });
+    if (!hasRowWithAutoHeight.current) {
+      // No row has height=auto, so all rows are already measured
+      lastMeasuredRowIndex.current = Infinity;
+    }
     apiRef.current.setState(state => {
       return _extends({}, state, {
         rowsMeta: {
@@ -151,70 +134,68 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       });
     });
-    if (!hasRowWithAutoHeight.current) {
-      // No row has height=auto, so all rows are already measured
-      lastMeasuredRowIndex.current = Infinity;
-    }
-    apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, rowHeight, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows, densityFactor]);
-  const getRowHeight = React.useCallback(rowId => {
-    const height = rowsHeightLookup.current[rowId];
-    return height ? height.sizes.baseCenter : rowHeight;
-  }, [rowHeight]);
-  const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
-  const setRowHeight = React.useCallback((id, height) => {
-    rowsHeightLookup.current[id].sizes.baseCenter = height;
-    rowsHeightLookup.current[id].isResized = true;
-    rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
-  const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta, props.rowPositionsDebounceMs), [hydrateRowsMeta, props.rowPositionsDebounceMs]);
-  const storeMeasuredRowHeight = React.useCallback((id, height) => {
-    if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
-      return;
-    }
-
-    // Only trigger hydration if the value is different, otherwise we trigger a loop
-    const needsHydration = rowsHeightLookup.current[id].sizes.baseCenter !== height;
-    rowsHeightLookup.current[id].needsFirstMeasurement = false;
-    rowsHeightLookup.current[id].sizes.baseCenter = height;
-    if (needsHydration) {
-      debouncedHydrateRowsMeta();
-    }
-  }, [debouncedHydrateRowsMeta]);
-  const rowHasAutoHeight = React.useCallback(id => {
-    return rowsHeightLookup.current[id]?.autoHeight || false;
-  }, []);
-  const getLastMeasuredRowIndex = React.useCallback(() => {
+    isHeightMetaValid.current = true;
+  }, [apiRef, pinnedRows, currentPage.rows, processHeightEntry]);
+  const getRowHeight = rowId => {
+    return heightCache.get(rowId)?.content ?? rowHeight;
+  };
+  const storeRowHeightMeasurement = (id, height) => {
+    const entry = apiRef.current.getRowHeightEntry(id);
+    const didChange = entry.content !== height;
+    entry.needsFirstMeasurement = false;
+    entry.content = height;
+    isHeightMetaValid.current && (isHeightMetaValid.current = !didChange);
+  };
+  const rowHasAutoHeight = id => {
+    return heightCache.get(id)?.autoHeight ?? false;
+  };
+  const getLastMeasuredRowIndex = () => {
     return lastMeasuredRowIndex.current;
-  }, []);
-  const setLastMeasuredRowIndex = React.useCallback(index => {
+  };
+  const setLastMeasuredRowIndex = index => {
     if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
-  }, []);
-  const resetRowHeights = React.useCallback(() => {
-    rowsHeightLookup.current = {};
+  };
+  const resetRowHeights = () => {
+    heightCache.clear();
     hydrateRowsMeta();
-  }, [hydrateRowsMeta]);
+  };
+  const resizeObserver = useLazyRef(() => new ResizeObserver(entries => {
+    for (let i = 0; i < entries.length; i += 1) {
+      const entry = entries[i];
+      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      const rowId = entry.target.__mui_id;
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
+    }
+    if (!isHeightMetaValid.current) {
+      apiRef.current.requestPipeProcessorsApplication('rowHeight');
+    }
+  })).current;
+  const observeRowHeight = (element, rowId) => {
+    element.__mui_id = rowId;
+    resizeObserver.observe(element);
+    return () => resizeObserver.unobserve(element);
+  };
+  useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
 
   // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
   React.useEffect(() => {
     hydrateRowsMeta();
-  }, [rowHeight, filterModel, paginationState, sortModel, hydrateRowsMeta]);
-  useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
+  }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
   const rowsMetaApi = {
-    unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,
     unstable_getRowHeight: getRowHeight,
-    unstable_getRowInternalSizes: getRowInternalSizes,
-    unstable_setRowHeight: setRowHeight,
-    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight,
+    unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,
+    unstable_storeRowHeightMeasurement: storeRowHeightMeasurement,
     resetRowHeights
   };
   const rowsMetaPrivateApi = {
-    getLastMeasuredRowIndex,
-    rowHasAutoHeight
+    hydrateRowsMeta,
+    observeRowHeight,
+    rowHasAutoHeight,
+    getRowHeightEntry,
+    getLastMeasuredRowIndex
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'public');
   useGridApiMethod(apiRef, rowsMetaPrivateApi, 'private');

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

@@ -9,6 +9,7 @@ import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
 import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 
 // 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
@@ -47,11 +48,13 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
+  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
+  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
     const totalRowCount = gridRowCountSelector(apiRef);
-    const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+    const visibleColumns = props.unstable_listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -98,20 +101,22 @@ export const useGridScroll = (apiRef, props) => {
       return true;
     }
     return false;
-  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows]);
+  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
+      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
+      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

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

@@ -3,7 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 export const sanitizeSortModel = (model, disableMultipleColumnsSorting) => {
   if (disableMultipleColumnsSorting && model.length > 1) {
     if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      warnOnce(['MUI X: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     return [model[0]];
   }