@mui/x-data-grid 5.15.1 → 5.16.0

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.16.0
+
+_Aug 25, 2022_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce column grouping for data grid (#5133) @alexfauquette
+
+  You can now group columns using the `columnGroupingModel` prop. This lets you to display more structured data.
+
+  <img src="https://user-images.githubusercontent.com/45398769/186178366-4fba66b2-bf90-4c7a-9d83-940a7fc78704.png" width="800" />
+
+  To enable this feature, add `experimentalFeatures={{ columnGrouping: true }}`.
+  The grouping header can be fully customized.
+  See the [documentation](https://mui.com/x/react-data-grid/column-groups/) to explore everything it has to offer.
+
+- 🐞 Bugfixes
+- 🌏 New locales for pickers thanks to @tesseractjh and @drastus
+
+### `@mui/x-data-grid@v5.16.0` / `@mui/x-data-grid-pro@v5.16.0` / `@mui/x-data-grid-premium@v5.16.0`
+
+#### Changes
+
+- [DataGrid] Implement column grouping (#5133) @alexfauquette
+- [DataGrid] Handle `disableVirtualization` prop change (#5889) @cherniavskii
+- [DataGrid] Improve `GridRowModel` typing (#5734) @cherniavskii
+- [DataGrid] Update deprecation note for `GridColDef` `hide` property (#5886) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.0-beta.7` / `@mui/x-date-pickers-pro@v5.0.0-beta.7`
+
+#### Changes
+
+- [DatePicker] Fix to pass down `className` prop provided on DatePicker to `renderInput` (#5471) @CruseCtrl
+- [DatePicker] Improve `a11y` support (#5809) @LukasTy
+- [pickers] Add `PaperContent` component slot (#5801) @LukasTy
+- [pickers] Add a breaking change section in the migration guide (#5805) @alexfauquette
+- [pickers] Add new translations to `localeText` (#5143) @alexfauquette
+- [pickers] Document components slots (#4657) @flaviendelangle
+- [pickers] Add new unstable field components (#5504) @flaviendelangle
+- [pickers] Fallback to default `minDate` / `maxDate` when `null` value is passed (#5397) @flaviendelangle
+- [l10n] Add Korean (ko-KR) locale (#5854) @tesseractjh
+- [l10n] Add Polish (pl-PL) locale (#5833) @drastus
+
+### Docs
+
+- [docs] Fix typo in `migration from lab` (#5277) @chuckwired
+- [docs] Use `dayjs` instead of `date-fns` in doc examples (#5481) @flaviendelangle
+
+### Core
+
+- [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari
+- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle
+- [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii
+- [core] Remove Firefox from the BrowserStack list (#5874) @DanailH
+- [core] Small changes to the release script (#5840) @m4theushw
+
+## 5.15.3
+
+_Aug 18, 2022_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.3` / `@mui/x-data-grid-pro@v5.15.3` / `@mui/x-data-grid-premium@v5.15.3`
+
+#### Changes
+
+- [DataGrid] Fix <kbd>Enter</kbd> causing Select to re-open when commiting value (#5756) @m4theushw
+- [DataGrid] Fix `GridOverlays` bypassing pointer events (#5674) @philjones88
+
+### `@mui/x-date-pickers@v5.0.0-beta.6` / `@mui/x-date-picker-pro@v5.0.0-beta.6`
+
+#### Changes
+
+- [DatePicker] Support click on day outside of current month (#5768) @alexfauquette
+- [pickers] Extend `PickersActionBarProps` with `DialogActionProps` (#5798) @LukasTy
+
+### Docs
+
+- [docs] Fix API anchor link scroll top (#5795) @oliviertassinari
+- [docs] Fix contradiction in the free trial clause (#5732) @oliviertassinari
+- [docs] Fix default value of the DataGrid `logLevel` prop to false (#5784) @HwangTaehyun
+- [docs] Fix typo on the row height page (#5772) @flaviendelangle
+- [docs] Improve "upgrading plans" documentation. (#5683) @joserodolfofreitas
+- [docs] Link the license docs before pricing (#5726) @oliviertassinari
+- [docs] Update packages README files (#5835) @cherniavskii
+- [docs] Use `InputBase` for pickers inputs (#5597) @cherniavskii
+
+### Core
+
+- [core] Upgrade monorepo (#5771, #5797) @cherniavskii
+- [core] Various TS improvements (#5556) @flaviendelangle
+- [license] Give more context in the missing license (#5731) @oliviertassinari
+- [license] Only log an error type once (#5730) @oliviertassinari
+- [test] Increase timeout to take print screenshot (#5799) @m4theushw
+
+## 5.15.2
+
+_Aug 11, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Improve quick filtering with row grouping (#5701) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.2` / `@mui/x-data-grid-pro@v5.15.2` / `@mui/x-data-grid-premium@v5.15.2`
+
+#### Changes
+
+- [DataGrid] Catch errors if rows freezing is not supported (#5711) @cherniavskii
+- [DataGrid] Preserve cell mode when entering edit mode while commiting (#5686) @m4theushw
+- [DataGridPremium] Let quick filter search in row grouping children (#5701) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.0-beta.5` / `@mui/x-date-picker-pro@5.0.0-beta.5`
+
+#### Changes
+
+- [pickers] Add `react-dom` to peerDependencies (#5752) @cherniavskii
+- [TimePicker] Set clock focus outline to `none` (#5758) @LukasTy
+- [pickers] Fix theme augmentation with TypeScript (#5596) @alexfauquette
+- [pickers] Reset input value when locale is modified (#5310) @alexfauquette
+- [pickers] Support `disableHighlightToday` on `MonthPicker` and `YearPicker` (#5562) @flaviendelangle
+- [pickers] Fallback to desktop mode when `matchMedia` is unavailable (#5684) @LukasTy
+- [pickers] Trigger `onChange` when clearing or accepting `Invalid date` (#5740) @LukasTy
+
+### Docs
+
+- [docs] Add RFC GH issue template (#5739) @bytasv
+- [docs] Add description to the `GridExportStateParams` page (#5654) @oliviertassinari
+- [docs] Improve the Events page (#5413) @flaviendelangle
+- [docs] Use new editing API in the introduction demos (#5728) @oliviertassinari
+
+### Core
+
+- [core] Remove duplicated `FUNDING.yml` file (#5656) @oliviertassinari
+- [core] Remove outdated Next.js options (#5727) @oliviertassinari
+- [core] Update tooling to run with React 18 (#4155) @m4theushw
+- [test] Fix failing dynamic row height tests on Edge (#5707) @m4theushw
+
 ## 5.15.1
 
 _Aug 4, 2022_

package/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -194,6 +195,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -347,7 +349,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -645,7 +647,7 @@ DataGridRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

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

package/README.md

@@ -21,7 +21,8 @@ This component has the following peer dependencies that you will need to install
 "peerDependencies": {
   "@mui/material": "^5.4.1",
   "@mui/system": "^5.4.1",
-  "react": "^17.0.2 || ^18.0.0"
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 

package/components/DataGridColumnHeaders.js

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

package/components/ErrorBoundary.d.ts

@@ -8,6 +8,7 @@ export interface ErrorBoundaryProps {
     api: React.MutableRefObject<GridApiCommunity>;
     hasError: boolean;
     componentProps?: any[];
+    children?: React.ReactNode;
 }
 export declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, any> {
     static getDerivedStateFromError(error: Error): {

package/components/GridAutoSizer.js

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

package/components/GridRow.js

@@ -22,6 +22,7 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -82,8 +83,6 @@ function GridRow(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
-
   const apiRef = useGridApiContext();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -91,6 +90,9 @@ function GridRow(props) {
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+
   const {
     hasScrollX,
     hasScrollY
@@ -359,7 +361,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/components/base/GridBody.js

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

package/components/base/GridOverlays.js

@@ -6,7 +6,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) {
@@ -14,7 +14,7 @@ function GridOverlayWrapper(props) {
 
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [viewportInnerSize, setViewportInnerSize] = React.useState(() => {
     var _apiRef$current$getRo, _apiRef$current$getRo2;
 
@@ -43,11 +43,8 @@ function GridOverlayWrapper(props) {
       height,
       width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0,
       position: 'absolute',
-      top: headerHeight,
-      bottom: height === 'auto' ? 0 : undefined,
-      zIndex: 4,
-      // should be above pinned columns, pinned rows and detail panel
-      pointerEvents: 'none'
+      top: totalHeaderHeight,
+      bottom: height === 'auto' ? 0 : undefined
     }
   }, props));
 }

package/components/cell/GridActionsCellItem.d.ts

@@ -43,7 +43,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Pick<{
     touchRippleRef?: React.Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "size" | "disabled" | "children" | "action" | "tabIndex" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge">, "hidden" | "color" | "size" | "icon" | "translate" | "disabled" | "form" | "label" | "slot" | "title" | "children" | "key" | "action" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "type" | "value" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "showInMenu"> | Pick<{
+}, "color" | "size" | "disabled" | "action" | "tabIndex" | "children" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge">, "hidden" | "color" | "size" | "icon" | "translate" | "disabled" | "form" | "label" | "slot" | "title" | "key" | "action" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "type" | "value" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "showInMenu"> | Pick<{
     label: string;
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 } & {
@@ -75,5 +75,5 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Pick<{
     touchRippleRef?: React.Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof React.LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | React.RefObject<HTMLLIElement> | null | undefined;
-}, "dense" | "disabled" | "children" | "action" | "autoFocus" | "tabIndex" | "selected" | "sx" | "disableGutters" | "divider" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef">, "hidden" | "color" | "dense" | "icon" | "translate" | "disabled" | "label" | "slot" | "title" | "children" | "key" | "action" | "autoFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "selected" | "value" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "disableGutters" | "divider" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "showInMenu">) & React.RefAttributes<HTMLButtonElement>>;
+}, "dense" | "disabled" | "action" | "autoFocus" | "tabIndex" | "selected" | "children" | "sx" | "disableGutters" | "divider" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef">, "hidden" | "color" | "dense" | "icon" | "translate" | "disabled" | "label" | "slot" | "title" | "key" | "action" | "autoFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "selected" | "value" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "disableGutters" | "divider" | keyof import("@mui/material/OverridableComponent").CommonProps | "onFocusVisible" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "TouchRippleProps" | "touchRippleRef" | "showInMenu">) & React.RefAttributes<HTMLButtonElement>>;
 export { GridActionsCellItem };

package/components/cell/GridEditDateCell.js

@@ -81,7 +81,7 @@ function GridEditDateCell(props) {
       const [date, time] = newFormattedDate.split('T');
       const [year, month, day] = date.split('-');
       newParsedDate = new Date();
-      newParsedDate.setFullYear(year, Number(month) - 1, day);
+      newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
       newParsedDate.setHours(0, 0, 0, 0);
 
       if (time) {

package/components/cell/GridEditSingleSelectCell.js

@@ -23,6 +23,10 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
   }, key);
 };
 
+function isKeyboardEvent(event) {
+  return !!event.key;
+}
+
 function GridEditSingleSelectCell(props) {
   var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
@@ -142,7 +146,11 @@ function GridEditSingleSelectCell(props) {
     }
   };
 
-  const handleOpen = () => {
+  const handleOpen = event => {
+    if (isKeyboardEvent(event) && event.key === 'Enter') {
+      return;
+    }
+
     setOpen(true);
   };
 

package/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface GridColumnGroupHeaderProps {
+    groupId: string | null;
+    width: number;
+    fields: string[];
+    colIndex: number;
+    isLastColumn: boolean;
+    extendRowFullWidth: boolean;
+    depth: number;
+    maxDepth: number;
+    height: number;
+}
+declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): JSX.Element;
+export { GridColumnGroupHeader };

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,122 @@
+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";
+
+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 composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridColumnGroupHeader(props) {
+  var _apiRef$current$getRo, _columnGroupsLookup$g;
+
+  const {
+    groupId,
+    width,
+    depth,
+    maxDepth,
+    fields,
+    height,
+    colIndex,
+    isLastColumn,
+    extendRowFullWidth
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const columnGroupsLookup = useGridSelector(apiRef, 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 = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder,
+    showColumnBorder,
+    headerAlign,
+    depth,
+    isDragging: false
+  });
+
+  const label = headerName != null ? headerName : groupId;
+  const id = 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__*/_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": `|-${fields.join('-|-')}-|`,
+    disableHeaderSeparator: true
+  });
+}
+
+export { GridColumnGroupHeader };