@mui/x-charts-pro 8.5.3 → 8.7.0

package/internals/material/components/BasePopper.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BasePopper = BasePopper;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
+var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
+var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAwayListener"));
+var _Grow = _interopRequireDefault(require("@mui/material/Grow"));
+var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement"];
+function clickAwayWrapper(props, content) {
+  if (props.onClickAway === undefined) {
+    return content;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayListener.default, {
+    onClickAway: props.onClickAway,
+    touchEvent: props.clickAwayTouchEvent,
+    mouseEvent: props.clickAwayMouseEvent,
+    children: content
+  });
+}
+function focusTrapWrapper(props, content) {
+  if (props.focusTrap === undefined) {
+    return content;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
+    open: true,
+    disableEnforceFocus: true,
+    disableAutoFocus: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      tabIndex: -1,
+      children: content
+    })
+  });
+}
+function wrappers(props, content) {
+  return focusTrapWrapper(props, clickAwayWrapper(props, content));
+}
+const transformOrigin = {
+  'bottom-start': 'top left',
+  'bottom-end': 'top right'
+};
+function BasePopper(props) {
+  const {
+      open,
+      children,
+      className,
+      flip,
+      onExited,
+      onDidShow,
+      onDidHide,
+      id,
+      target,
+      transition,
+      placement
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const modifiers = React.useMemo(() => {
+    const result = [{
+      name: 'preventOverflow',
+      options: {
+        padding: 8
+      }
+    }];
+    if (flip) {
+      result.push({
+        name: 'flip',
+        enabled: true,
+        options: {
+          rootBoundary: 'document'
+        }
+      });
+    }
+    if (onDidShow || onDidHide) {
+      result.push({
+        name: 'isPlaced',
+        enabled: true,
+        phase: 'main',
+        fn: () => {
+          onDidShow?.();
+        },
+        effect: () => () => {
+          onDidHide?.();
+        }
+      });
+    }
+    return result;
+  }, [flip, onDidShow, onDidHide]);
+  let content;
+  if (!transition) {
+    content = wrappers(props, children);
+  } else {
+    const handleExited = popperOnExited => node => {
+      if (popperOnExited) {
+        popperOnExited();
+      }
+      if (onExited) {
+        onExited(node);
+      }
+    };
+    content = p => wrappers(props, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grow.default, (0, _extends2.default)({}, p.TransitionProps, {
+      style: {
+        transformOrigin: transformOrigin[p.placement]
+      },
+      onExited: handleExited(p.TransitionProps?.onExited),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
+        children: children
+      })
+    })));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, (0, _extends2.default)({
+    id: id,
+    className: className,
+    open: open,
+    anchorEl: target,
+    transition: transition,
+    placement: placement,
+    modifiers: modifiers
+  }, rest, {
+    children: content
+  }));
+}

package/internals/material/icons.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 export declare const ChartsZoomInIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
-export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsExportIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;

package/internals/material/icons.js

@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChartsZoomOutIcon = exports.ChartsZoomInIcon = void 0;
+exports.ChartsZoomOutIcon = exports.ChartsZoomInIcon = exports.ChartsExportIcon = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -17,4 +17,7 @@ const ChartsZoomInIcon = exports.ChartsZoomInIcon = (0, _internals.createSvgIcon
 }), 'ZoomIn');
 const ChartsZoomOutIcon = exports.ChartsZoomOutIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
-}), 'ZoomOut');
+}), 'ZoomOut');
+const ChartsExportIcon = exports.ChartsExportIcon = (0, _internals.createSvgIcon)(/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+  d: "M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"
+}), 'Export');

package/internals/material/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
 import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
 export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;

package/internals/material/index.js

@@ -7,13 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultSlotsMaterial = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
+var _Divider = _interopRequireDefault(require("@mui/material/Divider"));
 var _internals = require("@mui/x-charts/internals");
