@mui/x-data-grid 7.19.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();
@@ -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/modern/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/modern/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/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/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/modern/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/modern/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.
  */

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/joy/icons.js

@@ -34,7 +34,6 @@ function createSvgIcon(path, displayName) {
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
     return /*#__PURE__*/_jsx(SvgIcon, _extends({
-      "data-testid": `${displayName}Icon`,
       ref: ref,
       fill: "none",
       stroke: "currentColor",

package/modern/locales/jaJP.js

@@ -47,9 +47,9 @@ const jaJPGrid = {
   filterPanelInputPlaceholder: '値を入力…',
   // Filter operators text
   filterOperatorContains: '...を含む',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '...を含まない',
   filterOperatorEquals: '...に等しい',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '...に等しくない',
   filterOperatorStartsWith: '...で始まる',
   filterOperatorEndsWith: '...で終わる',
   filterOperatorIs: '...である',
@@ -69,9 +69,9 @@ const jaJPGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '含む',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '含まない',
   headerFilterOperatorEquals: '等しい',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '等しくない',
   headerFilterOperatorStartsWith: 'で始まる',
   headerFilterOperatorEndsWith: 'で終わる',
   headerFilterOperatorIs: 'である',

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/domUtils.js

@@ -187,7 +187,7 @@ export function findGridCells(api, field) {
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(
-  // Use > to ignore rows from nested data grids (for example in detail panel)
+  // Use > to ignore rows from nested Data Grids (for example in detail panel)
   `:scope > div > div > .${gridClasses.row}`);
 }
 function parseCellColIndex(col) {

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

@@ -445,6 +445,12 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnHeaderClick: _propTypes.default.func,
+  /**
+   * Callback fired when a contextmenu event comes from a column header element.
+   * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   */
+  onColumnHeaderContextMenu: _propTypes.default.func,
   /**
    * Callback fired when a double click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -662,6 +668,7 @@ DataGridRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,
@@ -695,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/columnHeaders/GridColumnHeaderItem.js

@@ -100,6 +100,7 @@ function GridColumnHeaderItem(props) {
   }, [apiRef, colDef.field]);
   const mouseEventsHandlers = React.useMemo(() => ({
     onClick: publish('columnHeaderClick'),
+    onContextMenu: publish('columnHeaderContextMenu'),
     onDoubleClick: publish('columnHeaderDoubleClick'),
     onMouseOver: publish('columnHeaderOver'),
     // TODO remove as it's not used

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)',