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

package/node/ChartsTooltip/ChartsTooltipTable.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipMark = exports.ChartsTooltipCell = void 0;
+exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipCell = void 0;
 var _styles = require("@mui/material/styles");
-var _system = require("@mui/system");
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 /**
  * @ignore - internal component.
@@ -17,11 +16,10 @@ const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div
 })(({
   theme
 }) => ({
-  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
-  transition: theme.transitions.create('box-shadow'),
-  borderRadius: theme.shape.borderRadius
+  borderRadius: theme.shape.borderRadius,
+  border: `solid ${(theme.vars || theme).palette.divider} 1px`
 }));
 
 /**
@@ -51,10 +49,10 @@ const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
   theme
 }) => ({
   'tr:first-of-type& td': {
-    paddingTop: theme.spacing(1)
+    paddingTop: theme.spacing(0.5)
   },
   'tr:last-of-type& td': {
-    paddingBottom: theme.spacing(1)
+    paddingBottom: theme.spacing(0.5)
   }
 }));
 
@@ -71,38 +69,22 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
-    paddingLeft: theme.spacing(1)
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1.5),
+    fontWeight: theme.typography.fontWeightRegular
+  },
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}, &.${_chartsTooltipClasses.chartsTooltipClasses.axisValueCell}`]: {
+    color: (theme.vars || theme).palette.text.primary,
+    fontWeight: theme.typography.fontWeightMedium
   },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}`]: {
-    paddingLeft: theme.spacing(4),
-    color: (theme.vars || theme).palette.text.primary
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5)
   },
   'td:first-of-type&': {
-    paddingLeft: theme.spacing(2)
+    paddingLeft: theme.spacing(1.5)
   },
   'td:last-of-type&': {
-    paddingRight: theme.spacing(2)
+    paddingRight: theme.spacing(1.5)
   }
-}));
-
-/**
- * @ignore - internal component.
- */
-const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)('div', {
-  name: 'MuiChartsTooltip',
-  slot: 'Mark',
-  overridesResolver: (props, styles) => styles.mark,
-  shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'color'
-})(({
-  theme,
-  color
-}) => ({
-  width: theme.spacing(1),
-  height: theme.spacing(1),
-  borderRadius: '50%',
-  boxShadow: theme.shadows[1],
-  backgroundColor: color,
-  borderColor: (theme.vars || theme).palette.background.paper,
-  border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
-  boxSizing: 'content-box'
 }));

package/node/ChartsTooltip/chartsTooltipClasses.js

@@ -1,12 +1,32 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.chartsTooltipClasses = void 0;
 exports.getChartsTooltipUtilityClass = getChartsTooltipUtilityClass;
-var _utils = require("@mui/utils");
+exports.useUtilityClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 function getChartsTooltipUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiChartsTooltip', slot);
+  return (0, _generateUtilityClass.default)('MuiChartsTooltip', slot);
 }
-const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);
+const chartsTooltipClasses = exports.chartsTooltipClasses = (0, _generateUtilityClasses.default)('MuiChartsTooltip', ['root', 'paper', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell', 'axisValueCell']);
+const useUtilityClasses = classes => {
+  const slots = {
+    root: ['root'],
+    paper: ['paper'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
+    markCell: ['markCell'],
+    labelCell: ['labelCell'],
+    valueCell: ['valueCell'],
+    axisValueCell: ['axisValueCell']
+  };
+  return (0, _composeClasses.default)(slots, getChartsTooltipUtilityClass, classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/ChartsTooltip/index.js

@@ -4,8 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  getChartsTooltipUtilityClass: true,
+  chartsTooltipClasses: true,
   useMouseTracker: true
 };
+Object.defineProperty(exports, "chartsTooltipClasses", {
+  enumerable: true,
+  get: function () {
+    return _chartsTooltipClasses.chartsTooltipClasses;
+  }
+});
+Object.defineProperty(exports, "getChartsTooltipUtilityClass", {
+  enumerable: true,
+  get: function () {
+    return _chartsTooltipClasses.getChartsTooltipUtilityClass;
+  }
+});
 Object.defineProperty(exports, "useMouseTracker", {
   enumerable: true,
   get: function () {
@@ -24,18 +38,19 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
     }
   });
 });
-var _chartsTooltipClasses = require("./chartsTooltipClasses");
-Object.keys(_chartsTooltipClasses).forEach(function (key) {
+var _ChartsTooltipContainer = require("./ChartsTooltipContainer");
+Object.keys(_ChartsTooltipContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _chartsTooltipClasses[key]) return;
+  if (key in exports && exports[key] === _ChartsTooltipContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _chartsTooltipClasses[key];
+      return _ChartsTooltipContainer[key];
     }
   });
 });
