@mui/x-charts 8.27.5 → 8.28.2

package/LineChart/markElementClasses.d.ts

@@ -1,36 +1,43 @@
 import type { MarkElementOwnerState } from "./lineClasses.js";
 export { type MarkElementOwnerState };
 /**
- * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ * @deprecated Use `LineClasses` instead.
  */
 export interface MarkElementClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `lineClasses.mark` instead.
+   */
   root: string;
   /** Styles applied to the root element when highlighted. */
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
-  /** Styles applied to the root element when animation is not skipped. */
+  /**
+   * Styles applied to the root element when animation is not skipped.
+   * @deprecated Use `lineClasses.markAnimate` instead.
+   */
   animate: string;
   /**
    * Styles applied to the root element for a specified series.
    * Needs to be suffixed with the series ID: `.${markElementClasses.series}-${seriesId}`.
+   * @deprecated Use `[data-series="${seriesId}"]` selector instead.
    */
   series: string;
 }
 /**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ * @deprecated Use `LineClassKey` instead.
  */
 export type MarkElementClassKey = keyof MarkElementClasses;
 /**
- * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ * @deprecated Use `getLineUtilityClass` instead.
  */
 export declare function getMarkElementUtilityClass(slot: string): string;
 /**
- * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ * @deprecated Use `lineClasses` instead.
  */
 export declare const markElementClasses: MarkElementClasses;
 /**
- * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ * @deprecated Use `useUtilityClasses` instead.
  */
 export declare const useUtilityClasses: (ownerState: MarkElementOwnerState) => Record<"root", string>;

package/LineChart/markElementClasses.js

