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

package/RadarChart/RadarGrid/index.d.mts

@@ -1,3 +1,2 @@
 export * from "./RadarGrid.mjs";
-export type { RadarGridProps } from "./RadarGrid.types.mjs";
-export { type RadarGridClasses } from "./radarGridClasses.mjs";
+export type { RadarGridProps } from "./RadarGrid.types.mjs";

package/RadarChart/RadarGrid/index.d.ts

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

package/RadarChart/RadarGrid/useRadarGridData.js

@@ -7,12 +7,12 @@ exports.useRadarGridData = useRadarGridData;
 var _useScale = require("../../hooks/useScale");
 var _hooks = require("../../hooks");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 function useRadarGridData() {
   const {
     instance,
     store
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
     radiusAxis

package/RadarChart/RadarGrid/useRadarGridData.mjs

@@ -1,12 +1,12 @@
 import { useRotationScale } from "../../hooks/useScale.mjs";
 import { useRadiusAxes } from "../../hooks/index.mjs";
 import { selectorChartPolarCenter } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.mjs";
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 export function useRadarGridData() {
   const {
     instance,
     store
-  } = useChartContext();
+  } = useChartsContext();
   const rotationScale = useRotationScale();
   const {
     radiusAxis

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.mts

@@ -1,11 +1,11 @@
 import { type RadarSeriesAreaProps } from "./RadarSeriesPlot.types.mjs";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
-import type { HighlightItemIdentifierWithType, SeriesId } from "../../models/seriesType/index.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
+import type { SeriesId, HighlightItemIdentifierWithType } from "../../models/seriesType/index.mjs";
+import type { HighlightState } from "../../hooks/useItemHighlightState.mjs";
 interface GetPathPropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
-  isFaded: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
-  isHighlighted: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
+  classes: RadarClasses;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   points: {
     x: number;
     y: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.d.ts

@@ -1,11 +1,11 @@
 import { type RadarSeriesAreaProps } from "./RadarSeriesPlot.types.js";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
-import type { HighlightItemIdentifierWithType, SeriesId } from "../../models/seriesType/index.js";
+import { type RadarClasses } from "../radarClasses.js";
+import type { SeriesId, HighlightItemIdentifierWithType } from "../../models/seriesType/index.js";
+import type { HighlightState } from "../../hooks/useItemHighlightState.js";
 interface GetPathPropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
-  isFaded: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
-  isHighlighted: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
+  classes: RadarClasses;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   points: {
     x: number;
     y: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -11,38 +11,34 @@ 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 _useRadarSeriesData = require("./useRadarSeriesData");
 var _getAreaPath = require("./getAreaPath");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _radarClasses = require("../radarClasses");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 function getPathProps(params) {
   const {
-    isHighlighted,
-    isFaded,
+    getHighlightState,
     seriesId,
     classes,
     points,
     fillArea,
     color
   } = params;
-  const isItemHighlighted = isHighlighted({
-    type: 'radar',
-    seriesId
-  });
-  const isItemFaded = !isItemHighlighted && isFaded({
+  const highlightState = getHighlightState({
     type: 'radar',
     seriesId
   });
+  const isItemHighlighted = highlightState === 'highlighted';
+  const isItemFaded = highlightState === 'faded';
   return {
     d: (0, _getAreaPath.getAreaPath)(points),
     fill: fillArea ? color : 'transparent',
     stroke: color,
-    className: (0, _clsx.default)(classes.area, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded),
+    className: classes.seriesArea,
     strokeOpacity: isItemFaded ? 0.5 : 1,
     fillOpacity: isItemHighlighted && 0.4 || isItemFaded && 0.1 || 0.2,
     strokeWidth: !fillArea && isItemHighlighted ? 2 : 1,
@@ -53,17 +49,15 @@ function getPathProps(params) {
 function RadarSeriesArea(props) {
   const {
       seriesId,
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -80,8 +74,7 @@ function RadarSeriesArea(props) {
         points,
         color,
         fillArea,
-        isFaded,
-        isHighlighted,
+        getHighlightState,
         classes
       }), {
         onClick: event => onItemClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.mjs

@@ -1,39 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { getAreaPath } from "./getAreaPath.mjs";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPathProps(params) {
   const {
-    isHighlighted,
-    isFaded,
+    getHighlightState,
     seriesId,
     classes,
     points,
     fillArea,
     color
   } = params;
-  const isItemHighlighted = isHighlighted({
-    type: 'radar',
-    seriesId
-  });
-  const isItemFaded = !isItemHighlighted && isFaded({
+  const highlightState = getHighlightState({
     type: 'radar',
     seriesId
   });
+  const isItemHighlighted = highlightState === 'highlighted';
+  const isItemFaded = highlightState === 'faded';
   return {
     d: getAreaPath(points),
     fill: fillArea ? color : 'transparent',
     stroke: color,
-    className: clsx(classes.area, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded),
+    className: classes.seriesArea,
     strokeOpacity: isItemFaded ? 0.5 : 1,
     fillOpacity: isItemHighlighted && 0.4 || isItemFaded && 0.1 || 0.2,
     strokeWidth: !fillArea && isItemHighlighted ? 2 : 1,
@@ -44,17 +40,15 @@ export function getPathProps(params) {
 function RadarSeriesArea(props) {
   const {
       seriesId,
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(seriesId);
   const getRotationIndex = useRadarRotationIndex();
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
-  const classes = useUtilityClasses(props.classes);
+  const getHighlightState = useItemHighlightStateGetter();
+  const classes = useUtilityClasses(inClasses);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -71,8 +65,7 @@ function RadarSeriesArea(props) {
         points,
         color,
         fillArea,
-        isFaded,
-        isHighlighted,
+        getHighlightState,
         classes
       }), {
         onClick: event => onItemClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.mts

@@ -1,13 +1,12 @@
-import * as React from 'react';
 import { type RadarSeriesMarksProps } from "./RadarSeriesPlot.types.mjs";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 import { type SeriesId } from "../../models/seriesType/common.mjs";
 import type { HighlightItemIdentifierWithType } from "../../models/index.mjs";
+import type { HighlightState } from "../../hooks/useItemHighlightState.mjs";
 interface GetCirclePropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
-  isFaded: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
-  isHighlighted: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
+  classes: RadarClasses;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   point: {
     x: number;
     y: number;
@@ -15,7 +14,17 @@ interface GetCirclePropsParams {
   fillArea?: boolean;
   color: string;
 }
-export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
+export declare function getCircleProps(params: GetCirclePropsParams): {
+  cx: number;
+  cy: number;
+  r: number;
+  fill: string;
+  stroke: string;
+  opacity: number;
+  className: string;
+  'data-highlighted': true | undefined;
+  'data-faded': true | undefined;
+};
 declare function RadarSeriesMarks(props: RadarSeriesMarksProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.ts

@@ -1,13 +1,12 @@
-import * as React from 'react';
 import { type RadarSeriesMarksProps } from "./RadarSeriesPlot.types.js";
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 import { type SeriesId } from "../../models/seriesType/common.js";
 import type { HighlightItemIdentifierWithType } from "../../models/index.js";
+import type { HighlightState } from "../../hooks/useItemHighlightState.js";
 interface GetCirclePropsParams {
   seriesId: SeriesId;
-  classes: RadarSeriesPlotClasses;
-  isFaded: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
-  isHighlighted: (item: HighlightItemIdentifierWithType<'radar'> | null) => boolean;
+  classes: RadarClasses;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   point: {
     x: number;
     y: number;
@@ -15,7 +14,17 @@ interface GetCirclePropsParams {
   fillArea?: boolean;
   color: string;
 }
-export declare function getCircleProps(params: GetCirclePropsParams): React.SVGProps<SVGCircleElement>;
+export declare function getCircleProps(params: GetCirclePropsParams): {
+  cx: number;
+  cy: number;
+  r: number;
+  fill: string;
+  stroke: string;
+  opacity: number;
+  className: string;
+  'data-highlighted': true | undefined;
+  'data-faded': true | undefined;
+};
 declare function RadarSeriesMarks(props: RadarSeriesMarksProps): import("react/jsx-runtime").JSX.Element;
 declare namespace RadarSeriesMarks {
   var propTypes: any;

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -10,31 +10,27 @@ exports.getCircleProps = getCircleProps;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
-var _clsx = require("clsx");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _radarClasses = require("../radarClasses");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 function getCircleProps(params) {
   const {
-    isHighlighted,
-    isFaded,
+    getHighlightState,
     seriesId,
     classes,
     point,
     fillArea,
     color
   } = params;
-  const isItemHighlighted = isHighlighted({
-    type: 'radar',
-    seriesId
-  });
-  const isItemFaded = !isItemHighlighted && isFaded({
+  const highlightState = getHighlightState({
     type: 'radar',
     seriesId
   });
+  const isItemHighlighted = highlightState === 'highlighted';
+  const isItemFaded = highlightState === 'faded';
   return {
     cx: point.x,
     cy: point.y,
@@ -42,20 +38,20 @@ function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    className: (0, _clsx.clsx)(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+    className: classes.seriesMark,
+    'data-highlighted': isItemHighlighted || undefined,
+    'data-faded': isItemFaded || undefined
   };
 }
 function RadarSeriesMarks(props) {
   const {
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(props.seriesId);
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -73,8 +69,7 @@ function RadarSeriesMarks(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           pointerEvents: onItemClick ? undefined : 'none',

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -1,31 +1,27 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["seriesId", "onItemClick"];
+const _excluded = ["seriesId", "onItemClick", "classes"];
 import * as React from 'react';
-import { clsx } from 'clsx';
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getCircleProps(params) {
   const {
-    isHighlighted,
-    isFaded,
+    getHighlightState,
     seriesId,
     classes,
     point,
     fillArea,
     color
   } = params;
-  const isItemHighlighted = isHighlighted({
-    type: 'radar',
-    seriesId
-  });
-  const isItemFaded = !isItemHighlighted && isFaded({
+  const highlightState = getHighlightState({
     type: 'radar',
     seriesId
   });
+  const isItemHighlighted = highlightState === 'highlighted';
+  const isItemFaded = highlightState === 'faded';
   return {
     cx: point.x,
     cy: point.y,
@@ -33,20 +29,20 @@ export function getCircleProps(params) {
     fill: color,
     stroke: color,
     opacity: fillArea && isItemFaded ? 0.5 : 1,
-    className: clsx(classes.mark, isItemHighlighted && classes.highlighted || isItemFaded && classes.faded)
+    className: classes.seriesMark,
+    'data-highlighted': isItemHighlighted || undefined,
+    'data-faded': isItemFaded || undefined
   };
 }
 function RadarSeriesMarks(props) {
   const {
-      onItemClick
+      onItemClick,
+      classes: inClasses
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
-  const classes = useUtilityClasses(props.classes);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  const classes = useUtilityClasses(inClasses);
+  const getHighlightState = useItemHighlightStateGetter();
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -64,8 +60,7 @@ function RadarSeriesMarks(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           pointerEvents: onItemClick ? undefined : 'none',

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadarSeriesPlot = RadarSeriesPlot;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _radarClasses = require("../radarClasses");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _RadarSeriesArea = require("./RadarSeriesArea");
 var _RadarSeriesMarks = require("./RadarSeriesMarks");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
@@ -18,6 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function RadarSeriesPlot(props) {
   const {
     seriesId: inSeriesId,
+    className,
     classes: inClasses,
     onAreaClick,
     onMarkClick
@@ -25,13 +27,10 @@ function RadarSeriesPlot(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(inSeriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
-  const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(inClasses);
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
+  const classes = (0, _radarClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.seriesRoot, className),
     children: seriesCoordinates?.map(({
       seriesId,
       points,
@@ -49,8 +48,7 @@ function RadarSeriesPlot(props) {
           points,
           color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onAreaClick?.(event, {
@@ -64,8 +62,7 @@ function RadarSeriesPlot(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onMarkClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
-import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
+import { useUtilityClasses } from "../radarClasses.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { getPathProps } from "./RadarSeriesArea.mjs";
 import { getCircleProps } from "./RadarSeriesMarks.mjs";
 import { useRadarRotationIndex } from "./useRadarRotationIndex.mjs";
@@ -11,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function RadarSeriesPlot(props) {
   const {
     seriesId: inSeriesId,
+    className,
     classes: inClasses,
     onAreaClick,
     onMarkClick
@@ -18,13 +20,10 @@ function RadarSeriesPlot(props) {
   const seriesCoordinates = useRadarSeriesData(inSeriesId);
   const getRotationIndex = useRadarRotationIndex();
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   const classes = useUtilityClasses(inClasses);
   return /*#__PURE__*/_jsx("g", {
-    className: classes.root,
+    className: clsx(classes.seriesRoot, className),
     children: seriesCoordinates?.map(({
       seriesId,
       points,
@@ -42,8 +41,7 @@ function RadarSeriesPlot(props) {
           points,
           color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onAreaClick?.(event, {
@@ -57,8 +55,7 @@ function RadarSeriesPlot(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onMarkClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.mts

@@ -1,9 +1,11 @@
 import type * as React from 'react';
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+import { type RadarClasses } from "../radarClasses.mjs";
 import { type RadarItemIdentifier } from "../../models/seriesType/radar.mjs";
-export interface RadarSeriesAreaClasses extends RadarSeriesPlotClasses {}
-export interface RadarSeriesMarksClasses extends RadarSeriesPlotClasses {}
 interface CommonRadarSeriesPlotProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * The id of the series to display.
    * If undefined all series are displayed.
@@ -12,7 +14,7 @@ interface CommonRadarSeriesPlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarSeriesPlotClasses>;
+  classes?: Partial<RadarClasses>;
 }
 export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
   /**

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.d.ts

@@ -1,9 +1,11 @@
 import type * as React from 'react';
-import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
+import { type RadarClasses } from "../radarClasses.js";
 import { type RadarItemIdentifier } from "../../models/seriesType/radar.js";
-export interface RadarSeriesAreaClasses extends RadarSeriesPlotClasses {}
-export interface RadarSeriesMarksClasses extends RadarSeriesPlotClasses {}
 interface CommonRadarSeriesPlotProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * The id of the series to display.
    * If undefined all series are displayed.
@@ -12,7 +14,7 @@ interface CommonRadarSeriesPlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<RadarSeriesPlotClasses>;
+  classes?: Partial<RadarClasses>;
 }
 export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
   /**

package/RadarChart/RadarSeriesPlot/index.d.mts

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

package/RadarChart/RadarSeriesPlot/index.d.ts

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