+var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 Object.keys(_ChartsAxisTooltipContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -60,30 +75,6 @@ Object.keys(_ChartsItemTooltipContent).forEach(function (key) {
     }
   });
 });
-var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
-Object.keys(_DefaultChartsAxisTooltipContent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DefaultChartsAxisTooltipContent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DefaultChartsAxisTooltipContent[key];
-    }
-  });
-});
-var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
-Object.keys(_DefaultChartsItemTooltipContent).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _DefaultChartsItemTooltipContent[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _DefaultChartsItemTooltipContent[key];
-    }
-  });
-});
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 Object.keys(_ChartsTooltipTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -120,4 +111,16 @@ Object.keys(_useAxisTooltip).forEach(function (key) {
     }
   });
 });
-var _utils = require("./utils");
+var _utils = require("./utils");
+var _ChartTooltip = require("./ChartTooltip.types");
+Object.keys(_ChartTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartTooltip[key];
+    }
+  });
+});

package/node/ChartsTooltip/useAxisTooltip.js

@@ -1,40 +1,38 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAxisTooltip = useAxisTooltip;
-var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _useColorProcessor = require("../internals/plugins/corePlugins/useChartSeries/useColorProcessor");
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
 var _getLabel = require("../internals/getLabel");
 var _isCartesian = require("../internals/isCartesian");
 var _utils = require("./utils");
