@mui/x-charts 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/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,7 @@ 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,
         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']);

package/ChartsSurface/ChartsSurface.d.ts

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps {
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
   title?: string;
   desc?: string;

package/ScatterChart/Scatter.d.ts

@@ -3,6 +3,7 @@ import { ScatterMarkerSlotProps, ScatterMarkerSlots } from "./ScatterMarker.type
 import { DefaultizedScatterSeriesType, ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { D3Scale } from "../models/axis.js";
 import { ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
@@ -15,6 +16,7 @@ export interface ScatterProps {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  classes?: Partial<ScatterClasses>;
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;
 }

package/ScatterChart/Scatter.js

@@ -20,6 +20,7 @@ var _useItemHighlightedGetter = require("../hooks/useItemHighlightedGetter");
 var _useChartVoronoi = require("../internals/plugins/featurePlugins/useChartVoronoi");
 var _ChartProvider = require("../context/ChartProvider");
 var _ScatterMarker = require("./ScatterMarker");
+var _scatterClasses = require("./scatterClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["ownerState"];
 /**
@@ -40,6 +41,7 @@ function Scatter(props) {
     color,
     colorGetter,
     onItemClick,
+    classes: inClasses,
     slots,
     slotProps
   } = props;
@@ -95,7 +97,10 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded);
+  const classes = (0, _scatterClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+    "data-series": series.id,
+    className: classes.root,
     children: cleanData.map((dataPoint, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Marker, (0, _extends2.default)({
       dataIndex: dataPoint.dataIndex,
       color: dataPoint.color,
@@ -107,7 +112,9 @@ function Scatter(props) {
         type: 'scatter',
         seriesId: series.id,
         dataIndex: dataPoint.dataIndex
-      }))
+      })),
+      "data-highlighted": dataPoint.isHighlighted || undefined,
+      "data-faded": dataPoint.isFaded || undefined
     }, interactionItemProps[i], markerProps), dataPoint.id ?? dataPoint.dataIndex))
   });
 }
@@ -116,6 +123,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
   colorGetter: _propTypes.default.func,
   /**

package/ScatterChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./ScatterChart.js";
 export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
-export * from "./ScatterMarker.js";
+export * from "./ScatterMarker.js";
+export type { ScatterClasses } from "./scatterClasses.js";
+export { scatterClasses } from "./scatterClasses.js";

package/ScatterChart/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  scatterClasses: true
+};
+Object.defineProperty(exports, "scatterClasses", {
+  enumerable: true,
+  get: function () {
+    return _scatterClasses.scatterClasses;
+  }
+});
 var _ScatterChart = require("./ScatterChart");
 Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_ScatterChart).forEach(function (key) {
 var _ScatterPlot = require("./ScatterPlot");
 Object.keys(_ScatterPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterPlot[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_ScatterPlot).forEach(function (key) {
 var _Scatter = require("./Scatter");
 Object.keys(_Scatter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Scatter[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_Scatter).forEach(function (key) {
 var _ScatterMarker = require("./ScatterMarker.types");
 Object.keys(_ScatterMarker).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterMarker[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_ScatterMarker).forEach(function (key) {
 var _ScatterMarker2 = require("./ScatterMarker");
 Object.keys(_ScatterMarker2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterMarker2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -57,4 +71,5 @@ Object.keys(_ScatterMarker2).forEach(function (key) {
       return _ScatterMarker2[key];
     }
   });
-});
+});
+var _scatterClasses = require("./scatterClasses");

package/ScatterChart/scatterClasses.d.ts

@@ -0,0 +1,8 @@
+export interface ScatterClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ScatterClassKey = keyof ScatterClasses;
+export declare function getScatterUtilityClass(slot: string): string;
+export declare const scatterClasses: ScatterClasses;
+export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;

package/ScatterChart/scatterClasses.js

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

package/esm/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/esm/ChartsLegend/ChartsLegend.js

@@ -80,6 +80,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     ownerState: props,
     children: data.items.map((item, i) => {
       return /*#__PURE__*/_jsx("li", {
+        className: classes?.item,
         children: /*#__PURE__*/_jsxs(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,

package/esm/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/esm/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/esm/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/esm/ChartsLegend/chartsLegendClasses.js

@@ -11,10 +11,11 @@ export const useUtilityClasses = props => {
   } = props;
   const slots = {
     root: ['root', direction],
+    item: ['item'],
     mark: ['mark'],
     label: ['label'],
     series: ['series']
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'vertical', 'horizontal']);
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'item', 'series', 'mark', 'label', 'vertical', 'horizontal']);

package/esm/ChartsSurface/ChartsSurface.d.ts

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
-export interface ChartsSurfaceProps {
+export interface ChartsSurfaceProps extends Omit<React.SVGProps<SVGSVGElement>, 'id' | 'children' | 'className' | 'height' | 'width' | 'cx' | 'cy' | 'viewBox' | 'color' | 'ref'> {
   className?: string;
   title?: string;
   desc?: string;

package/esm/ScatterChart/Scatter.d.ts

@@ -3,6 +3,7 @@ import { ScatterMarkerSlotProps, ScatterMarkerSlots } from "./ScatterMarker.type
 import { DefaultizedScatterSeriesType, ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { D3Scale } from "../models/axis.js";
 import { ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;
@@ -15,6 +16,7 @@ export interface ScatterProps {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: (event: React.MouseEvent<SVGElement, MouseEvent>, scatterItemIdentifier: ScatterItemIdentifier) => void;
+  classes?: Partial<ScatterClasses>;
   slots?: ScatterSlots;
   slotProps?: ScatterSlotProps;
 }

package/esm/ScatterChart/Scatter.js

@@ -14,6 +14,7 @@ import { useItemHighlightedGetter } from "../hooks/useItemHighlightedGetter.js";
 import { selectorChartsVoronoiIsVoronoiEnabled } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { ScatterMarker } from "./ScatterMarker.js";
+import { useUtilityClasses } from "./scatterClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -33,6 +34,7 @@ function Scatter(props) {
     color,
     colorGetter,
     onItemClick,
+    classes: inClasses,
     slots,
     slotProps
   } = props;
@@ -88,7 +90,10 @@ function Scatter(props) {
       ownerState: {}
     }),
     markerProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded);
+  const classes = useUtilityClasses(inClasses);
   return /*#__PURE__*/_jsx("g", {
+    "data-series": series.id,
+    className: classes.root,
     children: cleanData.map((dataPoint, i) => /*#__PURE__*/_jsx(Marker, _extends({
       dataIndex: dataPoint.dataIndex,
       color: dataPoint.color,
@@ -100,7 +105,9 @@ function Scatter(props) {
         type: 'scatter',
         seriesId: series.id,
         dataIndex: dataPoint.dataIndex
-      }))
+      })),
+      "data-highlighted": dataPoint.isHighlighted || undefined,
+      "data-faded": dataPoint.isFaded || undefined
     }, interactionItemProps[i], markerProps), dataPoint.id ?? dataPoint.dataIndex))
   });
 }
