@mui/x-charts-pro 9.4.0 → 9.6.0

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

@@ -1,59 +1,34 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useZoomOnPinch = 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 _usePinchGesture = require("../../zoomGestures/usePinchGesture");
 const useZoomOnPinch = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'pinch');
   const isZoomOnPinchEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
-  React.useEffect(() => {
-    if (!isZoomOnPinchEnabled) {
-      return;
-    }
-    instance.updateZoomInteractionListeners('zoomPinch', {
-      requiredKeys: config.requiredKeys
-    });
-  }, [config, isZoomOnPinchEnabled, instance]);
-
-  // Zoom on pinch
-  React.useEffect(() => {
-    const element = chartsLayerContainerRef.current;
-    if (element === null || !isZoomOnPinchEnabled) {
-      return () => {};
-    }
-    const rafThrottledCallback = (0, _rafThrottle.rafThrottle)(event => {
-      // If the delta is 0, it means the pinch gesture is not valid.
-      if (event.detail.direction === 0) {
-        return;
-      }
+  (0, _usePinchGesture.usePinchGesture)(instance, {
+    enabled: isZoomOnPinchEnabled,
+    requiredKeys: config?.requiredKeys,
+    onPinch: (point, deltaScale, direction) => {
       setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
             return zoom;
           }
-          const isZoomIn = event.detail.direction > 0;
-          const scaleRatio = 1 + event.detail.deltaScale;
-          const point = (0, _internals.getChartPoint)(element, {
-            clientX: event.detail.centroid.x,
-            clientY: event.detail.centroid.y
-          });
+          const isZoomIn = direction > 0;
+          const scaleRatio = 1 + deltaScale;
           const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea, option.reverse) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
@@ -66,12 +41,7 @@ const useZoomOnPinch = ({
           };
         });
       });
-    });
-    const zoomHandler = instance.addInteractionListener('zoomPinch', rafThrottledCallback);
-    return () => {
-      zoomHandler.cleanup();
-      rafThrottledCallback.clear();
-    };
-  }, [chartsLayerContainerRef, drawingArea, isZoomOnPinchEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+    }
+  });
 };
 exports.useZoomOnPinch = useZoomOnPinch;

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

@@ -1,53 +1,29 @@
 'use client';
 
-import * as React from 'react';
-import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.mjs";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+import { usePinchGesture } from "../../zoomGestures/usePinchGesture.mjs";
 export const useZoomOnPinch = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
   const config = store.use(selectorZoomInteractionConfig, 'pinch');
   const isZoomOnPinchEnabled = Object.keys(optionsLookup).length > 0 && Boolean(config);
-  React.useEffect(() => {
-    if (!isZoomOnPinchEnabled) {
-      return;
-    }
-    instance.updateZoomInteractionListeners('zoomPinch', {
-      requiredKeys: config.requiredKeys
-    });
-  }, [config, isZoomOnPinchEnabled, instance]);
-
-  // Zoom on pinch
-  React.useEffect(() => {
-    const element = chartsLayerContainerRef.current;
-    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;
-      }
+  usePinchGesture(instance, {
+    enabled: isZoomOnPinchEnabled,
+    requiredKeys: config?.requiredKeys,
+    onPinch: (point, deltaScale, direction) => {
       setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
             return zoom;
           }
-          const isZoomIn = event.detail.direction > 0;
-          const scaleRatio = 1 + event.detail.deltaScale;
-          const point = getChartPoint(element, {
-            clientX: event.detail.centroid.x,
-            clientY: event.detail.centroid.y
-          });
+          const isZoomIn = direction > 0;
+          const scaleRatio = 1 + deltaScale;
           const centerRatio = option.axisDirection === 'x' ? getHorizontalCenterRatio(point, drawingArea, option.reverse) : getVerticalCenterRatio(point, drawingArea, option.reverse);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
@@ -60,11 +36,6 @@ export const useZoomOnPinch = ({
           };
         });
       });