+var _useAxis = require("../hooks/useAxis");
+var _useZAxis = require("../hooks/useZAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 function useAxisTooltip() {
-  const {
-    axis
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const defaultXAxis = (0, _useAxis.useXAxis)();
+  const defaultYAxis = (0, _useAxis.useYAxis)();
+  const xAxisHasData = defaultXAxis.data !== undefined && defaultXAxis.data.length !== 0;
+  const store = (0, _useStore.useStore)();
+  const axisData = (0, _useSelector.useSelector)(store, xAxisHasData ? _useChartInteraction.selectorChartsInteractionXAxis : _useChartInteraction.selectorChartsInteractionYAxis);
   const series = (0, _useSeries.useSeries)();
   const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+    xAxis
+  } = (0, _useAxis.useXAxes)();
+  const {
+    yAxis
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  } = (0, _useZAxis.useZAxes)();
   const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
-
-  // By default use the x-axis
-  const isXaxis = axis.x !== null && axis.x.index !== -1;
-  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
   if (axisData === null) {
     return null;
   }
@@ -42,8 +40,8 @@ function useAxisTooltip() {
     index: dataIndex,
     value: axisValue
   } = axisData;
-  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
-  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const USED_AXIS_ID = xAxisHasData ? defaultXAxis.id : defaultYAxis.id;
+  const usedAxis = xAxisHasData ? defaultXAxis : defaultYAxis;
   const relevantSeries = Object.keys(series).filter(_isCartesian.isCartesianSeriesType).flatMap(seriesType => {
     const seriesOfType = series[seriesType];
     if (!seriesOfType) {
@@ -53,14 +51,14 @@ function useAxisTooltip() {
       const seriesToAdd = seriesOfType.series[seriesId];
       const providedXAxisId = seriesToAdd.xAxisId;
       const providedYAxisId = seriesToAdd.yAxisId;
-      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+      const axisKey = xAxisHasData ? providedXAxisId : providedYAxisId;
 
       // Test if the series uses the default axis
       if (axisKey === undefined || axisKey === USED_AXIS_ID) {
-        const xAxisId = providedXAxisId ?? xAxisIds[0];
-        const yAxisId = providedYAxisId ?? yAxisIds[0];
-        const zAxisId = seriesToAdd.zAxisId ?? zAxisIds[0];
-        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const xAxisId = providedXAxisId ?? defaultXAxis.id;
+        const yAxisId = providedYAxisId ?? defaultYAxis.id;
+        const zAxisId = 'zAxisId' in seriesToAdd ? seriesToAdd.zAxisId : zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId ? zAxis[zAxisId] : undefined)(dataIndex) ?? '';
         const value = seriesToAdd.data[dataIndex] ?? null;
         const formattedValue = seriesToAdd.valueFormatter(value, {
           dataIndex
@@ -71,18 +69,22 @@ function useAxisTooltip() {
           color,
           value,
           formattedValue,
-          formattedLabel
+          formattedLabel,
+          markType: seriesToAdd.labelMarkType
         };
       }
       return undefined;
     });
-  }).filter(item => item != null);
+  }).filter(function truthy(item) {
+    return Boolean(item);
+  });
   const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
   const axisFormattedValue = axisFormatter(axisValue, {
     location: 'tooltip'
   });
   return {
-    identifier: axis,
+    axisDirection: xAxisHasData ? 'x' : 'y',
+    dataIndex,
     seriesItems: relevantSeries,
     axisValue,
     axisFormattedValue

package/node/ChartsTooltip/useItemTooltip.js

@@ -1,71 +1,45 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useItemTooltip = useItemTooltip;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _InteractionProvider = require("../context/InteractionProvider");
 var _useSeries = require("../hooks/useSeries");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
-var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
-var _getLabel = require("../internals/getLabel");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useAxis = require("../hooks/useAxis");
+var _useZAxis = require("../hooks/useZAxis");
+var _useChartSeries = require("../internals/plugins/corePlugins/useChartSeries/useChartSeries.selectors");
 function useItemTooltip() {
-  const {
-    item
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  const store = (0, _useStore.useStore)();
+  const identifier = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionItem);
+  const seriesConfig = (0, _useSelector.useSelector)(store, _useChartSeries.selectorChartSeriesConfig);
   const series = (0, _useSeries.useSeries)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
-  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+  } = (0, _useZAxis.useZAxes)();
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   const zAxisId = series.zAxisId ?? zAxisIds[0];
-  if (!item || item.dataIndex === undefined) {
+  if (!identifier || identifier.dataIndex === undefined) {
     return null;
   }
-  const itemSeries = series[item.type].series[item.seriesId];
-  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
-  if (itemSeries.type === 'pie') {
-    const point = itemSeries.data[item.dataIndex];
-    const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
-    const value = (0, _extends2.default)({}, point, {
-      label
-    });
-    const formattedValue = itemSeries.valueFormatter?.(value, {
-      dataIndex: item.dataIndex
-    });
-    return {
-      identifier: item,
-      color: getColor(item.dataIndex),
-      label,
-      value,
-      formattedValue
-    };
-  }
-  const label = (0, _getLabel.getLabel)(itemSeries.label, 'tooltip');
-  const value = itemSeries.data[item.dataIndex];
-  const formattedValue = itemSeries.valueFormatter?.(value, {
-    dataIndex: item.dataIndex
+  const itemSeries = series[identifier.type].series[identifier.seriesId];
+  const getColor = seriesConfig[itemSeries.type].colorProcessor?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  return seriesConfig[itemSeries.type].tooltipGetter({
+    series: itemSeries,
+    getColor,
+    identifier
   });
-  return {
-    identifier: item,
-    color: getColor(item.dataIndex),
-    label,
-    value,
-    formattedValue
-  };
 }

package/node/ChartsTooltip/utils.js

@@ -1,10 +1,10 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTooltipHasData = getTooltipHasData;
 exports.useMouseTracker = useMouseTracker;
 exports.usePointerType = usePointerType;
 exports.utcFormatter = utcFormatter;
@@ -84,14 +84,6 @@ function usePointerType() {
   }, [svgRef]);
   return pointerType;
 }
-function getTooltipHasData(trigger, displayedData) {
-  if (trigger === 'item') {
-    return displayedData !== null;
-  }
-  const hasAxisXData = displayedData.x !== null;
-  const hasAxisYData = displayedData.y !== null;
-  return hasAxisXData || hasAxisYData;
-}
 function utcFormatter(v) {
   if (v instanceof Date) {
     return v.toUTCString();

package/node/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,40 +1,45 @@
 "use strict";
 'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsVoronoiHandler = ChartsVoronoiHandler;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _d3Delaunay = require("@mui/x-charts-vendor/d3-delaunay");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
-var _InteractionProvider = require("../context/InteractionProvider");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useScale = require("../hooks/useScale");
+var _useStore = require("../internals/store/useStore");
 var _getSVGPoint = require("../internals/getSVGPoint");
-var _hooks = require("../hooks");
-var _context = require("../context");
 var _useSeries = require("../hooks/useSeries");
+var _useChartContext = require("../context/ChartProvider/useChartContext");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _useSvgRef = require("../hooks/useSvgRef");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsVoronoiHandler(props) {
   const {
     voronoiMaxRadius,
     onItemClick
   } = props;
-  const svgRef = (0, _hooks.useSvgRef)();
-  const drawingArea = (0, _hooks.useDrawingArea)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _useChartContext.useChartContext)();
   const {
     xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
     yAxis,
-    xAxisIds,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
-  const {
-    dispatch
-  } = React.useContext(_InteractionProvider.InteractionContext);
+  } = (0, _hooks.useYAxes)();
+  const store = (0, _useStore.useStore)();
   const {
     series,
     seriesOrder
@@ -42,24 +47,22 @@ function ChartsVoronoiHandler(props) {
   const voronoiRef = React.useRef({});
   const delauneyRef = React.useRef(undefined);
   const lastFind = React.useRef(undefined);
-  const {
-    setHighlighted,
-    clearHighlighted
-  } = (0, _context.useHighlighted)();
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   (0, _useEnhancedEffect.default)(() => {
-    dispatch({
-      type: 'updateVoronoiUsage',
-      useVoronoiInteraction: true
-    });
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      interaction: (0, _extends2.default)({}, prev.interaction, {
+        useVoronoiInteraction: true
+      })
+    }));
     return () => {
-      dispatch({
-        type: 'updateVoronoiUsage',
-        useVoronoiInteraction: false
-      });
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          useVoronoiInteraction: false
+        })
+      }));
     };
