@mui/x-data-grid 7.19.0 → 7.21.0

package/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 &&= !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/hooks/features/scroll/useGridScroll.d.ts

@@ -9,4 +9,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFilter (state)
  * @requires useGridColumnSpanning (method)
  */
-export declare const useGridScroll: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination">) => void;
+export declare const useGridScroll: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "unstable_listView">) => void;

package/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/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]];
   }

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -25,6 +25,7 @@ import { getMinimalContentHeight } from "../rows/gridRowsUtils.js";
 import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
 import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -55,13 +56,20 @@ try {
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const {
+    unstable_listView: listView
+  } = rootProps;
+  const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef));
   const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumnDefinitions = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumns = listView ? {
+    left: [],
+    right: []
+  } : pinnedColumnDefinitions;
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = useRtl();
@@ -73,8 +81,8 @@ export const useGridVirtualScroller = () => {
   const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
-  const scrollbarVerticalRef = React.useRef(null);
-  const scrollbarHorizontalRef = React.useRef(null);
+  const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
+  const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
@@ -128,7 +136,7 @@ export const useGridVirtualScroller = () => {
     }
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef, dimensions.isReady]);
-  const triggerUpdateRenderContext = () => {
+  const triggerUpdateRenderContext = useEventCallback(() => {
     const newScroll = {
       top: scrollerRef.current.scrollTop,
       left: scrollerRef.current.scrollLeft
@@ -176,7 +184,7 @@ export const useGridVirtualScroller = () => {
     });
     scrollTimeout.start(1000, triggerUpdateRenderContext);
     return nextRenderContext;
-  };
+  });
   const forceUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
@@ -362,11 +370,11 @@ export const useGridVirtualScroller = () => {
     });
     return rows;
   };
-  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
+  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth > outerSize.width;
   const scrollerStyle = React.useMemo(() => ({
-    overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
+    overflowX: !needsHorizontalScrollbar || listView ? 'hidden' : undefined,
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
-  }), [needsHorizontalScrollbar, rootProps.autoHeight]);
+  }), [needsHorizontalScrollbar, rootProps.autoHeight, listView]);
   const contentSize = React.useMemo(() => {
     const size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
@@ -393,6 +401,11 @@ export const useGridVirtualScroller = () => {
       scrollerRef.current.scrollTop = 0;
     }
   }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+  useEnhancedEffect(() => {
+    if (listView) {
+      scrollerRef.current.scrollLeft = 0;
+    }
+  }, [listView, scrollerRef]);
   useRunOnce(outerSize.width !== 0, () => {
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
@@ -447,7 +460,7 @@ export const useGridVirtualScroller = () => {
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
-  const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+  const visibleColumns = rootProps.unstable_listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
   const hiddenCellsOriginMap = gridRowSpanningHiddenCellsOriginMapSelector(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
@@ -470,7 +483,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     range: currentPage.range,
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
     visibleColumns,
-    hiddenCellsOriginMap
+    hiddenCellsOriginMap,
+    listView: rootProps.unstable_listView ?? false
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {

package/hooks/utils/useGridApiContext.js

@@ -3,7 +3,7 @@ import { GridApiContext } from "../../components/GridApiContext.js";
 export function useGridApiContext() {
   const apiRef = React.useContext(GridApiContext);
   if (apiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return apiRef;
 }

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -5,7 +5,7 @@ import { CleanupTracking } from '../../utils/cleanupTracking/CleanupTracking';
 import type { GridApiCommon } from '../../models';
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 declare enum GridSignature {
     DataGrid = "DataGrid",

package/hooks/utils/useGridApiEventHandler.js

@@ -3,7 +3,7 @@ import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBase
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
 /**
  * Signal to the underlying logic what version of the public component API
- * of the data grid is exposed.
+ * of the Data Grid is exposed.
  */
 var GridSignature = /*#__PURE__*/function (GridSignature) {
   GridSignature["DataGrid"] = "DataGrid";

package/hooks/utils/useGridApiMethod.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 export function useGridApiMethod(privateApiRef, apiMethods, visibility) {
   const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     isFirstRender.current = false;
     privateApiRef.current.register(visibility, apiMethods);
   }, [privateApiRef, visibility, apiMethods]);

package/hooks/utils/useGridConfiguration.js

@@ -3,7 +3,7 @@ import { GridConfigurationContext } from "../../components/GridConfigurationCont
 export const useGridConfiguration = () => {
   const configuration = React.useContext(GridConfigurationContext);
   if (configuration === undefined) {
-    throw new Error(['MUI X: Could not find the data grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return configuration;
 };

package/hooks/utils/useGridPrivateApiContext.js

@@ -6,7 +6,7 @@ if (process.env.NODE_ENV !== 'production') {
 export function useGridPrivateApiContext() {
   const privateApiRef = React.useContext(GridPrivateApiContext);
   if (privateApiRef === undefined) {
-    throw new Error(['MUI X: Could not find the data grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+    throw new Error(['MUI X: Could not find the Data Grid private context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the Data Grid.'].join('\n'));
   }
   return privateApiRef;
 }

package/index.d.ts

@@ -6,6 +6,7 @@ export { useGridRootProps } from './hooks/utils/useGridRootProps';
 export * from './DataGrid';
 export * from './components';
 export * from './constants';
+export * from './constants/dataGridPropsDefaultValues';
 export * from './hooks';
 export * from './models';
 export * from './context';
@@ -27,10 +28,10 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS, }
  */
 export type GridApi = GridApiCommunity;
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 export type GridState = GridStateCommunity;
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */
 export type GridInitialState = GridInitialStateCommunity;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.19.0
+ * @mui/x-data-grid v7.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,6 +11,7 @@ export { useGridRootProps } from "./hooks/utils/useGridRootProps.js";
 export * from "./DataGrid/index.js";
 export * from "./components/index.js";
 export * from "./constants/index.js";
+export * from "./constants/dataGridPropsDefaultValues.js";
 export * from "./hooks/index.js";
 export * from "./models/index.js";
 export * from "./context/index.js";
@@ -29,9 +30,9 @@ export { GridColumnMenu, GRID_COLUMN_MENU_SLOTS, GRID_COLUMN_MENU_SLOT_PROPS } f
  */
 
 /**
- * The state of `DataGrid`.
+ * The state of Data Grid.
  */
 
 /**
- * The initial state of `DataGrid`.
+ * The initial state of Data Grid.
  */