+var _BaseMenuItem = require("./components/BaseMenuItem");
+var _BasePopper = require("./components/BasePopper");
 var _icons = require("./icons");
 const baseSlots = {
-  baseTooltip: _Tooltip.default
+  baseTooltip: _Tooltip.default,
+  basePopper: _BasePopper.BasePopper,
+  baseMenuList: _MenuList.default,
+  baseMenuItem: _BaseMenuItem.BaseMenuItem,
+  baseDivider: _Divider.default
 };
 const iconSlots = {
   zoomInIcon: _icons.ChartsZoomInIcon,
-  zoomOutIcon: _icons.ChartsZoomOutIcon
+  zoomOutIcon: _icons.ChartsZoomOutIcon,
+  exportIcon: _icons.ChartsExportIcon
 };
 const defaultSlotsMaterial = exports.defaultSlotsMaterial = (0, _extends2.default)({}, _internals.defaultSlotsMaterial, baseSlots, iconSlots);

package/internals/plugins/allPlugins.d.ts

@@ -3,7 +3,7 @@ import { UseChartProExportSignature } from "./useChartProExport/index.js";
 import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
 export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature>)[];

package/internals/plugins/useChartProExport/print.js

@@ -22,7 +22,6 @@ function printChart(element, {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     await Promise.all((0, _export.loadStyleSheets)(printDoc, root));
-    printWindow.contentWindow.print();
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;
@@ -30,6 +29,7 @@ function printChart(element, {
         doc.body.removeChild(printWindow);
       }
     });
+    printWindow.contentWindow.print();
   };
   doc.body.appendChild(printWindow);
 }

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

@@ -7,29 +7,30 @@ export interface UseChartProExportState {
 /**
  * The options to apply on the Print export.
  * @demos
- *   - [Print export](/x/react-charts/export/#print-export-as-pdf)
+ *   - [Print export](https://mui.com/x/react-charts/export/#print-export-as-pdf)
  */
 export interface ChartPrintExportOptions {
   /**
-   * The value to be used as the print window title.
-   * @default The title of the page.
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
    */
   fileName?: string;
 }
 /**
  * The options to apply on the image export.
  * @demos
- *   - [Image export](/x/react-charts/export/#export-as-image)
+ *   - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
  */
 export interface ChartImageExportOptions {
   /**
-   * The value to be used as the print window title.
-   * @default The title of the page.
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
    */
   fileName?: string;
   /**
    * The format of the image to be exported.
    * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
    * @default 'image/png'
    */
   type?: 'image/png' | string;

package/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.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 usePanOnDrag: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -0,0 +1,65 @@
+"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");
+const usePanOnDrag = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const startRef = React.useRef(null);
+
+  // 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) {
+      return () => {};
+    }
+    const handlePanStart = event => {
+      if (!event.detail.target?.closest('[data-charts-zoom-slider]')) {
+        startRef.current = store.value.zoom.zoomData;
+      }
+    };
+    const handlePanEnd = () => {
+      startRef.current = null;
+    };
+    const throttledCallback = (0, _rafThrottle.rafThrottle)((event, zoomData) => {
+      const newZoomData = (0, _useZoom.translateZoom)(zoomData, {
+        x: event.detail.activeDeltaX,
+        y: -event.detail.activeDeltaY
+      }, {
+        width: drawingArea.width,
+        height: drawingArea.height
+      }, optionsLookup);
+      setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      const zoomData = startRef.current;
+      if (!zoomData) {
+        return;
+      }
+      throttledCallback(event, zoomData);
+    };
+    const panHandler = instance.addInteractionListener('pan', handlePan);
+    const panStartHandler = instance.addInteractionListener('panStart', handlePanStart);
+    const panEndHandler = instance.addInteractionListener('panEnd', handlePanEnd);
+    return () => {
+      panStartHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      throttledCallback.clear();
+    };
+  }, [instance, svgRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, startRef]);
+};
+exports.usePanOnDrag = usePanOnDrag;

package/internals/plugins/useChartProZoom/{useChartProZoom.utils.d.ts → gestureHooks/useZoom.utils.d.ts}

