@mui/x-charts-pro 8.0.0-beta.3 → 8.1.0

package/internals/plugins/allPlugins.d.ts

@@ -1,8 +1,9 @@
 import { ChartSeriesType, ConvertSignaturesIntoPlugins, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartZAxisSignature, UseChartHighlightSignature, UseChartPolarAxisSignature } from '@mui/x-charts/internals';
+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];
+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<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 type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature];
+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 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<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<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>>)[];

package/internals/plugins/allPlugins.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DEFAULT_PLUGINS = exports.ALL_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
+var _useChartProExport = require("./useChartProExport");
 var _useChartProZoom = require("./useChartProZoom");
 // This file should be removed after creating all plugins in favor of a file per chart type.
 
-const ALL_PLUGINS = exports.ALL_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartPolarAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom];
-const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom];
+const ALL_PLUGINS = exports.ALL_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartPolarAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const DEFAULT_PLUGINS = exports.DEFAULT_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

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

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

package/internals/plugins/useChartProExport/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useChartProExport = require("./useChartProExport");
+Object.keys(_useChartProExport).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartProExport[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartProExport[key];
+    }
+  });
+});
+var _useChartProExport2 = require("./useChartProExport.types");
+Object.keys(_useChartProExport2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartProExport2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartProExport2[key];
+    }
+  });
+});

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

@@ -0,0 +1,4 @@
+import { ChartPrintExportOptions } from "./useChartProExport.types.js";
+export declare function printChart(element: HTMLElement | SVGElement, {
+  fileName
+}?: ChartPrintExportOptions): void;

package/internals/plugins/useChartProExport/print.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.printChart = printChart;
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+function printChart(element, {
+  fileName
+} = {}) {
+  const printWindow = buildPrintWindow(fileName);
+  const doc = (0, _ownerDocument.default)(element);
+  printWindow.onload = async () => {
+    const printDoc = printWindow.contentDocument;
+    const elementClone = element.cloneNode(true);
+    const container = document.createElement('div');
+    container.appendChild(elementClone);
+    printDoc.body.innerHTML = container.innerHTML;
+    await loadStyleSheets(printDoc, element);
+    printWindow.contentWindow.print();
+    const mediaQueryList = printWindow.contentWindow.matchMedia('print');
+    mediaQueryList.addEventListener('change', mql => {
+      const isAfterPrint = mql.matches === false;
+      if (isAfterPrint) {
+        doc.body.removeChild(printWindow);
+      }
+    });
+  };
+  doc.body.appendChild(printWindow);
+}
+function buildPrintWindow(title) {
+  const iframeEl = document.createElement('iframe');
+  iframeEl.style.position = 'absolute';
+  iframeEl.style.width = '0px';
+  iframeEl.style.height = '0px';
+  iframeEl.title = title || document.title;
+  return iframeEl;
+}
+function loadStyleSheets(printDoc, element) {
+  const stylesheetLoadPromises = [];
+  const doc = (0, _ownerDocument.default)(element);
+  const rootCandidate = element.getRootNode();
+  const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
+  const headStyleElements = root.querySelectorAll("style, link[rel='stylesheet']");
+  for (let i = 0; i < headStyleElements.length; i += 1) {
+    const node = headStyleElements[i];
+    if (node.tagName === 'STYLE') {
+      const newHeadStyleElements = printDoc.createElement(node.tagName);
+      const sheet = node.sheet;
+      if (sheet) {
+        let styleCSS = '';
+        // NOTE: for-of is not supported by IE
+        for (let j = 0; j < sheet.cssRules.length; j += 1) {
+          if (typeof sheet.cssRules[j].cssText === 'string') {
+            styleCSS += `${sheet.cssRules[j].cssText}\r\n`;
+          }
+        }
+        newHeadStyleElements.appendChild(printDoc.createTextNode(styleCSS));
+        printDoc.head.appendChild(newHeadStyleElements);
+      }
+    } else if (node.getAttribute('href')) {
+      // If `href` tag is empty, avoid loading these links
+
+      const newHeadStyleElements = printDoc.createElement(node.tagName);
+      for (let j = 0; j < node.attributes.length; j += 1) {
+        const attr = node.attributes[j];
+        if (attr) {
+          newHeadStyleElements.setAttribute(attr.nodeName, attr.nodeValue || '');
+        }
+      }
+      stylesheetLoadPromises.push(new Promise(resolve => {
+        newHeadStyleElements.addEventListener('load', () => resolve());
+      }));
+      printDoc.head.appendChild(newHeadStyleElements);
+    }
+  }
+  return Promise.all(stylesheetLoadPromises);
+}

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

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

