@mui/x-data-grid 8.5.2 → 8.5.3

package/CHANGELOG.md

@@ -5,6 +5,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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 +189,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 +284,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 +4727,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/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/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/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/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/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/toolbarV8/GridToolbar.js

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

package/esm/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/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -31,7 +31,7 @@ export interface GetHeadersParams {
 type OwnerState = DataGridProcessedProps;
 export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
   renderContext: GridColumnsRenderContext;
   leftRenderContext: {

package/esm/hooks/features/dataSource/utils.js

@@ -26,7 +26,7 @@ export class CacheChunkManager {
 
       // split the range into chunks
       const chunkedKeys = [];
-      for (let i = key.start; i < key.end; i += this.chunkSize) {
+      for (let i = key.start; i <= key.end; i += this.chunkSize) {
         const end = Math.min(i + this.chunkSize - 1, key.end);
         chunkedKeys.push(_extends({}, key, {
           start: i,

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.5.2
+ * @mui/x-data-grid v8.5.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/demo/TailwindDemoContainer.d.ts

@@ -7,5 +7,5 @@ interface TailwindDemoContainerProps {
  * WARNING: This is an internal component used in documentation to inject the Tailwind script.
  * Please do not use it in your application.
  */
-export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 export {};

package/esm/models/gridBaseSlots.d.ts

@@ -267,6 +267,7 @@ export type TooltipProps = CommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;
+  disableInteractive?: boolean;
 };
 export type IconProps = CommonProps<SVGSVGElement> & {
   fontSize?: 'small' | 'medium' | 'large' | 'inherit';

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -31,7 +31,7 @@ export interface GetHeadersParams {
 type OwnerState = DataGridProcessedProps;
 export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
   renderContext: GridColumnsRenderContext;
   leftRenderContext: {

package/hooks/features/dataSource/utils.js

@@ -32,7 +32,7 @@ class CacheChunkManager {
 
       // split the range into chunks
       const chunkedKeys = [];
-      for (let i = key.start; i < key.end; i += this.chunkSize) {
+      for (let i = key.start; i <= key.end; i += this.chunkSize) {
         const end = Math.min(i + this.chunkSize - 1, key.end);
         chunkedKeys.push((0, _extends2.default)({}, key, {
           start: i,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.5.2
+ * @mui/x-data-grid v8.5.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/demo/TailwindDemoContainer.d.ts

@@ -7,5 +7,5 @@ interface TailwindDemoContainerProps {
  * WARNING: This is an internal component used in documentation to inject the Tailwind script.
  * Please do not use it in your application.
  */
-export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export declare function TailwindDemoContainer(props: TailwindDemoContainerProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 export {};

package/models/gridBaseSlots.d.ts

@@ -267,6 +267,7 @@ export type TooltipProps = CommonProps & {
   children: React.ReactElement<any, any>;
   enterDelay?: number;
   title: React.ReactNode;
+  disableInteractive?: boolean;
 };
 export type IconProps = CommonProps<SVGSVGElement> & {
   fontSize?: 'small' | 'medium' | 'large' | 'inherit';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.5.2",
+  "version": "8.5.3",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -44,7 +44,7 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.5.0",
-    "@mui/x-internals": "8.5.2"
+    "@mui/x-internals": "8.5.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",