@mui/x-charts 9.0.0-alpha.3 → 9.0.0-beta.0

package/LineChart/LineChart.mjs

@@ -16,8 +16,8 @@ import { LineHighlightPlot } from "./LineHighlightPlot.mjs";
 import { ChartsGrid } from "../ChartsGrid/index.mjs";
 import { ChartsOverlay } from "../ChartsOverlay/index.mjs";
 import { useLineChartProps } from "./useLineChartProps.mjs";
-import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.mjs";
-import { ChartDataProvider } from "../ChartDataProvider/index.mjs";
+import { useChartsContainerProps } from "../ChartsContainer/useChartsContainerProps.mjs";
+import { ChartsDataProvider } from "../ChartsDataProvider/index.mjs";
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
 import { ChartsWrapper } from "../ChartsWrapper/index.mjs";
 import { FocusedLineMark } from "./FocusedLineMark.mjs";
@@ -39,7 +39,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   });
   const {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,
@@ -54,12 +54,12 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
     children
   } = useLineChartProps(props);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = useChartContainerProps(chartContainerProps);
+  } = useChartsContainerProps(chartsContainerProps);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
-  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartsDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
@@ -115,6 +115,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -134,7 +138,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Options to enable features planned for the next major.
    */
   experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
+    enablePositionBasedPointerInteraction: PropTypes.bool
   }),
   /**
    * Option to display a cartesian grid in the background.
@@ -335,6 +339,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The controlled axis tooltip.
@@ -370,6 +378,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -395,7 +404,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -428,6 +437,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -453,7 +463,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       tickLabelStyle: PropTypes.object,
       tickSize: PropTypes.number
     })),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -486,6 +496,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -501,7 +512,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -531,6 +542,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -547,7 +559,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -577,6 +589,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -592,7 +605,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -622,6 +635,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -637,7 +651,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -667,6 +681,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -682,7 +697,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -716,6 +731,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -731,7 +747,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -765,6 +781,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -780,7 +797,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
     domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     ignoreTooltip: PropTypes.bool,
@@ -818,6 +835,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -871,10 +889,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -928,10 +947,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -972,10 +992,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1017,10 +1038,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1061,10 +1083,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1105,10 +1128,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1153,10 +1177,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1201,10 +1226,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1245,7 +1271,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: PropTypes.number,
     tickSpacing: PropTypes.number,
     valueFormatter: PropTypes.func,
-    width: PropTypes.number
+    width: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number])
   })]).isRequired)
 } : void 0;
 export { LineChart };

package/LineChart/LineElement.d.mts

@@ -2,50 +2,17 @@ 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;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${lineElementClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
-export type LineElementClassKey = keyof LineElementClasses;
+import { type LineClasses } from "./lineClasses.mjs";
 export interface LineElementOwnerState {
   seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
   isHighlighted: boolean;
-  classes?: Partial<LineElementClasses>;
+  classes?: Partial<LineClasses>;
   /** 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 {
   /**
    * The component that renders the line.

package/LineChart/LineElement.d.ts

@@ -2,50 +2,17 @@ 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;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${lineElementClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
-export type LineElementClassKey = keyof LineElementClasses;
+import { type LineClasses } from "./lineClasses.js";
 export interface LineElementOwnerState {
   seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
   isHighlighted: boolean;
-  classes?: Partial<LineElementClasses>;
+  classes?: Partial<LineClasses>;
   /** 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 {
   /**
    * The component that renders the line.

package/LineChart/LineElement.js

@@ -7,55 +7,19 @@ 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 _useItemHighlightState = require("../hooks/useItemHighlightState");
+var _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
+var _useStore = require("../internals/store/useStore");
 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']);
-
-/**
- * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
- */
-const useDeprecatedUtilityClasses = 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:
  *
@@ -78,6 +42,8 @@ function LineElement(props) {
       hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const store = (0, _useStore.useStore)();
+  const enablePositionBasedPointerInteraction = store.use(_useChartExperimentalFeature.selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const identifier = React.useMemo(() => ({
     type: 'line',
     seriesId
@@ -96,19 +62,19 @@ function LineElement(props) {
     hidden
   };
   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, {
+    additionalProps: (0, _extends2.default)({}, enablePositionBasedPointerInteraction ? {} : interactionProps, {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
       'data-faded': isFaded || undefined,
-      'data-series-id': seriesId
+      'data-series-id': seriesId,
+      'data-series': seriesId
     }),
-    className: `${classes.line} ${deprecatedClasses.root}`,
+    className: classes.line,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({}, other, lineProps));

package/LineChart/LineElement.mjs

@@ -5,50 +5,14 @@ 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 { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
+import { selectorChartExperimentalFeaturesState } from "../internals/plugins/corePlugins/useChartExperimentalFeature/index.mjs";
+import { useStore } from "../internals/store/useStore.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']);
-
-/**
- * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
- */
-const useDeprecatedUtilityClasses = ownerState => {
-  const {
-    classes,
-    seriesId,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${seriesId}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getLineElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -71,6 +35,8 @@ function LineElement(props) {
       hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const store = useStore();
+  const enablePositionBasedPointerInteraction = store.use(selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const identifier = React.useMemo(() => ({
     type: 'line',
     seriesId
@@ -89,19 +55,19 @@ function LineElement(props) {
     hidden
   };
   const classes = useLineUtilityClasses();
-  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Line = slots?.line ?? AnimatedLine;
   const lineProps = useSlotProps({
     elementType: Line,
     externalSlotProps: slotProps?.line,
-    additionalProps: _extends({}, interactionProps, {
+    additionalProps: _extends({}, enablePositionBasedPointerInteraction ? {} : interactionProps, {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,
       'data-faded': isFaded || undefined,
-      'data-series-id': seriesId
+      'data-series-id': seriesId,
+      'data-series': seriesId
     }),
-    className: `${classes.line} ${deprecatedClasses.root}`,
+    className: classes.line,
     ownerState
   });
   return /*#__PURE__*/_jsx(Line, _extends({}, other, lineProps));

package/LineChart/LineHighlightElement.d.mts

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