@mui/x-charts-pro 9.4.0 → 9.5.0

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

@@ -1,6 +1,26 @@
 export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, interactionName: "wheel" | "pinch" | "tapAndDrag" | "doubleTapReset" | "brush") => (Omit<import("./ZoomInteractionConfig.types.js").ZoomInteraction, "pointerMode"> & {
+}, interactionName: "wheel" | "pinch" | "tapAndDrag" | "doubleTapReset" | "brush") => (Omit<{
+  type: "wheel";
+  pointerMode?: any;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+} | {
+  type: "pinch";
+  pointerMode?: any;
+  requiredKeys?: any[] | undefined;
+} | {
+  type: "tapAndDrag";
+  pointerMode?: ("mouse" | "touch") | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+} | {
+  type: "doubleTapReset";
+  pointerMode?: ("mouse" | "touch") | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+} | {
+  type: "brush";
+  pointerMode?: ("mouse" | "touch") | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+}, "pointerMode"> & {
   mouse: {
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
@@ -12,7 +32,20 @@ export declare const selectorZoomInteractionConfig: (args_0: import("@mui/x-char
 }) | null;
 export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeriesConfig/useChartSeriesConfig.types").UseChartSeriesConfigState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartExperimentalFeature/useChartExperimentalFeature.types").UseChartExperimentalFeaturesState & import("@mui/x-charts/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types").UseChartDimensionsState & import("@mui/x-charts/internals/plugins/corePlugins/useChartSeries/useChartSeries.types").UseChartSeriesState<keyof import("@mui/x-charts/internals").ChartsSeriesConfig> & import("@mui/x-charts/internals/plugins/corePlugins/useChartAnimation/useChartAnimation.types").UseChartAnimationState & import("@mui/x-charts/internals").UseChartInteractionListenerState & import("./useChartProZoom.types.js").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
-}, interactionName: "wheel" | "drag" | "pressAndDrag") => (Omit<import("./ZoomInteractionConfig.types.js").PanInteraction, "pointerMode"> & {
+}, interactionName: "wheel" | "drag" | "pressAndDrag") => (Omit<{
+  type: "drag";
+  pointerMode?: ("mouse" | "touch") | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+} | {
+  type: "pressAndDrag";
+  pointerMode?: ("mouse" | "touch") | undefined;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+} | {
+  type: "wheel";
+  allowedDirection?: "x" | "y" | "xy" | undefined;
+  pointerMode?: any;
+  requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[] | undefined;
+}, "pointerMode"> & {
   mouse: {
     requiredKeys?: import("@mui/x-internal-gestures/core").KeyboardKey[];
   };
@@ -21,5 +54,4 @@ export declare const selectorPanInteractionConfig: (args_0: import("@mui/x-chart
   };
   pointerMode?: import("@mui/x-internal-gestures/core").PointerMode[];
   allowedDirection?: "x" | "y" | "xy";
-}) | null;
-export declare const selectorIsZoomBrushEnabled: (args_0: {}, zoomInteractionConfig: any) => any;
+}) | null;

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

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectorZoomInteractionConfig = exports.selectorPanInteractionConfig = exports.selectorIsZoomBrushEnabled = void 0;
+exports.selectorZoomInteractionConfig = exports.selectorPanInteractionConfig = void 0;
 var _store = require("@mui/x-internals/store");