@@ -109,6 +116,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  classes: PropTypes.object,
   color: PropTypes.string.isRequired,
   colorGetter: PropTypes.func,
   /**

package/esm/ScatterChart/index.d.ts

@@ -2,4 +2,6 @@ export * from "./ScatterChart.js";
 export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
-export * from "./ScatterMarker.js";
+export * from "./ScatterMarker.js";
+export type { ScatterClasses } from "./scatterClasses.js";
+export { scatterClasses } from "./scatterClasses.js";

package/esm/ScatterChart/index.js

@@ -2,4 +2,5 @@ export * from "./ScatterChart.js";
 export * from "./ScatterPlot.js";
 export * from "./Scatter.js";
 export * from "./ScatterMarker.types.js";
-export * from "./ScatterMarker.js";
+export * from "./ScatterMarker.js";
+export { scatterClasses } from "./scatterClasses.js";

package/esm/ScatterChart/scatterClasses.d.ts

@@ -0,0 +1,8 @@
+export interface ScatterClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ScatterClassKey = keyof ScatterClasses;
+export declare function getScatterUtilityClass(slot: string): string;
+export declare const scatterClasses: ScatterClasses;
+export declare const useUtilityClasses: (classes?: Partial<ScatterClasses>) => Record<"root", string>;

package/esm/ScatterChart/scatterClasses.js

@@ -0,0 +1,13 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getScatterUtilityClass(slot) {
+  return generateUtilityClass('MuiScatter', slot);
+}
+export const scatterClasses = generateUtilityClasses('MuiScatter', ['root']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root']
+  };
+  return composeClasses(slots, getScatterUtilityClass, classes);
+};

package/esm/hooks/useItemHighlighted.js

@@ -14,8 +14,8 @@ import { selectorChartsIsFaded, selectorChartsIsHighlighted } from "../internals
  */
 export function useItemHighlighted(item) {
   const store = useStore();
-  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, item);
-  const isFaded = useSelector(store, selectorChartsIsFaded, item);
+  const isHighlighted = useSelector(store, selectorChartsIsHighlighted, [item]);
+  const isFaded = useSelector(store, selectorChartsIsFaded, [item]);
   return {
     isHighlighted,
     isFaded: !isHighlighted && isFaded

package/esm/index.js

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

package/esm/internals/createSeriesSelectorOfType.js

@@ -31,11 +31,11 @@ export function createSeriesSelectorsOfType(seriesType) {
   });
   return ids => {
     const store = useStore();
-    return useSelector(store, selectorSeriesWithIds, ids, fastArrayCompare);
+    return useSelector(store, selectorSeriesWithIds, [ids], fastArrayCompare);
   };
 }
 export function createAllSeriesSelectorOfType(seriesType) {
-  const selectorSeries = createSelector(selectorChartSeriesProcessed, processedSeries => processedSeries[seriesType]);
+  const selectorSeries = createSelector([selectorChartSeriesProcessed], processedSeries => processedSeries[seriesType]);
   return () => {
     const store = useStore();
     return useSelector(store, selectorSeries);

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.d.ts

@@ -1,31 +1,5 @@
-import { ChartRootSelector } from "../../utils/selectors.js";
-import type { UseChartAnimationSignature } from "./useChartAnimation.types.js";
-export declare const selectorChartSkipAnimation: ((state: import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
+export declare const selectorChartSkipAnimation: import("reselect").Selector<import("../useChartId/useChartId.types.js").UseChartIdState & import("../useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("./useChartAnimation.types.js").UseChartAnimationState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}) => boolean) & {
-  clearCache: () => void;
-  resultsCount: () => number;
-  resetResultsCount: () => void;
 } & {
-  resultFunc: (resultFuncArgs_0: {
-    skip: boolean;
-    skipAnimationRequests: number;
-  }) => boolean;
-  memoizedResultFunc: ((resultFuncArgs_0: {
-    skip: boolean;
-    skipAnimationRequests: number;
-  }) => boolean) & {
-    clearCache: () => void;
-    resultsCount: () => number;
-    resetResultsCount: () => void;
-  };
-  lastResult: () => boolean;
-  dependencies: [ChartRootSelector<UseChartAnimationSignature>];
-  recomputations: () => number;
-  resetRecomputations: () => void;
-  dependencyRecomputations: () => number;
-  resetDependencyRecomputations: () => void;
-} & {
-  memoize: typeof import("reselect").weakMapMemoize;
-  argsMemoize: typeof import("reselect").weakMapMemoize;
-};
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, boolean, any[]>;

package/esm/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.selectors.js

@@ -1,3 +1,3 @@
 import { createSelector } from "../../utils/selectors.js";
 const selectorChartAnimationState = state => state.animation;
-export const selectorChartSkipAnimation = createSelector(selectorChartAnimationState, state => state.skip || state.skipAnimationRequests > 0);
+export const selectorChartSkipAnimation = createSelector([selectorChartAnimationState], state => state.skip || state.skipAnimationRequests > 0);