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

package/ScatterChart/ScatterChart.js

@@ -41,9 +41,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   } = useScatterChartProps(props);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
@@ -51,7 +51,9 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(inProps
       children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
         "data-drawing-container": true,
         children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
-      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({
+        trigger: "item"
+      }, props.slotProps?.tooltip)), children]
     }))
   }));
 });
@@ -62,7 +64,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.shape({
@@ -155,16 +157,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.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.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -193,31 +185,12 @@ 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]),
   title: PropTypes.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.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.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.oneOfType([PropTypes.object, PropTypes.string]),
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.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.

package/ScatterChart/useScatterChartProps.d.ts

@@ -3,7 +3,6 @@ import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsGridProps } from '../ChartsGrid';
 import { ChartsLegendProps } from '../ChartsLegend';
 import { ChartsOverlayProps } from '../ChartsOverlay';
-import { ChartsTooltipProps } from '../ChartsTooltip';
 import type { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler';
 import { ChartContainerProps } from '../ChartContainer';
 import { ZAxisContextProviderProps } from '../context';
@@ -26,6 +25,5 @@ export declare const useScatterChartProps: (props: ScatterChartProps) => {
     overlayProps: ChartsOverlayProps;
     legendProps: ChartsLegendProps;
     axisHighlightProps: ChartsAxisHighlightProps;
-    tooltipProps: ChartsTooltipProps<"scatter">;
     children: import("react").ReactNode;
 };

package/ScatterChart/useScatterChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/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.
@@ -16,7 +16,6 @@ export const useScatterChartProps = props => {
       yAxis,
       zAxis,
       series,
-      tooltip,
       axisHighlight,
       voronoiMaxRadius,
       disableVoronoi,
@@ -92,12 +91,6 @@ export const useScatterChartProps = props => {
     y: 'none',
     x: 'none'
   }, axisHighlight);
-  const tooltipProps = _extends({
-    trigger: 'item'
-  }, tooltip, {
-    slots,
-    slotProps
-  });
   return {
     chartContainerProps,
     zAxisProps,
@@ -108,7 +101,6 @@ export const useScatterChartProps = props => {
     overlayProps,
     legendProps,
     axisHighlightProps,
-    tooltipProps,
     children
   };
 };

package/SparkLineChart/SparkLineChart.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
 import { ChartContainerProps } from '../ChartContainer';
-import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '../ChartsTooltip';
+import { ChartsTooltipSlots, ChartsTooltipSlotProps } from '../ChartsTooltip/ChartTooltip.types';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../models/axis';
 import { LineSeriesType } from '../models/seriesType';
@@ -11,9 +11,9 @@ import { LinePlotSlots, LinePlotSlotProps } from '../LineChart/LinePlot';
 import { MarkPlotSlots, MarkPlotSlotProps } from '../LineChart/MarkPlot';
 import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from '../LineChart/LineHighlightPlot';
 import { BarPlotSlots, BarPlotSlotProps } from '../BarChart/BarPlot';
-export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots<'line' | 'bar'> {
+export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {
 }
-export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps<'line' | 'bar'> {
+export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {
 }
 export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'margin' | 'plugins'> {
     /**
@@ -26,7 +26,6 @@ export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series'
      * Notice it is a single [[AxisConfig]] object, not an array of configuration.
      */
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>;
-    tooltip?: ChartsTooltipProps<'line' | 'bar'>;
     axisHighlight?: ChartsAxisHighlightProps;
     /**
      * Type of plot used.

package/SparkLineChart/SparkLineChart.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { BarPlot } from "../BarChart/index.js";
@@ -38,7 +38,6 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
       colors,
       sx,
       showTooltip,
-      tooltip,
       showHighlight,
       axisHighlight: inAxisHighlight,
       children,
@@ -58,6 +57,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     x: 'none'
   };
   const axisHighlight = _extends({}, defaultXHighlight, inAxisHighlight);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsxs(ChartContainer, _extends({}, other, {
     ref: ref,
     series: [_extends({
@@ -86,7 +86,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
     }, 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__*/_jsx(BarPlot, {
       skipAnimation: true,
       slots: slots,
@@ -107,10 +107,7 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         slots: slots,
         slotProps: slotProps
       })]
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
-      slotProps: slotProps,
-      slots: slots
-    })), children]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -193,16 +190,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 'line'
    */
   plotType: PropTypes.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.bool,
   /**
    * Set to `true` to highlight the value.
    * With line, it shows a point.
@@ -232,14 +219,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   title: PropTypes.string,
-  tooltip: PropTypes.shape({
-    axisContent: PropTypes.elementType,
-    classes: PropTypes.object,
-    itemContent: PropTypes.elementType,
-    slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    trigger: PropTypes.oneOf(['axis', 'item', 'none'])
-  }),
   /**
    * Formatter used by the tooltip.
    * @param {number} value The value to format.
@@ -247,12 +226,6 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default (value: number | null) => (value === null ? '' : value.toString())
    */
   valueFormatter: PropTypes.func,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.number
