@mui/x-data-grid 5.15.1 → 5.16.0

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,141 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnGroupHeader = GridColumnGroupHeader;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _utils = require("@mui/utils");
+
+var _material = require("@mui/material");
+
+var _gridClasses = require("../../constants/gridClasses");
+
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+
+var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
+
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+
+var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    headerAlign,
+    isDragging,
+    showRightBorder,
+    showColumnBorder,
+    groupId
+  } = ownerState;
+  const 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 (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+
+function GridColumnGroupHeader(props) {
+  var _apiRef$current$getRo, _columnGroupsLookup$g;
+
+  const {
+    groupId,
+    width,
+    depth,
+    maxDepth,
+    fields,
+    height,
+    colIndex,
+    isLastColumn,
+    extendRowFullWidth
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const columnGroupsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector);
+  const {
+    hasScrollX,
+    hasScrollY
+  } = (_apiRef$current$getRo = apiRef.current.getRootDimensions()) != null ? _apiRef$current$getRo : {
+    hasScrollX: false,
+    hasScrollY: false
+  };
+  const group = groupId ? columnGroupsLookup[groupId] : {};
+  const {
+    headerName = groupId != null ? groupId : '',
+    description = '',
+    headerAlign = undefined
+  } = group;
+  let headerComponent;
+  const render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.renderHeaderGroup);
+  const renderParams = {
+    groupId,
+    headerName,
+    description,
+    depth,
+    maxDepth,
+    fields,
+    colIndex,
+    isLastColumn
+  };
+
+  if (groupId && render) {
+    headerComponent = render(renderParams);
+  }
+
+  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+  const showColumnBorder = rootProps.showColumnRightBorder;
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes,
+    showRightBorder,
+    showColumnBorder,
+    headerAlign,
+    depth,
+    isDragging: false
+  });
+  const label = headerName != null ? headerName : groupId;
+  const id = (0, _utils.unstable_useId)();
+  const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
+  const classes = useUtilityClasses(ownerState);
+  const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.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": `|-${fields.join('-|-')}-|`,
+    disableHeaderSeparator: true
+  });
+}

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -13,8 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
 var _material = require("@mui/material");
 
 var _utils = require("@mui/material/utils");
@@ -23,10 +21,6 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _GridColumnHeaderSortIcon = require("./GridColumnHeaderSortIcon");
 
-var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
-
-var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
-
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
@@ -35,6 +29,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -64,7 +60,7 @@ const 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;
 
   const {
     column,
@@ -97,12 +93,19 @@ function GridColumnHeaderItem(props) {
     hasScrollY: false
   };
   const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
-  let headerComponent = null;
+  let headerComponent;
 
   if (column.renderHeader) {
     headerComponent = column.renderHeader(apiRef.current.getColumnHeaderParams(column.field));
   }
 
+  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes,
+    showRightBorder
+  });
+  const classes = useUtilityClasses(ownerState);
   const publish = React.useCallback(eventName => event => {
     // Ignore portal
     // See https://github.com/mui/mui-x/issues/1721
@@ -112,7 +115,7 @@ function GridColumnHeaderItem(props) {
 
     apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(column.field), event);
   }, [apiRef, column.field]);