@@ -17,14 +17,6 @@ export declare function getWheelScaleRatio(event: WheelEvent, step: number): {
   scaleRatio: number;
   isZoomIn: boolean;
 };
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-export declare function getPinchScaleRatio(curDiff: number, prevDiff: number, step: number): {
-  scaleRatio: number;
-  isZoomIn: boolean;
-};
-export declare function getDiff(eventCache: PointerEvent[]): number;
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -35,11 +27,23 @@ export declare function getHorizontalCenterRatio(point: {
   left: number;
   width: number;
 }): number;
-export declare function preventDefault(event: TouchEvent): void;
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 export declare function getVerticalCenterRatio(point: {
   x: number;
   y: number;
 }, area: {
   top: number;
   height: number;
-}): number;
+}): number;
+/**
+ * Translate the zoom data by a given movement.
+ */
+export declare function translateZoom(initialZoomData: readonly ZoomData[], movement: {
+  x: number;
+  y: number;
+}, drawingArea: {
+  width: number;
+  height: number;
+}, optionsLookup: Record<string | number, DefaultizedZoomOptions>): ZoomData[];

package/internals/plugins/useChartProZoom/{useChartProZoom.utils.js → gestureHooks/useZoom.utils.js}

@@ -1,16 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDiff = getDiff;
 exports.getHorizontalCenterRatio = getHorizontalCenterRatio;
-exports.getPinchScaleRatio = getPinchScaleRatio;
 exports.getVerticalCenterRatio = getVerticalCenterRatio;
 exports.getWheelScaleRatio = getWheelScaleRatio;
 exports.isSpanValid = isSpanValid;
-exports.preventDefault = preventDefault;
+exports.translateZoom = translateZoom;
 exports.zoomAtPoint = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 /**
  * Helper to get the range (in percents of a reference range) corresponding to a given scale.
  * @param centerRatio {number} The ratio of the point that should not move between the previous and next range.
@@ -90,34 +90,6 @@ function getWheelScaleRatio(event, step) {
   };
 }
 
-/**
- * Get the scale ratio and if it's a zoom in or out from a pinch gesture.
- */
-function getPinchScaleRatio(curDiff, prevDiff, step) {
-  const scaledStep = step / 1000;
-  let scaleRatio = 0;
-  let isZoomIn = false;
-  const hasMoved = prevDiff > 0;
-  if (hasMoved && curDiff > prevDiff) {
-    // The distance between the two pointers has increased
-    scaleRatio = 1 + scaledStep;
-    isZoomIn = true;
-  }
-  if (hasMoved && curDiff < prevDiff) {
-    // The distance between the two pointers has decreased
-    scaleRatio = 1 - scaledStep;
-    isZoomIn = false;
-  }
-  return {
-    scaleRatio,
-    isZoomIn
-  };
-}
-function getDiff(eventCache) {
-  const [firstEvent, secondEvent] = eventCache;
-  return Math.hypot(firstEvent.pageX - secondEvent.pageX, firstEvent.pageY - secondEvent.pageY);
-}
-
 /**
  * Get the ratio of the point in the horizontal center of the area.
  */
@@ -128,13 +100,50 @@ function getHorizontalCenterRatio(point, area) {
   } = area;
   return (point.x - left) / width;
 }
