@mui/x-charts 8.1.0 → 8.3.0

package/ChartsLabel/labelClasses.d.ts

@@ -1,4 +1,4 @@
-import type { ChartsLabelProps } from './ChartsLabel';
+import type { ChartsLabelProps } from "./ChartsLabel.js";
 export interface ChartsLabelClasses {
   /** Styles applied to the root element. */
   root: string;

package/ChartsLabel/labelGradientClasses.d.ts

@@ -1,4 +1,4 @@
-import type { ChartsLabelGradientProps } from './ChartsLabelGradient';
+import type { ChartsLabelGradientProps } from "./ChartsLabelGradient.js";
 export interface ChartsLabelGradientClasses {
   /** Styles applied to the root element. */
   root: string;

package/ChartsLabel/labelMarkClasses.d.ts

@@ -1,4 +1,4 @@
-import type { ChartsLabelMarkProps } from './ChartsLabelMark';
+import type { ChartsLabelMarkProps } from "./ChartsLabelMark.js";
 export interface ChartsLabelMarkClasses {
   /** Styles applied to the root element. */
   root: string;

package/ChartsLegend/ChartsLegend.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-import type { Direction } from './direction';
+import type { Direction } from "./direction.js";
 import { SeriesLegendItemContext } from "./legendContext.types.js";
 import { type ChartsLegendClasses } from "./chartsLegendClasses.js";
 export interface ChartsLegendProps {
@@ -23,5 +23,5 @@ export interface ChartsLegendProps {
   className?: string;
   sx?: SxProps<Theme>;
 }
-declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
+declare const ChartsLegend: React.ForwardRefExoticComponent<ChartsLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ChartsLegend };

package/ChartsLegend/ContinuousColorLegend.d.ts

@@ -52,5 +52,5 @@ export interface ContinuousColorLegendProps extends ColorLegendSelector, AppendK
   className?: string;
   sx?: SxProps<Theme>;
 }
-declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
+declare const ContinuousColorLegend: React.ForwardRefExoticComponent<ContinuousColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { ContinuousColorLegend };

package/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -38,5 +38,5 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, PrependK
   className?: string;
   sx?: SxProps<Theme>;
 }
-declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
+declare const PiecewiseColorLegend: React.ForwardRefExoticComponent<PiecewiseColorLegendProps & import("./chartsLegend.types.js").ChartsLegendSlotExtension & React.RefAttributes<{}>>;
 export { PiecewiseColorLegend };

package/ChartsLegend/chartsLegend.types.d.ts

@@ -1,4 +1,4 @@
-import type { ChartsLegendProps } from './ChartsLegend';
+import type { ChartsLegendProps } from "./ChartsLegend.js";
 import { ContinuousColorLegendProps } from "./ContinuousColorLegend.js";
 import { ChartsLegendPosition } from "./legend.types.js";
 import { PiecewiseColorLegendProps } from "./PiecewiseColorLegend.js";

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -1,5 +1,5 @@
-import type { ChartsLegendProps } from './ChartsLegend';
-import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+import type { ChartsLegendProps } from "./ChartsLegend.js";
+import type { ChartsLegendSlotExtension } from "./chartsLegend.types.js";
 export interface ChartsLegendClasses {
   /** Styles applied to the root element. */
   root: string;

package/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -1,5 +1,5 @@
-import type { ContinuousColorLegendProps } from './ContinuousColorLegend';
-import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+import type { ContinuousColorLegendProps } from "./ContinuousColorLegend.js";
+import type { ChartsLegendSlotExtension } from "./chartsLegend.types.js";
 export interface ContinuousColorLegendClasses {
   /** Styles applied to the root element. */
   root: string;

package/ChartsLegend/index.d.ts

@@ -3,14 +3,14 @@ export * from "./chartsLegend.types.js";
 export * from "./direction.js";
 export * from "./legendContext.types.js";
 export { legendClasses } from "./chartsLegendClasses.js";
-export type { ChartsLegendClasses } from './chartsLegendClasses';
+export type { ChartsLegendClasses } from "./chartsLegendClasses.js";
 export * from "./ContinuousColorLegend.js";
 export * from "./colorLegend.types.js";
 export { continuousColorLegendClasses } from "./continuousColorLegendClasses.js";
-export type { ContinuousColorLegendClasses } from './continuousColorLegendClasses';
+export type { ContinuousColorLegendClasses } from "./continuousColorLegendClasses.js";
 export * from "./PiecewiseColorLegend.js";
 export { piecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
-export type { PiecewiseColorLegendClasses } from './piecewiseColorLegendClasses';
+export type { PiecewiseColorLegendClasses } from "./piecewiseColorLegendClasses.js";
 export { piecewiseColorDefaultLabelFormatter } from "./piecewiseColorDefaultLabelFormatter.js";
-export type { PiecewiseLabelFormatterParams } from './piecewiseColorLegend.types';
+export type { PiecewiseLabelFormatterParams } from "./piecewiseColorLegend.types.js";
 export * from "./legend.types.js";

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -1,5 +1,5 @@
-import type { PiecewiseColorLegendProps } from './PiecewiseColorLegend';
-import type { ChartsLegendSlotExtension } from './chartsLegend.types';
+import type { PiecewiseColorLegendProps } from "./PiecewiseColorLegend.js";
+import type { ChartsLegendSlotExtension } from "./chartsLegend.types.js";
 export interface PiecewiseColorLegendClasses {
   /** Styles applied to the root element. */
   root: string;

package/ChartsLegend/useAxis.d.ts

@@ -1,4 +1,4 @@
-import { AxisDefaultized } from "../models/axis.js";
+import { ComputedAxis } from "../models/axis.js";
 import { ZAxisDefaultized } from "../models/z-axis.js";
 import { ColorLegendSelector } from "./colorLegend.types.js";
 /**
@@ -7,4 +7,4 @@ import { ColorLegendSelector } from "./colorLegend.types.js";
 export declare function useAxis({
   axisDirection,
   axisId
-}: ColorLegendSelector): ZAxisDefaultized | AxisDefaultized;
+}: ColorLegendSelector): ZAxisDefaultized | ComputedAxis;

package/ChartsLocalizationProvider/ChartsLocalizationProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ChartsLocaleText } from '../locales/utils/chartsLocaleTextApi';
+import type { ChartsLocaleText } from "../locales/utils/chartsLocaleTextApi.js";
 export interface ChartsLocalizationContextValue {
   localeText: ChartsLocaleText;
 }

package/ChartsLocalizationProvider/index.d.ts

@@ -1,2 +1,2 @@
 export { ChartsLocalizationProvider } from "./ChartsLocalizationProvider.js";
-export type { ChartsLocalizationProviderProps } from './ChartsLocalizationProvider';
+export type { ChartsLocalizationProviderProps } from "./ChartsLocalizationProvider.js";

package/ChartsOverlay/ChartsLoadingOverlay.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { CommonOverlayProps } from './ChartsOverlay';
+import type { CommonOverlayProps } from "./ChartsOverlay.js";
 export declare function ChartsLoadingOverlay(props: CommonOverlayProps): React.JSX.Element;

package/ChartsOverlay/ChartsNoDataOverlay.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { CommonOverlayProps } from './ChartsOverlay';
+import type { CommonOverlayProps } from "./ChartsOverlay.js";
 export declare function ChartsNoDataOverlay(props: CommonOverlayProps): React.JSX.Element;

package/ChartsOverlay/index.d.ts

@@ -1,4 +1,4 @@
 export { ChartsOverlay } from "./ChartsOverlay.js";
-export type { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from './ChartsOverlay';
+export type { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "./ChartsOverlay.js";
 export { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
 export { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";

package/ChartsReferenceLine/ChartsReferenceLine.js

@@ -19,10 +19,10 @@ function ChartsReferenceLine(props) {
     y
   } = props;
   if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X: The ChartsReferenceLine cannot have both `x` and `y` props set.');
+    throw new Error('MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.');
   }
   if (x === undefined && y === undefined) {
-    throw new Error('MUI X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (x !== undefined) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsXReferenceLine.ChartsXReferenceLine, (0, _extends2.default)({}, props));

package/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -76,7 +76,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`, 'error');
+      (0, _warning.warnOnce)(`MUI X Charts: the value ${x} does not exist in the data of x axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -76,7 +76,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      (0, _warning.warnOnce)(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`, 'error');
+      (0, _warning.warnOnce)(`MUI X Charts: the value ${y} does not exist in the data of y axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/ChartsText/index.d.ts

@@ -1,3 +1,3 @@
 export { ChartsText } from "./ChartsText.js";
-export type { ChartsTextProps } from './ChartsText';
-export type { ChartsTextStyle } from '../internals/getWordsByLines';
+export type { ChartsTextProps } from "./ChartsText.js";
+export type { ChartsTextStyle } from "../internals/getWordsByLines.js";

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -105,6 +105,7 @@ function ChartsTooltipContainer(inProps) {
     options: {
       offset: () => {
         if (pointerType?.pointerType !== 'touch') {
+          // The popper offset: [skidding, distance]
           return [0, 8];
         }
         return [0, 64];

package/ChartsTooltip/index.d.ts

@@ -1,12 +1,12 @@
 export * from "./ChartsTooltip.js";
 export * from "./ChartsTooltipContainer.js";
-export type { ChartsTooltipClasses, ChartsTooltipClassKey } from './chartsTooltipClasses';
+export type { ChartsTooltipClasses, ChartsTooltipClassKey } from "./chartsTooltipClasses.js";
 export { getChartsTooltipUtilityClass, chartsTooltipClasses } from "./chartsTooltipClasses.js";
 export * from "./ChartsAxisTooltipContent.js";
 export * from "./ChartsItemTooltipContent.js";
 export * from "./ChartsTooltipTable.js";
-export type { ItemTooltip } from '../internals/plugins/models/seriesConfig/tooltipGetter.types';
-export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from './useItemTooltip';
+export type { ItemTooltip } from "../internals/plugins/models/seriesConfig/tooltipGetter.types.js";
+export type { UseItemTooltipReturnValue, UseRadarItemTooltipReturnValue } from "./useItemTooltip.js";
 export { useItemTooltip, useRadarItemTooltip } from "./useItemTooltip.js";
 export * from "./useAxisTooltip.js";
 export * from "./useAxesTooltip.js";

package/ChartsTooltip/useAxisTooltip.d.ts

@@ -1,10 +1,10 @@
 import { SeriesId } from "../models/seriesType/common.js";
 import { CartesianChartSeriesType, ChartsSeriesConfig, PolarChartSeriesType } from "../models/seriesType/config.js";
-import { AxisDefaultized, PolarAxisDefaultized, AxisId } from "../models/axis.js";
+import { ComputedAxis, PolarAxisDefaultized, AxisId } from "../models/axis.js";
 import { ChartsLabelMarkProps } from "../ChartsLabel/index.js";
 export interface UseAxisTooltipReturnValue<SeriesT extends CartesianChartSeriesType | PolarChartSeriesType = CartesianChartSeriesType | PolarChartSeriesType, AxisValueT extends string | number | Date = string | number | Date> {
   axisDirection: SeriesT extends CartesianChartSeriesType ? 'x' | 'y' : 'rotation' | 'radius';
-  mainAxis: SeriesT extends CartesianChartSeriesType ? AxisDefaultized : PolarAxisDefaultized;
+  mainAxis: SeriesT extends CartesianChartSeriesType ? ComputedAxis : PolarAxisDefaultized;
   axisId: AxisId;
   axisValue: AxisValueT;
   axisFormattedValue: string;

package/LineChart/AnimatedArea.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AreaElementOwnerState } from './AreaElement';
+import type { AreaElementOwnerState } from "./AreaElement.js";
 export interface AnimatedAreaProps extends React.ComponentPropsWithoutRef<'path'> {
   ownerState: AreaElementOwnerState;
   d: string;

package/LineChart/AnimatedLine.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { LineElementOwnerState } from './LineElement';
+import type { LineElementOwnerState } from "./LineElement.js";
 export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'> {
   ownerState: LineElementOwnerState;
   d: string;

package/LineChart/AppearingMask.js

@@ -11,7 +11,6 @@ exports.appearingMaskClasses = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _animation = require("../internals/animation/animation");
 var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
@@ -42,7 +41,7 @@ function AppearingMask(props) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {
       id: clipId,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedRect, {
-        className: (0, _clsx.default)(!props.skipAnimation && appearingMaskClasses.animate),
+        className: props.skipAnimation ? '' : appearingMaskClasses.animate,
         x: 0,
         y: 0,
         width: drawingArea.left + drawingArea.width + drawingArea.right,

package/LineChart/AreaPlot.js

@@ -78,10 +78,10 @@ const useAggregatedData = () => {
         const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+            throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
           }
         }
         const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);

package/LineChart/CircleMarkElement.d.ts

@@ -10,6 +10,16 @@ export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'is
    * The index to the element in the series' data array.
    */
   dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
 };
 /**
  * The line mark element that only render circle for performance improvement.

package/LineChart/CircleMarkElement.js

@@ -14,13 +14,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/store/useSelector");
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
-var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 const Circle = (0, _styles.styled)('circle')({
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
@@ -50,7 +46,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
@@ -59,18 +57,10 @@ function CircleMarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)({
-    seriesId: id
-  });
-  const store = (0, _useStore.useStore)();
-  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation

package/LineChart/LineChart.js

@@ -173,7 +173,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The function called for onClick events.
    * The second argument contains information about all line/bar elements at the current mouse position.
    * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element.
-   * @param {null | AxisData} data The data about the clicked axis and items associated with it.
+   * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
   /**

package/LineChart/LineHighlightPlot.js

@@ -86,7 +86,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale

package/LineChart/LinePlot.js

@@ -77,10 +77,10 @@ const useAggregatedData = () => {
         const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
         if (process.env.NODE_ENV !== 'production') {
           if (xData === undefined) {
-            throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
           }
           if (xData.length < stackedData.length) {
-            (0, _warning.warnOnce)(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
+            (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
           }
         }
         const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);

package/LineChart/MarkElement.d.ts

@@ -14,6 +14,16 @@ export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighli
    * The index to the element in the series' data array.
    */
   dataIndex: number;
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded?: boolean;
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted?: boolean;
 };
 /**
  * Demos:

package/LineChart/MarkElement.js

@@ -16,13 +16,9 @@ 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 _useItemHighlighted = require("../hooks/useItemHighlighted");
-var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _markElementClasses = require("./markElementClasses");
-var _useSelector = require("../internals/store/useSelector");
-var _useStore = require("../internals/store/useStore");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 const MarkElementPath = (0, _styles.styled)('path', {
   name: 'MuiMarkElement',
   slot: 'Root'
@@ -59,7 +55,9 @@ function MarkElement(props) {
       shape,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -67,18 +65,10 @@ function MarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlighted.useItemHighlighted)({
-    seriesId: id
-  });
-  const store = (0, _useStore.useStore)();
-  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation
@@ -107,6 +97,16 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    */
   dataIndex: _propTypes.default.number.isRequired,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded: _propTypes.default.bool,
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted: _propTypes.default.bool,
   /**
    * The shape of the marker.
    */

package/LineChart/MarkPlot.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
+var _useChartCartesianInteraction = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors");
 var _constants = require("../constants");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartId = require("../hooks/useChartId");
@@ -23,6 +24,7 @@ var _MarkElement = require("./MarkElement");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useSelector = require("../internals/store/useSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 /**
@@ -56,8 +58,14 @@ function MarkPlot(props) {
   } = (0, _hooks.useYAxes)();
   const chartId = (0, _useChartId.useChartId)();
   const {
-    instance
+    instance,
+    store
   } = (0, _ChartProvider.useChartContext)();
+  const {
+    isFaded,
+    isHighlighted
+  } = (0, _hooks.useItemHighlightedGetter)();
+  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianInteraction.selectorChartsInteractionXAxisIndex);
   if (seriesData === undefined) {
     return null;
   }
@@ -87,12 +95,18 @@ function MarkPlot(props) {
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          throw new Error(`MUI X Charts: ${xAxisId === _constants.DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
         }
         const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
+        const isSeriesHighlighted = isHighlighted({
+          seriesId
+        });
+        const isSeriesFaded = !isSeriesHighlighted && isFaded({
+          seriesId
+        });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -150,7 +164,9 @@ function MarkPlot(props) {
                 type: 'line',
                 seriesId,
                 dataIndex: index
-              }))
+              })),
+              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })
         }, seriesId);

package/LineChart/index.d.ts

@@ -9,5 +9,5 @@ export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
 export * from "./LineHighlightElement.js";
-export type { MarkElementClasses, MarkElementClassKey } from './markElementClasses';
+export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
 export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/LineChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'line'>;
 export default getSeriesWithDefaultValues;

package/LineChart/seriesConfig/seriesProcessor.js

@@ -37,7 +37,7 @@ const seriesProcessor = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI X: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X Charts: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -64,7 +64,7 @@ const seriesProcessor = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production') {
               if (value !== null) {
-                (0, _warning.warnOnce)([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+                (0, _warning.warnOnce)([`MUI X Charts: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
               }
             }
             return null;

package/LineChart/seriesConfig/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from '../../internals/plugins/models';
+import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
 declare const tooltipGetter: TooltipGetter<'line'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'line', 'x' | 'y'>;
 export default tooltipGetter;

package/LineChart/useLineChartProps.d.ts

@@ -7,11 +7,11 @@ import { ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import { ChartsOverlayProps } from "../ChartsOverlay/index.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { AreaPlotProps } from "./AreaPlot.js";
-import type { LineChartProps } from './LineChart';
+import type { LineChartProps } from "./LineChart.js";
 import { LineHighlightPlotProps } from "./LineHighlightPlot.js";
 import { LinePlotProps } from "./LinePlot.js";
 import { MarkPlotProps } from "./MarkPlot.js";
-import type { ChartsWrapperProps } from '../internals/components/ChartsWrapper';
+import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
 import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
 /**
  * A helper function that extracts LineChartProps from the input props

package/PieChart/PieArcLabel.js

@@ -68,8 +68,7 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -90,8 +89,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     cornerRadius,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius,
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius,
     paddingAngle,
     skipAnimation,
     ref

package/PieChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from '../../internals/plugins/models/seriesConfig';
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'pie'>;
 export default getSeriesWithDefaultValues;

package/PieChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipGetter } from '../../internals/plugins/models';
+import type { TooltipGetter } from "../../internals/plugins/models/index.js";
 declare const tooltipGetter: TooltipGetter<'pie'>;
 export default tooltipGetter;