@mui/x-charts 9.11.0 → 9.12.0

package/ScatterChart/ScatterChart.mjs

@@ -145,6 +145,13 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes /* remove-proptyp
     keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */

package/SparkLineChart/SparkLineChart.js

@@ -259,6 +259,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
     keyboardActivation: _propTypes.default.bool,
     progressiveRendering: _propTypes.default.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: _propTypes.default.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/SparkLineChart/SparkLineChart.mjs

@@ -252,6 +252,13 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes /* remove-propt
     keyboardActivation: PropTypes.bool,
     progressiveRendering: PropTypes.bool
   }),
+  /**
+   * If `true`, clicking an item immediately shows the keyboard focus indicator on it.
+   * By default, clicking sets the item that keyboard navigation starts from, but the focus
+   * indicator stays hidden until the user presses a key.
+   * @default false
+   */
+  focusItemOnClick: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */

package/hooks/useInteractionItemProps.js

@@ -24,11 +24,13 @@ const useInteractionItemProps = data => {
   const onPointerEnter = (0, _useEventCallback.default)(() => {
     interactionActive.current = true;
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(data);
     instance.setTooltipItem(data);
     instance.setHighlight(data);
   });
   const onPointerLeave = (0, _useEventCallback.default)(() => {
     interactionActive.current = false;
+    instance.clearHoveredItem(data);
     instance.removeTooltipItem(data);
     instance.clearHighlight();
   });
@@ -53,6 +55,7 @@ function getInteractionItemProps(instance, item) {
       return;
     }
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(item);
     instance.setTooltipItem(item);
     instance.setHighlight(item);
   }
@@ -60,6 +63,7 @@ function getInteractionItemProps(instance, item) {
     if (!item) {
       return;
     }
+    instance.clearHoveredItem(item);
     instance.removeTooltipItem(item);
     instance.clearHighlight();
   }

package/hooks/useInteractionItemProps.mjs

@@ -16,11 +16,13 @@ export const useInteractionItemProps = data => {
   const onPointerEnter = useEventCallback(() => {
     interactionActive.current = true;
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(data);
     instance.setTooltipItem(data);
     instance.setHighlight(data);
   });
   const onPointerLeave = useEventCallback(() => {
     interactionActive.current = false;
+    instance.clearHoveredItem(data);
     instance.removeTooltipItem(data);
     instance.clearHighlight();
   });
@@ -44,6 +46,7 @@ export function getInteractionItemProps(instance, item) {
       return;
     }
     instance.setLastUpdateSource('pointer');
+    instance.setHoveredItem(item);
     instance.setTooltipItem(item);
     instance.setHighlight(item);
   }
@@ -51,6 +54,7 @@ export function getInteractionItemProps(instance, item) {
     if (!item) {
       return;
     }
+    instance.clearHoveredItem(item);
     instance.removeTooltipItem(item);
     instance.clearHighlight();
   }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.11.0
+ * @mui/x-charts v9.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v9.11.0
+ * @mui/x-charts v9.12.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.js

@@ -1,13 +1,16 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsAccessibilityProxy = ChartsAccessibilityProxy;
 var React = _interopRequireWildcard(require("react"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useChartId = require("../../../hooks/useChartId");
+var _ChartsProvider = require("../../../context/ChartsProvider");
 var _useDescription = require("./useDescription");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -35,9 +38,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAccessibilityProxy() {
   const message = (0, _useDescription.useDescription)();
   const chartId = (0, _useChartId.useChartId)();
+  const {
+    instance
+  } = (0, _ChartsProvider.useChartsContext)();
   const currentFormatRef = React.useRef(null);
   const currentIndexRef = React.useRef(0);
   const containerRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(containerRef, instance.chartsAccessibilityProxyRef);
   React.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -93,9 +100,12 @@ function ChartsAccessibilityProxy() {
     }
   }, [message, chartId]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    role: "none",
-    tabIndex: message ? undefined : 0,
-    ref: containerRef,
+    role: "none"
+    // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
+    // blur the root mid hand-off and the chart would look like it lost the focus.
+    ,
+    tabIndex: message ? -1 : 0,
+    ref: handleRef,
     style: fullSizeLayerStyle
   });
 }

package/internals/components/ChartsAccessibilityProxy/ChartsAccessibilityProxy.mjs

@@ -1,7 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import useForkRef from '@mui/utils/useForkRef';
 import { useChartId } from "../../../hooks/useChartId.mjs";
