@mui/x-charts 9.0.0-alpha.2 → 9.0.0-alpha.4

package/LineChart/MarkPlot.mjs

@@ -2,18 +2,26 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "className"];
 import PropTypes from 'prop-types';
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { useSkipAnimation } from "../hooks/useSkipAnimation.mjs";
 import { CircleMarkElement } from "./CircleMarkElement.mjs";
 import { MarkElement } from "./MarkElement.mjs";
-import { useItemHighlightedGetter, useXAxes, useYAxes } from "../hooks/index.mjs";
+import { useItemHighlightStateGetter, useXAxes, useYAxes } from "../hooks/index.mjs";
 import { useInternalIsZoomInteracting } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting.mjs";
 import { selectorChartsHighlightXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { useMarkPlotData } from "./useMarkPlotData.mjs";
+import { useUtilityClasses } from "./lineClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
+const MarkPlotRoot = styled('g', {
+  name: 'MuiMarkPlot',
+  slot: 'Root'
+})({});
+
 /**
  * Demos:
  *
@@ -29,7 +37,8 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick
+      onItemClick,
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isZoomInteracting = useInternalIsZoomInteracting();
@@ -42,11 +51,8 @@ function MarkPlot(props) {
   } = useYAxes();
   const {
     store
-  } = useChartContext();
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  } = useChartsContext();
+  const getHighlightState = useItemHighlightStateGetter();
   const xAxisHighlightIndexes = store.use(selectorChartsHighlightXAxisIndex);
   const highlightedItems = React.useMemo(() => {
     const rep = {};
@@ -63,7 +69,10 @@ function MarkPlot(props) {
     return rep;
   }, [xAxisHighlightIndexes]);
   const completedData = useMarkPlotData(xAxis, yAxis);
-  return /*#__PURE__*/_jsx("g", _extends({}, other, {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/_jsx(MarkPlotRoot, _extends({
+    className: clsx(classes.markPlot, className)
+  }, other, {
     children: completedData.map(({
       seriesId,
       clipId,
@@ -77,8 +86,9 @@ function MarkPlot(props) {
         type: 'line',
         seriesId
       };
-      const isSeriesHighlighted = isHighlighted(identifier);
-      const isSeriesFaded = !isSeriesHighlighted && isFaded(identifier);
+      const seriesHighlightState = getHighlightState(identifier);
+      const isSeriesHighlighted = seriesHighlightState === 'highlighted';
+      const isSeriesFaded = seriesHighlightState === 'faded';
       return /*#__PURE__*/_jsx("g", {
         clipPath: `url(#${clipId})`,
         "data-series": seriesId,

package/LineChart/index.d.mts

@@ -11,5 +11,5 @@ export * from "./MarkElement.mjs";
 export * from "./FocusedLineMark.mjs";
 export * from "./LineHighlightElement.mjs";
 export * from "./LineChart.plugins.mjs";
-export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.mjs";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.mjs";
+export { lineClasses } from "./lineClasses.mjs";
+export type { LineClassKey, LineClasses } from "./lineClasses.mjs";

package/LineChart/index.d.ts

@@ -11,5 +11,5 @@ export * from "./MarkElement.js";
 export * from "./FocusedLineMark.js";
 export * from "./LineHighlightElement.js";
 export * from "./LineChart.plugins.js";
-export type { MarkElementClasses, MarkElementClassKey } from "./markElementClasses.js";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";
+export { lineClasses } from "./lineClasses.js";
+export type { LineClassKey, LineClasses } from "./lineClasses.js";

package/LineChart/index.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  getMarkElementUtilityClass: true,
-  markElementClasses: true
+  lineClasses: true
 };
-Object.defineProperty(exports, "getMarkElementUtilityClass", {
+Object.defineProperty(exports, "lineClasses", {
   enumerable: true,
   get: function () {
-    return _markElementClasses.getMarkElementUtilityClass;
-  }
-});
-Object.defineProperty(exports, "markElementClasses", {
-  enumerable: true,
-  get: function () {
-    return _markElementClasses.markElementClasses;
+    return _lineClasses.lineClasses;
   }
 });
 var _LineChart = require("./LineChart");
@@ -175,4 +168,4 @@ Object.keys(_LineChart2).forEach(function (key) {
     }
   });
 });
-var _markElementClasses = require("./markElementClasses");
+var _lineClasses = require("./lineClasses");

package/LineChart/index.mjs

@@ -11,4 +11,4 @@ export * from "./MarkElement.mjs";
 export * from "./FocusedLineMark.mjs";
 export * from "./LineHighlightElement.mjs";
 export * from "./LineChart.plugins.mjs";
-export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.mjs";
+export { lineClasses } from "./lineClasses.mjs";

package/LineChart/lineClasses.d.mts

@@ -0,0 +1,34 @@
+import { type SeriesId } from "../models/seriesType/common.mjs";
+export interface LineClasses {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+}
+export type LineClassKey = keyof LineClasses;
+export interface MarkElementOwnerState {
+  seriesId: SeriesId;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+}
+export declare function getLineUtilityClass(slot: string): string;
+export declare const lineClasses: LineClasses;
+export interface UseUtilityClassesOptions {
+  skipAnimation?: boolean;
+  classes?: Partial<LineClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;

package/LineChart/lineClasses.d.ts

@@ -0,0 +1,34 @@
+import { type SeriesId } from "../models/seriesType/common.js";
+export interface LineClasses {
+  /** Styles applied to the area element. */
+  area: string;
+  /** Styles applied to the line element. */
+  line: string;
+  /** Styles applied to the mark element. */
+  mark: string;
+  /** Styles applied to a mark element when it is animated. */
+  markAnimate: string;
+  /** Styles applied to the highlight element. */
+  highlight: string;
+  /** Styles applied to the AreaPlot root element. */
+  areaPlot: string;
+  /** Styles applied to the LinePlot root element. */
+  linePlot: string;
+  /** Styles applied to the MarkPlot root element. */
+  markPlot: string;
+}
+export type LineClassKey = keyof LineClasses;
+export interface MarkElementOwnerState {
+  seriesId: SeriesId;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  classes?: Partial<LineClasses>;
+  skipAnimation?: boolean;
+}
+export declare function getLineUtilityClass(slot: string): string;
+export declare const lineClasses: LineClasses;
+export interface UseUtilityClassesOptions {
+  skipAnimation?: boolean;
+  classes?: Partial<LineClasses>;
+}
+export declare const useUtilityClasses: (options?: UseUtilityClassesOptions) => Record<"line" | "area" | "mark" | "highlight" | "areaPlot" | "linePlot" | "markPlot", string>;

package/LineChart/lineClasses.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLineUtilityClass = getLineUtilityClass;
+exports.useUtilityClasses = exports.lineClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLineUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiLineChart', slot);
+}
+const lineClasses = exports.lineClasses = (0, _generateUtilityClasses.default)('MuiLineChart', ['area', 'line', 'mark', 'markAnimate', 'highlight', 'areaPlot', 'linePlot', 'markPlot']);
+const useUtilityClasses = options => {
+  const {
+    skipAnimation,
+    classes
+  } = options ?? {};
+  const slots = {
+    area: ['area'],
+    line: ['line'],
+    mark: ['mark', !skipAnimation && 'markAnimate'],
+    highlight: ['highlight'],
+    areaPlot: ['areaPlot'],
+    linePlot: ['linePlot'],
+    markPlot: ['markPlot']
+  };
+  return (0, _composeClasses.default)(slots, getLineUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/LineChart/lineClasses.mjs

@@ -0,0 +1,23 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getLineUtilityClass(slot) {
+  return generateUtilityClass('MuiLineChart', slot);
+}
+export const lineClasses = generateUtilityClasses('MuiLineChart', ['area', 'line', 'mark', 'markAnimate', 'highlight', 'areaPlot', 'linePlot', 'markPlot']);
+export const useUtilityClasses = options => {
+  const {
+    skipAnimation,
+    classes
+  } = options ?? {};
+  const slots = {
+    area: ['area'],
+    line: ['line'],
+    mark: ['mark', !skipAnimation && 'markAnimate'],
+    highlight: ['highlight'],
+    areaPlot: ['areaPlot'],
+    linePlot: ['linePlot'],
+    markPlot: ['markPlot']
+  };
+  return composeClasses(slots, getLineUtilityClass, classes);
+};

package/LineChart/seriesConfig/legend.js

@@ -18,6 +18,7 @@ const legendGetter = params => {
     acc.push({
       type: 'line',
       markType: series[seriesId].labelMarkType,
+      markShape: series[seriesId].showMark ? series[seriesId].shape ?? 'circle' : undefined,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/LineChart/seriesConfig/legend.mjs

@@ -12,6 +12,7 @@ const legendGetter = params => {
     acc.push({
       type: 'line',
       markType: series[seriesId].labelMarkType,
+      markShape: series[seriesId].showMark ? series[seriesId].shape ?? 'circle' : undefined,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

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') {
@@ -96,8 +98,9 @@ Line plots only support numeric and null values.`);
         seriesId: id
       });
       completedSeries[id] = (0, _extends2.default)({
-        labelMarkType: 'line'
+        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') {
@@ -89,8 +91,9 @@ Line plots only support numeric and null values.`);
         seriesId: id
       });
       completedSeries[id] = _extends({
-        labelMarkType: 'line'
+        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/tooltip.js

@@ -25,7 +25,8 @@ const tooltipGetter = params => {
     label,
     value,
     formattedValue,
-    markType: series.labelMarkType
+    markType: series.labelMarkType,
+    markShape: series.showMark ? series.shape : undefined
   };
 };
 const axisTooltipGetter = series => {

package/LineChart/seriesConfig/tooltip.mjs

@@ -19,7 +19,8 @@ const tooltipGetter = params => {
     label,
     value,
     formattedValue,
-    markType: series.labelMarkType
+    markType: series.labelMarkType,
+    markShape: series.showMark ? series.shape : undefined
   };
 };
 export const axisTooltipGetter = series => {

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,19 +2,18 @@
 '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 _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
 var _usePieSeries = require("../hooks/usePieSeries");
 var _PieArc = require("./PieArc");
-var _useItemHighlighted = require("../hooks/useItemHighlighted");
+var _pieClasses = require("./pieClasses");
+var _useItemHighlightState = require("../hooks/useItemHighlightState");
 var _getModifiedArcProperties = require("./dataTransform/getModifiedArcProperties");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["arcLabelRadius"];
@@ -22,11 +21,11 @@ function FocusedPieArc(props) {
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
   const pieSeriesLayout = (0, _usePieSeries.usePieSeriesLayout)();
-  const {
-    isHighlighted,
-    isFaded
-  } = (0, _useItemHighlighted.useItemHighlighted)(focusedItem);
+  const highlightState = (0, _useItemHighlightState.useItemHighlightState)(focusedItem);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const pieSeries = (0, _usePieSeries.usePieSeriesContext)();
+  const classes = (0, _pieClasses.useUtilityClasses)();
   if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
     return null;
   }
@@ -51,7 +50,7 @@ function FocusedPieArc(props) {
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
     seriesId: series.id,
-    className: _PieArc.pieArcClasses.focusIndicator,
+    className: classes.focusIndicator,
     dataIndex: focusedItem.dataIndex,
     isFaded: false,
     isHighlighted: false,

package/PieChart/FocusedPieArc.mjs

@@ -3,23 +3,23 @@
 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 { 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 { useItemHighlighted } from "../hooks/useItemHighlighted.mjs";
+import { PieArc } from "./PieArc.mjs";
+import { useUtilityClasses } from "./pieClasses.mjs";
+import { useItemHighlightState } from "../hooks/useItemHighlightState.mjs";
 import { getModifiedArcProperties } from "./dataTransform/getModifiedArcProperties.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function FocusedPieArc(props) {
   const theme = useTheme();
   const focusedItem = useFocusedItem();
   const pieSeriesLayout = usePieSeriesLayout();
-  const {
-    isHighlighted,
-    isFaded
-  } = useItemHighlighted(focusedItem);
+  const highlightState = useItemHighlightState(focusedItem);
+  const isHighlighted = highlightState === 'highlighted';
+  const isFaded = highlightState === 'faded';
   const pieSeries = usePieSeriesContext();
+  const classes = useUtilityClasses();
   if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
     return null;
   }
@@ -44,7 +44,7 @@ export function FocusedPieArc(props) {
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
     seriesId: series.id,
-    className: pieArcClasses.focusIndicator,
+    className: classes.focusIndicator,
     dataIndex: focusedItem.dataIndex,
     isFaded: false,
     isHighlighted: false,

package/PieChart/PieArc.d.mts

@@ -1,39 +1,5 @@
 import * as React from 'react';
-import { type SeriesId } from "../models/index.mjs";
-export interface PieArcClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /**
-   * Styles applied to the root element when highlighted.
-   * @deprecated Use `[data-highlighted]` selector instead.
-   */
-  highlighted: string;
-  /**
-   * Styles applied to the root element when faded.
-   * @deprecated Use `[data-faded]` selector instead.
-   */
-  faded: string;
-  /**
-   * Styles applied to the root element for a specified series.
-   * Needs to be suffixed with the series ID: `.${pieArcClasses.series}-${seriesId}`.
-   */
-  series: string;
-  /** Styles applied to the focus indicator element. */
-  focusIndicator: string;
-}
-export type PieArcClassKey = keyof PieArcClasses;
-interface PieArcOwnerState {
-  seriesId: SeriesId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  isFocused: boolean;
-  stroke?: string;
-  classes?: Partial<PieArcClasses>;
-}
-export declare function getPieArcUtilityClass(slot: string): string;
-export declare const pieArcClasses: PieArcClasses;
+import { type PieArcOwnerState } from "./pieClasses.mjs";
 export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref'> & PieArcOwnerState & {
   cornerRadius: number;
   endAngle: number;