-  const mouseEventsHandlers = {
+  const mouseEventsHandlers = React.useMemo(() => ({
     onClick: publish('columnHeaderClick'),
     onDoubleClick: publish('columnHeaderDoubleClick'),
     onMouseOver: publish('columnHeaderOver'),
@@ -126,27 +129,16 @@ function GridColumnHeaderItem(props) {
     onKeyDown: publish('columnHeaderKeyDown'),
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
-  };
-  const draggableEventHandlers = isDraggable ? {
+  }), [publish]);
+  const draggableEventHandlers = React.useMemo(() => isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  } : null;
-  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
-  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
-  const ownerState = (0, _extends2.default)({}, props, {
-    classes: rootProps.classes,
-    showRightBorder
-  });
-  const classes = useUtilityClasses(ownerState);
-  const width = column.computedWidth;
-  let ariaSort = 'none';
-
-  if (sortDirection != null) {
-    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
-  }
-
+  } : {}, [isDraggable, publish]);
+  const columnHeaderSeparatorProps = React.useMemo(() => ({
+    onMouseDown: publish('columnSeparatorMouseDown')
+  }), [publish]);
   React.useEffect(() => {
     if (!showColumnMenuIcon) {
       setShowColumnMenuIcon(columnMenuOpen);
@@ -162,12 +154,22 @@ function GridColumnHeaderItem(props) {
     open: showColumnMenuIcon,
     iconButtonRef: iconButtonRef
   });
+  const columnMenu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderMenu.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
+  });
   const sortingOrder = (_column$sortingOrder = column.sortingOrder) != null ? _column$sortingOrder : rootProps.sortingOrder;
   const columnTitleIconButtons = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnHeaderFilterIconButton, (0, _extends2.default)({
       field: column.field,
       counter: filterItemsCounter
-    }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
+    }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.columnHeaderFilterIconButton)), column.sortable && !column.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
       direction: sortDirection,
       index: sortIndex,
       sortingOrder: sortingOrder
@@ -188,53 +190,32 @@ function GridColumnHeaderItem(props) {
     colDef: column
   }) : column.headerClassName;
   const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