package/internals/plugins/useChartProExport/useChartProExport.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartProExport = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _print = require("./print");
+function waitForAnimationFrame() {
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+  window.requestAnimationFrame(() => {
+    resolve();
+  });
+  return promise;
+}
+const useChartProExport = ({
+  chartRootRef,
+  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();
+        (0, _print.printChart)(chartRoot, options);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  return {
+    publicAPI: {
+      exportAsPrint
+    },
+    instance: {
+      exportAsPrint
+    }
+  };
+};
+exports.useChartProExport = useChartProExport;
+useChartProExport.params = {};
+useChartProExport.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params);
+useChartProExport.getInitialState = () => ({
+  export: {}
+});

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

@@ -0,0 +1,35 @@
+import { UseChartSeriesSignature, ChartPluginSignature, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
+export interface UseChartProExportParameters {}
+export type UseChartProExportDefaultizedParameters = UseChartProExportParameters;
+export interface UseChartProExportState {
+  export: {};
+}
+/**
+ * The options to apply on the Print export.
+ * @demos
+ *   - [Print export](/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.
+   */
+  fileName?: string;
+}
+export interface UseChartProExportPublicApi {
+  /**
+   * Opens the browser's print dialog, which can be used to print the chart or export it as PDF.
+   * @param {ChartPrintExportOptions} options Options to customize the print export.
+   * @returns {void}
+   */
+  exportAsPrint: (options?: ChartPrintExportOptions) => void;
+}
+export interface UseChartProExportInstance extends UseChartProExportPublicApi {}
+export type UseChartProExportSignature = ChartPluginSignature<{
+  params: UseChartProExportParameters;
+  defaultizedParams: UseChartProExportDefaultizedParameters;
+  state: UseChartProExportState;
+  publicAPI: UseChartProExportPublicApi;
+  instance: UseChartProExportInstance;
+  dependencies: [UseChartSeriesSignature, UseChartCartesianAxisSignature];
+}>;

package/internals/plugins/useChartProExport/useChartProExport.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/internals/plugins/useChartProZoom/useChartProZoom.d.ts

@@ -1,3 +1,4 @@
-import { ChartPlugin } from '@mui/x-charts/internals';
+import { ChartPlugin, AxisId, DefaultizedZoomOptions, ZoomData } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
+export declare function initializeZoomData(options: Record<AxisId, DefaultizedZoomOptions>, zoomData?: readonly ZoomData[]): ZoomData[];
 export declare const useChartProZoom: ChartPlugin<UseChartProZoomSignature>;

package/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -6,23 +6,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.initializeZoomData = initializeZoomData;
 exports.useChartProZoom = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _internals = require("@mui/x-charts/internals");
