@mui/x-data-grid 7.19.0 → 7.21.0

package/modern/components/GridRow.js

@@ -7,7 +7,6 @@ import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
-import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
 import { gridClasses } from "../constants/gridClasses.js";
 import { composeGridClasses } from "../utils/composeGridClasses.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
@@ -25,6 +24,7 @@ import { PinnedPosition, gridPinnedColumnPositionLookup } from "./cell/GridCell.
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width
@@ -40,6 +40,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.number.isRequired
+} : void 0;
 const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
       selected,
@@ -67,7 +74,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       onMouseOver
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const configuration = useGridConfiguration();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -91,30 +98,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 (isEventTargetInPortal(event)) {
@@ -171,15 +165,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     disableColumnReorder
   } = rootProps;
   const rowReordering = rootProps.rowReordering;
-  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), 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 = useGridSelector(apiRef, () => _extends({}, apiRef.current.getRowHeightEntry(rowId)), objectShallowCompare);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -191,25 +177,25 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const rowStyle = _extends({}, 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') {
@@ -287,6 +273,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/modern/components/base/GridOverlays.js

@@ -74,6 +74,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.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay'])
+} : void 0;
 process.env.NODE_ENV !== "production" ? GridOverlays.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -92,6 +92,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/modern/components/containers/GridRootStyles.js

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

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

@@ -45,6 +45,38 @@ const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGeneric
     children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, 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.object.isRequired,
+  /**
+   * Initial `slotProps` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlotProps: PropTypes.object.isRequired,
+  /**
+   * Initial `slots` - it is internal, to be overrriden by Pro or Premium packages
+   * @ignore - do not document.
+   */
+  defaultSlots: PropTypes.object.isRequired,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
+  /**
+   * Could be used to pass new props or override props specific to a column menu component
+   * e.g. `displayOrder`
+   */
+  slotProps: PropTypes.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.object
+} : void 0;
 const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,

package/modern/components/toolbar/GridToolbarExport.js

@@ -9,7 +9,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function GridCsvExportMenuItem(props) {
+function GridCsvExportMenuItem(props) {
   const apiRef = useGridApiContext();
   const {
       hideMenu,
@@ -25,7 +25,27 @@ export function GridCsvExportMenuItem(props) {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
   }));
 }
-export function GridPrintExportMenuItem(props) {
+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.func,
+  options: PropTypes.shape({
+    allColumns: PropTypes.bool,
+    delimiter: PropTypes.string,
+    disableToolbarButton: PropTypes.bool,
+    escapeFormulas: PropTypes.bool,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    fileName: PropTypes.string,
+    getRowsToExport: PropTypes.func,
+    includeColumnGroupsHeaders: PropTypes.bool,
+    includeHeaders: PropTypes.bool,
+    shouldAppendQuotes: PropTypes.bool,
+    utf8WithBom: PropTypes.bool
+  })
+} : void 0;
+function GridPrintExportMenuItem(props) {
   const apiRef = useGridApiContext();
   const {
       hideMenu,
@@ -41,6 +61,38 @@ export 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.func,
+  options: PropTypes.shape({
+    allColumns: PropTypes.bool,
+    bodyClassName: PropTypes.string,
+    copyStyles: PropTypes.bool,
+    disableToolbarButton: PropTypes.bool,
+    fields: PropTypes.arrayOf(PropTypes.string),
+    fileName: PropTypes.string,
+    getRowsToExport: PropTypes.func,
+    hideFooter: PropTypes.bool,
+    hideToolbar: PropTypes.bool,
+    includeCheckboxes: PropTypes.bool,
+    pageStyle: PropTypes.oneOfType([PropTypes.shape({
+      '__@hasInstance@646': PropTypes.func.isRequired,
+      '__@metadata@648': PropTypes.any,
+      apply: PropTypes.func.isRequired,
+      arguments: PropTypes.any.isRequired,
+      bind: PropTypes.func.isRequired,
+      call: PropTypes.func.isRequired,
+      caller: PropTypes.object.isRequired,
+      length: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      prototype: PropTypes.any.isRequired,
+      toString: PropTypes.func.isRequired
+    }), PropTypes.string])
+  })
+} : void 0;
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
       csvOptions = {},
@@ -77,4 +129,4 @@ process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
    */
   slotProps: PropTypes.object
 } : void 0;
