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

package/RadarChart/RadarSeriesPlot/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   RadarSeriesArea: true,
-  RadarSeriesMarks: true,
-  radarSeriesPlotClasses: true
+  RadarSeriesMarks: true
 };
 Object.defineProperty(exports, "RadarSeriesArea", {
   enumerable: true,
@@ -20,12 +19,6 @@ Object.defineProperty(exports, "RadarSeriesMarks", {
     return _RadarSeriesMarks.RadarSeriesMarks;
   }
 });
-Object.defineProperty(exports, "radarSeriesPlotClasses", {
-  enumerable: true,
-  get: function () {
-    return _radarSeriesPlotClasses.radarSeriesPlotClasses;
-  }
-});
 var _RadarSeriesPlot = require("./RadarSeriesPlot");
 Object.keys(_RadarSeriesPlot).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -39,5 +32,4 @@ Object.keys(_RadarSeriesPlot).forEach(function (key) {
   });
 });
 var _RadarSeriesArea = require("./RadarSeriesArea");
-var _RadarSeriesMarks = require("./RadarSeriesMarks");
-var _radarSeriesPlotClasses = require("./radarSeriesPlotClasses");
+var _RadarSeriesMarks = require("./RadarSeriesMarks");

package/RadarChart/RadarSeriesPlot/index.mjs

@@ -1,4 +1,3 @@
 export * from "./RadarSeriesPlot.mjs";
 export { RadarSeriesArea } from "./RadarSeriesArea.mjs";