-function preventDefault(event) {
-  event.preventDefault();
-}
+
+/**
+ * Get the ratio of the point in the vertical center of the area.
+ */
 function getVerticalCenterRatio(point, area) {
   const {
     top,
     height
   } = area;
   return (point.y - top) / height * -1 + 1;
+}
+
+/**
+ * Translate the zoom data by a given movement.
+ */
+function translateZoom(initialZoomData, movement, drawingArea, optionsLookup) {
+  return initialZoomData.map(zoom => {
+    const options = optionsLookup[zoom.axisId];
+    if (!options || !options.panning) {
+      return zoom;
+    }
+    const min = zoom.start;
+    const max = zoom.end;
+    const span = max - min;
+    const MIN_PERCENT = options.minStart;
+    const MAX_PERCENT = options.maxEnd;
+    const displacement = options.axisDirection === 'x' ? movement.x : movement.y;
+    const dimension = options.axisDirection === 'x' ? drawingArea.width : drawingArea.height;
+    let newMinPercent = min - displacement / dimension * span;
+    let newMaxPercent = max - displacement / dimension * span;
+    if (newMinPercent < MIN_PERCENT) {
+      newMinPercent = MIN_PERCENT;
+      newMaxPercent = newMinPercent + span;
+    }
+    if (newMaxPercent > MAX_PERCENT) {
+      newMaxPercent = MAX_PERCENT;
+      newMinPercent = newMaxPercent - span;
+    }
+    if (newMinPercent < MIN_PERCENT || newMaxPercent > MAX_PERCENT || span < options.minSpan || span > options.maxSpan) {
+      return zoom;
+    }
+    return (0, _extends2.default)({}, zoom, {
+      start: newMinPercent,
+      end: newMaxPercent
+    });
+  });
 }

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnPinch.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 useZoomOnPinch: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -0,0 +1,66 @@
+"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");
+const useZoomOnPinch = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+
+  // Zoom on pinch
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const rafThrottledCallback = (0, _rafThrottle.rafThrottle)(event => {
+      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;
+
+          // If the delta is 0, it means the pinch gesture is not valid.
+          if (event.detail.direction === 0) {
+            return zoom;
+          }
+          const point = (0, _internals.getSVGPoint)(element, {
+            clientX: event.detail.centroid.x,
+            clientY: event.detail.centroid.y
+          });
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
+          if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    const zoomHandler = instance.addInteractionListener('pinch', rafThrottledCallback);
+    return () => {
+      zoomHandler.cleanup();
+      rafThrottledCallback.clear();
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, store, instance, setZoomDataCallback]);
+};
+exports.useZoomOnPinch = useZoomOnPinch;

package/internals/plugins/useChartProZoom/gestureHooks/useZoomOnWheel.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 useZoomOnWheel: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -0,0 +1,86 @@
+"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");
+const useZoomOnWheel = ({
+  store,
+  instance,
+  svgRef
+}, setZoomDataCallback) => {
+  const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
+  const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
+  const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const startedOutsideRef = React.useRef(false);
+  const startedOutsideTimeoutRef = React.useRef(null);
+
+  // Add event for chart zoom in/out
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null || !isZoomEnabled) {
+      return () => {};
+    }
+    const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
+    const zoomOnWheelHandler = instance.addInteractionListener('turnWheel', event => {
+      const point = (0, _internals.getSVGPoint)(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 an 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 => {
+        return prev.map(zoom => {
+          const option = optionsLookup[zoom.axisId];
+          if (!option) {
+            return zoom;
+          }
+          const centerRatio = option.axisDirection === 'x' ? (0, _useZoom.getHorizontalCenterRatio)(point, drawingArea) : (0, _useZoom.getVerticalCenterRatio)(point, drawingArea);
+          const {
+            scaleRatio,
+            isZoomIn
+          } = (0, _useZoom.getWheelScaleRatio)(event.detail.srcEvent, option.step);
+          const [newMinRange, newMaxRange] = (0, _useZoom.zoomAtPoint)(centerRatio, scaleRatio, zoom, option);
+          if (!(0, _useZoom.isSpanValid)(newMinRange, newMaxRange, isZoomIn, option)) {
+            return zoom;
+          }
+          return {
+            axisId: zoom.axisId,
+            start: newMinRange,
+            end: newMaxRange
+          };
+        });
+      });
+    });
+    return () => {
+      zoomOnWheelHandler.cleanup();
+      if (startedOutsideTimeoutRef.current) {
+        clearTimeout(startedOutsideTimeoutRef.current);
+        startedOutsideTimeoutRef.current = null;
+      }
+      startedOutsideRef.current = false;
+      rafThrottledSetZoomData.clear();
+    };
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback, store]);
+};
+exports.useZoomOnWheel = useZoomOnWheel;