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

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,12 +1,13 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import { InteractionContext } from "../context/InteractionProvider.js";
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { useStore } from "../internals/useStore.js";
 import { getSVGPoint } from "../internals/getSVGPoint.js";
 import { useDrawingArea, useSvgRef } from "../hooks/index.js";
 import { useHighlighted } from "../context/index.js";
@@ -25,9 +26,7 @@ function ChartsVoronoiHandler(props) {
     xAxisIds,
     yAxisIds
   } = useCartesianContext();
-  const {
-    dispatch
-  } = React.useContext(InteractionContext);
+  const store = useStore();
   const {
     series,
     seriesOrder
@@ -42,17 +41,19 @@ function ChartsVoronoiHandler(props) {
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
-    dispatch({
-      type: 'updateVoronoiUsage',
-      useVoronoiInteraction: true
-    });
+    store.update(prev => _extends({}, prev, {
+      interaction: _extends({}, prev.interaction, {
+        useVoronoiInteraction: true
+      })
+    }));
     return () => {
-      dispatch({
-        type: 'updateVoronoiUsage',
-        useVoronoiInteraction: false
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          useVoronoiInteraction: false
+        })
+      }));
     };
-  }, [dispatch]);
+  }, [store]);
   useEnhancedEffect(() => {
     // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
 
@@ -66,12 +67,10 @@ function ChartsVoronoiHandler(props) {
       const {
         data,
         xAxisId,
-        yAxisId,
-        xAxisKey,
-        yAxisKey
+        yAxisId
       } = series[seriesId];
-      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
+      const xScale = xAxis[xAxisId ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? defaultYAxisId].scale;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
       const seriesPoints = data.flatMap(({
@@ -143,27 +142,38 @@ function ChartsVoronoiHandler(props) {
       };
     }
     const handleMouseLeave = () => {
-      dispatch({
-        type: 'exitChart'
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      }));
       clearHighlighted();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
       if (closestPoint === 'outside-chart') {
-        dispatch({
-          type: 'exitChart'
-        });
+        store.update(prev => _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            axis: {
+              x: null,
+              y: null
+            },
+            item: null
+          })
+        }));
         clearHighlighted();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
-        dispatch({
-          type: 'leaveItem',
-          data: {
-            type: 'scatter'
-          }
-        });
+        store.update(prev => _extends({}, prev, {
+          interaction: _extends({}, prev.interaction, {
+            item: null
+          })
+        }));
         clearHighlighted();
         return;
       }
@@ -171,14 +181,15 @@ function ChartsVoronoiHandler(props) {
         seriesId,
         dataIndex
       } = closestPoint;
-      dispatch({
-        type: 'enterItem',
-        data: {
-          type: 'scatter',
-          seriesId,
-          dataIndex
-        }
-      });
+      store.update(prev => _extends({}, prev, {
+        interaction: _extends({}, prev.interaction, {
+          item: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        })
+      }));
       setHighlighted({
         seriesId,
         dataIndex
@@ -211,7 +222,7 @@ function ChartsVoronoiHandler(props) {
       element.removeEventListener('pointermove', handleMouseMove);
       element.removeEventListener('click', handleMouseClick);
     };
-  }, [svgRef, dispatch, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea]);
+  }, [svgRef, yAxis, xAxis, voronoiMaxRadius, onItemClick, setHighlighted, clearHighlighted, drawingArea, store]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/_jsx(React.Fragment, {});

package/Gauge/Gauge.d.ts

@@ -6,5 +6,5 @@ export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProp
     classes?: Partial<GaugeClasses>;
     children?: React.ReactNode;
 }
-declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<unknown>>;
+declare const Gauge: React.ForwardRefExoticComponent<GaugeProps & React.RefAttributes<SVGSVGElement>>;
 export { Gauge };

package/Gauge/Gauge.js

@@ -137,12 +137,6 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
    * @default 0
    */
   valueMin: PropTypes.number,
-  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/Gauge/GaugeContainer.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ChartsSurfaceProps } from '../ChartsSurface';
-import { DrawingProviderProps } from '../context/DrawingProvider';
+import { DrawingAreaProviderProps } from '../context/DrawingAreaProvider';
 import { GaugeProviderProps } from './GaugeProvider';
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>, Omit<DrawingProviderProps, 'svgRef' | 'width' | 'height' | 'children'>, Omit<GaugeProviderProps, 'children'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' | 'height' | 'children'>, Pick<DrawingAreaProviderProps, 'margin'>, Omit<GaugeProviderProps, 'children'> {
     /**
      * The width of the chart in px. If not defined, it takes the width of the parent element.
      */
@@ -13,5 +13,5 @@ export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'width' |
     height?: number;
     children?: React.ReactNode;
 }