-    });
-    const zoomHandler = instance.addInteractionListener('zoomPinch', rafThrottledCallback);
-    return () => {
-      zoomHandler.cleanup();
-      rafThrottledCallback.clear();
-    };
-  }, [chartsLayerContainerRef, drawingArea, isZoomOnPinchEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+    }
+  });
 };

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.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 useZoomOnWheel: ({

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.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 useZoomOnWheel: ({

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

@@ -1,67 +1,27 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useZoomOnWheel = 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 _useWheelGesture = require("../../zoomGestures/useWheelGesture");
 const useZoomOnWheel = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
-  const startedOutsideRef = React.useRef(false);
-  const startedOutsideTimeoutRef = React.useRef(null);
   const config = store.use(_ZoomInteractionConfig.selectorZoomInteractionConfig, 'wheel');
   const isZoomOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(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 = chartsLayerContainerRef.current;
-    if (element === null || !isZoomOnWheelEnabled) {
-      return () => {};
-    }
-    const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
-    const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
-      const point = (0, _internals.getChartPoint)(element, {
-        clientX: event.detail.centroid.x,
-        clientY: event.detail.centroid.y
-      });
-
-      // This prevents a zoom event from being triggered when the mouse is outside the chart area.
-      // The timeout is used to prevent a weird behavior where if the mouse is outside but enters due to
-      // scrolling, then the zoom event is triggered.
-      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
-        startedOutsideRef.current = true;
-        if (startedOutsideTimeoutRef.current) {
-          clearTimeout(startedOutsideTimeoutRef.current);
-        }
-        startedOutsideTimeoutRef.current = setTimeout(() => {
-          startedOutsideRef.current = false;
-          startedOutsideTimeoutRef.current = null;
-        }, 100);
-        return;
-      }
-      event.detail.srcEvent.preventDefault();
-      rafThrottledSetZoomData(prev => {
+  (0, _useWheelGesture.useWheelGesture)(instance, {
+    enabled: isZoomOnWheelEnabled,
+    requiredKeys: config?.requiredKeys,
+    onWheel: (point, wheelEvent) => {
+      setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -71,7 +31,7 @@ const useZoomOnWheel = ({
           const {
             scaleRatio,
             isZoomIn
-          } = (0, _useZoom.getWheelScaleRatio)(event.detail.srcEvent, option.step);
+          } = (0, _useZoom.getWheelScaleRatio)(wheelEvent, option.step);
           const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
           if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;
@@ -83,16 +43,7 @@ const useZoomOnWheel = ({
           };
         });
       });
-    });
-    return () => {
-      zoomOnWheelHandler.cleanup();
-      if (startedOutsideTimeoutRef.current) {
-        clearTimeout(startedOutsideTimeoutRef.current);
-        startedOutsideTimeoutRef.current = null;
-      }
-      startedOutsideRef.current = false;
-      rafThrottledSetZoomData.clear();
-    };
-  }, [chartsLayerContainerRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+    }
+  });
 };
 exports.useZoomOnWheel = useZoomOnWheel;

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

@@ -1,61 +1,22 @@
 'use client';
 
-import * as React from 'react';
-import { getChartPoint, selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
-import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import { selectorChartDrawingArea, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
 import { getHorizontalCenterRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, zoomAtPoint } from "./useZoom.utils.mjs";
 import { selectorZoomInteractionConfig } from "../ZoomInteractionConfig.selectors.mjs";
+import { useWheelGesture } from "../../zoomGestures/useWheelGesture.mjs";
 export const useZoomOnWheel = ({
   store,
   instance
 }, setZoomDataCallback) => {
-  const {
-    chartsLayerContainerRef
-  } = instance;
   const drawingArea = store.use(selectorChartDrawingArea);
   const optionsLookup = store.use(selectorChartZoomOptionsLookup);
-  const startedOutsideRef = React.useRef(false);
-  const startedOutsideTimeoutRef = React.useRef(null);
   const config = store.use(selectorZoomInteractionConfig, 'wheel');
   const isZoomOnWheelEnabled = Object.keys(optionsLookup).length > 0 && Boolean(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 = chartsLayerContainerRef.current;
-    if (element === null || !isZoomOnWheelEnabled) {
-      return () => {};
-    }
-    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
-    const zoomOnWheelHandler = instance.addInteractionListener('zoomTurnWheel', event => {
-      const point = getChartPoint(element, {
-        clientX: event.detail.centroid.x,
-        clientY: event.detail.centroid.y
-      });
-
-      // This prevents a zoom event from being triggered when the mouse is outside the chart area.
-      // The timeout is used to prevent a weird behavior where if the mouse is outside but enters due to
-      // scrolling, then the zoom event is triggered.
-      if (startedOutsideRef.current || !instance.isPointInside(point.x, point.y)) {
-        startedOutsideRef.current = true;
-        if (startedOutsideTimeoutRef.current) {
-          clearTimeout(startedOutsideTimeoutRef.current);
-        }
-        startedOutsideTimeoutRef.current = setTimeout(() => {
-          startedOutsideRef.current = false;
-          startedOutsideTimeoutRef.current = null;
-        }, 100);
-        return;
-      }
-      event.detail.srcEvent.preventDefault();
-      rafThrottledSetZoomData(prev => {
+  useWheelGesture(instance, {
+    enabled: isZoomOnWheelEnabled,
+    requiredKeys: config?.requiredKeys,
+    onWheel: (point, wheelEvent) => {
+      setZoomDataCallback(prev => {
         return prev.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -65,7 +26,7 @@ export const useZoomOnWheel = ({
           const {
             scaleRatio,
             isZoomIn
-          } = getWheelScaleRatio(event.detail.srcEvent, option.step);
+          } = getWheelScaleRatio(wheelEvent, option.step);
           const [newMinRange, newMaxRange] = zoomAtPoint(centerRatio, scaleRatio, zoom, option);
           if (!isSpanValid(newMinRange, newMaxRange, isZoomIn, option)) {
             return zoom;
@@ -77,15 +38,6 @@ export const useZoomOnWheel = ({
           };
         });
       });
-    });
-    return () => {
-      zoomOnWheelHandler.cleanup();
-      if (startedOutsideTimeoutRef.current) {
-        clearTimeout(startedOutsideTimeoutRef.current);
-        startedOutsideTimeoutRef.current = null;
-      }
-      startedOutsideRef.current = false;
-      rafThrottledSetZoomData.clear();
-    };
-  }, [chartsLayerContainerRef, drawingArea, isZoomOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+    }
+  });
 };

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -27,6 +27,7 @@ var _useZoomOnBrush = require("./gestureHooks/useZoomOnBrush");
 var _useZoomOnDoubleTapReset = require("./gestureHooks/useZoomOnDoubleTapReset");
 var _initializeZoomInteractionConfig = require("./initializeZoomInteractionConfig");
 var _initializeZoomData = require("./initializeZoomData");
+var _useRegisterZoomGestures = require("./gestureHooks/useRegisterZoomGestures");
 /**
  * Type guard for `initialZoom` entries provided as a range value.
  */
@@ -193,6 +194,7 @@ const useChartProZoom = pluginData => {
   }, [removeIsInteracting]);
 
   // Add events
+  (0, _useRegisterZoomGestures.useRegisterZoomGestures)(pluginData);
   (0, _usePanOnDrag.usePanOnDrag)(pluginData, setZoomDataCallback);
   (0, _usePanOnPressAndDrag.usePanOnPressAndDrag)(pluginData, setZoomDataCallback);
   (0, _usePanOnWheel.usePanOnWheel)(pluginData, setZoomDataCallback);

package/internals/plugins/useChartProZoom/useChartProZoom.mjs

@@ -20,6 +20,7 @@ import { useZoomOnBrush } from "./gestureHooks/useZoomOnBrush.mjs";
 import { useZoomOnDoubleTapReset } from "./gestureHooks/useZoomOnDoubleTapReset.mjs";
 import { initializeZoomInteractionConfig } from "./initializeZoomInteractionConfig.mjs";
 import { initializeZoomData } from "./initializeZoomData.mjs";
+import { useRegisterZoomGestures } from "./gestureHooks/useRegisterZoomGestures.mjs";
 
 /**
  * Type guard for `initialZoom` entries provided as a range value.
@@ -187,6 +188,7 @@ export const useChartProZoom = pluginData => {
   }, [removeIsInteracting]);
 
   // Add events
+  useRegisterZoomGestures(pluginData);
   usePanOnDrag(pluginData, setZoomDataCallback);
   usePanOnPressAndDrag(pluginData, setZoomDataCallback);
   usePanOnWheel(pluginData, setZoomDataCallback);

package/internals/plugins/zoomGestures/index.d.mts

@@ -0,0 +1,5 @@
+export { useDragGesture, type UseDragGestureOptions } from "./useDragGesture.mjs";
+export { useDragOnPressGesture, type UseDragOnPressGestureOptions } from "./useDragOnPressGesture.mjs";
+export { useWheelGesture, type UseWheelGestureOptions } from "./useWheelGesture.mjs";
+export { usePinchGesture, type UsePinchGestureOptions } from "./usePinchGesture.mjs";
+export type { GestureInstance, PanGestureConfig, ChartPoint } from "./zoomGestures.types.mjs";

package/internals/plugins/zoomGestures/index.d.ts

@@ -0,0 +1,5 @@
+export { useDragGesture, type UseDragGestureOptions } from "./useDragGesture.js";
+export { useDragOnPressGesture, type UseDragOnPressGestureOptions } from "./useDragOnPressGesture.js";
+export { useWheelGesture, type UseWheelGestureOptions } from "./useWheelGesture.js";
+export { usePinchGesture, type UsePinchGestureOptions } from "./usePinchGesture.js";
+export type { GestureInstance, PanGestureConfig, ChartPoint } from "./zoomGestures.types.js";

package/internals/plugins/zoomGestures/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useDragGesture", {
+  enumerable: true,
+  get: function () {
+    return _useDragGesture.useDragGesture;
+  }
+});
+Object.defineProperty(exports, "useDragOnPressGesture", {
+  enumerable: true,
+  get: function () {
+    return _useDragOnPressGesture.useDragOnPressGesture;
+  }
+});
+Object.defineProperty(exports, "usePinchGesture", {
+  enumerable: true,
+  get: function () {
+    return _usePinchGesture.usePinchGesture;
+  }
+});
+Object.defineProperty(exports, "useWheelGesture", {
+  enumerable: true,
+  get: function () {
+    return _useWheelGesture.useWheelGesture;
+  }
+});
+var _useDragGesture = require("./useDragGesture");
+var _useDragOnPressGesture = require("./useDragOnPressGesture");
+var _useWheelGesture = require("./useWheelGesture");
+var _usePinchGesture = require("./usePinchGesture");

package/internals/plugins/zoomGestures/index.mjs

@@ -0,0 +1,4 @@
+export { useDragGesture } from "./useDragGesture.mjs";
+export { useDragOnPressGesture } from "./useDragOnPressGesture.mjs";
+export { useWheelGesture } from "./useWheelGesture.mjs";
+export { usePinchGesture } from "./usePinchGesture.mjs";

package/internals/plugins/zoomGestures/useDragGesture.d.mts

@@ -0,0 +1,30 @@
+import { type PanEvent } from '@mui/x-internal-gestures/core';
+import { type ChartPoint, type GestureInstance, type PanGestureConfig } from "./zoomGestures.types.mjs";
+export interface UseDragGestureOptions {
+  /** Whether the gesture is active. */
+  enabled: boolean;
+  /** Pointer and keyboard gating for the gesture. */
+  config?: PanGestureConfig;
+  /**
+   * Called when the drag starts.
+   * @param {PanEvent} event The pan start event.
+   */
+  onPanStart?: (event: PanEvent) => void;
+  /**
+   * Called (rAF-throttled) on each drag update.
+   * @param {ChartPoint} delta The pixel delta since the last call.
+   * @param {PanEvent} event The pan event.
+   */
+  onPan: (delta: ChartPoint, event: PanEvent) => void;
+  /**
+   * Called when the drag ends.
+   * @param {PanEvent} event The pan end event.
+   */
+  onPanEnd?: (event: PanEvent) => void;
+}
+/**
+ * Generic drag-to-pan gesture binding.
+ *
+ * It owns the listener lifecycle, and lets you create your own interactions by providing the delta change of the interaction.
+ */
+export declare function useDragGesture(instance: GestureInstance, options: UseDragGestureOptions): void;

package/internals/plugins/zoomGestures/useDragGesture.d.ts

@@ -0,0 +1,30 @@
+import { type PanEvent } from '@mui/x-internal-gestures/core';
+import { type ChartPoint, type GestureInstance, type PanGestureConfig } from "./zoomGestures.types.js";
+export interface UseDragGestureOptions {
+  /** Whether the gesture is active. */
+  enabled: boolean;
+  /** Pointer and keyboard gating for the gesture. */
+  config?: PanGestureConfig;
+  /**
+   * Called when the drag starts.
+   * @param {PanEvent} event The pan start event.
+   */
+  onPanStart?: (event: PanEvent) => void;
+  /**
+   * Called (rAF-throttled) on each drag update.
+   * @param {ChartPoint} delta The pixel delta since the last call.
+   * @param {PanEvent} event The pan event.
+   */
+  onPan: (delta: ChartPoint, event: PanEvent) => void;
+  /**
+   * Called when the drag ends.
+   * @param {PanEvent} event The pan end event.
+   */
+  onPanEnd?: (event: PanEvent) => void;
+}
+/**
+ * Generic drag-to-pan gesture binding.
+ *
+ * It owns the listener lifecycle, and lets you create your own interactions by providing the delta change of the interaction.
+ */
+export declare function useDragGesture(instance: GestureInstance, options: UseDragGestureOptions): void;

package/internals/plugins/zoomGestures/useDragGesture.js

@@ -0,0 +1,105 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDragGesture = useDragGesture;
+var React = _interopRequireWildcard(require("react"));
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+/**
+ * Generic drag-to-pan gesture binding.
+ *
+ * It owns the listener lifecycle, and lets you create your own interactions by providing the delta change of the interaction.
+ */
+function useDragGesture(instance, options) {
+  const {
+    enabled,
+    config,
+    onPanStart,
+    onPan,
+    onPanEnd
+  } = options;
+  const {
+    chartsLayerContainerRef
+  } = instance;
+
+  // Keep the latest handlers in a ref so changing them doesn't rebind listeners.
+  const handlersRef = React.useRef({
+    onPanStart,
+    onPan,
+    onPanEnd
+  });
+  React.useEffect(() => {
+    handlersRef.current = {
+      onPanStart,
+      onPan,
+      onPanEnd
+    };
+  });
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    instance.updateZoomInteractionListeners('zoomPan', {
+      requiredKeys: config?.requiredKeys,
+      pointerMode: config?.pointerMode,
+      pointerOptions: {
+        mouse: config?.mouse,
+        touch: config?.touch
+      }
+    });
+  }, [enabled, config, instance]);
+  React.useEffect(() => {
+    const element = chartsLayerContainerRef.current;
+    if (element === null || !enabled) {
+      return () => {};
+    }
+    let isInteracting = false;
+    let lastEvent = null;
+    const accumulated = {
+      x: 0,
+      y: 0
+    };
+    const handlePanStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        isInteracting = true;
+        handlersRef.current.onPanStart?.(event);
+      }
+    };
+    const handlePanEnd = event => {
+      isInteracting = false;
+      handlersRef.current.onPanEnd?.(event);
+    };
+    const throttled = (0, _rafThrottle.rafThrottle)(() => {
+      const delta = {
+        x: accumulated.x,
+        y: accumulated.y
+      };
+      accumulated.x = 0;
+      accumulated.y = 0;
+      if (lastEvent) {
+        handlersRef.current.onPan(delta, lastEvent);
+      }
+    });
+    const handlePan = event => {
+      if (!isInteracting) {
+        return;
+      }
+      lastEvent = event;
+      accumulated.x += event.detail.deltaX;
+      accumulated.y += event.detail.deltaY;
+      throttled();
+    };
+    const panHandler = instance.addInteractionListener('zoomPan', handlePan);
+    const panStartHandler = instance.addInteractionListener('zoomPanStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('zoomPanEnd', handlePanEnd);
+    return () => {
+      panHandler.cleanup();
+      panStartHandler.cleanup();
+      panEndHandler.cleanup();
+      throttled.clear();
+    };
+  }, [instance, chartsLayerContainerRef, enabled]);
+}