@mui/x-data-grid 5.15.2 → 5.17.0

package/modern/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -194,6 +195,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -347,7 +349,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 

package/modern/DataGrid/useDataGridComponent.js

@@ -25,12 +25,15 @@ import { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+import { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export const useDataGridComponent = props => {
   const apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
   /**
@@ -39,6 +42,7 @@ export const useDataGridComponent = props => {
 
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(props.experimentalFeatures?.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -55,6 +59,7 @@ export const useDataGridComponent = props => {
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/modern/components/DataGridColumnHeaders.js

@@ -18,7 +18,8 @@ export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
     isDragging,
     getRootProps,
     getInnerProps,
-    getColumns
+    getColumnHeaders,
+    getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef
   });
@@ -27,10 +28,10 @@ export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
   }, getRootProps(other), {
     children: [/*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
-      children: getColumns()
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
     })), /*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "right"
     })]

package/modern/components/GridAutoSizer.js

@@ -104,6 +104,13 @@ process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * Function responsible for rendering children.
+   * @param {AutoSizerSize} size The grid's size.
+   * @returns {React.ReactNode} The children to render.
+   */
+  children: PropTypes.func.isRequired,
+
   /**
    * Default height to use for initial render; useful for SSR.
    * @default null

package/modern/components/GridRow.js

@@ -1,10 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
-
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
-/* eslint-disable jsx-a11y/interactive-supports-focus */
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -22,6 +18,8 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
+import { randomNumberBetween } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -63,6 +61,7 @@ function GridRow(props) {
     row,
     index,
     style: styleProp,
+    position,
     rowHeight,
     className,
     visibleColumns,
@@ -80,8 +79,6 @@ function GridRow(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
-
   const apiRef = useGridApiContext();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -89,6 +86,9 @@ function GridRow(props) {
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+
   const {
     hasScrollX,
     hasScrollY
@@ -108,9 +108,9 @@ function GridRow(props) {
   React.useLayoutEffect(() => {
     if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
       // Fallback for IE
-      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
     }
-  }, [apiRef, rowHeight, rowId]);
+  }, [apiRef, rowHeight, rowId, position]);
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -135,11 +135,11 @@ function GridRow(props) {
     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);
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
     });
     resizeObserver.observe(rootElement);
     return () => resizeObserver.disconnect();
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     // The target is not an element when triggered by a Select inside the cell
@@ -195,47 +195,7 @@ function GridRow(props) {
 
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
-
-  const style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: rowHeight
-  });
-
-  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
-
-  if (sizes?.spacingTop) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-
-  if (sizes?.spacingBottom) {
-    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-    style[property] = sizes.spacingBottom;
-  }
-
-  let rowClassName = null;
-
-  if (typeof rootProps.getRowClassName === 'function') {
-    const indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
-
-    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
-      isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelativeToCurrentPage
-    });
-
-    rowClassName = rootProps.getRowClassName(rowParams);
-  }
-
-  const cells = [];
-
-  for (let i = 0; i < renderedColumns.length; i += 1) {
-    const column = renderedColumns[i];
-    const indexRelativeToAllColumns = firstColumnToRender + i;
-    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-    const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
+  const getCell = React.useCallback((column, cellProps) => {
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = [];
     const disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
@@ -281,51 +241,139 @@ function GridRow(props) {
 
     const hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     const tabIndex = cellTabIndex !== null && cellTabIndex.id === rowId && cellTabIndex.field === column.field && cellParams.cellMode === 'view' ? 0 : -1;
+    return /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
+      value: cellParams.value,
+      field: column.field,
+      width: cellProps.width,
+      rowId: rowId,
+      height: rowHeight,
+      showRightBorder: cellProps.showRightBorder,
+      formattedValue: cellParams.formattedValue,
+      align: column.align || 'left',
+      cellMode: cellParams.cellMode,
+      colIndex: cellProps.indexRelativeToAllColumns,
+      isEditable: cellParams.isEditable,
+      hasFocus: hasFocus,
+      tabIndex: tabIndex,
+      className: clsx(classNames),
+      colSpan: cellProps.colSpan,
+      disableDragEvents: disableDragEvents
+    }, rootProps.componentsProps?.cell, {
+      children: content
+    }), column.field);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+  let minHeight = rowHeight;
+
+  if (minHeight === 'auto' && sizes) {
+    let numberOfBaseSizes = 0;
+    const maximumSize = Object.entries(sizes).reduce((acc, [key, size]) => {
+      const isBaseHeight = /^base[A-Z]/.test(key);
+
+      if (!isBaseHeight) {
+        return acc;
+      }
+
+      numberOfBaseSizes += 1;
+
+      if (size > acc) {
+        return size;
+      }
+
+      return acc;
+    }, 0);
+
+    if (maximumSize > 0 && numberOfBaseSizes > 1) {
+      minHeight = maximumSize;
+    }
+  }
+
+  const style = _extends({}, styleProp, {
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
+    minHeight
+  });
+
+  if (sizes?.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes?.spacingBottom) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+    style[property] = sizes.spacingBottom;
+  }
+
+  const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
+
+    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
+    });
+
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+
+  const randomNumber = randomNumberBetween(10000, 20, 80);
+  const cells = [];
+
+  for (let i = 0; i < renderedColumns.length; i += 1) {
+    const column = renderedColumns[i];
+    const indexRelativeToAllColumns = firstColumnToRender + i;
+    const isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
+    const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+    const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      const {
-        colSpan,
-        width
-      } = cellColSpanInfo.cellProps;
-      cells.push( /*#__PURE__*/_jsx(rootProps.components.Cell, _extends({
-        value: cellParams.value,
-        field: column.field,
-        width: width,
-        rowId: rowId,
-        height: rowHeight,
-        showRightBorder: showRightBorder,
-        formattedValue: cellParams.formattedValue,
-        align: column.align || 'left',
-        cellMode: cellParams.cellMode,
-        colIndex: indexRelativeToAllColumns,
-        isEditable: cellParams.isEditable,
-        hasFocus: hasFocus,
-        tabIndex: tabIndex,
-        className: clsx(classNames),
-        colSpan: colSpan,
-        disableDragEvents: disableDragEvents
-      }, rootProps.componentsProps?.cell, {
-        children: content
-      }), column.field));
+      if (row) {
+        const {
+          colSpan,
+          width
+        } = cellColSpanInfo.cellProps;
+        const cellProps = {
+          width,
+          colSpan,
+          showRightBorder,
+          indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        const {
+          width
+        } = cellColSpanInfo.cellProps;
+        const contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/_jsx(rootProps.components.SkeletonCell, {
+          width: width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
     }
   }
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
+  const eventHandlers = row ? {
+    onClick: publishClick,
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
+  } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: ref,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
-    className: clsx(rowClassName, classes.root, className),
+    className: clsx(...rowClassNames, classes.root, className),
     "aria-rowindex": ariaRowIndex,
     "aria-selected": selected,
-    style: style,
-    onClick: publishClick,
-    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
-    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
-    onMouseLeave: publish('rowMouseLeave', onMouseLeave)
-  }, other, {
+    style: style
+  }, eventHandlers, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
       width: emptyCellWidth
     })]
