@mui/x-charts 8.16.0 → 8.17.0

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianHighlight.selectors.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { createSelectorMemoized } from '@mui/x-internals/store';
 import { createSelector } from "../../utils/selectors.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
 import { selectorChartsInteractionXAxisIndex, selectorChartsInteractionXAxisValue, selectorChartsInteractionYAxisIndex, selectorChartsInteractionYAxisValue } from "./useChartCartesianInteraction.selectors.js";
@@ -18,8 +19,8 @@ const selectAxisHighlight = (computedIndex, axis, axisItems, isBrushSelectionAct
     dataIndex: computedIndex
   }];
 };
-export const selectorChartsHighlightXAxisIndex = createSelector([selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
-export const selectorChartsHighlightYAxisIndex = createSelector([selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight], selectAxisHighlight);
+export const selectorChartsHighlightXAxisIndex = createSelectorMemoized(selectorChartsInteractionXAxisIndex, selectorChartXAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight, selectAxisHighlight);
+export const selectorChartsHighlightYAxisIndex = createSelectorMemoized(selectorChartsInteractionYAxisIndex, selectorChartYAxis, selectorChartControlledCartesianAxisHighlight, selectorBrushShouldPreventAxisHighlight, selectAxisHighlight);
 const selectAxisHighlightWithValue = (computedIndex, computedValue, axis, controlledAxisItems, keyboardAxisItem, lastInteractionUpdate, isBrushSelectionActive) => {
   if (isBrushSelectionActive) {
     return [];

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.d.ts

@@ -1,60 +1,44 @@
 import { AxisId, AxisItemIdentifier, ChartsAxisProps } from "../../../../models/axis.js";
 import { ComputeResult } from "./computeAxisValue.js";
 export declare const selectChartsInteractionAxisIndex: (value: number | null, axes: ComputeResult<ChartsAxisProps>, id?: AxisId) => number | null;
-export declare const selectorChartsInteractionXAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionXAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}, id?: AxisId | undefined) => number | null;
+export declare const selectorChartsInteractionYAxisIndex: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, number | null, [id?: AxisId | undefined]>;
-export declare const selectorChartsInteractionYAxisIndex: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+}, id?: AxisId | undefined) => number | null;
+export declare const selectorChartAxisInteraction: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, number | null, [id?: AxisId | undefined]>;
-export declare const selectorChartAxisInteraction: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, {
+}) => {
   axisId: AxisId;
   dataIndex: number;
-}[], any[]>;
+}[];
 /**
  * Get interaction values
  */
 type Value = number | Date | null;
-export declare const selectorChartsInteractionXAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+export declare const selectorChartsInteractionXAxisValue: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, Value, [id?: AxisId | undefined]>;
-export declare const selectorChartsInteractionYAxisValue: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+}, id?: AxisId | undefined) => Value;
+export declare const selectorChartsInteractionYAxisValue: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, Value, [id?: AxisId | undefined]>;
+}, id?: AxisId | undefined) => Value;
 /**
  * Get x-axis ids and corresponding data index that should be display in the tooltip.
  */
-export declare const selectorChartsInteractionTooltipXAxes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+export declare const selectorChartsInteractionTooltipXAxes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], any[]>;
+}) => AxisItemIdentifier[];
 /**
  * Get y-axis ids and corresponding data index that should be display in the tooltip.
  */
-export declare const selectorChartsInteractionTooltipYAxes: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
+export declare const selectorChartsInteractionTooltipYAxes: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, AxisItemIdentifier[], any[]>;
+}) => AxisItemIdentifier[];
 /**
  * Return `true` if the axis tooltip has something to display.
  */
-export declare const selectorChartsInteractionAxisTooltip: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+export declare const selectorChartsInteractionAxisTooltip: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<import("../useChartInteraction/useChartInteraction.types.js").UseChartInteractionState> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("./useChartCartesianAxis.types.js").UseChartCartesianAxisState> & Partial<{}>, boolean, any[]>;
+}) => boolean;
 export {};

package/esm/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors.js

@@ -1,9 +1,9 @@
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { createSelectorMemoizedWithOptions } from '@mui/x-internals/store';
 import { createSelector } from "../../utils/selectors.js";
 import { selectorChartsInteractionPointerX, selectorChartsInteractionPointerY } from "../useChartInteraction/useChartInteraction.selectors.js";
 import { getAxisIndex, getAxisValue } from "./getAxisValue.js";
 import { selectorChartXAxis, selectorChartYAxis } from "./useChartCartesianAxisRendering.selectors.js";
