@mui/x-charts-pro 9.0.0-alpha.0 → 9.0.0-alpha.2

package/internals/plugins/allPlugins.mjs

@@ -0,0 +1,7 @@
+// This file should be removed after creating all plugins in favor of a file per chart type.
+
+import { useChartCartesianAxis, useChartTooltip, useChartInteraction, useChartZAxis, useChartHighlight, useChartPolarAxis, useChartBrush, useChartVisibilityManager } from '@mui/x-charts/internals';
+import { useChartProExport } from "./useChartProExport/index.mjs";
+import { useChartProZoom } from "./useChartProZoom/index.mjs";
+export const ALL_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartPolarAxis, useChartHighlight, useChartVisibilityManager, useChartProZoom, useChartProExport, useChartVisibilityManager];
+export const DEFAULT_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartProZoom, useChartProExport, useChartVisibilityManager];

package/internals/plugins/useChartProExport/exportImage.d.mts

@@ -0,0 +1,3 @@
+import { type ChartImageExportOptions } from "./useChartProExport.types.mjs";
+export declare const getDrawDocument: () => Promise<typeof import("rasterizehtml").drawDocument>;
+export declare function exportImage(element: Element, svg: HTMLElement | SVGElement, params?: ChartImageExportOptions): Promise<void>;

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

@@ -1,3 +1,3 @@
 import { type ChartImageExportOptions } from "./useChartProExport.types.js";
 export declare const getDrawDocument: () => Promise<typeof import("rasterizehtml").drawDocument>;
-export declare function exportImage(element: Element, svg: SVGElement, params?: ChartImageExportOptions): Promise<void>;
+export declare function exportImage(element: Element, svg: HTMLElement | SVGElement, params?: ChartImageExportOptions): Promise<void>;

package/internals/plugins/useChartProExport/exportImage.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.exportImage = exportImage;
 exports.getDrawDocument = void 0;
+var _formatErrorMessage2 = _interopRequireDefault(require("@mui/x-internals/formatErrorMessage"));
 var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _export = require("@mui/x-internals/export");