@@ -350,8 +398,9 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
+  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/modern/components/base/GridBody.js

@@ -6,7 +6,7 @@ import { GridAutoSizer } from '../GridAutoSizer';
 import { GridOverlays } from './GridOverlays';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -18,14 +18,17 @@ function GridBody(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
   const enableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(false);
-  }, []); // The `useGridApiMethod` hook can't be used here, because it only installs the
+  }, []);
+  React.useEffect(() => {
+    setIsVirtualizationDisabled(rootProps.disableVirtualization);
+  }, [rootProps.disableVirtualization]); // The `useGridApiMethod` hook can't be used here, because it only installs the
   // method if it doesn't exist yet. Once installed, it's never updated again.
   // This break the methods above, since their closure comes from the first time
   // they were installed. Which means that calling `setIsVirtualizationDisabled`
@@ -60,8 +63,8 @@ function GridBody(props) {
           width: size.width,
           // If `autoHeight` is on, there will be no height value.
           // In this case, let the container to grow whatever it needs.
-          height: size.height ? size.height - headerHeight : 'auto',
-          marginTop: headerHeight
+          height: size.height ? size.height - totalHeaderHeight : 'auto',
+          marginTop: totalHeaderHeight
         };
         return /*#__PURE__*/_jsx(VirtualScrollerComponent, {
           ref: windowRef,

package/modern/components/base/GridOverlays.js

@@ -6,13 +6,13 @@ import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFil
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridOverlayWrapper(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [viewportInnerSize, setViewportInnerSize] = React.useState(() => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
   const handleViewportSizeChange = React.useCallback(() => {
     setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
@@ -35,11 +35,8 @@ function GridOverlayWrapper(props) {
       height,
       width: viewportInnerSize?.width ?? 0,
       position: 'absolute',
-      top: headerHeight,
-      bottom: height === 'auto' ? 0 : undefined,
-      zIndex: 4,
-      // should be above pinned columns, pinned rows and detail panel
-      pointerEvents: 'none'
+      top: totalHeaderHeight,
+      bottom: height === 'auto' ? 0 : undefined
     }
   }, props));
 }

package/modern/components/cell/GridBooleanCell.js

@@ -123,7 +123,8 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/components/cell/GridEditBooleanCell.js

@@ -159,7 +159,8 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/components/cell/GridEditDateCell.js

@@ -81,7 +81,7 @@ function GridEditDateCell(props) {
       const [date, time] = newFormattedDate.split('T');
       const [year, month, day] = date.split('-');
       newParsedDate = new Date();
-      newParsedDate.setFullYear(year, Number(month) - 1, day);
+      newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
       newParsedDate.setHours(0, 0, 0, 0);
 
       if (time) {
@@ -213,7 +213,8 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/components/cell/GridEditInputCell.js

@@ -176,7 +176,8 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]),
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -23,6 +23,10 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
   }, key);
 };
 