+import { useChartsContext } from "../../../context/ChartsProvider/index.mjs";
 import { useDescription } from "./useDescription.mjs";
 
 /**
@@ -31,9 +33,13 @@ const fullSizeLayerStyle = {
 export function ChartsAccessibilityProxy() {
   const message = useDescription();
   const chartId = useChartId();
+  const {
+    instance
+  } = useChartsContext();
   const currentFormatRef = React.useRef(null);
   const currentIndexRef = React.useRef(0);
   const containerRef = React.useRef(null);
+  const handleRef = useForkRef(containerRef, instance.chartsAccessibilityProxyRef);
   React.useEffect(() => {
     const container = containerRef.current;
     if (!container) {
@@ -89,9 +95,12 @@ export function ChartsAccessibilityProxy() {
     }
   }, [message, chartId]);
   return /*#__PURE__*/_jsx("div", {
-    role: "none",
-    tabIndex: message ? undefined : 0,
-    ref: containerRef,
+    role: "none"
+    // Stays focusable once an announcer child owns the tab stop, otherwise the browser would
+    // blur the root mid hand-off and the chart would look like it lost the focus.
+    ,
+    tabIndex: message ? -1 : 0,
+    ref: handleRef,
     style: fullSizeLayerStyle
   });
 }

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.d.mts

@@ -0,0 +1,8 @@
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+export declare function focusAccessibilityProxy(root: HTMLDivElement | null): boolean;

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+export declare function focusAccessibilityProxy(root: HTMLDivElement | null): boolean;

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.focusAccessibilityProxy = focusAccessibilityProxy;
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+function focusAccessibilityProxy(root) {
+  if (!root) {
+    return false;
+  }
+  const target = root.querySelector('[tabindex="0"]') ?? (root.tabIndex >= 0 ? root : null);
+
+  // The proxy covers the whole chart, focusing it would scroll long pages.
+  target?.focus({
+    preventScroll: true
+  });
+  return target !== null;
+}

package/internals/components/ChartsAccessibilityProxy/focusAccessibilityProxy.mjs

@@ -0,0 +1,19 @@
+/**
+ * Moves the DOM focus to the chart tab stop.
+ * The proxy root is only tabbable while there is no description, otherwise one of the announcer
+ * children holds the tab stop.
+ * @param {HTMLDivElement | null} root The accessibility proxy root.
+ * @returns {boolean} `true` when an element was focused.
+ */
+export function focusAccessibilityProxy(root) {
+  if (!root) {
+    return false;
+  }
+  const target = root.querySelector('[tabindex="0"]') ?? (root.tabIndex >= 0 ? root : null);
+
+  // The proxy covers the whole chart, focusing it would scroll long pages.
+  target?.focus({
+    preventScroll: true
+  });
+  return target !== null;
+}

package/internals/components/ChartsAccessibilityProxy/index.d.mts

@@ -1 +1,2 @@
-export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./focusAccessibilityProxy.mjs";

package/internals/components/ChartsAccessibilityProxy/index.d.ts

@@ -1 +1,2 @@
-export * from "./ChartsAccessibilityProxy.js";
+export * from "./ChartsAccessibilityProxy.js";
+export * from "./focusAccessibilityProxy.js";

package/internals/components/ChartsAccessibilityProxy/index.js

@@ -13,4 +13,15 @@ Object.keys(_ChartsAccessibilityProxy).forEach(function (key) {
       return _ChartsAccessibilityProxy[key];
     }
   });
+});
+var _focusAccessibilityProxy = require("./focusAccessibilityProxy");
+Object.keys(_focusAccessibilityProxy).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _focusAccessibilityProxy[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _focusAccessibilityProxy[key];
+    }
+  });
 });

package/internals/components/ChartsAccessibilityProxy/index.mjs

@@ -1 +1,2 @@
-export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./ChartsAccessibilityProxy.mjs";
+export * from "./focusAccessibilityProxy.mjs";

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.js

@@ -10,10 +10,12 @@ var React = _interopRequireWildcard(require("react"));
 const useChartElementRef = () => {
   const chartsLayerContainerRef = React.useRef(null);
   const chartRootRef = React.useRef(null);
+  const chartsAccessibilityProxyRef = React.useRef(null);
   return {
     instance: {
       chartsLayerContainerRef,
-      chartRootRef
+      chartRootRef,
+      chartsAccessibilityProxyRef
     }
   };
 };

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.mjs

@@ -4,10 +4,12 @@ import * as React from 'react';
 export const useChartElementRef = () => {
   const chartsLayerContainerRef = React.useRef(null);
   const chartRootRef = React.useRef(null);
+  const chartsAccessibilityProxyRef = React.useRef(null);
   return {
     instance: {
       chartsLayerContainerRef,
-      chartRootRef
+      chartRootRef,
+      chartsAccessibilityProxyRef
     }
   };
 };

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.types.d.mts

