@mui/x-charts 7.0.0-alpha.3 → 7.0.0-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,89 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.0-alpha.4
+
+_Dec 8, 2023_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 The scatter charts now use voronoi to trigger items
+
+  Users needed to hover the item to highlight the scatter item or show the tooltip.
+  Now they can interact with data by triggering the closest element. See the [docs page](https://next.mui.com/x/react-charts/scatter/#interaction) for more info.
+
+- 📚 Add [Pickers FAQ page](https://next.mui.com/x/react-date-pickers/faq/)
+- 🎉 The Data Grid Header filters feature is now stable
+- 🌍 Improve Danish (da-DK) locale on Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### Breaking changes
+
+- The header filters feature is now stable. `unstable_` prefix is removed from prop `headerFilters` and related exports.
+  See [migration docs](https://next.mui.com/x/migration/migration-data-grid-v6/#filtering) for more details.
+
+- The `GridColDef['type']` has been narrowed down to only accept the built-in column types.
+  TypeScript users need to use the `GridColDef` interface when defining columns:
+
+  ```tsx
+  // 🛑 `type` is inferred as `string` and is too wide
+  const columns = [{ type: 'number', field: 'id' }];
+  <DataGrid columns={columns} />;
+
+  // ✅ `type` is `'number'`
+  const columns: GridColDef[] = [{ type: 'number', field: 'id' }];
+  <DataGrid columns={columns} />;
+
+  // ✅ Alternalively, `as const` can be used to narrow down the type
+  const columns = [{ type: 'number' as const, field: 'id' }];
+  <DataGrid columns={columns} />;
+  ```
+
+#### `@mui/x-data-grid@7.0.0-alpha.4`
+
+- [DataGrid] Added a guard for reorder cells (#11159) @michelengelen
+- [DataGrid] Narrow down `GridColDef['type']` (#11270) @cherniavskii
+- [l10n] Improve Danish (da-DK) locale (#11304) @goibon
+
+#### `@mui/x-data-grid-pro@7.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.0.0-alpha.4`, plus:
+
+- [DataGridPro] Make header filters feature stable (#11243) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@7.0.0-alpha.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.4`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@7.0.0-alpha.4`
+
+- [fields] Rework `PickersTextField` (#11258) @flaviendelangle
+- [pickers] Fix `MultiSectionDigitalClock` issues (#11305) @LukasTy
+- [pickers] Fix views height consistency (#11337) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.0.0-alpha.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.0.0-alpha.4`.
+
+### Charts / `@mui/x-charts@7.0.0-alpha.4`
+
+- [charts] Remove animation on sparkline (#11311) @oliviertassinari
+- [charts] Use voronoi cells to trigger interaction with scatter items (#10981) @alexfauquette
+- [charts] Add `@mui/utils` as a dependency (#11351) @michelengelen
+
+### Docs
+
+- [docs] Add FAQ page (#11271) @noraleonte
+- [docs] Add a doc section on how to override the start of the week with each adapter (#11223) @flaviendelangle
+- [docs] Added params to `onPaginationModelChange` docs (#10191) @JFBenzs
+- [docs] Fix typo (#11324) @cadam11
+- [docs] Improve `DemoContainer` styling coverage (#11315) @LukasTy
+- [docs] General revision of the Charts docs (#11249) @danilo-leal
+
 ## 7.0.0-alpha.3
 
 _Dec 4, 2023_
@@ -866,6 +949,46 @@ Here is an example of the renaming for the `<ChartsTooltip />` component.
 - [core] Update release instructions as per v7 configuration (#10962) @MBilalShafi
 - [license] Correctly throw errors (#10924) @oliviertassinari
 
+## 6.18.4
+
+_Dec 8, 2023_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Add [Pickers FAQ page](https://mui.com/x/react-date-pickers/faq/)
+- 🌍 Improve Danish (da-DK) locale on Data Grid
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.4`
+
+- [DataGrid] Fix cell slot style override (#11215) @oliviertassinari
+- [l10n] Improve Danish (da-DK) locale (#11346) @goibon
+
+#### `@mui/x-data-grid-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.4`.
+
+#### `@mui/x-data-grid-premium@6.18.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.4`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.4`
+
+- [pickers] Fix `MultiSectionDigitalClock` issues (#11308) @LukasTy
+
+#### `@mui/x-date-pickers-pro@6.18.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.4`.
+
+### Docs
+
+- [docs] Fix typo (#11323) @cadam11
+- [docs] Add FAQ page (#11347) @noraleonte
+
 ## 6.18.3
 
 _Dec 4, 2023_

package/ChartsVoronoiHandler/ChartsVoronoiHandler.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type ChartsVoronoiHandlerProps = {
+    /**
+     * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+     * If `undefined`, the radius is assumed to be infinite.
+     * @default undefined
+     */
+    voronoiMaxRadius?: number | undefined;
+};
+declare function ChartsVoronoiHandler(props: ChartsVoronoiHandlerProps): React.JSX.Element;
+declare namespace ChartsVoronoiHandler {
+    var propTypes: any;
+}
+export { ChartsVoronoiHandler };

package/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsVoronoiHandler = ChartsVoronoiHandler;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _d3Delaunay = require("d3-delaunay");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _CartesianContextProvider = require("../context/CartesianContextProvider");
+var _DrawingProvider = require("../context/DrawingProvider");
+var _SeriesContextProvider = require("../context/SeriesContextProvider");
+var _useScale = require("../hooks/useScale");
+var _utils = require("../internals/utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ChartsVoronoiHandler(props) {
+  const {
+    voronoiMaxRadius
+  } = props;
+  const svgRef = React.useContext(_DrawingProvider.SVGContext);
+  const {
+    width,
+    height,
+    top,
+    left
+  } = React.useContext(_DrawingProvider.DrawingContext);
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = React.useContext(_CartesianContextProvider.CartesianContext);
+  const {
+    dispatch
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const {
+    series,
+    seriesOrder
+  } = React.useContext(_SeriesContextProvider.SeriesContext).scatter ?? {};
+  const voronoiRef = React.useRef({});
+  const defaultXAxisId = xAxisIds[0];
+  const defaultYAxisId = yAxisIds[0];
+  (0, _useEnhancedEffect.default)(() => {
+    dispatch({
+      type: 'updateVoronoiUsage',
+      useVoronoiInteraction: true
+    });
+    return () => {
+      dispatch({
+        type: 'updateVoronoiUsage',
+        useVoronoiInteraction: false
+      });
+    };
+  }, [dispatch]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (seriesOrder === undefined || series === undefined) {
+      // If there is no scatter chart series
+      return;
+    }
+    voronoiRef.current = {};
+    let points = [];
+    seriesOrder.forEach(seriesId => {
+      const {
+        data,
+        xAxisKey,
+        yAxisKey
+      } = series[seriesId];
+      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+      const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+      const seriesPoints = data.flatMap(({
+        x,
+        y
+      }) => [getXPosition(x), getYPosition(y)]);
+      voronoiRef.current[seriesId] = {
+        startIndex: points.length,
+        endIndex: points.length + seriesPoints.length
+      };
+      points = points.concat(seriesPoints);
+    });
+    voronoiRef.current.delauney = new _d3Delaunay.Delaunay(points);
+  }, [defaultXAxisId, defaultYAxisId, series, seriesOrder, xAxis, yAxis]);
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return undefined;
+    }
+    const handleMouseOut = () => {
+      dispatch({
+        type: 'exitChart'
+      });
+    };
+
+    // TODO: A perf optimisation of voronoi could be to use the last point as the intial point for the next search.
+    const handleMouseMove = event => {
+      // Get mouse coordinate in global SVG space
+      const svgPoint = (0, _utils.getSVGPoint)(svgRef.current, event);
+      const outsideX = svgPoint.x < left || svgPoint.x > left + width;
+      const outsideY = svgPoint.y < top || svgPoint.y > top + height;
+      if (outsideX || outsideY) {
+        dispatch({
+          type: 'exitChart'
+        });
+        return;
+      }
+      if (!voronoiRef.current.delauney) {
+        return;
+      }
+      const closestPointIndex = voronoiRef.current.delauney?.find(svgPoint.x, svgPoint.y);
+      if (closestPointIndex !== undefined) {
+        const seriesId = Object.keys(voronoiRef.current).find(id => {
+          if (id === 'delauney') {
+            return false;
+          }
+          return 2 * closestPointIndex >= voronoiRef.current[id].startIndex && 2 * closestPointIndex < voronoiRef.current[id].endIndex;
+        });
+        if (seriesId === undefined) {
+          return;
+        }
+        const dataIndex = (2 * closestPointIndex - voronoiRef.current[seriesId].startIndex) / 2;
+        if (voronoiMaxRadius !== undefined) {
+          const pointX = voronoiRef.current.delauney.points[2 * closestPointIndex];
+          const pointY = voronoiRef.current.delauney.points[2 * closestPointIndex + 1];
+          const dist2 = (pointX - svgPoint.x) ** 2 + (pointY - svgPoint.y) ** 2;
+          if (dist2 > voronoiMaxRadius ** 2) {
+            // The closest point is too far to be considered.
+            dispatch({
+              type: 'leaveItem',
+              data: {
+                type: 'scatter',
+                seriesId,
+                dataIndex
+              }
+            });
+            return;
+          }
+        }
+        dispatch({
+          type: 'enterItem',
+          data: {
+            type: 'scatter',
+            seriesId,
+            dataIndex
+          }
+        });
+      }
+    };
+    element.addEventListener('mouseout', handleMouseOut);
+    element.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      element.removeEventListener('mouseout', handleMouseOut);
+      element.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [svgRef, dispatch, left, width, top, height, yAxis, xAxis, voronoiMaxRadius]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {}); // Workaround to fix docs scripts
+}
+process.env.NODE_ENV !== "production" ? ChartsVoronoiHandler.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * If `undefined`, the radius is assumed to be infinite.
+   * @default undefined
+   */
+  voronoiMaxRadius: _propTypes.default.number
+} : void 0;

package/ChartsVoronoiHandler/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartsVoronoiHandler';

package/ChartsVoronoiHandler/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsVoronoiHandler = require("./ChartsVoronoiHandler");
+Object.keys(_ChartsVoronoiHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsVoronoiHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsVoronoiHandler[key];
+    }
+  });
+});

package/ChartsVoronoiHandler/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsVoronoiHandler/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ScatterChart/Scatter.js

@@ -32,10 +32,16 @@ function Scatter(props) {
     color,
     markerSize
   } = props;
+  const highlightScope = React.useMemo(() => (0, _extends2.default)({
+    highlighted: 'item',
+    faded: 'global'
+  }, series.highlightScope), [series.highlightScope]);
   const {
-    item
+    item,
+    useVoronoiInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
-  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(series.highlightScope);
+  const skipInteractionHandlers = useVoronoiInteraction || series.disableHover;
+  const getInteractionItemProps = (0, _useInteractionItemProps.useInteractionItemProps)(highlightScope, skipInteractionHandlers);
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
@@ -57,22 +63,24 @@ function Scatter(props) {
         dataIndex: i
       };
       if (isInRange) {
+        const isHighlighted = (0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, highlightScope);
         temp.push({
           x,
           y,
-          isFaded: !(0, _useInteractionItemProps.getIsHighlighted)(item, pointCtx, series.highlightScope) && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, series.highlightScope),
+          isHighlighted,
+          isFaded: !isHighlighted && (0, _useInteractionItemProps.getIsFaded)(item, pointCtx, highlightScope),
           interactionProps: getInteractionItemProps(pointCtx),
           id: scatterPoint.id
         });
       }
     }
     return temp;
-  }, [yScale, xScale, getInteractionItemProps, item, series.data, series.highlightScope, series.id]);
+  }, [xScale, yScale, series.data, series.id, item, highlightScope, getInteractionItemProps]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,
       cy: 0,
-      r: markerSize,
+      r: (dataPoint.isHighlighted ? 1.2 : 1) * markerSize,
       transform: `translate(${dataPoint.x}, ${dataPoint.y})`,
       fill: color,
       opacity: dataPoint.isFaded && 0.3 || 1
@@ -93,6 +101,7 @@ process.env.NODE_ENV !== "production" ? Scatter.propTypes = {
       x: _propTypes.default.number.isRequired,
       y: _propTypes.default.number.isRequired
     })).isRequired,
+    disableHover: _propTypes.default.bool,
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])

package/ScatterChart/ScatterChart.d.ts

@@ -8,14 +8,20 @@ import { ChartsTooltipProps, ChartsTooltipSlotProps, ChartsTooltipSlots } from '
 import { ChartsLegendProps, ChartsLegendSlotProps, ChartsLegendSlots } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlots, ChartsAxisSlotProps } from '../models/axis';
+import { ChartsVoronoiHandlerProps } from '../ChartsVoronoiHandler/ChartsVoronoiHandler';
 export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsTooltipSlots {
 }
 export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsTooltipSlotProps {
 }
-export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
+export interface ScatterChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, ChartsVoronoiHandlerProps {
     series: MakeOptional<ScatterSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+     * @default false
+     */
+    disableVoronoi?: boolean;
     /**
      * @deprecated Consider using `slotProps.legend` instead.
      */

package/ScatterChart/ScatterChart.js

@@ -14,6 +14,7 @@ var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
+var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -34,6 +35,8 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     series,
     tooltip,
     axisHighlight,
+    voronoiMaxRadius,
+    disableVoronoi,
     legend,
     width,
     height,
@@ -60,7 +63,9 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     xAxis: xAxis,
     yAxis: yAxis,
     sx: sx,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
+    children: [!disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, {
+      voronoiMaxRadius: voronoiMaxRadius
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
       rightAxis: rightAxis,
@@ -134,6 +139,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @default false
    */
   disableAxisListener: _propTypes.default.bool,
+  /**
+   * If true, the interaction will not use the Voronoi cell and fall back to hover events.
+   * @default false
+   */
+  disableVoronoi: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    * @default undefined
@@ -226,6 +236,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
       x: _propTypes.default.number.isRequired,
       y: _propTypes.default.number.isRequired
     })).isRequired,
+    disableHover: _propTypes.default.bool,
     highlightScope: _propTypes.default.shape({
       faded: _propTypes.default.oneOf(['global', 'none', 'series']),
       highlighted: _propTypes.default.oneOf(['item', 'none', 'series'])
@@ -291,6 +302,12 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     x: _propTypes.default.number,
     y: _propTypes.default.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.
+   * @default undefined
+   */
+  voronoiMaxRadius: _propTypes.default.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    * @default undefined

package/SparkLineChart/SparkLineChart.js

@@ -86,6 +86,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     sx: sx,
     disableAxisListener: (!showTooltip || tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
+      skipAnimation: true,
       slots: slots,
       slotProps: slotProps,
       sx: {

package/context/InteractionProvider.d.ts

@@ -20,6 +20,11 @@ type InteractionActions<T extends ChartSeriesType = ChartSeriesType> = {
 } | {
     type: 'leaveItem';
     data: ItemInteractionData<T>;
+} | {
+    type: 'exitChart';
+} | {
+    type: 'updateVoronoiUsage';
+    useVoronoiInteraction: boolean;
 } | {
     type: 'updateAxis';
     data: AxisInteractionData;
@@ -33,6 +38,11 @@ type InteractionState = {
      * The x- and y-axes currently interacting.
      */
     axis: AxisInteractionData;
+    /**
+     * Set to `true` when `VoronoiHandler` is active.
+     * Used to prevent collision with mouseEnter events.
+     */
+    useVoronoiInteraction: boolean;
     dispatch: React.Dispatch<InteractionActions>;
 };
 export declare const InteractionContext: React.Context<InteractionState>;

package/context/InteractionProvider.js

@@ -17,6 +17,7 @@ const InteractionContext = exports.InteractionContext = /*#__PURE__*/React.creat
     x: null,
     y: null
   },
+  useVoronoiInteraction: false,
   dispatch: () => null
 });
 const dataReducer = (prevState, action) => {
@@ -25,6 +26,21 @@ const dataReducer = (prevState, action) => {
       return (0, _extends2.default)({}, prevState, {
         item: action.data
       });
+    case 'exitChart':
+      if (prevState.item === null && prevState.axis.x === null && prevState.axis.y === null) {
+        return prevState;
+      }
+      return (0, _extends2.default)({}, prevState, {
+        axis: {
+          x: null,
+          y: null
+        },
+        item: null
+      });
+    case 'updateVoronoiUsage':
+      return (0, _extends2.default)({}, 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
@@ -34,6 +50,9 @@ const dataReducer = (prevState, action) => {
         item: null
       });
     case 'updateAxis':
+      if (action.data.x === prevState.axis.x && action.data.y === prevState.axis.y) {
+        return prevState;
+      }
       return (0, _extends2.default)({}, prevState, {
         axis: action.data
       });
@@ -49,7 +68,8 @@ function InteractionProvider({
     axis: {
       x: null,
       y: null
-    }
+    },
+    useVoronoiInteraction: false
   });
   const value = React.useMemo(() => (0, _extends2.default)({}, data, {
     dispatch