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

package/LineChart/seriesConfig/getItemAtPosition.mjs

@@ -0,0 +1,351 @@
+import { selectorChartXAxis, selectorChartYAxis } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisRendering.selectors.mjs";
+import { selectorAllSeriesOfType } from "../../internals/seriesSelectorOfType.mjs";
+import { getAxisIndex } from "../../internals/plugins/featurePlugins/useChartCartesianAxis/getAxisValue.mjs";
+import { isOrdinalScale } from "../../internals/scaleGuards.mjs";
+import { getValueToPositionMapper } from "../../hooks/getValueToPositionMapper.mjs";
+import { evaluateCurveY } from "./curveEvaluation.mjs";
+
+/**
+ * For a continuous x-axis, find the two data indices that bracket the pointer's x position.
+ * For ordinal axes, returns the single matching index (left === right).
+ * Returns null if the pointer is outside the data range.
+ */
+function getBracketIndices(xAxis, pointX) {
+  const {
+    scale,
+    data: axisData
+  } = xAxis;
+  if (!axisData || axisData.length === 0) {
+    return null;
+  }
+  if (isOrdinalScale(scale)) {
+    const index = getAxisIndex(xAxis, pointX);
+    if (index === -1) {
+      return null;
+    }
+    return {
+      left: index,
+      right: index
+    };
+  }
+
+  // For continuous axes, find the two adjacent data points surrounding pointX.
+  const xValue = scale.invert(pointX);
+  const xAsNumber = xValue instanceof Date ? xValue.getTime() : xValue;
+  const getAsNumber = v => v instanceof Date ? v.getTime() : v;
+
+  // Find the rightmost index where data[i] <= xValue.
+  let leftIndex = -1;
+  for (let i = 0; i < axisData.length; i += 1) {
+    if (getAsNumber(axisData[i]) <= xAsNumber) {
+      leftIndex = i;
+    } else {
+      break;
+    }
+  }
+  if (leftIndex === -1) {
+    // Pointer is before the first data point.
+    return null;
+  }
+  if (leftIndex === axisData.length - 1) {
+    // Pointer is at or after the last data point — check if it's close enough.
+    return {
+      left: leftIndex,
+      right: leftIndex
+    };
+  }
+  return {
+    left: leftIndex,
+    right: leftIndex + 1
+  };
+}
+
+/**
+ * Compute the pixel y0 (baseline) for a given data point,
+ * replicating the logic from useAreaPlotData.
+ */
+function getBaselinePixelY(baseline, yScale, stackedY0) {
+  if (typeof baseline === 'number') {
+    return yScale(baseline);
+  }
+  if (baseline === 'max') {
+    return yScale.range()[1];
+  }
+  if (baseline === 'min') {
+    return yScale.range()[0];
+  }
+  // Default: use the stacked baseline value.
+  const value = yScale(stackedY0);
+  if (Number.isNaN(value)) {
+    return yScale.range()[0];
+  }
+  return value;
+}
+
+// Collect the pixel-coordinate points for a contiguous (non-null) segment
+// of a series that contains the bracket indices.
+//
+// When connectNulls is true, all non-null points are returned.
+// When connectNulls is false, only the contiguous run containing [left, right] is returned.
+function collectCurvePoints(data, getPixelX, getPixelY, left, right, connectNulls) {
+  const points = [];
+  if (connectNulls) {
+    // All non-null points form one continuous curve.
+    for (let i = 0; i < data.length; i += 1) {
+      if (data[i] != null) {
+        const y = getPixelY(i);
+        if (y != null && !Number.isNaN(y)) {
+          points.push({
+            x: getPixelX(i),
+            y
+          });
+        }
+      }
+    }
+    return points;
+  }
+
+  // Find the contiguous non-null run containing [left, right].
+  let start = left;
+  while (start > 0 && data[start - 1] != null) {
+    start -= 1;
+  }
+  let end = right;
+  while (end < data.length - 1 && data[end + 1] != null) {
+    end += 1;
+  }
+  for (let i = start; i <= end; i += 1) {
+    const y = getPixelY(i);
+    if (y != null && !Number.isNaN(y)) {
+      points.push({
+        x: getPixelX(i),
+        y
+      });
+    }
+  }
+  return points;
+}
+
+/**
+ * The maximum pixel distance from a line curve at which the line is still
+ * considered "close enough" to be selected over an area.
+ */
+const LINE_PROXIMITY_THRESHOLD = 15;
+export default function getItemAtPosition(state, point) {
+  if (!state.experimentalFeatures?.enablePositionBasedPointerInteraction) {
+    return undefined;
+  }
+  const {
+    axis: xAxes,
+    axisIds: xAxisIds
+  } = selectorChartXAxis(state);
+  const {
+    axis: yAxes,
+    axisIds: yAxisIds
+  } = selectorChartYAxis(state);
+  const series = selectorAllSeriesOfType(state, 'line');
+  if (!series || series.seriesOrder.length === 0) {
+    return undefined;
+  }
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+
+  // Step 1: Find the closest line (curve) across all series.
+  let closestDistance = Infinity;
+  let closestItem;
+  for (const seriesId of series.seriesOrder) {
+    const seriesItem = series.series[seriesId];
+    if (seriesItem.hidden) {
+      continue;
+    }
+    const xAxisId = seriesItem.xAxisId ?? defaultXAxisId;
+    const yAxisId = seriesItem.yAxisId ?? defaultYAxisId;
+    const xAxis = xAxes[xAxisId];
+    const yAxis = yAxes[yAxisId];
+    const bracket = getBracketIndices(xAxis, point.x);
+    if (!bracket) {
+      continue;
+    }
+    const {
+      left,
+      right
+    } = bracket;
+    const {
+      visibleStackedData,
+      data,
+      connectNulls,
+      curve
+    } = seriesItem;
+    const dataIndex = getAxisIndex(xAxis, point.x);
+    if (dataIndex === -1) {
+      continue;
+    }
+
+    // For ordinal or pointer exactly on a data point, use the data point directly.
+    if (left === right) {
+      const yValue = visibleStackedData[left]?.[1];
+      if (yValue == null) {
+        continue;
+      }
+      const yPosition = yAxis.scale(yValue);
+      if (yPosition == null) {
+        continue;
+      }
+      const distance = Math.abs(point.y - yPosition);
+      if (distance < closestDistance) {
+        closestDistance = distance;
+        closestItem = {
+          type: 'line',
+          seriesId,
+          dataIndex
+        };
+      }
+      continue;
+    }
+
+    // Evaluate the actual curve at the pointer's x for precise distance.
+    const xData = xAxis.data;
+    if (!xData) {
+      continue;
+    }
+    const xPosition = getValueToPositionMapper(xAxis.scale);
+    const getPixelX = idx => xPosition(xData[idx]);
+    const curvePoints = collectCurvePoints(data, getPixelX, idx => {
+      const stacked = visibleStackedData[idx];
+      return stacked ? yAxis.scale(stacked[1]) : null;
+    }, left, right, connectNulls);
+    if (curvePoints.length < 2) {
+      continue;
+    }
+    const yPosition = evaluateCurveY(curvePoints, point.x, curve);
+    if (yPosition == null) {
+      continue;
+    }
+    const distance = Math.abs(point.y - yPosition);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestItem = {
+        type: 'line',
+        seriesId,
+        dataIndex
+      };
+    }
+  }
+
+  // Step 2: If the closest line is within the proximity threshold, pick it.
+  if (closestItem && closestDistance <= LINE_PROXIMITY_THRESHOLD) {
+    return closestItem;
+  }
+
+  // Step 3: Check area series — iterate stacking groups in reverse
+  // so that topmost (last rendered) area is checked first.
+  const {
+    stackingGroups
+  } = series;
+  for (let g = stackingGroups.length - 1; g >= 0; g -= 1) {
+    const groupIds = stackingGroups[g].ids;
+
+    // Iterate in reverse so the topmost stacked area is checked first.
+    for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+      const seriesId = groupIds[i];
+      const seriesItem = series.series[seriesId];
+      if (seriesItem.hidden || !seriesItem.area) {
+        continue;
+      }
+      const xAxisId = seriesItem.xAxisId ?? defaultXAxisId;
+      const yAxisId = seriesItem.yAxisId ?? defaultYAxisId;
+      const xAxis = xAxes[xAxisId];
+      const yAxis = yAxes[yAxisId];
+      if (!xAxis || !yAxis) {
+        continue;
+      }
+      const bracket = getBracketIndices(xAxis, point.x);
+      if (!bracket) {
+        continue;
+      }
+      const {
+        left,
+        right
+      } = bracket;
+      const {
+        visibleStackedData,
+        data,
+        connectNulls,
+        baseline,
+        curve
+      } = seriesItem;
+
+      // Check for null gaps at bracket points.
+      const leftIsNull = data[left] == null;
+      const rightIsNull = data[right] == null;
+      if (leftIsNull && rightIsNull) {
+        continue;
+      }
+      if ((leftIsNull || rightIsNull) && !connectNulls) {
+        continue;
+      }
+      const xScale = xAxis.scale;
+      const yScale = yAxis.scale;
+      const xPosition = getValueToPositionMapper(xScale);
+      const xData = xAxis.data;
+      if (!xData) {
+        continue;
+      }
+      const getPixelX = idx => xPosition(xData[idx]);
+      if (left === right) {
+        // Ordinal axis or pointer exactly on a data point.
+        const stacked = visibleStackedData[left];
+        if (!stacked) {
+          continue;
+        }
+        const yBottom = getBaselinePixelY(baseline, yScale, stacked[0]);
+        const yTop = yScale(stacked[1]);
+        if ([yBottom, yTop].some(v => v == null || Number.isNaN(v))) {
+          continue;
+        }
+        const yMin = Math.min(yBottom, yTop);
+        const yMax = Math.max(yBottom, yTop);
+        if (point.y >= yMin && point.y <= yMax) {
+          return {
+            type: 'line',
+            seriesId,
+            dataIndex: left
+          };
+        }
+        continue;
+      }
+
+      // Build pixel-coordinate points for the top and bottom curves,
+      // then evaluate them at the pointer's x using the actual d3 curve.
+      const topPoints = collectCurvePoints(data, getPixelX, idx => {
+        const stacked = visibleStackedData[idx];
+        return stacked ? yScale(stacked[1]) : null;
+      }, left, right, connectNulls);
+      const bottomPoints = collectCurvePoints(data, getPixelX, idx => {
+        const stacked = visibleStackedData[idx];
+        return stacked ? getBaselinePixelY(baseline, yScale, stacked[0]) : null;
+      }, left, right, connectNulls);
+      if (topPoints.length < 2 || bottomPoints.length < 2) {
+        continue;
+      }
+      const yTop = evaluateCurveY(topPoints, point.x, curve);
+      const yBottom = evaluateCurveY(bottomPoints, point.x, curve);
+      if (yTop == null || yBottom == null) {
+        continue;
+      }
+      const yMin = Math.min(yBottom, yTop);
+      const yMax = Math.max(yBottom, yTop);
+      if (point.y >= yMin && point.y <= yMax) {
+        const dataIndex = getAxisIndex(xAxis, point.x);
+        return {
+          type: 'line',
+          seriesId,
+          dataIndex: dataIndex === -1 ? left : dataIndex
+        };
+      }
+    }
+  }
+
+  // Step 4: No area matched — return the closest line regardless of threshold.
+  return closestItem;
+}

package/LineChart/seriesConfig/index.js

@@ -13,10 +13,12 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
 var _identifierCleaner = require("../../internals/identifierCleaner");
 var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
+var _descriptionGetter = _interopRequireDefault(require("./descriptionGetter"));
 const lineSeriesConfig = exports.lineSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -27,9 +29,11 @@ const lineSeriesConfig = exports.lineSeriesConfig = {
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
   identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
   identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex,
+  descriptionGetter: _descriptionGetter.default,
   isHighlightedCreator: _useChartHighlight.createIsHighlighted,
   isFadedCreator: _useChartHighlight.createIsFaded
 };

package/LineChart/seriesConfig/index.mjs

@@ -5,10 +5,12 @@ import legendGetter from "./legend.mjs";
 import tooltipGetter, { axisTooltipGetter } from "./tooltip.mjs";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.mjs";
 import tooltipItemPositionGetter from "./tooltipPosition.mjs";
+import getItemAtPosition from "./getItemAtPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.mjs";
 import { identifierCleanerSeriesIdDataIndex } from "../../internals/identifierCleaner.mjs";
 import { createIsHighlighted, createIsFaded } from "../../internals/plugins/featurePlugins/useChartHighlight/index.mjs";
+import descriptionGetter from "./descriptionGetter.mjs";
 export const lineSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -19,9 +21,11 @@ export const lineSeriesConfig = {
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
+  getItemAtPosition,
   keyboardFocusHandler,
   identifierSerializer: identifierSerializerSeriesIdDataIndex,
   identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  descriptionGetter,
   isHighlightedCreator: createIsHighlighted,
   isFadedCreator: createIsFaded
 };

package/LineChart/seriesConfig/seriesProcessor.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _warning = require("@mui/x-internals/warning");
 var _stacking = require("../../internals/stacking");
+const defaultShapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye'];
 const lineValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset, isItemVisible) => {
   const {
@@ -21,19 +22,20 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
       stackOffset: 'none'
     }
   }));
-
+  const idToIndex = new Map();
   // Create a data set with format adapted to d3
   const d3Dataset = dataset ?? [];
-  seriesOrder.forEach(id => {
+  seriesOrder.forEach((id, seriesIndex) => {
+    idToIndex.set(id, seriesIndex);
     const data = series[id].data;
     if (data !== undefined) {
-      data.forEach((value, index) => {
-        if (d3Dataset.length <= index) {
+      data.forEach((value, dataIndex) => {
+        if (d3Dataset.length <= dataIndex) {
           d3Dataset.push({
             [id]: value
           });
         } else {
-          d3Dataset[index][id] = value;
+          d3Dataset[dataIndex][id] = value;
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
@@ -98,6 +100,7 @@ Line plots only support numeric and null values.`);
       completedSeries[id] = (0, _extends2.default)({
         labelMarkType: 'line+mark'
       }, series[id], {
+        shape: series[id].shape ?? defaultShapes[(idToIndex.get(id) ?? 0) % defaultShapes.length],
         data,
         valueFormatter: series[id].valueFormatter ?? lineValueFormatter,
         hidden,

package/LineChart/seriesConfig/seriesProcessor.mjs

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
 import { getStackingGroups } from "../../internals/stacking/index.mjs";
+const defaultShapes = ['circle', 'square', 'diamond', 'cross', 'star', 'triangle', 'wye'];
 const lineValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset, isItemVisible) => {
   const {
@@ -14,19 +15,20 @@ const seriesProcessor = (params, dataset, isItemVisible) => {
       stackOffset: 'none'
     }
   }));
-
+  const idToIndex = new Map();
   // Create a data set with format adapted to d3
   const d3Dataset = dataset ?? [];
-  seriesOrder.forEach(id => {
+  seriesOrder.forEach((id, seriesIndex) => {
+    idToIndex.set(id, seriesIndex);
     const data = series[id].data;
     if (data !== undefined) {
-      data.forEach((value, index) => {
-        if (d3Dataset.length <= index) {
+      data.forEach((value, dataIndex) => {
+        if (d3Dataset.length <= dataIndex) {
           d3Dataset.push({
             [id]: value
           });
         } else {
-          d3Dataset[index][id] = value;
+          d3Dataset[dataIndex][id] = value;
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
@@ -91,6 +93,7 @@ Line plots only support numeric and null values.`);
       completedSeries[id] = _extends({
         labelMarkType: 'line+mark'
       }, series[id], {
+        shape: series[id].shape ?? defaultShapes[(idToIndex.get(id) ?? 0) % defaultShapes.length],
         data,
         valueFormatter: series[id].valueFormatter ?? lineValueFormatter,
         hidden,

package/LineChart/useLineChartProps.d.mts

@@ -5,7 +5,7 @@ import { type ChartsClipPathProps } from "../ChartsClipPath/index.mjs";
 import { type ChartsGridProps } from "../ChartsGrid/index.mjs";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.mjs";
 import { type ChartsOverlayProps } from "../ChartsOverlay/index.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type AreaPlotProps } from "./AreaPlot.mjs";
 import type { LineChartProps } from "./LineChart.mjs";
 import { type LineHighlightPlotProps } from "./LineHighlightPlot.mjs";
@@ -22,7 +22,7 @@ import { type LineChartPluginSignatures } from "./LineChart.plugins.mjs";
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"line", LineChartPluginSignatures>;
+  chartsContainerProps: ChartsContainerProps<"line", LineChartPluginSignatures>;
   gridProps: ChartsGridProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {

package/LineChart/useLineChartProps.d.ts

@@ -5,7 +5,7 @@ import { type ChartsClipPathProps } from "../ChartsClipPath/index.js";
 import { type ChartsGridProps } from "../ChartsGrid/index.js";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import { type ChartsOverlayProps } from "../ChartsOverlay/index.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type AreaPlotProps } from "./AreaPlot.js";
 import type { LineChartProps } from "./LineChart.js";
 import { type LineHighlightPlotProps } from "./LineHighlightPlot.js";
@@ -22,7 +22,7 @@ import { type LineChartPluginSignatures } from "./LineChart.plugins.js";
  */
 export declare const useLineChartProps: (props: LineChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
-  chartContainerProps: ChartContainerProps<"line", LineChartPluginSignatures>;
+  chartsContainerProps: ChartsContainerProps<"line", LineChartPluginSignatures>;
   gridProps: ChartsGridProps;
   clipPathProps: ChartsClipPathProps;
   clipPathGroupProps: {

package/LineChart/useLineChartProps.js

@@ -55,7 +55,7 @@ const useLineChartProps = props => {
     disableHighlight: !!disableLineItemHighlight,
     type: 'line'
   }, s)), [disableLineItemHighlight, series]);
-  const chartContainerProps = (0, _extends2.default)({}, other, {
+  const chartsContainerProps = (0, _extends2.default)({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -132,7 +132,7 @@ const useLineChartProps = props => {
   };
   return {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/LineChart/useLineChartProps.mjs

@@ -49,7 +49,7 @@ export const useLineChartProps = props => {
     disableHighlight: !!disableLineItemHighlight,
     type: 'line'
   }, s)), [disableLineItemHighlight, series]);
-  const chartContainerProps = _extends({}, other, {
+  const chartsContainerProps = _extends({}, other, {
     series: seriesWithDefault,
     width,
     height,
@@ -126,7 +126,7 @@ export const useLineChartProps = props => {
   };
   return {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     gridProps,
     clipPathProps,
     clipPathGroupProps,

package/LineChart/useMarkPlotData.js

@@ -12,7 +12,7 @@ var _hooks = require("../hooks");
 var _cleanId = require("../internals/cleanId");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./seriesConfig/getColor"));
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 function useMarkPlotData(xAxes, yAxes) {
   const seriesData = (0, _hooks.useLineSeriesContext)();
   const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
@@ -20,7 +20,7 @@ function useMarkPlotData(xAxes, yAxes) {
   const chartId = (0, _useChartId.useChartId)();
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];

package/LineChart/useMarkPlotData.mjs

@@ -4,7 +4,7 @@ import { getValueToPositionMapper, useLineSeriesContext, useXAxes, useYAxes } fr
 import { cleanId } from "../internals/cleanId.mjs";
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.mjs";
 import getColor from "./seriesConfig/getColor.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 export function useMarkPlotData(xAxes, yAxes) {
   const seriesData = useLineSeriesContext();
   const defaultXAxisId = useXAxes().xAxisIds[0];
@@ -12,7 +12,7 @@ export function useMarkPlotData(xAxes, yAxes) {
   const chartId = useChartId();
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const allData = React.useMemo(() => {
     if (seriesData === undefined) {
       return [];

package/PieChart/FocusedPieArc.js

@@ -2,15 +2,12 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusedPieArc = FocusedPieArc;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _usePieSeries = require("../hooks/usePieSeries");
@@ -53,7 +50,7 @@ function FocusedPieArc(props) {
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
     seriesId: series.id,
-    className: (0, _clsx.default)(classes.focusIndicator, _PieArc.pieArcClasses.focusIndicator),
+    className: classes.focusIndicator,
     dataIndex: focusedItem.dataIndex,
     isFaded: false,
     isHighlighted: false,

package/PieChart/FocusedPieArc.mjs

@@ -3,12 +3,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["arcLabelRadius"];
-import * as React from 'react';
-import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.mjs";
 import { usePieSeriesContext, usePieSeriesLayout } from "../hooks/usePieSeries.mjs";
-import { PieArc, pieArcClasses } from "./PieArc.mjs";
+import { PieArc } from "./PieArc.mjs";
 import { useUtilityClasses } from "./pieClasses.mjs";
 import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
 import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.mjs";
@@ -46,7 +44,7 @@ export function FocusedPieArc(props) {
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
     seriesId: series.id,
-    className: clsx(classes.focusIndicator, pieArcClasses.focusIndicator),
+    className: classes.focusIndicator,
     dataIndex: focusedItem.dataIndex,
     isFaded: false,
     isHighlighted: false,