@mui/x-data-grid 7.20.0 → 7.21.0

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

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowsMeta = exports.rowsMetaStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _utils = require("@mui/utils");
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _ResizeObserver = require("../../../utils/ResizeObserver");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
+var _utils = require("../../../utils/utils");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _densitySelector = require("../density/densitySelector");
@@ -18,139 +20,121 @@ var _gridPaginationSelector = require("../pagination/gridPaginationSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridRowsSelector = require("./gridRowsSelector");
-var _useDataGridProps = require("../../../DataGrid/useDataGridProps");
-// TODO: I think the row heights can now be encoded as a single `size` instead of `sizes.baseXxxx`
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
+var _gridRowsUtils = require("./gridRowsUtils");
+/* eslint-disable no-underscore-dangle */
 
-const rowsMetaStateInitializer = state => (0, _extends2.default)({}, state, {
-  rowsMeta: {
-    currentPageTotalHeight: 0,
-    positions: []
-  }
-});
-exports.rowsMetaStateInitializer = rowsMetaStateInitializer;
-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;
+const rowsMetaStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.rowsMeta = {
+    heights: new Map()
+  };
+  return (0, _extends2.default)({}, 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)
  * @requires useGridPage (method)
  */
+exports.rowsMetaStateInitializer = rowsMetaStateInitializer;
 const useGridRowsMeta = (apiRef, props) => {
   const {
     getRowHeight: getRowHeightProp,
     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 = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityFactorSelector);
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
   const paginationState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationSelector);
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const validRowHeight = getValidRowHeight(props.rowHeight, _useDataGridProps.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((0, _extends2.default)({}, row, {
-          densityFactor
-        }));
-        if (rowHeightFromUser === 'auto') {
-          if (needsFirstMeasurement) {
-            const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight((0, _extends2.default)({}, row, {
-              densityFactor
-            })) : rowHeight;
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _gridDimensionsSelectors.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 = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state).rowHeight;
+    (0, _utils.eslintUseValue)(rowHeight);
+    const entry = apiRef.current.getRowHeightEntry(row.id);
+    if (!getRowHeightProp) {
+      entry.content = baseRowHeight;
+      entry.needsFirstMeasurement = false;
+    } else {
+      const rowHeightFromUser = getRowHeightProp((0, _extends2.default)({}, row, {
+        densityFactor
+      }));
+      if (rowHeightFromUser === 'auto') {
+        if (entry.needsFirstMeasurement) {
+          const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight((0, _extends2.default)({}, 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;
+        // Default back to base rowHeight if getRowHeight returns invalid value.
+        entry.content = (0, _gridRowsUtils.getValidRowHeight)(rowHeightFromUser, baseRowHeight, _gridRowsUtils.getRowHeightWarning);
+        entry.needsFirstMeasurement = false;
+        entry.autoHeight = false;
       }
-      const initialHeights = {
-        baseCenter: baseRowHeight
-      };
-      if (getRowSpacing) {
-        const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-        const spacing = getRowSpacing((0, _extends2.default)({}, row, {
-          isFirstVisible: indexRelativeToCurrentPage === 0,
-          isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-          indexRelativeToCurrentPage
-        }));
-        initialHeights.spacingTop = spacing.top ?? 0;
-        initialHeights.spacingBottom = spacing.bottom ?? 0;
-      }
-      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((0, _extends2.default)({}, 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 (0, _extends2.default)({}, state, {
         rowsMeta: {
@@ -159,70 +143,68 @@ 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(() => (0, _utils.unstable_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 = (0, _useLazyRef.default)(() => new _ResizeObserver.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);
+  };
+  (0, _pipeProcessing.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]);
-  (0, _pipeProcessing.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
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowsMetaApi, 'public');
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, rowsMetaPrivateApi, 'private');

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

@@ -16,6 +16,7 @@ var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _dimensions = require("../dimensions");
+var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 // 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
 function scrollIntoView(dimensions) {
@@ -59,7 +60,7 @@ const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
-    const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const visibleColumns = props.unstable_listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -106,7 +107,7 @@ 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 && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;

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

@@ -36,6 +36,7 @@ var _gridRowsUtils = require("../rows/gridRowsUtils");
 var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
 var _useGridVirtualization = require("./useGridVirtualization");
 var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
+var _gridListViewSelectors = require("../listView/gridListViewSelectors");
 var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -66,13 +67,20 @@ try {
 const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const {
+    unstable_listView: listView
+  } = rootProps;
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
   const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !isJSDOM;
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const pinnedColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumnDefinitions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumns = listView ? {
+    left: [],
+    right: []
+  } : pinnedColumnDefinitions;
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = (0, _RtlProvider.useRtl)();
@@ -139,7 +147,7 @@ const useGridVirtualScroller = () => {
     }
     previousContextScrollPosition.current = scrollPosition.current;
   }, [apiRef, dimensions.isReady]);
-  const triggerUpdateRenderContext = () => {
+  const triggerUpdateRenderContext = (0, _utils.unstable_useEventCallback)(() => {
     const newScroll = {
       top: scrollerRef.current.scrollTop,
       left: scrollerRef.current.scrollLeft
@@ -187,7 +195,7 @@ const useGridVirtualScroller = () => {
     });
     scrollTimeout.start(1000, triggerUpdateRenderContext);
     return nextRenderContext;
-  };
+  });
   const forceUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
@@ -373,11 +381,11 @@ 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',
@@ -404,6 +412,11 @@ const useGridVirtualScroller = () => {
       scrollerRef.current.scrollTop = 0;
     }
   }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (listView) {
+      scrollerRef.current.scrollLeft = 0;
+    }
+  }, [listView, scrollerRef]);
   (0, _useRunOnce.useRunOnce)(outerSize.width !== 0, () => {
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
@@ -459,7 +472,7 @@ exports.useGridVirtualScroller = useGridVirtualScroller;
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
-  const visibleColumns = (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+  const visibleColumns = rootProps.unstable_listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
   const hiddenCellsOriginMap = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsOriginMapSelector)(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
@@ -482,7 +495,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     range: currentPage.range,
     pinnedColumns: (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef),
     visibleColumns,
-    hiddenCellsOriginMap
+    hiddenCellsOriginMap,
+    listView: rootProps.unstable_listView ?? false
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {

package/node/hooks/utils/useGridApiMethod.js

@@ -1,14 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridApiMethod = useGridApiMethod;
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 function useGridApiMethod(privateApiRef, apiMethods, visibility) {
   const isFirstRender = React.useRef(true);
-  React.useEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     isFirstRender.current = false;
     privateApiRef.current.register(visibility, apiMethods);
   }, [privateApiRef, visibility, apiMethods]);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.20.0
+ * @mui/x-data-grid v7.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -100,6 +100,18 @@ Object.keys(_constants).forEach(function (key) {
     }
   });
 });
+var _dataGridPropsDefaultValues = require("./constants/dataGridPropsDefaultValues");
+Object.keys(_dataGridPropsDefaultValues).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _dataGridPropsDefaultValues[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dataGridPropsDefaultValues[key];
+    }
+  });
+});
 var _hooks = require("./hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/internals/index.js

@@ -81,6 +81,8 @@ var _exportNames = {
   useGridColumnResize: true,
   columnResizeStateInitializer: true,
   ROW_SELECTION_PROPAGATION_DEFAULT: true,
+  useGridListView: true,
+  listViewStateInitializer: true,
   useTimeout: true,
   useGridVisibleRows: true,
   getVisibleRows: true,
@@ -97,6 +99,7 @@ var _exportNames = {
   isEventTargetInPortal: true,
   isNavigationKey: true,
   isPasteShortcut: true,
+  isCopyShortcut: true,
   exportAs: true,
   useGridPrivateApiContext: true,
   serializeCellValue: true
@@ -359,6 +362,12 @@ Object.defineProperty(exports, "headerFilteringStateInitializer", {
     return _useGridHeaderFiltering.headerFilteringStateInitializer;
   }
 });
+Object.defineProperty(exports, "isCopyShortcut", {
+  enumerable: true,
+  get: function () {
+    return _keyboardUtils.isCopyShortcut;
+  }
+});
 Object.defineProperty(exports, "isEventTargetInPortal", {
   enumerable: true,
   get: function () {
@@ -383,6 +392,12 @@ Object.defineProperty(exports, "isSingleSelectColDef", {
     return _filterPanelUtils.isSingleSelectColDef;
   }
 });
+Object.defineProperty(exports, "listViewStateInitializer", {
+  enumerable: true,
+  get: function () {
+    return _useGridListView.listViewStateInitializer;
+  }
+});
 Object.defineProperty(exports, "paginationStateInitializer", {
   enumerable: true,
   get: function () {
@@ -551,6 +566,12 @@ Object.defineProperty(exports, "useGridKeyboardNavigation", {
     return _useGridKeyboardNavigation.useGridKeyboardNavigation;
   }
 });
+Object.defineProperty(exports, "useGridListView", {
+  enumerable: true,
+  get: function () {
+    return _useGridListView.useGridListView;
+  }
+});
 Object.defineProperty(exports, "useGridPagination", {
   enumerable: true,
   get: function () {
@@ -775,6 +796,7 @@ Object.keys(_virtualization).forEach(function (key) {
 });
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _utils = require("../hooks/features/rowSelection/utils");
+var _useGridListView = require("../hooks/features/listView/useGridListView");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");

package/node/utils/ResizeObserver.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResizeObserver = void 0;
+/* eslint-disable */
+
+/**
+ * HACK: Minimal shim to get jsdom to work.
+ */
+const ResizeObserver = exports.ResizeObserver = typeof globalThis.ResizeObserver !== 'undefined' ? globalThis.ResizeObserver : class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

package/node/utils/keyboardUtils.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHideMenuKey = exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
+exports.isCellExitEditModeKeys = exports.isCellEnterEditModeKeys = exports.isCellEditCommitKeys = exports.GRID_MULTIPLE_SELECTION_KEYS = exports.GRID_CELL_EXIT_EDIT_MODE_KEYS = exports.GRID_CELL_EDIT_COMMIT_KEYS = void 0;
+exports.isCopyShortcut = isCopyShortcut;
+exports.isNavigationKey = exports.isMultipleKey = exports.isKeyboardEvent = exports.isHideMenuKey = void 0;
 exports.isPasteShortcut = isPasteShortcut;
 exports.isPrintableKey = isPrintableKey;
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
@@ -37,8 +39,16 @@ const isHideMenuKey = key => key === 'Tab' || key === 'Escape';
 // However, maybe it's overkill to fix, so let's be lazy.
 exports.isHideMenuKey = isHideMenuKey;
 function isPasteShortcut(event) {
-  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && !event.shiftKey && !event.altKey) {
-    return true;
-  }
-  return false;
+  return (event.ctrlKey || event.metaKey) &&
+  // We can't use event.code === 'KeyV' as event.code assumes a QWERTY keyboard layout,
+  // for example, it would be another letter on a Dvorak physical keyboard.
+  // We can't use event.key === 'v' as event.key is not stable with key modifiers and keyboard layouts,
+  // for example, it would be ה on a Hebrew keyboard layout.
+  // https://github.com/w3c/uievents/issues/377 could be a long-term solution
+  String.fromCharCode(event.keyCode) === 'V' && !event.shiftKey && !event.altKey;
+}
+
+// Checks if the keyboard event corresponds to the copy shortcut (CTRL+C or CMD+C) across different localization keyboards.
+function isCopyShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey;
 }