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

package/ScatterChart/ScatterChart.d.mts

@@ -3,7 +3,7 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.mjs";
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.mjs";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.mjs";
-import { type ChartContainerProps } from "../ChartContainer/index.mjs";
+import { type ChartsContainerProps } from "../ChartsContainer/index.mjs";
 import { type ChartsAxisProps } from "../ChartsAxis/index.mjs";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.mjs";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.mjs";
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -40,9 +40,21 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * Option to display a cartesian grid in the background.
    */
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi?: boolean;
   /**
@@ -66,7 +78,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
   slotProps?: ScatterChartSlotProps;
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];

package/ScatterChart/ScatterChart.d.ts

@@ -3,7 +3,7 @@ import { type MakeOptional } from '@mui/x-internals/types';
 import { type ChartsToolbarSlotProps, type ChartsToolbarSlots } from "../Toolbar/index.js";
 import { type ChartsSlots, type ChartsSlotProps } from "../internals/material/index.js";
 import { type ScatterPlotProps, type ScatterPlotSlotProps, type ScatterPlotSlots } from "./ScatterPlot.js";
-import { type ChartContainerProps } from "../ChartContainer/index.js";
+import { type ChartsContainerProps } from "../ChartsContainer/index.js";
 import { type ChartsAxisProps } from "../ChartsAxis/index.js";
 import { type ScatterSeriesType } from "../models/seriesType/scatter.js";
 import { type ChartsTooltipProps } from "../ChartsTooltip/index.js";
@@ -24,7 +24,7 @@ export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotS
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
 export type ScatterSeries = MakeOptional<ScatterSeriesType, 'type'>;
-export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
+export interface ScatterChartProps extends Omit<ChartsContainerProps<'scatter', ScatterChartPluginSignatures>, 'series' | 'plugins' | 'onItemClick' | 'highlightedAxis' | 'onHighlightedAxisChange'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ScatterPlotProps, 'renderer'> {
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -40,9 +40,21 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * Option to display a cartesian grid in the background.
    */
   grid?: Pick<ChartsGridProps, 'vertical' | 'horizontal'>;
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea?: boolean;
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint?: boolean;
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi?: boolean;
   /**
@@ -66,7 +78,7 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
   slotProps?: ScatterChartSlotProps;
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick?: ScatterPlotProps['onItemClick'] | UseChartClosestPointSignature['params']['onItemClick'];

package/ScatterChart/ScatterChart.js

@@ -19,8 +19,8 @@ var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsGrid = require("../ChartsGrid");
 var _useScatterChartProps = require("./useScatterChartProps");
-var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-var _ChartDataProvider = require("../ChartDataProvider");
+var _useChartsContainerProps = require("../ChartsContainer/useChartsContainerProps");
+var _ChartsDataProvider = require("../ChartsDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../ChartsWrapper");
 var _FocusedScatterMark = require("./FocusedScatterMark");
@@ -42,7 +42,7 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
   });
   const {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,
@@ -52,12 +52,12 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     children
   } = (0, _useScatterChartProps.useScatterChartProps)(props);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps);
+  } = (0, _useChartsContainerProps.useChartsContainerProps)(chartsContainerProps);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsDataProvider.ChartsDataProvider, (0, _extends2.default)({}, chartsDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (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, {
@@ -113,6 +113,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: _propTypes.default.arrayOf(_propTypes.default.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: _propTypes.default.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -120,6 +124,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint: _propTypes.default.bool,
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea: _propTypes.default.bool,
   /**
    * If `true`, disables keyboard navigation for the chart.
    */