@@ -16,7 +17,7 @@ const getDrawDocument = async () => {
     const module = await Promise.resolve().then(() => (0, _interopRequireWildcard2.default)(require('rasterizehtml')));
     return (module.default || module).drawDocument;
   } catch (error) {
-    throw new Error(`MUI X Charts: Failed to import 'rasterizehtml' module. This dependency is mandatory when exporting a chart as an image. Make sure you have it installed as a dependency.`, {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Failed to import 'rasterizehtml' module. This dependency is mandatory when exporting a chart as an image. Make sure you have it installed as a dependency.` : (0, _formatErrorMessage2.default)(51), {
       cause: error
     });
   }
@@ -80,7 +81,7 @@ async function exportImage(element, svg, params) {
   canvas.style.height = `${exportDocBodySize.height}px`;
   if (canvas.width === 0 || canvas.height === 0) {
     doc.body.removeChild(iframe);
-    throw new Error(`MUI X Charts: Cannot export an image with zero width or height. Width: ${canvas.width}px. Height: ${canvas.height}px.`);
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Cannot export an image with zero width or height. Width: ${canvas.width}px. Height: ${canvas.height}px.` : (0, _formatErrorMessage2.default)(52, canvas.width, canvas.height));
   }
   try {
     await drawDocument(iframe.contentDocument, canvas, {
@@ -100,12 +101,12 @@ async function exportImage(element, svg, params) {
     canvas.toBlob(b => resolveBlobPromise(b), type, quality);
     blob = await blobPromise;
   } catch (error) {
-    throw new Error('MUI X Charts: Failed to create blob from canvas.', {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Failed to create blob from canvas.' : (0, _formatErrorMessage2.default)(53), {
       cause: error
     });
   }
   if (!blob) {
-    throw new Error('MUI X Charts: Failed to create blob from canvas.');
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Failed to create blob from canvas.' : (0, _formatErrorMessage2.default)(53));
   }
   const url = URL.createObjectURL(blob);
   triggerDownload(url, fileName || document.title);

package/internals/plugins/useChartProExport/exportImage.mjs

@@ -0,0 +1,110 @@
+import _formatErrorMessage from "@mui/x-internals/formatErrorMessage";
+import ownerDocument from '@mui/utils/ownerDocument';
+import { loadStyleSheets } from '@mui/x-internals/export';
+import { applyStyles, copyCanvasesContent, createExportIframe } from "./common.mjs";
+import { defaultOnBeforeExport } from "./defaults.mjs";
+export const getDrawDocument = async () => {
+  try {
+    const module = await import('rasterizehtml');
+    return (module.default || module).drawDocument;
+  } catch (error) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Failed to import 'rasterizehtml' module. This dependency is mandatory when exporting a chart as an image. Make sure you have it installed as a dependency.` : _formatErrorMessage(51), {
+      cause: error
+    });
+  }
+};
+export async function exportImage(element, svg, params) {
+  const {
+    fileName,
+    type = 'image/png',
+    quality = 0.9,
+    onBeforeExport = defaultOnBeforeExport,
+    copyStyles = true,
+    nonce
+  } = params ?? {};
+  const drawDocumentPromise = getDrawDocument();
+  const doc = ownerDocument(element);
+  const iframe = createExportIframe(fileName);
+  /* We apply the min/max width and height to ensure the SVG doesn't resize in the export.
+   * We apply to the original SVG so that the cloned tree will contain the styles and revert these
+   * styles changes after the chart is cloned. */
+  const previousStyles = applyStyles(svg, {
+    width: `${svg.getBoundingClientRect().width}px`
+  });
+  let resolve;
+  const iframeLoadPromise = new Promise(res => {
+    resolve = res;
+  });
+  iframe.onload = async () => {
+    const exportDoc = iframe.contentDocument;
+    const elementClone = element.cloneNode(true);
+    applyStyles(svg, previousStyles);
+    exportDoc.body.replaceChildren(elementClone);
+    exportDoc.body.style.margin = '0px';
+    /* Set display block through styles to ensure that CSS rules that target `body` don't accidentally target this
+     * iframe's body, which might cause the body to have no intrinsic width or height, leading to the canvas having a
+     * size of 0px, which causes the `toBlob` call to return null. */
+    exportDoc.body.style.display = 'block';
+    /* The body's parent has a width of 0, so we use fit-content to ensure that the body adjusts its width to the width
+     * of its children. */
+    exportDoc.body.style.width = 'fit-content';
+    const rootCandidate = element.getRootNode();
+    const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+    if (copyStyles) {
+      await Promise.all(loadStyleSheets(exportDoc, root, nonce));
+    }
+    await copyCanvasesContent(element, elementClone);
+    resolve();
+  };
+  doc.body.appendChild(iframe);
+  await iframeLoadPromise;
+  await onBeforeExport(iframe);
+  const drawDocument = await drawDocumentPromise;
+
+  /* Use the size from the export body in case `onBeforeExport` adds some elements that should be in the export. */
+  const exportDocBodySize = iframe.contentDocument.body.getBoundingClientRect();
+  const canvas = document.createElement('canvas');
+  const ratio = window.devicePixelRatio || 1;
+  canvas.width = exportDocBodySize.width * ratio;
+  canvas.height = exportDocBodySize.height * ratio;
+  canvas.style.width = `${exportDocBodySize.width}px`;
+  canvas.style.height = `${exportDocBodySize.height}px`;
+  if (canvas.width === 0 || canvas.height === 0) {
+    doc.body.removeChild(iframe);
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI X Charts: Cannot export an image with zero width or height. Width: ${canvas.width}px. Height: ${canvas.height}px.` : _formatErrorMessage(52, canvas.width, canvas.height));
+  }
+  try {
+    await drawDocument(iframe.contentDocument, canvas, {
+      // Handle retina displays: https://github.com/cburgmer/rasterizeHTML.js/blob/262b3404d1c469ce4a7750a2976dec09b8ae2d6c/examples/retina.html#L71
+      zoom: ratio,
+      nonce
+    });
+  } finally {
+    doc.body.removeChild(iframe);
+  }
+  let resolveBlobPromise;
+  const blobPromise = new Promise(res => {
+    resolveBlobPromise = res;
+  });
+  let blob;
+  try {
+    canvas.toBlob(b => resolveBlobPromise(b), type, quality);
+    blob = await blobPromise;
+  } catch (error) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Failed to create blob from canvas.' : _formatErrorMessage(53), {
+      cause: error
+    });
+  }
+  if (!blob) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'MUI X Charts: Failed to create blob from canvas.' : _formatErrorMessage(53));
+  }
+  const url = URL.createObjectURL(blob);
+  triggerDownload(url, fileName || document.title);
+  URL.revokeObjectURL(url);
+}
+function triggerDownload(url, name) {
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = name;
+  a.click();
+}

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