-const optionalGetAxisId = (_, id) => id;
 
 /**
  * Get interaction indexes
@@ -19,8 +19,8 @@ export const selectChartsInteractionAxisIndex = (value, axes, id) => {
   const index = indexGetter(value, axes, id);
   return index === -1 ? null : index;
 };
-export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, optionalGetAxisId], selectChartsInteractionAxisIndex);
-export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, optionalGetAxisId], selectChartsInteractionAxisIndex);
+export const selectorChartsInteractionXAxisIndex = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], selectChartsInteractionAxisIndex);
+export const selectorChartsInteractionYAxisIndex = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], selectChartsInteractionAxisIndex);
 export const selectorChartAxisInteraction = createSelector([selectorChartsInteractionPointerX, selectorChartsInteractionPointerY, selectorChartXAxis, selectorChartYAxis], (x, y, xAxis, yAxis) => [...(x === null ? [] : xAxis.axisIds.map(axisId => ({
   axisId,
   dataIndex: indexGetter(x, xAxis, axisId)
@@ -39,25 +39,33 @@ function valueGetter(value, axes, indexes, ids = axes.axisIds[0]) {
     return getAxisValue(axis.scale, axis.data, value, indexes[axisIndex]);
   }) : getAxisValue(axes.axis[ids].scale, axes.axis[ids].data, value, indexes);
 }
-export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex, optionalGetAxisId], (x, xAxes, xIndex, id) => {
+export const selectorChartsInteractionXAxisValue = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis, selectorChartsInteractionXAxisIndex], (x, xAxes, xIndex, id) => {
   if (x === null || xAxes.axisIds.length === 0) {
     return null;
   }
   return valueGetter(x, xAxes, xIndex, id);
 });
-export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex, optionalGetAxisId], (y, yAxes, yIndex, id) => {
+export const selectorChartsInteractionYAxisValue = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis, selectorChartsInteractionYAxisIndex], (y, yAxes, yIndex, id) => {
   if (y === null || yAxes.axisIds.length === 0) {
     return null;
   }
   return valueGetter(y, yAxes, yIndex, id);
 });
+const EMPTY_ARRAY = [];
 
 /**
  * Get x-axis ids and corresponding data index that should be display in the tooltip.
  */
