@mui/x-charts 8.27.4 → 8.28.0

package/BarChart/AnimatedBarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
-import { type BarElementOwnerState } from "./barElementClasses.js";
+import { type BarElementOwnerState } from "./barClasses.js";
 export interface BarProps extends Omit<React.SVGProps<SVGRectElement>, 'id' | 'color' | 'ref' | 'x' | 'y' | 'height' | 'width'> {
   id: SeriesId;
   dataIndex: number;

package/BarChart/BarElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
-import { type BarElementOwnerState } from "./barElementClasses.js";
+import { type BarElementOwnerState } from "./barClasses.js";
 import { type BarProps } from "./AnimatedBarElement.js";
 export interface BarElementSlots {
   /**
@@ -12,7 +12,7 @@ export interface BarElementSlots {
 export interface BarElementSlotProps {
   bar?: SlotComponentPropsFromProps<BarProps, {}, BarElementOwnerState>;
 }
-export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
+export type BarElementProps = Omit<BarElementOwnerState, 'isFaded' | 'isHighlighted' | 'isFocused'> & Omit<React.SVGProps<SVGRectElement>, 'ref' | 'id'> & {
   /**
    * The props used for each component slot.
    * @default {}

package/BarChart/BarElement.js

@@ -12,6 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _barClasses = require("./barClasses");
 var _barElementClasses = require("./barElementClasses");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
@@ -64,7 +65,8 @@ function BarElement(props) {
     isHighlighted,
     isFocused
   };
-  const classes = (0, _barElementClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _barClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = (0, _barElementClasses.useUtilityClasses)(ownerState);
   const Bar = slots?.bar ?? _AnimatedBarElement.AnimatedBarElement;
   const barProps = (0, _useSlotProps.default)({
     elementType: Bar,
@@ -89,7 +91,7 @@ function BarElement(props) {
       layout,
       hidden
     }),
-    className: classes.root,
+    className: `${classes.element} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Bar, (0, _extends2.default)({}, barProps));

package/BarChart/BarLabel/BarLabel.js

@@ -25,6 +25,10 @@ const BarLabelComponent = exports.BarLabelComponent = (0, _styles.styled)('text'
     [`&.${_barLabelClasses.barLabelClasses.faded}`]: styles.faded
   }, {
     [`&.${_barLabelClasses.barLabelClasses.highlighted}`]: styles.highlighted
+  }, {
+    [`&[data-faded]`]: styles.faded
+  }, {
+    [`&[data-highlighted]`]: styles.highlighted
   }, styles.root]
 })(({
   theme

package/BarChart/BarLabel/BarLabel.types.d.ts

@@ -1,5 +1,5 @@
 import { type SeriesId } from "../../models/seriesType/common.js";
-import type { BarLabelClasses } from "./barLabelClasses.js";
+import type { BarClasses } from "../barClasses.js";
 import { type BarValueType } from "../../models/index.js";
 export interface BarLabelOwnerState {
   seriesId: SeriesId;
@@ -9,7 +9,7 @@ export interface BarLabelOwnerState {
   isHighlighted: boolean;
   skipAnimation: boolean;
   layout: 'vertical' | 'horizontal';
-  classes?: Partial<BarLabelClasses>;
+  classes?: Partial<BarClasses>;
 }
 export type BarItem = {
   /**

package/BarChart/BarLabel/BarLabelItem.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _useSlotProps2 = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _barClasses = require("../barClasses");
 var _barLabelClasses = require("./barLabelClasses");
 var _getBarLabel = require("./getBarLabel");
 var _BarLabel = require("./BarLabel");
@@ -60,7 +61,8 @@ function BarLabelItem(props) {
     skipAnimation,
     layout
   };
-  const classes = (0, _barLabelClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _barClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = (0, _barLabelClasses.useUtilityClasses)(ownerState);
   const Component = slots?.barLabel ?? _BarLabel.BarLabel;
   const _useSlotProps = (0, _useSlotProps2.default)({
       elementType: Component,
@@ -73,7 +75,9 @@ function BarLabelItem(props) {
         width,
         height,
         placement: barLabelPlacement,
-        className: classes.root
+        className: `${classes.label} ${deprecatedClasses.root}`,
+        'data-highlighted': isHighlighted || undefined,
+        'data-faded': isFaded || undefined
       }),
       ownerState
     }),

package/BarChart/BarLabel/barLabelClasses.d.ts

@@ -1,20 +1,40 @@
 import type { BarLabelOwnerState } from "./BarLabel.types.js";
+/**
+ * @deprecated Use `BarClasses` instead.
+ */
 export interface BarLabelClasses {
-  /** Styles applied to the root element. */
+  /** Styles applied to the root element.
+   * @deprecated Use `barClasses.label` instead.
+   */
   root: string;
   /** Styles applied to the root element if it is highlighted. */
   highlighted: string;
   /** Styles applied to the root element if it is faded. */
   faded: string;
-  /** Styles applied to the root element if it is animated. */
+  /** Styles applied to the root element if it is animated.
+   * @deprecated Use `barClasses.labelAnimate` instead.
+   */
   animate: string;
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${barLabelClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` instead.
+ */
 export type BarLabelClassKey = keyof BarLabelClasses;
+/**
+ * @deprecated Use `getBarUtilityClass` instead.
+ */
 export declare function getBarLabelUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` instead.
+ */
 export declare const barLabelClasses: Record<"root" | "animate" | "highlighted" | "faded", string>;
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: BarLabelOwnerState) => Record<"root", string>;

package/BarChart/BarLabel/barLabelClasses.js

@@ -10,10 +10,29 @@ exports.useUtilityClasses = void 0;
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+/**
+ * @deprecated Use `BarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `BarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getBarUtilityClass` instead.
+ */
 function getBarLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarLabel', slot);
 }
+
+/**
+ * @deprecated Use `barClasses` instead.
+ */
 const barLabelClasses = exports.barLabelClasses = (0, _generateUtilityClasses.default)('MuiBarLabel', ['root', 'highlighted', 'faded', 'animate']);
+
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/BarChart/BarPlot.js

@@ -12,7 +12,6 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _barElementClasses = require("./barElementClasses");
 var _hooks = require("../hooks");
 var _BarLabelPlot = require("./BarLabel/BarLabelPlot");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
@@ -28,7 +27,7 @@ const BarPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiBarPlot',
   slot: 'Root'
 })({
-  [`& .${_barElementClasses.barElementClasses.root}`]: {
+  [`& .${_barClasses.barClasses.element}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION

package/BarChart/barClasses.d.ts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface BarClasses {
   /** Styles applied to the bar plot element. */
   root: string;
@@ -5,8 +6,27 @@ export interface BarClasses {
   series: string;
   /** Styles applied to the group surrounding a series' labels. */
   seriesLabels: string;
+  /** Styles applied to an individual bar element. */
+  element: string;
+  /** Styles applied to an individual bar label. */
+  label: string;
+  /** Styles applied to a bar label when it is animated. */
+  labelAnimate: string;
 }
 export type BarClassKey = keyof BarClasses;
+export interface BarElementOwnerState {
+  id: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<BarClasses>;
+}
 export declare function getBarUtilityClass(slot: string): string;
 export declare const barClasses: BarClasses;
-export declare const useUtilityClasses: (classes?: Partial<BarClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export interface UseUtilityClassesOptions {
+  skipAnimation?: boolean;
+  classes?: Partial<BarClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"series" | "root" | "label" | "seriesLabels" | "element", string>;

package/BarChart/barClasses.js

@@ -13,12 +13,18 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getBarUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBar', slot);
 }
-const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBar', ['root', 'series', 'seriesLabels']);
-const useUtilityClasses = classes => {
+const barClasses = exports.barClasses = (0, _generateUtilityClasses.default)('MuiBar', ['root', 'series', 'seriesLabels', 'element', 'label', 'labelAnimate']);
+const useUtilityClasses = options => {
+  const {
+    skipAnimation,
+    classes
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    element: ['element'],
+    label: ['label', !skipAnimation && 'labelAnimate']
   };
   return (0, _composeClasses.default)(slots, getBarUtilityClass, classes);
 };

package/BarChart/barElementClasses.d.ts

@@ -1,6 +1,13 @@
-import { type SeriesId } from "../models/seriesType/common.js";
+import type { BarElementOwnerState } from "./barClasses.js";
+export { type BarElementOwnerState };
+/**
+ * @deprecated Use `BarClasses` instead.
+ */
 export interface BarElementClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `barClasses.element` instead.
+   */
   root: string;
   /** Styles applied to the root element if it is highlighted. */
   highlighted: string;
@@ -9,18 +16,23 @@ export interface BarElementClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${barElementClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` instead.
+ */
 export type BarElementClassKey = keyof BarElementClasses;
-export interface BarElementOwnerState {
-  id: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  classes?: Partial<BarElementClasses>;
-}
+/**
+ * @deprecated Use `getBarUtilityClass` instead.
+ */
 export declare function getBarElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` instead.
+ */
 export declare const barElementClasses: BarElementClasses;
+/**
+ * @deprecated Use `useBarElementUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (ownerState: BarElementOwnerState) => Record<"root", string>;

package/BarChart/barElementClasses.js

@@ -10,10 +10,29 @@ 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"));
+/**
+ * @deprecated Use `BarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `BarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getBarUtilityClass` instead.
+ */
 function getBarElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarElement', slot);
 }
+
+/**
+ * @deprecated Use `barClasses` instead.
+ */
 const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root', 'highlighted', 'faded', 'series']);
+
+/**
+ * @deprecated Use `useBarElementUtilityClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/BarChart/index.d.ts

@@ -6,5 +6,5 @@ export * from "./FocusedBar.js";
 export * from "./barElementClasses.js";
 export * from "./BarChart.plugins.js";
 export { type BarProps } from "./AnimatedBarElement.js";
-export { barClasses, getBarUtilityClass } from "./barClasses.js";
+export { barClasses } from "./barClasses.js";
 export type { BarClassKey, BarClasses } from "./barClasses.js";

package/BarChart/index.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  barClasses: true,
-  getBarUtilityClass: true
+  barClasses: true
 };
 Object.defineProperty(exports, "barClasses", {
   enumerable: true,
@@ -13,12 +12,6 @@ Object.defineProperty(exports, "barClasses", {
     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;

package/CHANGELOG.md

@@ -5,6 +5,149 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.28.0
+
+_Mar 19, 2026_
+
+We'd like to extend a big thank you to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+TODO INSERT HIGHLIGHTS
+
+The following team members contributed to this release:
+@alexfauquette, @brijeshb42, @Janpot, @JCQuintas, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.28.0`
+
+- [DataGrid] Move `elementOverrides` to constants and remove duplicates (@sai6855) (#21752) @github-actions[bot]
+
+#### `@mui/x-data-grid-pro@8.28.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.28.0`.
+
+#### `@mui/x-data-grid-premium@8.28.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.28.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.27.2` [![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.27.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.28.0`
+
+- [charts] Improve deprecation warnings (#21760) (#21767) @alexfauquette
+- [charts] Refactor `FunnelChart` classes structure (@JCQuintas) (#21763) @github-actions[bot]
+- [charts] Refactor `Heatmap` classes structure (#21653) (#21745) @JCQuintas
+- [charts] Refactor `PieChart` classes structure (@JCQuintas) (#21715) @github-actions[bot]
+- [charts] Refactor `RadarChart` classes structure (@JCQuintas) (#21730) @github-actions[bot]
+- [charts] Refactor `SankeyChart` classes structure (#21654) (#21726) @JCQuintas
+- [charts] Rename `data-series-id` by `data-series` (#21761) (#21772) @alexfauquette
+
+#### `@mui/x-charts-pro@8.28.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.28.0`, plus:
+
+- [charts-pro] Allow `brush` interaction to accept `requiredKeys/pointerMode` (#21723) @JCQuintas
+
+#### `@mui/x-charts-premium@8.28.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-charts-pro@8.28.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.27.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.27.2` [![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.27.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.27.0`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Fix contributor generation in changelog (#21712) @brijeshb42
+- [code-infra] Install pkg-pr-new (#21778) @Janpot
+
+## 8.27.5
+
+_Mar 11, 2026_
+
+We'd like to extend a big thank you to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@bernardobelchior, @JCQuintas, @MBilalShafi, @michelengelen, @mj12albert, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.5`
+
+- [DataGrid] Fix crash when `rows` and `rowModesModel` are updated simultaneously (#21684) @michelengelen
+- [DataGrid] Forward rest props in `GridFilterInputMultipleValue` (#21444) @siriwatknp
+- [DataGrid] Remove double rtl inversion logic for columns pinning (#21443) @siriwatknp
+- [DataGrid] Add missing `resizablePanelHandle` classes to `gridClasses` object (#21632) @sai6855
+- [DataGrid] Refactor `headerAlign` style calls (#21633) @sai6855
+- [DataGrid] Fix keyboard navigation with single-row checkbox selection (#21529) @mj12albert
+
+#### `@mui/x-data-grid-pro@8.27.5` [![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.27.5`, plus:
+
+- [DataGridPro] Add `role="presentation"` to detail panel toggle header content (#21691) @michelengelen
+- [DataGridPro] Fix sorting not reflected in nested server-side data (#21641) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.27.5` [![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.27.5`.
+
+### Charts
+
+#### `@mui/x-charts@8.27.5`
+
+- [charts] Refactor `BarChart` classes structure (#21601) (#21644) @JCQuintas
+- [charts] Refactor `LineChart` classes structure (#21672) @JCQuintas
+- [charts] Refactor `ScatterChart` classes structure (#21706) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.5` [![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.27.5`, plus:
+
+- [charts-pro] Fix image export truncated when page is zoomed out (#21696) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.27.5` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.27.5`.
+
+### Docs
+
+- [docs] Fix `AssistantWithDataSource` demo crashing (#21631) @sai6855
+- [docs] Move Range Bar Chart to existing charts (#21122) @bernardobelchior
+
+### Core
+
+- [code-infra] Fix datagrid test flakyness (#21657) @JCQuintas
+- [code-infra] Removed `getTeamMembers` function and usage from the release script (#21608) @michelengelen
+
+### Miscellaneous
+
+- [test] Add missing tests for forwarding props to filter operators in DataGrid (#21700) @siriwatknp
+
 ## 8.27.4
 
 _Mar 5, 2026_

package/LineChart/AreaElement.d.ts

@@ -2,8 +2,14 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedAreaProps } from "./AnimatedArea.js";
 import { type SeriesId } from "../models/seriesType/common.js";
+/**
+ * @deprecated Use `LineClasses` instead.
+ */
 export interface AreaElementClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `lineClasses.area` instead.
+   */
   root: string;
   /** Styles applied to the root element when highlighted. */
   highlighted: string;
@@ -12,9 +18,13 @@ export interface AreaElementClasses {
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${areaElementClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` instead.
+ */
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
   id: SeriesId;
@@ -24,7 +34,13 @@ export interface AreaElementOwnerState {
   isHighlighted: boolean;
   classes?: Partial<AreaElementClasses>;
 }
+/**
+ * @deprecated Use `getLineUtilityClass` instead.
+ */
 export declare function getAreaElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `lineClasses` instead.
+ */
 export declare const areaElementClasses: AreaElementClasses;
 export interface AreaElementSlots {
   /**

package/LineChart/AreaElement.js

@@ -20,13 +20,31 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _AnimatedArea = require("./AnimatedArea");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
+/**
+ * @deprecated Use `LineClasses` instead.
+ */
+/**
+ * @deprecated Use `LineClassKey` instead.
+ */
+/**
+ * @deprecated Use `getLineUtilityClass` instead.
+ */
 function getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` instead.
+ */
 const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
+const useDeprecatedUtilityClasses = ownerState => {
   const {
     classes,
     id,
@@ -77,16 +95,21 @@ function AreaElement(props) {
     isFaded,
     isHighlighted
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Area = slots?.area ?? _AnimatedArea.AnimatedArea;
   const areaProps = (0, _useSlotProps.default)({
     elementType: Area,
     externalSlotProps: slotProps?.area,
     additionalProps: (0, _extends2.default)({}, interactionProps, {
       onClick,
-      cursor: onClick ? 'pointer' : 'unset'
+      cursor: onClick ? 'pointer' : 'unset',
+      'data-highlighted': isHighlighted || undefined,
+      'data-faded': isFaded || undefined,
+      'data-series-id': id,
+      'data-series': id
     }),
-    className: classes.root,
+    className: `${classes.area} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, other, areaProps));

package/LineChart/AreaPlot.js

@@ -12,19 +12,21 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _AreaElement = require("./AreaElement");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useAreaPlotData = require("./useAreaPlotData");
 var _animation = require("../internals/animation/animation");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
+const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation", "className"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
 })({
-  [`& .${_AreaElement.areaElementClasses.root}`]: {
+  [`& .${_lineClasses.lineClasses.area}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -56,13 +58,17 @@ function AreaPlot(props) {
       slots,
       slotProps,
       onItemClick,
-      skipAnimation: inSkipAnimation
+      skipAnimation: inSkipAnimation,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
   const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({}, other, {
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AreaPlotRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.areaPlot, className)
+  }, other, {
     children: completedData.map(({
       d,
       seriesId,