@mui/x-charts-pro 9.3.0 → 9.5.0

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: ({

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: ({