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

package/PieChart/PieChart.js

@@ -18,8 +18,8 @@ var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsSurface = require("../ChartsSurface");
-var _ChartDataProvider = require("../ChartDataProvider");
-var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
+var _ChartsDataProvider = require("../ChartsDataProvider");
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
 var _ChartsWrapper = require("../ChartsWrapper");
 var _PieChart2 = require("./PieChart.plugins");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
@@ -63,9 +63,9 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const margin = (0, _defaultizeMargin.defaultizeMargin)(marginProps, _constants.DEFAULT_PIE_CHART_MARGIN);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)((0, _extends2.default)({}, other, {
+  } = (0, _useChartsContainerProps.useChartsContainerProps)((0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
     }, s)),
@@ -80,7 +80,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
   }));
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = slots?.toolbar;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, chartsDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
       legendPosition: slotProps?.legend?.position,
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
@@ -128,8 +128,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
-  enableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -253,7 +264,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: _propTypes.default.func,
   /**
@@ -283,6 +294,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The tooltip item.

package/PieChart/PieChart.mjs

@@ -12,8 +12,8 @@ import { ChartsLegend } from "../ChartsLegend/index.mjs";
 import { PiePlot } from "./PiePlot.mjs";
 import { ChartsOverlay } from "../ChartsOverlay/index.mjs";
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
-import { ChartDataProvider } from "../ChartDataProvider/index.mjs";
-import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.mjs";
+import { ChartsDataProvider } from "../ChartsDataProvider/index.mjs";
+import { useChartsContainerProps } from "../ChartsContainer/useChartsContainerProps.mjs";
 import { ChartsWrapper } from "../ChartsWrapper/index.mjs";
 import { PIE_CHART_PLUGINS } from "./PieChart.plugins.mjs";
 import { defaultizeMargin } from "../internals/defaultizeMargin.mjs";
@@ -56,9 +56,9 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const margin = defaultizeMargin(marginProps, DEFAULT_PIE_CHART_MARGIN);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = useChartContainerProps(_extends({}, other, {
+  } = useChartsContainerProps(_extends({}, other, {
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
@@ -73,7 +73,7 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
   }));
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
   const Toolbar = slots?.toolbar;
-  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartsDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, {
       legendPosition: slotProps?.legend?.position,
       legendDirection: slotProps?.legend?.direction ?? 'vertical',
@@ -121,8 +121,19 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -246,7 +257,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**
@@ -276,6 +287,10 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The tooltip item.

package/PieChart/PiePlot.d.mts

@@ -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.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/PiePlot.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { PieArcPlot } from "./PieArcPlot.mjs";
 import { PieArcLabelPlot } from "./PieArcLabelPlot.mjs";
@@ -22,7 +23,8 @@ function PiePlot(props) {
     skipAnimation: inSkipAnimation,
     slots,
     slotProps,
-    onItemClick
+    onItemClick,
+    className
   } = props;
   const seriesData = usePieSeriesContext();
   const seriesLayout = usePieSeriesLayout();
@@ -36,6 +38,7 @@ function PiePlot(props) {
     seriesOrder
   } = seriesData;
   return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes.root, className),
     children: [seriesOrder.map(seriesId => {
       const {
         cornerRadius,

package/PieChart/dataTransform/useTransformData.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useTransformData = useTransformData;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useIsItemFocusedGetter = require("../../hooks/useIsItemFocusedGetter");
 var _getModifiedArcProperties = require("./getModifiedArcProperties");
 function useTransformData(series) {
@@ -19,10 +19,7 @@ function useTransformData(series) {
     faded,
     highlighted
   } = series;
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const isItemFocused = (0, _useIsItemFocusedGetter.useIsItemFocusedGetter)();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const identifier = {
@@ -30,8 +27,9 @@ function useTransformData(series) {
       seriesId,
       dataIndex: itemIndex
     };
-    const isHighlighted = isItemHighlighted(identifier);
-    const isFaded = !isHighlighted && isItemFaded(identifier);
+    const highlightState = getHighlightState(identifier);
+    const isHighlighted = highlightState === 'highlighted';
+    const isFaded = highlightState === 'faded';
     const isFocused = isItemFocused(identifier);
 
     // TODO v9: Replace the second argument with the result of useSeriesLayout
@@ -52,6 +50,6 @@ function useTransformData(series) {
       isHighlighted,
       isFocused
     }, arcSizes);
-  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
+  }), [data, seriesId, getHighlightState, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/PieChart/dataTransform/useTransformData.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useIsItemFocusedGetter } from "../../hooks/useIsItemFocusedGetter.mjs";
 import { getModifiedArcProperties } from "./getModifiedArcProperties.mjs";
 export function useTransformData(series) {
@@ -12,10 +12,7 @@ export function useTransformData(series) {
     faded,
     highlighted
   } = series;
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   const isItemFocused = useIsItemFocusedGetter();
   const dataWithHighlight = React.useMemo(() => data.map((item, itemIndex) => {
     const identifier = {
@@ -23,8 +20,9 @@ export function useTransformData(series) {
       seriesId,
       dataIndex: itemIndex
     };
-    const isHighlighted = isItemHighlighted(identifier);
-    const isFaded = !isHighlighted && isItemFaded(identifier);
+    const highlightState = getHighlightState(identifier);
+    const isHighlighted = highlightState === 'highlighted';
+    const isFaded = highlightState === 'faded';
     const isFocused = isItemFocused(identifier);
 
     // TODO v9: Replace the second argument with the result of useSeriesLayout
@@ -45,6 +43,6 @@ export function useTransformData(series) {
       isHighlighted,
       isFocused
     }, arcSizes);
-  }), [data, seriesId, isItemHighlighted, isItemFaded, isItemFocused, series, faded, highlighted]);
+  }), [data, seriesId, getHighlightState, isItemFocused, series, faded, highlighted]);
   return dataWithHighlight;
 }

package/PieChart/index.d.mts

@@ -8,4 +8,4 @@ export * from "./PieArcLabel.mjs";
 export * from "./getPieCoordinates.mjs";
 export * from "./PieChart.plugins.mjs";
 export { pieClasses } from "./pieClasses.mjs";
-export type { PieClasses, PieClassKey } from "./pieClasses.mjs";
+export type { PieClasses, PieClassKey, PieArcOwnerState } from "./pieClasses.mjs";

package/PieChart/index.d.ts

@@ -8,4 +8,4 @@ export * from "./PieArcLabel.js";
 export * from "./getPieCoordinates.js";
 export * from "./PieChart.plugins.js";
 export { pieClasses } from "./pieClasses.js";
-export type { PieClasses, PieClassKey } from "./pieClasses.js";
+export type { PieClasses, PieClassKey, PieArcOwnerState } from "./pieClasses.js";

package/PieChart/pieClasses.d.mts

@@ -1,3 +1,4 @@
+import { type SeriesId } from "../models/seriesType/common.mjs";
 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 {
+  seriesId: 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<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<PieClasses>;
+  skipAnimation?: boolean;
+}) => Record<"root" | "series" | "seriesLabels" | "arcLabel" | "arc" | "focusIndicator", string>;

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 {
+  seriesId: 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<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (options?: {
+  classes?: Partial<PieClasses>;
+  skipAnimation?: boolean;
+}) => Record<"root" | "series" | "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/PieChart/pieClasses.mjs

@@ -4,12 +4,19 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getPieUtilityClass(slot) {
   return generateUtilityClass('MuiPieChart', slot);
 }
-export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels']);
-export const useUtilityClasses = classes => {
+export const pieClasses = generateUtilityClasses('MuiPieChart', ['root', 'series', 'seriesLabels', 'arc', 'arcLabel', 'animate', 'focusIndicator']);
+export 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 composeClasses(slots, getPieUtilityClass, classes);
 };

package/PieChart/seriesConfig/legend.js

@@ -16,12 +16,10 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
-      const id = item.id ?? dataIndex;
       acc.push({
         type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        itemId: id,
         dataIndex,
         color: item.color,
         label: formattedLabel

package/PieChart/seriesConfig/legend.mjs

@@ -10,12 +10,10 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
-      const id = item.id ?? dataIndex;
       acc.push({
         type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        itemId: id,
         dataIndex,
         color: item.color,
         label: formattedLabel

package/RadarChart/RadarAxis/RadarAxis.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type UseRadarAxisParams } from "./useRadarAxis.mjs";
-import { type RadarAxisClasses } from "./radarAxisClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 export interface RadarAxisProps extends UseRadarAxisParams {
   /**
    * Defines how label align with the axis.
@@ -17,10 +17,14 @@ export interface RadarAxisProps extends UseRadarAxisParams {
    * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
    */
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'] | ((angle: number) => React.SVGProps<SVGTextElement>['dominantBaseline']);
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarAxisClasses>;
+  classes?: Partial<Pick<RadarClasses, 'axisRoot' | 'axisLine' | 'axisLabel'>>;
 }
 declare function RadarAxis(props: RadarAxisProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarAxis {

package/RadarChart/RadarAxis/RadarAxis.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type UseRadarAxisParams } from "./useRadarAxis.js";
-import { type RadarAxisClasses } from "./radarAxisClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 export interface RadarAxisProps extends UseRadarAxisParams {
   /**
    * Defines how label align with the axis.
@@ -17,10 +17,14 @@ export interface RadarAxisProps extends UseRadarAxisParams {
    * The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree).
    */
   dominantBaseline?: React.SVGProps<SVGTextElement>['dominantBaseline'] | ((angle: number) => React.SVGProps<SVGTextElement>['dominantBaseline']);
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarAxisClasses>;
+  classes?: Partial<Pick<RadarClasses, 'axisRoot' | 'axisLine' | 'axisLabel'>>;
 }
 declare function RadarAxis(props: RadarAxisProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace RadarAxis {

package/RadarChart/RadarAxis/RadarAxis.js

@@ -9,18 +9,20 @@ exports.RadarAxis = RadarAxis;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 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 {
+    className,
     labelOrientation = 'horizontal',
     textAnchor,
     dominantBaseline
   } = props;
-  const classes = (0, _radarAxisClasses.useUtilityClasses)(props.classes);
+  const classes = (0, _radarClasses.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: (0, _clsx.default)(classes.axisRoot, className),
     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
     }), 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
     }, (0, _RadarAxis.getLabelAttributes)({
       labelOrientation,
       x,

package/RadarChart/RadarAxis/RadarAxis.mjs

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useTheme } from '@mui/material/styles';
 import { useRadarAxis } from "./useRadarAxis.mjs";
 import { getLabelAttributes } from "./RadarAxis.utils.mjs";
-import { useUtilityClasses } from "./radarAxisClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarAxis(props) {
   const {
+    className,
     labelOrientation = 'horizontal',
     textAnchor,
     dominantBaseline
@@ -24,12 +26,12 @@ function RadarAxis(props) {
     labels
   } = data;
   return /*#__PURE__*/_jsxs("g", {
-    className: classes.root,
+    className: clsx(classes.axisRoot, className),
     children: [/*#__PURE__*/_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
     }), labels.map(({
       x,
       y,
@@ -38,7 +40,7 @@ function RadarAxis(props) {
       fontSize: 12,
       fill: (theme.vars ?? theme).palette.text.primary,
       stroke: "none",
-      className: classes.label
+      className: classes.axisLabel
     }, getLabelAttributes({
       labelOrientation,
       x,

package/RadarChart/RadarAxis/index.d.mts

@@ -1,3 +1,2 @@
 export * from "./RadarAxis.mjs";
-export * from "./useRadarAxis.mjs";
-export { type RadarAxisClasses, chartsAxisClasses } from "./radarAxisClasses.mjs";
+export * from "./useRadarAxis.mjs";

package/RadarChart/RadarAxis/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./RadarAxis.js";
-export * from "./useRadarAxis.js";
-export { type RadarAxisClasses, chartsAxisClasses } from "./radarAxisClasses.js";
+export * from "./useRadarAxis.js";

package/RadarChart/RadarAxis/index.js

@@ -3,19 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  chartsAxisClasses: true
-};
-Object.defineProperty(exports, "chartsAxisClasses", {
-  enumerable: true,
-  get: function () {
-    return _radarAxisClasses.chartsAxisClasses;
-  }
-});
 var _RadarAxis = require("./RadarAxis");
 Object.keys(_RadarAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadarAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -27,7 +17,6 @@ Object.keys(_RadarAxis).forEach(function (key) {
 var _useRadarAxis = require("./useRadarAxis");
 Object.keys(_useRadarAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useRadarAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -35,5 +24,4 @@ Object.keys(_useRadarAxis).forEach(function (key) {
       return _useRadarAxis[key];
     }
   });
-});
-var _radarAxisClasses = require("./radarAxisClasses");
+});

package/RadarChart/RadarAxis/index.mjs

@@ -1,3 +1,2 @@
 export * from "./RadarAxis.mjs";
-export * from "./useRadarAxis.mjs";
-export { chartsAxisClasses } from "./radarAxisClasses.mjs";
+export * from "./useRadarAxis.mjs";