@mui/x-data-grid 8.5.2 → 8.6.0

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.6.0
+
+_Jun 27, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add export menu to charts toolbar
+- 📅 Add `usePickerAdapter` hook to access the date adapter.
+
+  You can use the adapter in your custom components if you need them to work with multiple date libraries — [Learn more](https://mui.com/x/react-date-pickers/custom-components/#access-date-adapter).
+- 🌎 Improve Danish (da-DK) locale
+- 🌎 Improve German (de-DE) locale
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimka123
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.6.0`
+
+- [DataGrid] Fix `label` type in `GridActionsCellItem` type (#18175) @sai6855
+- [DataGrid] Fix grid menu not closing when pressing escape/tab (#18300) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18428) @ShahrazH
+- [l10n] Improve German (de-DE) locale (#18388) @omalyutin
+
+#### `@mui/x-data-grid-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.6.0`, plus:
+
+- [DataGridPro] Fix lazy loading params calculated from rendering context (#18460) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.6.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.6.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.6.0`
+
+- [pickers] Add `usePickerAdapter` hook (#18457) @LukasTy
+- [pickers] Fix to use latest `value` when updating `lastCommittedValue` in internal state (#18518) @LukasTy
+- [pickers] Use `usePickerAdapter` hook internally instead of `useUtils` (#18465) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.6.0`
+
+- [charts] Add `data-series` to charts legend item (#18414) @bernardobelchior
+- [charts] Add `data-series` to bar charts (#18413) @bernardobelchior
+- [charts] Add `data-series` to elements of line chart (#18409) @bernardobelchior
+- [charts] Add `data-series` to pie charts (#18432) @bernardobelchior
+- [charts] Fix missing key in bar plot (#18502) @bernardobelchior
+- [charts] Split axis utils from main file (#18517) @JCQuintas
+- [charts] Improve touch behavior for polar axis (#18531) @JCQuintas
+- [charts] Add `isElementInside` helper (#18530) @JCQuintas
+
+#### `@mui/x-charts-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.6.0`, plus:
+
+- [charts-pro] Add export menu to charts toolbar (#18210) @bernardobelchior
+- [charts-pro] Fix export docs mentioning tooltip instead of toolbar (#18490) @bernardobelchior
+- [charts-pro] Fix iframe not being removed after print export (#18500) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.6.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.6.0`, plus:
+
+- [tree view pro] Fix theme augmentation (#18437) @LukasTy
+
+### Codemod
+
+#### `@mui/x-codemod@8.6.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Document `GridRenderContext` (#18492) @arminmeh
+- [docs] Prevent stale rows to appear on sort and filter change in the lazy loading demo (#18461) @arminmeh
+- [docs][pickers] Update action bar demo to use the `nextOrAccept` action (#18505) @LukasTy
+- [docs] Update indeterminate checkbox section in migration guide (#18229) @michelengelen
+- [docs] Data source nested pagination recipe (#14777) @MBilalShafi
+
+### Core
+
+- [core] Avoid json stringify whole window object (#18512) @vadimka123
+
+### Miscellaneous
+
+- [code-infra] Dynamically get pickers adapters dependencies versions (#18446) @JCQuintas
+- [infra] Adjust inquirer version and usage (#18495) @michelengelen
+- [infra] Use `String.raw` for creating the remote regex (#18462) @michelengelen
+
+## 8.5.3
+
+_Jun 19, 2025_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+Special thanks go out to the community members for their valuable contributions:
+@alisasanib, @arminmeh, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @flaviendelangle, @JCQuintas, @LukasTy, @MBilalShafi, @oliviertassinari
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.5.3`
+
+- [DataGrid] Fix export menu button tooltip being interactive when menu is open (#18327) @bernardobelchior
+- [DataGrid] Fix column menu scroll close (#18065) @alisasanib
+- [DataGrid] Fix page size issue with data source (#18419) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.5.3`, plus:
+
+- [DataGridPro] Ignore missing `rowCount` response when new children are fetched with the data source (#17711) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.5.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.5.3`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.5.3`
+
+- [pickers] Add `inputSizeSmall` to classes interface (#18242) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.5.3`.
+
+### Charts
+
+#### `@mui/x-charts@8.5.3`
+
+- [charts] Add item class to list item around each series in legend (#18411) @bernardobelchior
+- [charts] Allow `tabIndex` in surface and legend (#18344) @JCQuintas
+- [charts] Explore selector typing (#18362) @alexfauquette
+- [charts] Fix highlight with number ids (#18423) @alexfauquette
+- [charts] Make scatter chart use data attributes (#18048) @alexfauquette
+
+#### `@mui/x-charts-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.5.3`, plus:
+
+- [charts-pro] Add data-series to elements of funnel chart (#18067) @JCQuintas
+- [charts-pro] Hide values outside minStart and maxEnd in zoom slider (#18336) @bernardobelchior
+- [charts-pro] Fix `FunnelChart` label positioning with different curves (#18354) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.5.3`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.5.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.5.3`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.5.3`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix 404 in charts docs (#18440) @alexfauquette
+- [docs][pickers] Fix adapter version resolving when opening demo to edit (#18363) @LukasTy
+
+### Core
+
+- [core] Fix pnpm valelint error (#18420) @oliviertassinari
+
+### Miscellaneous
+
+- [code-infra] Add back a `Playwright` renovate group (#18397) @LukasTy
+- [code-infra] Setup `CODEOWNERS` for charts repositories (#18418) @JCQuintas
+- [code-infra] Strengthen `URL` usage for test config (#18444) @LukasTy
+- [code-infra] Use `vitest` bundled types (#17758) @JCQuintas
+- [infra] Stabilise tests by removing babel and plugins from vitest (#18341) @JCQuintas
+- [infra] Add automated release PR creation script (#18345) @michelengelen
+
 ## 8.5.2
 
 _Jun 12, 2025_
@@ -94,7 +296,7 @@ Same changes as in `@mui/x-tree-view@8.5.2`.
 - [code-infra] Revert `React` to `19.0.0` (#18265) @LukasTy
 - [code-infra] Use `catalog` for reused dependencies (#18302) @LukasTy
 - [infra] Remove unused karma/mocha deps and files (#18340) @JCQuintas
-- [infra] Update github label references to use 'scope' instead of 'component' (#18260) @michelengelen
+- [infra] Update GitHub label references to use 'scope' instead of 'component' (#18260) @michelengelen
 - [infra] Use a single browser server in CI (#18230) @JCQuintas
 
 ## 8.5.1
@@ -189,15 +391,6 @@ Same changes as in `@mui/x-tree-view@8.5.1`.
 
 ### Core
 
-- chore(deps): bump @next/eslint-plugin-next to 15.3.3 (#18155) @renovate[bot]
-- chore(deps): bump @types/lodash to ^4.17.17 (#17990) @renovate[bot]
-- chore(deps): bump babel (#18157) @renovate[bot]
-- chore(deps): bump eslint to ^9.28.0 (#17352) @renovate[bot]
-- chore(deps): bump material ui (#17802) @renovate[bot]
-- chore(deps): bump next to ^15.3.3 (#18159) @renovate[bot]
-- chore(deps): bump ossf/scorecard-action action to v2.4.2 (#18160) @renovate[bot]
-- chore(deps): bump react-router to ^7.6.1 (#18162) @renovate[bot]
-- chore(deps): bump yargs to ^18.0.0 (#18169) @renovate[bot]
 - [code-infra] Different approach to console testing for `processRowUpdate` (#18213) @JCQuintas
 - [code-infra] Fix act warnings in DataGrid/toolbar (#18207) @JCQuintas
 - [code-infra] Remove `istanbul` references (#18194) @JCQuintas
@@ -4641,7 +4834,6 @@ No changes since `@mui/x-charts@7.22.2`.
 - [docs] Add `next` version links (#15423) @LukasTy
 - [docs] Use the `loading` state in the demos (#15538) @cherniavskii
 - [docs] Add data caching to lazy loaded detail panel demo (#15506) @cherniavskii
-
 - [code-infra] Tentative fix for Argos flaky screenshot tests (#15399) @JCQuintas
 - [docs-infra] Transpile `.ts` demo files (#15421) @KenanYusuf
 - [core] Clarify release version bump strategy (#15536) @cherniavskii

package/components/cell/GridActionsCell.js

@@ -148,14 +148,6 @@ function GridActionsCell(props) {
       setFocusedButtonIndex(newIndex);
     }
   };
-  const handleListKeyDown = event => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    }
-    if (['Tab', 'Escape'].includes(event.key)) {
-      hideMenu();
-    }
-  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     role: "menu",
     ref: rootRef,
@@ -192,7 +184,6 @@ function GridActionsCell(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, {
         id: menuId,
         className: _gridClasses.gridClasses.menuList,
-        onKeyDown: handleListKeyDown,
         "aria-labelledby": buttonId,
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {

package/components/cell/GridActionsCellItem.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridActionsCellItemCommonProps {
-  label: string;
   icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
   component?: React.ElementType;
@@ -9,6 +8,7 @@ interface GridActionsCellItemCommonProps {
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
   showInMenu?: false;
   icon: React.ReactElement<any>;
+  label: string;
 } & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
   showInMenu: true;
   /**
@@ -17,6 +17,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
    */
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
+  label: React.ReactNode;
 } & Omit<GridSlotProps['baseMenuItem'], 'component'>));
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<((GridActionsCellItemCommonProps & {
   showInMenu: true;
@@ -26,6 +27,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
    */
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
+  label: React.ReactNode;
 } & Omit<React.DOMAttributes<HTMLElement> & {
   [k: `aria-${string}`]: any;
   [k: `data-${string}`]: any;
@@ -44,6 +46,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
 } & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) | Omit<GridActionsCellItemCommonProps & {
   showInMenu?: false;
   icon: React.ReactElement<any>;
+  label: string;
 } & Omit<Omit<import("../../models/gridBaseSlots.js").ButtonProps, "startIcon"> & {
   label?: string;
   color?: "default" | "inherit" | "primary";

package/components/cell/GridActionsCellItem.js

@@ -75,7 +75,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   component: _propTypes.default.elementType,
   disabled: _propTypes.default.bool,
   icon: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.element, _propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool]),
-  label: _propTypes.default.string.isRequired,
+  label: _propTypes.default.node,
   showInMenu: _propTypes.default.bool,
   style: _propTypes.default.object
 } : void 0;

package/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,4 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;

package/components/menu/GridMenu.d.ts

@@ -4,7 +4,7 @@ type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'lef
 export interface GridMenuProps extends Pick<PopperProps, 'className' | 'onExited'> {
   open: boolean;
   target: HTMLElement | null;
-  onClose: (event?: Event) => void;
+  onClose: (event?: React.KeyboardEvent | MouseEvent | TouchEvent) => void;
   position?: MenuPosition;
   children: React.ReactNode;
 }

package/components/menu/GridMenu.js

@@ -15,6 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _styles = require("@mui/material/styles");
+var _keyboardUtils = require("../../utils/keyboardUtils");
 var _cssVariables = require("../../constants/cssVariables");
 var _context = require("../../utils/css/context");
 var _gridClasses = require("../../constants/gridClasses");
@@ -78,6 +79,11 @@ function GridMenu(props) {
     }
     onClose(event);
   };
+  const handleKeyDown = event => {
+    if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
+      onClose(event);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMenuRoot, (0, _extends2.default)({
     as: rootProps.slots.basePopper,
     className: (0, _clsx.default)(classes.root, className, variablesClass),
@@ -88,7 +94,8 @@ function GridMenu(props) {
     placement: position,
     onClickAway: handleClickAway,
     onExited: onExited,
-    clickAwayMouseEvent: "onMouseDown"
+    clickAwayMouseEvent: "onMouseDown",
+    onKeyDown: handleKeyDown
   }, other, rootProps.slotProps?.basePopper, {
     children: children
   }));

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -22,6 +22,12 @@ const _excluded = ["hideMenu", "colDef", "id", "labelledby", "className", "child
 const StyledMenuList = (0, _styles.styled)(_assert.NotRendered)(() => ({
   minWidth: 248
 }));
+function handleMenuScrollCapture(event) {
+  if (!event.currentTarget.contains(event.target)) {
+    return;
+  }
+  event.stopPropagation();
+}
 const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRef.forwardRef)(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
@@ -47,6 +53,8 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = (0, _forwardRe
     className: (0, _clsx.default)(_gridClasses.gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
+    onWheel: handleMenuScrollCapture,
+    onTouchMove: handleMenuScrollCapture,
     autoFocus: open
   }, other, {
     ref: ref,

package/components/toolbar/GridToolbarDensitySelector.js

@@ -13,7 +13,6 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
 var _densitySelector = require("../../hooks/features/density/densitySelector");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridMenu = require("../menu/GridMenu");
@@ -71,14 +70,6 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
     apiRef.current.setDensity(newDensity);
     setOpen(false);
   };
-  const handleListKeyDown = event => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    }
-    if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
-      setOpen(false);
-    }
-  };
 
   // Disable the button if the corresponding is disabled
   if (rootProps.disableDensitySelector) {
@@ -117,7 +108,6 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = (0, _for
         id: densityMenuId,
         className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": densityButtonId,
-        onKeyDown: handleListKeyDown,
         autoFocusItem: open,
         children: densityElements
       })

package/components/toolbar/GridToolbarExportContainer.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -37,14 +36,6 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
     buttonProps.onClick?.(event);
   };
   const handleMenuClose = () => setOpen(false);
-  const handleListKeyDown = event => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    }
-    if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
-      handleMenuClose();
-    }
-  };
   if (children == null) {
     return null;
   }
@@ -75,7 +66,6 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = (0, _for
         id: exportMenuId,
         className: _gridClasses.gridClasses.menuList,
         "aria-labelledby": exportButtonId,
-        onKeyDown: handleListKeyDown,
         autoFocusItem: open,
         children: React.Children.map(children, child => {
           if (! /*#__PURE__*/React.isValidElement(child)) {

package/components/toolbarV8/GridToolbar.js

@@ -131,6 +131,7 @@ function GridToolbar(props) {
     }), additionalItems, showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
         title: apiRef.current.getLocaleText('toolbarExport'),
+        disableInteractive: exportMenuOpen,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarButton.ToolbarButton, {
           ref: exportMenuTriggerRef,
           id: exportMenuTriggerId,

package/components/toolbarV8/Toolbar.d.ts

@@ -6,7 +6,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/esm/components/cell/GridActionsCell.js

@@ -139,14 +139,6 @@ function GridActionsCell(props) {
       setFocusedButtonIndex(newIndex);
     }
   };
-  const handleListKeyDown = event => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    }
-    if (['Tab', 'Escape'].includes(event.key)) {
-      hideMenu();
-    }
-  };
   return /*#__PURE__*/_jsxs("div", _extends({
     role: "menu",
     ref: rootRef,
@@ -183,7 +175,6 @@ function GridActionsCell(props) {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseMenuList, {
         id: menuId,
         className: gridClasses.menuList,
-        onKeyDown: handleListKeyDown,
         "aria-labelledby": buttonId,
         autoFocusItem: true,
         children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {

package/esm/components/cell/GridActionsCellItem.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { GridSlotProps, GridBaseIconProps } from "../../models/gridSlotsComponentsProps.js";
 interface GridActionsCellItemCommonProps {
-  label: string;
   icon?: React.JSXElementConstructor<GridBaseIconProps> | React.ReactNode;
   /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
   component?: React.ElementType;
@@ -9,6 +8,7 @@ interface GridActionsCellItemCommonProps {
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
   showInMenu?: false;
   icon: React.ReactElement<any>;
+  label: string;
 } & Omit<GridSlotProps['baseIconButton'], 'component'>) | ({
   showInMenu: true;
   /**
@@ -17,6 +17,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
    */
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
+  label: React.ReactNode;
 } & Omit<GridSlotProps['baseMenuItem'], 'component'>));
 declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCellItemProps> | React.ForwardRefExoticComponent<((GridActionsCellItemCommonProps & {
   showInMenu: true;
@@ -26,6 +27,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
    */
   closeMenuOnClick?: boolean;
   closeMenu?: () => void;
+  label: React.ReactNode;
 } & Omit<React.DOMAttributes<HTMLElement> & {
   [k: `aria-${string}`]: any;
   [k: `data-${string}`]: any;
@@ -44,6 +46,7 @@ declare const GridActionsCellItem: React.ForwardRefExoticComponent<GridActionsCe
 } & import("@mui/x-data-grid").BaseMenuItemPropsOverrides, "component">) | Omit<GridActionsCellItemCommonProps & {
   showInMenu?: false;
   icon: React.ReactElement<any>;
+  label: string;
 } & Omit<Omit<import("../../models/gridBaseSlots.js").ButtonProps, "startIcon"> & {
   label?: string;
   color?: "default" | "inherit" | "primary";

package/esm/components/cell/GridActionsCellItem.js

@@ -67,7 +67,7 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   component: PropTypes.elementType,
   disabled: PropTypes.bool,
   icon: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.element, PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node,
   showInMenu: PropTypes.bool,
   style: PropTypes.object
 } : void 0;

package/esm/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,4 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;

package/esm/components/menu/GridMenu.d.ts

@@ -4,7 +4,7 @@ type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'lef
 export interface GridMenuProps extends Pick<PopperProps, 'className' | 'onExited'> {
   open: boolean;
   target: HTMLElement | null;
-  onClose: (event?: Event) => void;
+  onClose: (event?: React.KeyboardEvent | MouseEvent | TouchEvent) => void;
   position?: MenuPosition;
   children: React.ReactNode;
 }

package/esm/components/menu/GridMenu.js

@@ -8,6 +8,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import { styled } from '@mui/material/styles';
+import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { vars } from "../../constants/cssVariables.js";
 import { useCSSVariablesClass } from "../../utils/css/context.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
@@ -70,6 +71,11 @@ function GridMenu(props) {
     }
     onClose(event);
   };
+  const handleKeyDown = event => {
+    if (isHideMenuKey(event.key)) {
+      onClose(event);
+    }
+  };
   return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
     as: rootProps.slots.basePopper,
     className: clsx(classes.root, className, variablesClass),
@@ -80,7 +86,8 @@ function GridMenu(props) {
     placement: position,
     onClickAway: handleClickAway,
     onExited: onExited,
-    clickAwayMouseEvent: "onMouseDown"
+    clickAwayMouseEvent: "onMouseDown",
+    onKeyDown: handleKeyDown
   }, other, rootProps.slotProps?.basePopper, {
     children: children
   }));

package/esm/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -14,6 +14,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(NotRendered)(() => ({
   minWidth: 248
 }));
+function handleMenuScrollCapture(event) {
+  if (!event.currentTarget.contains(event.target)) {
+    return;
+  }
+  event.stopPropagation();
+}
 const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(props, ref) {
   const {
       hideMenu,
@@ -39,6 +45,8 @@ const GridColumnMenuContainer = forwardRef(function GridColumnMenuContainer(prop
     className: clsx(gridClasses.menuList, className),
     "aria-labelledby": labelledby,
     onKeyDown: handleListKeyDown,
+    onWheel: handleMenuScrollCapture,
+    onTouchMove: handleMenuScrollCapture,
     autoFocus: open
   }, other, {
     ref: ref,

package/esm/components/toolbar/GridToolbarDensitySelector.js

@@ -5,7 +5,6 @@ import useId from '@mui/utils/useId';
 import useForkRef from '@mui/utils/useForkRef';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
-import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { GridMenu } from "../menu/GridMenu.js";
@@ -63,14 +62,6 @@ const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelecto
     apiRef.current.setDensity(newDensity);
     setOpen(false);
   };
-  const handleListKeyDown = event => {
-    if (event.key === 'Tab') {
-      event.preventDefault();
-    }
-    if (isHideMenuKey(event.key)) {
-      setOpen(false);
-    }
-  };
 
   // Disable the button if the corresponding is disabled
   if (rootProps.disableDensitySelector) {
@@ -109,7 +100,6 @@ const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelecto
         id: densityMenuId,
         className: gridClasses.menuList,
         "aria-labelledby": densityButtonId,
-        onKeyDown: handleListKeyDown,
         autoFocusItem: open,
         children: densityElements
       })