@@ -9,6 +9,11 @@ export interface UseChartElementRefInstance {
    * Reference to the chart root element.
    */
   chartRootRef: React.RefObject<Element | null>;
+  /**
+   * Reference to the root of the accessibility proxy, the element owning the chart tab stop.
+   * It is `null` when keyboard navigation is disabled.
+   */
+  chartsAccessibilityProxyRef: React.RefObject<HTMLDivElement | null>;
 }
 export type UseChartElementRefSignature = ChartPluginSignature<{
   instance: UseChartElementRefInstance;

package/internals/plugins/corePlugins/useChartElementRef/useChartElementRef.types.d.ts

@@ -9,6 +9,11 @@ export interface UseChartElementRefInstance {
    * Reference to the chart root element.
    */
   chartRootRef: React.RefObject<Element | null>;
+  /**
+   * Reference to the root of the accessibility proxy, the element owning the chart tab stop.
+   * It is `null` when keyboard navigation is disabled.
+   */
+  chartsAccessibilityProxyRef: React.RefObject<HTMLDivElement | null>;
 }
 export type UseChartElementRefSignature = ChartPluginSignature<{
   instance: UseChartElementRefInstance;

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.js

@@ -40,6 +40,7 @@ function useRegisterPointerInteractions() {
       const lastItem = lastItemRef.current;
       if (lastItem) {
         lastItemRef.current = undefined;
+        instance.clearHoveredItem(lastItem);
         instance.removeTooltipItem(lastItem);
         instance.clearHighlight();
       }
@@ -66,6 +67,7 @@ function useRegisterPointerInteractions() {
       }
       if (item) {
         instance.setLastUpdateSource('pointer');
+        instance.setHoveredItem(item);
         instance.setTooltipItem(item);
         instance.setHighlight(item);
         lastItemRef.current = item;
@@ -73,10 +75,18 @@ function useRegisterPointerInteractions() {
         reset();
       }
     };
+
+    // Touch has no hover phase, so a tap may never produce a `pointermove`. Resolving on
+    // `pointerdown` too is what makes the pointer item known for a stationary tap.
+    const onPointerDown = function onPointerDown(event) {
+      onPointerMove(event);
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     element.addEventListener('pointerleave', onPointerLeave);
     element.addEventListener('pointermove', onPointerMove);
     element.addEventListener('pointerenter', onPointerEnter);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       element.removeEventListener('pointerenter', onPointerEnter);
       element.removeEventListener('pointermove', onPointerMove);
       element.removeEventListener('pointerleave', onPointerLeave);

package/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.mjs

@@ -34,6 +34,7 @@ export function useRegisterPointerInteractions() {
       const lastItem = lastItemRef.current;
       if (lastItem) {
         lastItemRef.current = undefined;
+        instance.clearHoveredItem(lastItem);
         instance.removeTooltipItem(lastItem);
         instance.clearHighlight();
       }
@@ -60,6 +61,7 @@ export function useRegisterPointerInteractions() {
       }
       if (item) {
         instance.setLastUpdateSource('pointer');
+        instance.setHoveredItem(item);
         instance.setTooltipItem(item);
         instance.setHighlight(item);
         lastItemRef.current = item;
@@ -67,10 +69,18 @@ export function useRegisterPointerInteractions() {
         reset();
       }
     };
+
+    // Touch has no hover phase, so a tap may never produce a `pointermove`. Resolving on
+    // `pointerdown` too is what makes the pointer item known for a stationary tap.
+    const onPointerDown = function onPointerDown(event) {
+      onPointerMove(event);
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     element.addEventListener('pointerleave', onPointerLeave);
     element.addEventListener('pointermove', onPointerMove);
     element.addEventListener('pointerenter', onPointerEnter);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       element.removeEventListener('pointerenter', onPointerEnter);
       element.removeEventListener('pointermove', onPointerMove);
       element.removeEventListener('pointerleave', onPointerLeave);

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.js

@@ -144,6 +144,7 @@ const useChartClosestPoint = ({
     const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
       if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -151,6 +152,7 @@ const useChartClosestPoint = ({
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -158,6 +160,7 @@ const useChartClosestPoint = ({
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -166,12 +169,14 @@ const useChartClosestPoint = ({
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (closestPoint === 'outside-chart') {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
         instance.removeTooltipItem?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
@@ -180,6 +185,11 @@ const useChartClosestPoint = ({
         seriesId,
         dataIndex
       } = closestPoint;
+      instance.setHoveredItem?.({
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
       instance.setTooltipItem?.({
         type: 'scatter',
         seriesId,
@@ -192,6 +202,17 @@ const useChartClosestPoint = ({
         dataIndex
       });
     };
+
+    // A tap resolves nothing without a preceding move, and touch has no hover phase, so the
+    // pointer item is also resolved on `pointerdown`.
+    const onPointerDown = function onPointerDown(event) {
+      gestureHandler({
+        detail: {
+          srcEvent: event
+        }
+      });
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     const tapHandler = instance.addInteractionListener('tap', event => {
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (typeof closestPoint !== 'string' && onItemClick) {
@@ -210,6 +231,7 @@ const useChartClosestPoint = ({
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
     const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       tapHandler.cleanup();
       moveHandler.cleanup();
       moveEndHandler.cleanup();

package/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.mjs

@@ -137,6 +137,7 @@ export const useChartClosestPoint = ({
     const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
       if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -144,6 +145,7 @@ export const useChartClosestPoint = ({
     const panEndHandler = instance.addInteractionListener('panEnd', event => {
       if (!event.detail.activeGestures.move) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -151,6 +153,7 @@ export const useChartClosestPoint = ({
     const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
       if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
       }
@@ -159,12 +162,14 @@ export const useChartClosestPoint = ({
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (closestPoint === 'outside-chart') {
         instance.cleanInteraction?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
       }
       if (closestPoint === 'outside-voronoi-max-radius' || closestPoint === 'no-point-found') {
         instance.removeTooltipItem?.();
+        instance.clearHoveredItem?.();
         instance.clearHighlight?.();
         instance.removeTooltipItem?.();
         return;
@@ -173,6 +178,11 @@ export const useChartClosestPoint = ({
         seriesId,
         dataIndex
       } = closestPoint;
+      instance.setHoveredItem?.({
+        type: 'scatter',
+        seriesId,
+        dataIndex
+      });
       instance.setTooltipItem?.({
         type: 'scatter',
         seriesId,
@@ -185,6 +195,17 @@ export const useChartClosestPoint = ({
         dataIndex
       });
     };
+
+    // A tap resolves nothing without a preceding move, and touch has no hover phase, so the
+    // pointer item is also resolved on `pointerdown`.
+    const onPointerDown = function onPointerDown(event) {
+      gestureHandler({
+        detail: {
+          srcEvent: event
+        }
+      });
+    };
+    element.addEventListener('pointerdown', onPointerDown);
     const tapHandler = instance.addInteractionListener('tap', event => {
       const closestPoint = getClosestPoint(event.detail.srcEvent);
       if (typeof closestPoint !== 'string' && onItemClick) {
@@ -203,6 +224,7 @@ export const useChartClosestPoint = ({
     const panHandler = instance.addInteractionListener('pan', gestureHandler);
     const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
+      element.removeEventListener('pointerdown', onPointerDown);
       tapHandler.cleanup();
       moveHandler.cleanup();
       moveEndHandler.cleanup();

package/internals/plugins/featurePlugins/useChartInteraction/useChartInteraction.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useChartInteraction = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 const useChartInteraction = ({
   store
 }) => {
@@ -24,6 +25,28 @@ const useChartInteraction = ({
       }));
     }
   });
+  const setHoveredItem = (0, _useEventCallback.default)(function setHoveredItem(item) {
+    const previousItem = store.state.interaction.hoveredItem;
+    if (previousItem !== null && (0, _fastObjectShallowCompare.fastObjectShallowCompare)(previousItem, item)) {
+      return;
+    }
+    store.set('interaction', (0, _extends2.default)({}, store.state.interaction, {
+      hoveredItem: item
+    }));
+  });
+  const clearHoveredItem = (0, _useEventCallback.default)(function clearHoveredItem(itemToRemove) {
+    const previousItem = store.state.interaction.hoveredItem;
+    if (previousItem === null) {
+      return;
+    }
+    if (itemToRemove !== undefined && !(0, _fastObjectShallowCompare.fastObjectShallowCompare)(previousItem, itemToRemove)) {
+      // Another item took over already.
+      return;
+    }
+    store.set('interaction', (0, _extends2.default)({}, store.state.interaction, {
+      hoveredItem: null
+    }));
+  });
   const setPointerCoordinate = (0, _useEventCallback.default)(function setPointerCoordinate(coordinate) {
     store.set('interaction', (0, _extends2.default)({}, store.state.interaction, {
       pointer: coordinate,
@@ -44,6 +67,8 @@ const useChartInteraction = ({
     instance: {
       cleanInteraction,
       setLastUpdateSource,
+      setHoveredItem,
+      clearHoveredItem,
       setPointerCoordinate,
       handlePointerEnter,
       handlePointerLeave
@@ -56,7 +81,8 @@ useChartInteraction.getInitialState = () => ({
     item: null,
     pointer: null,
     lastUpdate: 'pointer',
-    pointerType: null
+    pointerType: null,
+    hoveredItem: null
   }
 });
 useChartInteraction.params = {};