@mui/x-charts 8.11.3 → 8.13.0

package/esm/locales/utils/getChartsLocalization.d.ts

@@ -16,6 +16,102 @@ export declare const getChartsLocalization: (chartsTranslations: Partial<ChartsL
           toolbarExport?: string | undefined;
           toolbarExportPrint?: string | undefined;
           toolbarExportImage?: ((mimeType: import("./imageMimeTypes.js").ChartImageExportMimeType | (string & {})) => string) | undefined;
+          chartTypeBar?: string | undefined;
+          chartTypeColumn?: string | undefined;
+          chartTypeLine?: string | undefined;
+          chartTypeArea?: string | undefined;
+          chartTypePie?: string | undefined;
+          chartPaletteLabel?: string | undefined;
+          chartPaletteNameRainbowSurge?: string | undefined;
+          chartPaletteNameBlueberryTwilight?: string | undefined;
+          chartPaletteNameMangoFusion?: string | undefined;
+          chartPaletteNameCheerfulFiesta?: string | undefined;
+          chartPaletteNameStrawberrySky?: string | undefined;
+          chartPaletteNameBlue?: string | undefined;
+          chartPaletteNameGreen?: string | undefined;
+          chartPaletteNamePurple?: string | undefined;
+          chartPaletteNameRed?: string | undefined;
+          chartPaletteNameOrange?: string | undefined;
+          chartPaletteNameYellow?: string | undefined;
+          chartPaletteNameCyan?: string | undefined;
+          chartPaletteNamePink?: string | undefined;
+          chartConfigurationSectionChart?: string | undefined;
+          chartConfigurationSectionAxes?: string | undefined;
+          chartConfigurationSectionTooltip?: string | undefined;
+          chartConfigurationSectionLegend?: string | undefined;
+          chartConfigurationSectionColumns?: string | undefined;
+          chartConfigurationSectionBars?: string | undefined;
+          chartConfigurationSectionLines?: string | undefined;
+          chartConfigurationSectionAreas?: string | undefined;
+          chartConfigurationSectionArcs?: string | undefined;
+          chartConfigurationGrid?: string | undefined;
+          chartConfigurationBorderRadius?: string | undefined;
+          chartConfigurationCategoryGapRatio?: string | undefined;
+          chartConfigurationBarGapRatio?: string | undefined;
+          chartConfigurationStacked?: string | undefined;
+          chartConfigurationShowToolbar?: string | undefined;
+          chartConfigurationSkipAnimation?: string | undefined;
+          chartConfigurationInnerRadius?: string | undefined;
+          chartConfigurationOuterRadius?: string | undefined;
+          chartConfigurationColors?: string | undefined;
+          chartConfigurationHideLegend?: string | undefined;
+          chartConfigurationShowMark?: string | undefined;
+          chartConfigurationHeight?: string | undefined;
+          chartConfigurationWidth?: string | undefined;
+          chartConfigurationSeriesGap?: string | undefined;
+          chartConfigurationTickPlacement?: string | undefined;
+          chartConfigurationTickLabelPlacement?: string | undefined;
+          chartConfigurationCategoriesAxisLabel?: string | undefined;
+          chartConfigurationSeriesAxisLabel?: string | undefined;
+          chartConfigurationXAxisPosition?: string | undefined;
+          chartConfigurationYAxisPosition?: string | undefined;
+          chartConfigurationSeriesAxisReverse?: string | undefined;
+          chartConfigurationTooltipPlacement?: string | undefined;
+          chartConfigurationTooltipTrigger?: string | undefined;
+          chartConfigurationLegendPosition?: string | undefined;
+          chartConfigurationLegendDirection?: string | undefined;
+          chartConfigurationBarLabels?: string | undefined;
+          chartConfigurationColumnLabels?: string | undefined;
+          chartConfigurationInterpolation?: string | undefined;
+          chartConfigurationPaddingAngle?: string | undefined;
+          chartConfigurationCornerRadius?: string | undefined;
+          chartConfigurationArcLabels?: string | undefined;
+          chartConfigurationStartAngle?: string | undefined;
+          chartConfigurationEndAngle?: string | undefined;
+          chartConfigurationPieTooltipTrigger?: string | undefined;
+          chartConfigurationPieLegendPosition?: string | undefined;
+          chartConfigurationPieLegendDirection?: string | undefined;
+          chartConfigurationOptionNone?: string | undefined;
+          chartConfigurationOptionValue?: string | undefined;
+          chartConfigurationOptionAuto?: string | undefined;
+          chartConfigurationOptionTop?: string | undefined;
+          chartConfigurationOptionTopLeft?: string | undefined;
+          chartConfigurationOptionTopRight?: string | undefined;
+          chartConfigurationOptionBottom?: string | undefined;
+          chartConfigurationOptionBottomLeft?: string | undefined;
+          chartConfigurationOptionBottomRight?: string | undefined;
+          chartConfigurationOptionLeft?: string | undefined;
+          chartConfigurationOptionRight?: string | undefined;
+          chartConfigurationOptionAxis?: string | undefined;
+          chartConfigurationOptionItem?: string | undefined;
+          chartConfigurationOptionHorizontal?: string | undefined;
+          chartConfigurationOptionVertical?: string | undefined;
+          chartConfigurationOptionBoth?: string | undefined;
+          chartConfigurationOptionStart?: string | undefined;
+          chartConfigurationOptionMiddle?: string | undefined;
+          chartConfigurationOptionEnd?: string | undefined;
+          chartConfigurationOptionExtremities?: string | undefined;
+          chartConfigurationOptionTick?: string | undefined;
+          chartConfigurationOptionMonotoneX?: string | undefined;
+          chartConfigurationOptionMonotoneY?: string | undefined;
+          chartConfigurationOptionCatmullRom?: string | undefined;
+          chartConfigurationOptionLinear?: string | undefined;
+          chartConfigurationOptionNatural?: string | undefined;
+          chartConfigurationOptionStep?: string | undefined;
+          chartConfigurationOptionStepBefore?: string | undefined;
+          chartConfigurationOptionStepAfter?: string | undefined;
+          chartConfigurationOptionBumpX?: string | undefined;
+          chartConfigurationOptionBumpY?: string | undefined;
         };
       };
     };