@@ -0,0 +1,2 @@
+export * from "./useChartProExport.mjs";
+export * from "./useChartProExport.types.mjs";

package/internals/plugins/useChartProExport/index.mjs

@@ -0,0 +1,2 @@
+export * from "./useChartProExport.mjs";
+export * from "./useChartProExport.types.mjs";

package/internals/plugins/useChartProExport/print.d.mts

@@ -0,0 +1,7 @@
+import { type ChartPrintExportOptions } from "./useChartProExport.types.mjs";
+export declare function printChart(element: Element, {
+  fileName,
+  onBeforeExport,
+  copyStyles,
+  nonce
+}?: ChartPrintExportOptions): void;

package/internals/plugins/useChartProExport/print.mjs

@@ -0,0 +1,35 @@
+import ownerDocument from '@mui/utils/ownerDocument';
+import { loadStyleSheets } from '@mui/x-internals/export';
+import { copyCanvasesContent, createExportIframe } from "./common.mjs";
+import { defaultOnBeforeExport } from "./defaults.mjs";
+export function printChart(element, {
+  fileName,
+  onBeforeExport = defaultOnBeforeExport,
+  copyStyles = true,
+  nonce
+} = {}) {
+  const printWindow = createExportIframe(fileName);
+  const doc = ownerDocument(element);
+  printWindow.onload = async () => {
+    const printDoc = printWindow.contentDocument;
+    const elementClone = element.cloneNode(true);
+    printDoc.body.replaceChildren(elementClone);
+    printDoc.body.style.margin = '0px';
+    const rootCandidate = element.getRootNode();
+    const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+    if (copyStyles) {
+      await Promise.all(loadStyleSheets(printDoc, root, nonce));
+    }
+    await copyCanvasesContent(element, elementClone);
+    const mediaQueryList = printWindow.contentWindow.matchMedia('print');
+    mediaQueryList.addEventListener('change', mql => {
+      const isAfterPrint = mql.matches === false;
+      if (isAfterPrint) {
+        doc.body.removeChild(printWindow);
+      }
+    });
+    await onBeforeExport(printWindow);
+    printWindow.contentWindow.print();
+  };
+  doc.body.appendChild(printWindow);
+}

package/internals/plugins/useChartProExport/useChartProExport.d.mts

@@ -0,0 +1,3 @@
+import { type ChartPlugin } from '@mui/x-charts/internals';
+import { type UseChartProExportSignature } from "./useChartProExport.types.mjs";
+export declare const useChartProExport: ChartPlugin<UseChartProExportSignature>;

package/internals/plugins/useChartProExport/useChartProExport.js