-  }),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */

package/context/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { DrawingProviderProps } from '../DrawingProvider';
+import { DrawingAreaProviderProps } from '../DrawingAreaProvider';
 import { SeriesProviderProps } from '../SeriesProvider';
-import { ChartsSurfaceProps } from '../../ChartsSurface';
 import { CartesianProviderProps } from '../CartesianProvider';
-import { HighlightedProviderProps, ZAxisContextProviderProps } from '..';
 import { PluginProviderProps } from '../PluginProvider';
 import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../models/axis';
 import { AnimationProviderProps } from '../AnimationProvider';
-export type ChartDataProviderProps = Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Omit<DrawingProviderProps, 'svgRef'> & Pick<CartesianProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, 'children'> & {
+import { ZAxisContextProviderProps } from '../ZAxisContextProvider';
+import { HighlightedProviderProps } from '../HighlightedProvider';
+import { SizeProviderProps } from '../SizeProvider';
+export type ChartDataProviderProps = Omit<SizeProviderProps & Omit<SeriesProviderProps, 'seriesFormatters'> & Pick<DrawingAreaProviderProps, 'margin'> & Pick<CartesianProviderProps, 'dataset'> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, 'children'> & {
     /**
      * The configuration of the x-axes.
      * If not provided, a default axis config is used.
@@ -23,19 +24,8 @@ export type ChartDataProviderProps = Omit<ChartsSurfaceProps & Omit<SeriesProvid
     yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, 'id'>[];
     children?: React.ReactNode;
 };
-declare const ChartDataProvider: React.ForwardRefExoticComponent<Omit<ChartsSurfaceProps & Omit<SeriesProviderProps, "seriesFormatters"> & Omit<DrawingProviderProps, "svgRef"> & Pick<CartesianProviderProps, "dataset"> & ZAxisContextProviderProps & HighlightedProviderProps & PluginProviderProps & AnimationProviderProps, "children"> & {
-    /**
-     * The configuration of the x-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    xAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsXAxisProps>, "id">[];
-    /**
-     * The configuration of the y-axes.
-     * If not provided, a default axis config is used.
-     * An array of [[AxisConfig]] objects.
-     */
-    yAxis?: MakeOptional<AxisConfig<ScaleName, any, ChartsYAxisProps>, "id">[];
-    children?: React.ReactNode;
-} & React.RefAttributes<SVGSVGElement>>;
+declare function ChartDataProvider(props: ChartDataProviderProps): React.JSX.Element;
+declare namespace ChartDataProvider {
+    var propTypes: any;
+}
 export { ChartDataProvider };

package/context/ChartDataProvider/ChartDataProvider.js

@@ -3,56 +3,58 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from "../DrawingProvider.js";
+import { DrawingAreaProvider } from "../DrawingAreaProvider/index.js";
 import { SeriesProvider } from "../SeriesProvider/index.js";
 import { InteractionProvider } from "../InteractionProvider.js";
-import { ChartsSurface } from "../../ChartsSurface/index.js";
 import { CartesianProvider } from "../CartesianProvider/index.js";
-import { ChartsAxesGradients } from "../../internals/components/ChartsAxesGradients/index.js";
-import { HighlightedProvider, ZAxisContextProvider } from "../index.js";
 import { PluginProvider } from "../PluginProvider/index.js";
 import { useChartDataProviderProps } from "./useChartDataProviderProps.js";
 import { AnimationProvider } from "../AnimationProvider/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ChartDataProvider = /*#__PURE__*/React.forwardRef(function ChartDataProvider(props, ref) {
+import { ZAxisContextProvider } from "../ZAxisContextProvider.js";
+import { HighlightedProvider } from "../HighlightedProvider/index.js";
+import { SizeProvider } from "../SizeProvider/index.js";
+import { SvgRefProvider } from "../SvgRefProvider/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartDataProvider(props) {
   const {
     children,
-    drawingProviderProps,
+    drawingAreaProviderProps,
     seriesProviderProps,
     cartesianProviderProps,
     zAxisContextProps,
     highlightedProviderProps,
-    chartsSurfaceProps,
     pluginProviderProps,
-    animationProviderProps
-  } = useChartDataProviderProps(props, ref);
-  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-        children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
-          children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-            children: /*#__PURE__*/_jsx(InteractionProvider, {
-              children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
-                children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-                  children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                    children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), children]
+    animationProviderProps,
+    sizeProviderProps
+  } = useChartDataProviderProps(props);
+  return /*#__PURE__*/_jsx(SizeProvider, _extends({}, sizeProviderProps, {
+    children: /*#__PURE__*/_jsx(DrawingAreaProvider, _extends({}, drawingAreaProviderProps, {
+      children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
+        children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
+          children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
+            children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
+              children: /*#__PURE__*/_jsx(InteractionProvider, {
+                children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
+                  children: /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
+                    children: /*#__PURE__*/_jsx(SvgRefProvider, {
+                      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.node,
-  className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
    * @default blueberryTwilightPalette
@@ -62,17 +64,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.arrayOf(PropTypes.object),
-  desc: PropTypes.string,
   /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  disableAxisListener: PropTypes.bool,
-  /**
-   * The height of the chart in px.
-   */
-  height: PropTypes.number.isRequired,
+  height: PropTypes.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -114,18 +109,10 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  title: PropTypes.string,
-  viewBox: PropTypes.shape({
-    height: PropTypes.number,
-    width: PropTypes.number,
-    x: PropTypes.number,
-    y: PropTypes.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.number.isRequired,
+  width: PropTypes.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.

package/context/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -1,23 +1,19 @@
-import * as React from 'react';
-import type { DrawingProviderProps } from '../DrawingProvider';
+import type { DrawingAreaProviderProps } from '../DrawingAreaProvider';
 import type { CartesianProviderProps } from '../CartesianProvider';
 import type { SeriesProviderProps } from '../SeriesProvider';
 import type { ZAxisContextProviderProps } from '../ZAxisContextProvider';
 import type { ChartDataProviderProps } from './ChartDataProvider';
-import { HighlightedProviderProps } from '..';
-import { ChartsSurfaceProps } from '../../ChartsSurface';
+import { HighlightedProviderProps } from '../HighlightedProvider';
 import { PluginProviderProps } from '../PluginProvider';
 import { AnimationProviderProps } from '../AnimationProvider';
-export declare const useChartDataProviderProps: (props: ChartDataProviderProps, ref: React.Ref<SVGSVGElement>) => {
-    children: React.ReactNode;
-    drawingProviderProps: Omit<DrawingProviderProps, "children">;
+import { SizeProviderProps } from '../SizeProvider';
+export declare const useChartDataProviderProps: (props: ChartDataProviderProps) => {
+    children: import("react").ReactNode;
+    drawingAreaProviderProps: Omit<DrawingAreaProviderProps, "children">;
     seriesProviderProps: Omit<SeriesProviderProps, "children">;
     cartesianProviderProps: Omit<CartesianProviderProps, "children">;
     zAxisContextProps: Omit<ZAxisContextProviderProps, "children">;
     highlightedProviderProps: Omit<HighlightedProviderProps, "children">;
-    chartsSurfaceProps: ChartsSurfaceProps & {
-        ref: any;
-    };
     pluginProviderProps: Omit<PluginProviderProps, "children">;
     animationProviderProps: Omit<AnimationProviderProps, "children">;
     xAxis: {
@@ -94,4 +90,5 @@ export declare const useChartDataProviderProps: (props: ChartDataProviderProps,
         })) | undefined;
         id: import("../../internals").AxisId;
     }[];
+    sizeProviderProps: Omit<SizeProviderProps, "children">;
 };

package/context/ChartDataProvider/useChartDataProviderProps.js

@@ -1,41 +1,26 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
 import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
-export const useChartDataProviderProps = (props, ref) => {
+export const useChartDataProviderProps = props => {
   const {
-      width,
-      height,
-      series,
-      margin,
-      xAxis,
-      yAxis,
-      zAxis,
-      colors,
-      dataset,
-      sx,
-      title,
-      desc,
-      disableAxisListener,
-      highlightedItem,
-      onHighlightChange,
-      plugins,
-      children,
-      skipAnimation
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = 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] = useDefaultizeAxis(xAxis, yAxis, dataset);
+  const drawingAreaProviderProps = {
+    margin
   };
   const animationProviderProps = {
     skipAnimation
@@ -61,26 +46,21 @@ export const useChartDataProviderProps = (props, ref) => {
     highlightedItem,
     onHighlightChange
   };
-  const chartsSurfaceProps = _extends({}, 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
   };
 };

package/context/{DrawingProvider.d.ts → DrawingAreaProvider/DrawingArea.types.d.ts}

@@ -1,14 +1,12 @@
 import * as React from 'react';
-import { LayoutConfig } from '../models/layout';
-import { Initializable } from './context.types';
-export interface DrawingProviderProps extends LayoutConfig {
+import { LayoutConfig } from '../../models';
+export interface DrawingAreaProviderProps extends Pick<LayoutConfig, 'margin'> {
     children: React.ReactNode;
-    svgRef: React.RefObject<SVGSVGElement>;
 }
 /**
  * Defines the area in which it is possible to draw the charts.
  */
-export type DrawingArea = {
+export type DrawingAreaState = {
     /**
      * The gap between the left border of the SVG and the drawing area.
      */
@@ -51,12 +49,3 @@ export type DrawingArea = {
         direction?: 'x' | 'y';
     }) => boolean;
 };
-export declare const DrawingContext: React.Context<DrawingArea & {
-    /**
-     * A random id used to distinguish each chart on the same page.
-     */
-    chartId: string;
-}>;
-export type SvgContextState = React.RefObject<SVGSVGElement>;
-export declare const SvgContext: React.Context<Initializable<SvgContextState>>;
-export declare function DrawingProvider(props: DrawingProviderProps): React.JSX.Element;

package/context/DrawingAreaProvider/DrawingArea.types.js

@@ -0,0 +1 @@
+export {};

package/context/DrawingAreaProvider/DrawingAreaContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DrawingAreaState } from './DrawingArea.types';
+export declare const DrawingAreaContext: React.Context<DrawingAreaState & {
+    /**
+     * A random id used to distinguish each chart on the same page.
+     */
+    chartId: string;
+}>;

package/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -0,0 +1,16 @@
+'use client';
+
+import * as React from 'react';
+export const DrawingAreaContext = /*#__PURE__*/React.createContext({
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  height: 300,
+  width: 400,
+  chartId: '',
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingAreaContext.displayName = 'DrawingContext';
+}

package/context/DrawingAreaProvider/DrawingAreaProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { DrawingAreaProviderProps } from './DrawingArea.types';
+export declare function DrawingAreaProvider(props: DrawingAreaProviderProps): React.JSX.Element;