@@ -127,8 +142,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.object,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -185,6 +205,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.string.isRequired
   })]),
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -261,7 +287,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
@@ -315,6 +341,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: _propTypes.default.string,
   /**
    * The controlled axis tooltip.
@@ -336,12 +366,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: _propTypes.default.number.isRequired,
     seriesId: _propTypes.default.string.isRequired
   })]),
-  /**
-   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
-   * If set to `'item'`, the radius is the `markerSize`.
-   * If `undefined`, the radius is assumed to be infinite.
-   */
-  voronoiMaxRadius: _propTypes.default.oneOfType([_propTypes.default.oneOf(['item']), _propTypes.default.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -356,6 +380,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -414,6 +439,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -472,6 +498,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -517,6 +544,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -563,6 +591,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -608,6 +637,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -653,6 +683,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -702,6 +733,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -751,6 +783,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['x']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -804,6 +837,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     barGapRatio: _propTypes.default.number,
     categoryGapRatio: _propTypes.default.number,
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -861,6 +895,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       colors: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
       type: _propTypes.default.oneOf(['ordinal']).isRequired,
@@ -918,6 +953,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -962,6 +998,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1007,6 +1044,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1051,6 +1089,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1095,6 +1134,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1143,6 +1183,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -1191,6 +1232,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), _propTypes.default.shape({
     axis: _propTypes.default.oneOf(['y']),
     classes: _propTypes.default.object,
+    className: _propTypes.default.string,
     colorMap: _propTypes.default.oneOfType([_propTypes.default.shape({
       color: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired), _propTypes.default.func]).isRequired,
       max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),

package/ScatterChart/ScatterChart.mjs

@@ -12,8 +12,8 @@ import { ChartsOverlay } from "../ChartsOverlay/index.mjs";
 import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.mjs";
 import { ChartsGrid } from "../ChartsGrid/index.mjs";
 import { useScatterChartProps } from "./useScatterChartProps.mjs";
-import { useChartContainerProps } from "../ChartContainer/useChartContainerProps.mjs";
-import { ChartDataProvider } from "../ChartDataProvider/index.mjs";
+import { useChartsContainerProps } from "../ChartsContainer/useChartsContainerProps.mjs";
+import { ChartsDataProvider } from "../ChartsDataProvider/index.mjs";
 import { ChartsSurface } from "../ChartsSurface/index.mjs";
 import { ChartsWrapper } from "../ChartsWrapper/index.mjs";
 import { FocusedScatterMark } from "./FocusedScatterMark.mjs";
@@ -35,7 +35,7 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
   });
   const {
     chartsWrapperProps,
-    chartContainerProps,
+    chartsContainerProps,
     chartsAxisProps,
     gridProps,
     scatterPlotProps,
@@ -45,12 +45,12 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     children
   } = useScatterChartProps(props);
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps
-  } = useChartContainerProps(chartContainerProps);
+  } = useChartsContainerProps(chartsContainerProps);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   const Toolbar = props.slots?.toolbar;
-  return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartsDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       ref: ref,
       children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
@@ -106,6 +106,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The description of the chart.
+   * Used to provide an accessible description for the chart.
+   */
   desc: PropTypes.string,
   /**
    * If `true`, the charts will not listen to the mouse move event.
@@ -113,6 +117,17 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
+  /**
+   * If true, the closest point interaction is disabled and falls back to hover events.
+   * @default false
+   * @deprecated Use `disableHitArea` instead.
+   */
+  disableClosestPoint: PropTypes.bool,
+  /**
+   * If true, the hit area interaction is disabled and falls back to hover events.
+   * @default false
+   */
+  disableHitArea: PropTypes.bool,
   /**
    * If `true`, disables keyboard navigation for the chart.
    */
@@ -120,8 +135,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   /**
    * If true, the interaction will not use the Voronoi cell and fall back to hover events.
    * @default false
+   * @deprecated Use `disableHitArea` instead.
    */
   disableVoronoi: PropTypes.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: PropTypes.object,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -178,6 +198,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired
   })]),
+  /**
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
+   * If `undefined`, the radius is assumed to be infinite.
+   */
+  hitAreaRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -254,7 +280,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   onHighlightChange: PropTypes.func,
   /**
    * Callback fired when clicking on a scatter item.
-   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`.
+   * @param {MouseEvent} event The mouse event recorded on the `<svg/>` element if using hit area interaction. Or the Mouse event from the scatter element, when `disableHitArea=true`.
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
@@ -308,6 +334,10 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
+  /**
+   * The title of the chart.
+   * Used to provide an accessible label for the chart.
+   */
   title: PropTypes.string,
   /**
    * The controlled axis tooltip.
@@ -329,12 +359,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: PropTypes.number.isRequired,
     seriesId: PropTypes.string.isRequired
   })]),
-  /**
-   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
-   * If set to `'item'`, the radius is the `markerSize`.
-   * If `undefined`, the radius is assumed to be infinite.
-   */
-  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -349,6 +373,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -407,6 +432,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -465,6 +491,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -510,6 +537,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -556,6 +584,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -601,6 +630,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -646,6 +676,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -695,6 +726,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -744,6 +776,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['x']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -797,6 +830,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     barGapRatio: PropTypes.number,
     categoryGapRatio: PropTypes.number,
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -854,6 +888,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -911,6 +946,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -955,6 +991,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1000,6 +1037,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1044,6 +1082,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1088,6 +1127,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1136,6 +1176,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -1184,6 +1225,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   }), PropTypes.shape({
     axis: PropTypes.oneOf(['y']),
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string.isRequired), PropTypes.func]).isRequired,
       max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/ScatterChart/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: 'scatter',
-      markType: series[seriesId].labelMarkType,
-      seriesId,
-      color: series[seriesId].color,
-      label: formattedLabel
-    });
-    return acc;
-  }, []);
-};
+var _legendUtils = require("../../internals/legendUtils");
+const legendGetter = series => (0, _legendUtils.getSeriesLegendItems)('scatter', series);
 var _default = exports.default = legendGetter;