+function isKeyboardEvent(event) {
+  return !!event.key;
+}
+
 function GridEditSingleSelectCell(props) {
   const rootProps = useGridRootProps();
 
@@ -136,7 +140,11 @@ function GridEditSingleSelectCell(props) {
     }
   };
 
-  const handleOpen = () => {
+  const handleOpen = event => {
+    if (isKeyboardEvent(event) && event.key === 'Enter') {
+      return;
+    }
+
     setOpen(true);
   };
 
@@ -250,7 +258,8 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/modern/components/cell/GridSkeletonCell.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["field", "align", "width", "contentWidth"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Skeleton from '@mui/material/Skeleton';
+import { capitalize } from '@mui/material/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['cell', 'cellSkeleton', `cell--text${capitalize(align)}`]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridSkeletonCell(props) {
+  const {
+    align,
+    width,
+    contentWidth
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes,
+    align
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: classes.root,
+    style: {
+      width
+    }
+  }, other, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: `${contentWidth}%`
+    })
+  }));
+}
+
+process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.string.isRequired,
+  contentWidth: PropTypes.number.isRequired,
+  field: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridSkeletonCell };

package/modern/components/cell/index.js

@@ -5,4 +5,5 @@ export * from './GridEditDateCell';
 export * from './GridEditInputCell';
 export * from './GridEditSingleSelectCell';
 export * from './GridActionsCell';
-export * from './GridActionsCellItem';
+export * from './GridActionsCellItem';
+export * from './GridSkeletonCell';