-var _internals = require("@mui/x-charts/internals");
 var _useChartProZoom = require("./useChartProZoom.selectors");
 const selectorZoomInteractionConfig = exports.selectorZoomInteractionConfig = (0, _store.createSelector)(_useChartProZoom.selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
-const selectorPanInteractionConfig = exports.selectorPanInteractionConfig = (0, _store.createSelector)(_useChartProZoom.selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
-const selectorIsZoomBrushEnabled = exports.selectorIsZoomBrushEnabled = (0, _store.createSelector)(_internals.selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush'), (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);
+const selectorPanInteractionConfig = exports.selectorPanInteractionConfig = (0, _store.createSelector)(_useChartProZoom.selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.selectors.mjs

@@ -1,6 +1,4 @@
 import { createSelector } from '@mui/x-internals/store';
-import { selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { selectorChartZoomState } from "./useChartProZoom.selectors.mjs";
 export const selectorZoomInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.zoom[interactionName] ?? null);
-export const selectorPanInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);
-export const selectorIsZoomBrushEnabled = createSelector(selectorChartZoomOptionsLookup, state => selectorZoomInteractionConfig(state, 'brush'), (zoomOptions, zoomInteractionConfig) => Object.keys(zoomOptions).length > 0 && zoomInteractionConfig || false);
+export const selectorPanInteractionConfig = createSelector(selectorChartZoomState, (zoomState, interactionName) => zoomState.zoomInteractionConfig.pan[interactionName] ?? null);

package/internals/plugins/useChartProZoom/ZoomInteractionConfig.types.d.mts

@@ -35,11 +35,11 @@ export type DefaultizedZoomInteractionConfig = {
   zoom: Entry<ZoomInteraction>;
   pan: Entry<PanInteraction>;
 };
-export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction | DoubleTapResetInteraction | BrushInteraction;
-export type PanInteraction = DragInteraction | PressAndDragInteraction | WheelPanInteraction;
+type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction | DoubleTapResetInteraction | BrushInteraction;
+type PanInteraction = DragInteraction | PressAndDragInteraction | WheelPanInteraction;
 export type ZoomInteractionName = ZoomInteraction['type'];
 export type PanInteractionName = PanInteraction['type'];
-export type InteractionMode = Exclude<PointerMode, 'pen'>;
+type InteractionMode = Exclude<PointerMode, 'pen'>;
 type AllKeysProp = {
   /**
    * The keys that must be pressed to trigger the interaction.
@@ -68,22 +68,22 @@ type NoModeProp = {
   pointerMode?: any;
 };
 type Unpack<T> = { [K in keyof T]: T[K] extends object ? Unpack<T[K]> : T[K] };
-export type WheelInteraction = Unpack<{
+type WheelInteraction = Unpack<{
   type: 'wheel';
 } & NoModeProp & AllKeysProp>;
-export type PinchInteraction = Unpack<{
+type PinchInteraction = Unpack<{
   type: 'pinch';
 } & NoModeProp & NoKeysProp>;
-export type DragInteraction = Unpack<{
+type DragInteraction = Unpack<{
   type: 'drag';
 } & AllModeProp & AllKeysProp>;
-export type TapAndDragInteraction = Unpack<{
+type TapAndDragInteraction = Unpack<{
   type: 'tapAndDrag';
 } & AllModeProp & AllKeysProp>;
-export type PressAndDragInteraction = Unpack<{
+type PressAndDragInteraction = Unpack<{
   type: 'pressAndDrag';
 } & AllModeProp & AllKeysProp>;
-export type WheelPanInteraction = Unpack<{
+type WheelPanInteraction = Unpack<{
   type: 'wheel';
   /**
    * Defines which axes are affected by pan on wheel.
@@ -94,10 +94,10 @@ export type WheelPanInteraction = Unpack<{
    */
   allowedDirection?: 'x' | 'y' | 'xy';
 } & NoModeProp & AllKeysProp>;
-export type DoubleTapResetInteraction = Unpack<{
+type DoubleTapResetInteraction = Unpack<{
   type: 'doubleTapReset';
 } & AllModeProp & AllKeysProp>;
-export type BrushInteraction = Unpack<{
+type BrushInteraction = Unpack<{
   type: 'brush';
 } & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {

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

@@ -35,11 +35,11 @@ export type DefaultizedZoomInteractionConfig = {
   zoom: Entry<ZoomInteraction>;
   pan: Entry<PanInteraction>;
 };
-export type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction | DoubleTapResetInteraction | BrushInteraction;
-export type PanInteraction = DragInteraction | PressAndDragInteraction | WheelPanInteraction;
+type ZoomInteraction = WheelInteraction | PinchInteraction | TapAndDragInteraction | DoubleTapResetInteraction | BrushInteraction;
+type PanInteraction = DragInteraction | PressAndDragInteraction | WheelPanInteraction;
 export type ZoomInteractionName = ZoomInteraction['type'];
 export type PanInteractionName = PanInteraction['type'];
-export type InteractionMode = Exclude<PointerMode, 'pen'>;
+type InteractionMode = Exclude<PointerMode, 'pen'>;
 type AllKeysProp = {
   /**
    * The keys that must be pressed to trigger the interaction.
@@ -68,22 +68,22 @@ type NoModeProp = {
   pointerMode?: any;
 };
 type Unpack<T> = { [K in keyof T]: T[K] extends object ? Unpack<T[K]> : T[K] };
-export type WheelInteraction = Unpack<{
+type WheelInteraction = Unpack<{
   type: 'wheel';
 } & NoModeProp & AllKeysProp>;
-export type PinchInteraction = Unpack<{
+type PinchInteraction = Unpack<{
   type: 'pinch';
 } & NoModeProp & NoKeysProp>;
-export type DragInteraction = Unpack<{
+type DragInteraction = Unpack<{
   type: 'drag';
 } & AllModeProp & AllKeysProp>;
-export type TapAndDragInteraction = Unpack<{
+type TapAndDragInteraction = Unpack<{
   type: 'tapAndDrag';
 } & AllModeProp & AllKeysProp>;
-export type PressAndDragInteraction = Unpack<{
+type PressAndDragInteraction = Unpack<{
   type: 'pressAndDrag';
 } & AllModeProp & AllKeysProp>;
-export type WheelPanInteraction = Unpack<{
+type WheelPanInteraction = Unpack<{
   type: 'wheel';
   /**
    * Defines which axes are affected by pan on wheel.
@@ -94,10 +94,10 @@ export type WheelPanInteraction = Unpack<{
    */
   allowedDirection?: 'x' | 'y' | 'xy';
 } & NoModeProp & AllKeysProp>;
-export type DoubleTapResetInteraction = Unpack<{
+type DoubleTapResetInteraction = Unpack<{
   type: 'doubleTapReset';
 } & AllModeProp & AllKeysProp>;
-export type BrushInteraction = Unpack<{
+type BrushInteraction = Unpack<{
   type: 'brush';
 } & AllModeProp & AllKeysProp>;
 export type AnyInteraction = {

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.mts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
 export declare const usePanOnDrag: ({

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnDrag: ({

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

@@ -1,90 +1,34 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePanOnDrag = void 0;
-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");
+var _useDragGesture = require("../../zoomGestures/useDragGesture");
 const usePanOnDrag = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'drag');
   const isPanOnDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(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
-  React.useEffect(() => {
-    const element = chartsLayerContainerRef.current;
-    let isInteracting = false;
-    const accumulatedChange = {
-      x: 0,
-      y: 0
-    };
-    if (element === null || !isPanOnDragEnabled) {
-      return () => {};
-    }
-    const handlePanStart = event => {
-      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
-        isInteracting = true;
-      }
-    };
-    const handlePanEnd = () => {
-      isInteracting = false;
-    };
-    const throttledCallback = (0, _rafThrottle.rafThrottle)(() => {
-      const x = accumulatedChange.x;
-      const y = accumulatedChange.y;
-      accumulatedChange.x = 0;
-      accumulatedChange.y = 0;
+  (0, _useDragGesture.useDragGesture)(instance, {
+    config: config ?? undefined,
+    enabled: isPanOnDragEnabled,
+    onPan: delta => {
       setZoomDataCallback(prev => (0, _useZoom.translateZoom)(prev, {
-        x,
-        y: -y
+        x: delta.x,
+        y: -delta.y
       }, {
         width: drawingArea.width,
         height: drawingArea.height
       }, optionsLookup));
-    });
-    const handlePan = event => {
-      if (!isInteracting) {
-        return;
-      }
-      accumulatedChange.x += event.detail.deltaX;
-      accumulatedChange.y += event.detail.deltaY;
-      throttledCallback();
-    };
-    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, chartsLayerContainerRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+    }
+  });
 };
 exports.usePanOnDrag = usePanOnDrag;

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

@@ -1,83 +1,28 @@
 'use client';
 
-import * as React from 'react';
 import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.mjs";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+import { useDragGesture } from "../../zoomGestures/useDragGesture.mjs";
 export const usePanOnDrag = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorPanInteractionConfig, 'drag');
   const isPanOnDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(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
-  React.useEffect(() => {
-    const element = chartsLayerContainerRef.current;
-    let isInteracting = false;
-    const accumulatedChange = {
-      x: 0,
-      y: 0
-    };
-    if (element === null || !isPanOnDragEnabled) {
-      return () => {};
-    }
-    const handlePanStart = event => {
-      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
-        isInteracting = true;
-      }
-    };
-    const handlePanEnd = () => {
-      isInteracting = false;
-    };
-    const throttledCallback = rafThrottle(() => {
-      const x = accumulatedChange.x;
-      const y = accumulatedChange.y;
-      accumulatedChange.x = 0;
-      accumulatedChange.y = 0;
+  useDragGesture(instance, {
+    config: config ?? undefined,
+    enabled: isPanOnDragEnabled,
+    onPan: delta => {
       setZoomDataCallback(prev => translateZoom(prev, {
-        x,
-        y: -y
+        x: delta.x,
+        y: -delta.y
       }, {
         width: drawingArea.width,
         height: drawingArea.height
       }, optionsLookup));
-    });
-    const handlePan = event => {
-      if (!isInteracting) {
-        return;
-      }
-      accumulatedChange.x += event.detail.deltaX;
-      accumulatedChange.y += event.detail.deltaY;
-      throttledCallback();
-    };
-    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, chartsLayerContainerRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+    }
+  });
 };

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.mts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
 export declare const usePanOnPressAndDrag: ({

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const usePanOnPressAndDrag: ({

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

@@ -1,94 +1,34 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePanOnPressAndDrag = void 0;
-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");
+var _useDragOnPressGesture = require("../../zoomGestures/useDragOnPressGesture");
 const usePanOnPressAndDrag = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
-  const isInteracting = React.useRef(false);
-  const accumulatedChange = React.useRef({
-    x: 0,
-    y: 0
-  });
   const config = store.use(_ZoomInteractionConfig.selectorPanInteractionConfig, 'pressAndDrag');
   const isPanOnPressAndDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
-  React.useEffect(() => {
-    if (!isPanOnPressAndDragEnabled) {
-      return;
-    }
-    instance.updateZoomInteractionListeners('zoomPressAndDrag', {
-      requiredKeys: config.requiredKeys,
-      pointerMode: config.pointerMode,
-      pointerOptions: {
-        mouse: config.mouse,
-        touch: config.touch
-      }
-    });
-  }, [isPanOnPressAndDragEnabled, config, instance]);
-
-  // Add event for chart panning with press and drag
-  React.useEffect(() => {
-    const element = chartsLayerContainerRef.current;
-    if (element === null || !isPanOnPressAndDragEnabled) {
-      return () => {};
-    }
-    const handlePressAndDragStart = event => {
-      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
-        isInteracting.current = true;
-        accumulatedChange.current = {
-          x: 0,
-          y: 0
-        };
-      }
-    };
-    const handlePressAndDragEnd = () => {
-      isInteracting.current = false;
-    };
-    const throttledCallback = (0, _rafThrottle.rafThrottle)(() => {
-      const x = accumulatedChange.current.x;
-      const y = accumulatedChange.current.y;
-      accumulatedChange.current.x = 0;
-      accumulatedChange.current.y = 0;
+  (0, _useDragOnPressGesture.useDragOnPressGesture)(instance, {
+    config: config ?? undefined,
+    enabled: isPanOnPressAndDragEnabled,
+    onPan: delta => {
       setZoomDataCallback(prev => (0, _useZoom.translateZoom)(prev, {
-        x,
-        y: -y
+        x: delta.x,
+        y: -delta.y
       }, {
         width: drawingArea.width,
         height: drawingArea.height
       }, optionsLookup));
-    });
-    const handlePressAndDrag = event => {
-      if (!isInteracting.current) {
-        return;
-      }
-      accumulatedChange.current.x += event.detail.deltaX;
-      accumulatedChange.current.y += event.detail.deltaY;
-      throttledCallback();
-    };
-    const pressAndDragHandler = instance.addInteractionListener('zoomPressAndDrag', handlePressAndDrag);
-    const pressAndDragStartHandler = instance.addInteractionListener('zoomPressAndDragStart', handlePressAndDragStart);
-    const pressAndDragEndHandler = instance.addInteractionListener('zoomPressAndDragEnd', handlePressAndDragEnd);
-    return () => {
-      pressAndDragStartHandler.cleanup();
-      pressAndDragHandler.cleanup();
-      pressAndDragEndHandler.cleanup();
-      throttledCallback.clear();
-    };
-  }, [instance, chartsLayerContainerRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, isInteracting]);
+    }
+  });
 };
 exports.usePanOnPressAndDrag = usePanOnPressAndDrag;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnPressAndDrag.mjs

@@ -1,87 +1,28 @@
 'use client';
 
-import * as React from 'react';
 import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { translateZoom } from "./useZoom.utils.mjs";
 import { selectorPanInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+import { useDragOnPressGesture } from "../../zoomGestures/useDragOnPressGesture.mjs";
 export const usePanOnPressAndDrag = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
-  const isInteracting = React.useRef(false);
-  const accumulatedChange = React.useRef({
-    x: 0,
-    y: 0
-  });
   const config = store.use(selectorPanInteractionConfig, 'pressAndDrag');
   const isPanOnPressAndDragEnabled = Object.values(optionsLookup).some(v => v.panning) && Boolean(config);
-  React.useEffect(() => {
-    if (!isPanOnPressAndDragEnabled) {
-      return;
-    }
-    instance.updateZoomInteractionListeners('zoomPressAndDrag', {
-      requiredKeys: config.requiredKeys,
-      pointerMode: config.pointerMode,
-      pointerOptions: {
-        mouse: config.mouse,
-        touch: config.touch
-      }
-    });
-  }, [isPanOnPressAndDragEnabled, config, instance]);
-
-  // Add event for chart panning with press and drag
-  React.useEffect(() => {
-    const element = chartsLayerContainerRef.current;
-    if (element === null || !isPanOnPressAndDragEnabled) {
-      return () => {};
-    }
-    const handlePressAndDragStart = event => {
-      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
-        isInteracting.current = true;
-        accumulatedChange.current = {
-          x: 0,
-          y: 0
-        };
-      }
-    };
-    const handlePressAndDragEnd = () => {
-      isInteracting.current = false;
-    };
-    const throttledCallback = rafThrottle(() => {
-      const x = accumulatedChange.current.x;
-      const y = accumulatedChange.current.y;
-      accumulatedChange.current.x = 0;
-      accumulatedChange.current.y = 0;
+  useDragOnPressGesture(instance, {
+    config: config ?? undefined,
+    enabled: isPanOnPressAndDragEnabled,
+    onPan: delta => {
       setZoomDataCallback(prev => translateZoom(prev, {
-        x,
-        y: -y
+        x: delta.x,
+        y: -delta.y
       }, {
         width: drawingArea.width,
         height: drawingArea.height
       }, optionsLookup));
-    });
-    const handlePressAndDrag = event => {
-      if (!isInteracting.current) {
-        return;
-      }
-      accumulatedChange.current.x += event.detail.deltaX;
-      accumulatedChange.current.y += event.detail.deltaY;
-      throttledCallback();
-    };
-    const pressAndDragHandler = instance.addInteractionListener('zoomPressAndDrag', handlePressAndDrag);
-    const pressAndDragStartHandler = instance.addInteractionListener('zoomPressAndDragStart', handlePressAndDragStart);
-    const pressAndDragEndHandler = instance.addInteractionListener('zoomPressAndDragEnd', handlePressAndDragEnd);
-    return () => {
-      pressAndDragStartHandler.cleanup();
-      pressAndDragHandler.cleanup();
-      pressAndDragEndHandler.cleanup();
-      throttledCallback.clear();
-    };
-  }, [instance, chartsLayerContainerRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, isInteracting]);
+    }
+  });
 };

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.mts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.mjs";
 export declare const useZoomOnPinch: ({

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { type ChartPlugin, type ZoomData } from '@mui/x-charts/internals';
 import { type UseChartProZoomSignature } from "../useChartProZoom.types.js";
 export declare const useZoomOnPinch: ({