@mui/x-charts-pro 8.12.0 → 8.13.0

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[];

package/esm/internals/plugins/useChartProZoom/initializeZoomData.js

@@ -0,0 +1,26 @@
+'use client';
+
+// This is helpful to avoid the need to provide the possibly auto-generated id for each axis.
+export function initializeZoomData(options, zoomData) {
+  const zoomDataMap = new Map();
+  zoomData?.forEach(zoom => {
+    const option = options[zoom.axisId];
+    if (option) {
+      zoomDataMap.set(zoom.axisId, zoom);
+    }
+  });
+  return Object.values(options).map(({
+    axisId,
+    minStart: start,
+    maxEnd: end
+  }) => {
+    if (zoomDataMap.has(axisId)) {
+      return zoomDataMap.get(axisId);
+    }
+    return {
+      axisId,
+      start,
+      end
+    };
+  });
+}

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

@@ -0,0 +1,2 @@
+import type { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
+export declare const initializeZoomInteractionConfig: (zoomInteractionConfig?: ZoomInteractionConfig) => DefaultizedZoomInteractionConfig;

package/esm/internals/plugins/useChartProZoom/initializeZoomInteractionConfig.js

@@ -0,0 +1,86 @@
+'use client';
+
+export const initializeZoomInteractionConfig = zoomInteractionConfig => {
+  const defaultizedConfig = {
+    zoom: {},
+    pan: {}
+  };
+  if (!zoomInteractionConfig?.zoom) {
+    defaultizedConfig.zoom = {
+      wheel: {
+        type: 'wheel',
+        requiredKeys: [],
+        mouse: {},
+        touch: {}
+      },
+      pinch: {
+        type: 'pinch',
+        requiredKeys: [],
+        mouse: {},
+        touch: {}
+      }
+    };
+  } else {
+    defaultizedConfig.zoom = initializeFor(zoomInteractionConfig.zoom);
+  }
+  if (!zoomInteractionConfig?.pan) {
+    defaultizedConfig.pan = {
+      drag: {
+        type: 'drag',
+        requiredKeys: [],
+        mouse: {},
+        touch: {}
+      }
+    };
+  } else {
+    defaultizedConfig.pan = initializeFor(zoomInteractionConfig.pan);
+  }
+  return defaultizedConfig;
+};
+function initializeFor(zoomInteractionConfig) {
+  // We aggregate interactions by type
+  const aggregation = zoomInteractionConfig.reduce((acc, interaction) => {
+    if (typeof interaction === 'string') {
+      if (!acc[interaction]) {
+        acc[interaction] = [];
+      }
+      acc[interaction].push({
+        type: interaction,
+        requiredKeys: []
+      });
+      return acc;
+    }
+    const type = interaction.type;
+    if (!acc[type]) {
+      acc[type] = [];
+    }
+    acc[type].push({
+      type,
+      pointerMode: interaction.pointerMode,
+      requiredKeys: interaction.requiredKeys
+    });
+    return acc;
+  }, {});
+
+  // We then need to generate a usable config by type
+  // When a gesture type is provided without options, it means we enable it for all pointer modes
+  // Any interaction with a specific pointer mode should be restricted to that mode
+  const acc = {};
+  for (const [type, config] of Object.entries(aggregation)) {
+    const lastEmpty = config.findLast(item => !item.pointerMode);
+    const lastMouse = config.findLast(item => item.pointerMode === 'mouse');
+    const lastTouch = config.findLast(item => item.pointerMode === 'touch');
+    acc[type] = {
+      type,
+      pointerMode: lastEmpty ? [] : Array.from(new Set(config.filter(c => c.pointerMode).map(c => c.pointerMode))),
+      requiredKeys: lastEmpty?.requiredKeys ?? [],
+      mouse: lastMouse ? {
+        requiredKeys: lastMouse?.requiredKeys ?? []
+      } : {},
+      touch: lastTouch ? {
+        requiredKeys: lastTouch?.requiredKeys ?? []
+      } : {}
+    };
+  }
+  return acc;
+}

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

@@ -1,4 +1,3 @@
-import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
+import { ChartPlugin } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
-export declare function initializeZoomData(options: Record<AxisId, Pick<DefaultizedZoomOptions, 'axisId' | 'minStart' | 'maxEnd'>>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

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

@@ -4,48 +4,36 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useSelector, selectorChartZoomOptionsLookup, createZoomLookup, selectorChartAxisZoomOptionsLookup } from '@mui/x-charts/internals';
 import debounce from '@mui/utils/debounce';
+import { useEffectAfterFirstRender } from '@mui/x-internals/useEffectAfterFirstRender';
 import { useEventCallback } from '@mui/material/utils';
 import { calculateZoom } from "./calculateZoom.js";
 import { useZoomOnWheel } from "./gestureHooks/useZoomOnWheel.js";
 import { useZoomOnPinch } from "./gestureHooks/useZoomOnPinch.js";
 import { usePanOnDrag } from "./gestureHooks/usePanOnDrag.js";
-
-// It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-export function initializeZoomData(options, zoomData) {
-  const zoomDataMap = new Map();
-  zoomData?.forEach(zoom => {
-    const option = options[zoom.axisId];
-    if (option) {
-      zoomDataMap.set(zoom.axisId, zoom);
-    }
-  });
-  return Object.values(options).map(({
-    axisId,
-    minStart: start,
-    maxEnd: end
-  }) => {
-    if (zoomDataMap.has(axisId)) {
-      return zoomDataMap.get(axisId);
-    }
-    return {
-      axisId,
-      start,
-      end
-    };
-  });
-}
-export const useChartProZoom = ({
-  store,
-  instance,
-  svgRef,
-  params
-}) => {
+import { useZoomOnTapAndDrag } from "./gestureHooks/useZoomOnTapAndDrag.js";
+import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.js";
+import { initializeZoomData } from "./initializeZoomData.js";
+export const useChartProZoom = pluginData => {
+  const {
+    store,
+    params
+  } = pluginData;
   const {
     zoomData: paramsZoomData,
-    onZoomChange: onZoomChangeProp
+    onZoomChange: onZoomChangeProp,
+    zoomInteractionConfig
   } = params;
   const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
+  useEffectAfterFirstRender(() => {
+    store.update(prevState => {
+      return _extends({}, prevState, {
+        zoom: _extends({}, prevState.zoom, {
+          zoomInteractionConfig: initializeZoomInteractionConfig(zoomInteractionConfig)
+        })
+      });
+    });
+  }, [store, zoomInteractionConfig]);
 
   // Manage controlled state
   React.useEffect(() => {
@@ -144,14 +132,10 @@ export const useChartProZoom = ({
   }, [removeIsInteracting]);
 
   // Add events
-  const pluginData = {
-    store,
-    instance,
-    svgRef
-  };
   usePanOnDrag(pluginData, setZoomDataCallback);
   useZoomOnWheel(pluginData, setZoomDataCallback);
   useZoomOnPinch(pluginData, setZoomDataCallback);
+  useZoomOnTapAndDrag(pluginData, setZoomDataCallback);
   const zoom = React.useCallback(step => {
     setZoomDataCallback(prev => prev.map(zoomData => {
       const zoomOptions = selectorChartAxisZoomOptionsLookup(store.getSnapshot(), zoomData.axisId);
@@ -179,12 +163,8 @@ export const useChartProZoom = ({
 useChartProZoom.params = {
   initialZoom: true,
   onZoomChange: true,
-  zoomData: true
-};
-useChartProZoom.getDefaultizedParams = ({
-  params
-}) => {
-  return _extends({}, params);
+  zoomData: true,
+  zoomInteractionConfig: true
 };
 useChartProZoom.getInitialState = params => {
   const {
@@ -201,7 +181,8 @@ useChartProZoom.getInitialState = params => {
     zoom: {
       zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
-      isControlled: zoomData !== undefined
+      isControlled: zoomData !== undefined,
+      zoomInteractionConfig: initializeZoomInteractionConfig(params.zoomInteractionConfig)
     }
   };
 };

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

@@ -1,4 +1,5 @@
 import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, AxisId } from '@mui/x-charts/internals';
+import { ZoomInteractionConfig, DefaultizedZoomInteractionConfig } from "./ZoomInteractionConfig.types.js";
 export interface UseChartProZoomParameters {
   /**
    * The list of zoom data related to each axis.
@@ -15,6 +16,10 @@ export interface UseChartProZoomParameters {
    * The list of zoom data related to each axis.
    */
   zoomData?: readonly ZoomData[];
+  /**
+   * Configuration for zoom interactions.
+   */
+  zoomInteractionConfig?: ZoomInteractionConfig;
 }
 export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters & UseChartCartesianAxisDefaultizedParameters;
 export interface UseChartProZoomState {
@@ -32,6 +37,10 @@ export interface UseChartProZoomState {
      * Internal information to know if the user control the state or not.
      */
     isControlled: boolean;
+    /**
+     * Configuration for zoom interactions.
+     */
+    zoomInteractionConfig: DefaultizedZoomInteractionConfig;
   };
 }
 export interface UseChartProZoomPublicApi {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.12.0
+ * @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

package/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/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorZoomInteractionConfig = exports.selectorPanInteractionConfig = void 0;
+var _internals = require("@mui/x-charts/internals");
+var _useChartProZoom = require("./useChartProZoom.selectors");
+const selectorZoomInteractionConfig = exports.selectorZoomInteractionConfig = (0, _internals.createSelector)([_useChartProZoom.selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
+const selectorPanInteractionConfig = exports.selectorPanInteractionConfig = (0, _internals.createSelector)([_useChartProZoom.selectorChartZoomState, (_state, interactionName) => interactionName], (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);

package/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/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _rafThrottle = require("@mui/x-internals/rafThrottle");
 var _useZoom = require("./useZoom.utils");
+var _ZoomInteractionConfig = require("../ZoomInteractionConfig.selectors");
 const usePanOnDrag = ({
   store,
   instance,
@@ -18,12 +19,26 @@ const usePanOnDrag = ({
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const startRef = React.useRef(null);
+  const config = (0, _internals.useSelector)(store, _ZoomInteractionConfig.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 => {
@@ -51,15 +66,15 @@ 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]);
 };
 exports.usePanOnDrag = usePanOnDrag;

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

@@ -52,7 +52,7 @@ const zoomAtPoint = (centerRatio, scaleRatio, currentZoomData, options) => {
 exports.zoomAtPoint = zoomAtPoint;
 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) {