npm - @mui/x-charts - Versions diffs - 9.0.0-alpha.4 → 9.0.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (242) hide show

package/Gauge/Gauge.js CHANGED Viewed

@@ -85,10 +85,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default 360
    */
   endAngle: _propTypes.default.number,
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/Gauge/Gauge.mjs CHANGED Viewed

@@ -78,10 +78,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default 360
    */
   endAngle: PropTypes.number,
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/Gauge/GaugeContainer.d.mts CHANGED Viewed

@@ -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' | '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 CHANGED Viewed

@@ -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' | '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 CHANGED Viewed

@@ -126,10 +126,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default 360
    */
   endAngle: _propTypes.default.number,
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/Gauge/GaugeContainer.mjs CHANGED Viewed

@@ -119,10 +119,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default 360
    */
   endAngle: PropTypes.number,
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/LineChart/AreaElement.js CHANGED Viewed

@@ -14,6 +14,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 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");
@@ -39,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
@@ -60,7 +64,7 @@ function AreaElement(props) {
   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,

package/LineChart/AreaElement.mjs CHANGED Viewed

@@ -8,6 +8,8 @@ import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 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";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -32,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
@@ -53,7 +57,7 @@ function AreaElement(props) {
   const areaProps = useSlotProps({
     elementType: Area,
     externalSlotProps: slotProps?.area,
-    additionalProps: _extends({}, interactionProps, {
+    additionalProps: _extends({}, enablePositionBasedPointerInteraction ? {} : interactionProps, {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,

package/LineChart/CircleMarkElement.js CHANGED Viewed

@@ -12,8 +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 _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"];
@@ -58,17 +60,19 @@ 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 theme = (0, _styles.useTheme)();
   const classes = (0, _lineClasses.useUtilityClasses)({
     skipAnimation,
     classes: innerClasses
   });
-  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,
@@ -78,8 +82,7 @@ function CircleMarkElement(props) {
     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,

package/LineChart/CircleMarkElement.mjs CHANGED Viewed

@@ -6,8 +6,10 @@ 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 { 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', {
@@ -51,17 +53,19 @@ 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 theme = useTheme();
   const classes = useLineUtilityClasses({
     skipAnimation,
     classes: innerClasses
   });
-  return /*#__PURE__*/_jsx(Circle, _extends({}, other, {
+  return /*#__PURE__*/_jsx(Circle, _extends({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
     cx: x,
     cy: y,
     r: 5,
@@ -71,8 +75,7 @@ function CircleMarkElement(props) {
     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,

package/LineChart/LineChart.js CHANGED Viewed

@@ -144,7 +144,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: _propTypes.default.object,
+  experimentalFeatures: _propTypes.default.shape({
+    enablePositionBasedPointerInteraction: _propTypes.default.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -409,7 +411,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -468,7 +470,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
       tickLabelStyle: _propTypes.default.object,
       tickSize: _propTypes.default.number
     })),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -517,7 +519,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -564,7 +566,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -610,7 +612,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -656,7 +658,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -702,7 +704,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -752,7 +754,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -802,7 +804,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
     domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
-    height: _propTypes.default.number,
+    height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]),
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     ignoreTooltip: _propTypes.default.bool,
@@ -894,7 +896,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -952,7 +954,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -997,7 +999,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1043,7 +1045,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1088,7 +1090,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1133,7 +1135,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1182,7 +1184,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1231,7 +1233,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
@@ -1276,6 +1278,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickSize: _propTypes.default.number,
     tickSpacing: _propTypes.default.number,
     valueFormatter: _propTypes.default.func,
-    width: _propTypes.default.number
+    width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number])
   })]).isRequired)
 } : void 0;

package/LineChart/LineChart.mjs CHANGED Viewed

@@ -137,7 +137,9 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.object,
+  experimentalFeatures: PropTypes.shape({
+    enablePositionBasedPointerInteraction: PropTypes.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -402,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,
@@ -461,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,
@@ -510,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,
@@ -557,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,
@@ -603,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,
@@ -649,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,
@@ -695,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,
@@ -745,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,
@@ -795,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,
@@ -887,7 +889,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -945,7 +947,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -990,7 +992,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1036,7 +1038,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1081,7 +1083,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1126,7 +1128,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1175,7 +1177,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1224,7 +1226,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])
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
@@ -1269,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.js CHANGED Viewed

@@ -15,6 +15,8 @@ var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 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"];
@@ -40,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
@@ -62,7 +66,7 @@ function LineElement(props) {
   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,

package/LineChart/LineElement.mjs CHANGED Viewed

@@ -9,6 +9,8 @@ import useSlotProps from '@mui/utils/useSlotProps';
 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";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -33,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
@@ -55,7 +59,7 @@ function LineElement(props) {
   const lineProps = useSlotProps({
     elementType: Line,
     externalSlotProps: slotProps?.line,
-    additionalProps: _extends({}, interactionProps, {
+    additionalProps: _extends({}, enablePositionBasedPointerInteraction ? {} : interactionProps, {
       onClick,
       cursor: onClick ? 'pointer' : 'unset',
       'data-highlighted': isHighlighted || undefined,

package/LineChart/MarkElement.js CHANGED Viewed

@@ -14,8 +14,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 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 _useChartExperimentalFeature = require("../internals/plugins/corePlugins/useChartExperimentalFeature");
+var _useStore = require("../internals/store/useStore");
+var _getSymbol = require("../internals/getSymbol");
 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"];
@@ -59,6 +61,8 @@ function MarkElement(props) {
       style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const store = (0, _useStore.useStore)();
+  const enablePositionBasedPointerInteraction = store.use(_useChartExperimentalFeature.selectorChartExperimentalFeaturesState)?.enablePositionBasedPointerInteraction;
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'line',
     seriesId,
@@ -75,7 +79,7 @@ function MarkElement(props) {
     skipAnimation,
     classes: innerClasses
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, enablePositionBasedPointerInteraction ? {} : interactionProps, {
     style: (0, _extends2.default)({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
@@ -85,8 +89,7 @@ function MarkElement(props) {
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     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,