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

package/ChartsContainer/ChartsContainer.mjs

@@ -33,11 +33,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 const ChartsContainer = /*#__PURE__*/React.forwardRef(function ChartsContainer(props, ref) {
   const {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     children,
     chartsSurfaceProps
   } = useChartsContainerProps(props);
-  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartDataProviderProps, {
+  return /*#__PURE__*/_jsx(ChartsDataProvider, _extends({}, chartsDataProviderProps, {
     children: /*#__PURE__*/_jsx(ChartsSurface, _extends({}, chartsSurfaceProps, {
       ref: ref,
       children: children
@@ -79,6 +79,10 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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.
@@ -87,19 +91,17 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   disableAxisListener: PropTypes.bool,
   /**
-   * If `true`, disables keyboard navigation for the chart.
+   * If true, the hit area interaction is disabled and falls back to hover events.
    */
-  disableKeyboardNavigation: PropTypes.bool,
+  disableHitArea: PropTypes.bool,
   /**
-   * If true, the voronoi interaction are ignored.
+   * If `true`, disables keyboard navigation for the chart.
    */
-  disableVoronoi: PropTypes.bool,
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * Options to enable features planned for the next major.
    */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
+  experimentalFeatures: PropTypes.object,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -153,6 +155,12 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).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.
@@ -258,6 +266,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
    */
   radiusAxis: PropTypes.arrayOf(PropTypes.shape({
     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]),
@@ -311,6 +320,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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,
@@ -370,6 +380,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     classes: PropTypes.object,
+    className: PropTypes.string,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
       type: PropTypes.oneOf(['ordinal']).isRequired,
@@ -429,6 +440,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -475,6 +487,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -522,6 +535,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -568,6 +582,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -614,6 +629,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -664,6 +680,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -714,6 +731,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     valueFormatter: PropTypes.func
   }), PropTypes.shape({
     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]),
@@ -780,6 +798,10 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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.
@@ -801,12 +823,6 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.propTypes = {
     seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['bar', 'line', 'pie', 'radar', 'scatter']).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.
    */
@@ -821,6 +837,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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,
@@ -879,6 +896,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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,
@@ -937,6 +955,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -982,6 +1001,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1028,6 +1048,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1073,6 +1094,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1118,6 +1140,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1167,6 +1190,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1216,6 +1240,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1269,6 +1294,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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,
@@ -1326,6 +1352,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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,
@@ -1383,6 +1410,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1427,6 +1455,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1472,6 +1501,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1516,6 +1546,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1560,6 +1591,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1608,6 +1640,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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]),
@@ -1656,6 +1689,7 @@ process.env.NODE_ENV !== "production" ? ChartsContainer.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/ChartsContainer/useChartsContainerProps.d.mts

@@ -1,11 +1,11 @@
 import { type ChartsSurfaceProps } from "../ChartsSurface/index.mjs";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.mjs";
+import { type ChartsDataProviderProps } from "../ChartsDataProvider/index.mjs";
 import type { ChartsContainerProps } from "./ChartsContainer.mjs";
 import { type ChartSeriesType } from "../models/seriesType/config.mjs";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.mjs";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.mjs";
 export type UseChartsContainerPropsReturnValue<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
-  chartDataProviderProps: ChartDataProviderProps<SeriesType, TSignatures>;
+  chartsDataProviderProps: ChartsDataProviderProps<SeriesType, TSignatures>;
   chartsSurfaceProps: ChartsSurfaceProps;
   children: React.ReactNode;
 };

package/ChartsContainer/useChartsContainerProps.d.ts

@@ -1,11 +1,11 @@
 import { type ChartsSurfaceProps } from "../ChartsSurface/index.js";
-import { type ChartDataProviderProps } from "../ChartDataProvider/index.js";
+import { type ChartsDataProviderProps } from "../ChartsDataProvider/index.js";
 import type { ChartsContainerProps } from "./ChartsContainer.js";
 import { type ChartSeriesType } from "../models/seriesType/config.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 import { type ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 export type UseChartsContainerPropsReturnValue<SeriesType extends ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[]> = {
-  chartDataProviderProps: ChartDataProviderProps<SeriesType, TSignatures>;
+  chartsDataProviderProps: ChartsDataProviderProps<SeriesType, TSignatures>;
   chartsSurfaceProps: ChartsSurfaceProps;
   children: React.ReactNode;
 };

package/ChartsContainer/useChartsContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartsContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 const useChartsContainerProps = props => {
   const _ref = props,
     {
@@ -28,8 +28,8 @@ const useChartsContainerProps = props => {
       onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
+      disableHitArea,
+      hitAreaRadius,
       onItemClick,
       disableAxisListener,
       highlightedItem,
@@ -44,11 +44,11 @@ const useChartsContainerProps = props => {
       radiusAxis,
       skipAnimation,
       seriesConfig,
+      experimentalFeatures,
       plugins,
       localeText,
       slots,
       slotProps,
-      experimentalFeatures,
       disableKeyboardNavigation,
       brushConfig,
       onHiddenItemsChange,
@@ -61,7 +61,7 @@ const useChartsContainerProps = props => {
     desc,
     sx
   }, other);
-  const chartDataProviderProps = {
+  const chartsDataProviderProps = {
     margin,
     series,
     colors,
@@ -76,8 +76,8 @@ const useChartsContainerProps = props => {
     onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick,
     axesGap,
     xAxis,
@@ -101,7 +101,7 @@ const useChartsContainerProps = props => {
     slotProps
   };
   return {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   };

package/ChartsContainer/useChartsContainerProps.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "tooltipAxis", "onTooltipAxisChange", "tooltipItem", "onTooltipItemChange", "disableHitArea", "hitAreaRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "axesGap", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "experimentalFeatures", "plugins", "localeText", "slots", "slotProps", "disableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems", "initialHiddenItems"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.mjs";
 export const useChartsContainerProps = props => {
   const _ref = props,
@@ -22,8 +22,8 @@ export const useChartsContainerProps = props => {
       onTooltipAxisChange,
       tooltipItem,
       onTooltipItemChange,
-      disableVoronoi,
-      voronoiMaxRadius,
+      disableHitArea,
+      hitAreaRadius,
       onItemClick,
       disableAxisListener,
       highlightedItem,
@@ -38,11 +38,11 @@ export const useChartsContainerProps = props => {
       radiusAxis,
       skipAnimation,
       seriesConfig,
+      experimentalFeatures,
       plugins,
       localeText,
       slots,
       slotProps,
-      experimentalFeatures,
       disableKeyboardNavigation,
       brushConfig,
       onHiddenItemsChange,
@@ -55,7 +55,7 @@ export const useChartsContainerProps = props => {
     desc,
     sx
   }, other);
-  const chartDataProviderProps = {
+  const chartsDataProviderProps = {
     margin,
     series,
     colors,
@@ -70,8 +70,8 @@ export const useChartsContainerProps = props => {
     onTooltipAxisChange,
     tooltipItem,
     onTooltipItemChange,
-    disableVoronoi,
-    voronoiMaxRadius,
+    disableHitArea,
+    hitAreaRadius,
     onItemClick,
     axesGap,
     xAxis,
@@ -95,7 +95,7 @@ export const useChartsContainerProps = props => {
     slotProps
   };
   return {
-    chartDataProviderProps,
+    chartsDataProviderProps,
     chartsSurfaceProps,
     children
   };

package/ChartsDataProvider/ChartsDataProvider.js

@@ -80,12 +80,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProvider.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),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: _propTypes.default.shape({
-    preferStrictDomainInLineCharts: _propTypes.default.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProvider/ChartsDataProvider.mjs

@@ -73,12 +73,6 @@ process.env.NODE_ENV !== "production" ? ChartsDataProvider.propTypes = {
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
   dataset: PropTypes.arrayOf(PropTypes.object),
-  /**
-   * Options to enable features planned for the next major.
-   */
-  experimentalFeatures: PropTypes.shape({
-    preferStrictDomainInLineCharts: PropTypes.bool
-  }),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/ChartsDataProvider/useChartsDataProviderProps.js

@@ -16,7 +16,7 @@ const useChartsDataProviderProps = inProps => {
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = (0, _styles.useThemeProps)({
     props: inProps,
-    name: 'MuiChartDataProvider'
+    name: 'MuiChartsDataProvider'
   });
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = (0, _styles.useThemeProps)({

package/ChartsDataProvider/useChartsDataProviderProps.mjs

@@ -10,7 +10,7 @@ export const useChartsDataProviderProps = inProps => {
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const themedProps = useThemeProps({
     props: inProps,
-    name: 'MuiChartDataProvider'
+    name: 'MuiChartsDataProvider'
   });
   // eslint-disable-next-line mui/material-ui-name-matches-component-name
   const props = useThemeProps({

package/ChartsGrid/ChartsGrid.d.mts

@@ -1,5 +1,9 @@
 import { type ChartsGridClasses } from "./chartsGridClasses.mjs";
 export interface ChartsGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Displays vertical grid.
    */

package/ChartsGrid/ChartsGrid.d.ts

@@ -1,5 +1,9 @@
 import { type ChartsGridClasses } from "./chartsGridClasses.js";
 export interface ChartsGridProps {
+  /**
+   * A CSS class name applied to the root element.
+   */
+  className?: string;
   /**
    * Displays vertical grid.
    */

package/ChartsGrid/ChartsGrid.js

@@ -9,6 +9,7 @@ exports.ChartsGrid = ChartsGrid;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
 var _chartsGridClasses = require("./chartsGridClasses");
@@ -18,7 +19,7 @@ var _ChartsVerticalGrid = require("./ChartsVerticalGrid");
 var _ChartsHorizontalGrid = require("./ChartsHorizontalGrid");
 var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["vertical", "horizontal"];
+const _excluded = ["className", "vertical", "horizontal"];
 const useUtilityClasses = ({
   classes
 }) => {
@@ -45,6 +46,7 @@ function ChartsGrid(inProps) {
   });
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
+      className,
       vertical,
       horizontal
     } = props,
@@ -61,7 +63,7 @@ function ChartsGrid(inProps) {
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styledComponents.GridRoot, (0, _extends2.default)({}, other, {
-    className: classes.root,
+    className: (0, _clsx.default)(classes.root, className),
     children: [vertical && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVerticalGrid.ChartsGridVertical, {
       axis: verticalAxis,
       start: drawingArea.top,

package/ChartsGrid/ChartsGrid.mjs

@@ -2,8 +2,9 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["vertical", "horizontal"];
+const _excluded = ["className", "vertical", "horizontal"];
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps } from '@mui/material/styles';
 import { getChartsGridUtilityClass } from "./chartsGridClasses.mjs";
@@ -39,6 +40,7 @@ function ChartsGrid(inProps) {
   });
   const drawingArea = useDrawingArea();
   const {
+      className,
       vertical,
       horizontal
     } = props,
@@ -55,7 +57,7 @@ function ChartsGrid(inProps) {
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
-    className: classes.root,
+    className: clsx(classes.root, className),
     children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
       axis: verticalAxis,
       start: drawingArea.top,

package/ChartsGrid/ChartsHorizontalGrid.js

@@ -8,7 +8,7 @@ exports.ChartsGridHorizontal = ChartsGridHorizontal;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridHorizontal(props) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const {
     axis,
     start,

package/ChartsGrid/ChartsHorizontalGrid.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useTicks } from "../hooks/useTicks.mjs";
 import { GridLine } from "./styledComponents.mjs";
-import { useChartContext } from "../context/ChartProvider/index.mjs";
+import { useChartsContext } from "../context/ChartsProvider/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function ChartsGridHorizontal(props) {
   const {
     instance
-  } = useChartContext();
+  } = useChartsContext();
   const {
     axis,
     start,

package/ChartsGrid/ChartsVerticalGrid.js

@@ -8,7 +8,7 @@ exports.ChartsGridVertical = ChartsGridVertical;
 var React = _interopRequireWildcard(require("react"));
 var _useTicks = require("../hooks/useTicks");
 var _styledComponents = require("./styledComponents");
-var _ChartProvider = require("../context/ChartProvider");
+var _ChartsProvider = require("../context/ChartsProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,7 +16,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridVertical(props) {
   const {
     instance
-  } = (0, _ChartProvider.useChartContext)();
+  } = (0, _ChartsProvider.useChartsContext)();
   const {
     axis,
     start,