@mui/x-charts-pro 8.6.0 → 8.7.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.6.0
+ * @mui/x-charts-pro v8.7.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -10,10 +10,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ChartContainerPro: true
+};
+Object.defineProperty(exports, "ChartContainerPro", {
+  enumerable: true,
+  get: function () {
+    return _ChartContainerPro.ChartContainerPro;
+  }
+});
 require("./typeOverloads/modules");
 var _constants = require("@mui/x-charts/constants");
 Object.keys(_constants).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _constants[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -22,20 +32,10 @@ Object.keys(_constants).forEach(function (key) {
     }
   });
 });
-var _context = require("@mui/x-charts/context");
-Object.keys(_context).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _context[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _context[key];
-    }
-  });
-});
 var _hooks = require("@mui/x-charts/hooks");
 Object.keys(_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,6 +47,7 @@ Object.keys(_hooks).forEach(function (key) {
 var _colorPalettes = require("@mui/x-charts/colorPalettes");
 Object.keys(_colorPalettes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _colorPalettes[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -58,6 +59,7 @@ Object.keys(_colorPalettes).forEach(function (key) {
 var _models = require("@mui/x-charts/models");
 Object.keys(_models).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _models[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -69,6 +71,7 @@ Object.keys(_models).forEach(function (key) {
 var _ChartsClipPath = require("@mui/x-charts/ChartsClipPath");
 Object.keys(_ChartsClipPath).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsClipPath[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -80,6 +83,7 @@ Object.keys(_ChartsClipPath).forEach(function (key) {
 var _ChartsReferenceLine = require("@mui/x-charts/ChartsReferenceLine");
 Object.keys(_ChartsReferenceLine).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -91,6 +95,7 @@ Object.keys(_ChartsReferenceLine).forEach(function (key) {
 var _ChartsAxis = require("@mui/x-charts/ChartsAxis");
 Object.keys(_ChartsAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -102,6 +107,7 @@ Object.keys(_ChartsAxis).forEach(function (key) {
 var _ChartsXAxis = require("@mui/x-charts/ChartsXAxis");
 Object.keys(_ChartsXAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsXAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -113,6 +119,7 @@ Object.keys(_ChartsXAxis).forEach(function (key) {
 var _ChartsYAxis = require("@mui/x-charts/ChartsYAxis");
 Object.keys(_ChartsYAxis).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsYAxis[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -124,6 +131,7 @@ Object.keys(_ChartsYAxis).forEach(function (key) {
 var _ChartsGrid = require("@mui/x-charts/ChartsGrid");
 Object.keys(_ChartsGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -135,6 +143,7 @@ Object.keys(_ChartsGrid).forEach(function (key) {
 var _ChartsText = require("@mui/x-charts/ChartsText");
 Object.keys(_ChartsText).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsText[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -146,6 +155,7 @@ Object.keys(_ChartsText).forEach(function (key) {
 var _ChartsTooltip = require("@mui/x-charts/ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -157,6 +167,7 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
 var _ChartsLegend = require("@mui/x-charts/ChartsLegend");
 Object.keys(_ChartsLegend).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLegend[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -168,6 +179,7 @@ Object.keys(_ChartsLegend).forEach(function (key) {
 var _ChartsLocalizationProvider = require("@mui/x-charts/ChartsLocalizationProvider");
 Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLocalizationProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -179,6 +191,7 @@ Object.keys(_ChartsLocalizationProvider).forEach(function (key) {
 var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 Object.keys(_ChartsAxisHighlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxisHighlight[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -190,6 +203,7 @@ Object.keys(_ChartsAxisHighlight).forEach(function (key) {
 var _BarChart = require("@mui/x-charts/BarChart");
 Object.keys(_BarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -201,6 +215,7 @@ Object.keys(_BarChart).forEach(function (key) {
 var _LineChart = require("@mui/x-charts/LineChart");
 Object.keys(_LineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -212,6 +227,7 @@ Object.keys(_LineChart).forEach(function (key) {
 var _PieChart = require("@mui/x-charts/PieChart");
 Object.keys(_PieChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -223,6 +239,7 @@ Object.keys(_PieChart).forEach(function (key) {
 var _ScatterChart = require("@mui/x-charts/ScatterChart");
 Object.keys(_ScatterChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -234,6 +251,7 @@ Object.keys(_ScatterChart).forEach(function (key) {
 var _SparkLineChart = require("@mui/x-charts/SparkLineChart");
 Object.keys(_SparkLineChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _SparkLineChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -245,6 +263,7 @@ Object.keys(_SparkLineChart).forEach(function (key) {
 var _Gauge = require("@mui/x-charts/Gauge");
 Object.keys(_Gauge).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Gauge[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -256,6 +275,7 @@ Object.keys(_Gauge).forEach(function (key) {
 var _RadarChart = require("@mui/x-charts/RadarChart");
 Object.keys(_RadarChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadarChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -267,6 +287,7 @@ Object.keys(_RadarChart).forEach(function (key) {
 var _ChartsSurface = require("@mui/x-charts/ChartsSurface");
 Object.keys(_ChartsSurface).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsSurface[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -278,6 +299,7 @@ Object.keys(_ChartsSurface).forEach(function (key) {
 var _ChartDataProvider = require("@mui/x-charts/ChartDataProvider");
 Object.keys(_ChartDataProvider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartDataProvider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -289,6 +311,7 @@ Object.keys(_ChartDataProvider).forEach(function (key) {
 var _ChartsLabel = require("@mui/x-charts/ChartsLabel");
 Object.keys(_ChartsLabel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsLabel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -297,9 +320,22 @@ Object.keys(_ChartsLabel).forEach(function (key) {
     }
   });
 });
+var _context = require("./context");
+Object.keys(_context).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _context[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _context[key];
+    }
+  });
+});
 var _hooks2 = require("./hooks");
 Object.keys(_hooks2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _hooks2[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -311,6 +347,7 @@ Object.keys(_hooks2).forEach(function (key) {
 var _Heatmap = require("./Heatmap");
 Object.keys(_Heatmap).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Heatmap[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -320,19 +357,10 @@ Object.keys(_Heatmap).forEach(function (key) {
   });
 });
 var _ChartContainerPro = require("./ChartContainerPro");
-Object.keys(_ChartContainerPro).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartContainerPro[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartContainerPro[key];
-    }
-  });
-});
 var _ChartDataProviderPro = require("./ChartDataProviderPro");
 Object.keys(_ChartDataProviderPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartDataProviderPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -344,6 +372,7 @@ Object.keys(_ChartDataProviderPro).forEach(function (key) {
 var _ScatterChartPro = require("./ScatterChartPro");
 Object.keys(_ScatterChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ScatterChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -355,6 +384,7 @@ Object.keys(_ScatterChartPro).forEach(function (key) {
 var _BarChartPro = require("./BarChartPro");
 Object.keys(_BarChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _BarChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -366,6 +396,7 @@ Object.keys(_BarChartPro).forEach(function (key) {
 var _LineChartPro = require("./LineChartPro");
 Object.keys(_LineChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _LineChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -377,6 +408,7 @@ Object.keys(_LineChartPro).forEach(function (key) {
 var _PieChartPro = require("./PieChartPro");
 Object.keys(_PieChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _PieChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -388,6 +420,7 @@ Object.keys(_PieChartPro).forEach(function (key) {
 var _FunnelChart = require("./FunnelChart");
 Object.keys(_FunnelChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _FunnelChart[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -399,6 +432,7 @@ Object.keys(_FunnelChart).forEach(function (key) {
 var _RadarChartPro = require("./RadarChartPro");
 Object.keys(_RadarChartPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _RadarChartPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -410,6 +444,7 @@ Object.keys(_RadarChartPro).forEach(function (key) {
 var _ChartZoomSlider = require("./ChartZoomSlider");
 Object.keys(_ChartZoomSlider).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartZoomSlider[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -421,6 +456,7 @@ Object.keys(_ChartZoomSlider).forEach(function (key) {
 var _ChartsToolbarPro = require("./ChartsToolbarPro");
 Object.keys(_ChartsToolbarPro).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsToolbarPro[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

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/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;