@mui/x-charts-pro 8.5.3 → 8.7.0

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxis.js

@@ -45,39 +45,51 @@ export const useChartFunnelAxis = ({
   }, [seriesConfig, drawingArea, xAxis, yAxis, dataset, store, gap]);
   React.useEffect(() => {
     const element = svgRef.current;
-    if (!isInteractionEnabled || element === null || params.disableAxisListener) {
+    if (!isInteractionEnabled || !element || params.disableAxisListener) {
       return () => {};
     }
-    const handleOut = () => {
-      instance.cleanInteraction?.();
-    };
-    const handleMove = event => {
-      const target = 'targetTouches' in event ? event.targetTouches[0] : event;
-      const svgPoint = getSVGPoint(element, target);
-      if (!instance.isPointInside(svgPoint.x, svgPoint.y, event.target)) {
+
+    // Clean the interaction when the mouse leaves the chart.
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         instance.cleanInteraction?.();
-        return;
       }
-      instance.setPointerCoordinate?.(svgPoint);
-    };
-    const handleDown = event => {
-      const target = event.currentTarget;
-      if (!target) {
-        return;
+    });
+    const panEndHandler = instance.addInteractionListener('panEnd', event => {
+      if (!event.detail.activeGestures.move) {
+        instance.cleanInteraction?.();
       }
-      if ('hasPointerCapture' in target && target.hasPointerCapture(event.pointerId)) {
-        target.releasePointerCapture(event.pointerId);
+    });
+    const pressEndHandler = instance.addInteractionListener('quickPressEnd', event => {
+      if (!event.detail.activeGestures.move && !event.detail.activeGestures.pan) {
+        instance.cleanInteraction?.();
+      }
+    });
+    const gestureHandler = event => {
+      const srvEvent = event.detail.srcEvent;
+      const target = event.detail.target;
+      const svgPoint = getSVGPoint(element, srvEvent);
+      // Release the pointer capture if we are panning, as this would cause the tooltip to
+      // be locked to the first "section" it touches.
+      if (event.detail.srcEvent.buttons >= 1 && target?.hasPointerCapture(event.detail.srcEvent.pointerId)) {
+        target?.releasePointerCapture(event.detail.srcEvent.pointerId);
       }
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y, target)) {
+        instance.cleanInteraction?.();
+        return;
+      }
+      instance.setPointerCoordinate?.(svgPoint);
     };
-    element.addEventListener('pointerdown', handleDown);
-    element.addEventListener('pointermove', handleMove);
-    element.addEventListener('pointercancel', handleOut);
-    element.addEventListener('pointerleave', handleOut);
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
+    const pressHandler = instance.addInteractionListener('quickPress', gestureHandler);
     return () => {
-      element.removeEventListener('pointerdown', handleDown);
-      element.removeEventListener('pointermove', handleMove);
-      element.removeEventListener('pointercancel', handleOut);
-      element.removeEventListener('pointerleave', handleOut);
+      moveHandler.cleanup();
+      moveEndHandler.cleanup();
+      panHandler.cleanup();
+      panEndHandler.cleanup();
+      pressHandler.cleanup();
+      pressEndHandler.cleanup();
     };
   }, [svgRef, instance, params.disableAxisListener, isInteractionEnabled]);
   React.useEffect(() => {
@@ -86,8 +98,7 @@ export const useChartFunnelAxis = ({
     if (element === null || !onAxisClick) {
       return () => {};
     }
-    const handleMouseClick = event => {
-      event.preventDefault();
+    const axisClickHandler = instance.addInteractionListener('tap', event => {
       const {
         axis: xAxisWithScale,
         axisIds: xAxisIds
@@ -101,7 +112,7 @@ export const useChartFunnelAxis = ({
       const usedYAxis = yAxisIds[0];
       let dataIndex = null;
       let isXAxis = false;
-      const svgPoint = getSVGPoint(element, event);
+      const svgPoint = getSVGPoint(element, event.detail.srcEvent);
       const xIndex = getCartesianAxisIndex(xAxisWithScale[usedXAxis], svgPoint.x);
       isXAxis = xIndex !== -1;
       dataIndex = isXAxis ? xIndex : getCartesianAxisIndex(yAxisWithScale[usedYAxis], svgPoint.y);
@@ -122,17 +133,16 @@ export const useChartFunnelAxis = ({
           seriesValues[seriesId] = seriesItem.data[dataIndex].value;
         }
       });
-      onAxisClick(event, {
+      onAxisClick(event.detail.srcEvent, {
         dataIndex,
         axisValue,
         seriesValues
       });
-    };
-    element.addEventListener('click', handleMouseClick);
+    });
     return () => {
-      element.removeEventListener('click', handleMouseClick);
+      axisClickHandler.cleanup();
     };
-  }, [params.onAxisClick, svgRef, store]);
+  }, [params.onAxisClick, svgRef, store, instance]);
   return {};
 };
 useChartFunnelAxis.params = {

package/esm/FunnelChart/funnelAxisPlugin/useChartFunnelAxisRendering.selectors.d.ts

@@ -3,7 +3,7 @@ import { UseChartFunnelAxisSignature } from "./useChartFunnelAxis.types.js";
 export declare const selectorFunnel: (state: ChartState<[], [UseChartFunnelAxisSignature]>) => {
   gap: number;
 } | undefined;
-export declare const selectorFunnelGap: import("reselect").Selector<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<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
+export declare const selectorFunnelGap: import("reselect").Selector<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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<Pick<import("@mui/x-charts/internals").UseChartCartesianAxisState, "cartesianAxis"> & {
   funnel: {
     gap: number;
   };
@@ -12,7 +12,7 @@ export declare const selectorFunnelGap: import("reselect").Selector<import("@mui
 } & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, number, []>;
-export declare const selectorChartXAxis: import("reselect").Selector<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> & {
+export declare const selectorChartXAxis: import("reselect").Selector<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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
@@ -33,7 +33,7 @@ export declare const selectorChartXAxis: import("reselect").Selector<import("@mu
 }> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 }, import("./computeAxisValue.js").ComputeResult<import("@mui/x-charts").ChartsXAxisProps>, []>;
-export declare const selectorChartYAxis: import("reselect").Selector<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> & {
+export declare const selectorChartYAxis: import("reselect").Selector<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("@mui/x-charts/internals").UseChartInteractionListenerState & Partial<import("@mui/x-charts/internals").UseChartCartesianAxisState> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;
 } & Partial<{}> & {
   cacheKey: import("@mui/x-charts/internals").ChartStateCacheKey;

package/esm/{ChartContainerPro → context}/ChartProApi.d.ts

@@ -7,7 +7,7 @@ import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugi
 import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
 import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
 import { PieChartProPluginSignatures } from "../PieChartPro/PieChartPro.plugins.js";
-type PluginsPerSeriesType = {
+export type ProPluginsPerSeriesType = {
   heatmap: HeatmapPluginsSignatures;
   line: LineChartProPluginsSignatures;
   scatter: ScatterChartProPluginsSignatures;
@@ -24,5 +24,4 @@ type PluginsPerSeriesType = {
  * If the chart is being created using composition, the `composition` value can be used.
  * @example ChartProApi<'composition'>
  */
-export type ChartProApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
-export {};
+export type ChartProApi<ChartType extends keyof ProPluginsPerSeriesType | undefined = undefined, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)> = ChartPublicAPI<Signatures>;

package/esm/context/index.d.ts

@@ -1 +1,2 @@
-export * from "./useChartApiContext.js";
+export * from "./useChartProApiContext.js";
+export type { ChartProApi } from "./ChartProApi.js";

package/esm/context/index.js

@@ -1 +1,2 @@
-export * from "./useChartApiContext.js";
+export * from "./useChartProApiContext.js";
+export {};

package/esm/context/useChartProApiContext.d.ts

@@ -0,0 +1,9 @@
+import { ChartProApi } from "./ChartProApi.js";
+/**
+ * The `useChartProApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartProApiContext<ChartProApi<'bar'>>();
+ */
+export declare function useChartProApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/esm/context/{useChartApiContext.js → useChartProApiContext.js}

@@ -1,11 +1,11 @@
 import { useChartApiContext as useChartApiContextCommunity } from '@mui/x-charts/context';
 /**
- * The `useChartApiContext` hook provides access to the chart API.
+ * The `useChartProApiContext` hook provides access to the chart API.
  * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
  * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
  * @example
- * const apiRef = useChartApiContext<ChartProApi<'bar'>>();
+ * const apiRef = useChartProApiContext<ChartProApi<'bar'>>();
  */
-export function useChartApiContext() {
+export function useChartProApiContext() {
   return useChartApiContextCommunity();
 }

package/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./useHeatmapSeries.js";
 export * from "./useFunnelSeries.js";
-export * from "./zoom/index.js";
+export * from "./zoom/index.js";
+export * from "./useChartProApiRef.js";

package/esm/hooks/index.js

@@ -1,3 +1,4 @@
 export * from "./useHeatmapSeries.js";
 export * from "./useFunnelSeries.js";
-export * from "./zoom/index.js";
+export * from "./zoom/index.js";
+export * from "./useChartProApiRef.js";

package/esm/hooks/useChartProApiRef.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ChartAnyPluginSignature } from '@mui/x-charts/internals';
+import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { ProPluginsPerSeriesType, type ChartProApi } from "../context/ChartProApi.js";
+/**
+ * Hook that instantiates a [[ChartProApiRef]].
+ * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+ * @example
+ * ```tsx
+ * const barApiRef = useChartProApiRef<'bar'>();
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be passed to the chart component and used to interact with the chart.
+ * <BarChart apiRef={barApiRef} />
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be used to access chart methods and properties.
+ * barApiRef.current?.getSeries();
+ * ```
+ */
+export declare const useChartProApiRef: <ChartType extends keyof ProPluginsPerSeriesType = never, Signatures extends readonly ChartAnyPluginSignature[] = (ChartType extends keyof ProPluginsPerSeriesType ? ProPluginsPerSeriesType[ChartType] : AllPluginSignatures)>() => React.RefObject<ChartProApi<ChartType, Signatures> | undefined>;

package/esm/hooks/useChartProApiRef.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+/**
+ * Hook that instantiates a [[ChartProApiRef]].
+ * The chart type needs to be given as the generic parameter to narrow down the API to the specific chart type.
+ * @example
+ * ```tsx
+ * const barApiRef = useChartProApiRef<'bar'>();
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be passed to the chart component and used to interact with the chart.
+ * <BarChart apiRef={barApiRef} />
+ * ```
+ * @example
+ * ```tsx
+ * // The API can be used to access chart methods and properties.
+ * barApiRef.current?.getSeries();
+ * ```
+ */
+export const useChartProApiRef = () => React.useRef(undefined);

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 import "./typeOverloads/modules.js";
 export * from '@mui/x-charts/constants';
-export * from '@mui/x-charts/context';
+export type { FadeOptions, HighlightItemData, HighlightOptions, HighlightScope } from '@mui/x-charts/context';
 export * from '@mui/x-charts/hooks';
 export * from '@mui/x-charts/colorPalettes';
 export * from '@mui/x-charts/models';
@@ -26,9 +26,11 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 export type { ZoomData, ZoomFilterMode, ZoomSliderShowTooltip, ZoomOptions, ZoomSliderOptions } from '@mui/x-charts/internals';
+export * from "./context/index.js";
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
-export * from "./ChartContainerPro/index.js";
+export { ChartContainerPro } from "./ChartContainerPro/index.js";
+export type { ChartContainerProProps } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";
@@ -37,4 +39,5 @@ export * from "./PieChartPro/index.js";
 export * from "./FunnelChart/index.js";
 export * from "./RadarChartPro/index.js";
 export * from "./ChartZoomSlider/index.js";
-export * from "./ChartsToolbarPro/index.js";
+export * from "./ChartsToolbarPro/index.js";
+export type { ChartImageExportOptions, ChartPrintExportOptions } from "./internals/plugins/useChartProExport/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts-pro v8.5.3
+ * @mui/x-charts-pro v8.7.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the
@@ -9,7 +9,6 @@ import "./typeOverloads/modules.js";
 
 // exports from MIT package
 export * from '@mui/x-charts/constants';
-export * from '@mui/x-charts/context';
 export * from '@mui/x-charts/hooks';
 export * from '@mui/x-charts/colorPalettes';
 export * from '@mui/x-charts/models';
@@ -35,9 +34,10 @@ export * from '@mui/x-charts/ChartsSurface';
 export * from '@mui/x-charts/ChartDataProvider';
 export * from '@mui/x-charts/ChartsLabel';
 // Pro components
+export * from "./context/index.js";
 export * from "./hooks/index.js";
 export * from "./Heatmap/index.js";
-export * from "./ChartContainerPro/index.js";
+export { ChartContainerPro } from "./ChartContainerPro/index.js";
 export * from "./ChartDataProviderPro/index.js";
 export * from "./ScatterChartPro/index.js";
 export * from "./BarChartPro/index.js";

package/esm/internals/material/components/BaseMenuItem.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ChartBaseMenuItemProps } from "../../slots/chartBaseSlotProps.js";
+export declare function BaseMenuItem(props: ChartBaseMenuItemProps): React.JSX.Element;

package/esm/internals/material/components/BaseMenuItem.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["inert", "iconStart", "iconEnd", "children"];
+import * as React from 'react';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function BaseMenuItem(props) {
+  const {
+      inert,
+      iconStart,
+      iconEnd,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({}, other, {
+    disableRipple: inert ? true : other.disableRipple,
+    children: [iconStart && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: iconStart
+    }, "1"), /*#__PURE__*/_jsx(ListItemText, {
+      children: children
+    }, "2"), iconEnd && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: iconEnd
+    }, "3")]
+  }));
+}

package/esm/internals/material/components/BasePopper.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ChartBasePopperProps } from "../../slots/chartBaseSlotProps.js";
+export declare function BasePopper(props: ChartBasePopperProps): React.JSX.Element;

package/esm/internals/material/components/BasePopper.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement"];
+import * as React from 'react';
+import Popper from '@mui/material/Popper';
+import MUIFocusTrap from '@mui/material/Unstable_TrapFocus';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import { jsx as _jsx } from "react/jsx-runtime";
+function clickAwayWrapper(props, content) {
+  if (props.onClickAway === undefined) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(ClickAwayListener, {
+    onClickAway: props.onClickAway,
+    touchEvent: props.clickAwayTouchEvent,
+    mouseEvent: props.clickAwayMouseEvent,
+    children: content
+  });
+}
+function focusTrapWrapper(props, content) {
+  if (props.focusTrap === undefined) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(MUIFocusTrap, {
+    open: true,
+    disableEnforceFocus: true,
+    disableAutoFocus: true,
+    children: /*#__PURE__*/_jsx("div", {
+      tabIndex: -1,
+      children: content
+    })
+  });
+}
+function wrappers(props, content) {
+  return focusTrapWrapper(props, clickAwayWrapper(props, content));
+}
+const transformOrigin = {
+  'bottom-start': 'top left',
+  'bottom-end': 'top right'
+};
+export function BasePopper(props) {
+  const {
+      open,
+      children,
+      className,
+      flip,
+      onExited,
+      onDidShow,
+      onDidHide,
+      id,
+      target,
+      transition,
+      placement
+    } = props,
+    rest = _objectWithoutPropertiesLoose(props, _excluded);
+  const modifiers = React.useMemo(() => {
+    const result = [{
+      name: 'preventOverflow',
+      options: {
+        padding: 8
+      }
+    }];
+    if (flip) {
+      result.push({
+        name: 'flip',
+        enabled: true,
+        options: {
+          rootBoundary: 'document'
+        }
+      });
+    }
+    if (onDidShow || onDidHide) {
+      result.push({
+        name: 'isPlaced',
+        enabled: true,
+        phase: 'main',
+        fn: () => {
+          onDidShow?.();
+        },
+        effect: () => () => {
+          onDidHide?.();
+        }
+      });
+    }
+    return result;
+  }, [flip, onDidShow, onDidHide]);
+  let content;
+  if (!transition) {
+    content = wrappers(props, children);
+  } else {
+    const handleExited = popperOnExited => node => {
+      if (popperOnExited) {
+        popperOnExited();
+      }
+      if (onExited) {
+        onExited(node);
+      }
+    };
+    content = p => wrappers(props, /*#__PURE__*/_jsx(Grow, _extends({}, p.TransitionProps, {
+      style: {
+        transformOrigin: transformOrigin[p.placement]
+      },
+      onExited: handleExited(p.TransitionProps?.onExited),
+      children: /*#__PURE__*/_jsx(Paper, {
+        children: children
+      })
+    })));
+  }
+  return /*#__PURE__*/_jsx(Popper, _extends({
+    id: id,
+    className: className,
+    open: open,
+    anchorEl: target,
+    transition: transition,
+    placement: placement,
+    modifiers: modifiers
+  }, rest, {
+    children: content
+  }));
+}

package/esm/internals/material/icons.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 export declare const ChartsZoomInIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
-export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsZoomOutIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;
+export declare const ChartsExportIcon: (props: import("@mui/x-charts").ChartBaseIconProps) => React.ReactNode;

package/esm/internals/material/icons.js

@@ -10,4 +10,7 @@ export const ChartsZoomInIcon = createSvgIcon(/*#__PURE__*/_jsxs(React.Fragment,
 }), 'ZoomIn');
 export const ChartsZoomOutIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14M7 9h5v1H7z"
-}), 'ZoomOut');
+}), 'ZoomOut');
+export const ChartsExportIcon = createSvgIcon(/*#__PURE__*/_jsx("path", {
+  d: "M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"
+}), 'Export');

