@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.3

package/LineChart/AreaElement.d.mts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedAreaProps } from "./AnimatedArea.mjs";
 import { type SeriesId } from "../models/seriesType/common.mjs";
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
 export interface AreaElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -21,6 +24,9 @@ export interface AreaElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
@@ -30,7 +36,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.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;
@@ -21,6 +24,9 @@ export interface AreaElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type AreaElementClassKey = keyof AreaElementClasses;
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
@@ -30,7 +36,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

@@ -18,15 +18,33 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _useItemHighlightState = require("../hooks/useItemHighlightState");
 var _AnimatedArea = require("./AnimatedArea");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "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,
     seriesId,
@@ -64,10 +82,9 @@ function AreaElement(props) {
     seriesId
   }), [seriesId]);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)(identifier);
+  const highlightState = (0, _useItemHighlightState.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -76,7 +93,8 @@ 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,
@@ -85,9 +103,10 @@ function AreaElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId
     }),
-    className: classes.root,
+    className: `${classes.area} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, other, areaProps));

package/LineChart/AreaElement.mjs

@@ -10,14 +10,34 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.mjs";
+import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
 import { AnimatedArea } from "./AnimatedArea.mjs";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
+
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
+
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 export function getAreaElementUtilityClass(slot) {
   return generateUtilityClass('MuiAreaElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 export const areaElementClasses = generateUtilityClasses('MuiAreaElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
+const useDeprecatedUtilityClasses = ownerState => {
   const {
     classes,
     seriesId,
@@ -55,10 +75,9 @@ function AreaElement(props) {
     seriesId
   }), [seriesId]);
   const interactionProps = useInteractionItemProps(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted(identifier);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -67,7 +86,8 @@ function AreaElement(props) {
     isFaded,
     isHighlighted
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Area = slots?.area ?? AnimatedArea;
   const areaProps = useSlotProps({
     elementType: Area,
@@ -76,9 +96,10 @@ function AreaElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId
     }),
-    className: classes.root,
+    className: `${classes.area} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/_jsx(Area, _extends({}, 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/AreaPlot.mjs

@@ -2,22 +2,24 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
+const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { AreaElement, areaElementClasses } from "./AreaElement.mjs";
+import clsx from 'clsx';
+import { AreaElement } from "./AreaElement.mjs";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useAreaPlotData } from "./useAreaPlotData.mjs";
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
+import { lineClasses, useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AreaPlotRoot = styled('g', {
   name: 'MuiAreaPlot',
   slot: 'Root'
 })({
-  [`& .${areaElementClasses.root}`]: {
+  [`& .${lineClasses.area}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
@@ -49,13 +51,17 @@ function AreaPlot(props) {
       slots,
       slotProps,
       onItemClick,
-      skipAnimation: inSkipAnimation
+      skipAnimation: inSkipAnimation,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
-  return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({}, other, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(AreaPlotRoot, _extends({
+    className: clsx(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", "seriesId", "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": seriesId,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1
   }));
 }

package/LineChart/CircleMarkElement.mjs

@@ -8,7 +8,8 @@ import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
-import { markElementClasses, useUtilityClasses } from "./markElementClasses.mjs";
+import { markElementClasses, useUtilityClasses as useDeprecatedUtilityClasses } from "./markElementClasses.mjs";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Circle = styled('circle', {
   slot: 'internal',
@@ -64,7 +65,11 @@ function CircleMarkElement(props) {
     isFaded,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses({
+    skipAnimation,
+    classes: innerClasses
+  });
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(Circle, _extends({}, other, {
     cx: x,
     cy: y,
@@ -72,13 +77,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": seriesId,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1
   }));
 }

package/LineChart/LineChart.js

@@ -129,11 +129,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
   /**
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
-  enableKeyboardNavigation: _propTypes.default.bool,
   /**
    * Options to enable features planned for the next major.
    */
@@ -309,7 +312,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**

package/LineChart/LineChart.mjs

@@ -122,11 +122,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */
@@ -302,7 +305,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**

package/LineChart/LineElement.d.mts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import { type SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { type AnimatedLineProps } from "./AnimatedLine.mjs";
 import { type SeriesId } from "../models/seriesType/common.mjs";
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
 export interface LineElementClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -21,6 +24,9 @@ export interface LineElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {
   seriesId: SeriesId;
@@ -32,7 +38,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.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;
@@ -21,6 +24,9 @@ export interface LineElementClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {
   seriesId: SeriesId;
@@ -32,7 +38,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

@@ -19,14 +19,32 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _useItemHighlightState = require("../hooks/useItemHighlightState");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "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,
     seriesId,
@@ -65,10 +83,9 @@ function LineElement(props) {
     seriesId
   }), [seriesId]);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)(identifier);
+  const highlightState = (0, _useItemHighlightState.useItemHighlightState)(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -78,7 +95,8 @@ 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,
@@ -87,9 +105,10 @@ function LineElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId
     }),
-    className: classes.root,
+    className: `${classes.line} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, other, lineProps));

package/LineChart/LineElement.mjs

@@ -11,13 +11,33 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
 import { AnimatedLine } from "./AnimatedLine.mjs";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.mjs";
+import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
+
+/**
+ * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ */
+
+/**
+ * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ */
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ */
 export function getLineElementUtilityClass(slot) {
   return generateUtilityClass('MuiLineElement', slot);
 }
+
+/**
+ * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ */
 export const lineElementClasses = generateUtilityClasses('MuiLineElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
+
+/**
+ * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ */
+const useDeprecatedUtilityClasses = ownerState => {
   const {
     classes,
     seriesId,
@@ -56,10 +76,9 @@ function LineElement(props) {
     seriesId
   }), [seriesId]);
   const interactionProps = useInteractionItemProps(identifier);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted(identifier);
+  const highlightState = useItemHighlightState(identifier);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const ownerState = {
     seriesId,
     classes: innerClasses,
@@ -69,7 +88,8 @@ function LineElement(props) {
     isHighlighted,
     hidden
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses();
+  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Line = slots?.line ?? AnimatedLine;
   const lineProps = useSlotProps({
     elementType: Line,
@@ -78,9 +98,10 @@ function LineElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId
     }),
-    className: classes.root,
+    className: `${classes.line} ${deprecatedClasses.root}`,
     ownerState
   });
   return /*#__PURE__*/_jsx(Line, _extends({}, other, lineProps));