@mui/x-charts 8.27.0 → 9.0.0-alpha.1

package/PieChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'pie'>;
 export default legendGetter;

package/PieChart/seriesConfig/legend.js

@@ -21,7 +21,6 @@ const legendGetter = params => {
         type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        id,
         itemId: id,
         dataIndex,
         color: item.color,

package/PieChart/seriesConfig/seriesLayout.d.ts

@@ -1,3 +1,3 @@
-import type { SeriesLayoutGetter } from "../../internals/plugins/models/seriesConfig/seriesLayout.types.js";
+import type { SeriesLayoutGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesLayout: SeriesLayoutGetter<'pie'>;
 export default seriesLayout;

package/PieChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'pie'>;
 export default seriesProcessor;

package/PieChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipGetter } from "../../internals/plugins/models/index.js";
+import type { TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'pie'>;
 export default tooltipGetter;

package/PieChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'pie'>;
 export default tooltipItemPositionGetter;

package/RadarChart/RadarAxisHighlight/index.d.ts

@@ -1 +1,2 @@
-export * from "./RadarAxisHighlight.js";
+export * from "./RadarAxisHighlight.js";
+export { type RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";

package/RadarChart/RadarChart.d.ts

@@ -42,5 +42,5 @@ export interface RadarChartProps extends Omit<RadarDataProviderProps, 'plugins'>
  *
  * - [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
  */
-declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const RadarChart: React.ForwardRefExoticComponent<RadarChartProps & React.RefAttributes<HTMLDivElement>>;
 export { RadarChart };

package/RadarChart/RadarChart.js

@@ -54,8 +54,8 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarDataProvider.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        ref: ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, (0, _extends2.default)({}, radarSeriesAreaProps)), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, (0, _extends2.default)({}, radarSeriesMarksProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusedRadarMark.FocusedRadarMark, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
     }))
@@ -115,8 +115,8 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -133,7 +133,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -163,8 +163,8 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -283,8 +283,8 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['radar']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['radar'])
   }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/RadarChart/RadarGrid/index.d.ts

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

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

@@ -1,6 +1,8 @@
 import type * as React from 'react';
 import { type RadarSeriesPlotClasses } from "./radarSeriesPlotClasses.js";
 import { type RadarItemIdentifier } from "../../models/seriesType/radar.js";
