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

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/ChartProvider/ChartContext.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * @ignore - internal component.
+ */
+export const ChartContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== 'production') {
+  ChartContext.displayName = 'ChartContext';
+}

package/modern/context/ChartProvider/ChartProvider.js

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+import { useCharts } from "../../internals/store/useCharts.js";
+import { ChartContext } from "./ChartContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartProvider(props) {
+  const {
+    children
+  } = props;
+  const {
+    contextValue
+  } = useCharts([], {});
+  return /*#__PURE__*/_jsx(ChartContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+export { ChartProvider };

package/modern/context/ChartProvider/ChartProvider.types.js

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

package/modern/context/ChartProvider/index.js

@@ -0,0 +1,3 @@
+export * from "./ChartProvider.js";
+export * from "./ChartProvider.types.js";
+export * from "./useChartContext.js";

package/modern/context/ChartProvider/useChartContext.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+import { ChartContext } from "./ChartContext.js";
+export const useChartContext = () => {
+  const context = React.useContext(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;
+};

package/modern/context/DrawingAreaProvider/DrawingArea.types.js

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

package/modern/context/DrawingAreaProvider/DrawingAreaContext.js

@@ -0,0 +1,15 @@
+'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,
+  isPointInside: () => false
+});
+if (process.env.NODE_ENV !== 'production') {
+  DrawingAreaContext.displayName = 'DrawingContext';
+}

package/{context/DrawingProvider.js → modern/context/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/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,15 @@
+import * as React from 'react';
+export const SizeContext = /*#__PURE__*/React.createContext({
+  isInitialized: false,
+  data: {
+    hasIntrinsicSize: false,
+    svgRef: {
+      current: null
+    },
+    height: 0,
+    width: 0
+  }
+});
+if (process.env.NODE_ENV !== 'production') {
+  SizeContext.displayName = 'SizeContext';
+}

package/modern/context/SizeProvider/SizeProvider.js

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import { SizeContext } from "./SizeContext.js";
+import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
+
+/**
+ * The size provider.
+ *
+ * This differs from the DrawingProvider in that it provides the full size of the container.
+ *
+ * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function SizeProvider(props) {
+  const dimensions = useChartContainerDimensions(props.width, props.height);
+  const value = React.useMemo(() => ({
+    isInitialized: true,
+    data: dimensions
+  }), [dimensions]);
+  return /*#__PURE__*/_jsx(SizeContext.Provider, {
+    value: value,
+    children: props.children
+  });
+}
+export { SizeProvider };

package/modern/context/SizeProvider/index.js

@@ -0,0 +1,4 @@
+export * from "./SizeProvider.js";
+export * from "./SizeContext.js";
+export * from "./useSize.js";
+export * from "./Size.types.js";

package/{ChartContainer → modern/context/SizeProvider}/useChartContainerDimensions.js

@@ -4,7 +4,8 @@
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+const MAX_COMPUTE_RUN = 10;
+export const useChartContainerDimensions = (inWidth, inHeight) => {
   const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
@@ -19,6 +20,10 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
+      if (process.env.NODE_ENV !== 'production') {
+        // This is mostly for internal use.
+        throw new Error([`MUI X: ChartContainer does not have a valid reference to the <svg /> element.`, 'This may be caused by a ref forwarding issue.', 'Make sure that the ref from SizedProvider is forwarded correctly.'].join('\n'));
+      }
       return {};
     }
     const win = ownerWindow(mainEl);
@@ -42,7 +47,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
   // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
   useEnhancedEffect(() => {
     // computeRun is used to avoid infinite loops.
-    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+    if (hasInSize || !stateRef.current.initialCompute || stateRef.current.computeRun > MAX_COMPUTE_RUN) {
       return;
     }
     const computedSize = computeSize();
@@ -51,7 +56,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
+  }, [width, height, computeSize, hasInSize]);
   useEnhancedEffect(() => {
     if (hasInSize) {
       return () => {};
@@ -90,9 +95,14 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
       stateRef.current.displayError = false;
     }
   }
+  const finalWidth = inWidth ?? width;
+  const finalHeight = inHeight ?? height;
   return {
-    containerRef: rootRef,
-    width: inWidth ?? width,
-    height: inHeight ?? height
+    svgRef: rootRef,
+    width: finalWidth,
+    height: finalHeight,
+    hasIntrinsicSize: finalWidth > 0 && finalHeight > 0,
+    inWidth,
+    inHeight
   };
 };

