@mui/x-data-grid 7.20.0 → 7.21.0

package/modern/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();
@@ -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/modern/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/modern/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
@@ -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";

package/modern/internals/index.js

@@ -54,6 +54,7 @@ export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from "../hooks/features/v
 export * from "../hooks/features/virtualization/index.js";
 export { useGridColumnResize, columnResizeStateInitializer } from "../hooks/features/columnResize/useGridColumnResize.js";
 export { ROW_SELECTION_PROPAGATION_DEFAULT } from "../hooks/features/rowSelection/utils.js";
+export { useGridListView, listViewStateInitializer } from "../hooks/features/listView/useGridListView.js";
 export { useTimeout } from "../hooks/utils/useTimeout.js";
 export { useGridVisibleRows, getVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 export { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
@@ -63,7 +64,7 @@ export { createSelector, createSelectorV8, createSelectorMemoized, createSelecto
 export { useGridSelectorV8 } from "../hooks/utils/useGridSelector.js";
 export { gridRowGroupsToFetchSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from "../utils/domUtils.js";
-export { isNavigationKey, isPasteShortcut } from "../utils/keyboardUtils.js";
+export { isNavigationKey, isPasteShortcut, isCopyShortcut } from "../utils/keyboardUtils.js";
 export * from "../utils/utils.js";
 export { exportAs } from "../utils/exportAs.js";
 export * from "../utils/getPublicApiRef.js";

package/modern/utils/ResizeObserver.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+
+/**
+ * HACK: Minimal shim to get jsdom to work.
+ */
+export const ResizeObserver = typeof globalThis.ResizeObserver !== 'undefined' ? globalThis.ResizeObserver : class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

package/modern/utils/keyboardUtils.js

@@ -22,8 +22,16 @@ export const isHideMenuKey = key => key === 'Tab' || key === 'Escape';
 // In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
 // However, maybe it's overkill to fix, so let's be lazy.
 export 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.
+export function isCopyShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey;
 }

package/node/DataGrid/DataGrid.js

@@ -702,6 +702,7 @@ DataGridRaw.propTypes = {
    * Setting it to a lower value could be useful when using dynamic row height,
    * but might reduce performance when displaying a large number of rows.
    * @default 166
+   * @deprecated
    */
   rowPositionsDebounceMs: _propTypes.default.number,
   /**

package/node/DataGrid/index.js

@@ -3,19 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  DATA_GRID_PROPS_DEFAULT_VALUES: true
-};
-Object.defineProperty(exports, "DATA_GRID_PROPS_DEFAULT_VALUES", {
-  enumerable: true,
-  get: function () {
-    return _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES;
-  }
-});
 var _DataGrid = require("./DataGrid");
 Object.keys(_DataGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -23,5 +13,4 @@ Object.keys(_DataGrid).forEach(function (key) {
       return _DataGrid[key];
     }
   });
-});
-var _useDataGridProps = require("./useDataGridProps");
+});

package/node/DataGrid/useDataGridComponent.js

@@ -34,6 +34,7 @@ var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridCo
 var _virtualization = require("../hooks/features/virtualization");
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
+var _useGridListView = require("../hooks/features/listView/useGridListView");
 const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
 
@@ -63,12 +64,13 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_virtualization.virtualizationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
   (0, _useGridRowSpanning.useGridRowSpanning)(apiRef, props);
-  (0, _useGridParamsApi.useGridParamsApi)(apiRef);
+  (0, _useGridParamsApi.useGridParamsApi)(apiRef, props);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);
   (0, _useGridEditing.useGridEditing)(apiRef, props);
@@ -89,6 +91,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridEvents.useGridEvents)(apiRef, props);
   (0, _useGridStatePersistence.useGridStatePersistence)(apiRef);
   (0, _virtualization.useGridVirtualization)(apiRef, props);
+  (0, _useGridListView.useGridListView)(apiRef, props);
   return apiRef;
 };
 exports.useDataGridComponent = useDataGridComponent;

package/node/DataGrid/useDataGridProps.js

@@ -5,14 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDataGridProps = exports.DATA_GRID_PROPS_DEFAULT_VALUES = void 0;
+exports.useDataGridProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _constants = require("../constants");
 var _defaultGridSlotsComponents = require("../constants/defaultGridSlotsComponents");
-var _models = require("../models");
 var _utils = require("../internals/utils");
+var _dataGridPropsDefaultValues = require("../constants/dataGridPropsDefaultValues");
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -22,67 +22,8 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
-  signature: 'DataGrid'
-};
-
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES = {
-  autoHeight: false,
-  autoPageSize: false,
-  autosizeOnMount: false,
-  checkboxSelection: false,
-  checkboxSelectionVisibleOnly: false,
-  clipboardCopyCellDelimiter: '\t',
-  columnBufferPx: 150,
-  columnHeaderHeight: 56,
-  disableAutosize: false,
-  disableColumnFilter: false,
-  disableColumnMenu: false,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  disableColumnSelector: false,
-  disableColumnSorting: false,
-  disableDensitySelector: false,
-  disableEval: false,
-  disableMultipleColumnsFiltering: false,
-  disableMultipleColumnsSorting: false,
-  disableMultipleRowSelection: false,
-  disableRowSelectionOnClick: false,
-  disableVirtualization: false,
-  editMode: _models.GridEditModes.Cell,
-  filterDebounceMs: 150,
-  filterMode: 'client',
-  hideFooter: false,
-  hideFooterPagination: false,
-  hideFooterRowCount: false,
-  hideFooterSelectedRowCount: false,
-  ignoreDiacritics: false,
-  ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
-  keepColumnPositionIfDraggedOutside: false,
-  keepNonExistentRowsSelected: false,
-  loading: false,
-  logger: console,
-  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-  pageSizeOptions: [25, 50, 100],
-  pagination: false,
-  paginationMode: 'client',
-  resizeThrottleMs: 60,
-  rowBufferPx: 150,
-  rowHeight: 52,
-  rowPositionsDebounceMs: 166,
-  rows: [],
-  rowSelection: true,
-  rowSpacingType: 'margin',
-  showCellVerticalBorder: false,
-  showColumnVerticalBorder: false,
-  sortingMode: 'client',
-  sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  signature: 'DataGrid',
+  unstable_listView: false
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
@@ -98,9 +39,9 @@ const useDataGridProps = inProps => {
     slots: themedProps.slots
   }), [themedProps.slots]);
   const injectDefaultProps = React.useMemo(() => {
-    return Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
+    return Object.keys(_dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
       // @ts-ignore
-      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      acc[key] = themedProps[key] ?? _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES[key];
       return acc;
     }, {});
   }, [themedProps]);

package/node/components/GridPagination.js

@@ -21,6 +21,7 @@ const GridPaginationRoot = (0, _styles.styled)(_TablePagination.default)(({
 }) => ({
   maxHeight: 'calc(100% + 1px)',
   // border width
+  flexGrow: 1,
   [`& .${_TablePagination.tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {

package/node/components/GridRow.js

@@ -14,7 +14,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _gridEditRowModel = require("../models/gridEditRowModel");
-var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _composeGridClasses = require("../utils/composeGridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -32,6 +31,7 @@ var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 function EmptyCell({
@@ -48,6 +48,13 @@ function EmptyCell({
     }
   });
 }
+process.env.NODE_ENV !== "production" ? EmptyCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  width: _propTypes.default.number.isRequired
+} : void 0;
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -75,7 +82,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       onMouseOver
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ref = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -99,30 +106,17 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
   React.useLayoutEffect(() => {
     if (currentPage.range) {
-      // The index prop is relative to the rows from all pages. As example, the index prop of the
-      // first row is 5 if `paginationModel.pageSize=5` and `paginationModel.page=1`. However, the index used by the virtualization
-      // doesn't care about pagination and considers the rows from the current page only, so the
-      // first row always has index=0. We need to subtract the index of the first row to make it
-      // compatible with the index used by the virtualization.
       const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
-      // pinned rows are not part of the visible rows
-      if (rowIndex != null) {
+      // Pinned rows are not part of the visible rows
+      if (rowIndex !== undefined) {
         apiRef.current.unstable_setLastMeasuredRowIndex(rowIndex);
       }
     }
-    const rootElement = ref.current;
-    const hasFixedHeight = rowHeight !== 'auto';
-    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
-      return undefined;
+    if (ref.current && rowHeight === 'auto') {
+      return apiRef.current.observeRowHeight(ref.current, rowId);
     }
-    const resizeObserver = new ResizeObserver(entries => {
-      const [entry] = entries;
-      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
-    });
-    resizeObserver.observe(rootElement);
-    return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+    return undefined;
+  }, [apiRef, currentPage.range, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     if ((0, _domUtils.isEventTargetInPortal)(event)) {
@@ -179,15 +173,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const sizes = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.unstable_getRowInternalSizes(rowId)), _useGridSelector.objectShallowCompare);
-  let minHeight = rowHeight;
-  if (minHeight === 'auto' && sizes) {
-    const numberOfBaseSizes = 1;
-    const maximumSize = sizes.baseCenter ?? 0;
-    if (maximumSize > 0 && numberOfBaseSizes > 1) {
-      minHeight = maximumSize;
-    }
-  }
+  const heightEntry = (0, _useGridSelector.useGridSelector)(apiRef, () => (0, _extends2.default)({}, apiRef.current.getRowHeightEntry(rowId)), _useGridSelector.objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -199,25 +185,25 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = (0, _extends2.default)({}, styleProp, {
       maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
       // max-height doesn't support "auto"
-      minHeight,
+      minHeight: rowHeight,
       '--height': typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight
     });
-    if (sizes?.spacingTop) {
+    if (heightEntry.spacingTop) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-      rowStyle[property] = sizes.spacingTop;
+      rowStyle[property] = heightEntry.spacingTop;
     }
-    if (sizes?.spacingBottom) {
+    if (heightEntry.spacingBottom) {
       const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
       let propertyValue = rowStyle[property];
       // avoid overriding existing value
       if (typeof propertyValue !== 'number') {
         propertyValue = parseInt(propertyValue || '0', 10);
       }
-      propertyValue += sizes.spacingBottom;
+      propertyValue += heightEntry.spacingBottom;
       rowStyle[property] = propertyValue;
     }
     return rowStyle;
-  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
+  }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
@@ -295,6 +281,9 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
     const column = visibleColumns[i];
     const indexInSection = i - pinnedColumns.left.length;
+    if (!column) {
+      continue;
+    }
     cells.push(getCell(column, indexInSection, i, middleColumnsLength));
   }
   if (hasVirtualFocusCellRight) {

package/node/components/base/GridOverlays.js

@@ -82,6 +82,14 @@ function GridOverlayWrapper(props) {
     }, props))
   }));
 }
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  loadingOverlayVariant: _propTypes.default.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: _propTypes.default.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
+} : void 0;
 process.env.NODE_ENV !== "production" ? GridOverlays.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/node/components/containers/GridRootStyles.js

@@ -520,6 +520,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
+      flex: '0 0 auto',
       height: 'var(--height)',
       width: 'var(--width)',
       lineHeight: 'calc(var(--height) - 1px)',

package/node/components/menu/columnMenu/GridColumnMenu.js

@@ -53,6 +53,38 @@ const GridGenericColumnMenu = exports.GridGenericColumnMenu = /*#__PURE__*/React
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, otherProps), index))
   }));
 });