@@ -23,7 +23,7 @@ const useChartProExport = ({
 }) => {
   const {
     chartRootRef,
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const exportAsPrint = async options => {
     const chartRoot = chartRootRef.current;
@@ -42,7 +42,7 @@ const useChartProExport = ({
   };
   const exportAsImage = async options => {
     const chartRoot = chartRootRef.current;
-    const svg = svgRef.current;
+    const svg = chartsLayerContainerRef.current;
     if (chartRoot && svg) {
       const enableAnimation = instance.disableAnimation();
       try {

package/internals/plugins/useChartProExport/useChartProExport.mjs

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { printChart } from "./print.mjs";
+import { exportImage } from "./exportImage.mjs";
+function waitForAnimationFrame() {
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+  window.requestAnimationFrame(() => {
+    resolve();
+  });
+  return promise;
+}
+export const useChartProExport = ({
+  instance
+}) => {
+  const {
+    chartRootRef,
+    chartsLayerContainerRef
+  } = instance;
+  const exportAsPrint = async options => {
+    const chartRoot = chartRootRef.current;
+    if (chartRoot) {
+      const enableAnimation = instance.disableAnimation();
+      try {
+        // Wait for animation frame to ensure the animation finished
+        await waitForAnimationFrame();
+        printChart(chartRoot, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as print:', error);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  const exportAsImage = async options => {
+    const chartRoot = chartRootRef.current;
+    const svg = chartsLayerContainerRef.current;
+    if (chartRoot && svg) {
+      const enableAnimation = instance.disableAnimation();
+      try {
+        // Wait for animation frame to ensure the animation finished
+        await waitForAnimationFrame();
+        await exportImage(chartRoot, svg, options);
+      } catch (error) {
+        console.error('MUI X Charts: Error exporting chart as image:', error);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  return {
+    publicAPI: {
+      exportAsPrint,
+      exportAsImage
+    },
+    instance: {
+      exportAsPrint,
+      exportAsImage
+    }
+  };
+};
+useChartProExport.params = {};
+useChartProExport.getDefaultizedParams = ({
+  params
+}) => _extends({}, params);
+useChartProExport.getInitialState = () => ({
+  export: {}
+});

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

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

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

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

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

@@ -0,0 +1,7 @@
+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: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -16,7 +16,7 @@ const usePanOnDrag = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -38,7 +38,7 @@ const usePanOnDrag = ({
 
   // Add event for chart panning
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     let isInteracting = false;
     const accumulatedChange = {
       x: 0,
@@ -85,6 +85,6 @@ const usePanOnDrag = ({
       panEndHandler.cleanup();
       throttledCallback.clear();
     };
-  }, [instance, svgRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+  }, [instance, chartsLayerContainerRef, isPanOnDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 };
 exports.usePanOnDrag = usePanOnDrag;

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

@@ -0,0 +1,83 @@
+'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";
+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;
+      setZoomDataCallback(prev => translateZoom(prev, {
+        x,
+        y: -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

@@ -0,0 +1,7 @@
+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: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -16,7 +16,7 @@ const usePanOnPressAndDrag = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -43,7 +43,7 @@ const usePanOnPressAndDrag = ({
 
   // Add event for chart panning with press and drag
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     if (element === null || !isPanOnPressAndDragEnabled) {
       return () => {};
     }
@@ -89,6 +89,6 @@ const usePanOnPressAndDrag = ({
       pressAndDragEndHandler.cleanup();
       throttledCallback.clear();
     };
-  }, [instance, svgRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, isInteracting]);
+  }, [instance, chartsLayerContainerRef, isPanOnPressAndDragEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store, isInteracting]);
 };
 exports.usePanOnPressAndDrag = usePanOnPressAndDrag;

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

@@ -0,0 +1,87 @@
+'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";
+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;
+      setZoomDataCallback(prev => translateZoom(prev, {
+        x,
+        y: -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/usePanOnWheel.d.mts

@@ -0,0 +1,7 @@
+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 usePanOnWheel: ({
+  store,
+  instance
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;

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

@@ -16,7 +16,7 @@ const usePanOnWheel = ({
   instance
 }, setZoomDataCallback) => {
   const {
-    svgRef
+    chartsLayerContainerRef
   } = instance;
   const drawingArea = store.use(_internals.selectorChartDrawingArea);
   const optionsLookup = store.use(_internals.selectorChartZoomOptionsLookup);
@@ -35,7 +35,7 @@ const usePanOnWheel = ({
 
   // Add event for chart pan on wheel
   React.useEffect(() => {
-    const element = svgRef.current;
+    const element = chartsLayerContainerRef.current;
     const accumulatedChange = {
       x: 0,
       y: 0
@@ -102,6 +102,6 @@ const usePanOnWheel = ({
       startedOutsideRef.current = false;
       rafThrottledSetZoomData.clear();
     };
-  }, [svgRef, drawingArea, isPanOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store, config]);
+  }, [chartsLayerContainerRef, drawingArea, isPanOnWheelEnabled, optionsLookup, instance, setZoomDataCallback, store, config]);
 };
 exports.usePanOnWheel = usePanOnWheel;