@mui/x-charts 8.0.0-alpha.0 → 8.0.0-alpha.2

package/node/ScatterChart/ScatterChart.js

@@ -48,9 +48,9 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   } = (0, _useScatterChartProps.useScatterChartProps)(props);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
@@ -58,7 +58,9 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
       children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__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,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), children]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, props.slotProps?.tooltip)), children]
     }))
   }));
 });
@@ -69,7 +71,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * The configuration of axes highlight.
-   * @see See {@link https://mui.com/x/react-charts/highlighting highlighting docs} for more details.
+   * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
    * @default { x: 'none', y: 'none' }
    */
   axisHighlight: _propTypes.default.shape({
@@ -162,16 +164,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.func,
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -200,31 +192,12 @@ 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]),
   title: _propTypes.default.string,
-  /**
-   * The configuration of the tooltip.
-   * @see See {@link https://mui.com/x/react-charts/tooltip/ tooltip docs} for more details.
-   * @default { trigger: 'item' }
-   */
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Indicate which axis to display the top of the charts.
    * Can be a string (the id of the axis) or an object `ChartsXAxisProps`.
    * @default null
    */
   topAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
    * If `undefined`, the radius is assumed to be infinite.
@@ -265,7 +238,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -276,7 +248,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -319,7 +290,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -330,7 +300,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/ScatterChart/useScatterChartProps.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useScatterChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -22,7 +22,6 @@ const useScatterChartProps = props => {
       yAxis,
       zAxis,
       series,
-      tooltip,
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
@@ -98,12 +97,6 @@ const useScatterChartProps = props => {
     y: 'none',
     x: 'none'
   }, axisHighlight);
-  const tooltipProps = (0, _extends2.default)({
-    trigger: 'item'
-  }, tooltip, {
-    slots,
-    slotProps
-  });
   return {
     chartContainerProps,
     zAxisProps,
@@ -114,7 +107,6 @@ const useScatterChartProps = props => {
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   };
 };

package/node/SparkLineChart/SparkLineChart.js

@@ -18,7 +18,7 @@ var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
+const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
 const SPARKLINE_DEFAULT_MARGIN = {
   top: 5,
   bottom: 5,
@@ -45,7 +45,6 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       colors,
       sx,
       showTooltip,
-      tooltip,
       showHighlight,
       axisHighlight: inAxisHighlight,
       children,
@@ -65,6 +64,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     x: 'none'
   };
   const axisHighlight = (0, _extends2.default)({}, defaultXHighlight, inAxisHighlight);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
     ref: ref,
     series: [(0, _extends2.default)({
@@ -93,7 +93,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     }, yAxis)],
     colors: colors,
     sx: sx,
-    disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
+    disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
       skipAnimation: true,
       slots: slots,
@@ -114,10 +114,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
         slots: slots,
         slotProps: slotProps
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
-      slotProps: slotProps,
-      slots: slots
-    })), children]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -200,16 +197,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 'line'
    */
   plotType: _propTypes.default.oneOf(['bar', 'line']),
-  /**
-   * The chart will try to wait for the parent container to resolve its size
-   * before it renders for the first time.
-   *
-   * This can be useful in some scenarios where the chart appear to grow after
-   * the first render, like when used inside a grid.
-   *
-   * @default false
-   */
-  resolveSizeBeforeRender: _propTypes.default.bool,
   /**
    * Set to `true` to highlight the value.
    * With line, it shows a point.
@@ -239,14 +226,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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]),
   title: _propTypes.default.string,
-  tooltip: _propTypes.default.shape({
-    axisContent: _propTypes.default.elementType,
-    classes: _propTypes.default.object,
-    itemContent: _propTypes.default.elementType,
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
@@ -254,12 +233,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: _propTypes.default.func,
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -294,7 +267,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -305,7 +277,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -347,7 +318,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -358,7 +328,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/context/ChartDataProvider/ChartDataProvider.js

@@ -6,60 +6,86 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartDataProvider = void 0;
+exports.ChartDataProvider = ChartDataProvider;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingProvider = require("../DrawingProvider");
+var _DrawingAreaProvider = require("../DrawingAreaProvider");
 var _SeriesProvider = require("../SeriesProvider");
-var _InteractionProvider = require("../InteractionProvider");
-var _ChartsSurface = require("../../ChartsSurface");
 var _CartesianProvider = require("../CartesianProvider");
-var _ChartsAxesGradients = require("../../internals/components/ChartsAxesGradients");
-var _ = require("..");
 var _PluginProvider = require("../PluginProvider");
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
 var _AnimationProvider = require("../AnimationProvider");
+var _ZAxisContextProvider = require("../ZAxisContextProvider");
+var _HighlightedProvider = require("../HighlightedProvider");
+var _SizeProvider = require("../SizeProvider");
+var _ChartProvider = require("../ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
-const ChartDataProvider = exports.ChartDataProvider = /*#__PURE__*/React.forwardRef(function ChartDataProvider(props, ref) {
+/**
+ * Orchestrates the data providers for the chart components and hooks.
+ *
+ * Use this component if you have custom HTML components that need to access the chart data.
+ *
+ * Demos:
+ *
+ * - [Composition](http://localhost:3001/x/react-charts/composition/)
+ *
+ * API:
+ *
+ * - [ChartDataProvider API](https://mui.com/x/api/charts/chart-data-provider/)
+ *
+ * @example
+ * ```jsx
+ * <ChartDataProvider
+ *   series={[{ label: "Label", type: "bar", data: [10, 20] }]}
+ *   xAxis={[{ data: ["A", "B"], scaleType: "band", id: "x-axis" }]}
+ * >
+ *   <ChartsSurface>
+ *      <BarPlot />
+ *      <ChartsXAxis position="bottom" axisId="x-axis" />
+ *   </ChartsSurface>
+ *   {'Custom Legend Component'}
+ * </ChartDataProvider>
+ * ```
+ */
+function ChartDataProvider(props) {
   const {
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
     pluginProviderProps,
-    animationProviderProps
-  } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props, ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), children]
+    animationProviderProps,
+    sizeProviderProps
+  } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SizeProvider.SizeProvider, (0, _extends2.default)({}, sizeProviderProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingAreaProvider.DrawingAreaProvider, (0, _extends2.default)({}, drawingAreaProviderProps, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighlightedProvider.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
+                    children: children
                   }))
                 }))
               }))