+process.env.NODE_ENV !== "production" ? GridGenericColumnMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: _propTypes.default.object.isRequired,
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: _propTypes.default.object.isRequired,
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: _propTypes.default.object.isRequired,
+  hideMenu: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string,
+  labelledby: _propTypes.default.string,
+  open: _propTypes.default.bool.isRequired,
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: _propTypes.default.object
+} : void 0;
 const GridColumnMenu = exports.GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridGenericColumnMenu, (0, _extends2.default)({}, props, {
     ref: ref,

package/node/components/toolbar/GridToolbarExport.js

@@ -35,6 +35,26 @@ function GridCsvExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
   }));
 }
+process.env.NODE_ENV !== "production" ? GridCsvExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: _propTypes.default.func,
+  options: _propTypes.default.shape({
+    allColumns: _propTypes.default.bool,
+    delimiter: _propTypes.default.string,
+    disableToolbarButton: _propTypes.default.bool,
+    escapeFormulas: _propTypes.default.bool,
+    fields: _propTypes.default.arrayOf(_propTypes.default.string),
+    fileName: _propTypes.default.string,
+    getRowsToExport: _propTypes.default.func,
+    includeColumnGroupsHeaders: _propTypes.default.bool,
+    includeHeaders: _propTypes.default.bool,
+    shouldAppendQuotes: _propTypes.default.bool,
+    utf8WithBom: _propTypes.default.bool
+  })
+} : void 0;
 function GridPrintExportMenuItem(props) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const {
@@ -51,6 +71,38 @@ function GridPrintExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
   }));
 }
