@mui/x-charts 8.27.4 → 8.27.5

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,4 +1,7 @@
 import type { BarLabelOwnerState } from "./BarLabel.types.js";
+/**
+ * @deprecated Use `BarClasses` from `../barClasses` instead.
+ */
 export interface BarLabelClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -14,7 +17,19 @@ export interface BarLabelClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` from `../barClasses` instead.
+ */
 export type BarLabelClassKey = keyof BarLabelClasses;
+/**
+ * @deprecated Use `getBarUtilityClass` from `../barClasses` instead.
+ */
 export declare function getBarLabelUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` from `../barClasses` instead.
+ */
 export declare const barLabelClasses: Record<"root" | "animate" | "highlighted" | "faded", string>;
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` from `../barClasses` 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` from `../barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `BarClassKey` from `../barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getBarUtilityClass` from `../barClasses` instead.
+ */
 function getBarLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarLabel', slot);
 }
+
+/**
+ * @deprecated Use `barClasses` from `../barClasses` instead.
+ */
 const barLabelClasses = exports.barLabelClasses = (0, _generateUtilityClasses.default)('MuiBarLabel', ['root', 'highlighted', 'faded', 'animate']);
+
+/**
+ * @deprecated Use `useBarLabelUtilityClasses` from `../barClasses` 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,4 +1,8 @@
-import { type SeriesId } from "../models/seriesType/common.js";
+import type { BarElementOwnerState } from "./barClasses.js";
+export { type BarElementOwnerState };
+/**
+ * @deprecated Use `BarClasses` from `./barClasses` instead.
+ */
 export interface BarElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -12,15 +16,19 @@ export interface BarElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `BarClassKey` from `./barClasses` 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` from `./barClasses` instead.
+ */
 export declare function getBarElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `barClasses` from `./barClasses` instead.
+ */
 export declare const barElementClasses: BarElementClasses;
+/**
+ * @deprecated Use `useBarElementUtilityClasses` from `./barClasses` 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` from `./barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `BarClassKey` from `./barClasses` instead.
+ */
+
+/**
+ * @deprecated Use `getBarUtilityClass` from `./barClasses` instead.
+ */
 function getBarElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarElement', slot);
 }
+
+/**
+ * @deprecated Use `barClasses` from `./barClasses` instead.
+ */
 const barElementClasses = exports.barElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root', 'highlighted', 'faded', 'series']);
+
+/**
+ * @deprecated Use `useBarElementUtilityClasses` from `./barClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/CHANGELOG.md

@@ -5,6 +5,71 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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,6 +2,9 @@ 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` from `./lineClasses` instead.
+ */
 export interface AreaElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -15,6 +18,9 @@ export interface AreaElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
   id: SeriesId;
@@ -24,7 +30,13 @@ export interface AreaElementOwnerState {
   isHighlighted: boolean;
   classes?: Partial<AreaElementClasses>;
 }
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 export declare function getAreaElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `lineClasses` from `./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` from `./lineClasses` instead.
+ */
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 function getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
+const useDeprecatedUtilityClasses = ownerState => {
   const {
     classes,
     id,
@@ -77,16 +95,20 @@ 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
     }),
-    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,

package/LineChart/CircleMarkElement.js

@@ -15,6 +15,7 @@ var _styles = require("@mui/material/styles");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
 const Circle = (0, _styles.styled)('circle', {
@@ -71,7 +72,11 @@ function CircleMarkElement(props) {
     isFaded,
     skipAnimation
   };
-  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)({
+    skipAnimation,
+    classes: innerClasses
+  });
+  const deprecatedClasses = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, (0, _extends2.default)({}, other, {
     cx: x,
     cy: y,
@@ -79,13 +84,15 @@ function CircleMarkElement(props) {
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,
     strokeWidth: 2,
-    className: classes.root,
+    className: `${classes.mark} ${deprecatedClasses.root}`,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     pointerEvents: hidden ? 'none' : undefined
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
+    "data-series-id": id,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1
   }));
 }

package/LineChart/LineElement.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedLineProps } from "./AnimatedLine.js";
 import { type SeriesId } from "../models/seriesType/common.js";
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
 export interface LineElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -15,6 +18,9 @@ export interface LineElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {
   id: SeriesId;
@@ -26,7 +32,13 @@ export interface LineElementOwnerState {
   /** If `true`, the line is hidden. */
   hidden?: boolean;
 }
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 export declare function getLineElementUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 export declare const lineElementClasses: LineElementClasses;
 export interface LineElementSlots {
   /**

package/LineChart/LineElement.js

@@ -20,13 +20,31 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 function getLineElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLineElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
+const useDeprecatedUtilityClasses = ownerState => {
   const {
     classes,
     id,
@@ -79,16 +97,20 @@ function LineElement(props) {
     isHighlighted,
     hidden
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Line = slots?.line ?? _AnimatedLine.AnimatedLine;
   const lineProps = (0, _useSlotProps.default)({
     elementType: Line,
     externalSlotProps: slotProps?.line,
     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
     }),
-    className: classes.root,
+    className: `${classes.line} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, other, lineProps));