package/esm/internals/material/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ChartsBaseSlotsPro } from "../slots/chartsBaseSlots.js";
 import { ChartsIconSlotsPro } from "../slots/chartsIconSlots.js";
 export type ChartsSlotsPro = ChartsBaseSlotsPro & ChartsIconSlotsPro;

package/esm/internals/material/index.js

@@ -1,12 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import Tooltip from '@mui/material/Tooltip';
+import MenuList from '@mui/material/MenuList';
+import Divider from '@mui/material/Divider';
 import { defaultSlotsMaterial as communityDefaultSlotsMaterial } from '@mui/x-charts/internals';
-import { ChartsZoomInIcon, ChartsZoomOutIcon } from "./icons.js";
+import { BaseMenuItem } from "./components/BaseMenuItem.js";
+import { BasePopper } from "./components/BasePopper.js";
+import { ChartsExportIcon, ChartsZoomInIcon, ChartsZoomOutIcon } from "./icons.js";
 const baseSlots = {
-  baseTooltip: Tooltip
+  baseTooltip: Tooltip,
+  basePopper: BasePopper,
+  baseMenuList: MenuList,
+  baseMenuItem: BaseMenuItem,
+  baseDivider: Divider
 };
 const iconSlots = {
   zoomInIcon: ChartsZoomInIcon,
-  zoomOutIcon: ChartsZoomOutIcon
+  zoomOutIcon: ChartsZoomOutIcon,
+  exportIcon: ChartsExportIcon
 };
 export const defaultSlotsMaterial = _extends({}, communityDefaultSlotsMaterial, baseSlots, iconSlots);