package/esm/plugins/index.d.ts

@@ -0,0 +1,6 @@
+export { useChartCartesianAxis, type UseChartCartesianAxisSignature } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+export { useChartHighlight, type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export { useChartInteraction, type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+export { useChartPolarAxis, type UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+export { useChartClosestPoint, type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+export { useChartZAxis, type UseChartZAxisSignature } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";

package/esm/plugins/index.js

@@ -0,0 +1,12 @@
+// Core plugins
+
+// We don't export the core plugins since they are run in the useCharts() in any case.
+// Plus there is a naming conflict with `useChartId()`: The plugin managing chart id, or the hook used to retrieve this same id.
+
+// Feature plugins
+export { useChartCartesianAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+export { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export { useChartInteraction } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+export { useChartPolarAxis } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+export { useChartClosestPoint } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
+export { useChartZAxis } from "../internals/plugins/featurePlugins/useChartZAxis/index.js";

package/hooks/useAxis.d.ts

@@ -1,4 +1,4 @@
-import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName } from "../models/axis.js";
+import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaultized, ScaleName, type AxisScaleConfig, type ChartsXAxisProps, type ChartsYAxisProps, type ComputedAxis } from "../models/axis.js";
 /**
  * Get all the x-axes.
  *
@@ -10,7 +10,7 @@ import { AxisId, ChartsRadiusAxisProps, ChartsRotationAxisProps, PolarAxisDefaul
  * @returns `{ xAxis, xAxisIds }` - The x-axes and their IDs.
  */
 export declare function useXAxes(): {
-  xAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsXAxisProps>;
+  xAxis: import("../internals/index.js").ComputedAxisConfig<ChartsXAxisProps>;
   xAxisIds: AxisId[];
 };
 /**
@@ -24,7 +24,7 @@ export declare function useXAxes(): {
  * @returns `{ yAxis, yAxisIds }` - The y-axes and their IDs.
  */
 export declare function useYAxes(): {
-  yAxis: import("../internals/index.js").ComputedAxisConfig<import("../index.js").ChartsYAxisProps>;
+  yAxis: import("../internals/index.js").ComputedAxisConfig<ChartsYAxisProps>;
   yAxisIds: AxisId[];
 };
 /**
@@ -32,13 +32,13 @@ export declare function useYAxes(): {
  * @param {AxisId | undefined} axisId - If provided returns the x axis with axisId, else returns the values for the default x axis.
  * @returns The X axis.
  */
-export declare function useXAxis(axisId?: AxisId): import("../internals/index.js").ComputedAxis<keyof import("../internals/index.js").AxisScaleConfig, any, import("../index.js").ChartsXAxisProps>;
+export declare function useXAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsXAxisProps>;
 /**
  * Get the Y axis.
  * @param {AxisId | undefined} axisId - If provided returns the y axis with axisId, else returns the values for the default y axis.
  * @returns The Y axis.
  */
-export declare function useYAxis(axisId?: AxisId): import("../internals/index.js").ComputedAxis<keyof import("../internals/index.js").AxisScaleConfig, any, import("../index.js").ChartsYAxisProps>;
+export declare function useYAxis<T extends keyof AxisScaleConfig>(axisId?: AxisId): ComputedAxis<T, any, ChartsYAxisProps>;
 export declare function useRotationAxes(): {
   rotationAxis: import("../internals/plugins/featurePlugins/useChartPolarAxis/computeAxisValue.js").DefaultizedAxisConfig<ChartsRotationAxisProps>;
   rotationAxisIds: string[];

package/hooks/useDrawingArea.d.ts

@@ -1,9 +1,27 @@
 export type ChartDrawingArea = {
-  top: number;
+  /**
+   * The gap between the left border of the SVG and the drawing area.
+   */
   left: number;
-  right: number;
+  /**
+   * The gap between the top border of the SVG and the drawing area.
+   */
+  top: number;
+  /**
+   * The gap between the bottom border of the SVG and the drawing area.
+   */
   bottom: number;
+  /**
+   * The gap between the right border of the SVG and the drawing area.
+   */
+  right: number;
+  /**
+   * The width of the drawing area.
+   */
   width: number;
+  /**
+   * The height of the drawing area.
+   */
   height: number;
 };
 /**

package/hooks/useFocusedItem.d.ts

@@ -0,0 +1,15 @@
+import { ChartSeriesType } from "../models/seriesType/config.js";
+import { SeriesId } from "../models/seriesType/common.js";
+export type FocusedItemData = {
+  seriesType: ChartSeriesType;
+  seriesId: SeriesId;
+  dataIndex: number;
+};
+/**
+ * Get the focused item from keyboard navigation.
+ */
+export declare function useFocusedItem(): {
+  seriesType: keyof import("../internals/index.js").ChartsSeriesConfig;
+  seriesId: SeriesId;
+  dataIndex: number;
+} | null;

package/hooks/useFocusedItem.js

@@ -0,0 +1,26 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusedItem = useFocusedItem;
+var React = _interopRequireWildcard(require("react"));
+var _useStore = require("../internals/store/useStore");
+var _useSelector = require("../internals/store/useSelector");
+var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
+/**
+ * Get the focused item from keyboard navigation.
+ */
+function useFocusedItem() {
+  const store = (0, _useStore.useStore)();
+  const focusedSeriesType = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedSeriesType);
+  const focusedSeriesId = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedSeriesId);
+  const focusedDataIndex = (0, _useSelector.useSelector)(store, _useChartKeyboardNavigation.selectorChartsFocusedDataIndex);
+  return React.useMemo(() => focusedSeriesType === undefined || focusedSeriesId === undefined || focusedDataIndex === undefined ? null : {
+    seriesType: focusedSeriesType,
+    seriesId: focusedSeriesId,
+    dataIndex: focusedDataIndex
+  }, [focusedSeriesType, focusedSeriesId, focusedDataIndex]);
+}

package/hooks/useIsItemFocused.d.ts

@@ -0,0 +1,12 @@
+import { FocusedItemData } from "./useFocusedItem.js";
+type UseItemFocusedParams = FocusedItemData;
+/**
+ * A hook to check if an item has the focus.
+ *
+ * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
+ *
+ * @param {FocusedItemData} item is the item to check
+ * @returns {boolean} the focus state
+ */
+export declare function useIsItemFocused(item: UseItemFocusedParams): boolean;
+export {};

package/hooks/useIsItemFocused.js

@@ -0,0 +1,20 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsItemFocused = useIsItemFocused;
+var _useFocusedItem = require("./useFocusedItem");
+/**
+ * A hook to check if an item has the focus.
+ *
+ * If you need to process multiple points, use the `useIsItemFocusedGetter` hook instead.
+ *
+ * @param {FocusedItemData} item is the item to check
+ * @returns {boolean} the focus state
+ */
+function useIsItemFocused(item) {
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  return focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/hooks/useIsItemFocusedGetter.d.ts

@@ -0,0 +1,8 @@
+import { FocusedItemData } from "./useFocusedItem.js";
+/**
+ * A hook to check focus state of multiple items.
+ * If you're interested by a single one, consider using `useIsItemFocused`.
+ *
+ * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
+ */
+export declare function useIsItemFocusedGetter(): (item: FocusedItemData) => boolean;

package/hooks/useIsItemFocusedGetter.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsItemFocusedGetter = useIsItemFocusedGetter;
+var _useFocusedItem = require("./useFocusedItem");
+/**
+ * A hook to check focus state of multiple items.
+ * If you're interested by a single one, consider using `useIsItemFocused`.
+ *
+ * @returns {(item: FocusedItemData) => boolean} callback to get the state of the item.
+ */
+function useIsItemFocusedGetter() {
+  const focusedItem = (0, _useFocusedItem.useFocusedItem)();
+  return item => focusedItem !== null && focusedItem.seriesType === item.seriesType && focusedItem.seriesId === item.seriesId && focusedItem.dataIndex === item.dataIndex;
+}

package/hooks/useScale.js

@@ -21,6 +21,12 @@ function getValueToPositionMapper(scale) {
   if ((0, _scaleGuards.isOrdinalScale)(scale)) {
     return value => (scale(value) ?? 0) + scale.bandwidth() / 2;
   }
+  const domain = scale.domain();
+
+  // Fixes https://github.com/mui/mui-x/issues/18999#issuecomment-3173787401
+  if (domain[0] === domain[1]) {
+    return value => value === domain[0] ? scale(value) : NaN;
+  }
   return value => scale(value);
 }
 

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./constants/index.js";
 export * from "./context/index.js";
 export * from "./hooks/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./models/index.js";
 export * from "./ChartsClipPath/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v8.11.3
+ * @mui/x-charts v8.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -55,6 +55,18 @@ Object.keys(_hooks).forEach(function (key) {
     }
   });
 });
+var _plugins = require("./plugins");
+Object.keys(_plugins).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _plugins[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _plugins[key];
+    }
+  });
+});
 var _colorPalettes = require("./colorPalettes");
 Object.keys(_colorPalettes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/animation/Transition.js

@@ -55,7 +55,6 @@ class Transition {
     /* If we're resuming the transition, then subtract elapsed to continue the easing. */
     const time = (0, _d3Timer.now)() - this.elapsed;
     this.timer = (0, _d3Timer.timer)(elapsed => this.timerCallback(elapsed), 0, time);
-    (0, _d3Timer.timerFlush)();
     return this;
   }
 
@@ -79,7 +78,6 @@ class Transition {
   finish() {
     this.stop();
     (0, _d3Timer.timeout)(() => this.timerCallback(this.duration));
-    (0, _d3Timer.timerFlush)();
     return this;
   }
 }

package/internals/index.d.ts

@@ -25,7 +25,8 @@ export * from "./plugins/featurePlugins/useChartCartesianAxis/index.js";
 export * from "./plugins/featurePlugins/useChartPolarAxis/index.js";
 export * from "./plugins/featurePlugins/useChartInteraction/index.js";
 export * from "./plugins/featurePlugins/useChartHighlight/index.js";
-export * from "./plugins/featurePlugins/useChartVoronoi/index.js";
+export * from "./plugins/featurePlugins/useChartKeyboardNavigation/index.js";
+export * from "./plugins/featurePlugins/useChartClosestPoint/index.js";
 export * from "./plugins/utils/selectors.js";
 export { getAxisTriggerTooltip as getCartesianAxisTriggerTooltip } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisTriggerTooltip.js";
 export { getAxisIndex as getCartesianAxisIndex } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisValue.js";
@@ -54,7 +55,7 @@ export * from "./dateHelpers.js";
 export * from "./invertScale.js";
 export * from "./scaleGuards.js";
 export * from "./findMinMax.js";
-export { getAxisExtremum } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum.js";
+export { getAxisExtrema } from "./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema.js";
 export * from "../context/ChartProvider/index.js";
 export * from "../context/ChartsSlotsContext.js";
 export * from "../models/seriesType/config.js";

package/internals/index.js

@@ -18,12 +18,12 @@ var _exportNames = {
   useRadarChartProps: true,
   getCartesianAxisTriggerTooltip: true,
   getCartesianAxisIndex: true,
-  getAxisExtremum: true
+  getAxisExtrema: true
 };
-Object.defineProperty(exports, "getAxisExtremum", {
+Object.defineProperty(exports, "getAxisExtrema", {
   enumerable: true,
   get: function () {
-    return _getAxisExtremum.getAxisExtremum;
+    return _getAxisExtrema.getAxisExtrema;
   }
 });
 Object.defineProperty(exports, "getCartesianAxisIndex", {
@@ -302,15 +302,27 @@ Object.keys(_useChartHighlight).forEach(function (key) {
     }
   });
 });
-var _useChartVoronoi = require("./plugins/featurePlugins/useChartVoronoi");
-Object.keys(_useChartVoronoi).forEach(function (key) {
+var _useChartKeyboardNavigation = require("./plugins/featurePlugins/useChartKeyboardNavigation");
+Object.keys(_useChartKeyboardNavigation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useChartVoronoi[key]) return;
+  if (key in exports && exports[key] === _useChartKeyboardNavigation[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useChartVoronoi[key];
+      return _useChartKeyboardNavigation[key];
+    }
+  });
+});
+var _useChartClosestPoint = require("./plugins/featurePlugins/useChartClosestPoint");
+Object.keys(_useChartClosestPoint).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useChartClosestPoint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartClosestPoint[key];
     }
   });
 });