-  }, [dispatch]);
+  }, [store]);
   (0, _useEnhancedEffect.default)(() => {
     // This effect generate and store the Delaunay object that's used to map coordinate to closest point.
 
@@ -85,7 +88,7 @@ function ChartsVoronoiHandler(props) {
       }) => {
         const pointX = getXPosition(x);
         const pointY = getYPosition(y);
-        if (!drawingArea.isPointInside({
+        if (!instance.isPointInside({
           x: pointX,
           y: pointY
         })) {
@@ -105,16 +108,16 @@ function ChartsVoronoiHandler(props) {
     });
     delauneyRef.current = new _d3Delaunay.Delaunay(points);
     lastFind.current = undefined;
-  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea]);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis, drawingArea, instance]);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
+    if (svgRef.current === null) {
       return undefined;
     }
+    const element = svgRef.current;
     function getClosestPoint(event) {
       // Get mouse coordinate in global SVG space
       const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, event);
-      if (!drawingArea.isPointInside(svgPoint)) {
+      if (!instance.isPointInside(svgPoint)) {
         lastFind.current = undefined;
         return 'outside-chart';
       }
@@ -148,43 +151,55 @@ function ChartsVoronoiHandler(props) {
       };
     }
     const handleMouseLeave = () => {
-      dispatch({
-        type: 'exitChart'
-      });
-      clearHighlighted();
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          axis: {
+            x: null,
+            y: null
+          },
+          item: null
+        })
+      }));
+      instance.clearHighlight();
     };
     const handleMouseMove = event => {
       const closestPoint = getClosestPoint(event);
       if (closestPoint === 'outside-chart') {
-        dispatch({
-          type: 'exitChart'
-        });
-        clearHighlighted();
+        store.update(prev => (0, _extends2.default)({}, prev, {
+          interaction: (0, _extends2.default)({}, prev.interaction, {
+            axis: {
+              x: null,
+              y: null
+            },
+            item: null
+          })
+        }));
+        instance.clearHighlight();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
-        dispatch({
-          type: 'leaveItem',
-          data: {
-            type: 'scatter'
-          }
-        });
-        clearHighlighted();
+        store.update(prev => (0, _extends2.default)({}, prev, {
+          interaction: (0, _extends2.default)({}, prev.interaction, {
+            item: null
+          })
+        }));
+        instance.clearHighlight();
         return;
       }
       const {
         seriesId,
         dataIndex
       } = closestPoint;
-      dispatch({
-        type: 'enterItem',
-        data: {
-          type: 'scatter',
-          seriesId,
-          dataIndex
-        }
-      });
-      setHighlighted({
+      store.update(prev => (0, _extends2.default)({}, prev, {
+        interaction: (0, _extends2.default)({}, prev.interaction, {
+          item: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        })
+      }));
+      instance.setHighlight({
         seriesId,
         dataIndex
       });
@@ -216,7 +231,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, drawingArea, store, instance]);
 
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {});