@mui/x-data-grid 6.0.3 → 6.1.0

package/CHANGELOG.md

@@ -3,6 +3,125 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.1.0
+
+_Apr 7, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Catalan (ca-ES), Kazakh (kz-KZ) and improve Spanish (es-ES), Dutch (nl-NL), Hebrew (he-IL), Hungarian (hu-HU), Japanese (ja-JP), Portuguese (pt-BR), and Russian (ru-RU) locales
+- ✨ Allow to control visibility of columns shown in the columns panel (#8401) @MBilalShafi
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.1.0` / `@mui/x-data-grid-pro@v6.1.0` / `@mui/x-data-grid-premium@v6.1.0`
+
+#### Changes
+
+- [DataGrid] Allow to control visibility of columns shown in the `ColumnsPanel` component (#8401) @MBilalShafi
+- [DataGrid] Fix filters with empty array value not being removed from the filter model (#8501) @cherniavskii
+- [DataGrid] Fix memory leaks in development (#8301) @cherniavskii
+- [DataGrid] Sync `date` column value when entering edit mode by pressing a digit (#8364) @m4theushw
+- [DataGrid] Wrap column menu button with a tooltip (#7890) @cherniavskii
+- [l10n] Improve Dutch (nl-NL) locale (#8491) @thedutchruben
+- [l10n] Improve Hungarian (hu-HU) locale (#8486) @PetakCC
+- [l10n] Improve Japanese (ja-JP) locale (#8462) @megos
+- [l10n] Improve Portuguese (pt-BR) locale (#8480) @pwnedev
+- [l10n] Improve Russian (ru-RU) locale (#8510) @alexrapro
+
+### `@mui/x-date-pickers@v6.1.0` / `@mui/x-date-pickers-pro@v6.1.0`
+
+#### Changes
+
+- [fields] Fix RTL navigation (#8490) @alexfauquette
+- [fields] Fix usage of `slotProps.textField.InputProps` (#8428) @flaviendelangle
+- [pickers] Fix `componentsProps.dialog` propagation (#8509) @LukasTy
+- [pickers] Move `hasError` from `fieldValueManager` to `valueManager` (#8453) @flaviendelangle
+- [pickers] Move the adapters interfaces to the X repository (#8412) @flaviendelangle
+- [pickers] Update peer dependency versions (#8531) @LukasTy
+- [pickers] Fix `isValid` regression (#8543) @LukasTy
+- [l10n] Add Catalan (Spain) (ca-ES) and improve Spanish (es-ES) locales (#8498) @makenshikuro
+- [l10n] Add Kazakh (kz-KZ) locale (#8451) @zhunus
+- [l10n] Improve Dutch (nl-NL) locale (#8491) @thedutchruben
+- [l10n] Improve Hebrew (he-IL) locale (#8464) @soris1989
+- [l10n] Improve Japanese (ja-JP) locale (#8462) @megos
+- [l10n] Improve Portuguese (pt-BR) locale (#8480) @pwnedev
+
+### Docs
+
+- [docs] Fix 301 redirect (#8524) @alexfauquette
+- [docs] Fix 404 links (#8454) @alexfauquette
+- [docs] Fix broken API reference link (#8460) @oliviertassinari
+
+### Core
+
+- [core] Avoid 301 links (#8383) @oliviertassinari
+- [core] Fix the l10n helper by using danger instead of actions (#8512) @alexfauquette
+- [core] Help contributors for l10n PRs (#8503) @alexfauquette
+- [core] Remove legacy token (#8457) @oliviertassinari
+- [charts] Add a styling system (#8445) @alexfauquette
+
+## 6.0.4
+
+_Mar 30, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Danish (da-DK), and improve Norwegian (nb-NO), Spanish (es-ES), and Swedish (sv-SE) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.0.4` / `@mui/x-data-grid-pro@v6.0.4` / `@mui/x-data-grid-premium@v6.0.4`
+
+#### Changes
+
+- [DataGrid] Fix column header tooltip not showing when the title is truncated (#8433) @rohitnatesh
+- [DataGrid] Fix filter model buttons' display condition (#8415) @MBilalShafi
+- [DataGrid] Fix infinite rerender in a flex parent (#8436) @cherniavskii
+- [DataGrid] Prevent reopening column menu when clicking in the button while it is open (#8286) @tanuj-22
+- [DataGrid] Rename `components` by `slots` in column menu API (#7999) @MBilalShafi
+- [DataGrid] Remove hardcoded CSS classes' usages (#8444) @MBilalShafi
+- [DataGridPremium] Fix aggregation initial state causing issue with quick filter (#8441) @MBilalShafi
+- [l10n] Improve Danish (da-DK) locale (#8368) @BossElijah
+- [l10n] Improve Danish (da-DK) locale (#8378) @BossElijah
+- [l10n] Improve Norwegian (nb-NO) locale (#8367) @BossElijah
+- [l10n] Improve Norwegian (nb-NO) locale (#8409) @BossElijah
+- [l10n] Improve Spanish (es-ES) locale (#8420) @martjanz
+- [l10n] Improve Swedish (sv-SE) locale (#8381) @BossElijah
+
+### `@mui/x-date-pickers@v6.0.4` / `@mui/x-date-pickers-pro@v6.0.4`
+
+#### Changes
+
+- [fields] Add missing tokens to `AdapterDateFnsJalali` (#8402) @flaviendelangle
+- [fields] Clean the active date manager (#8370) @flaviendelangle
+- [fields] Cleanup `useFieldState`  (#8292) @flaviendelangle
+- [fields] Only add RTL characters when needed (#8325) @flaviendelangle
+- [pickers] Add support for single input fields in range pickers  (#7927) @flaviendelangle
+- [pickers] Allows non token characters in format (#8256) @alexfauquette
+- [pickers] Avoid root imports and move public models to the models folder (#8337) @flaviendelangle
+- [pickers] Update `view` when `views` or `openTo` changes (#8361) @LukasTy
+- [l10n] Improve Norwegian (nb-NO) locale (#8382) @BossElijah
+- [l10n] Add Danish (da-DK) locale (#8379) @BossElijah
+- [l10n] Improve Swedish (sv-SE) locale (#8381) @BossElijah
+
+### `@mui/x-codemod@v6.0.4`
+
+#### Changes
+
+- [codemod] Fix `remove-stabilized-experimentalFeatures` codemod (#8289) @alexfauquette
+
+### Docs
+
+- [docs] Fix `GridCellParams` signature in migration guide (#8427) @cherniavskii
+- [docs] Fix "Custom field" demos responsive styles (#8408) @LukasTy
+- [docs] Remove `label` from demos where it reduces clarity (#8416) @LukasTy
+- [docs] Update slots' references in Data Grid migration guide (#8159) @MBilalShafi
+
+### Core
+
+- [charts] Work on typing (#8421) @flaviendelangle
+
 ## 6.0.3
 
 _Mar 23, 2023_

package/components/GridAutoSizer.js

@@ -6,6 +6,9 @@ import PropTypes from 'prop-types';
 import { unstable_useForkRef as useForkRef, unstable_ownerWindow as ownerWindow, unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import createDetectElementResize from '../lib/createDetectElementResize';
 // TODO replace with https://caniuse.com/resizeobserver.
+
+// Credit to https://github.com/bvaughn/react-virtualized/blob/master/source/AutoSizer/AutoSizer.js
+// for the sources.
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridAutoSizer = /*#__PURE__*/React.forwardRef(function AutoSizer(props, ref) {
   const {

package/components/GridPagination.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 export declare const GridPagination: React.ForwardRefExoticComponent<(Omit<Partial<import("@mui/material/TablePagination").TablePaginationBaseProps & {
     ActionsComponent?: React.ElementType<import("@mui/material/TablePagination/TablePaginationActions").TablePaginationActionsProps> | undefined;
-    backIconButtonProps?: Partial<import("@mui/material").IconButtonProps<"button", {}>> | undefined;
+    backIconButtonProps?: Partial<import("@mui/material").IconButtonProps> | undefined;
     classes?: Partial<import("@mui/material/TablePagination").TablePaginationClasses> | undefined;
     count: number;
     getItemAriaLabel?: ((type: "first" | "last" | "next" | "previous") => string) | undefined;
     labelDisplayedRows?: ((paginationInfo: import("@mui/material/TablePagination").LabelDisplayedRowsArgs) => React.ReactNode) | undefined;
     labelRowsPerPage?: React.ReactNode;
-    nextIconButtonProps?: Partial<import("@mui/material").IconButtonProps<"button", {}>> | undefined;
+    nextIconButtonProps?: Partial<import("@mui/material").IconButtonProps> | undefined;
     onPageChange: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, page: number) => void;
     onRowsPerPageChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     page: number;
@@ -20,15 +20,15 @@ export declare const GridPagination: React.ForwardRefExoticComponent<(Omit<Parti
     showFirstButton?: boolean | undefined;
     showLastButton?: boolean | undefined;
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<import("@mui/material/TablePagination").TablePaginationBaseProps, "hidden" | "color" | "page" | "size" | "height" | "translate" | "width" | "padding" | "abbr" | "slot" | "title" | "ref" | "colSpan" | "headers" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "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" | "rowSpan" | "scope" | "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" | "onResize" | "onResizeCapture" | "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" | "align" | "valign" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "count" | "getItemAriaLabel" | "labelDisplayedRows" | "labelRowsPerPage" | "onPageChange" | "onRowsPerPageChange" | "rowsPerPage" | "rowsPerPageOptions" | "showFirstButton" | "showLastButton" | "backIconButtonProps" | "nextIconButtonProps" | "sortDirection" | "ActionsComponent" | "SelectProps">>, "ref"> | Omit<Partial<import("@mui/material/TablePagination").TablePaginationBaseProps & {
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<import("@mui/material/TablePagination").TablePaginationBaseProps, "hidden" | "color" | "page" | "size" | "height" | "translate" | "width" | "padding" | "abbr" | "slot" | "title" | "ref" | "colSpan" | "headers" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "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" | "rowSpan" | "scope" | "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" | "onResize" | "onResizeCapture" | "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" | "align" | "valign" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "count" | "getItemAriaLabel" | "onPageChange" | "rowsPerPage" | "showFirstButton" | "showLastButton" | "labelDisplayedRows" | "labelRowsPerPage" | "onRowsPerPageChange" | "rowsPerPageOptions" | "backIconButtonProps" | "nextIconButtonProps" | "sortDirection" | "ActionsComponent" | "SelectProps">>, "ref"> | Omit<Partial<import("@mui/material/TablePagination").TablePaginationBaseProps & {
     ActionsComponent?: React.ElementType<import("@mui/material/TablePagination/TablePaginationActions").TablePaginationActionsProps> | undefined;
-    backIconButtonProps?: Partial<import("@mui/material").IconButtonProps<"button", {}>> | undefined;
+    backIconButtonProps?: Partial<import("@mui/material").IconButtonProps> | undefined;
     classes?: Partial<import("@mui/material/TablePagination").TablePaginationClasses> | undefined;
     count: number;
     getItemAriaLabel?: ((type: "first" | "last" | "next" | "previous") => string) | undefined;
     labelDisplayedRows?: ((paginationInfo: import("@mui/material/TablePagination").LabelDisplayedRowsArgs) => React.ReactNode) | undefined;
     labelRowsPerPage?: React.ReactNode;
-    nextIconButtonProps?: Partial<import("@mui/material").IconButtonProps<"button", {}>> | undefined;
+    nextIconButtonProps?: Partial<import("@mui/material").IconButtonProps> | undefined;
     onPageChange: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, page: number) => void;
     onRowsPerPageChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> | undefined;
     page: number;
@@ -41,4 +41,4 @@ export declare const GridPagination: React.ForwardRefExoticComponent<(Omit<Parti
     showFirstButton?: boolean | undefined;
     showLastButton?: boolean | undefined;
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@mui/material/TablePagination").TablePaginationBaseProps, "ref"> & React.RefAttributes<React.Component<any, any, any>>, "hidden" | "color" | "page" | "size" | "height" | "translate" | "width" | "padding" | "abbr" | "slot" | "title" | "ref" | "colSpan" | "headers" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "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" | "rowSpan" | "scope" | "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" | "onResize" | "onResizeCapture" | "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" | "align" | "valign" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "count" | "getItemAriaLabel" | "labelDisplayedRows" | "labelRowsPerPage" | "onPageChange" | "onRowsPerPageChange" | "rowsPerPage" | "rowsPerPageOptions" | "showFirstButton" | "showLastButton" | "backIconButtonProps" | "nextIconButtonProps" | "sortDirection" | "ActionsComponent" | "SelectProps">>, "ref">) & React.RefAttributes<HTMLDivElement>>;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("@mui/material/TablePagination").TablePaginationBaseProps, "ref"> & React.RefAttributes<React.Component<any, any, any>>, "hidden" | "color" | "page" | "size" | "height" | "translate" | "width" | "padding" | "abbr" | "slot" | "title" | "ref" | "colSpan" | "headers" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "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" | "rowSpan" | "scope" | "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" | "onResize" | "onResizeCapture" | "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" | "align" | "valign" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "variant" | "count" | "getItemAriaLabel" | "onPageChange" | "rowsPerPage" | "showFirstButton" | "showLastButton" | "labelDisplayedRows" | "labelRowsPerPage" | "onRowsPerPageChange" | "rowsPerPageOptions" | "backIconButtonProps" | "nextIconButtonProps" | "sortDirection" | "ActionsComponent" | "SelectProps">>, "ref">) & React.RefAttributes<HTMLDivElement>>;

package/components/GridRow.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
-  _excluded2 = ["changeReason"];
+  _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -48,7 +48,7 @@ function EmptyCell({
     width
   };
   return /*#__PURE__*/_jsx("div", {
-    className: "MuiDataGrid-cell MuiDataGrid-withBorderColor",
+    className: `${gridClasses.cell} ${gridClasses.withBorderColor}`,
     style: style
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 }
@@ -210,6 +210,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     }
     if (editCellState != null && column.renderEditCell) {
       const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+      // eslint-disable-next-line @typescript-eslint/naming-convention
       const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
       const params = _extends({}, cellParams, {
         row: updatedRow

package/components/cell/GridActionsCellItem.d.ts

@@ -19,11 +19,11 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<{
 } & {
     children?: React.ReactNode;
     classes?: Partial<import("@mui/material/IconButton").IconButtonClasses> | undefined;
-    color?: "inherit" | "default" | "warning" | "error" | "success" | "info" | "primary" | "secondary" | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"inherit" | "default" | "error" | "success" | "info" | "warning" | "primary" | "secondary", import("@mui/material/IconButton").IconButtonPropsColorOverrides> | undefined;
     disabled?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
-    size?: "medium" | "large" | "small" | undefined;
+    size?: import("@mui/types").OverridableStringUnion<"medium" | "large" | "small", import("@mui/material/IconButton").IconButtonPropsSizeOverrides> | undefined;
     sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
 } & Omit<{
     action?: React.Ref<import("@mui/material").ButtonBaseActions> | undefined;

package/components/cell/GridEditDateCell.js

@@ -63,22 +63,25 @@ function GridEditDateCell(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const hasUpdatedEditValueOnMount = React.useRef(false);
+  const parseValueToDate = React.useCallback(value => {
+    if (value === '') {
+      return null;
+    }
+    const [date, time] = value.split('T');
+    const [year, month, day] = date.split('-');
+    const parsedDate = new Date();
+    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    parsedDate.setHours(0, 0, 0, 0);
+    if (time) {
+      const [hours, minutes] = time.split(':');
+      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+    }
+    return parsedDate;
+  }, []);
   const handleChange = React.useCallback(async event => {
     const newFormattedDate = event.target.value;
-    let newParsedDate;
-    if (newFormattedDate === '') {
-      newParsedDate = null;
-    } else {
-      const [date, time] = newFormattedDate.split('T');
-      const [year, month, day] = date.split('-');
-      newParsedDate = new Date();
-      newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
-      newParsedDate.setHours(0, 0, 0, 0);
-      if (time) {
-        const [hours, minutes] = time.split(':');
-        newParsedDate.setHours(Number(hours), Number(minutes), 0, 0);
-      }
-    }
+    const newParsedDate = parseValueToDate(newFormattedDate);
     if (onValueChange) {
       await onValueChange(event, newParsedDate);
     }
@@ -91,7 +94,7 @@ function GridEditDateCell(props) {
       field,
       value: newParsedDate
     }, event);
-  }, [apiRef, field, id, onValueChange]);
+  }, [apiRef, field, id, onValueChange, parseValueToDate]);
   React.useEffect(() => {
     setValueState(state => {
       var _valueTransformed$par, _state$parsed;
@@ -106,8 +109,26 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
+  const handleInputRef = el => {
+    inputRef.current = el;
+    if (meta.unstable_updateValueOnRender && !hasUpdatedEditValueOnMount.current) {
+      const inputValue = inputRef.current.value;
+      const parsedDate = parseValueToDate(inputValue);
+      setValueState({
+        parsed: parsedDate,
+        formatted: inputValue
+      });
+      apiRef.current.setEditCellValue({
+        id,
+        field,
+        value: parsedDate
+      });
+      hasUpdatedEditValueOnMount.current = true;
+    }
+  };
   return /*#__PURE__*/_jsx(StyledInputBase, _extends({
-    inputRef: inputRef,
+    inputRef: handleInputRef,
     fullWidth: true,
     className: classes.root,
     type: isDateTime ? 'datetime-local' : 'date',

package/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -17,7 +17,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
-  var _rootProps$slotProps;
+  var _rootProps$slotProps, _rootProps$slotProps2;
   const {
     colDef,
     open,
@@ -38,22 +38,26 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
   }, [apiRef, colDef.field]);
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
-    children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
-      ref: iconButtonRef,
-      tabIndex: -1,
-      className: classes.button,
-      "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('columnMenuLabel'),
-      size: "small",
-      onClick: handleMenuIconClick,
-      "aria-expanded": open ? 'true' : undefined,
-      "aria-haspopup": "true",
-      "aria-controls": columnMenuId,
-      id: columnMenuButtonId
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
-        fontSize: "small"
-      })
+      enterDelay: 1000
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        ref: iconButtonRef,
+        tabIndex: -1,
+        className: classes.button,
+        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        size: "small",
+        onClick: handleMenuIconClick,
+        "aria-expanded": open ? 'true' : undefined,
+        "aria-haspopup": "true",
+        "aria-controls": columnMenuId,
+        id: columnMenuButtonId
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
     }))
   });
 });

package/components/columnHeaders/GridColumnHeaderTitle.js

@@ -47,14 +47,13 @@ function GridColumnHeaderTitle(props) {
   var _rootProps$slotProps;
   const {
     label,
-    description,
-    columnWidth
+    description
   } = props;
   const rootProps = useGridRootProps();
   const titleRef = React.useRef(null);
   const [tooltip, setTooltip] = React.useState('');
-  React.useEffect(() => {
-    if (!description && titleRef && titleRef.current) {
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef != null && titleRef.current) {
       const isOver = isOverflown(titleRef.current);
       if (isOver) {
         setTooltip(label);
@@ -62,11 +61,12 @@ function GridColumnHeaderTitle(props) {
         setTooltip('');
       }
     }
-  }, [titleRef, columnWidth, description, label]);
+  }, [description, label]);
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: description || tooltip
   }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
       ref: titleRef,
       children: label
     })

package/components/menu/columnMenu/GridColumnHeaderMenu.js

@@ -20,8 +20,10 @@ function GridColumnHeaderMenu({
   const hideMenu = React.useCallback(event => {
     // Prevent triggering the sorting
     event.stopPropagation();
-    apiRef.current.hideColumnMenu();
-  }, [apiRef]);
+    if (!(target != null && target.contains(event.target))) {
+      apiRef.current.hideColumnMenu();
+    }
+  }, [apiRef, target]);
   if (!target) {
     return null;
   }

package/components/menu/columnMenu/GridColumnMenu.d.ts

@@ -3,12 +3,12 @@ import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem
 import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
 import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
 import { GridColumnMenuProps, GridGenericColumnMenuProps } from './GridColumnMenuProps';
-export declare const GRID_COLUMN_MENU_COMPONENTS: {
-    ColumnMenuSortItem: typeof GridColumnMenuSortItem;
-    ColumnMenuFilterItem: typeof GridColumnMenuFilterItem;
-    ColumnMenuColumnsItem: typeof GridColumnMenuColumnsItem;
+export declare const GRID_COLUMN_MENU_SLOTS: {
+    columnMenuSortItem: typeof GridColumnMenuSortItem;
+    columnMenuFilterItem: typeof GridColumnMenuFilterItem;
+    columnMenuColumnsItem: typeof GridColumnMenuColumnsItem;
 };
-export declare const GRID_COLUMN_MENU_COMPONENTS_PROPS: {
+export declare const GRID_COLUMN_MENU_SLOT_PROPS: {
     columnMenuSortItem: {
         displayOrder: number;
     };

package/components/menu/columnMenu/GridColumnMenu.js

@@ -1,20 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultComponents", "defaultComponentsProps", "components", "componentsProps"];
+const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridColumnMenuComponents } from '../../../hooks/features/columnMenu/useGridColumnMenuComponents';
+import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
 import { GridColumnMenuContainer } from './GridColumnMenuContainer';
 import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
 import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
 import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GRID_COLUMN_MENU_COMPONENTS = {
-  ColumnMenuSortItem: GridColumnMenuSortItem,
-  ColumnMenuFilterItem: GridColumnMenuFilterItem,
-  ColumnMenuColumnsItem: GridColumnMenuColumnsItem
+export const GRID_COLUMN_MENU_SLOTS = {
+  columnMenuSortItem: GridColumnMenuSortItem,
+  columnMenuFilterItem: GridColumnMenuFilterItem,
+  columnMenuColumnsItem: GridColumnMenuColumnsItem
 };
-export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
+export const GRID_COLUMN_MENU_SLOT_PROPS = {
   columnMenuSortItem: {
     displayOrder: 10
   },
@@ -27,29 +27,29 @@ export const GRID_COLUMN_MENU_COMPONENTS_PROPS = {
 };
 const GridGenericColumnMenu = /*#__PURE__*/React.forwardRef(function GridGenericColumnMenu(props, ref) {
   const {
-      defaultComponents,
-      defaultComponentsProps,
-      components,
-      componentsProps
+      defaultSlots,
+      defaultSlotProps,
+      slots,
+      slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const orderedComponents = useGridColumnMenuComponents(_extends({}, other, {
-    defaultComponents,
-    defaultComponentsProps,
-    components,
-    componentsProps
+  const orderedSlots = useGridColumnMenuSlots(_extends({}, other, {
+    defaultSlots,
+    defaultSlotProps,
+    slots,
+    slotProps
   }));
   return /*#__PURE__*/_jsx(GridColumnMenuContainer, _extends({
     ref: ref
   }, other, {
-    children: orderedComponents.map(([Component, componentProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, componentProps), index))
+    children: orderedSlots.map(([Component, otherProps], index) => /*#__PURE__*/_jsx(Component, _extends({}, otherProps), index))
   }));
 });
 const GridColumnMenu = /*#__PURE__*/React.forwardRef(function GridColumnMenu(props, ref) {
   return /*#__PURE__*/_jsx(GridGenericColumnMenu, _extends({}, props, {
     ref: ref,
-    defaultComponents: GRID_COLUMN_MENU_COMPONENTS,
-    defaultComponentsProps: GRID_COLUMN_MENU_COMPONENTS_PROPS
+    defaultSlots: GRID_COLUMN_MENU_SLOTS,
+    defaultSlotProps: GRID_COLUMN_MENU_SLOT_PROPS
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
@@ -58,20 +58,20 @@ process.env.NODE_ENV !== "production" ? GridColumnMenu.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
-  /**
-   * `components` could be used to add new and (or) override default column menu items
-   * If you register a nee component you must pass it's `displayOrder` in `componentsProps`
-   * or it will be placed in the end of the list
-   */
-  components: PropTypes.object,
+  hideMenu: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  labelledby: PropTypes.string,
+  open: PropTypes.bool.isRequired,
   /**
    * Could be used to pass new props or override props specific to a column menu component
    * e.g. `displayOrder`
    */
-  componentsProps: PropTypes.object,
-  hideMenu: PropTypes.func.isRequired,
-  id: PropTypes.string,
-  labelledby: PropTypes.string,
-  open: PropTypes.bool.isRequired
+  slotProps: PropTypes.object,
+  /**
+   * `slots` could be used to add new and (or) override default column menu items
+   * If you register a nee component you must pass it's `displayOrder` in `slotProps`
+   * or it will be placed in the end of the list
+   */
+  slots: PropTypes.object
 } : void 0;
 export { GridColumnMenu, GridGenericColumnMenu };

package/components/menu/columnMenu/GridColumnMenuProps.d.ts

@@ -10,5 +10,5 @@ export interface GridColumnMenuContainerProps extends React.HTMLAttributes<HTMLU
 }
 export interface GridGenericColumnMenuProps extends GridColumnMenuRootProps, GridColumnMenuContainerProps {
 }
-export interface GridColumnMenuProps extends Omit<GridGenericColumnMenuProps, 'defaultComponents' | 'defaultComponentsProps'> {
+export interface GridColumnMenuProps extends Omit<GridGenericColumnMenuProps, 'defaultSlots' | 'defaultSlotProps'> {
 }

package/components/panel/GridColumnsPanel.d.ts

@@ -7,6 +7,14 @@ export interface GridColumnsPanelProps extends GridPanelWrapperProps {
     autoFocusSearchField?: boolean;
     disableHideAllButton?: boolean;
     disableShowAllButton?: boolean;
+    /**
+     * Returns the list of togglable columns.
+     * If used, only those columns will be displayed in the panel
+     * which are passed as the return value of the function.
+     * @param {GridColDef[]} columns The `ColDef` list of all columns.
+     * @returns {GridColDef['field'][]} The list of togglable columns' field names.
+     */
+    getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
 }
 declare function GridColumnsPanel(props: GridColumnsPanelProps): JSX.Element;
 declare namespace GridColumnsPanel {