+export interface RadarSeriesAreaClasses extends RadarSeriesPlotClasses {}
+export interface RadarSeriesMarksClasses extends RadarSeriesPlotClasses {}
 interface CommonRadarSeriesPlotProps {
   /**
    * The id of the series to display.

package/RadarChart/RadarSeriesPlot/useRadarRotationIndex.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRadarRotationIndex = useRadarRotationIndex;
 var React = _interopRequireWildcard(require("react"));
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _getSVGPoint = require("../../internals/getSVGPoint");
+var _getChartPoint = require("../../internals/getChartPoint");
 var _coordinateTransformation = require("../../internals/plugins/featurePlugins/useChartPolarAxis/coordinateTransformation");
 var _getAxisIndex = require("../../internals/plugins/featurePlugins/useChartPolarAxis/getAxisIndex");
 var _useStore = require("../../internals/store/useStore");
@@ -28,7 +28,7 @@ function useRadarRotationIndex() {
       // Should never append
       throw new Error(`MUI X Charts: The ${!element ? 'SVG' : 'rotation axis'} was not found to compute radar dataIndex.`);
     }
-    const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
+    const svgPoint = (0, _getChartPoint.getChartPoint)(element, event);
     const rotation = (0, _coordinateTransformation.generateSvg2rotation)(center)(svgPoint.x, svgPoint.y);
     const rotationIndex = (0, _getAxisIndex.getAxisIndex)(rotationAxis, rotation);
     return rotationIndex;

package/RadarChart/RadarSeriesPlot/useRadarSeriesData.d.ts

@@ -5,7 +5,7 @@ import { type SeriesId } from "../../models/seriesType/common.js";
  * @returns
  */
 export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
-  seriesId: SeriesId;
+  seriesId: string;
   isSeriesHighlighted: boolean;
   isSeriesFaded: boolean;
   points: {
@@ -20,8 +20,8 @@ export declare function useRadarSeriesData(querySeriesId?: SeriesId): {
   hidden: boolean;
   type: "radar";
   label?: string | ((location: "tooltip" | "legend") => string) | undefined;
+  highlightScope?: import("../../internals/index.js").CommonHighlightScope | undefined;
   labelMarkType?: import("../../internals/index.js").ChartsLabelMarkType | undefined;
-  highlightScope?: import("../../index.js").HighlightScope | undefined;
   colorGetter?: ((data: import("../../internals/index.js").ColorCallbackValue<number>) => string) | undefined;
   hideMark?: boolean | undefined;
   fillArea?: boolean | undefined;

package/RadarChart/index.d.ts

@@ -3,7 +3,7 @@ export { RadarChart } from "./RadarChart.js";
 /**
  * @deprecated radar chart is now stable, import `RadarChart` instead
  */
-export declare const Unstable_RadarChart: import("react").ForwardRefExoticComponent<import("./RadarChart.js").RadarChartProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const Unstable_RadarChart: import("react").ForwardRefExoticComponent<import("./RadarChart.js").RadarChartProps & import("react").RefAttributes<HTMLDivElement>>;
 export { RadarDataProvider } from "./RadarDataProvider/index.js";
 /**
  * @deprecated radar data provider is now stable, import `RadarDataProvider` instead

package/RadarChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type PolarExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type PolarExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const radiusExtremumGetter: PolarExtremumGetter<'radar'>;
 export declare const rotationExtremumGetter: PolarExtremumGetter<'radar'>;

package/RadarChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'radar'>;
 export default getColor;

package/RadarChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'radar'>;
 export default getSeriesWithDefaultValues;

package/RadarChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const radarSeriesConfig: ChartSeriesTypeConfig<'radar'>;

package/RadarChart/seriesConfig/index.js

@@ -15,6 +15,7 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const radarSeriesConfig = exports.radarSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -26,5 +27,6 @@ const radarSeriesConfig = exports.radarSeriesConfig = {
   radiusExtremumGetter: _extremums.radiusExtremumGetter,
   rotationExtremumGetter: _extremums.rotationExtremumGetter,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/RadarChart/seriesConfig/keyboardFocusHandler.js

@@ -4,20 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
+var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 const outSeriesTypes = new Set(['radar']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes, true);
-    case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes, true);
-    case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(outSeriesTypes, true);
 var _default = exports.default = keyboardFocusHandler;

package/RadarChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'radar'>;
 export default legendGetter;

package/RadarChart/seriesConfig/legend.js

@@ -17,7 +17,6 @@ const legendGetter = params => {
     }
     acc.push({
       type: 'radar',
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel,

package/RadarChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'radar'>;
 export default seriesProcessor;

package/RadarChart/seriesConfig/tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/models/index.js";
+import type { AxisTooltipGetter, TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'radar'>;
 export declare const axisTooltipGetter: AxisTooltipGetter<'radar', 'rotation'>;
 export default tooltipGetter;

package/RadarChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'radar'>;
 export default tooltipItemPositionGetter;

package/ScatterChart/BatchScatter.d.ts

@@ -1,7 +1,7 @@
 import { type DefaultizedScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
 import { type ScatterClasses } from "./scatterClasses.js";
-import { type ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export interface BatchScatterProps {
   series: DefaultizedScatterSeriesType;
   xScale: D3Scale;

package/ScatterChart/BatchScatter.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
-var _useScale = require("../hooks/useScale");
+var _getValueToPositionMapper = require("../hooks/getValueToPositionMapper");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _appendAtKey = require("../internals/appendAtKey");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,8 +25,8 @@ function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGett
   const {
     instance
   } = (0, _ChartProvider.useChartContext)();
-  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+  const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
+  const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
   const paths = new Map();
   const temporaryPaths = new Map();
   for (let i = 0; i < seriesData.length; i += 1) {
@@ -128,8 +128,8 @@ function BatchScatter(props) {
   const siblings = [];
   if (seriesHighlightedItem != null) {
     const datum = series.data[seriesHighlightedItem];
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       fill: colorGetter ? colorGetter(seriesHighlightedItem) : color,
       "data-highlighted": true,
@@ -138,8 +138,8 @@ function BatchScatter(props) {
   }
   if (seriesUnfadedItem != null) {
     const datum = series.data[seriesUnfadedItem];
-    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const getXPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(xScale);
+    const getYPosition = (0, _getValueToPositionMapper.getValueToPositionMapper)(yScale);
     siblings.push(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       fill: colorGetter ? colorGetter(seriesUnfadedItem) : color,
       d: createPath(getXPosition(datum.x), getYPosition(datum.y), markerSize)

package/ScatterChart/Scatter.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type ScatterMarkerSlotProps, type ScatterMarkerSlots } from "./ScatterMarker.types.js";
 import { type DefaultizedScatterSeriesType, type ScatterItemIdentifier } from "../models/seriesType/scatter.js";
 import { type D3Scale } from "../models/axis.js";
-import { type ColorGetter } from "../internals/plugins/models/seriesConfig/index.js";
+import { type ColorGetter } from "../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 import { type ScatterClasses } from "./scatterClasses.js";
 export interface ScatterProps {
   series: DefaultizedScatterSeriesType;

package/ScatterChart/ScatterChart.d.ts

@@ -81,5 +81,5 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
  *
  * - [ScatterChart API](https://mui.com/x/api/charts/scatter-chart/)
  */
-declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<SVGSVGElement>>;
+declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
 export { ScatterChart };

package/ScatterChart/ScatterChart.js

@@ -54,11 +54,12 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
   const {
     chartDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
+  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
+      ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
@@ -79,6 +80,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
+  /**
+   * A gap added between axes when multiple axes are rendered on the same side of the chart.
+   * @default 0
+   */
+  axesGap: _propTypes.default.number,
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -153,8 +159,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   })),
   /**
    * If `true`, the legend is not rendered.
@@ -166,7 +172,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   highlightedItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    seriesId: _propTypes.default.string.isRequired
   }),
   /**
    * This prop is used to help implement the accessibility logic.
@@ -196,8 +202,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   initialHiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   })),
   /**
    * If `true`, a loading overlay is displayed.
@@ -244,6 +250,14 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onTooltipAxisChange: _propTypes.default.func,
   /**
    * The callback fired when the tooltip item changes.
    *
@@ -287,14 +301,22 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   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']),
   title: _propTypes.default.string,
+  /**
+   * The controlled axis tooltip.
+   * Identified by the axis id, and data index.
+   */
+  tooltipAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The tooltip item.
    * Used when the tooltip is controlled.
    */
   tooltipItem: _propTypes.default.shape({
     dataIndex: _propTypes.default.number.isRequired,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    type: _propTypes.default.oneOf(['scatter']).isRequired
+    seriesId: _propTypes.default.string.isRequired,
+    type: _propTypes.default.oneOf(['scatter'])
   }),
   /**
    * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.

package/ScatterChart/scatterClasses.js

@@ -10,9 +10,9 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getScatterUtilityClass(slot) {
-  return (0, _generateUtilityClass.default)('MuiScatter', slot);
+  return (0, _generateUtilityClass.default)('MuiScatterChart', slot);
 }
-const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatter', ['root']);
+const scatterClasses = exports.scatterClasses = (0, _generateUtilityClasses.default)('MuiScatterChart', ['root']);
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root']

package/ScatterChart/seriesConfig/extremums.d.ts

@@ -1,3 +1,3 @@
-import { type CartesianExtremumGetter } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type CartesianExtremumGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const getExtremumX: CartesianExtremumGetter<'scatter'>;
 export declare const getExtremumY: CartesianExtremumGetter<'scatter'>;

package/ScatterChart/seriesConfig/getColor.d.ts

@@ -1,3 +1,3 @@
-import { type ColorProcessor } from "../../internals/plugins/models/index.js";
+import { type ColorProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getColor: ColorProcessor<'scatter'>;
 export default getColor;

package/ScatterChart/seriesConfig/getSeriesWithDefaultValues.d.ts

@@ -1,3 +1,3 @@
-import type { GetSeriesWithDefaultValues } from "../../internals/plugins/models/seriesConfig/index.js";
+import type { GetSeriesWithDefaultValues } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const getSeriesWithDefaultValues: GetSeriesWithDefaultValues<'scatter'>;
 export default getSeriesWithDefaultValues;

package/ScatterChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import { type ChartSeriesTypeConfig } from "../../internals/plugins/models/seriesConfig/index.js";
+import { type ChartSeriesTypeConfig } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 export declare const scatterSeriesConfig: ChartSeriesTypeConfig<'scatter'>;

package/ScatterChart/seriesConfig/index.js

@@ -14,6 +14,7 @@ var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWit
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _identifierSerializer = require("../../internals/identifierSerializer");
+var _identifierCleaner = require("../../internals/identifierCleaner");
 const scatterSeriesConfig = exports.scatterSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
   colorProcessor: _getColor.default,
@@ -24,5 +25,6 @@ const scatterSeriesConfig = exports.scatterSeriesConfig = {
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
-  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex,
+  identifierCleaner: _identifierCleaner.identifierCleanerSeriesIdDataIndex
 };

package/ScatterChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -1,3 +1,4 @@
 import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
-declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', 'bar' | 'line' | 'scatter'>;
+import { type ComposableCartesianChartSeriesType } from "../../internals/commonNextFocusItem.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'scatter', ComposableCartesianChartSeriesType>;
 export default keyboardFocusHandler;

package/ScatterChart/seriesConfig/keyboardFocusHandler.js

@@ -4,20 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _createCommonKeyboardFocusHandler = require("../../internals/createCommonKeyboardFocusHandler");
 var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
-const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
-const keyboardFocusHandler = event => {
-  switch (event.key) {
-    case 'ArrowRight':
-      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowLeft':
-      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
-    case 'ArrowDown':
-      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
-    case 'ArrowUp':
-      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
-    default:
-      return null;
-  }
-};
+const keyboardFocusHandler = (0, _createCommonKeyboardFocusHandler.createCommonKeyboardFocusHandler)(_commonNextFocusItem.composableCartesianSeriesTypes);
 var _default = exports.default = keyboardFocusHandler;

package/ScatterChart/seriesConfig/legend.d.ts

@@ -1,3 +1,3 @@
-import { type LegendGetter } from "../../internals/plugins/models/index.js";
+import { type LegendGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const legendGetter: LegendGetter<'scatter'>;
 export default legendGetter;

package/ScatterChart/seriesConfig/legend.js

@@ -18,7 +18,6 @@ const legendGetter = params => {
     acc.push({
       type: 'scatter',
       markType: series[seriesId].labelMarkType,
-      id: seriesId,
       seriesId,
       color: series[seriesId].color,
       label: formattedLabel

package/ScatterChart/seriesConfig/seriesProcessor.d.ts

@@ -1,3 +1,3 @@
-import { type SeriesProcessor } from "../../internals/plugins/models/index.js";
+import { type SeriesProcessor } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const seriesProcessor: SeriesProcessor<'scatter'>;
 export default seriesProcessor;

package/ScatterChart/seriesConfig/tooltip.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipGetter } from "../../internals/plugins/models/index.js";
+import type { TooltipGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipGetter: TooltipGetter<'scatter'>;
 export default tooltipGetter;

package/ScatterChart/seriesConfig/tooltipPosition.d.ts

@@ -1,3 +1,3 @@
-import type { TooltipItemPositionGetter } from "../../internals/plugins/models/seriesConfig/tooltipItemPositionGetter.types.js";
+import type { TooltipItemPositionGetter } from "../../internals/plugins/corePlugins/useChartSeriesConfig/index.js";
 declare const tooltipItemPositionGetter: TooltipItemPositionGetter<'scatter'>;
 export default tooltipItemPositionGetter;

package/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import type { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import type { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
+export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'axesGap' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.