-declare const GaugeContainer: React.ForwardRefExoticComponent<GaugeContainerProps & React.RefAttributes<unknown>>;
+declare const GaugeContainer: React.ForwardRefExoticComponent<GaugeContainerProps & React.RefAttributes<SVGSVGElement>>;
 export { GaugeContainer };

package/Gauge/GaugeContainer.js

@@ -1,18 +1,18 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import useForkRef from '@mui/utils/useForkRef';
-import { useChartContainerDimensions } from "../ResponsiveChartContainer/useChartContainerDimensions.js";
 import { ChartsSurface } from "../ChartsSurface/index.js";
-import { DrawingProvider } from "../context/DrawingProvider.js";
+import { DrawingAreaProvider } from "../context/DrawingAreaProvider/index.js";
 import { GaugeProvider } from "./GaugeProvider.js";
+import { SizeProvider, useSize } from "../context/SizeProvider/index.js";
+import { SvgRefProvider } from "../context/SvgRefProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const ResizableContainer = styled('div', {
+const ResizableContainerRoot = styled('div', {
   name: 'MuiGauge',
   slot: 'Container'
 })(({
@@ -36,6 +36,22 @@ const ResizableContainer = styled('div', {
     fill: (theme.vars || theme).palette.text.primary
   }
 }));
+function ResizableContainer(props) {
+  const {
+    inHeight,
+    inWidth,
+    hasIntrinsicSize,
+    containerRef
+  } = useSize();
+  return /*#__PURE__*/_jsx(ResizableContainerRoot, _extends({}, props, {
+    ownerState: {
+      width: inWidth,
+      height: inHeight
+    },
+    ref: containerRef,
+    children: hasIntrinsicSize && props.children
+  }));
+}
 const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(props, ref) {
   const {
       width: inWidth,
@@ -56,58 +72,47 @@ const GaugeContainer = /*#__PURE__*/React.forwardRef(function GaugeContainer(pro
       children
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const {
-    containerRef,
-    width,
-    height
-  } = useChartContainerDimensions(inWidth, inHeight);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  return /*#__PURE__*/_jsx(ResizableContainer, _extends({
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    role: "meter",
-    "aria-valuenow": value === null ? undefined : value,
-    "aria-valuemin": valueMin,
-    "aria-valuemax": valueMax
-  }, other, {
-    children: width && height ? /*#__PURE__*/_jsx(DrawingProvider, {
-      width: width,
-      height: height,
-      margin: _extends({
-        left: 10,
-        right: 10,
-        top: 10,
-        bottom: 10
-      }, margin),
-      svgRef: svgRef,
-      children: /*#__PURE__*/_jsx(GaugeProvider, {
-        value: value,
-        valueMin: valueMin,
-        valueMax: valueMax,
-        startAngle: startAngle,
-        endAngle: endAngle,
-        outerRadius: outerRadius,
-        innerRadius: innerRadius,
-        cornerRadius: cornerRadius,
-        cx: cx,
-        cy: cy,
-        children: /*#__PURE__*/_jsx(ChartsSurface, {
-          width: width,
-          height: height,
-          ref: chartSurfaceRef,
-          title: title,
-          desc: desc,
-          disableAxisListener: true,
-          "aria-hidden": "true",
-          children: children
+  return /*#__PURE__*/_jsx(SizeProvider, {
+    width: inWidth,
+    height: inHeight,
+    children: /*#__PURE__*/_jsx(SvgRefProvider, {
+      children: /*#__PURE__*/_jsx(DrawingAreaProvider, {
+        margin: _extends({
+          left: 10,
+          right: 10,
+          top: 10,
+          bottom: 10
+        }, margin),
+        children: /*#__PURE__*/_jsx(GaugeProvider, {
+          value: value,
+          valueMin: valueMin,
+          valueMax: valueMax,
+          startAngle: startAngle,
+          endAngle: endAngle,
+          outerRadius: outerRadius,
+          innerRadius: innerRadius,
+          cornerRadius: cornerRadius,
+          cx: cx,
+          cy: cy,
+          children: /*#__PURE__*/_jsx(ResizableContainer, _extends({
+            role: "meter",
+            "aria-valuenow": value === null ? undefined : value,
+            "aria-valuemin": valueMin,
+            "aria-valuemax": valueMax
+          }, other, {
+            children: /*#__PURE__*/_jsx(ChartsSurface, {
+              title: title,
+              desc: desc,
+              disableAxisListener: true,
+              "aria-hidden": "true",
+              ref: ref,
+              children: children
+            })
+          }))
         })
       })
-    }) : null
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -198,12 +203,6 @@ process.env.NODE_ENV !== "production" ? GaugeContainer.propTypes = {
    * @default 0
    */
   valueMin: PropTypes.number,
-  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.
    */