-export const selectorChartsInteractionTooltipXAxes = createSelector([selectorChartsInteractionPointerX, selectorChartXAxis], (value, axes) => {
+export const selectorChartsInteractionTooltipXAxes = createSelectorMemoizedWithOptions({
+  memoizeOptions: {
+    // Keep the same reference if array content is the same.
+    // If possible, avoid this pattern by creating selectors that
+    // uses string/number as arguments.
+    resultEqualityCheck: isDeepEqual
+  }
+})(selectorChartsInteractionPointerX, selectorChartXAxis, (value, axes) => {
   if (value === null) {
-    return [];
+    return EMPTY_ARRAY;
   }
   return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
     axisId,
@@ -65,21 +73,21 @@ export const selectorChartsInteractionTooltipXAxes = createSelector([selectorCha
   })).filter(({
     dataIndex
   }) => dataIndex >= 0);
-}, {
+});
+
+/**
+ * Get y-axis ids and corresponding data index that should be display in the tooltip.
+ */
+export const selectorChartsInteractionTooltipYAxes = createSelectorMemoizedWithOptions({
   memoizeOptions: {
     // Keep the same reference if array content is the same.
     // If possible, avoid this pattern by creating selectors that
     // uses string/number as arguments.
     resultEqualityCheck: isDeepEqual
   }
-});
-
-/**
- * Get y-axis ids and corresponding data index that should be display in the tooltip.
- */
-export const selectorChartsInteractionTooltipYAxes = createSelector([selectorChartsInteractionPointerY, selectorChartYAxis], (value, axes) => {
+})(selectorChartsInteractionPointerY, selectorChartYAxis, (value, axes) => {
   if (value === null) {
-    return [];
+    return EMPTY_ARRAY;
   }
   return axes.axisIds.filter(id => axes.axis[id].triggerTooltip).map(axisId => ({
     axisId,
@@ -87,13 +95,6 @@ export const selectorChartsInteractionTooltipYAxes = createSelector([selectorCha
   })).filter(({
     dataIndex
   }) => dataIndex >= 0);
-}, {
-  memoizeOptions: {
-    // Keep the same reference if array content is the same.
-    // If possible, avoid this pattern by creating selectors that
-    // uses string/number as arguments.
-    resultEqualityCheck: isDeepEqual
-  }
 });
 
 /**

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

@@ -39,11 +39,9 @@ export const useChartClosestPoint = ({
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   useEnhancedEffect(() => {
-    store.update(prev => prev.voronoi.isVoronoiEnabled === !disableVoronoi ? prev : _extends({}, prev, {
-      voronoi: {
-        isVoronoiEnabled: !disableVoronoi
-      }
-    }));
+    store.set('voronoi', {
+      isVoronoiEnabled: !disableVoronoi
+    });
   }, [store, disableVoronoi]);
   React.useEffect(() => {
     if (svgRef.current === null || disableVoronoi) {
@@ -176,18 +174,14 @@ export const useChartClosestPoint = ({
 
   // Instance implementation
   const enableVoronoiCallback = useEventCallback(() => {
-    store.update(prev => _extends({}, prev, {
-      voronoi: _extends({}, prev.voronoi, {
-        isVoronoiEnabled: true
-      })
-    }));
+    store.set('voronoi', {
+      isVoronoiEnabled: true
+    });
   });
   const disableVoronoiCallback = useEventCallback(() => {
-    store.update(prev => _extends({}, prev, {
-      voronoi: _extends({}, prev.voronoi, {
-        isVoronoiEnabled: false
-      })
-    }));
+    store.set('voronoi', {
+      isVoronoiEnabled: false
+    });
   });
   return {
     instance: {

package/esm/internals/plugins/featurePlugins/useChartClosestPoint/useChartClosestPoint.selectors.d.ts

@@ -1,5 +1,3 @@
-export declare const selectorChartsIsVoronoiEnabled: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartClosestPoint.types.js").UseChartVoronoiState & Partial<{}> & {
+export declare const selectorChartsIsVoronoiEnabled: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartClosestPoint.types.js").UseChartVoronoiState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
-  cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, boolean | undefined, any[]>;
+}) => boolean | undefined;

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.js

@@ -15,11 +15,11 @@ export const useChartHighlight = ({
     defaultValue: null
   });
   useEnhancedEffect(() => {
-    store.update(prevState => prevState.highlight.item === params.highlightedItem ? prevState : _extends({}, prevState, {
-      highlight: _extends({}, prevState.highlight, {
+    if (store.state.highlight.item !== params.highlightedItem) {
+      store.set('highlight', _extends({}, store.state.highlight, {
         item: params.highlightedItem
-      })
-    }));
+      }));
+    }
   }, [store, params.highlightedItem]);
   const clearHighlight = useEventCallback(() => {
     params.onHighlightChange?.(null);
@@ -27,12 +27,10 @@ export const useChartHighlight = ({
     if (prevItem === null) {
       return;
     }
-    store.update(prev => _extends({}, prev, {
-      highlight: {
-        item: null,
-        lastUpdate: 'pointer'
-      }
-    }));
+    store.set('highlight', {
+      item: null,
+      lastUpdate: 'pointer'
+    });
   });
   const setHighlight = useEventCallback(newItem => {
     const prevItem = store.getSnapshot().highlight.item;
@@ -40,12 +38,10 @@ export const useChartHighlight = ({
       return;
     }
     params.onHighlightChange?.(newItem);
-    store.update(prev => _extends({}, prev, {
-      highlight: {
-        item: newItem,
-        lastUpdate: 'pointer'
-      }
-    }));
+    store.set('highlight', {
+      item: newItem,
+      lastUpdate: 'pointer'
+    });
   });
   return {
     instance: {

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.d.ts

@@ -1,34 +1,36 @@
 import { SeriesId } from "../../../../models/seriesType/common.js";
 import { HighlightItemData } from "./useChartHighlight.types.js";
 import { HighlightScope } from "./highlightConfig.types.js";
-export declare const selectorChartsHighlightScopePerSeriesId: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+export declare const selectorChartsHighlightScopePerSeriesId: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}) => Map<SeriesId, Partial<HighlightScope> | undefined>;
+export declare const selectorChartsHighlightedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, Map<SeriesId, Partial<HighlightScope> | undefined>, any[]>;
-export declare const selectorChartsHighlightedItem: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+}) => HighlightItemData | null;
+export declare const selectorChartsHighlightScope: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState> & {
+}) => Partial<HighlightScope> | null;
+export declare const selectorChartsIsHighlightedCallback: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-}, HighlightItemData | null, any[]>;
-export declare const selectorChartsHighlightScope: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+}) => (item: HighlightItemData | null) => boolean;
+export declare const selectorChartsIsFadedCallback: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}) => (item: HighlightItemData | null) => boolean;
+export declare const selectorChartsIsHighlighted: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, Partial<HighlightScope> | null, any[]>;
-export declare const selectorChartsIsHighlightedCallback: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+}, item: HighlightItemData | null) => boolean;
+export declare const selectorChartIsSeriesHighlighted: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}, seriesId: SeriesId) => boolean;
+export declare const selectorChartIsSeriesFaded: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
-export declare const selectorChartsIsFadedCallback: import("reselect").Selector<import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & Partial<{}> & {
+}, seriesId: SeriesId) => boolean;
+export declare const selectorChartSeriesUnfadedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & {
+}, seriesId: SeriesId) => number | null | undefined;
+export declare const selectorChartSeriesHighlightedItem: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
   cacheKey: import("../../models/index.js").ChartStateCacheKey;
-} & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<import("../useChartKeyboardNavigation/useChartKeyboardNavigation.types.js").UseChartKeyboardNavigationState>, (item: HighlightItemData | null) => boolean, any[]>;
-export declare const selectorChartsIsHighlighted: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
-export declare const selectorChartIsSeriesHighlighted: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
-export declare const selectorChartIsSeriesFaded: import("reselect").Selector<any, boolean, [seriesId: SeriesId]>;
-export declare const selectorChartSeriesUnfadedItem: import("reselect").Selector<any, number | null | undefined, [seriesId: SeriesId]>;
-export declare const selectorChartSeriesHighlightedItem: import("reselect").Selector<any, number | null | undefined, [seriesId: SeriesId]>;
-export declare const selectorChartsIsFaded: import("reselect").Selector<any, boolean, [item: HighlightItemData | null]>;
+}, seriesId: SeriesId) => number | null | undefined;
+export declare const selectorChartsIsFaded: (args_0: import("../../corePlugins/useChartId/useChartId.types.js").UseChartIdState & import("../../corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types.js").UseChartExperimentalFeaturesState & import("../../corePlugins/useChartDimensions/useChartDimensions.types.js").UseChartDimensionsState & import("../../corePlugins/useChartSeries/useChartSeries.types.js").UseChartSeriesState<keyof import("../../../index.js").ChartsSeriesConfig> & import("../../corePlugins/useChartAnimation/useChartAnimation.types.js").UseChartAnimationState & import("../../../index.js").UseChartInteractionListenerState & import("./useChartHighlight.types.js").UseChartHighlightState & Partial<{}> & {
+  cacheKey: import("../../models/index.js").ChartStateCacheKey;
+}, item: HighlightItemData | null) => boolean;

package/esm/internals/plugins/featurePlugins/useChartHighlight/useChartHighlight.selectors.js

@@ -1,3 +1,4 @@
+import { createSelectorMemoized } from '@mui/x-internals/store';
 import { createSelector } from "../../utils/selectors.js";
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { createIsFaded } from "./createIsFaded.js";
@@ -16,7 +17,7 @@ export const selectorChartsHighlightScopePerSeriesId = createSelector([selectSer
   });
   return map;
 });
-export const selectorChartsHighlightedItem = createSelector([selectHighlight, selectorChartsKeyboardItem], function selectorChartsHighlightedItem(highlight, keyboardItem) {
+export const selectorChartsHighlightedItem = createSelectorMemoized(selectHighlight, selectorChartsKeyboardItem, function selectorChartsHighlightedItem(highlight, keyboardItem) {
   return highlight.lastUpdate === 'pointer' ? highlight.item : keyboardItem;
 });
 export const selectorChartsHighlightScope = createSelector([selectorChartsHighlightScopePerSeriesId, selectorChartsHighlightedItem], function selectorChartsHighlightScope(seriesIdToHighlightScope, highlightedItem) {
@@ -31,13 +32,13 @@ export const selectorChartsHighlightScope = createSelector([selectorChartsHighli
 });
 export const selectorChartsIsHighlightedCallback = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], createIsHighlighted);
 export const selectorChartsIsFadedCallback = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], createIsFaded);
-export const selectorChartsIsHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
+export const selectorChartsIsHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], function selectorChartsIsHighlighted(highlightScope, highlightedItem, item) {
   return createIsHighlighted(highlightScope, highlightedItem)(item);
 });
-export const selectorChartIsSeriesHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], isSeriesHighlighted);
-export const selectorChartIsSeriesFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], isSeriesFaded);
-export const selectorChartSeriesUnfadedItem = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], getSeriesUnfadedItem);
-export const selectorChartSeriesHighlightedItem = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, seriesId) => seriesId], getSeriesHighlightedItem);
-export const selectorChartsIsFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem, (_, item) => item], function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
+export const selectorChartIsSeriesHighlighted = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], isSeriesHighlighted);
+export const selectorChartIsSeriesFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], isSeriesFaded);
+export const selectorChartSeriesUnfadedItem = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], getSeriesUnfadedItem);
+export const selectorChartSeriesHighlightedItem = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], getSeriesHighlightedItem);
+export const selectorChartsIsFaded = createSelector([selectorChartsHighlightScope, selectorChartsHighlightedItem], function selectorChartsIsFaded(highlightScope, highlightedItem, item) {
   return createIsFaded(highlightScope, highlightedItem)(item);
 });

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

@@ -5,56 +5,42 @@ export const useChartInteraction = ({
   store
 }) => {
   const cleanInteraction = useEventCallback(function cleanInteraction() {
-    store.update(prev => {
-      return _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          pointer: null,
-          item: null
-        })
-      });
-    });
+    store.set('interaction', _extends({}, store.state.interaction, {
+      pointer: null,
+      item: null
+    }));
   });
   const removeItemInteraction = useEventCallback(function removeItemInteraction(itemToRemove) {
-    store.update(prev => {
-      const prevItem = prev.interaction.item;
-      if (!itemToRemove) {
-        // Remove without taking care of the current item
-        return prevItem === null ? prev : _extends({}, prev, {
-          interaction: _extends({}, prev.interaction, {
-            item: null
-          })
-        });
-      }
-      if (prevItem === null || Object.keys(itemToRemove).some(key => itemToRemove[key] !== prevItem[key])) {
-        // The current item is already different from the one to remove. No need to clean it.
-        return prev;
-      }
-      return _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
+    const prevItem = store.state.interaction.item;
+    if (!itemToRemove) {
+      // Remove without taking care of the current item
+      if (prevItem !== null) {
+        store.set('interaction', _extends({}, store.state.interaction, {
           item: null
-        })
-      });
-    });
+        }));
+      }
+      return;
+    }
+    if (prevItem === null || Object.keys(itemToRemove).some(key => itemToRemove[key] !== prevItem[key])) {
+      // The current item is already different from the one to remove. No need to clean it.
+      return;
+    }
+    store.set('interaction', _extends({}, store.state.interaction, {
+      item: null
+    }));
   });
   const setItemInteraction = useEventCallback(function setItemInteraction(newItem, context) {
-    store.update(prev => {
-      if (fastObjectShallowCompare(prev.interaction.item, newItem)) {
-        return prev;
-      }
-      return _extends({}, prev, {
-        interaction: _extends({}, prev.interaction, {
-          lastUpdate: context.interaction,
-          item: newItem
-        })
-      });
-    });
+    if (!fastObjectShallowCompare(store.state.interaction.item, newItem)) {
+      store.set('interaction', _extends({}, store.state.interaction, {
+        lastUpdate: context.interaction,
+        item: newItem
+      }));
+    }
   });
   const setPointerCoordinate = useEventCallback(function setPointerCoordinate(coordinate) {
-    store.update(prev => _extends({}, prev, {
-      interaction: _extends({}, prev.interaction, {
-        pointer: coordinate,
-        lastUpdate: coordinate !== null ? 'pointer' : prev.interaction.lastUpdate
-      })
+    store.set('interaction', _extends({}, store.state.interaction, {
+      pointer: coordinate,
+      lastUpdate: coordinate !== null ? 'pointer' : store.state.interaction.lastUpdate
     }));
   });
   return {