@mui/x-charts-pro 8.0.0 → 8.1.0

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/useChartProExport/useChartProExport.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,17 +7,30 @@ 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,
@@ -72,10 +85,7 @@ export const useChartProZoom = ({
       })
     });
   }), 166), [store]);
-
-  // This is throttled. We want to run it at most once per frame.
-  // By joining the two, we ensure that interacting and zooming are in sync.
-  const setZoomDataCallback = React.useMemo(() => rafThrottle(zoomData => {
+  const setZoomDataCallback = React.useCallback(zoomData => {
     store.update(prevState => {
       const newZoomData = typeof zoomData === 'function' ? zoomData([...prevState.zoom.zoomData]) : zoomData;
       onZoomChange?.(newZoomData);
@@ -90,10 +100,9 @@ export const useChartProZoom = ({
         })
       });
     });
-  }), [onZoomChange, store, removeIsInteracting]);
+  }, [onZoomChange, store, removeIsInteracting]);
   React.useEffect(() => {
     return () => {
-      setZoomDataCallback.clear();
       removeIsInteracting.clear();
     };
   }, [setZoomDataCallback, removeIsInteracting]);
@@ -112,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;
@@ -153,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);
@@ -187,6 +200,7 @@ export const useChartProZoom = ({
       document.removeEventListener('pointerup', handleUp);
       document.removeEventListener('pointercancel', handleUp);
       document.removeEventListener('pointerleave', handleUp);
+      throttledHandlePan.clear();
     };
   }, [instance, svgRef, isDraggingRef, isPanEnabled, optionsLookup, drawingArea.width, drawingArea.height, setZoomDataCallback, store]);
 
@@ -196,6 +210,7 @@ export const useChartProZoom = ({
     if (element === null || !isZoomEnabled) {
       return () => {};
     }
+    const rafThrottledSetZoomData = rafThrottle(setZoomDataCallback);
     const wheelHandler = event => {
       if (element === null) {
         return;
@@ -205,7 +220,13 @@ export const useChartProZoom = ({
         return;
       }
       event.preventDefault();
-      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) {
@@ -231,7 +252,7 @@ export const useChartProZoom = ({
     function pointerDownHandler(event) {
       zoomEventCacheRef.current.push(event);
     }
-    function pointerMoveHandler(event) {
+    const pointerMoveHandler = rafThrottle(function pointerMoveHandler(event) {
       if (element === null) {
         return;
       }
@@ -274,7 +295,7 @@ 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) {
@@ -302,6 +323,8 @@ export const useChartProZoom = ({
       element.removeEventListener('pointerleave', pointerUpHandler);
       element.removeEventListener('touchstart', preventDefault);
       element.removeEventListener('touchmove', preventDefault);
+      pointerMoveHandler.clear();
+      rafThrottledSetZoomData.clear();
     };
   }, [svgRef, drawingArea, isZoomEnabled, optionsLookup, instance, setZoomDataCallback]);
   return {
@@ -331,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/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
+ * @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;

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