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

package/modern/ScatterChart/Scatter.js

@@ -5,9 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { getValueToPositionMapper } from "../hooks/useScale.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
-import { InteractionContext } from "../context/InteractionProvider.js";
+import { useStore } from "../internals/useStore.js";
+import { useSelector } from "../internals/useSelector.js";
 import { useHighlighted } from "../context/index.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { selectorChartsInteractionIsVoronoiEnabled } from "../context/InteractionSelectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -30,10 +32,9 @@ function Scatter(props) {
     onItemClick
   } = props;
   const drawingArea = useDrawingArea();
-  const {
-    useVoronoiInteraction
-  } = React.useContext(InteractionContext);
-  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const store = useStore();
+  const isVoronoiEnabled = useSelector(store, selectorChartsInteractionIsVoronoiEnabled);
+  const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
   const getInteractionItemProps = useInteractionItemProps(skipInteractionHandlers);
   const {
     isFaded,

package/modern/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/modern/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/modern/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/modern/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/modern/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/modern/context/DrawingAreaProvider/DrawingArea.types.js

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

package/modern/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/modern/context/{DrawingProvider.js → DrawingAreaProvider/DrawingAreaProvider.js}

@@ -3,42 +3,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useId from '@mui/utils/useId';
-import useChartDimensions from "../hooks/useChartDimensions.js";
-
-/**
- * Defines the area in which it is possible to draw the charts.
- */
+import useChartDimensions from "../../hooks/useChartDimensions.js";
+import { DrawingAreaContext } from "./DrawingAreaContext.js";
+import { useSize } from "../SizeProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const DrawingContext = /*#__PURE__*/React.createContext({
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 300,
-  width: 400,
-  chartId: '',
-  isPointInside: () => false
-});
-if (process.env.NODE_ENV !== 'production') {
-  DrawingContext.displayName = 'DrawingContext';
-}
-export const SvgContext = /*#__PURE__*/React.createContext({
-  isInitialized: false,
-  data: {
-    current: null
-  }
-});
-if (process.env.NODE_ENV !== 'production') {
-  SvgContext.displayName = 'SvgContext';
-}
-export function DrawingProvider(props) {
+export function DrawingAreaProvider(props) {
   const {
-    width,
-    height,
     margin,
-    svgRef,
     children
   } = props;
+  const {
+    width,
+    height
+  } = useSize();
   const drawingArea = useChartDimensions(width, height, margin);
   const chartId = useId();
   const isPointInside = React.useCallback(({
@@ -64,15 +41,8 @@ export function DrawingProvider(props) {
   }, drawingArea, {
     isPointInside
   }), [chartId, drawingArea, isPointInside]);
-  const refValue = React.useMemo(() => ({
-    isInitialized: true,
-    data: svgRef
-  }), [svgRef]);
-  return /*#__PURE__*/_jsx(SvgContext.Provider, {
-    value: refValue,
-    children: /*#__PURE__*/_jsx(DrawingContext.Provider, {
-      value: value,
-      children: children
-    })
+  return /*#__PURE__*/_jsx(DrawingAreaContext.Provider, {
+    value: value,
+    children: children
   });
 }

package/modern/context/DrawingAreaProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./DrawingArea.types.js";
+export * from "./DrawingAreaProvider.js";
+export * from "./DrawingAreaContext.js";

package/modern/context/InteractionProvider.js

@@ -1,77 +1,21 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useCharts } from "../internals/useCharts.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const InteractionContext = /*#__PURE__*/React.createContext({
-  item: null,
-  axis: {
-    x: null,
-    y: null
-  },
-  useVoronoiInteraction: false,
-  dispatch: () => null
-});
+export const ChartsContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== 'production') {
-  InteractionContext.displayName = 'InteractionContext';
+  ChartsContext.displayName = 'ChartsContext';
 }
-const dataReducer = (prevState, action) => {
-  switch (action.type) {
-    case 'enterItem':
-      return _extends({}, prevState, {
-        item: action.data
-      });
-    case 'exitChart':
-      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        axis: {
-          x: null,
-          y: null
-        },
-        item: null
-      });
-    case 'updateVoronoiUsage':
-      return _extends({}, prevState, {
-        useVoronoiInteraction: action.useVoronoiInteraction
-      });
-    case 'leaveItem':
-      if (prevState.item === null || Object.keys(action.data).some(key => action.data[key] !== prevState.item[key])) {
-        // The item is already something else
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        item: null
-      });
-    case 'updateAxis':
-      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
-        return prevState;
-      }
-      return _extends({}, prevState, {
-        axis: action.data
-      });
-    default:
-      return prevState;
-  }
-};
 function InteractionProvider(props) {
   const {
     children
   } = props;
-  const [data, dispatch] = React.useReducer(dataReducer, {
-    item: null,
-    axis: {
-      x: null,
-      y: null
-    },
-    useVoronoiInteraction: false
-  });
-  const value = React.useMemo(() => _extends({}, data, {
-    dispatch
-  }), [data]);
-  return /*#__PURE__*/_jsx(InteractionContext.Provider, {
-    value: value,
+  const {
+    contextValue
+  } = useCharts();
+  return /*#__PURE__*/_jsx(ChartsContext.Provider, {
+    value: contextValue,
     children: children
   });
 }

package/modern/context/InteractionSelectors.js

@@ -0,0 +1,12 @@
+import { createSelector } from "../internals/plugins/utils/selectors.js";
+function selectInteraction(state) {
+  return state.interaction;
+}
+export const selectorChartsInteractionItem = createSelector(selectInteraction, interaction => interaction.item);
+export const selectorChartsInteractionAxis = createSelector(selectInteraction, interaction => interaction.axis);
+export const selectorChartsInteractionXAxis = createSelector(selectInteraction, interaction => interaction.axis.x);
+export const selectorChartsInteractionYAxis = createSelector(selectInteraction, interaction => interaction.axis.y);
+export const selectorChartsInteractionItemIsDefined = createSelector(selectorChartsInteractionItem, item => item !== null);
+export const selectorChartsInteractionXAxisIsDefined = createSelector(selectorChartsInteractionXAxis, x => x !== null);
+export const selectorChartsInteractionYAxisIsDefined = createSelector(selectorChartsInteractionYAxis, y => y !== null);
+export const selectorChartsInteractionIsVoronoiEnabled = createSelector(selectInteraction, interaction => interaction.isVoronoiEnabled);

package/modern/context/SizeProvider/Size.types.js

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

package/modern/context/SizeProvider/SizeContext.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export const SizeContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    hasIntrinsicSize: false,
+    containerRef: null,
+    height: 0,
+    width: 0
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SizeContext.displayName = 'SizeContext';
+}