-    className: (0, _clsx.default)(classes.root, headerClassName),
-    "data-field": column.field,
-    style: {
-      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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-      className: classes.draggableContainer,
-      draggable: isDraggable
-    }, draggableEventHandlers, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: classes.titleContainer,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: classes.titleContainerContent,
-          children: column.renderHeader ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
-            label: label,
-            description: column.description,
-            columnWidth: width
-          })
-        }), columnTitleIconButtons]
-      }), columnMenuIconButton]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSeparator.GridColumnHeaderSeparator, {
-      resizable: !rootProps.disableColumnResize && !!column.resizable,
-      resizing: isResizing,
-      height: headerHeight,
-      onMouseDown: publish('columnSeparatorMouseDown'),
-      side: separatorSide
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderMenu.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/node/components/columnHeaders/GridColumnHeadersInner.js

@@ -53,7 +53,8 @@ const GridColumnHeadersInnerRoot = (0, _styles.styled)('div', {
   }, styles.columnHeadersInner]
 })(() => ({
   display: 'flex',
-  alignItems: 'center',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
   [`&.${_gridClasses.gridClasses.columnHeaderDropZone} .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
     cursor: 'move'
   },

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridGenericColumnHeaderItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _utils = require("@mui/material/utils");
+
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
+var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
+
+var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
+
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "disableHeaderSeparator"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+  const {
+    classes,
+    columnMenuOpen,
+    colIndex,
+    height,
+    isResizing,
+    sortDirection,
+    hasFocus,
+    tabIndex,
+    separatorSide,
+    isDraggable,
+    headerComponent,
+    description,
+    width,
+    columnMenuIconButton = null,
+    columnMenu = null,
+    columnTitleIconButtons = null,
+    headerClassName,
+    label,
+    resizable,
+    draggableContainerProps,
+    columnHeaderSeparatorProps,
+    disableHeaderSeparator
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const headerCellRef = React.useRef(null);
+  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const handleRef = (0, _utils.useForkRef)(headerCellRef, ref);
+  let ariaSort = 'none';
+
+  if (sortDirection != null) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+
+  React.useEffect(() => {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  React.useLayoutEffect(() => {
+    const columnMenuState = apiRef.current.state.columnMenu;
+
+    if (hasFocus && !columnMenuState.open) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null ? void 0 : elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [apiRef, hasFocus]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    ref: handleRef,
+    className: (0, _clsx.default)(classes.root, headerClassName),
+    style: {
+      height,
+      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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+      className: classes.draggableContainer,
+      draggable: isDraggable
+    }, draggableContainerProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.titleContainer,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+            label: label,
+            description: description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), !disableHeaderSeparator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSeparator.GridColumnHeaderSeparator, (0, _extends2.default)({
+      resizable: !rootProps.disableColumnResize && !!resizable,
+      resizing: isResizing,
+      height: height,
+      side: separatorSide
+    }, columnHeaderSeparatorProps)), columnMenu]
+  }));
+});
+exports.GridGenericColumnHeaderItem = GridGenericColumnHeaderItem;

package/node/components/containers/GridOverlay.js

@@ -50,8 +50,14 @@ const GridOverlayRoot = (0, _styles.styled)('div', {
 })(({
   theme
 }) => ({
-  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/node/components/containers/GridRoot.js

@@ -33,10 +33,10 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
 var _gridClasses = require("../../constants/gridClasses");
 
-var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
-
 var _densitySelector = require("../../hooks/features/density/densitySelector");
 
+var _gridRowsSelector = require("../../hooks/features/rows/gridRowsSelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["children", "className"];
@@ -68,6 +68,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
   const totalRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
   const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
+  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderGroupingMaxDepthSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = (0, _utils.useForkRef)(rootContainerRef, ref);
   const pinnedRowsCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
@@ -98,8 +99,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     className: (0, _clsx.default)(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/node/components/containers/GridRootStyles.js

@@ -186,13 +186,24 @@ const GridRootStyles = (0, _styles.styled)('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflowX: 'hidden'
+      overflow: 'hidden'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
       display: 'flex',
       alignItems: 'center'
     },
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
+      borderBottom: `solid ${borderColor} 1px`,
+      boxSizing: 'border-box'
+    },
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}.${_gridClasses.gridClasses['columnHeader--showColumnBorder']} .${_gridClasses.gridClasses.columnHeaderTitleContainer}`]: {
+      borderBottom: `none`
+    },
+    [`& .${_gridClasses.gridClasses['columnHeader--filledGroup']}.${_gridClasses.gridClasses['columnHeader--showColumnBorder']}`]: {
+      borderBottom: `solid ${borderColor} 1px`,
+      boxSizing: 'border-box'
+    },
     [`& .${_gridClasses.gridClasses.sortIcon}, & .${_gridClasses.gridClasses.filterIcon}`]: {
       fontSize: 'inherit'
     },
@@ -372,7 +383,8 @@ const GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
       display: 'flex',
-      width: '100%'
+      width: '100%',
+      height: '100%'
     },
     [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
       display: 'none'

package/node/components/menu/GridMenu.js

@@ -150,6 +150,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.default.node,
   onClickAway: _propTypes.default.func.isRequired,
   onExited: _propTypes.default.func,
 

package/node/components/panel/GridPanel.js

@@ -126,6 +126,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
 
   /**
    * Override or extend the styles applied to the component.

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -380,6 +380,11 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   applyMultiFilterOperatorChanges: _propTypes.default.func.isRequired,
 
+  /**
+   * @ignore - do not document.
+   */
+  children: _propTypes.default.node,
+
   /**
    * Props passed to the column input component.
    * @default {}

package/node/components/panel/filterPanel/GridFilterPanel.js

@@ -154,6 +154,11 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * @ignore - do not document.
+   */
+  children: _propTypes.default.node,
+
   /**
    * Changes how the options in the columns selector should be ordered.
    * If not specified, the order is derived from the `columns` prop.

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
 exports.gridClasses = gridClasses;

package/node/hooks/features/columnGrouping/gridColumnGroupsInterfaces.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridColumnGroupsLookupSelector = exports.gridColumnGroupingSelector = void 0;
+
+var _createSelector = require("../../../utils/createSelector");
+
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+const gridColumnGroupingSelector = state => state.columnGrouping;
+
+exports.gridColumnGroupingSelector = gridColumnGroupingSelector;
+const gridColumnGroupsLookupSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping.lookup);
+exports.gridColumnGroupsLookupSelector = gridColumnGroupsLookupSelector;