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

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 { 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;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   points: {
     x: number;
     y: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.js

@@ -15,29 +15,26 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _getAreaPath = require("./getAreaPath");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
 var _useRadarRotationIndex = require("./useRadarRotationIndex");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick"];
 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',
@@ -59,10 +56,7 @@ function RadarSeriesArea(props) {
   const seriesCoordinates = (0, _useRadarSeriesData.useRadarSeriesData)(seriesId);
   const getRotationIndex = (0, _useRadarRotationIndex.useRadarRotationIndex)();
   const interactionProps = (0, _useInteractionAllItemProps.useInteractionAllItemProps)(seriesCoordinates);
-  const {
-    isFaded,
-    isHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(props.classes);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -80,8 +74,7 @@ function RadarSeriesArea(props) {
         points,
         color,
         fillArea,
-        isFaded,
-        isHighlighted,
+        getHighlightState,
         classes
       }), {
         onClick: event => onItemClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesArea.mjs

@@ -7,28 +7,25 @@ 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 { 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',
@@ -50,10 +47,7 @@ function RadarSeriesArea(props) {
   const seriesCoordinates = useRadarSeriesData(seriesId);
   const getRotationIndex = useRadarRotationIndex();
   const interactionProps = useInteractionAllItemProps(seriesCoordinates);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   const classes = useUtilityClasses(props.classes);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
@@ -71,8 +65,7 @@ function RadarSeriesArea(props) {
         points,
         color,
         fillArea,
-        isFaded,
-        isHighlighted,
+        getHighlightState,
         classes
       }), {
         onClick: event => onItemClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.mts

@@ -3,11 +3,11 @@ import { type RadarSeriesMarksProps } from "./RadarSeriesPlot.types.mjs";
 import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.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;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   point: {
     x: number;
     y: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.d.ts

@@ -3,11 +3,11 @@ import { type RadarSeriesMarksProps } from "./RadarSeriesPlot.types.js";
 import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.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;
+  getHighlightState: (item: HighlightItemIdentifierWithType<'radar'> | null) => HighlightState;
   point: {
     x: number;
     y: number;

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.js

@@ -13,28 +13,25 @@ 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 _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "onItemClick"];
 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,
@@ -52,10 +49,7 @@ function RadarSeriesMarks(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 getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -73,8 +67,7 @@ function RadarSeriesMarks(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           pointerEvents: onItemClick ? undefined : 'none',

package/RadarChart/RadarSeriesPlot/RadarSeriesMarks.mjs

@@ -5,27 +5,24 @@ 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 { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.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,
@@ -43,10 +40,7 @@ function RadarSeriesMarks(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
   const classes = useUtilityClasses(props.classes);
-  const {
-    isFaded,
-    isHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: seriesCoordinates?.map(({
       seriesId: id,
@@ -64,8 +58,7 @@ function RadarSeriesMarks(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           pointerEvents: onItemClick ? undefined : 'none',

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRadarSeriesData = require("./useRadarSeriesData");
 var _useInteractionAllItemProps = require("./useInteractionAllItemProps");
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
 var _RadarSeriesArea = require("./RadarSeriesArea");
 var _RadarSeriesMarks = require("./RadarSeriesMarks");
@@ -25,10 +25,7 @@ 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 getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const classes = (0, _radarSeriesPlotClasses.useUtilityClasses)(inClasses);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     className: classes.root,
@@ -49,8 +46,7 @@ function RadarSeriesPlot(props) {
           points,
           color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onAreaClick?.(event, {
@@ -64,8 +60,7 @@ function RadarSeriesPlot(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onMarkClick?.(event, {

package/RadarChart/RadarSeriesPlot/RadarSeriesPlot.mjs

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import PropTypes from 'prop-types';
 import { useRadarSeriesData } from "./useRadarSeriesData.mjs";
 import { useInteractionAllItemProps } from "./useInteractionAllItemProps.mjs";
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useUtilityClasses } from "./radarSeriesPlotClasses.mjs";
 import { getPathProps } from "./RadarSeriesArea.mjs";
 import { getCircleProps } from "./RadarSeriesMarks.mjs";
@@ -18,10 +18,7 @@ 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,
@@ -42,8 +39,7 @@ function RadarSeriesPlot(props) {
           points,
           color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onAreaClick?.(event, {
@@ -57,8 +53,7 @@ function RadarSeriesPlot(props) {
           point,
           color: point.color,
           fillArea,
-          isFaded,
-          isHighlighted,
+          getHighlightState,
           classes
         }), {
           onClick: event => onMarkClick?.(event, {

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.mts

@@ -26,7 +26,7 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];
-  color: string;
   id: SeriesId;
   valueFormatter: import("../../internals/index.mjs").SeriesValueFormatter<number>;
+  color: string;
 }[];

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -26,7 +26,7 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;
   data: number[];
-  color: string;
   id: SeriesId;
   valueFormatter: import("../../internals/index.js").SeriesValueFormatter<number>;
+  color: string;
 }[];

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _useScale = require("../../hooks/useScale");
 var _useRadarSeries = require("../../hooks/useRadarSeries");
 var _useAxis = require("../../hooks/useAxis");
-var _useItemHighlightedGetter = require("../../hooks/useItemHighlightedGetter");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
 var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 /**
@@ -26,38 +26,30 @@ function useRadarSeriesData(querySeriesId) {
     radiusAxis
   } = (0, _useAxis.useRadiusAxes)();
   const radarSeries = (0, _useRadarSeries.useRadarSeries)(querySeriesId === undefined ? undefined : [querySeriesId]);
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = (0, _useItemHighlightedGetter.useItemHighlightedGetter)();
+  const getHighlightState = (0, _useItemHighlightStateGetter.useItemHighlightStateGetter)();
   const metrics = rotationScale?.domain() ?? [];
   const angles = metrics.map(key => rotationScale(key));
   return radarSeries.map(series => {
     const seriesId = series.id;
-    const isSeriesHighlighted = isItemHighlighted({
-      type: 'radar',
-      seriesId
-    });
-    const isSeriesFaded = !isSeriesHighlighted && isItemFaded({
+    const seriesHighlightState = getHighlightState({
       type: 'radar',
       seriesId
     });
+    const isSeriesHighlighted = seriesHighlightState === 'highlighted';
+    const isSeriesFaded = seriesHighlightState === 'faded';
     const getColor = (0, _getSeriesColorFn.getSeriesColorFn)(series);
     return (0, _extends2.default)({}, series, {
       seriesId: series.id,
       isSeriesHighlighted,
       isSeriesFaded,
       points: series.data.map((value, dataIndex) => {
-        const highlighted = isItemHighlighted({
-          type: 'radar',
-          seriesId,
-          dataIndex
-        });
-        const faded = !highlighted && isItemFaded({
+        const pointHighlightState = getHighlightState({
           type: 'radar',
           seriesId,
           dataIndex
         });
+        const highlighted = pointHighlightState === 'highlighted';
+        const faded = pointHighlightState === 'faded';
         const r = radiusAxis[metrics[dataIndex]].scale(value);
         const angle = angles[dataIndex];
         const [x, y] = instance.polar2svg(r, angle);

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.mjs

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { useRotationScale } from "../../hooks/useScale.mjs";
 import { useRadarSeries } from "../../hooks/useRadarSeries.mjs";
 import { useRadiusAxes } from "../../hooks/useAxis.mjs";
-import { useItemHighlightedGetter } from "../../hooks/useItemHighlightedGetter.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
 import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
 import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";
 
@@ -20,38 +20,30 @@ export function useRadarSeriesData(querySeriesId) {
     radiusAxis
   } = useRadiusAxes();
   const radarSeries = useRadarSeries(querySeriesId === undefined ? undefined : [querySeriesId]);
-  const {
-    isFaded: isItemFaded,
-    isHighlighted: isItemHighlighted
-  } = useItemHighlightedGetter();
+  const getHighlightState = useItemHighlightStateGetter();
   const metrics = rotationScale?.domain() ?? [];
   const angles = metrics.map(key => rotationScale(key));
   return radarSeries.map(series => {
     const seriesId = series.id;
-    const isSeriesHighlighted = isItemHighlighted({
-      type: 'radar',
-      seriesId
-    });
-    const isSeriesFaded = !isSeriesHighlighted && isItemFaded({
+    const seriesHighlightState = getHighlightState({
       type: 'radar',
       seriesId
     });
+    const isSeriesHighlighted = seriesHighlightState === 'highlighted';
+    const isSeriesFaded = seriesHighlightState === 'faded';
     const getColor = getSeriesColorFn(series);
     return _extends({}, series, {
       seriesId: series.id,
       isSeriesHighlighted,
       isSeriesFaded,
       points: series.data.map((value, dataIndex) => {
-        const highlighted = isItemHighlighted({
-          type: 'radar',
-          seriesId,
-          dataIndex
-        });
-        const faded = !highlighted && isItemFaded({
+        const pointHighlightState = getHighlightState({
           type: 'radar',
           seriesId,
           dataIndex
         });
+        const highlighted = pointHighlightState === 'highlighted';
+        const faded = pointHighlightState === 'faded';
         const r = radiusAxis[metrics[dataIndex]].scale(value);
         const angle = angles[dataIndex];
         const [x, y] = instance.polar2svg(r, angle);

package/RadarChart/seriesConfig/tooltip.js

@@ -26,14 +26,19 @@ const tooltipGetter = params => {
     color: getColor(),
     label,
     markType: series.labelMarkType,
-    values: series.data.filter((_, index) => identifier.dataIndex == null || identifier.dataIndex === index).map((value, dataIndex) => ({
-      value,
-      formattedValue: series.valueFormatter(value, {
-        dataIndex
-      }),
-      markType: series.labelMarkType,
-      label: formatter(rotationAxis?.data?.[dataIndex])
-    }))
+    values: series.data.map((value, dataIndex) => {
+      if (identifier.dataIndex != null && identifier.dataIndex !== dataIndex) {
+        return null;
+      }
+      return {
+        value,
+        formattedValue: series.valueFormatter(value, {
+          dataIndex
+        }),
+        markType: series.labelMarkType,
+        label: formatter(rotationAxis?.data?.[dataIndex])
+      };
+    }).filter(v => v !== null)
   };
 };
 const axisTooltipGetter = series => {

package/RadarChart/seriesConfig/tooltip.mjs

@@ -20,14 +20,19 @@ const tooltipGetter = params => {
     color: getColor(),
     label,
     markType: series.labelMarkType,
-    values: series.data.filter((_, index) => identifier.dataIndex == null || identifier.dataIndex === index).map((value, dataIndex) => ({
-      value,
-      formattedValue: series.valueFormatter(value, {
-        dataIndex
-      }),
-      markType: series.labelMarkType,
-      label: formatter(rotationAxis?.data?.[dataIndex])
-    }))
+    values: series.data.map((value, dataIndex) => {
+      if (identifier.dataIndex != null && identifier.dataIndex !== dataIndex) {
+        return null;
+      }
+      return {
+        value,
+        formattedValue: series.valueFormatter(value, {
+          dataIndex
+        }),
+        markType: series.labelMarkType,
+        label: formatter(rotationAxis?.data?.[dataIndex])
+      };
+    }).filter(v => v !== null)
   };
 };
 export const axisTooltipGetter = series => {

package/RadarChart/useRadarChartProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _RadarChart = require("./RadarChart.plugins");
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "enableKeyboardNavigation", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "className"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -40,7 +40,7 @@ const useRadarChartProps = props => {
       onAxisClick,
       onAreaClick,
       onMarkClick,
-      enableKeyboardNavigation,
+      disableKeyboardNavigation,
       className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -57,7 +57,7 @@ const useRadarChartProps = props => {
     onHighlightChange,
     skipAnimation,
     onAxisClick,
-    enableKeyboardNavigation,
+    disableKeyboardNavigation,
     plugins: _RadarChart.RADAR_PLUGINS
   };
   const overlayProps = {

package/RadarChart/useRadarChartProps.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "enableKeyboardNavigation", "className"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar", "onAxisClick", "onAreaClick", "onMarkClick", "disableKeyboardNavigation", "className"];
 import { RADAR_PLUGINS } from "./RadarChart.plugins.mjs";
 /**
  * A helper function that extracts RadarChartProps from the input props
@@ -34,7 +34,7 @@ export const useRadarChartProps = props => {
       onAxisClick,
       onAreaClick,
       onMarkClick,
-      enableKeyboardNavigation,
+      disableKeyboardNavigation,
       className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -51,7 +51,7 @@ export const useRadarChartProps = props => {
     onHighlightChange,
     skipAnimation,
     onAxisClick,
-    enableKeyboardNavigation,
+    disableKeyboardNavigation,
     plugins: RADAR_PLUGINS
   };
   const overlayProps = {

package/ScatterChart/BatchScatter.d.mts

@@ -1,6 +1,6 @@
 import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type D3Scale } from "../models/axis.mjs";
-import { type ScatterClasses } from "./scatterClasses.mjs";
+import type { ScatterClasses } from "./scatterClasses.mjs";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.mjs";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
@@ -9,6 +9,7 @@ export interface BatchScatterProps {
   color: string;
   colorGetter?: ColorGetter<'scatter'>;
   classes?: Partial<ScatterClasses>;
+  className?: string;
 }
 export interface BatchScatterPathsProps {
   series: DefaultizedScatterSeriesType;

package/ScatterChart/BatchScatter.d.ts

@@ -1,6 +1,6 @@
 import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
-import { type ScatterClasses } from "./scatterClasses.js";
+import type { ScatterClasses } from "./scatterClasses.js";
 import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
@@ -9,6 +9,7 @@ export interface BatchScatterProps {
   color: string;
   colorGetter?: ColorGetter<'scatter'>;
   classes?: Partial<ScatterClasses>;
+  className?: string;
 }
 export interface BatchScatterPathsProps {
   series: DefaultizedScatterSeriesType;