@mui/x-data-grid 5.15.2 → 5.17.0

package/legacy/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_useId as useId } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes,
+      headerAlign = ownerState.headerAlign,
+      isDragging = ownerState.isDragging,
+      showRightBorder = ownerState.showRightBorder,
+      showColumnBorder = ownerState.showColumnBorder,
+      groupId = ownerState.groupId;
+  var slots = {
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'withBorder', showColumnBorder && 'columnHeader--showColumnBorder', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridColumnGroupHeader(props) {
+  var _apiRef$current$getRo, _columnGroupsLookup$g;
+
+  var groupId = props.groupId,
+      width = props.width,
+      depth = props.depth,
+      maxDepth = props.maxDepth,
+      fields = props.fields,
+      height = props.height,
+      colIndex = props.colIndex,
+      isLastColumn = props.isLastColumn,
+      extendRowFullWidth = props.extendRowFullWidth;
+  var rootProps = useGridRootProps();
+  var apiRef = useGridApiContext();
+  var columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
+
+  var _ref = (_apiRef$current$getRo = apiRef.current.getRootDimensions()) != null ? _apiRef$current$getRo : {
+    hasScrollX: false,
+    hasScrollY: false
+  },
+      hasScrollX = _ref.hasScrollX,
+      hasScrollY = _ref.hasScrollY;
+
+  var group = groupId ? columnGroupsLookup[groupId] : {};
+  var _group$headerName = group.headerName,
+      headerName = _group$headerName === void 0 ? groupId != null ? groupId : '' : _group$headerName,
+      _group$description = group.description,
+      description = _group$description === void 0 ? '' : _group$description,
+      _group$headerAlign = group.headerAlign,
+      headerAlign = _group$headerAlign === void 0 ? undefined : _group$headerAlign;
+  var headerComponent;
+  var render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
+  var renderParams = {
+    groupId: groupId,
+    headerName: headerName,
+    description: description,
+    depth: depth,
+    maxDepth: maxDepth,
+    fields: fields,
+    colIndex: colIndex,
+    isLastColumn: isLastColumn
+  };
+
+  if (groupId && render) {
+    headerComponent = render(renderParams);
+  }
+
+  var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  var showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+  var showColumnBorder = rootProps.showColumnRightBorder;
+
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder: showRightBorder,
+    showColumnBorder: showColumnBorder,
+    headerAlign: headerAlign,
+    depth: depth,
+    isDragging: false
+  });
+
+  var label = headerName != null ? headerName : groupId;
+  var id = useId();
+  var elementId = groupId === null ? "empty-group-cell-".concat(id) : groupId;
+  var classes = useUtilityClasses(ownerState);
+  var headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, {
+    classes: classes,
+    columnMenuOpen: false,
+    colIndex: colIndex,
+    height: height,
+    isResizing: false,
+    sortDirection: null,
+    hasFocus: false,
+    tabIndex: -1,
+    isDraggable: false,
+    headerComponent: headerComponent,
+    headerClassName: headerClassName,
+    description: description,
+    elementId: elementId,
+    width: width,
+    columnMenuIconButton: null,
+    columnTitleIconButtons: null,
+    resizable: false,
+    label: label,
+    "aria-colspan": fields.length // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
+    ,
+    "data-fields": "|-".concat(fields.join('-|-'), "-|"),
+    disableHeaderSeparator: true
+  });
+}
+
+export { GridColumnGroupHeader };

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -2,17 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
-import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
-import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -37,7 +35,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
 };
 
 function GridColumnHeaderItem(props) {
-  var _apiRef$current$getRo, _column$sortingOrder, _rootProps$components, _column$headerName, _rootProps$components2;
+  var _apiRef$current$getRo, _rootProps$components, _column$sortingOrder, _rootProps$components2, _column$headerName;
 
   var column = props.column,
       columnMenuOpen = props.columnMenuOpen,
@@ -75,12 +73,21 @@ function GridColumnHeaderItem(props) {
   var isDraggable = React.useMemo(function () {
     return !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder;
   }, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
-  var headerComponent = null;
+  var headerComponent;
 
   if (column.renderHeader) {
     headerComponent = column.renderHeader(apiRef.current.getColumnHeaderParams(column.field));
   }
 
+  var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  var showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+
+  var ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder: showRightBorder
+  });
+
+  var classes = useUtilityClasses(ownerState);
   var publish = React.useCallback(function (eventName) {
     return function (event) {
       // Ignore portal
@@ -92,43 +99,36 @@ function GridColumnHeaderItem(props) {
       apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
     };
   }, [apiRef, column.field]);
-  var mouseEventsHandlers = {
-    onClick: publish('columnHeaderClick'),
-    onDoubleClick: publish('columnHeaderDoubleClick'),
-    onMouseOver: publish('columnHeaderOver'),
-    // TODO remove as it's not used
-    onMouseOut: publish('columnHeaderOut'),
-    // TODO remove as it's not used
-    onMouseEnter: publish('columnHeaderEnter'),
-    // TODO remove as it's not used
-    onMouseLeave: publish('columnHeaderLeave'),
-    // TODO remove as it's not used
-    onKeyDown: publish('columnHeaderKeyDown'),
-    onFocus: publish('columnHeaderFocus'),
-    onBlur: publish('columnHeaderBlur')
-  };
-  var draggableEventHandlers = isDraggable ? {
-    onDragStart: publish('columnHeaderDragStart'),
-    onDragEnter: publish('columnHeaderDragEnter'),
-    onDragOver: publish('columnHeaderDragOver'),
-    onDragEnd: publish('columnHeaderDragEnd')
-  } : null;
-  var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-  var showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
-
-  var ownerState = _extends({}, props, {
-    classes: rootProps.classes,
-    showRightBorder: showRightBorder
-  });
-
-  var classes = useUtilityClasses(ownerState);
-  var width = column.computedWidth;
-  var ariaSort = 'none';
-
-  if (sortDirection != null) {
-    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
-  }
-
+  var mouseEventsHandlers = React.useMemo(function () {
+    return {
+      onClick: publish('columnHeaderClick'),
+      onDoubleClick: publish('columnHeaderDoubleClick'),
+      onMouseOver: publish('columnHeaderOver'),
+      // TODO remove as it's not used
+      onMouseOut: publish('columnHeaderOut'),
+      // TODO remove as it's not used
+      onMouseEnter: publish('columnHeaderEnter'),
+      // TODO remove as it's not used
+      onMouseLeave: publish('columnHeaderLeave'),
+      // TODO remove as it's not used
+      onKeyDown: publish('columnHeaderKeyDown'),
+      onFocus: publish('columnHeaderFocus'),
+      onBlur: publish('columnHeaderBlur')
+    };
+  }, [publish]);
+  var draggableEventHandlers = React.useMemo(function () {
+    return isDraggable ? {
+      onDragStart: publish('columnHeaderDragStart'),
+      onDragEnter: publish('columnHeaderDragEnter'),
+      onDragOver: publish('columnHeaderDragOver'),
+      onDragEnd: publish('columnHeaderDragEnd')
+    } : {};
+  }, [isDraggable, publish]);
+  var columnHeaderSeparatorProps = React.useMemo(function () {
+    return {
+      onMouseDown: publish('columnSeparatorMouseDown')
+    };
+  }, [publish]);
   React.useEffect(function () {
     if (!showColumnMenuIcon) {
       setShowColumnMenuIcon(columnMenuOpen);
@@ -146,13 +146,24 @@ function GridColumnHeaderItem(props) {
     iconButtonRef: iconButtonRef
   });
 
+  var columnMenu = /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    field: column.field,
+    open: columnMenuOpen,
+    target: iconButtonRef.current,
+    ContentComponent: rootProps.components.ColumnMenu,
+    contentComponentProps: (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnMenu,
+    onExited: handleExited
+  });
+
   var sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
 
   var columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.components.ColumnHeaderFilterIconButton, _extends({
       field: column.field,
       counter: filterItemsCounter
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -174,53 +185,32 @@ function GridColumnHeaderItem(props) {
     colDef: column
   }) : column.headerClassName;
   var label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
-  return /*#__PURE__*/_jsxs("div", _extends({
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
     ref: headerCellRef,
-    className: clsx(classes.root, headerClassName),
-    "data-field": column.field,
-    style: {
-      width: width,
-      minWidth: width,
-      maxWidth: width
-    },
-    role: "columnheader",
+    classes: classes,
+    columnMenuOpen: columnMenuOpen,
+    colIndex: colIndex,
+    height: headerHeight,
+    isResizing: isResizing,
+    sortDirection: sortDirection,
+    hasFocus: hasFocus,
     tabIndex: tabIndex,
-    "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort,
-    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
-  }, mouseEventsHandlers, {
-    children: [/*#__PURE__*/_jsxs("div", _extends({
-      className: classes.draggableContainer,
-      draggable: isDraggable
-    }, draggableEventHandlers, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: classes.titleContainer,
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classes.titleContainerContent,
-          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: label,
-            description: column.description,
-            columnWidth: width
-          })
-        }), columnTitleIconButtons]
-      }), columnMenuIconButton]
-    })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, {
-      resizable: !rootProps.disableColumnResize && !!column.resizable,
-      resizing: isResizing,
-      height: headerHeight,
-      onMouseDown: publish('columnSeparatorMouseDown'),
-      side: separatorSide
-    }), /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
-      columnMenuId: columnMenuId,
-      columnMenuButtonId: columnMenuButtonId,
-      field: column.field,
-      open: columnMenuOpen,
-      target: iconButtonRef.current,
-      ContentComponent: rootProps.components.ColumnMenu,
-      contentComponentProps: (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnMenu,
-      onExited: handleExited
-    })]
-  }));
+    separatorSide: separatorSide,
+    isDraggable: isDraggable,
+    headerComponent: headerComponent,
+    description: column.description,
+    elementId: column.field,
+    width: column.computedWidth,
+    columnMenuIconButton: columnMenuIconButton,
+    columnTitleIconButtons: columnTitleIconButtons,
+    headerClassName: headerClassName,
+    label: label,
+    resizable: !rootProps.disableColumnResize && !!column.resizable,
+    "data-field": column.field,
+    columnMenu: columnMenu,
+    draggableContainerProps: draggableEventHandlers,
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+  }, mouseEventsHandlers));
 }
 
 process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {

package/legacy/components/columnHeaders/GridColumnHeadersInner.js

@@ -32,7 +32,8 @@ var GridColumnHeadersInnerRoot = styled('div', {
 
   return _ref2 = {
     display: 'flex',
-    alignItems: 'center'
+    alignItems: 'flex-start',
+    flexDirection: 'column'
   }, _defineProperty(_ref2, "&.".concat(gridClasses.columnHeaderDropZone, " .").concat(gridClasses.columnHeaderDraggableContainer), {
     cursor: 'move'
   }), _defineProperty(_ref2, "&.".concat(gridClasses['columnHeadersInner--scrollable'], " .").concat(gridClasses.columnHeader, ":last-child"), {

package/legacy/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -0,0 +1,112 @@
+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 = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "disableHeaderSeparator"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { useForkRef } from '@mui/material/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
+import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+  var classes = props.classes,
+      columnMenuOpen = props.columnMenuOpen,
+      colIndex = props.colIndex,
+      height = props.height,
+      isResizing = props.isResizing,
+      sortDirection = props.sortDirection,
+      hasFocus = props.hasFocus,
+      tabIndex = props.tabIndex,
+      separatorSide = props.separatorSide,
+      isDraggable = props.isDraggable,
+      headerComponent = props.headerComponent,
+      description = props.description,
+      elementId = props.elementId,
+      width = props.width,
+      _props$columnMenuIcon = props.columnMenuIconButton,
+      columnMenuIconButton = _props$columnMenuIcon === void 0 ? null : _props$columnMenuIcon,
+      _props$columnMenu = props.columnMenu,
+      columnMenu = _props$columnMenu === void 0 ? null : _props$columnMenu,
+      _props$columnTitleIco = props.columnTitleIconButtons,
+      columnTitleIconButtons = _props$columnTitleIco === void 0 ? null : _props$columnTitleIco,
+      headerClassName = props.headerClassName,
+      label = props.label,
+      resizable = props.resizable,
+      draggableContainerProps = props.draggableContainerProps,
+      columnHeaderSeparatorProps = props.columnHeaderSeparatorProps,
+      disableHeaderSeparator = props.disableHeaderSeparator,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var headerCellRef = React.useRef(null);
+
+  var _React$useState = React.useState(columnMenuOpen),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      showColumnMenuIcon = _React$useState2[0],
+      setShowColumnMenuIcon = _React$useState2[1];
+
+  var handleRef = useForkRef(headerCellRef, ref);
+  var ariaSort = 'none';
+
+  if (sortDirection != null) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+
+  React.useEffect(function () {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  React.useLayoutEffect(function () {
+    var columnMenuState = apiRef.current.state.columnMenu;
+
+    if (hasFocus && !columnMenuState.open) {
+      var focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      var elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [apiRef, hasFocus]);
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: handleRef,
+    className: clsx(classes.root, headerClassName),
+    style: {
+      height: height,
+      width: width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    tabIndex: tabIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-sort": ariaSort,
+    "aria-label": headerComponent == null ? label : undefined
+  }, other, {
+    children: [/*#__PURE__*/_jsxs("div", _extends({
+      className: classes.draggableContainer,
+      draggable: isDraggable
+    }, draggableContainerProps, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.titleContainer,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
+            description: description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), !disableHeaderSeparator && /*#__PURE__*/_jsx(GridColumnHeaderSeparator, _extends({
+      resizable: !rootProps.disableColumnResize && !!resizable,
+      resizing: isResizing,
+      height: height,
+      side: separatorSide
+    }, columnHeaderSeparatorProps)), columnMenu]
+  }));
+});
+export { GridGenericColumnHeaderItem };

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -190,7 +190,8 @@ process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.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/containers/GridOverlay.js

@@ -27,8 +27,14 @@ var GridOverlayRoot = styled('div', {
 })(function (_ref) {
   var theme = _ref.theme;
   return {
-    display: 'flex',
+    position: 'absolute',
+    top: 0,
+    zIndex: 4,
+    // should be above pinned columns, pinned rows and detail panel
+    width: '100%',
     height: '100%',
+    pointerEvents: 'none',
+    display: 'flex',
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',

package/legacy/components/containers/GridRoot.js

@@ -13,8 +13,8 @@ import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridDensityHeaderGroupingMaxDepthSelector, gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../../hooks/features/rows/gridRowsSelector';
-import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -38,6 +38,7 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   var totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
   var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
   var rootContainerRef = React.useRef(null);
   var handleRef = useForkRef(rootContainerRef, ref);
   var pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
@@ -72,8 +73,7 @@ var GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     className: clsx(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
-    "aria-rowcount": totalRowCount + pinnedRowsCount + 1 // +1 for the header row
-    ,
+    "aria-rowcount": headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
     "aria-multiselectable": !rootProps.disableMultipleSelection,
     "aria-label": rootProps['aria-label'],
     "aria-labelledby": rootProps['aria-labelledby']

package/legacy/components/containers/GridRootStyles.js

@@ -7,12 +7,12 @@ export var GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses.autoHeight), styles.autoHeight), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeader), styles.aggregationColumnHeader), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignLeft']), styles['aggregationColumnHeader--alignLeft']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignCenter']), styles['aggregationColumnHeader--alignCenter']), _defineProperty({}, "&.".concat(gridClasses['aggregationColumnHeader--alignRight']), styles['aggregationColumnHeader--alignRight']), _defineProperty({}, "&.".concat(gridClasses.aggregationColumnHeaderLabel), styles.aggregationColumnHeaderLabel), _defineProperty({}, "& .".concat(gridClasses.editBooleanCell), styles.editBooleanCell), _defineProperty({}, "& .".concat(gridClasses['cell--editing']), styles['cell--editing']), _defineProperty({}, "& .".concat(gridClasses['cell--textCenter']), styles['cell--textCenter']), _defineProperty({}, "& .".concat(gridClasses['cell--textLeft']), styles['cell--textLeft']), _defineProperty({}, "& .".concat(gridClasses['cell--textRight']), styles['cell--textRight']), // TODO v6: Remove
-    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
+    _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.cellSkeleton), styles.cellSkeleton), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
-})(function (_ref51) {
+})(function (_ref52) {
   var _$concat2, _$concat3, _extends2;
 
-  var theme = _ref51.theme;
+  var theme = _ref52.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
 
   var gridStyle = _extends({
@@ -68,11 +68,19 @@ export var GridRootStyles = styled('div', {
     minWidth: 0,
     flex: 1,
     whiteSpace: 'nowrap',
-    overflowX: 'hidden'
+    overflow: 'hidden'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',
     alignItems: 'center'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--filledGroup'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+    borderBottom: "solid ".concat(borderColor, " 1px"),
+    boxSizing: 'border-box'
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder'], " .").concat(gridClasses.columnHeaderTitleContainer), {
+    borderBottom: "none"
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--filledGroup'], ".").concat(gridClasses['columnHeader--showColumnBorder']), {
+    borderBottom: "solid ".concat(borderColor, " 1px"),
+    boxSizing: 'border-box'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.sortIcon, ", & .").concat(gridClasses.filterIcon), {
     fontSize: 'inherit'
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--sortable']), {
@@ -214,7 +222,8 @@ export var GridRootStyles = styled('div', {
     justifyContent: 'center'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderDraggableContainer), {
     display: 'flex',
-    width: '100%'
+    width: '100%',
+    height: '100%'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.rowReorderCellPlaceholder), {
     display: 'none'
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnHeader--dragging'], ", & .").concat(gridClasses['row--dragging']), {

package/legacy/components/menu/GridMenu.js

@@ -123,6 +123,7 @@ process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
   onClickAway: PropTypes.func.isRequired,
   onExited: PropTypes.func,