package/esm/internals/plugins/allPlugins.d.ts

@@ -3,7 +3,7 @@ import { UseChartProExportSignature } from "./useChartProExport/index.js";
 import { UseChartProZoomSignature } from "./useChartProZoom/index.js";
 export type AllPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type AllPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<AllPluginSignatures<TSeries>>;
-export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
+export declare const ALL_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartPolarAxisSignature<any>>)[];
 export type DefaultPluginSignatures<TSeries extends ChartSeriesType = ChartSeriesType> = [UseChartZAxisSignature, UseChartCartesianAxisSignature<TSeries>, UseChartPolarAxisSignature<TSeries>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export type DefaultPluginsType<TSeries extends ChartSeriesType = ChartSeriesType> = ConvertSignaturesIntoPlugins<DefaultPluginSignatures<TSeries>>;
-export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>>)[];
+export declare const DEFAULT_PLUGINS: (import("@mui/x-charts/internals").ChartPlugin<UseChartProExportSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartZAxisSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartInteractionSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartHighlightSignature> | import("@mui/x-charts/internals").ChartPlugin<UseChartCartesianAxisSignature<any>> | import("@mui/x-charts/internals").ChartPlugin<UseChartProZoomSignature>)[];

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

@@ -15,7 +15,6 @@ export function printChart(element, {
     const rootCandidate = element.getRootNode();
     const root = rootCandidate.constructor.name === 'ShadowRoot' ? rootCandidate : doc;
     await Promise.all(loadStyleSheets(printDoc, root));
-    printWindow.contentWindow.print();
     const mediaQueryList = printWindow.contentWindow.matchMedia('print');
     mediaQueryList.addEventListener('change', mql => {
       const isAfterPrint = mql.matches === false;
@@ -23,6 +22,7 @@ export function printChart(element, {
         doc.body.removeChild(printWindow);
       }
     });
+    printWindow.contentWindow.print();
   };
   doc.body.appendChild(printWindow);
 }

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

@@ -7,29 +7,30 @@ export interface UseChartProExportState {
 /**
  * The options to apply on the Print export.
  * @demos
- *   - [Print export](/x/react-charts/export/#print-export-as-pdf)
+ *   - [Print export](https://mui.com/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.
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
    */
   fileName?: string;
 }
 /**
  * The options to apply on the image export.
  * @demos
- *   - [Image export](/x/react-charts/export/#export-as-image)
+ *   - [Image export](https://mui.com/x/react-charts/export/#export-as-image)
  */
 export interface ChartImageExportOptions {
   /**
-   * The value to be used as the print window title.
-   * @default The title of the page.
+   * The name of the file without the extension.
+   * @default The title of the document the chart belongs to
    */
   fileName?: string;
   /**
    * The format of the image to be exported.
    * Browsers are required to support 'image/png'. Some browsers also support 'image/jpeg' and 'image/webp'.
+   * If the provided `type` is not supported by the browser, it will default to 'image/png'.
    * @default 'image/png'
    */
   type?: 'image/png' | string;

package/esm/internals/plugins/useChartProZoom/gestureHooks/usePanOnDrag.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ChartPlugin, ZoomData } from '@mui/x-charts/internals';
+import { UseChartProZoomSignature } from "../useChartProZoom.types.js";
+export declare const usePanOnDrag: ({
+  store,
+  instance,
+  svgRef
+}: Pick<Parameters<ChartPlugin<UseChartProZoomSignature>>[0], "store" | "instance" | "svgRef">, setZoomDataCallback: React.Dispatch<ZoomData[] | ((prev: ZoomData[]) => ZoomData[])>) => void;