-            })
+            }))
           }))
         }))
       }))
     }))
-  }));
-});
+  });
+}
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   children: _propTypes.default.node,
-  className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
    * @default blueberryTwilightPalette
@@ -69,17 +95,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.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),
-  desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
   /**
-   * The height of the chart in px.
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: _propTypes.default.number.isRequired,
+  height: _propTypes.default.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -121,18 +140,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: _propTypes.default.bool,
-  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]),
-  title: _propTypes.default.string,
-  viewBox: _propTypes.default.shape({
-    height: _propTypes.default.number,
-    width: _propTypes.default.number,
-    x: _propTypes.default.number,
-    y: _propTypes.default.number
-  }),
   /**
-   * The width of the chart in px.
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -164,7 +175,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -175,7 +185,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
@@ -218,7 +227,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     label: _propTypes.default.string,
-    labelFontSize: _propTypes.default.number,
     labelStyle: _propTypes.default.object,
     max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
@@ -229,7 +237,6 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
     slots: _propTypes.default.object,
     stroke: _propTypes.default.string,
     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]),
-    tickFontSize: _propTypes.default.number,
     tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
     tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
     tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),

package/node/context/ChartDataProvider/useChartDataProviderProps.js

@@ -1,48 +1,31 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartDataProviderProps = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useDefaultizeAxis = require("./useDefaultizeAxis");
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
-const useChartDataProviderProps = (props, ref) => {
+const useChartDataProviderProps = props => {
   const {
-      width,
-      height,
-      series,
-      margin,
-      xAxis,
-      yAxis,
-      zAxis,
-      colors,
-      dataset,
-      sx,
-      title,
-      desc,
-      disableAxisListener,
-      highlightedItem,
-      onHighlightChange,
-      plugins,
-      children,
-      skipAnimation
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis, dataset);
-  const drawingProviderProps = {
     width,
     height,
+    series,
     margin,
-    svgRef
+    xAxis,
+    yAxis,
+    zAxis,
+    colors,
+    dataset,
+    highlightedItem,
+    onHighlightChange,
+    plugins,
+    children,
+    skipAnimation
+  } = props;
+  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis, dataset);
+  const drawingAreaProviderProps = {
+    margin
   };
   const animationProviderProps = {
     skipAnimation
@@ -68,27 +51,22 @@ const useChartDataProviderProps = (props, ref) => {
     highlightedItem,
     onHighlightChange
   };
-  const chartsSurfaceProps = (0, _extends2.default)({}, other, {
+  const sizeProviderProps = {
     width,
-    height,
-    ref: chartSurfaceRef,
-    sx,
-    title,
-    desc,
-    disableAxisListener
-  });
+    height
+  };
   return {
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
     pluginProviderProps,
     animationProviderProps,
     xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis
+    yAxis: defaultizedYAxis,
+    sizeProviderProps
   };
 };
 exports.useChartDataProviderProps = useChartDataProviderProps;

package/node/context/ChartProvider/ChartContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+const ChartContext = exports.ChartContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  ChartContext.displayName = 'ChartContext';
+}

package/node/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartProvider = ChartProvider;
+var React = _interopRequireWildcard(require("react"));
+var _useCharts = require("../../internals/store/useCharts");
+var _ChartContext = require("./ChartContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function ChartProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    contextValue
+  } = (0, _useCharts.useCharts)([], {});
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContext.ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}

package/node/context/ChartProvider/ChartProvider.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/context/ChartProvider/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartProvider = require("./ChartProvider");
+Object.keys(_ChartProvider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider[key];
+    }
+  });
+});
+var _ChartProvider2 = require("./ChartProvider.types");
+Object.keys(_ChartProvider2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartProvider2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartProvider2[key];
+    }
+  });
+});
+var _useChartContext = require("./useChartContext");
+Object.keys(_useChartContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartContext[key];
+    }
+  });
+});

package/node/context/ChartProvider/useChartContext.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _ChartContext = require("./ChartContext");
+const useChartContext = () => {
+  const context = React.useContext(_ChartContext.ChartContext);
+  if (context == null) {
+    throw new Error(['MUI X: Could not find the Chart context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+};
+exports.useChartContext = useChartContext;