@mui/x-charts 8.5.2 → 8.6.0

package/BarChart/AnimatedBarElement.js

@@ -21,6 +21,8 @@ function AnimatedBarElement(props) {
   const animatedProps = (0, _useAnimateBar.useAnimateBar)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", (0, _extends2.default)({}, other, {
     filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-    opacity: ownerState.isFaded ? 0.3 : 1
+    opacity: ownerState.isFaded ? 0.3 : 1,
+    "data-highlighted": ownerState.isHighlighted || undefined,
+    "data-faded": ownerState.isFaded || undefined
   }, animatedProps));
 }

package/BarChart/BarLabel/BarLabelPlot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { CompletedBarData } from "../types.js";
+import type { ProcessedBarSeriesData } from "../types.js";
 import { BarLabelItemProps } from "./BarLabelItem.js";
 type BarLabelPlotProps = {
-  bars: CompletedBarData[];
+  bars: ProcessedBarSeriesData[];
   skipAnimation?: boolean;
   barLabel?: BarLabelItemProps['barLabel'];
 };

package/BarChart/BarLabel/BarLabelPlot.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _BarLabelItem = require("./BarLabelItem");
+var _barClasses = require("../barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["bars", "skipAnimation"];
 /**
@@ -21,32 +22,39 @@ function BarLabelPlot(props) {
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const classes = (0, _barClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-    children: bars.map(({
-      xOrigin,
-      yOrigin,
-      x,
-      y,
+    children: bars.flatMap(({
       seriesId,
-      dataIndex,
-      color,
-      value,
-      width,
-      height,
-      layout
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
-      seriesId: seriesId,
-      dataIndex: dataIndex,
-      value: value,
-      color: color,
-      xOrigin: xOrigin,
-      yOrigin: yOrigin,
-      x: x,
-      y: y,
-      width: width,
-      height: height,
-      skipAnimation: skipAnimation ?? false,
-      layout: layout ?? 'vertical'
-    }, other), `${seriesId}-${dataIndex}`))
+      data
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.seriesLabels,
+      "data-series": seriesId,
+      children: data.map(({
+        xOrigin,
+        yOrigin,
+        x,
+        y,
+        dataIndex,
+        color,
+        value,
+        width,
+        height,
+        layout
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelItem.BarLabelItem, (0, _extends2.default)({
+        seriesId: seriesId,
+        dataIndex: dataIndex,
+        value: value,
+        color: color,
+        xOrigin: xOrigin,
+        yOrigin: yOrigin,
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        skipAnimation: skipAnimation ?? false,
+        layout: layout ?? 'vertical'
+      }, other), dataIndex))
+    }, seriesId))
   });
 }

package/BarChart/BarPlot.js

@@ -22,6 +22,7 @@ var _checkScaleErrors = require("./checkScaleErrors");
 var _useBarSeries = require("../hooks/useBarSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _barClasses = require("./barClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];
 /**
@@ -75,13 +76,13 @@ const useAggregatedData = () => {
   const defaultYAxisId = yAxisIds[0];
   const masks = {};
   const data = stackingGroups.flatMap(({
-    ids: groupIds
+    ids: seriesIds
   }, groupIndex) => {
     const xMin = drawingArea.left;
     const xMax = drawingArea.left + drawingArea.width;
     const yMin = drawingArea.top;
     const yMax = drawingArea.top + drawingArea.height;
-    return groupIds.flatMap(seriesId => {
+    return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisId];
@@ -107,7 +108,7 @@ const useAggregatedData = () => {
         data: currentSeriesData,
         layout
       } = series[seriesId];
-      return baseScaleConfig.data.map((baseValue, dataIndex) => {
+      const seriesDataPoints = baseScaleConfig.data.map((baseValue, dataIndex) => {
         if (currentSeriesData[dataIndex] == null) {
           return null;
         }
@@ -156,6 +157,10 @@ const useAggregatedData = () => {
         mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
         return result;
       }).filter(rectangle => rectangle !== null);
+      return {
+        seriesId,
+        data: seriesDataPoints
+      };
     });
   });
   return {
@@ -198,7 +203,9 @@ function BarPlot(props) {
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const withoutBorderRadius = !borderRadius || borderRadius <= 0;
+  const classes = (0, _barClasses.useUtilityClasses)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(BarPlotRoot, {
+    className: classes.root,
     children: [!withoutBorderRadius && masksData.map(({
       id,
       x,
@@ -223,45 +230,53 @@ function BarPlot(props) {
       }, id);
     }), completedData.map(({
       seriesId,
-      dataIndex,
-      color,
-      maskId,
-      layout,
-      x,
-      xOrigin,
-      y,
-      yOrigin,
-      width,
-      height
+      data
     }) => {
-      const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
-        id: seriesId,
-        dataIndex: dataIndex,
-        color: color,
-        skipAnimation: skipAnimation ?? false,
-        layout: layout ?? 'vertical',
-        x: x,
-        xOrigin: xOrigin,
-        y: y,
-        yOrigin: yOrigin,
-        width: width,
-        height: height
-      }, other, {
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'bar',
-            seriesId,
-            dataIndex
-          });
-        })
-      }), `${seriesId}-${dataIndex}`);
-      if (withoutBorderRadius) {
-        return barElement;
-      }
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-        clipPath: `url(#${maskId})`,
-        children: barElement
-      }, `${seriesId}-${dataIndex}`);
+        "data-series": seriesId,
+        className: classes.series,
+        children: data.map(({
+          dataIndex,
+          color,
+          maskId,
+          layout,
+          x,
+          xOrigin,
+          y,
+          yOrigin,
+          width,
+          height
+        }) => {
+          const barElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarElement.BarElement, (0, _extends2.default)({
+            id: seriesId,
+            dataIndex: dataIndex,
+            color: color,
+            skipAnimation: skipAnimation ?? false,
+            layout: layout ?? 'vertical',
+            x: x,
+            xOrigin: xOrigin,
+            y: y,
+            yOrigin: yOrigin,
+            width: width,
+            height: height
+          }, other, {
+            onClick: onItemClick && (event => {
+              onItemClick(event, {
+                type: 'bar',
+                seriesId,
+                dataIndex
+              });
+            })
+          }), dataIndex);
+          if (withoutBorderRadius) {
+            return barElement;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+            clipPath: `url(#${maskId})`,
+            children: barElement
+          }, dataIndex);
+        })
+      }, seriesId);
     }), barLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarLabelPlot.BarLabelPlot, (0, _extends2.default)({
       bars: completedData,
       skipAnimation: skipAnimation,

package/BarChart/barClasses.d.ts

@@ -0,0 +1,12 @@
+export interface BarClasses {
+  /** Styles applied to the bar plot element. */
+  root: string;
+  /** Styles applied to the group surrounding a series' bar elements. */
+  series: string;
+  /** Styles applied to the group surrounding a series' labels. */
+  seriesLabels: string;
+}
+export type BarClassKey = keyof BarClasses;
+export declare function getBarUtilityClass(slot: string): string;
+export declare const barClasses: BarClasses;
+export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"root" | "series" | "seriesLabels", string>;