package/modern/context/SizeProvider/useSize.js

@@ -0,0 +1,13 @@
+'use client';
+
+import * as React from 'react';
+import { SizeContext } from "./SizeContext.js";
+/**
+ * Returns the size of the chart. And the ref of the container element that the chart is rendered in.
+ */
+export const useSize = () => {
+  const {
+    data
+  } = React.useContext(SizeContext);
+  return data;
+};

package/modern/context/index.js

@@ -1,2 +1,3 @@
 export * from "./HighlightedProvider/index.js";
-export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
+export { ZAxisContextProvider } from "./ZAxisContextProvider.js";
+export { ChartDataProvider } from "./ChartDataProvider/index.js";

package/modern/hooks/useAxisEvents.js

@@ -1,12 +1,13 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useSvgRef } from "./useSvgRef.js";
 import { useDrawingArea } from "./useDrawingArea.js";
+import { useStore } from "../internals/store/useStore.js";
 function getAsANumber(value) {
   return value instanceof Date ? value.getTime() : value;
 }
@@ -19,9 +20,7 @@ export const useAxisEvents = disableAxisListener => {
     xAxisIds,
     yAxisIds
   } = useCartesianContext();
-  const {
-    dispatch
-  } = React.useContext(InteractionContext);
+  const store = useStore(disableAxisListener);
   const usedXAxis = xAxisIds[0];
   const usedYAxis = yAxisIds[0];
 
@@ -33,7 +32,7 @@ export const useAxisEvents = disableAxisListener => {
   });
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || disableAxisListener) {
+    if (element === null || disableAxisListener || !store) {
       return () => {};
     }
     function getNewAxisState(axisConfig, mouseValue) {
@@ -92,9 +91,15 @@ export const useAxisEvents = disableAxisListener => {
         x: -1,
         y: -1
       };
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: {
+          item: null,
+          axis: {
+            x: null,
+            y: null
+          }
+        }
+      }));
     };
     const handleMove = event => {
       const target = 'targetTouches' in event ? event.targetTouches[0] : event;
@@ -105,9 +110,15 @@ export const useAxisEvents = disableAxisListener => {
         targetElement: event.target
       })) {
         if (mousePosition.current.isInChart) {
-          dispatch({
-            type: 'exitChart'
-          });
+          store.update(prev => _extends({}, prev, {
+            interaction: {
+              item: null,
+              axis: {
+                x: null,
+                y: null
+              }
+            }
+          }));
           mousePosition.current.isInChart = false;
         }
         return;
@@ -115,13 +126,15 @@ export const useAxisEvents = disableAxisListener => {
       mousePosition.current.isInChart = true;
       const newStateX = getNewAxisState(xAxis[usedXAxis], svgPoint.x);
       const newStateY = getNewAxisState(yAxis[usedYAxis], svgPoint.y);
-      dispatch({
-        type: 'updateAxis',
-        data: {
-          x: newStateX,
-          y: newStateY
-        }
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: _extends({}, prev.interaction.axis, prev.interaction.axis.x?.index !== newStateX?.index || prev.interaction.axis.x?.value !== newStateX?.value ? {
+            x: newStateX
+          } : {}, prev.interaction.axis.y?.index !== newStateY?.index || prev.interaction.axis.y?.value !== newStateY?.value ? {
+            y: newStateY
+          } : {})
+        })
+      }));
     };
     const handleDown = event => {
       const target = event.currentTarget;
@@ -144,5 +157,5 @@ export const useAxisEvents = disableAxisListener => {
       element.removeEventListener('pointercancel', handleOut);
       element.removeEventListener('pointerleave', handleOut);
     };
-  }, [svgRef, dispatch, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
+  }, [svgRef, store, usedYAxis, yAxis, usedXAxis, xAxis, disableAxisListener, drawingArea]);
 };

package/modern/hooks/useChartId.js

@@ -1,10 +1,9 @@
 'use client';
 
-import * as React from 'react';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { useStore } from "../internals/store/useStore.js";
+import { useSelector } from "../internals/store/useSelector.js";
+import { selectorChartId } from "../internals/plugins/corePlugins/useChartId/useChartId.selectors.js";
 export function useChartId() {
-  const {
-    chartId
-  } = React.useContext(DrawingContext);
-  return React.useMemo(() => chartId, [chartId]);
+  const store = useStore();
+  return useSelector(store, selectorChartId);
 }