@@ -628,7 +640,7 @@ Object.keys(_findMinMax).forEach(function (key) {
     }
   });
 });
-var _getAxisExtremum = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtremum");
+var _getAxisExtrema = require("./plugins/featurePlugins/useChartCartesianAxis/getAxisExtrema");
 var _ChartProvider = require("../context/ChartProvider");
 Object.keys(_ChartProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/internals/plugins/allPlugins.d.ts

@@ -2,9 +2,10 @@ import { ChartSeriesType } from "../../models/seriesType/config.js";
 import { UseChartCartesianAxisSignature } from "./featurePlugins/useChartCartesianAxis/index.js";
 import { UseChartHighlightSignature } from "./featurePlugins/useChartHighlight/index.js";
 import { UseChartInteractionSignature } from "./featurePlugins/useChartInteraction/index.js";
+import { UseChartKeyboardNavigationSignature } from "./featurePlugins/useChartKeyboardNavigation/index.js";
 import { UseChartPolarAxisSignature } from "./featurePlugins/useChartPolarAxis/index.js";
-import { UseChartVoronoiSignature } from "./featurePlugins/useChartVoronoi/index.js";
+import { UseChartClosestPointSignature } from "./featurePlugins/useChartClosestPoint/index.js";
 import { UseChartZAxisSignature } from "./featurePlugins/useChartZAxis/index.js";
-export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
-export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature];
-export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartVoronoiSignature>];
+export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+export declare const DEFAULT_PLUGINS: readonly [import("./models/index.js").ChartPlugin<UseChartZAxisSignature>, import("./models/index.js").ChartPlugin<UseChartCartesianAxisSignature<any>>, import("./models/index.js").ChartPlugin<UseChartInteractionSignature>, import("./models/index.js").ChartPlugin<UseChartHighlightSignature>, import("./models/index.js").ChartPlugin<UseChartClosestPointSignature>, import("./models/index.js").ChartPlugin<UseChartKeyboardNavigationSignature>];