-export { RadarSeriesMarks } from "./RadarSeriesMarks.mjs";
-export { radarSeriesPlotClasses } from "./radarSeriesPlotClasses.mjs";
+export { RadarSeriesMarks } from "./RadarSeriesMarks.mjs";

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useInteractionAllItemProps = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _useInteractionItemProps = require("../../hooks/useInteractionItemProps");
 const useInteractionAllItemProps = (data, skip) => {
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const results = React.useMemo(() => {
     return data.map(item => {
       return skip ? {} : (0, _useInteractionItemProps.getInteractionItemProps)(instance, {

package/RadarChart/RadarSeriesPlot/useInteractionAllItemProps.mjs

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { getInteractionItemProps } from "../../hooks/useInteractionItemProps.mjs";
 export const useInteractionAllItemProps = (data, skip) => {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const results = React.useMemo(() => {
     return data.map(item => {
       return skip ? {} : getInteractionItemProps(instance, {

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,8 +9,8 @@ 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 _useChartContext = require("../../context/ChartProvider/useChartContext");
+var _useItemHighlightStateGetter = require("../../hooks/useItemHighlightStateGetter");
+var _useChartsContext = require("../../context/ChartsProvider/useChartsContext");
 var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 /**
  * This hook provides all the data needed to display radar series.
@@ -20,44 +20,36 @@ var _getSeriesColorFn = require("../../internals/getSeriesColorFn");
 function useRadarSeriesData(querySeriesId) {
   const {
     instance
-  } = (0, _useChartContext.useChartContext)();
+  } = (0, _useChartsContext.useChartsContext)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
     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,8 +2,8 @@ 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 { useChartContext } from "../../context/ChartProvider/useChartContext.mjs";
+import { useItemHighlightStateGetter } from "../../hooks/useItemHighlightStateGetter.mjs";
+import { useChartsContext } from "../../context/ChartsProvider/useChartsContext.mjs";
 import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";
 
 /**
@@ -14,44 +14,36 @@ import { getSeriesColorFn } from "../../internals/getSeriesColorFn.mjs";
 export function useRadarSeriesData(querySeriesId) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const rotationScale = useRotationScale();
   const {
     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/index.d.mts

@@ -17,4 +17,6 @@ export * from "./RadarAxis/index.mjs";
 export * from "./RadarAxisHighlight/index.mjs";
 export * from "./RadarMetricLabels/index.mjs";
 export * from "./RadarSeriesPlot/index.mjs";
-export * from "./RadarChart.plugins.mjs";
+export * from "./RadarChart.plugins.mjs";
+export { radarClasses } from "./radarClasses.mjs";
+export type { RadarClassKey, RadarClasses } from "./radarClasses.mjs";

package/RadarChart/index.d.ts

@@ -17,4 +17,6 @@ export * from "./RadarAxis/index.js";
 export * from "./RadarAxisHighlight/index.js";
 export * from "./RadarMetricLabels/index.js";
 export * from "./RadarSeriesPlot/index.js";
-export * from "./RadarChart.plugins.js";
+export * from "./RadarChart.plugins.js";
+export { radarClasses } from "./radarClasses.js";
+export type { RadarClassKey, RadarClasses } from "./radarClasses.js";

package/RadarChart/index.js

@@ -7,7 +7,8 @@ var _exportNames = {
   Unstable_RadarChart: true,
   Unstable_RadarDataProvider: true,
   RadarChart: true,
-  RadarDataProvider: true
+  RadarDataProvider: true,
+  radarClasses: true
 };
 Object.defineProperty(exports, "RadarChart", {
   enumerable: true,
@@ -22,6 +23,12 @@ Object.defineProperty(exports, "RadarDataProvider", {
   }
 });
 exports.Unstable_RadarDataProvider = exports.Unstable_RadarChart = void 0;
+Object.defineProperty(exports, "radarClasses", {
+  enumerable: true,
+  get: function () {
+    return _radarClasses.radarClasses;
+  }
+});
 var _RadarChart = require("./RadarChart");
 var _RadarDataProvider = require("./RadarDataProvider");
 var _FocusedRadarMark = require("./FocusedRadarMark");
@@ -108,6 +115,7 @@ Object.keys(_RadarChart2).forEach(function (key) {
     }
   });
 });
+var _radarClasses = require("./radarClasses");
 /**
  * @deprecated radar chart is now stable, import `RadarChart` instead
  */

package/RadarChart/index.mjs

@@ -18,4 +18,5 @@ export * from "./RadarAxis/index.mjs";
 export * from "./RadarAxisHighlight/index.mjs";
 export * from "./RadarMetricLabels/index.mjs";
 export * from "./RadarSeriesPlot/index.mjs";
-export * from "./RadarChart.plugins.mjs";
+export * from "./RadarChart.plugins.mjs";
+export { radarClasses } from "./radarClasses.mjs";

package/RadarChart/radarClasses.d.mts

@@ -0,0 +1,30 @@
+export interface RadarClasses {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+}
+export type RadarClassKey = keyof RadarClasses;
+export declare function getRadarUtilityClass(slot: string): string;
+export declare const radarClasses: RadarClasses;
+export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisLine" | "axisLabel" | "axisRoot" | "gridRadial" | "gridDivider" | "gridStripe" | "seriesRoot" | "seriesArea" | "seriesMark" | "axisHighlightRoot" | "axisHighlightLine" | "axisHighlightDot", string>;

package/RadarChart/radarClasses.d.ts

@@ -0,0 +1,30 @@
+export interface RadarClasses {
+  /** Styles applied to the radar axis root element. */
+  axisRoot: string;
+  /** Styles applied to the radar axis line element. */
+  axisLine: string;
+  /** Styles applied to every radar axis label element. */
+  axisLabel: string;
+  /** Styles applied to every radial line element of the grid. */
+  gridRadial: string;
+  /** Styles applied to every divider element of the grid. */
+  gridDivider: string;
+  /** Styles applied to every stripe element of the grid. */
+  gridStripe: string;
+  /** Styles applied to the series plot root element. */
+  seriesRoot: string;
+  /** Styles applied to the series area element. */
+  seriesArea: string;
+  /** Styles applied to the series mark element. */
+  seriesMark: string;
+  /** Styles applied to the axis highlight root element. */
+  axisHighlightRoot: string;
+  /** Styles applied to the axis highlight line element. */
+  axisHighlightLine: string;
+  /** Styles applied to every axis highlight dot element. */
+  axisHighlightDot: string;
+}
+export type RadarClassKey = keyof RadarClasses;
+export declare function getRadarUtilityClass(slot: string): string;
+export declare const radarClasses: RadarClasses;
+export declare const useUtilityClasses: (classes?: Partial<RadarClasses>) => Record<"axisLine" | "axisLabel" | "axisRoot" | "gridRadial" | "gridDivider" | "gridStripe" | "seriesRoot" | "seriesArea" | "seriesMark" | "axisHighlightRoot" | "axisHighlightLine" | "axisHighlightDot", string>;

package/RadarChart/radarClasses.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRadarUtilityClass = getRadarUtilityClass;
+exports.useUtilityClasses = exports.radarClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getRadarUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiRadarChart', slot);
+}
+const radarClasses = exports.radarClasses = (0, _generateUtilityClasses.default)('MuiRadarChart', ['axisRoot', 'axisLine', 'axisLabel', 'gridRadial', 'gridDivider', 'gridStripe', 'seriesRoot', 'seriesArea', 'seriesMark', 'axisHighlightRoot', 'axisHighlightLine', 'axisHighlightDot']);
+const useUtilityClasses = classes => {
+  const slots = {
+    axisRoot: ['axisRoot'],
+    axisLine: ['axisLine'],
+    axisLabel: ['axisLabel'],
+    gridRadial: ['gridRadial'],
+    gridDivider: ['gridDivider'],
+    gridStripe: ['gridStripe'],
+    seriesRoot: ['seriesRoot'],
+    seriesArea: ['seriesArea'],
+    seriesMark: ['seriesMark'],
+    axisHighlightRoot: ['axisHighlightRoot'],
+    axisHighlightLine: ['axisHighlightLine'],
+    axisHighlightDot: ['axisHighlightDot']
+  };
+  return (0, _composeClasses.default)(slots, getRadarUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/RadarChart/radarClasses.mjs

@@ -0,0 +1,24 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getRadarUtilityClass(slot) {
+  return generateUtilityClass('MuiRadarChart', slot);
+}
+export const radarClasses = generateUtilityClasses('MuiRadarChart', ['axisRoot', 'axisLine', 'axisLabel', 'gridRadial', 'gridDivider', 'gridStripe', 'seriesRoot', 'seriesArea', 'seriesMark', 'axisHighlightRoot', 'axisHighlightLine', 'axisHighlightDot']);
+export const useUtilityClasses = classes => {
+  const slots = {
+    axisRoot: ['axisRoot'],
+    axisLine: ['axisLine'],
+    axisLabel: ['axisLabel'],
+    gridRadial: ['gridRadial'],
+    gridDivider: ['gridDivider'],
+    gridStripe: ['gridStripe'],
+    seriesRoot: ['seriesRoot'],
+    seriesArea: ['seriesArea'],
+    seriesMark: ['seriesMark'],
+    axisHighlightRoot: ['axisHighlightRoot'],
+    axisHighlightLine: ['axisHighlightLine'],
+    axisHighlightDot: ['axisHighlightDot']
+  };
+  return composeClasses(slots, getRadarUtilityClass, classes);
+};

package/RadarChart/seriesConfig/legend.js

@@ -4,25 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _getLabel = require("../../internals/getLabel");
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = (0, _getLabel.getLabel)(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'radar',
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel,
-      markType: series[seriesId].labelMarkType ?? 'square'
-    });
-    return acc;
-  }, []);
-};
+var _legendUtils = require("../../internals/legendUtils");
+const legendGetter = series => (0, _legendUtils.getSeriesLegendItems)('radar', series, 'square');
 var _default = exports.default = legendGetter;

package/RadarChart/seriesConfig/legend.mjs

@@ -1,22 +1,3 @@
-import { getLabel } from "../../internals/getLabel.mjs";
-const legendGetter = params => {
-  const {
-    seriesOrder,
-    series
-  } = params;
-  return seriesOrder.reduce((acc, seriesId) => {
-    const formattedLabel = getLabel(series[seriesId].label, 'legend');
-    if (formattedLabel === undefined) {
-      return acc;
-    }
-    acc.push({
-      type: 'radar',
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel,
-      markType: series[seriesId].labelMarkType ?? 'square'
-    });
-    return acc;
-  }, []);
-};
+import { getSeriesLegendItems } from "../../internals/legendUtils.mjs";
+const legendGetter = series => getSeriesLegendItems('radar', series, 'square');
 export default legendGetter;

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;