@mui/x-charts-pro 8.11.3 → 8.13.0

package/esm/SankeyChart/seriesConfig/tooltipGetter.js

@@ -1,6 +1,7 @@
 export const tooltipGetter = params => {
   const {
-    identifier
+    identifier,
+    series
   } = params;
   if (!identifier) {
     return null;
@@ -15,7 +16,11 @@ export const tooltipGetter = params => {
       color: node.color,
       label: `${node.label}:`,
       value: node.value,
-      formattedValue: `${node.value}`,
+      formattedValue: series.valueFormatter(node.value, {
+        type: 'node',
+        nodeId: node.id,
+        location: 'tooltip'
+      }),
       markType: 'square'
     };
   }
@@ -31,7 +36,12 @@ export const tooltipGetter = params => {
       color: link.color,
       label: `${sourceLabel} → ${targetLabel}:`,
       value: link.value,
-      formattedValue: `${link.value}`,
+      formattedValue: series.valueFormatter(link.value, {
+        type: 'link',
+        sourceId: link.source.id,
+        targetId: link.target.id,
+        location: 'tooltip'
+      }),
       markType: 'line'
     };
   }

package/esm/SankeyChart/useSankeyChartProps.d.ts

@@ -2,7 +2,7 @@ import type { ChartsOverlayProps } from '@mui/x-charts/ChartsOverlay';
 import type { ChartsWrapperProps } from '@mui/x-charts/ChartsWrapper';
 import type { SankeyChartProps } from "./SankeyChart.js";
 import type { ChartContainerProProps } from "../ChartContainerPro/index.js";
-import { type SankeyChartPluginsSignatures } from "./SankeyChart.plugins.js";
+import { type SankeyChartPluginSignatures } from "./SankeyChart.plugins.js";
 /**
  * A helper function that extracts SankeyChartProps from the input props
  * and returns an object with props for the children components of SankeyChart.
@@ -11,7 +11,7 @@ import { type SankeyChartPluginsSignatures } from "./SankeyChart.plugins.js";
  * @returns An object with props for the children components of SankeyChart
  */
 export declare const useSankeyChartProps: (props: SankeyChartProps) => {
-  chartContainerProps: ChartContainerProProps<"sankey", SankeyChartPluginsSignatures>;
+  chartContainerProps: ChartContainerProProps<"sankey", SankeyChartPluginSignatures>;
   sankeyPlotProps: {
     onNodeClick: ((event: React.MouseEvent<SVGElement, MouseEvent>, node: import("./sankey.types.js").SankeyNodeIdentifierWithData) => void) | undefined;
     onLinkClick: ((event: React.MouseEvent<SVGElement, MouseEvent>, link: import("./sankey.types.js").SankeyLinkIdentifierWithData) => void) | undefined;

package/esm/ScatterChartPro/ScatterChartPro.d.ts

@@ -3,7 +3,7 @@ import { ScatterChartProps, ScatterChartSlotProps, ScatterChartSlots } from '@mu
 import { ChartsTooltipProps } from '@mui/x-charts/ChartsTooltip';
 import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/ChartContainerPro.js";
-import { ScatterChartProPluginsSignatures } from "./ScatterChartPro.plugins.js";
+import { ScatterChartProPluginSignatures } from "./ScatterChartPro.plugins.js";
 import { ChartsToolbarProSlots, ChartsToolbarProSlotProps } from "../ChartsToolbarPro/Toolbar.types.js";
 export interface ScatterChartProSlots extends Omit<ScatterChartSlots, 'toolbar'>, ChartsToolbarProSlots, Partial<ChartsSlotsPro> {}
 export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 'toolbar' | 'tooltip'>, ChartsToolbarProSlotProps, Partial<ChartsSlotPropsPro> {
@@ -13,7 +13,7 @@ export interface ScatterChartProSlotProps extends Omit<ScatterChartSlotProps, 't
    */
   tooltip?: Partial<ChartsTooltipProps<'item' | 'none'>>;
 }
-export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
+export interface ScatterChartProProps extends Omit<ScatterChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'scatter', ScatterChartProPluginSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'onItemClick' | 'slots' | 'slotProps' | 'experimentalFeatures' | 'highlightedAxis' | 'onHighlightedAxisChange'> {
   /**
    * Overridable component slots.
    * @default {}

package/esm/ScatterChartPro/ScatterChartPro.js

@@ -127,6 +127,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @default false
    */
   disableVoronoi: PropTypes.bool,
+  enableKeyboardNavigation: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -210,6 +211,15 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: PropTypes.func,
+  /**
+   * The type of renderer to use for the scatter plot.
+   * - `svg-single`: Renders every scatter item in a `<circle />` element.
+   * - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/scatter/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: PropTypes.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the scatter chart.
    * An array of [[ScatterSeries]] objects.
@@ -239,10 +249,11 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,
   /**
-   * Defines the maximal distance between a scatter point and the pointer that triggers the interaction.
+   * Defines the maximum distance between a scatter point and the pointer that triggers the interaction.
+   * If set to `'item'`, the radius is the `markerSize`.
    * If `undefined`, the radius is assumed to be infinite.
    */
-  voronoiMaxRadius: PropTypes.number,
+  voronoiMaxRadius: PropTypes.oneOfType([PropTypes.oneOf(['item']), PropTypes.number]),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
@@ -1390,6 +1401,29 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     end: PropTypes.number.isRequired,
     start: PropTypes.number.isRequired
-  }))
+  })),
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig: PropTypes.shape({
+    pan: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['drag']), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['drag']).isRequired
+    })]).isRequired),
+    zoom: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf(['pinch', 'tapAndDrag', 'wheel']), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['wheel']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.any,
+      requiredKeys: PropTypes.array,
+      type: PropTypes.oneOf(['pinch']).isRequired
+    }), PropTypes.shape({
+      pointerMode: PropTypes.oneOf(['mouse', 'touch']),
+      requiredKeys: PropTypes.arrayOf(PropTypes.string),
+      type: PropTypes.oneOf(['tapAndDrag']).isRequired
+    })]).isRequired)
+  })
 } : void 0;
 export { ScatterChartPro };

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature, UseChartProExportSignature];
-export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginsSignatures>;
+export type ScatterChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,4 +1,4 @@
-import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi } from '@mui/x-charts/internals';
+import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom, useChartProExport];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartClosestPoint, useChartKeyboardNavigation, useChartProZoom, useChartProExport];