package/internals/plugins/allPlugins.js

@@ -7,8 +7,9 @@ exports.DEFAULT_PLUGINS = void 0;
 var _useChartCartesianAxis = require("./featurePlugins/useChartCartesianAxis");
 var _useChartHighlight = require("./featurePlugins/useChartHighlight");
 var _useChartInteraction = require("./featurePlugins/useChartInteraction");
-var _useChartVoronoi = require("./featurePlugins/useChartVoronoi");
+var _useChartKeyboardNavigation = require("./featurePlugins/useChartKeyboardNavigation");
+var _useChartClosestPoint = require("./featurePlugins/useChartClosestPoint");
 var _useChartZAxis = require("./featurePlugins/useChartZAxis");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartVoronoi.useChartVoronoi];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartCartesianAxis.useChartCartesianAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartClosestPoint.useChartClosestPoint, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/internals/plugins/corePlugins/useChartInteractionListener/useChartInteractionListener.js

@@ -12,43 +12,62 @@ const preventDefault = event => event.preventDefault();
 const useChartInteractionListener = ({
   svgRef
 }) => {
+  const gestureManagerRef = React.useRef(null);
   React.useEffect(() => {
     const svg = svgRef.current;
-    if (!svg) {
+    if (!gestureManagerRef.current) {
+      gestureManagerRef.current = new _core.GestureManager({
+        gestures: [
+        // We separate the zoom gestures from the gestures that are not zoom related
+        // This allows us to configure the zoom gestures based on the zoom configuration.
+        new _core.PanGesture({
+          name: 'pan',
+          threshold: 0,
+          maxPointers: 1
+        }), new _core.PanGesture({
+          name: 'zoomPan',
+          threshold: 0,
+          maxPointers: 1,
+          preventIf: ['zoomTapAndDrag']
+        }), new _core.MoveGesture({
+          name: 'move',
+          preventIf: ['pan', 'zoomPinch', 'zoomPan'] // Prevent move gesture when pan is active
+        }), new _core.PinchGesture({
+          name: 'zoomPinch',
+          threshold: 5,
+          preventIf: ['pan', 'zoomPan']
+        }), new _core.TurnWheelGesture({
+          name: 'zoomTurnWheel',
+          sensitivity: 0.01,
+          initialDelta: 1
+        }), new _core.TapGesture({
+          name: 'tap',
+          maxDistance: 10,
+          preventIf: ['pan', 'zoomPan', 'zoomPinch']
+        }), new _core.PressGesture({
+          name: 'quickPress',
+          duration: 50,
+          maxDistance: 10
+        }), new _core.TapAndDragGesture({
+          name: 'zoomTapAndDrag',
+          tapMaxDistance: 10,
+          dragThreshold: 10,
+          dragTimeout: 1000
+        })]
+      });
+    }
+
+    // Assign gesture manager after initialization
+    const gestureManager = gestureManagerRef.current;
+    if (!svg || !gestureManager) {
       return undefined;
     }
-    const gestureManager = new _core.GestureManager({
-      gestures: [new _core.PanGesture({
-        name: 'pan',
-        threshold: 0,
-        maxPointers: 1
-      }), new _core.MoveGesture({
-        name: 'move',
-        preventIf: ['pan', 'pinch'] // Prevent move gesture when pan is active
-      }), new _core.PinchGesture({
-        name: 'pinch',
-        threshold: 5,
-        preventIf: ['pan']
-      }), new _core.TurnWheelGesture({
-        name: 'turnWheel',
-        sensitivity: 0.01,
-        initialDelta: 1
-      }), new _core.TapGesture({
-        name: 'tap',
-        maxDistance: 10,
-        preventIf: ['pan', 'pinch']
-      }), new _core.PressGesture({
-        name: 'quickPress',
-        duration: 50,
-        maxDistance: 10
-      })]
-    });
-    gestureManager.registerElement(['pan', 'move', 'pinch', 'turnWheel', 'tap', 'quickPress'], svg);
+    gestureManager.registerElement(['pan', 'move', 'zoomPinch', 'zoomPan', 'zoomTurnWheel', 'tap', 'quickPress', 'zoomTapAndDrag'], svg);
     return () => {
       // Cleanup gesture manager
-      gestureManager.destroy();
+      gestureManager.unregisterAllGestures(svg);
     };
-  }, [svgRef]);
+  }, [svgRef, gestureManagerRef]);
   const addInteractionListener = React.useCallback((interaction, callback, options) => {
     // Forcefully cast the svgRef to any, it is annoying to fix the types.
     const svg = svgRef.current;
@@ -57,6 +76,14 @@ const useChartInteractionListener = ({
       cleanup: () => svg?.removeEventListener(interaction, callback)
     };
   }, [svgRef]);
+  const updateZoomInteractionListeners = React.useCallback((interaction, options) => {
+    const svg = svgRef.current;
+    const gestureManager = gestureManagerRef.current;
+    if (!gestureManager || !svg) {
+      return;
+    }
+    gestureManager.setGestureOptions(interaction, svg, options ?? {});
+  }, [svgRef, gestureManagerRef]);
   React.useEffect(() => {
     const svg = svgRef.current;
 
@@ -73,7 +100,8 @@ const useChartInteractionListener = ({
   }, [svgRef]);
   return {
     instance: {
-      addInteractionListener
+      addInteractionListener,
+      updateZoomInteractionListeners
     }
   };
 };

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

@@ -1,16 +1,23 @@
-import { MoveEvent, PanEvent, PinchEvent, PressEvent, TapEvent, TurnWheelEvent } from '@mui/x-internal-gestures/core';
+import { MoveEvent, PanEvent, PanGestureOptions, PinchEvent, PinchGestureOptions, PressEvent, TapEvent, TurnWheelEvent, type TapAndDragEvent, type TapAndDragGestureOptions, type TurnWheelGestureOptions } from '@mui/x-internal-gestures/core';
 import { ChartPluginSignature } from "../../models/index.js";
-export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'pinch' | 'pinchStart' | 'pinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'turnWheel' | 'tap';
+export type ChartInteraction = 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd' | 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd' | 'move' | 'moveStart' | 'moveEnd' | 'quickPress' | 'quickPressEnd' | 'zoomTurnWheel' | 'tap';
 export type InteractionListenerResult = {
   cleanup: () => void;
 };
 export type AddInteractionListener = {
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pinch' | 'pinchStart' | 'pinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
-  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'turnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'pan' | 'panStart' | 'panEnd' | 'zoomPan' | 'zoomPanStart' | 'zoomPanEnd', callback: (event: PanEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomPinch' | 'zoomPinchStart' | 'zoomPinchEnd', callback: (event: PinchEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTurnWheel', callback: (event: TurnWheelEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'move' | 'moveStart' | 'moveEnd', callback: (event: MoveEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'tap', callback: (event: TapEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
   <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'quickPress' | 'quickPressEnd', callback: (event: PressEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+  <CustomData extends Record<string, unknown> = Record<string, unknown>>(interaction: 'zoomTapAndDrag' | 'zoomTapAndDragStart' | 'zoomTapAndDragEnd', callback: (event: TapAndDragEvent<CustomData>) => void, options?: boolean | AddEventListenerOptions): InteractionListenerResult;
+};
+export type UpdateZoomInteractionListeners = {
+  (interaction: 'zoomPan', options?: Omit<PanGestureOptions<'zoomPan'>, 'name'>): void;
+  (interaction: 'zoomPinch', options?: Omit<PinchGestureOptions<'zoomPinch'>, 'name'>): void;
+  (interaction: 'zoomTurnWheel', options?: Omit<TurnWheelGestureOptions<'zoomTurnWheel'>, 'name'>): void;
+  (interaction: 'zoomTapAndDrag', options?: Omit<TapAndDragGestureOptions<'zoomTapAndDrag'>, 'name'>): void;
 };
 export interface UseChartInteractionListenerParameters {}
 export interface UseChartInteractionListenerState {}
@@ -22,6 +29,13 @@ export interface UseChartInteractionListenerInstance {
    * @param callback The callback to call when the interaction occurs.
    */
   addInteractionListener: AddInteractionListener;
+  /**
+   * Updates the zoom interaction listeners with the provided options.
+   *
+   * @param interaction The interaction to update.
+   * @param options The options to apply to the interaction.
+   */
+  updateZoomInteractionListeners: UpdateZoomInteractionListeners;
 }
 export type UseChartInteractionListenerSignature = ChartPluginSignature<{
   params: UseChartInteractionListenerParameters;