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

package/esm/ScatterChartPro/ScatterChartPro.plugins.d.ts

@@ -1,4 +1,5 @@
 import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature];
+export type ScatterChartProPluginsSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVoronoiSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const SCATTER_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartProPluginsSignatures>;

package/esm/ScatterChartPro/ScatterChartPro.plugins.js

@@ -1,3 +1,4 @@
 import { useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi } from '@mui/x-charts/internals';
+import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
 import { useChartProZoom } from "../internals/plugins/useChartProZoom/index.js";
-export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom];
+export const SCATTER_CHART_PRO_PLUGINS = [useChartZAxis, useChartCartesianAxis, useChartInteraction, useChartHighlight, useChartVoronoi, useChartProZoom, useChartProExport];

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from '@mui/x-charts/ChartsGrid';
 export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsLocalizationProvider';
 export * from '@mui/x-charts/ChartsAxisHighlight';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-beta.3
+ * @mui/x-charts-pro v8.1.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -22,6 +22,7 @@ export * from '@mui/x-charts/ChartsGrid';
 export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsLocalizationProvider';
 export * from '@mui/x-charts/ChartsAxisHighlight';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';

package/esm/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/esm/internals/plugins/allPlugins.js

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

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

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

package/esm/internals/plugins/useChartProExport/index.js

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

package/esm/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/esm/internals/plugins/useChartProExport/print.js

@@ -0,0 +1,72 @@
+import ownerDocument from '@mui/utils/ownerDocument';
+export function printChart(element, {
+  fileName
+} = {}) {
+  const printWindow = buildPrintWindow(fileName);
+  const doc = ownerDocument(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 = ownerDocument(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/esm/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/esm/internals/plugins/useChartProExport/useChartProExport.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { printChart } from "./print.js";
+function waitForAnimationFrame() {
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+  window.requestAnimationFrame(() => {
+    resolve();
+  });
+  return promise;
+}
+export 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();
+        printChart(chartRoot, options);
+      } finally {
+        enableAnimation();
+      }
+    }
+  };
+  return {
+    publicAPI: {
+      exportAsPrint
+    },
+    instance: {
+      exportAsPrint
+    }
+  };
+};
+useChartProExport.params = {};
+useChartProExport.getDefaultizedParams = ({
+  params
+}) => _extends({}, params);
+useChartProExport.getInitialState = () => ({
+  export: {}
+});

package/esm/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/esm/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/esm/internals/plugins/useChartProZoom/useChartProZoom.js

@@ -2,21 +2,35 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useSelector, getSVGPoint, selectorChartDrawingArea, createZoomLookup, selectorChartZoomOptionsLookup } from '@mui/x-charts/internals';
+import { useEventCallback } from '@mui/material/utils';
+import { rafThrottle } from '@mui/x-internals/rafThrottle';
+import debounce from '@mui/utils/debounce';
 import { getDiff, getHorizontalCenterRatio, getPinchScaleRatio, getVerticalCenterRatio, getWheelScaleRatio, isSpanValid, preventDefault, zoomAtPoint } from "./useChartProZoom.utils.js";
 
 // It is helpful to avoid the need to provide the possibly auto-generated id for each axis.
-function initializeZoomData(options) {
+export 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
+    };
+  });
 }
 export const useChartProZoom = ({
   store,
@@ -26,15 +40,15 @@ export const useChartProZoom = ({
 }) => {
   const {
     zoomData: paramsZoomData,
-    onZoomChange
+    onZoomChange: onZoomChangeProp
   } = params;
   const drawingArea = useSelector(store, selectorChartDrawingArea);
   const optionsLookup = useSelector(store, selectorChartZoomOptionsLookup);
   const isZoomEnabled = Object.keys(optionsLookup).length > 0;
+  const onZoomChange = useEventCallback(onZoomChangeProp ?? (() => {}));
 
   // Manage controlled state
-
-  useEnhancedEffect(() => {
+  React.useEffect(() => {
     if (paramsZoomData === undefined) {
       return undefined;
     }
@@ -63,14 +77,14 @@ export const useChartProZoom = ({
     };
   }, [store, paramsZoomData]);
 
-  // Add instance methods
-  const setIsInteracting = React.useCallback(isInteracting => {
-    store.update(prev => _extends({}, prev, {
-      zoom: _extends({}, prev.zoom, {
-        isInteracting
+  // This is debounced. We want to run it only once after the interaction ends.
+  const removeIsInteracting = React.useMemo(() => debounce(() => store.update(prevState => {
+    return _extends({}, prevState, {
+      zoom: _extends({}, 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;
@@ -78,19 +92,25 @@ export const useChartProZoom = ({
       if (prevState.zoom.isControlled) {
         return prevState;
       }
+      removeIsInteracting();
       return _extends({}, prevState, {
         zoom: _extends({}, 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]);
@@ -101,17 +121,10 @@ export 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 = 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 = 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;
@@ -142,6 +155,17 @@ export 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 = getSVGPoint(element, event);
+      throttledHandlePan(touchStart, point);
     };
     const handleDown = event => {
       panningEventCacheRef.current.push(event);
@@ -154,7 +178,6 @@ export const useChartProZoom = ({
         event.preventDefault();
       }
       isDraggingRef.current = true;
-      setIsInteracting(true);
       touchStartRef.current = {
         x: point.x,
         y: point.y,
@@ -163,7 +186,6 @@ export 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;
     };
@@ -178,8 +200,9 @@ export 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(() => {
@@ -187,6 +210,7 @@ export const useChartProZoom = ({
     if (element === null || !isZoomEnabled) {
       return () => {};
     }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const wheelHandler = event => {
       if (element === null) {
         return;
@@ -196,16 +220,13 @@ export 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) {
@@ -230,9 +251,8 @@ export const useChartProZoom = ({
     };
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
-      setIsInteracting(true);
     }
-    function pointerMoveHandler(event) {
+    const pointerMoveHandler = rafThrottle(function pointerMoveHandler(event) {
       if (element === null) {
         return;
       }
@@ -275,15 +295,12 @@ export 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);
@@ -306,11 +323,10 @@ export const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', preventDefault);
       element.removeEventListener('touchmove', 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
@@ -338,11 +354,12 @@ useChartProZoom.getInitialState = params => {
     defaultizedYAxis
   } = params;
   const optionsLookup = _extends({}, createZoomLookup('x')(defaultizedXAxis), 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/esm/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/esm/locales/index.d.ts

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

package/esm/locales/index.js

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

package/index.d.ts

@@ -13,6 +13,7 @@ export * from '@mui/x-charts/ChartsGrid';
 export * from '@mui/x-charts/ChartsText';
 export * from '@mui/x-charts/ChartsTooltip';
 export * from '@mui/x-charts/ChartsLegend';
+export * from '@mui/x-charts/ChartsLocalizationProvider';
 export * from '@mui/x-charts/ChartsAxisHighlight';
 export * from '@mui/x-charts/BarChart';
 export * from '@mui/x-charts/LineChart';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.0.0-beta.3
+ * @mui/x-charts-pro v8.1.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -165,6 +165,17 @@ 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 (key in exports && exports[key] === _ChartsLocalizationProvider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLocalizationProvider[key];
+    }
+  });
+});
 var _ChartsAxisHighlight = require("@mui/x-charts/ChartsAxisHighlight");
 Object.keys(_ChartsAxisHighlight).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;