-export { GridToolbarExport };
+export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -119,6 +119,10 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
   return /*#__PURE__*/_jsx(Container, {
     ref: 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__*/_jsx("div", {

package/modern/components/virtualization/GridVirtualScroller.js

@@ -78,7 +78,7 @@ function GridVirtualScroller(props) {
     }, getScrollerProps(), {
       ownerState: rootProps,
       children: [/*#__PURE__*/_jsxs(TopContainer, {
-        children: [/*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
+        children: [!rootProps.unstable_listView && /*#__PURE__*/_jsx(GridHeaders, {}), /*#__PURE__*/_jsx(rootProps.slots.pinnedRows, {
           position: "top",
           virtualScroller: virtualScroller
         })]
@@ -98,7 +98,7 @@ function GridVirtualScroller(props) {
       })]
     })), dimensions.hasScrollY && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "vertical"
-    }, getScrollbarVerticalProps())), dimensions.hasScrollX && /*#__PURE__*/_jsx(Scrollbar, _extends({
+    }, getScrollbarVerticalProps())), dimensions.hasScrollX && !rootProps.unstable_listView && /*#__PURE__*/_jsx(Scrollbar, _extends({
       position: "horizontal"
     }, getScrollbarHorizontalProps())), props.children]
   }));

package/modern/constants/dataGridPropsDefaultValues.js

@@ -0,0 +1,60 @@
+import { GridEditModes } from "../models/gridEditRowModel.js";
+/**
+ * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
+ */
+export const 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: 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
+};

package/modern/hooks/core/useGridRefs.js

