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

package/Gauge/Gauge.js

@@ -75,6 +75,10 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * The end angle (deg).
@@ -128,6 +132,10 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   startAngle: _propTypes.default.number,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   text: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The value of the gauge.

package/Gauge/Gauge.mjs

@@ -68,6 +68,10 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * The end angle (deg).
@@ -121,6 +125,10 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   startAngle: PropTypes.number,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   text: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The value of the gauge.

package/Gauge/GaugeContainer.d.mts

@@ -3,7 +3,7 @@ import { type ChartsSurfaceProps } from "../ChartsSurface/index.mjs";
 import { type GaugeProviderProps } from "./GaugeProvider.mjs";
 import { type MergeSignaturesProperty } from "../internals/plugins/models/index.mjs";
 import { type ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.mjs";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures' | 'seriesConfig'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'seriesConfig' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Gauge/GaugeContainer.d.ts

@@ -3,7 +3,7 @@ import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { type GaugeProviderProps } from "./GaugeProvider.js";
 import { type MergeSignaturesProperty } from "../internals/plugins/models/index.js";
 import { type ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures' | 'seriesConfig'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'seriesConfig' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Gauge/GaugeContainer.js

@@ -14,7 +14,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _ChartsSurface = require("../ChartsSurface");
 var _GaugeProvider = require("./GaugeProvider");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
@@ -48,7 +48,7 @@ const GaugeContainer = exports.GaugeContainer = /*#__PURE__*/React.forwardRef(fu
       children
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsProvider.ChartsProvider, {
     pluginParams: {
       width: inWidth,
       height: inHeight,
@@ -116,6 +116,10 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * The end angle (deg).
@@ -168,6 +172,10 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   startAngle: _propTypes.default.number,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The value of the gauge.

package/Gauge/GaugeContainer.mjs

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
 import { GaugeProvider } from "./GaugeProvider.mjs";
-import { ChartProvider } from "../context/ChartProvider/index.mjs";
+import { ChartsProvider } from "../context/ChartsProvider/index.mjs";
 import { defaultizeMargin } from "../internals/defaultizeMargin.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GStyled = styled('g', {
@@ -41,7 +41,7 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx(ChartProvider, {
+  return /*#__PURE__*/_jsx(ChartsProvider, {
     pluginParams: {
       width: inWidth,
       height: inHeight,
@@ -109,6 +109,10 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * The '100%' is the height the drawing area.
    */
   cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * The end angle (deg).
@@ -161,6 +165,10 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    */
   startAngle: PropTypes.number,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The value of the gauge.

package/Gauge/index.d.mts

@@ -3,5 +3,6 @@ export * from "./GaugeContainer.mjs";
 export * from "./GaugeValueText.mjs";
 export * from "./GaugeValueArc.mjs";
 export * from "./GaugeReferenceArc.mjs";
-export * from "./gaugeClasses.mjs";
+export { gaugeClasses } from "./gaugeClasses.mjs";
+export type { GaugeClasses, GaugeClassKey } from "./gaugeClasses.mjs";
 export { useGaugeState } from "./GaugeProvider.mjs";

package/Gauge/index.d.ts

@@ -3,5 +3,6 @@ export * from "./GaugeContainer.js";
 export * from "./GaugeValueText.js";
 export * from "./GaugeValueArc.js";
 export * from "./GaugeReferenceArc.js";
-export * from "./gaugeClasses.js";
+export { gaugeClasses } from "./gaugeClasses.js";
+export type { GaugeClasses, GaugeClassKey } from "./gaugeClasses.js";
 export { useGaugeState } from "./GaugeProvider.js";

package/Gauge/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  gaugeClasses: true,
   useGaugeState: true
 };
+Object.defineProperty(exports, "gaugeClasses", {
+  enumerable: true,
+  get: function () {
+    return _gaugeClasses.gaugeClasses;
+  }
+});
 Object.defineProperty(exports, "useGaugeState", {
   enumerable: true,
   get: function () {
@@ -73,15 +80,4 @@ Object.keys(_GaugeReferenceArc).forEach(function (key) {
   });
 });
 var _gaugeClasses = require("./gaugeClasses");
-Object.keys(_gaugeClasses).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gaugeClasses[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gaugeClasses[key];
-    }
-  });
-});
 var _GaugeProvider = require("./GaugeProvider");

package/Gauge/index.mjs

@@ -3,5 +3,5 @@ export * from "./GaugeContainer.mjs";
 export * from "./GaugeValueText.mjs";
 export * from "./GaugeValueArc.mjs";
 export * from "./GaugeReferenceArc.mjs";
-export * from "./gaugeClasses.mjs";
+export { gaugeClasses } from "./gaugeClasses.mjs";
 export { useGaugeState } from "./GaugeProvider.mjs";

package/LineChart/AreaElement.d.mts

@@ -2,48 +2,15 @@ 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;
-  /**
-   * 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: `.${areaElementClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
-export type AreaElementClassKey = keyof AreaElementClasses;
+import { type LineClasses } from "./lineClasses.mjs";
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
   isHighlighted: boolean;
-  classes?: Partial<AreaElementClasses>;
+  classes?: Partial<LineClasses>;
 }
-/**
- * @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 {
   /**
    * The component that renders the area.

package/LineChart/AreaElement.d.ts

@@ -2,48 +2,15 @@ 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;
-  /**
-   * 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: `.${areaElementClasses.series}-${seriesId}`.
-   */
-  series: string;
-}
-/**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
- */
-export type AreaElementClassKey = keyof AreaElementClasses;
+import { type LineClasses } from "./lineClasses.js";
 export interface AreaElementOwnerState {
   seriesId: SeriesId;
   color: string;
   gradientId?: string;
   isFaded: boolean;
   isHighlighted: boolean;
-  classes?: Partial<AreaElementClasses>;
+  classes?: Partial<LineClasses>;
 }
-/**
- * @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 {
   /**
    * The component that renders the area.

package/LineChart/AreaElement.js

@@ -7,55 +7,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AreaElement = AreaElement;
-exports.areaElementClasses = void 0;
-exports.getAreaElementUtilityClass = getAreaElementUtilityClass;
 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 _useItemHighlightState = require("../hooks/useItemHighlightState");
+var _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
+var _useStore = require("../internals/store/useStore");
 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']);
-
-/**
- * @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, getAreaElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -77,6 +41,8 @@ function AreaElement(props) {
       onClick
     } = 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
@@ -94,19 +60,19 @@ function AreaElement(props) {
     isHighlighted
   };
   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, {
+    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.area} ${deprecatedClasses.root}`,
+    className: classes.area,
     ownerState
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Area, (0, _extends2.default)({}, other, areaProps));

package/LineChart/AreaElement.mjs

@@ -5,50 +5,14 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["seriesId", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
 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 { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
+import { selectorChartExperimentalFeaturesState } from "../internals/plugins/corePlugins/useChartExperimentalFeature/index.mjs";
+import { useStore } from "../internals/store/useStore.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']);
-
-/**
- * @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, getAreaElementUtilityClass, classes);
-};
 /**
  * Demos:
  *
@@ -70,6 +34,8 @@ function AreaElement(props) {
       onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const store = useStore();
+  const enablePositionBasedPointerInteraction = store.use(selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const identifier = React.useMemo(() => ({
     type: 'line',
     seriesId
@@ -87,19 +53,19 @@ function AreaElement(props) {
     isHighlighted
   };
   const classes = useLineUtilityClasses();
-  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
   const Area = slots?.area ?? AnimatedArea;
   const areaProps = useSlotProps({
     elementType: Area,
     externalSlotProps: slotProps?.area,
-    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.area} ${deprecatedClasses.root}`,
+    className: classes.area,
     ownerState
   });
   return /*#__PURE__*/_jsx(Area, _extends({}, other, areaProps));

package/LineChart/CircleMarkElement.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 CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.

package/LineChart/CircleMarkElement.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 CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref'> & {
   /**
    * If `true`, the marker is hidden.

package/LineChart/CircleMarkElement.js

@@ -12,9 +12,10 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _markElementClasses = require("./markElementClasses");
+var _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
+var _useStore = require("../internals/store/useStore");
+var _animation = require("../internals/animation/animation");
 var _lineClasses = require("./lineClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["x", "y", "seriesId", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
@@ -22,7 +23,7 @@ const Circle = (0, _styles.styled)('circle', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
-  [`&.${_markElementClasses.markElementClasses.animate}`]: {
+  [`&.${_lineClasses.lineClasses.markAnimate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'cx, cy, opacity',
     transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION
@@ -59,39 +60,33 @@ function CircleMarkElement(props) {
       hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _styles.useTheme)();
+  const store = (0, _useStore.useStore)();
+  const enablePositionBasedPointerInteraction = store.use(_useChartExperimentalFeature.selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
     seriesId,
     dataIndex
   });
-  const ownerState = {
-    seriesId,
-    classes: innerClasses,
-    isHighlighted,
-    isFaded,
-    skipAnimation
-  };
+  const theme = (0, _styles.useTheme)();
   const classes = (0, _lineClasses.useUtilityClasses)({
     skipAnimation,
     classes: innerClasses
   });
-  const deprecatedClasses = (0, _markElementClasses.useUtilityClasses)(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Circle, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
     cx: x,
     cy: y,
     r: 5,
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,
     strokeWidth: 2,
-    className: `${classes.mark} ${deprecatedClasses.root}`,
+    className: classes.mark,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
-    pointerEvents: hidden ? 'none' : undefined
-  }, interactionProps, {
+    pointerEvents: hidden ? 'none' : undefined,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
     "data-series-id": seriesId,
+    "data-series": seriesId,
     "data-index": dataIndex,
     opacity: hidden ? 0 : 1
   }));

package/LineChart/CircleMarkElement.mjs

@@ -6,16 +6,17 @@ const _excluded = ["x", "y", "seriesId", "classes", "color", "dataIndex", "onCli
 import * as React from 'react';
 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 as useDeprecatedUtilityClasses } from "./markElementClasses.mjs";
-import { useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
+import { selectorChartExperimentalFeaturesState } from "../internals/plugins/corePlugins/useChartExperimentalFeature/index.mjs";
+import { useStore } from "../internals/store/useStore.mjs";
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.mjs";
+import { lineClasses, useUtilityClasses as useLineUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Circle = styled('circle', {
   slot: 'internal',
   shouldForwardProp: undefined
 })({
-  [`&.${markElementClasses.animate}`]: {
+  [`&.${lineClasses.markAnimate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'cx, cy, opacity',
     transitionTimingFunction: ANIMATION_TIMING_FUNCTION
@@ -52,39 +53,33 @@ function CircleMarkElement(props) {
       hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const theme = useTheme();
+  const store = useStore();
+  const enablePositionBasedPointerInteraction = store.use(selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const interactionProps = useInteractionItemProps({
     type: 'line',
     seriesId,
     dataIndex
   });
-  const ownerState = {
-    seriesId,
-    classes: innerClasses,
-    isHighlighted,
-    isFaded,
-    skipAnimation
-  };
+  const theme = useTheme();
   const classes = useLineUtilityClasses({
     skipAnimation,
     classes: innerClasses
   });
-  const deprecatedClasses = useDeprecatedUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(Circle, _extends({}, other, {
+  return /*#__PURE__*/_jsx(Circle, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
     cx: x,
     cy: y,
     r: 5,
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,
     strokeWidth: 2,
-    className: `${classes.mark} ${deprecatedClasses.root}`,
+    className: classes.mark,
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
-    pointerEvents: hidden ? 'none' : undefined
-  }, interactionProps, {
+    pointerEvents: hidden ? 'none' : undefined,
     "data-highlighted": isHighlighted || undefined,
     "data-faded": isFaded || undefined,
     "data-series-id": seriesId,
+    "data-series": seriesId,
     "data-index": dataIndex,
     opacity: hidden ? 0 : 1
   }));