+var _utils = require("@mui/material/utils");
+var _rafThrottle = require("@mui/x-internals/rafThrottle");
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _useChartProZoom = require("./useChartProZoom.utils");
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-function initializeZoomData(options) {
+function initializeZoomData(options, zoomData) {
+  const zoomDataMap = new Map();
+  zoomData?.forEach(zoom => {
+    const option = options[zoom.axisId];
+    if (option) {
+      zoomDataMap.set(zoom.axisId, zoom);
+    }
+  });
   return Object.values(options).map(({
     axisId,
     minStart: start,
     maxEnd: end
-  }) => ({
-    axisId,
-    start,
-    end
-  }));
+  }) => {
+    if (zoomDataMap.has(axisId)) {
+      return zoomDataMap.get(axisId);
+    }
+    return {
+      axisId,
+      start,
+      end
+    };
+  });
 }
 const useChartProZoom = ({
   store,
@@ -32,15 +47,15 @@ const useChartProZoom = ({
 }) => {
   const {
     zoomData: paramsZoomData,
-    onZoomChange
+    onZoomChange: onZoomChangeProp
   } = params;
   const drawingArea = (0, _internals.useSelector)(store, _internals.selectorChartDrawingArea);
   const optionsLookup = (0, _internals.useSelector)(store, _internals.selectorChartZoomOptionsLookup);
   const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const onZoomChange = (0, _utils.useEventCallback)(onZoomChangeProp ?? (() => {}));
 
   // Manage controlled state
-
-  (0, _useEnhancedEffect.default)(() => {
+  React.useEffect(() => {
     if (paramsZoomData === undefined) {
       return undefined;
     }
@@ -69,14 +84,14 @@ const useChartProZoom = ({
     };
   }, [store, paramsZoomData]);
 
-  // Add instance methods
-  const setIsInteracting = React.useCallback(isInteracting => {
-    store.update(prev => (0, _extends2.default)({}, prev, {
-      zoom: (0, _extends2.default)({}, prev.zoom, {
-        isInteracting
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => (0, _debounce.default)(() => store.update(prevState => {
+    return (0, _extends2.default)({}, prevState, {
+      zoom: (0, _extends2.default)({}, prevState.zoom, {
+        isInteracting: false
       })
-    }));
-  }, [store]);
+    });
+  }), 166), [store]);
   const setZoomDataCallback = React.useCallback(zoomData => {
     store.update(prevState => {
       const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
@@ -84,19 +99,25 @@ const useChartProZoom = ({
       if (prevState.zoom.isControlled) {
         return prevState;
       }
+      removeIsInteracting();
       return (0, _extends2.default)({}, prevState, {
         zoom: (0, _extends2.default)({}, prevState.zoom, {
+          isInteracting: true,
           zoomData: newZoomData
         })
       });
     });
-  }, [onZoomChange, store]);
+  }, [onZoomChange, store, removeIsInteracting]);
+  React.useEffect(() => {
+    return () => {
+      removeIsInteracting.clear();
+    };
+  }, [setZoomDataCallback, removeIsInteracting]);
 
   // Add events
   const panningEventCacheRef = React.useRef([]);
   const zoomEventCacheRef = React.useRef([]);
   const eventPrevDiff = React.useRef(0);
-  const interactionTimeoutRef = React.useRef(undefined);
 
   // Add event for chart panning
   const isPanEnabled = React.useMemo(() => Object.values(optionsLookup).some(v => v.panning) || false, [optionsLookup]);
@@ -107,17 +128,10 @@ const useChartProZoom = ({
     if (element === null || !isPanEnabled) {
       return () => {};
     }
-    const handlePan = event => {
-      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
-        return;
-      }
-      if (touchStartRef.current == null) {
-        return;
-      }
-      const point = (0, _internals.getSVGPoint)(element, event);
-      const movementX = point.x - touchStartRef.current.x;
-      const movementY = (point.y - touchStartRef.current.y) * -1;
-      const newZoomData = touchStartRef.current.zoomData.map(zoom => {
+    const throttledHandlePan = (0, _rafThrottle.rafThrottle)((touchStart, point) => {
+      const movementX = point.x - touchStart.x;
+      const movementY = (point.y - touchStart.y) * -1;
+      const newZoomData = touchStart.zoomData.map(zoom => {
         const options = optionsLookup[zoom.axisId];
         if (!options || !options.panning) {
           return zoom;
@@ -148,6 +162,17 @@ const useChartProZoom = ({
         });
       });
       setZoomDataCallback(newZoomData);
+    });
+    const handlePan = event => {
+      if (element === null || !isDraggingRef.current || panningEventCacheRef.current.length > 1) {
+        return;
+      }
+      if (touchStartRef.current == null) {
+        return;
+      }
+      const touchStart = touchStartRef.current;
+      const point = (0, _internals.getSVGPoint)(element, event);
+      throttledHandlePan(touchStart, point);
     };
     const handleDown = event => {
       panningEventCacheRef.current.push(event);
@@ -160,7 +185,6 @@ const useChartProZoom = ({
         event.preventDefault();
       }
       isDraggingRef.current = true;
-      setIsInteracting(true);
       touchStartRef.current = {
         x: point.x,
         y: point.y,
@@ -169,7 +193,6 @@ const useChartProZoom = ({
     };
     const handleUp = event => {
       panningEventCacheRef.current.splice(panningEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
-      setIsInteracting(false);
       isDraggingRef.current = false;
       touchStartRef.current = null;
     };
@@ -184,8 +207,9 @@ const useChartProZoom = ({
       document.removeEventListener('pointerup', handleUp);
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
+      throttledHandlePan.clear();
     };
-  }, [instance, svgRef, isDraggingRef, setIsInteracting, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
+  }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 
   // Add event for chart zoom in/out
   React.useEffect(() => {
@@ -193,6 +217,7 @@ const useChartProZoom = ({
     if (element === null || !isZoomEnabled) {
       return () => {};
     }
+    const rafThrottledSetZoomData = (0, _rafThrottle.rafThrottle)(setZoomDataCallback);
     const wheelHandler = event => {
       if (element === null) {
         return;
@@ -202,16 +227,13 @@ const useChartProZoom = ({
         return;
       }
       event.preventDefault();
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
-      setIsInteracting(true);
-      // Debounce transition to `isInteractive=false`.
-      // Useful because wheel events don't have an "end" event.
-      interactionTimeoutRef.current = window.setTimeout(() => {
-        setIsInteracting(false);
-      }, 166);
-      setZoomDataCallback(prevZoomData => {
+
+      /*
+       * Need to throttle `setZoomDataCallback` instead of `wheelHandler` because we're calling `event.preventDefault()`.
+       * If we throttle the event, then some events' default behavior won't be prevented and the page will scroll while
+       * the user is trying to zoom in.
+       */
+      rafThrottledSetZoomData(prevZoomData => {
         return prevZoomData.map(zoom => {
           const option = optionsLookup[zoom.axisId];
           if (!option) {
@@ -236,9 +258,8 @@ const useChartProZoom = ({
     };
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
-      setIsInteracting(true);
     }
-    function pointerMoveHandler(event) {
+    const pointerMoveHandler = (0, _rafThrottle.rafThrottle)(function pointerMoveHandler(event) {
       if (element === null) {
         return;
       }
@@ -281,15 +302,12 @@ const useChartProZoom = ({
         eventPrevDiff.current = curDiff;
         return newZoomData;
       });
-    }
+    });
     function pointerUpHandler(event) {
       zoomEventCacheRef.current.splice(zoomEventCacheRef.current.findIndex(cachedEvent => cachedEvent.pointerId === event.pointerId), 1);
       if (zoomEventCacheRef.current.length < 2) {
         eventPrevDiff.current = 0;
       }
-      if (event.type === 'pointerup' || event.type === 'pointercancel') {
-        setIsInteracting(false);
-      }
     }
     element.addEventListener('wheel', wheelHandler);
     element.addEventListener('pointerdown', pointerDownHandler);
@@ -312,11 +330,10 @@ const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', _useChartProZoom.preventDefault);
       element.removeEventListener('touchmove', _useChartProZoom.preventDefault);
-      if (interactionTimeoutRef.current) {
-        clearTimeout(interactionTimeoutRef.current);
-      }
+      pointerMoveHandler.clear();
+      rafThrottledSetZoomData.clear();
     };
-  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, setIsInteracting, instance, setZoomDataCallback]);
+  }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
   return {
     publicAPI: {
       setZoomData: setZoomDataCallback
@@ -345,11 +362,12 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = (0, _extends2.default)({}, (0, _internals.createZoomLookup)('x')(defaultizedXAxis), (0, _internals.createZoomLookup)('y')(defaultizedYAxis));
+  const userZoomData =
+  // eslint-disable-next-line no-nested-ternary
+  zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : undefined;
   return {
     zoom: {
-      zoomData:
-      // eslint-disable-next-line no-nested-ternary
-      zoomData !== undefined ? zoomData : initialZoom !== undefined ? initialZoom : initializeZoomData(optionsLookup),
+      zoomData: initializeZoomData(optionsLookup, userZoomData),
       isInteracting: false,
       isControlled: zoomData !== undefined
     }

package/internals/plugins/useChartProZoom/useChartProZoom.selectors.d.ts

@@ -1,7 +1,7 @@
 import { ChartRootSelector } from '@mui/x-charts/internals';
 import { UseChartProZoomSignature } from "./useChartProZoom.types.js";
 export declare const selectorChartZoomState: ChartRootSelector<UseChartProZoomSignature>;
-export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
+export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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("./useChartProZoom.types").UseChartProZoomState & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -32,7 +32,7 @@ export declare const selectorChartZoomIsInteracting: ((state: import("@mui/x-cha
   argsMemoize: typeof import("reselect").weakMapMemoize;
   memoize: typeof import("reselect").weakMapMemoize;
 };
-export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }) => boolean) & {
   clearCache: () => void;
@@ -52,7 +52,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     resetResultsCount: () => void;
   };
   lastResult: () => boolean;
-  dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+  dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
     cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
   }) => {
     [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
@@ -78,7 +78,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
       [x: string]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
       [x: number]: import("@mui/x-charts/internals").DefaultizedZoomOptions;
     };
-    dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
       cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
     }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
       clearCache: () => void;
@@ -92,7 +92,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
         resetResultsCount: () => void;
       };
       lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+      dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
       }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsXAxisProps>[] | undefined) & {
         clearCache: () => void;
@@ -131,7 +131,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
     } & {
       memoize: typeof import("reselect").weakMapMemoize;
       argsMemoize: typeof import("reselect").weakMapMemoize;
-    }, ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+    }, ((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
       cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
     }) => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>) & {
       clearCache: () => void;
@@ -145,7 +145,7 @@ export declare const selectorChartZoomIsEnabled: ((state: import("@mui/x-charts/
         resetResultsCount: () => void;
       };
       lastResult: () => Record<import("@mui/x-charts/internals").AxisId, import("@mui/x-charts/internals").DefaultizedZoomOptions>;
-      dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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> & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
+      dependencies: [((state: import("@mui/x-charts/internals/plugins/corePlugins/useChartId/useChartId.types").UseChartIdState & 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 & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
         cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
       }) => import("@mui/x-charts").AxisConfig<keyof import("@mui/x-charts/internals").AxisScaleConfig, any, import("@mui/x-charts").ChartsYAxisProps>[] | undefined) & {
         clearCache: () => void;

package/locales/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/locales';

package/locales/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _locales = require("@mui/x-charts/locales");
+Object.keys(_locales).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _locales[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _locales[key];
+    }
+  });
+});