package/modern/hooks/useDrawingArea.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { DrawingContext } from "../context/DrawingProvider.js";
+import { DrawingAreaContext } from "../context/DrawingAreaProvider/index.js";
 export function useDrawingArea() {
   const {
     left,
@@ -11,7 +11,7 @@ export function useDrawingArea() {
     bottom,
     right,
     isPointInside
-  } = React.useContext(DrawingContext);
+  } = React.useContext(DrawingAreaContext);
   return React.useMemo(() => ({
     left,
     top,

package/modern/hooks/useInteractionItemProps.js

@@ -1,12 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { InteractionContext } from "../context/InteractionProvider.js";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { useHighlighted } from "../context/index.js";
+import { useStore } from "../internals/store/useStore.js";
 export const useInteractionItemProps = skip => {
-  const {
-    dispatch: dispatchInteraction
-  } = React.useContext(InteractionContext);
+  const store = useStore();
   const {
     setHighlighted,
     clearHighlighted
@@ -21,20 +19,31 @@ export const useInteractionItemProps = skip => {
       }
     };
     const onPointerEnter = () => {
-      dispatchInteraction({
-        type: 'enterItem',
-        data
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: data
+        })
+      }));
       setHighlighted({
         seriesId: data.seriesId,
         dataIndex: data.dataIndex
       });
     };
     const onPointerLeave = event => {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-      dispatchInteraction({
-        type: 'leaveItem',
-        data
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      store.update(prev => {
+        const prevItem = prev.interaction.item;
+        if (prevItem === null || Object.keys(data).some(key => data[key] !== prevItem[key])) {
+          // The item is already something else, no need to clean it.
+          return prev;
+        }
+        return _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            item: null
+          })
+        });
       });
       clearHighlighted();
     };

package/modern/hooks/useSvgRef.js

@@ -1,14 +1,10 @@
 'use client';
 
-import * as React from 'react';
-import { SvgContext } from "../context/DrawingProvider.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
 export function useSvgRef() {
-  const {
-    isInitialized,
-    data
-  } = React.useContext(SvgContext);
-  if (!isInitialized) {
+  const context = useChartContext();
+  if (!context) {
     throw new Error(['MUI X: Could not find the svg ref context.', 'It looks like you rendered your component outside of a ChartsContainer parent component.'].join('\n'));
   }
-  return data;
+  return context.svgRef;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.0.0-alpha.0
+ * @mui/x-charts v8.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/components/ChartsAxesGradients/ChartsAxesGradients.js

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { useCartesianContext } from "../../../context/CartesianProvider/index.js";
-import { DrawingContext } from "../../../context/DrawingProvider.js";
-import { useDrawingArea } from "../../../hooks/index.js";
+import { useChartId, useDrawingArea } from "../../../hooks/index.js";
 import ChartsPiecewiseGradient from "./ChartsPiecewiseGradient.js";
 import ChartsContinuousGradient from "./ChartsContinuousGradient.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function useChartGradient() {
-  const {
-    chartId
-  } = React.useContext(DrawingContext);
+  const chartId = useChartId();
   return React.useCallback((axisId, direction) => `${chartId}-gradient-${direction}-${axisId}`, [chartId]);
 }
 export function ChartsAxesGradients() {
@@ -29,8 +26,13 @@ export function ChartsAxesGradients() {
     yAxisIds,
     yAxis
   } = useCartesianContext();
+  const filteredYAxisIds = yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined);
+  const filteredXAxisIds = xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined);
+  if (filteredYAxisIds.length === 0 && filteredXAxisIds.length === 0) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs("defs", {
-    children: [yAxisIds.filter(axisId => yAxis[axisId].colorMap !== undefined).map(axisId => {
+    children: [filteredYAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'y');
       const {
         colorMap,
@@ -60,7 +62,7 @@ export function ChartsAxesGradients() {
         }, gradientId);
       }
       return null;
-    }), xAxisIds.filter(axisId => xAxis[axisId].colorMap !== undefined).map(axisId => {
+    }), filteredXAxisIds.map(axisId => {
       const gradientId = getGradientId(axisId, 'x');
       const {
         colorMap,