@@ -10,27 +10,27 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 /**
- * @deprecated Use `LineClasses` from `./lineClasses` instead.
+ * @deprecated Use `LineClasses` instead.
  */
 
 /**
- * @deprecated Use `LineClassKey` from `./lineClasses` instead.
+ * @deprecated Use `LineClassKey` instead.
  */
 
 /**
- * @deprecated Use `getLineUtilityClass` from `./lineClasses` instead.
+ * @deprecated Use `getLineUtilityClass` instead.
  */
 function getMarkElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
 }
 
 /**
- * @deprecated Use `lineClasses` from `./lineClasses` instead.
+ * @deprecated Use `lineClasses` instead.
  */
 const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate', 'series']);
 
 /**
- * @deprecated Use `useUtilityClasses` from `./lineClasses` instead.
+ * @deprecated Use `useUtilityClasses` instead.
  */
 const useUtilityClasses = ownerState => {
   const {

package/PieChart/FocusedPieArc.js

@@ -10,10 +10,12 @@ 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");
 var _PieArc = require("./PieArc");
+var _pieClasses = require("./pieClasses");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _getModifiedArcProperties = require("./dataTransform/getModifiedArcProperties");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,6 +29,7 @@ function FocusedPieArc(props) {
     isFaded
   } = (0, _useItemHighlighted.useItemHighlighted)(focusedItem);
   const pieSeries = (0, _usePieSeries.usePieSeriesContext)();
+  const classes = (0, _pieClasses.useUtilityClasses)();
   if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
     return null;
   }
@@ -51,7 +54,7 @@ function FocusedPieArc(props) {
     skipAnimation: true,
     stroke: (theme.vars ?? theme).palette.text.primary,
     id: series.id,
-    className: _PieArc.pieArcClasses.focusIndicator,
+    className: (0, _clsx.default)(classes.focusIndicator, _PieArc.pieArcClasses.focusIndicator),
     dataIndex: focusedItem.dataIndex,
     isFaded: false,
     isHighlighted: false,

package/PieChart/PieArc.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import { type PieItemId } from "../models/index.js";
+import { type PieArcOwnerState } from "./pieClasses.js";
+export { type PieArcOwnerState };
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
 export interface PieArcClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -15,20 +19,19 @@ export interface PieArcClasses {
   /** Styles applied to the focus indicator element. */
   focusIndicator: string;
 }
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
 export type PieArcClassKey = keyof PieArcClasses;
-interface PieArcOwnerState {
-  id: PieItemId;
-  dataIndex: number;
-  color: string;
-  isFaded: boolean;
-  isHighlighted: boolean;
-  isFocused: boolean;
-  stroke?: string;
-  classes?: Partial<PieArcClasses>;
-}
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 export declare function getPieArcUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 export declare const pieArcClasses: PieArcClasses;
-export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & PieArcOwnerState & {
+export type PieArcProps = Omit<React.SVGProps<SVGPathElement>, 'id' | 'ref'> & PieArcOwnerState & {
   cornerRadius: number;
   endAngle: number;
   innerRadius: number;

package/PieChart/PieArc.js

@@ -21,12 +21,30 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 var _hooks = require("../hooks");
 var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
+var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "isFocused", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "stroke", "skipInteraction"];
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
+
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded', 'series', 'focusIndicator']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,8 +60,7 @@ const useUtilityClasses = ownerState => {
 };
 const PieArcRoot = (0, _styles.styled)('path', {
   name: 'MuiPieArc',
-  slot: 'Root',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
+  slot: 'Root'
 })({
   transitionProperty: 'opacity, fill, filter',
   transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
@@ -82,7 +99,8 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     isHighlighted,
     isFocused
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _pieClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = useUtilityClasses(ownerState);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
     type: 'pie',
     seriesId: id,
@@ -102,10 +120,10 @@ const PieArc = exports.PieArc = /*#__PURE__*/React.forwardRef(function PieArc(pr
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
-    className: (0, _clsx.default)(classes.root, className),
-    fill: ownerState.color,
-    opacity: ownerState.isFaded ? 0.3 : 1,
-    filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none',
+    className: (0, _clsx.default)(classes.arc, deprecatedClasses.root, className),
+    fill: color,
+    opacity: isFaded ? 0.3 : 1,
+    filter: isHighlighted ? 'brightness(120%)' : 'none',
     stroke: stroke,
     strokeWidth: 1,
     strokeLinejoin: "round",

package/PieChart/PieArcLabel.d.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { type PieItemId } from "../models/seriesType/pie.js";
+import { type PieItemId } from "../models/index.js";
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
 export interface PieArcLabelClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -7,7 +10,9 @@ export interface PieArcLabelClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
-  /** Styles applied to the root element when animation is not skipped. */
+  /** Styles applied to the root element when animation is not skipped.
+   * @deprecated Use the `animate` class from `./pieClasses` instead.
+   */
   animate: string;
   /**
    * Styles applied to the root element for a specified series.
@@ -15,6 +20,9 @@ export interface PieArcLabelClasses {
    */
   series: string;
 }
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {
   id: PieItemId;
@@ -24,7 +32,13 @@ interface PieArcLabelOwnerState {
   skipAnimation: boolean;
   classes?: Partial<PieArcLabelClasses>;
 }
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 export declare function getPieArcLabelUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 export declare const pieArcLabelClasses: PieArcLabelClasses;
 export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, 'ref' | 'color' | 'id'> & {
   startAngle: number;

package/PieChart/PieArcLabel.js

@@ -13,18 +13,37 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _animation = require("../internals/animation/animation");
 var _useAnimatePieArcLabel = require("../hooks/animation/useAnimatePieArcLabel");
+var _pieClasses = require("./pieClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden", "className"];
+/**
+ * @deprecated Use `PieClasses` instead.
+ */
+/**
+ * @deprecated Use `PieClassKey` instead.
+ */
+/**
+ * @deprecated Use `getPieUtilityClass` instead.
+ */
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
+
+/**
+ * @deprecated Use `pieClasses` instead.
+ */
 const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -54,7 +73,7 @@ const PieArcLabelRoot = (0, _styles.styled)('text', {
   transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
   transitionProperty: 'opacity',
   transitionTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
-  [`&.${pieArcLabelClasses.animate}`]: {
+  [`&.${_pieClasses.pieClasses.animate}`]: {
     animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
   },
   '@keyframes animate-opacity': {
@@ -77,7 +96,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
       isHighlighted,
       isFaded,
       skipAnimation,
-      hidden
+      hidden,
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -88,7 +108,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     isHighlighted,
     skipAnimation
   };
-  const classes = useUtilityClasses(ownerState);
+  const classes = (0, _pieClasses.useUtilityClasses)(ownerState);
+  const deprecatedClasses = useUtilityClasses(ownerState);
   const animatedProps = (0, _useAnimatePieArcLabel.useAnimatePieArcLabel)({
     cornerRadius,
     startAngle,
@@ -100,7 +121,9 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
     ref
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-    className: classes.root
+    className: (0, _clsx.default)(classes.arcLabel, deprecatedClasses.root, className),
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined
   }, other, animatedProps, {
     opacity: hidden ? 0 : 1,
     children: formattedArcLabel

package/PieChart/PieArcLabelPlot.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
@@ -38,6 +39,10 @@ function getItemLabel(arcLabel, arcLabelMinAngle, item) {
       }));
   }
 }
+const PieArcLabelPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiPieArcLabelPlot',
+  slot: 'Root'
+})();
 function PieArcLabelPlot(props) {
   const {
       arcLabel,
@@ -73,7 +78,7 @@ function PieArcLabelPlot(props) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelPlotRoot, (0, _extends2.default)({}, other, {
     children: transformedData.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/PieChart/PieArcPlot.js

@@ -11,10 +11,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _PieArc = require("./PieArc");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
+const PieArcPlotRoot = (0, _styles.styled)('g', {
+  name: 'MuiPieArcPlot',
+  slot: 'Root'
+})();
 function PieArcPlot(props) {
   const {
       slots,
@@ -47,7 +52,7 @@ function PieArcPlot(props) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcPlotRoot, (0, _extends2.default)({}, other, {
     children: transformedData.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
       startAngle: item.startAngle,
       endAngle: item.endAngle,

package/PieChart/PiePlot.d.ts

@@ -3,6 +3,7 @@ import { type PieArcLabelPlotSlots, type PieArcLabelPlotSlotProps } from "./PieA
 export interface PiePlotSlots extends PieArcPlotSlots, PieArcLabelPlotSlots {}
 export interface PiePlotSlotProps extends PieArcPlotSlotProps, PieArcLabelPlotSlotProps {}
 export interface PiePlotProps extends Pick<PieArcPlotProps, 'skipAnimation' | 'onItemClick'> {
+  className?: string;
   /**
    * Overridable component slots.
    * @default {}

package/PieChart/PiePlot.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PiePlot = PiePlot;
+var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
@@ -28,7 +29,8 @@ function PiePlot(props) {
     skipAnimation: inSkipAnimation,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    className
   } = props;
   const seriesData = (0, _usePieSeries.usePieSeriesContext)();
   const seriesLayout = (0, _usePieSeries.usePieSeriesLayout)();
@@ -42,6 +44,7 @@ function PiePlot(props) {
     seriesOrder
   } = seriesData;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: (0, _clsx.default)(classes.root, className),
     children: [seriesOrder.map(seriesId => {
       const {
         cornerRadius,

package/PieChart/pieClasses.d.ts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.js";
 export interface PieClasses {
   /** Styles applied to the root element. */
   root: string;
@@ -5,8 +6,28 @@ export interface PieClasses {
   series: string;
   /** Styles applied to the `g` element that contains all pie arc labels of a series. */
   seriesLabels: string;
+  /** Styles applied to an individual pie arc element. */
+  arc: string;
+  /** Styles applied to an individual pie arc label element. */
+  arcLabel: string;
+  /** Styles applied when animation is not skipped. */
+  animate: string;
+  /** Styles applied to the focused pie arc element. */
+  focusIndicator: string;
 }
 export type PieClassKey = keyof PieClasses;
+export interface PieArcOwnerState {
+  id: SeriesId;
+  dataIndex: number;
+  color: string;
+  isFaded: boolean;
+  isHighlighted: boolean;
+  isFocused: boolean;
+  classes?: Partial<PieClasses>;
+}
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"series" | "root" | "seriesLabels", string>;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<PieClasses>;
+  skipAnimation?: boolean;
+}) => Record<"series" | "root" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;

package/PieChart/pieClasses.js

@@ -12,12 +12,19 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getPieUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieChart', slot);
 }
-const pieClasses = exports.pieClasses = (0, _generateUtilityClasses.default)('MuiPieChart', ['root', 'series', 'seriesLabels']);
-const useUtilityClasses = classes => {
+const pieClasses = exports.pieClasses = (0, _generateUtilityClasses.default)('MuiPieChart', ['root', 'series', 'seriesLabels', 'arc', 'arcLabel', 'animate', 'focusIndicator']);
+const useUtilityClasses = options => {
+  const {
+    classes,
+    skipAnimation
+  } = options ?? {};
   const slots = {
     root: ['root'],
     series: ['series'],
-    seriesLabels: ['seriesLabels']
+    seriesLabels: ['seriesLabels'],
+    arc: ['arc'],
+    arcLabel: ['arcLabel', !skipAnimation && 'animate'],
+    focusIndicator: ['focusIndicator']
   };
   return (0, _composeClasses.default)(slots, getPieUtilityClass, classes);
 };

package/RadarChart/RadarAxis/RadarAxis.js

@@ -13,6 +13,7 @@ var _styles = require("@mui/material/styles");
 var _useRadarAxis = require("./useRadarAxis");
 var _RadarAxis = require("./RadarAxis.utils");
 var _radarAxisClasses = require("./radarAxisClasses");
+var _radarClasses = require("../radarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarAxis(props) {
   const {
@@ -20,7 +21,8 @@ function RadarAxis(props) {
     textAnchor,
     dominantBaseline
   } = props;
-  const classes = (0, _radarAxisClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)();
+  const deprecatedClasses = (0, _radarAxisClasses.useUtilityClasses)(props.classes);
   const theme = (0, _styles.useTheme)();
   const data = (0, _useRadarAxis.useRadarAxis)(props);
   if (data === null) {
@@ -32,12 +34,12 @@ function RadarAxis(props) {
     labels
   } = data;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: classes.root,
+    className: `${classes.axisRoot} ${deprecatedClasses.root}`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: `M ${center.x} ${center.y} L ${labels[labels.length - 1].x} ${labels[labels.length - 1].y}`,
       stroke: (theme.vars ?? theme).palette.text.primary,
       strokeOpacity: 0.3,
-      className: classes.line
+      className: `${classes.axisLine} ${deprecatedClasses.line}`
     }), labels.map(({
       x,
       y,
@@ -46,7 +48,7 @@ function RadarAxis(props) {
       fontSize: 12,
       fill: (theme.vars ?? theme).palette.text.primary,
       stroke: "none",
-      className: classes.label
+      className: `${classes.axisLabel} ${deprecatedClasses.label}`
     }, (0, _RadarAxis.getLabelAttributes)({
       labelOrientation,
       x,

package/RadarChart/RadarAxis/radarAxisClasses.d.ts

@@ -1,12 +1,36 @@
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
 export interface RadarAxisClasses {
-  /** Styles applied to the root element. */
+  /**
+   * Styles applied to the root element.
+   * @deprecated Use `radarClasses.axisRoot` instead.
+   */
   root: string;
-  /** Styles applied to the line element. */
+  /**
+   * Styles applied to the line element.
+   * @deprecated Use `radarClasses.axisLine` instead.
+   */
   line: string;
-  /** Styles applied to every label element. */
+  /**
+   * Styles applied to every label element.
+   * @deprecated Use `radarClasses.axisLabel` instead.
+   */
   label: string;
 }
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
 export type RadarAxisClassKey = keyof RadarAxisClasses;
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 export declare function getRadarAxisUtilityClass(slot: string): string;
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 export declare const chartsAxisClasses: RadarAxisClasses;
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 export declare const useUtilityClasses: (classes?: Partial<RadarAxisClasses>) => Record<"root" | "line" | "label", string>;

package/RadarChart/RadarAxis/radarAxisClasses.js

@@ -10,10 +10,29 @@ exports.useUtilityClasses = void 0;
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+/**
+ * @deprecated Use `RadarClasses` instead.
+ */
+
+/**
+ * @deprecated Use `RadarClassKey` instead.
+ */
+
+/**
+ * @deprecated Use `getRadarUtilityClass` instead.
+ */
 function getRadarAxisUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRadarAxis', slot);
 }
+
+/**
+ * @deprecated Use `radarClasses` instead.
+ */
 const chartsAxisClasses = exports.chartsAxisClasses = (0, _generateUtilityClasses.default)('MuiRadarAxis', ['root', 'line', 'label']);
+
+/**
+ * @deprecated Use `useUtilityClasses` instead.
+ */
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],

package/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -8,19 +8,11 @@ exports.RadarAxisHighlight = RadarAxisHighlight;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useRadarAxisHighlight = require("./useRadarAxisHighlight");
 var _radarAxisHighlightClasses = require("./radarAxisHighlightClasses");
+var _radarClasses = require("../radarClasses");
 var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 var _jsxRuntime = require("react/jsx-runtime");
-const useUtilityClasses = classes => {
-  const slots = {
-    root: ['root'],
-    line: ['line'],
-    dot: ['dot']
-  };
-  return (0, _composeClasses.default)(slots, _radarAxisHighlightClasses.getRadarAxisHighlightUtilityClass, classes);
-};
 /**
  * Attributes to display a shadow around a mark.
  */
@@ -37,7 +29,8 @@ const highlightMark = {
   opacity: 1
 };
 function RadarAxisHighlight(props) {
-  const classes = useUtilityClasses(props.classes);
+  const classes = (0, _radarClasses.useUtilityClasses)();
+  const deprecatedClasses = (0, _radarAxisHighlightClasses.useUtilityClasses)(props.classes);
   const theme = (0, _styles.useTheme)();
   const data = (0, _useRadarAxisHighlight.useRadarAxisHighlight)();
   if (data === null) {
@@ -54,12 +47,12 @@ function RadarAxisHighlight(props) {
   } = data;
   const [x, y] = instance.polar2svg(radius, highlightedAngle);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-    className: classes.root,
+    className: `${classes.axisHighlightRoot} ${deprecatedClasses.root}`,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
       stroke: (theme.vars || theme).palette.text.primary,
       strokeWidth: 1,
-      className: classes.line,
+      className: `${classes.axisHighlightLine} ${deprecatedClasses.line}`,
       pointerEvents: "none",
       strokeDasharray: "4 4"
     }), points.map((point, seriesIndex) => {
@@ -71,7 +64,7 @@ function RadarAxisHighlight(props) {
         }),
         cx: point.x,
         cy: point.y,
-        className: classes.dot,
+        className: `${classes.axisHighlightDot} ${deprecatedClasses.dot}`,
         pointerEvents: "none"
       }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
     })]