@mui/x-charts 8.1.0 → 8.3.0

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/ChartsReferenceLine/ChartsReferenceLine.js

@@ -12,10 +12,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__*/_jsx(ChartsXReferenceLine, _extends({}, props));

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

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

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

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

package/esm/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/esm/ChartsTooltip/ChartsTooltipContainer.js

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

package/esm/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/esm/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/esm/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/esm/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/esm/LineChart/AppearingMask.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import clsx from 'clsx';
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { cleanId } from "../internals/cleanId.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
@@ -34,7 +33,7 @@ export function AppearingMask(props) {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
       children: /*#__PURE__*/_jsx(AnimatedRect, {
-        className: clsx(!props.skipAnimation && appearingMaskClasses.animate),
+        className: props.skipAnimation ? '' : appearingMaskClasses.animate,
         x: 0,
         y: 0,
         width: drawingArea.left + drawingArea.width + drawingArea.right,

package/esm/LineChart/AreaPlot.js

@@ -71,10 +71,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 === 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 === 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 && isBandScale(xScale);

package/esm/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/esm/LineChart/CircleMarkElement.js

@@ -2,17 +2,13 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 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.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
 import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
-import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Circle = styled('circle')({
   [`&.${markElementClasses.animate}`]: {
@@ -43,7 +39,9 @@ function CircleMarkElement(props) {
       color,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -52,18 +50,10 @@ function CircleMarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const store = useStore();
-  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation

package/esm/LineChart/LineChart.js

@@ -166,7 +166,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.func,
   /**

package/esm/LineChart/LineHighlightPlot.js

@@ -79,7 +79,7 @@ function LineHighlightPlot(props) {
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === 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 === 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/esm/LineChart/LinePlot.js

@@ -70,10 +70,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 === 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 === 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) {
-            warnOnce(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
+            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 && isBandScale(xScale);

package/esm/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/esm/LineChart/MarkElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -10,11 +10,7 @@ import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-
 import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
-import { useSelector } from "../internals/store/useSelector.js";
-import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
@@ -52,7 +48,9 @@ function MarkElement(props) {
       shape,
       dataIndex,
       onClick,
-      skipAnimation
+      skipAnimation,
+      isFaded = false,
+      isHighlighted = false
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -60,18 +58,10 @@ function MarkElement(props) {
     seriesId: id,
     dataIndex
   });
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlighted({
-    seriesId: id
-  });
-  const store = useStore();
-  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
+    isHighlighted,
     isFaded,
     color,
     skipAnimation
@@ -100,6 +90,16 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    */
   dataIndex: PropTypes.number.isRequired,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If `true`, the marker is faded.
+   * @default false
+   */
+  isFaded: PropTypes.bool,
+  /**
+   * If `true`, the marker is highlighted.
+   * @default false
+   */
+  isHighlighted: PropTypes.bool,
   /**
    * The shape of the marker.
    */

package/esm/LineChart/MarkPlot.js

@@ -5,6 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useChartId } from "../hooks/useChartId.js";
@@ -15,8 +16,9 @@ import { CircleMarkElement } from "./CircleMarkElement.js";
 import getColor from "./seriesConfig/getColor.js";
 import { MarkElement } from "./MarkElement.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { useXAxes, useYAxes } from "../hooks/index.js";
+import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.js";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.js";
+import { useSelector } from "../internals/store/useSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -49,8 +51,14 @@ function MarkPlot(props) {
   } = useYAxes();
   const chartId = useChartId();
   const {
-    instance
+    instance,
+    store
   } = useChartContext();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlightedGetter();
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   if (seriesData === undefined) {
     return null;
   }
@@ -80,12 +88,18 @@ function MarkPlot(props) {
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === 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 === 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 = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         const Mark = slots?.mark ?? (shape === 'circle' ? CircleMarkElement : MarkElement);
+        const isSeriesHighlighted = isHighlighted({
+          seriesId
+        });
+        const isSeriesFaded = !isSeriesHighlighted && isFaded({
+          seriesId
+        });
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -143,7 +157,9 @@ function MarkPlot(props) {
                 type: 'line',
                 seriesId,
                 dataIndex: index
-              }))
+              })),
+              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })
         }, seriesId);

package/esm/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/esm/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/esm/LineChart/seriesConfig/seriesProcessor.js

@@ -30,7 +30,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 = {};
@@ -57,7 +57,7 @@ const seriesProcessor = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production') {
               if (value !== null) {
-                warnOnce([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+                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/esm/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/esm/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/esm/PieChart/PieArcLabel.js

@@ -59,8 +59,7 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
       startAngle,
       endAngle,
       paddingAngle,
-      innerRadius,
-      outerRadius,
+      arcLabelRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
@@ -81,8 +80,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
     cornerRadius,
     startAngle,
     endAngle,
-    innerRadius,
-    outerRadius,
+    innerRadius: arcLabelRadius,
+    outerRadius: arcLabelRadius,
     paddingAngle,
     skipAnimation,
     ref

package/esm/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/esm/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;

package/esm/RadarChart/RadarGrid/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./RadarGrid.js";
-export type { RadarGridProps } from './RadarGrid.types';
+export type { RadarGridProps } from "./RadarGrid.types.js";

package/esm/RadarChart/RadarSeriesPlot/index.d.ts

@@ -1,6 +1,6 @@
 export * from "./RadarSeriesPlot.js";
-export type * from './RadarSeriesPlot.types';
+export type * from "./RadarSeriesPlot.types.js";
 export { RadarSeriesArea } from "./RadarSeriesArea.js";
 export { RadarSeriesMarks } from "./RadarSeriesMarks.js";
-export type { RadarSeriesPlotClasses, RadarSeriesPlotClassKey } from './radarSeriesPlotClasses';
+export type { RadarSeriesPlotClasses, RadarSeriesPlotClassKey } from "./radarSeriesPlotClasses.js";
 export { radarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";