package/esm/ScatterChartPro/index.d.ts

@@ -1 +1,2 @@
-export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.plugins.js";

package/esm/ScatterChartPro/index.js

@@ -1 +1,2 @@
-export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.js";
+export * from "./ScatterChartPro.plugins.js";

package/esm/context/ChartProApi.d.ts

@@ -1,20 +1,22 @@
 import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
-import { HeatmapPluginsSignatures } from "../Heatmap/Heatmap.plugins.js";
-import { LineChartProPluginsSignatures } from "../LineChartPro/LineChartPro.plugins.js";
-import { ScatterChartProPluginsSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
-import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins.js";
+import { HeatmapPluginSignatures } from "../Heatmap/Heatmap.plugins.js";
+import { LineChartProPluginSignatures } from "../LineChartPro/LineChartPro.plugins.js";
+import { ScatterChartProPluginSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
+import { BarChartProPluginSignatures } from "../BarChartPro/BarChartPro.plugins.js";
 import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
-import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
-import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+import { FunnelChartPluginSignatures } from "../FunnelChart/FunnelChart.plugins.js";
+import { RadarChartProPluginSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
 import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
+import { SankeyChartPluginSignatures } from "../SankeyChart/SankeyChart.plugins.js";
 export type ProPluginsPerSeriesType = {
-  heatmap: HeatmapPluginsSignatures;
-  line: LineChartProPluginsSignatures;
-  scatter: ScatterChartProPluginsSignatures;
-  bar: BarChartProPluginsSignatures;
-  funnel: FunnelChartPluginsSignatures;
-  radar: RadarChartProPluginsSignatures;
+  heatmap: HeatmapPluginSignatures;
+  line: LineChartProPluginSignatures;
+  scatter: ScatterChartProPluginSignatures;
+  bar: BarChartProPluginSignatures;
+  funnel: FunnelChartPluginSignatures;
+  radar: RadarChartProPluginSignatures;
   pie: PieChartProPluginSignatures;
+  sankey: SankeyChartPluginSignatures;
   composition: DefaultPluginSignatures;
 };
 /**

package/esm/index.d.ts

@@ -26,6 +26,7 @@ export * from "./constants/index.js";
 export * from "./hooks/index.js";
 export * from "./context/index.js";
 export * from "./models/index.js";
+export * from "./plugins/index.js";
 export * from "./colorPalettes/index.js";
 export * from "./Heatmap/index.js";
 export { ChartContainerPro } from "./ChartContainerPro/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.11.3
+ * @mui/x-charts-pro v8.13.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
@@ -37,6 +37,7 @@ export * from "./constants/index.js";
 export * from "./hooks/index.js";
 export * from "./context/index.js";
 export * from "./models/index.js";
+export * from "./plugins/index.js";
 // Locales should be imported from `@mui/x-charts-pro/locales`
 // export * from './locales';
 export * from "./colorPalettes/index.js";

package/esm/internals/plugins/useChartProExport/useChartProExport.types.d.ts

@@ -1,4 +1,4 @@
-import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
+import { ChartPluginSignature } from '@mui/x-charts/internals';
 export interface UseChartProExportParameters {}
 export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
 export interface UseChartProExportState {
@@ -74,5 +74,4 @@ export type UseChartProExportSignature = ChartPluginSignature<{
   state: UseChartProExportState;
   publicAPI: UseChartProExportPublicApi;
   instance: UseChartProExportInstance;
-  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
 }>;

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.d.ts

@@ -0,0 +1,22 @@
+export declare const selectorZoomInteractionConfig: import("reselect").Selector<any, (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
+  mouse: {
+    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
+  };
+  pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+}) | null, [interactionName: "wheel" | "pinch" | "tapAndDrag"]>;
+export declare const selectorPanInteractionConfig: import("reselect").Selector<any, (Omit<{
+  type: "drag";
+  pointerMode?: import("./ZoomInteractionConfig.types.js").InteractionMode | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+}, "pointerMode"> & {
+  mouse: {
+    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
+  };
+  pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
+}) | null, [interactionName: "drag"]>;

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js

@@ -0,0 +1,4 @@
+import { createSelector } from '@mui/x-charts/internals';
+import { selectorChartZoomState } from "./useChartProZoom.selectors.js";
+export const selectorZoomInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
+export const selectorPanInteractionConfig = createSelector([selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.ts

@@ -0,0 +1,92 @@
+import type { KeyboardKey, PointerMode } from '@mui/x-internal-gestures/core';
+export type ZoomInteractionConfig = {
+  /**
+   * Defines the interactions that trigger zooming.
+   * - `wheel`: Zooms in or out when the mouse wheel is scrolled.
+   * - `pinch`: Zooms in or out when a pinch gesture is detected.
+   * - `tapAndDrag`: Zooms in or out by tapping twice and then dragging vertically. Dragging up zooms in, dragging down zooms out.
+   *
+   * @default ['wheel', 'pinch']
+   */
+  zoom?: (ZoomInteraction | ZoomInteraction['type'])[];
+  /**
+   * Defines the interactions that trigger panning.
+   * - `drag`: Pans the chart when dragged with the mouse.
+   *
+   * @default ['drag']
+   */
+  pan?: (PanInteraction | PanInteraction['type'])[];
+};
+type Entry<T extends AnyInteraction> = { [K in T['type']]?: Omit<T, 'pointerMode'> & {
+  mouse: {
+    requiredKeys?: KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: KeyboardKey[];
+  };
+  pointerMode?: PointerMode[];
+} };
+export type DefaultizedZoomInteractionConfig = {
+  zoom: Entry<ZoomInteraction>;
+  pan: Entry<PanInteraction>;
+};
+export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction;
+export type PanInteraction = DragInteraction;
+export type ZoomInteractionName = ZoomInteraction['type'];
+export type PanInteractionName = PanInteraction['type'];
+export type InteractionMode = Exclude<PointerMode, 'pen'>;
+type AllKeysProp = {
+  /**
+   * The keys that must be pressed to trigger the interaction.
+   */
+  requiredKeys?: KeyboardKey[];
+};
+type AllModeProp = {
+  /**
+   * Defines which type of pointer can trigger the interaction.
+   * - `mouse`: Only mouse interactions will trigger the interaction.
+   * - `touch`: Only touch interactions will trigger the interaction.
+   * - undefined: All interactions will trigger the interaction.
+   */
+  pointerMode?: InteractionMode;
+};
+type NoKeysProp = {
+  /**
+   * This interaction does not support key combinations.
+   */
+  requiredKeys?: any[];
+};
+type NoModeProp = {
+  /**
+   * This gesture only works on a specific pointer mode. Mode has no effect.
+   */
+  pointerMode?: any;
+};
+type Unpack<T> = { [K in keyof T]: T[K] extends object ? Unpack<T[K]> : T[K] };
+export type WheelInteraction = Unpack<{
+  type: 'wheel';
+} & NoModeProp & AllKeysProp>;
+export type PinchInteraction = Unpack<{
+  type: 'pinch';
+} & NoModeProp & NoKeysProp>;
+export type DragInteraction = Unpack<{
+  type: 'drag';
+} & AllModeProp & AllKeysProp>;
+export type TapAndDragInteraction = Unpack<{
+  type: 'tapAndDrag';
+} & AllModeProp & AllKeysProp>;
+export type AnyInteraction = {
+  type: string;
+  pointerMode?: InteractionMode;
+  requiredKeys?: KeyboardKey[];
+};
+export type AnyEntry = Omit<AnyInteraction, 'pointerMode'> & {
+  mouse: {
+    requiredKeys?: KeyboardKey[];
+  };
+  touch: {
+    requiredKeys?: KeyboardKey[];
+  };
+  pointerMode?: PointerMode[];
+};
+export {};

package/esm/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.js

@@ -0,0 +1 @@
+export {};

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useSelector, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.js";
+import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const usePanOnDrag = ({
   store,
   instance,
@@ -12,12 +13,26 @@ export const usePanOnDrag = ({
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
+  const config = useSelector(store, selectorPanInteractionConfig, ['drag']);
+  const isPanOnDragEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isPanOnDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPan', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [isPanOnDragEnabled, config, instance]);
 
   // Add event for chart panning
-  const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || !isPanEnabled) {
+    if (element === null || !isPanOnDragEnabled) {
       return () => {};
     }
     const handlePanStart = event => {
@@ -45,14 +60,14 @@ export const usePanOnDrag = ({
       }
       throttledCallback(event, zoomData);
     };
-    const panHandler = instance.addInteractionListener('pan', handlePan);
-    const panStartHandler = instance.addInteractionListener('panStart', handlePanStart);
-    const panEndHandler = instance.addInteractionListener('panEnd', handlePanEnd);
+    const panHandler = instance.addInteractionListener('zoomPan', handlePan);
+    const panStartHandler = instance.addInteractionListener('zoomPanStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('zoomPanEnd', handlePanEnd);
     return () => {
       panStartHandler.cleanup();
       panHandler.cleanup();
       panEndHandler.cleanup();
       throttledCallback.clear();
     };
-  }, [instance, svgRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+  }, [instance, svgRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
 };

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoom.utils.js

@@ -39,7 +39,7 @@ export const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) =
  */
 export function isSpanValid(minRange, maxRange, isZoomIn, option) {
   const newSpanPercent = maxRange - minRange;
-  if (isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
+  if (newSpanPercent < 0 || isZoomIn && newSpanPercent < option.minSpan || !isZoomIn && newSpanPercent > option.maxSpan) {
     return false;
   }
   if (minRange < option.minStart || maxRange > option.maxEnd) {

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnPinch = ({
   store,
   instance,
@@ -11,15 +12,28 @@ export const useZoomOnPinch = ({
 }, setZoomDataCallback) => {
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const config = useSelector(store, selectorZoomInteractionConfig, ['pinch']);
+  const isZoomOnPinchEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isZoomOnPinchEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPinch', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isZoomOnPinchEnabled, instance]);
 
   // Zoom on pinch
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || !isZoomEnabled) {
+    if (element === null || !isZoomOnPinchEnabled) {
       return () => {};
     }
     const rafThrottledCallback = rafThrottle(event => {
+      // If the delta is 0, it means the pinch gesture is not valid.
+      if (event.detail.direction === 0) {
+        return;
+      }
       setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
@@ -28,11 +42,6 @@ export const useZoomOnPinch = ({
           }
           const isZoomIn = event.detail.direction > 0;
           const scaleRatio = 1 + event.detail.deltaScale;
-
-          // If the delta is 0, it means the pinch gesture is not valid.
-          if (event.detail.direction === 0) {
-            return zoom;
-          }
           const point = getSVGPoint(element, {
             clientX: event.detail.centroid.x,
             clientY: event.detail.centroid.y
@@ -50,10 +59,10 @@ export const useZoomOnPinch = ({
         });
       });
     });
-    const zoomHandler = instance.addInteractionListener('pinch', rafThrottledCallback);
+    const zoomHandler = instance.addInteractionListener('zoomPinch', rafThrottledCallback);
     return () => {
       zoomHandler.cleanup();
       rafThrottledCallback.clear();
     };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+  }, [svgRef, drawingArea, isZoomOnPinchEnabled, optionsLookup, store, instance, setZoomDataCallback]);
 };

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const useZoomOnTapAndDrag: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnTapAndDrag.js

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
+export const useZoomOnTapAndDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = useSelector(store, selectorChartDrawingArea);
+  const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  const config = useSelector(store, selectorZoomInteractionConfig, ['tapAndDrag']);
+  const isZoomOnTapAndDragEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isZoomOnTapAndDragEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTapAndDrag', {
+      requiredKeys: config.requiredKeys,
+      pointerMode: config.pointerMode,
+      pointerOptions: {
+        mouse: config.mouse,
+        touch: config.touch
+      }
+    });
+  }, [config, isZoomOnTapAndDragEnabled, instance]);
+
+  // Zoom on tap and drag
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomOnTapAndDragEnabled) {
+      return () => {};
+    }
+    const rafThrottledCallback = rafThrottle(event => {
+      // If the delta is 0, we didn't move
+      if (event.detail.deltaY === 0) {
+        return;
+      }
+      setZoomDataCallback(prev => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const isZoomIn = event.detail.deltaY > 0;
+          const scaleRatio = 1 + event.detail.deltaY / 100;
+          const point = getSVGPoint(element, {
+            clientX: event.detail.initialCentroid.x,
+            clientY: event.detail.initialCentroid.y
+          });
+          const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea) : getVerticalCenterRatio(point, drawingArea);
+          const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
+          if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    const zoomHandler = instance.addInteractionListener('zoomTapAndDrag', rafThrottledCallback);
+    return () => {
+      zoomHandler.cleanup();
+      rafThrottledCallback.clear();
+    };
+  }, [svgRef, drawingArea, isZoomOnTapAndDragEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+};

package/esm/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useSelector, getSVGPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.js";
+import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.js";
 export const useZoomOnWheel = ({
   store,
   instance,
@@ -11,18 +12,27 @@ export const useZoomOnWheel = ({
 }, setZoomDataCallback) => {
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
-  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
   const startedOutsideRef = React.useRef(false);
   const startedOutsideTimeoutRef = React.useRef(null);
+  const config = useSelector(store, selectorZoomInteractionConfig, ['wheel']);
+  const isZoomOnWheelEnabled = React.useMemo(() => Object.keys(optionsLookup).length > 0 && config || false, [optionsLookup, config]);
+  React.useEffect(() => {
+    if (!isZoomOnWheelEnabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomTurnWheel', {
+      requiredKeys: config.requiredKeys
+    });
+  }, [config, isZoomOnWheelEnabled, instance]);
 
   // Add event for chart zoom in/out
   React.useEffect(() => {
     const element = svgRef.current;
-    if (element === null || !isZoomEnabled) {
+    if (element === null || !isZoomOnWheelEnabled) {
       return () => {};
     }
     const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
-    const zoomOnWheelHandler = instance.addInteractionListener('turnWheel', event => {
+    const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
       const point = getSVGPoint(element, {
         clientX: event.detail.centroid.x,
         clientY: event.detail.centroid.y
@@ -75,5 +85,5 @@ export const useZoomOnWheel = ({
       startedOutsideRef.current = false;
       rafThrottledSetZoomData.clear();
     };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+  }, [svgRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
 };

package/esm/internals/plugins/useChartProZoom/initializeZoomData.d.ts

@@ -0,0 +1,2 @@
+import type { AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];