@@ -3,6 +3,8 @@ export const useGridRefs = apiRef => {
   const rootElementRef = React.useRef(null);
   const mainElementRef = React.useRef(null);
   const virtualScrollerRef = React.useRef(null);
+  const virtualScrollbarVerticalRef = React.useRef(null);
+  const virtualScrollbarHorizontalRef = React.useRef(null);
   const columnHeadersContainerRef = React.useRef(null);
   apiRef.current.register('public', {
     rootElementRef
@@ -10,6 +12,8 @@ export const useGridRefs = apiRef => {
   apiRef.current.register('private', {
     mainElementRef,
     virtualScrollerRef,
+    virtualScrollbarVerticalRef,
+    virtualScrollbarHorizontalRef,
     columnHeadersContainerRef
   });
 };

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
 import { serializeCellValue } from "../export/serializers/csvSerializer.js";
+import { isCopyShortcut } from "../../../utils/keyboardUtils.js";
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';
@@ -53,7 +54,7 @@ export const useGridClipboard = (apiRef, props) => {
   const ignoreValueFormatter = (typeof ignoreValueFormatterProp === 'object' ? ignoreValueFormatterProp?.clipboardExport : ignoreValueFormatterProp) || false;
   const clipboardCopyCellDelimiter = props.clipboardCopyCellDelimiter;
   const handleCopy = React.useCallback(event => {
-    if (!((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && !event.shiftKey && !event.altKey)) {
+    if (!isCopyShortcut(event)) {
       return;
     }
 

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -56,7 +56,9 @@ export const useGridColumnHeaders = props => {
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
-    apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+    if (apiRef.current.columnHeadersContainerRef.current) {
+      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+    }
   }, [apiRef]);
   const handleColumnResizeStart = React.useCallback(params => setResizeCol(params.field), []);
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -312,6 +312,9 @@ export function getFirstNonSpannedColumnToRender({
   return firstNonSpannedColumnToRender;
 }
 export function getTotalHeaderHeight(apiRef, props) {
+  if (props.unstable_listView) {
+    return 0;
+  }
   const densityFactor = gridDensityFactorSelector(apiRef);
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -12,8 +12,9 @@ import { gridRenderContextSelector } from "../virtualization/index.js";
 import { useGridSelector } from "../../utils/index.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
-import { calculatePinnedRowsHeight } from "../rows/gridRowsUtils.js";
+import { calculatePinnedRowsHeight, getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0
@@ -54,7 +55,8 @@ export function useGridDimensions(apiRef, props) {
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  const validRowHeight = React.useMemo(() => getValidRowHeight(props.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning), [props.rowHeight]);
+  const rowHeight = Math.floor(validRowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
   const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
@@ -238,11 +240,11 @@ export function useGridDimensions(apiRef, props) {
     // jsdom has no layout capabilities
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
     if (isFirstSizing.current) {

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -324,7 +324,9 @@ export const useGridCellEditing = (apiRef, props) => {
       };
       try {
         const row = apiRef.current.getRow(id);
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishCellEditMode();
         }).catch(handleError);

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -397,7 +397,9 @@ export const useGridRowEditing = (apiRef, props) => {
         }
       };
       try {
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
+        Promise.resolve(processRowUpdate(rowUpdate, row, {
+          rowId: id
+        })).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
           finishRowEditMode();
         }).catch(handleError);

package/modern/hooks/features/events/useGridEvents.js

@@ -5,6 +5,7 @@ import { useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
  */
 export function useGridEvents(apiRef, props) {
   useGridApiOptionHandler(apiRef, 'columnHeaderClick', props.onColumnHeaderClick);
+  useGridApiOptionHandler(apiRef, 'columnHeaderContextMenu', props.onColumnHeaderContextMenu);
   useGridApiOptionHandler(apiRef, 'columnHeaderDoubleClick', props.onColumnHeaderDoubleClick);
   useGridApiOptionHandler(apiRef, 'columnHeaderOver', props.onColumnHeaderOver);
   useGridApiOptionHandler(apiRef, 'columnHeaderOut', props.onColumnHeaderOut);

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -41,7 +41,7 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
     if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
+      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     }
     items = [model.items[0]];
   } else {

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -16,6 +16,7 @@ import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector }
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { enrichPageRowsWithPinnedRows, getLeftColumnIndex, getRightColumnIndex, findNonRowSpannedCell } from "./utils.js";
+import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 
 /**
  * @requires useGridSorting (method) - can be after
@@ -30,6 +31,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
   const isRtl = useRtl();
+  const listView = props.unstable_listView;
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -50,7 +52,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
     }
-    const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
+    const field = listView ? gridListColumnSelector(apiRef.current.state).field : gridVisibleColumnFieldsSelector(apiRef)[colIndex];
     const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
@@ -61,7 +63,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       rowIndex: rowIndexRelativeToAllRows
     });
     apiRef.current.setCellFocus(nonRowSpannedRowId, field);
-  }, [apiRef, logger]);
+  }, [apiRef, logger, listView]);
   const goToHeader = React.useCallback((colIndex, event) => {
     logger.debug(`Navigating to header col ${colIndex}`);
     apiRef.current.scrollToIndexes({
@@ -384,12 +386,14 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       return;
     }
     const viewportPageSize = apiRef.current.getViewportPageSize();
-    const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
+    const getColumnIndexFn = listView ? () => 0 : apiRef.current.getColumnIndex;
+    const colIndexBefore = params.field ? getColumnIndexFn(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
     const firstRowIndexInPage = 0;
     const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
-    const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    const visibleColumns = listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+    const lastColIndex = visibleColumns.length - 1;
     let shouldPreventDefault = true;
     switch (event.key) {
       case 'ArrowDown':
@@ -508,7 +512,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader, listView]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/modern/hooks/features/listView/gridListViewSelectors.js

@@ -0,0 +1,4 @@
+/**
+ * Get a list column definition
+ */
+export const gridListColumnSelector = state => state.listViewColumn;

package/modern/hooks/features/listView/useGridListView.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridDimensionsSelector } from "../dimensions/index.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
+  listViewColumn: _extends({}, props.unstable_listColumn, {
+    computedWidth: getListColumnWidth(apiRef)
+  })
+});
+export function useGridListView(apiRef, props) {
+  /*
+   * EVENTS
+   */
+  const updateListColumnWidth = () => {
+    apiRef.current.setState(state => {
+      if (!state.listViewColumn) {
+        return state;
+      }
+      return _extends({}, state, {
+        listViewColumn: _extends({}, state.listViewColumn, {
+          computedWidth: getListColumnWidth(apiRef)
+        })
+      });
+    });
+  };
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      updateListColumnWidth();
+    }
+  };
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+  /*
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    const listColumn = props.unstable_listColumn;
+    if (listColumn) {
+      apiRef.current.setState(state => {
+        return _extends({}, state, {
+          listViewColumn: _extends({}, listColumn, {
+            computedWidth: getListColumnWidth(apiRef)
+          })
+        });
+      });
+    }
+  }, [apiRef, props.unstable_listColumn]);
+}
+function getListColumnWidth(apiRef) {
+  return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;
+}