@mui/x-data-grid 5.15.3 → 5.17.1

package/internals/index.js

@@ -11,6 +11,8 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
@@ -36,7 +38,7 @@ export { useGridScroll } from '../hooks/features/scroll/useGridScroll';
 export { useGridEvents } from '../hooks/features/events/useGridEvents';
 export { useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
-export { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+export { useGridVirtualScroller, getRenderableIndexes } from '../hooks/features/virtualization/useGridVirtualScroller';
 export { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';

package/legacy/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]].
@@ -196,6 +197,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

package/legacy/DataGrid/useDataGridComponent.js

@@ -25,6 +25,8 @@ 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 var useDataGridComponent = function useDataGridComponent(props) {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -33,6 +35,7 @@ export var useDataGridComponent = function useDataGridComponent(props) {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
   /**
@@ -41,6 +44,7 @@ export var useDataGridComponent = function useDataGridComponent(props) {
 
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -57,6 +61,7 @@ export var useDataGridComponent = function useDataGridComponent(props) {
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/legacy/components/DataGridColumnHeaders.js

@@ -19,17 +19,18 @@ export var DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridCo
       isDragging = _useGridColumnHeaders.isDragging,
       getRootProps = _useGridColumnHeaders.getRootProps,
       getInnerProps = _useGridColumnHeaders.getInnerProps,
-      getColumns = _useGridColumnHeaders.getColumns;
+      getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
+      getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
 
   return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
     ref: ref
   }, 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/legacy/components/GridRow.js

@@ -1,11 +1,8 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _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 */
+var _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';
@@ -23,6 +20,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 +62,7 @@ function GridRow(props) {
       row = props.row,
       index = props.index,
       styleProp = props.style,
+      position = props.position,
       rowHeight = props.rowHeight,
       className = props.className,
       visibleColumns = props.visibleColumns,
@@ -81,8 +81,6 @@ function GridRow(props) {
       onMouseLeave = props.onMouseLeave,
       other = _objectWithoutProperties(props, _excluded);
 
-  var ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
-
   var apiRef = useGridApiContext();
   var ref = React.useRef(null);
   var rootProps = useGridRootProps();
@@ -90,6 +88,8 @@ function GridRow(props) {
   var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   var sortModel = useGridSelector(apiRef, gridSortModelSelector);
   var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  var ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   var _ref2 = (_apiRef$current$getRo = apiRef.current.getRootDimensions()) != null ? _apiRef$current$getRo : {
     hasScrollX: false,
@@ -110,9 +110,9 @@ function GridRow(props) {
   React.useLayoutEffect(function () {
     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(function () {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -139,13 +139,13 @@ function GridRow(props) {
           entry = _entries[0];
 
       var 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 function () {
       return resizeObserver.disconnect();
     };
-  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
+  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
@@ -203,48 +203,9 @@ function GridRow(props) {
 
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
+  var getCell = React.useCallback(function (column, cellProps) {
+    var _rootProps$components;
 
-  var style = _extends({}, styleProp, {
-    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
-    // max-height doesn't support "auto"
-    minHeight: rowHeight
-  });
-
-  var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
-
-  if (sizes != null && sizes.spacingTop) {
-    var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
-    style[property] = sizes.spacingTop;
-  }
-
-  if (sizes != null && sizes.spacingBottom) {
-    var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
-
-    style[_property] = sizes.spacingBottom;
-  }
-
-  var rowClassName = null;
-
-  if (typeof rootProps.getRowClassName === 'function') {
-    var indexRelativeToCurrentPage = index - currentPage.range.firstRowIndex;
-
-    var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
-      isFirstVisible: indexRelativeToCurrentPage === 0,
-      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelativeToCurrentPage: indexRelativeToCurrentPage
-    });
-
-    rowClassName = rootProps.getRowClassName(rowParams);
-  }
-
-  var cells = [];
-
-  for (var i = 0; i < renderedColumns.length; i += 1) {
-    var column = renderedColumns[i];
-    var indexRelativeToAllColumns = firstColumnToRender + i;
-    var isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
-    var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-    var showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     var cellParams = apiRef.current.getCellParams(rowId, column.field);
     var classNames = [];
     var disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
@@ -294,52 +255,143 @@ function GridRow(props) {
 
     var hasFocus = cellFocus !== null && cellFocus.id === rowId && cellFocus.field === column.field;
     var 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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
+      children: content
+    }), column.field);
+  }, [apiRef, cellTabIndex, editRowsState, cellFocus, rootProps, row, rowHeight, rowId, treeDepth, sortModel.length]);
+  var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+  var minHeight = rowHeight;
+
+  if (minHeight === 'auto' && sizes) {
+    var numberOfBaseSizes = 0;
+    var maximumSize = Object.entries(sizes).reduce(function (acc, _ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          key = _ref4[0],
+          size = _ref4[1];
+
+      var 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;
+    }
+  }
+
+  var style = _extends({}, styleProp, {
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
+    minHeight: minHeight
+  });
+
+  if (sizes != null && sizes.spacingTop) {
+    var property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes != null && sizes.spacingBottom) {
+    var _property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+
+    style[_property] = sizes.spacingBottom;
+  }
+
+  var rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    var _currentPage$range;
+
+    var indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+
+    var rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage: indexRelativeToCurrentPage
+    });
+
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+
+  var randomNumber = randomNumberBetween(10000, 20, 80);
+  var cells = [];
+
+  for (var i = 0; i < renderedColumns.length; i += 1) {
+    var column = renderedColumns[i];
+    var indexRelativeToAllColumns = firstColumnToRender + i;
+    var isLastColumn = indexRelativeToAllColumns === visibleColumns.length - 1;
+    var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+    var showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     var cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
 
     if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
-      var _rootProps$components;
-
-      var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
-          colSpan = _cellColSpanInfo$cell.colSpan,
-          width = _cellColSpanInfo$cell.width;
-      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$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
-        children: content
-      }), column.field));
+      if (row) {
+        var _cellColSpanInfo$cell = cellColSpanInfo.cellProps,
+            colSpan = _cellColSpanInfo$cell.colSpan,
+            width = _cellColSpanInfo$cell.width;
+        var cellProps = {
+          width: width,
+          colSpan: colSpan,
+          showRightBorder: showRightBorder,
+          indexRelativeToAllColumns: indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        var _width = cellColSpanInfo.cellProps.width;
+        var contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/_jsx(rootProps.components.SkeletonCell, {
+          width: _width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
     }
   }
 
   var emptyCellWidth = containerWidth - columnsTotalWidth;
+  var 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.apply(void 0, _toConsumableArray(rowClassNames).concat([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
     })]
@@ -364,8 +416,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/legacy/components/base/GridBody.js

@@ -7,7 +7,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";
 
@@ -17,7 +17,7 @@ function GridBody(props) {
       ColumnHeadersComponent = props.ColumnHeadersComponent;
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
 
   var _React$useState = React.useState(rootProps.disableVirtualization),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -29,7 +29,10 @@ function GridBody(props) {
   }, []);
   var enableVirtualization = React.useCallback(function () {
     setIsVirtualizationDisabled(false);
-  }, []); // The `useGridApiMethod` hook can't be used here, because it only installs the
+  }, []);
+  React.useEffect(function () {
+    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`
@@ -64,8 +67,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/legacy/components/base/GridOverlays.js

@@ -7,7 +7,7 @@ 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) {
@@ -15,7 +15,7 @@ function GridOverlayWrapper(props) {
 
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
-  var headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
 
   var _React$useState = React.useState(function () {
     var _apiRef$current$getRo, _apiRef$current$getRo2;
@@ -49,7 +49,7 @@ function GridOverlayWrapper(props) {
       height: height,
       width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
       position: 'absolute',
-      top: headerHeight,
+      top: totalHeaderHeight,
       bottom: height === 'auto' ? 0 : undefined
     }
   }, props));

package/legacy/components/cell/GridBooleanCell.js

@@ -133,7 +133,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/legacy/components/cell/GridCell.js

@@ -99,6 +99,16 @@ function GridCell(props) {
       }
     };
   }, [apiRef, field, onMouseUp, rowId]);
+  var publishMouseDown = React.useCallback(function (eventName) {
+    return function (event) {
+      var params = apiRef.current.getCellParams(rowId, field || '');
+      apiRef.current.publishEvent(eventName, params, event);
+
+      if (onMouseDown) {
+        onMouseDown(event);
+      }
+    };
+  }, [apiRef, field, onMouseDown, rowId]);
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
@@ -205,7 +215,7 @@ function GridCell(props) {
     tabIndex: (cellMode === 'view' || !isEditable) && !managesOwnFocus ? tabIndex : -1,
     onClick: publish('cellClick', onClick),
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),
-    onMouseDown: publish('cellMouseDown', onMouseDown),
+    onMouseDown: publishMouseDown('cellMouseDown'),
     onMouseUp: publishMouseUp('cellMouseUp'),
     onKeyDown: publish('cellKeyDown', onKeyDown)
   }, draggableEventHandlers, other, {

package/legacy/components/cell/GridEditBooleanCell.js

@@ -201,7 +201,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/legacy/components/cell/GridEditDateCell.js

@@ -252,7 +252,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/legacy/components/cell/GridEditInputCell.js

@@ -218,7 +218,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/legacy/components/cell/GridEditSingleSelectCell.js

@@ -321,7 +321,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/legacy/components/cell/GridSkeletonCell.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var align = ownerState.align,
+      classes = ownerState.classes;
+  var slots = {
+    root: ['cell', 'cellSkeleton', "cell--text".concat(capitalize(align))]
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridSkeletonCell(props) {
+  var field = props.field,
+      align = props.align,
+      width = props.width,
+      contentWidth = props.contentWidth,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var rootProps = useGridRootProps();
+  var ownerState = {
+    classes: rootProps.classes,
+    align: align
+  };
+  var classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: classes.root,
+    style: {
+      width: width
+    }
+  }, other, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: "".concat(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/legacy/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';