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

package/LineChart/LineElement.js

@@ -7,37 +7,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LineElement = LineElement;
-exports.getLineElementUtilityClass = getLineElementUtilityClass;
-exports.lineElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 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 _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"];
-function getLineElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiLineElement', slot);
-}
-const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return (0, _composeClasses.default)(slots, getLineElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -65,10 +45,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 +57,7 @@ function LineElement(props) {
     isHighlighted,
     hidden
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)();
   const Line = slots?.line ?? _AnimatedLine.AnimatedLine;
   const lineProps = (0, _useSlotProps.default)({
     elementType: Line,
@@ -87,9 +66,11 @@ function LineElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId,
+      'data-series': seriesId
     }),
-    className: classes.root,
+    className: classes.line,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, other, lineProps));

package/LineChart/LineElement.mjs

@@ -5,30 +5,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
 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 { AnimatedLine } from "./AnimatedLine.mjs";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.mjs";
+import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getLineElementUtilityClass(slot) {
-  return generateUtilityClass('MuiLineElement', slot);
-}
-export const lineElementClasses = generateUtilityClasses('MuiLineElement', ['root', 'highlighted', 'faded', 'series']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getLineElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -56,10 +38,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 +50,7 @@ function LineElement(props) {
     isHighlighted,
     hidden
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses();
   const Line = slots?.line ?? AnimatedLine;
   const lineProps = useSlotProps({
     elementType: Line,
@@ -78,9 +59,11 @@ function LineElement(props) {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
-      'data-faded': isFaded || undefined
+      'data-faded': isFaded || undefined,
+      'data-series-id': seriesId,
+      'data-series': seriesId
     }),
-    className: classes.root,
+    className: classes.line,
     ownerState
   });
   return /*#__PURE__*/_jsx(Line, _extends({}, other, lineProps));

package/LineChart/LineHighlightElement.d.mts

@@ -1,19 +1,11 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.mjs";
-export interface LineHighlightElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export type HighlightElementClassKey = keyof LineHighlightElementClasses;
 interface LineHighlightElementCommonProps {
   seriesId: SeriesId;
   color: string;
   x: number;
   y: number;
-  classes?: Partial<LineHighlightElementClasses>;
 }
-export declare function getHighlightElementUtilityClass(slot: string): string;
-export declare const lineHighlightElementClasses: LineHighlightElementClasses;
 export type LineHighlightElementProps = (LineHighlightElementCommonProps & {
   shape: 'circle';
 } & Omit<React.SVGProps<SVGCircleElement>, 'ref'>) | (LineHighlightElementCommonProps & {

package/LineChart/LineHighlightElement.d.ts

@@ -1,19 +1,11 @@
 import * as React from 'react';
 import { type SeriesId } from "../models/seriesType/common.js";
-export interface LineHighlightElementClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export type HighlightElementClassKey = keyof LineHighlightElementClasses;
 interface LineHighlightElementCommonProps {
   seriesId: SeriesId;
   color: string;
   x: number;
   y: number;
-  classes?: Partial<LineHighlightElementClasses>;
 }
-export declare function getHighlightElementUtilityClass(slot: string): string;
-export declare const lineHighlightElementClasses: LineHighlightElementClasses;
 export type LineHighlightElementProps = (LineHighlightElementCommonProps & {
   shape: 'circle';
 } & Omit<React.SVGProps<SVGCircleElement>, 'ref'>) | (LineHighlightElementCommonProps & {

package/LineChart/LineHighlightElement.js

@@ -7,34 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LineHighlightElement = LineHighlightElement;
-exports.getHighlightElementUtilityClass = getHighlightElementUtilityClass;
-exports.lineHighlightElementClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
-var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _getSymbol = require("../internals/getSymbol");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "seriesId", "classes", "color", "shape"];
-function getHighlightElementUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
-}
-const lineHighlightElementClasses = exports.lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`]
-  };
-  return (0, _composeClasses.default)(slots, getHighlightElementUtilityClass, classes);
-};
+const _excluded = ["x", "y", "seriesId", "color", "shape"];
 /**
  * Demos:
  *
@@ -53,7 +35,7 @@ function LineHighlightElement(props) {
       shape
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = (0, _lineClasses.useUtilityClasses)();
   const Element = shape === 'circle' ? 'circle' : 'path';
   const additionalProps = shape === 'circle' ? {
     cx: 0,
@@ -71,7 +53,7 @@ function LineHighlightElement(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
     pointerEvents: "none",
-    className: classes.root,
+    className: classes.highlight,
     transform: `translate(${x} ${y})`,
     fill: color
   }, transformOrigin, additionalProps, other));

package/LineChart/LineHighlightElement.mjs

@@ -2,30 +2,14 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "seriesId", "classes", "color", "shape"];
+const _excluded = ["x", "y", "seriesId", "color", "shape"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import reactMajor from '@mui/x-internals/reactMajor';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { getSymbol } from "../internals/getSymbol.mjs";
+import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getHighlightElementUtilityClass(slot) {
-  return generateUtilityClass('MuiHighlightElement', slot);
-}
-export const lineHighlightElementClasses = generateUtilityClasses('MuiHighlightElement', ['root']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`]
-  };
-  return composeClasses(slots, getHighlightElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -44,7 +28,7 @@ function LineHighlightElement(props) {
       shape
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const classes = useUtilityClasses(props);
+  const classes = useLineUtilityClasses();
   const Element = shape === 'circle' ? 'circle' : 'path';
   const additionalProps = shape === 'circle' ? {
     cx: 0,
@@ -62,7 +46,7 @@ function LineHighlightElement(props) {
   };
   return /*#__PURE__*/_jsx(Element, _extends({
     pointerEvents: "none",
-    className: classes.root,
+    className: classes.highlight,
     transform: `translate(${x} ${y})`,
     fill: color
   }, transformOrigin, additionalProps, other));

package/LineChart/LineHighlightPlot.js

@@ -18,7 +18,7 @@ var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _constants = require("../constants");
 var _useLineSeries = require("../hooks/useLineSeries");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -50,7 +50,7 @@ function LineHighlightPlot(props) {
   } = (0, _useAxis.useYAxes)();
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const store = (0, _useStore.useStore)();
   const highlightedIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {

package/LineChart/LineHighlightPlot.mjs

@@ -12,7 +12,7 @@ import { getValueToPositionMapper } from "../hooks/getValueToPositionMapper.mjs"
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.mjs";
 import { useLineSeriesContext } from "../hooks/useLineSeries.mjs";
 import getColor from "./seriesConfig/getColor.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
 import { useXAxes, useYAxes } from "../hooks/useAxis.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,7 +43,7 @@ function LineHighlightPlot(props) {
   } = useYAxes();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const store = useStore();
   const highlightedIndexes = store.use(selectorChartsHighlightXAxisIndex);
   if (highlightedIndexes.length === 0) {

package/LineChart/LinePlot.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 _LineElement = require("./LineElement");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useLinePlotData = require("./useLinePlotData");
 var _animation = require("../internals/animation/animation");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
 const LinePlotRoot = (0, _styles.styled)('g', {
-  name: 'MuiAreaPlot',
+  name: 'MuiLinePlot',
   slot: 'Root'
 })({
-  [`& .${_LineElement.lineElementClasses.root}`]: {
+  [`& .${_lineClasses.lineClasses.line}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -55,13 +57,17 @@ function LinePlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      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)(LinePlotRoot, (0, _extends2.default)({}, other, {
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.linePlot, className)
+  }, other, {
     children: completedData.map(({
       d,
       seriesId,

package/LineChart/LinePlot.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", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { LineElement, lineElementClasses } from "./LineElement.mjs";
+import clsx from 'clsx';
+import { LineElement } from "./LineElement.mjs";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { useLinePlotData } from "./useLinePlotData.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 LinePlotRoot = styled('g', {
-  name: 'MuiAreaPlot',
+  name: 'MuiLinePlot',
   slot: 'Root'
 })({
-  [`& .${lineElementClasses.root}`]: {
+  [`& .${lineClasses.line}`]: {
     transitionProperty: 'opacity, fill',
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
@@ -48,13 +50,17 @@ function LinePlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
   const skipAnimation = useSkipAnimation(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
-  return /*#__PURE__*/_jsx(LinePlotRoot, _extends({}, other, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(LinePlotRoot, _extends({
+    className: clsx(classes.linePlot, className)
+  }, other, {
     children: completedData.map(({
       d,
       seriesId,

package/LineChart/MarkElement.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MarkElementOwnerState } from "./markElementClasses.mjs";
+import { type MarkElementOwnerState } from "./lineClasses.mjs";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.

package/LineChart/MarkElement.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MarkElementOwnerState } from "./markElementClasses.js";
+import { type MarkElementOwnerState } from "./lineClasses.js";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.

package/LineChart/MarkElement.js

@@ -16,7 +16,7 @@ var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _animation = require("../internals/animation/animation");
 var _getSymbol = require("../internals/getSymbol");
 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", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
 const MarkElementPath = (0, _styles.styled)('path', {
@@ -26,7 +26,7 @@ const MarkElementPath = (0, _styles.styled)('path', {
   theme
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  [`&.${_markElementClasses.markElementClasses.animate}`]: {
+  [`&.${_lineClasses.lineClasses.markAnimate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'transform, transform-origin, opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -71,14 +71,17 @@ function MarkElement(props) {
     isFaded,
     skipAnimation
   };
-  const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
+  const classes = (0, _lineClasses.useUtilityClasses)({
+    skipAnimation,
+    classes: innerClasses
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
     style: (0, _extends2.default)({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
     }),
     ownerState: ownerState,
-    className: classes.root,
+    className: classes.mark,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
@@ -86,6 +89,9 @@ function MarkElement(props) {
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
+    "data-series-id": seriesId,
+    "data-series": seriesId,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1,
     strokeWidth: 2,
     stroke: color

package/LineChart/MarkElement.mjs

@@ -10,7 +10,7 @@ import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
 import { getSymbol } from "../internals/getSymbol.mjs";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.mjs";
-import { markElementClasses, useUtilityClasses } from "./markElementClasses.mjs";
+import { lineClasses, useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
@@ -19,7 +19,7 @@ const MarkElementPath = styled('path', {
   theme
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  [`&.${markElementClasses.animate}`]: {
+  [`&.${lineClasses.markAnimate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'transform, transform-origin, opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
@@ -64,14 +64,17 @@ function MarkElement(props) {
     isFaded,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = useLineUtilityClasses({
+    skipAnimation,
+    classes: innerClasses
+  });
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
     style: _extends({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
     }),
     ownerState: ownerState,
-    className: classes.root,
+    className: classes.mark,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
@@ -79,6 +82,9 @@ function MarkElement(props) {
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
+    "data-series-id": seriesId,
+    "data-series": seriesId,
+    "data-index": dataIndex,
     opacity: hidden ? 0 : 1,
     strokeWidth: 2,
     stroke: color

package/LineChart/MarkPlot.js

@@ -11,16 +11,24 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _CircleMarkElement = require("./CircleMarkElement");
 var _MarkElement = require("./MarkElement");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _useMarkPlotData = require("./useMarkPlotData");
+var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
+const MarkPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiMarkPlot',
+  slot: 'Root'
+})({});
+
 /**
  * Demos:
  *
@@ -36,7 +44,8 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
@@ -49,11 +58,8 @@ function MarkPlot(props) {
   } = (0, _hooks.useYAxes)();
   const {
     store
-  } = (0, _ChartProvider.useChartContext)();
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _hooks.useItemHighlightedGetter)();
+  } = (0, _ChartsProvider.useChartsContext)();
+  const getHighlightState = (0, _hooks.useItemHighlightStateGetter)();
   const xAxisHighlightIndexes = store.use(_useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {
     const rep = {};
@@ -70,7 +76,10 @@ function MarkPlot(props) {
     return rep;
   }, [xAxisHighlightIndexes]);
   const completedData = (0, _useMarkPlotData.useMarkPlotData)(xAxis, yAxis);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  const classes = (0, _lineClasses.useUtilityClasses)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkPlotRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes.markPlot, className)
+  }, other, {
     children: completedData.map(({
       seriesId,
       clipId,
@@ -84,8 +93,9 @@ function MarkPlot(props) {
         type: 'line',
         seriesId
       };
-      const isSeriesHighlighted = isHighlighted(identifier);
-      const isSeriesFaded = !isSeriesHighlighted && isFaded(identifier);
+      const seriesHighlightState = getHighlightState(identifier);
+      const isSeriesHighlighted = seriesHighlightState === 'highlighted';
+      const isSeriesFaded = seriesHighlightState === 'faded';
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         clipPath: `url(#${clipId})`,
         "data-series": seriesId,