package/BarChart/barClasses.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.barClasses = void 0;
+exports.getBarUtilityClass = getBarUtilityClass;
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getBarUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiBar', slot);
+}
+const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBar', ['root', 'series', 'seriesLabels']);
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    series: ['series'],
+    seriesLabels: ['seriesLabels']
+  };
+  return (0, _composeClasses.default)(slots, getBarUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/BarChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./BarChart.js";
 export * from "./BarPlot.js";
 export * from "./BarElement.js";
 export * from "./BarLabel/index.js";
-export * from "./barElementClasses.js";
+export * from "./barElementClasses.js";
+export { barClasses, getBarUtilityClass } from "./barClasses.js";
+export type { BarClassKey, BarClasses } from "./barClasses.js";

package/BarChart/index.js

@@ -3,9 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  barClasses: true,
+  getBarUtilityClass: true
+};
+Object.defineProperty(exports, "barClasses", {
+  enumerable: true,
+  get: function () {
+    return _barClasses.barClasses;
+  }
+});
+Object.defineProperty(exports, "getBarUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _barClasses.getBarUtilityClass;
+  }
+});
 var _BarChart = require("./BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +34,7 @@ Object.keys(_BarChart).forEach(function (key) {
 var _BarPlot = require("./BarPlot");
 Object.keys(_BarPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +46,7 @@ Object.keys(_BarPlot).forEach(function (key) {
 var _BarElement = require("./BarElement");
 Object.keys(_BarElement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarElement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +58,7 @@ Object.keys(_BarElement).forEach(function (key) {
 var _BarLabel = require("./BarLabel");
 Object.keys(_BarLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +70,7 @@ Object.keys(_BarLabel).forEach(function (key) {
 var _barElementClasses = require("./barElementClasses");
 Object.keys(_barElementClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _barElementClasses[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -57,4 +78,5 @@ Object.keys(_barElementClasses).forEach(function (key) {
       return _barElementClasses[key];
     }
   });
-});
+});
+var _barClasses = require("./barClasses");

package/BarChart/types.d.ts

@@ -9,7 +9,11 @@ export type AnimationData = {
   xOrigin: number;
   layout: BarSeriesType['layout'];
 };
-export interface CompletedBarData extends AnimationData {
+export interface ProcessedBarSeriesData {
+  seriesId: SeriesId;
+  data: ProcessedBarData[];
+}
+export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;

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/ChartsLegend/ChartsLegend.d.ts

@@ -22,6 +22,7 @@ export interface ChartsLegendProps {
   classes?: Partial<ChartsLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ChartsLegend };

package/ChartsLegend/ChartsLegend.js

@@ -87,6 +87,8 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
     ownerState: props,
     children: data.items.map((item, i) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+        className: classes?.item,
+        "data-series": item.id,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,

package/ChartsLegend/ContinuousColorLegend.d.ts

@@ -51,6 +51,7 @@ export interface ContinuousColorLegendProps extends ColorLegendSelector, AppendK
   classes?: Partial<ContinuousColorLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ContinuousColorLegend };

package/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -37,6 +37,7 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependK
   classes?: Partial<PiecewiseColorLegendClasses>;
   className?: string;
   sx?: SxProps<Theme>;
+  tabIndex?: number;
 }
 declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { PiecewiseColorLegend };

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -3,6 +3,8 @@ import type { ChartsLegendSlotExtension } from "./chartsLegend.types.js";
 export interface ChartsLegendClasses {
   /** Styles applied to the root element. */
   root: string;
+  /** Styles applied to the list item around each series in the legend. */
+  item: string;
   /** Styles applied to a series element. */
   series: string;
   /** Styles applied to series mark element. */
@@ -14,5 +16,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "series", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/ChartsLegend/chartsLegendClasses.js

@@ -18,6 +18,7 @@ const useUtilityClasses = props => {
   } = props;
   const slots = {
     root: ['root', direction],
+    item: ['item'],
     mark: ['mark'],
     label: ['label'],
     series: ['series']
@@ -25,4 +26,4 @@ const useUtilityClasses = props => {
   return (0, _composeClasses.default)(slots, getLegendUtilityClass, classes);
 };
 exports.useUtilityClasses = useUtilityClasses;
-const legendClasses = exports.legendClasses = (0, _generateUtilityClasses.default)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);
+const legendClasses = exports.legendClasses = (0, _generateUtilityClasses.default)('MuiChartsLegend', ['root', 'item', 'series', 'mark', 'label', 'vertical', 'horizontal']);