+process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  hideMenu: _propTypes.default.func,
+  options: _propTypes.default.shape({
+    allColumns: _propTypes.default.bool,
+    bodyClassName: _propTypes.default.string,
+    copyStyles: _propTypes.default.bool,
+    disableToolbarButton: _propTypes.default.bool,
+    fields: _propTypes.default.arrayOf(_propTypes.default.string),
+    fileName: _propTypes.default.string,
+    getRowsToExport: _propTypes.default.func,
+    hideFooter: _propTypes.default.bool,
+    hideToolbar: _propTypes.default.bool,
+    includeCheckboxes: _propTypes.default.bool,
+    pageStyle: _propTypes.default.oneOfType([_propTypes.default.shape({
+      '__@hasInstance@646': _propTypes.default.func.isRequired,
+      '__@metadata@648': _propTypes.default.any,
+      apply: _propTypes.default.func.isRequired,
+      arguments: _propTypes.default.any.isRequired,
+      bind: _propTypes.default.func.isRequired,
+      call: _propTypes.default.func.isRequired,
+      caller: _propTypes.default.object.isRequired,
+      length: _propTypes.default.number.isRequired,
+      name: _propTypes.default.string.isRequired,
+      prototype: _propTypes.default.any.isRequired,
+      toString: _propTypes.default.func.isRequired
+    }), _propTypes.default.string])
+  })
+} : void 0;
 const GridToolbarExport = exports.GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
       csvOptions = {},

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -126,6 +126,10 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     ref: (0, _utils.unstable_useForkRef)(ref, scrollbarRef),
     className: classes.root,
+    style: props.position === 'vertical' && rootProps.unstable_listView ? {
+      height: '100%',
+      top: 0
+    } : undefined,
     tabIndex: -1,
     "aria-hidden": "true",
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/components/virtualization/GridVirtualScroller.js

@@ -86,7 +86,7 @@ function GridVirtualScroller(props) {
     }, getScrollerProps(), {
       ownerState: rootProps,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+        children: [!rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
@@ -106,7 +106,7 @@ function GridVirtualScroller(props) {
       })]
     })), dimensions.hasScrollY && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollbar.GridVirtualScrollbar, (0, _extends2.default)({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));