@mui/x-charts-pro 8.5.3 → 8.7.0

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { getSVGPoint, invertScale, selectorChartAxis, selectorChartAxisZoomOptionsLookup, useChartContext, useDrawingArea, useSelector, useStore } from '@mui/x-charts/internals';
@@ -8,6 +10,7 @@ import { ChartAxisZoomSliderThumb } from "./ChartAxisZoomSliderThumb.js";
 import { ChartsTooltipZoomSliderValue } from "./ChartsTooltipZoomSliderValue.js";
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
 import { ZOOM_SLIDER_ACTIVE_TRACK_SIZE, ZOOM_SLIDER_THUMB_HEIGHT, ZOOM_SLIDER_THUMB_WIDTH } from "./constants.js";
+import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ZoomSliderActiveTrackRect = styled('rect')(({
   theme
@@ -41,6 +44,9 @@ export function ChartAxisZoomSliderActiveTrack({
     tooltipStart,
     tooltipEnd
   } = getZoomSliderTooltipsText(axis, drawingArea);
+  const classes = useUtilityClasses({
+    axisDirection
+  });
   const previewThumbWidth = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_WIDTH : ZOOM_SLIDER_THUMB_HEIGHT;
   const previewThumbHeight = axisDirection === 'x' ? ZOOM_SLIDER_THUMB_HEIGHT : ZOOM_SLIDER_THUMB_WIDTH;
   React.useEffect(() => {
@@ -194,7 +200,8 @@ export function ChartAxisZoomSliderActiveTrack({
       width: previewWidth,
       height: previewHeight,
       onPointerEnter: onPointerEnter,
-      onPointerLeave: onPointerLeave
+      onPointerLeave: onPointerLeave,
+      className: classes.active
     }), /*#__PURE__*/_jsx(ChartAxisZoomSliderThumb, {
       ref: setStartThumbEl,
       x: startThumbX,

package/esm/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
@@ -6,7 +8,9 @@ import { useChartContext, getSVGPoint, selectorChartAxisZoomOptionsLookup, useSt
 import { styled } from '@mui/material/styles';
 import { rafThrottle } from '@mui/x-internals/rafThrottle';
 import { shouldForwardProp } from '@mui/system';
+import clsx from 'clsx';
 import { calculateZoomEnd, calculateZoomFromPoint, calculateZoomStart } from "./zoom-utils.js";
+import { useUtilityClasses } from "./chartAxisZoomSliderTrackClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ZoomSliderTrack = styled('rect', {
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
@@ -48,6 +52,9 @@ export function ChartAxisZoomSliderTrack(_ref) {
   } = useChartContext();
   const store = useStore();
   const [isSelecting, setIsSelecting] = React.useState(false);
+  const classes = useUtilityClasses({
+    axisDirection
+  });
   const onPointerDown = function onPointerDown(event) {
     const rect = ref.current;
     const element = svgRef.current;
@@ -119,5 +126,7 @@ export function ChartAxisZoomSliderTrack(_ref) {
     onPointerDown: onPointerDown,
     axisDirection: axisDirection,
     isSelecting: isSelecting
-  }, other));
+  }, other, {
+    className: clsx(classes.background, other.className)
+  }));
 }

package/esm/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.d.ts

@@ -0,0 +1,15 @@
+import type { ChartAxisZoomSliderActiveTrackProps } from "./ChartAxisZoomSliderActiveTrack.js";
+export interface ChartAxisZoomSliderTrackClasses {
+  /** Styles applied to the root element when it is horizontal. */
+  horizontal: string;
+  /** Styles applied to the root element when it is vertical. */
+  vertical: string;
+  /** Styles applied to the root element to the active part of the track. */
+  active: string;
+  /** Styles applied to the root element to the background part of the track. */
+  background: string;
+}
+export type ChartAxisZoomSliderTrackClassKey = keyof ChartAxisZoomSliderTrackClasses;
+export declare const chartAxisZoomSliderTrackClasses: ChartAxisZoomSliderTrackClasses;
+export declare function getAxisZoomSliderTrackUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (props: Partial<ChartAxisZoomSliderActiveTrackProps>) => Record<"background" | "active", string>;

package/esm/ChartZoomSlider/internals/chartAxisZoomSliderTrackClasses.js

@@ -0,0 +1,21 @@
+import composeClasses from '@mui/utils/composeClasses';
+import ClassNameGenerator from '@mui/utils/ClassNameGenerator';
+export const chartAxisZoomSliderTrackClasses = ['horizontal', 'vertical', 'background', 'active'].reduce((acc, slot) => {
+  acc[slot] = getAxisZoomSliderTrackUtilityClass(slot);
+  return acc;
+}, {});
+export function getAxisZoomSliderTrackUtilityClass(slot) {
+  // We use the `ClassNameGenerator` because the original `generateUtilityClass` function
+  // has a special case for the `active` slot.
+  return `${ClassNameGenerator.generate('MuiChartAxisZoomSliderTrack')}-${slot}`;
+}
+export const useUtilityClasses = props => {
+  const {
+    axisDirection
+  } = props;
+  const slots = {
+    background: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'background'],
+    active: [axisDirection === 'x' ? 'horizontal' : 'vertical', 'active']
+  };
+  return composeClasses(slots, getAxisZoomSliderTrackUtilityClass);
+};

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartImageExportOptions } from "../internals/plugins/useChartProExport/index.js";
+import { ChartsSlotPropsPro } from "../internals/material/index.js";
+export interface ChartsToolbarImageExportOptions extends Omit<ChartImageExportOptions, 'type'>, Required<Pick<ChartImageExportOptions, 'type'>> {}
+export type ChartsToolbarImageExportTriggerProps = ChartsSlotPropsPro['baseButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotPropsPro['baseButton']>;
+  /**
+   * The options to apply on the image export.
+   * @demos
+   *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
+   */
+  options?: ChartsToolbarImageExportOptions;
+};
+/**
+ * A button that triggers an image export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+declare const ChartsToolbarImageExportTrigger: React.ForwardRefExoticComponent<ChartsToolbarImageExportTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsToolbarImageExportTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarImageExportTrigger };

package/esm/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "options", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useChartsSlots } from '@mui/x-charts/internals';
+import { useChartProApiContext } from "../context/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that triggers an image export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarImageExportTrigger = forwardRef(function ChartsToolbarImageExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const apiRef = useChartProApiContext();
+  const handleClick = event => {
+    apiRef.current.exportAsImage(options);
+    onClick?.(event);
+  };
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarImageExportTrigger.displayName = "ChartsToolbarImageExportTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarImageExportTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  /**
+   * The options to apply on the image export.
+   * @demos
+   *   - [Export as Image](https://mui.com/x/react-charts/export/#export-as-image)
+   */
+  options: PropTypes.shape({
+    fileName: PropTypes.string,
+    quality: PropTypes.number,
+    type: PropTypes.string.isRequired
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  style: PropTypes.object,
+  tabIndex: PropTypes.number
+} : void 0;
+export { ChartsToolbarImageExportTrigger };

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartPrintExportOptions } from "../internals/plugins/useChartProExport/index.js";
+import { ChartsSlotPropsPro } from "../internals/material/index.js";
+export interface ChartsToolbarPrintExportOptions extends ChartPrintExportOptions {
+  /**
+   * If `true`, this export option will be removed from the ChartsToolbarExport menu.
+   * @default false
+   */
+  disableToolbarButton?: boolean;
+}
+export type ChartsToolbarPrintExportTriggerProps = ChartsSlotPropsPro['baseButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotPropsPro['baseButton']>;
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+   */
+  options?: ChartPrintExportOptions;
+};
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+declare const ChartsToolbarPrintExportTrigger: React.ForwardRefExoticComponent<ChartsToolbarPrintExportTriggerProps> | React.ForwardRefExoticComponent<Omit<ChartsToolbarPrintExportTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ChartsToolbarPrintExportTrigger };

package/esm/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["render", "options", "onClick"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useComponentRenderer } from '@mui/x-internals/useComponentRenderer';
+import { useChartsSlots } from '@mui/x-charts/internals';
+import { useChartProApiContext } from "../context/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarPrintExportTrigger = forwardRef(function ChartsToolbarPrintExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const apiRef = useChartProApiContext();
+  const handleClick = event => {
+    apiRef.current.exportAsPrint(options);
+    onClick?.(event);
+  };
+  const element = useComponentRenderer(slots.baseButton, render, _extends({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarPrintExportTrigger.displayName = "ChartsToolbarPrintExportTrigger";
+process.env.NODE_ENV !== "production" ? ChartsToolbarPrintExportTrigger.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  /**
+   * The options to apply on the Print export.
+   * @demos
+   *   - [Print/Export as PDF](https://mui.com/x/react-charts/export/#print-export-as-pdf)
+   */
+  options: PropTypes.shape({
+    fileName: PropTypes.string
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  style: PropTypes.object,
+  tabIndex: PropTypes.number
+} : void 0;
+export { ChartsToolbarPrintExportTrigger };

package/esm/ChartsToolbarPro/ChartsToolbarPro.d.ts

@@ -1,7 +1,20 @@
-import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
 import * as React from 'react';
-export interface ChartsToolbarProProps extends ChartsToolbarProps {}
+import { ChartsToolbarProps } from '@mui/x-charts/Toolbar';
+import { ChartsToolbarPrintExportOptions } from "./ChartsToolbarPrintExportTrigger.js";
+import { ChartsToolbarImageExportOptions } from "./ChartsToolbarImageExportTrigger.js";
+export interface ChartsToolbarProProps extends ChartsToolbarProps {
+  printOptions?: ChartsToolbarPrintExportOptions;
+  imageExportOptions?: ChartsToolbarImageExportOptions[];
+}
 /**
  * The chart toolbar component for the pro package.
  */
-export declare function ChartsToolbarPro(props: ChartsToolbarProProps): React.JSX.Element | null;
+declare function ChartsToolbarPro({
+  printOptions,
+  imageExportOptions: rawImageExportOptions,
+  ...other
+}: ChartsToolbarProProps): React.JSX.Element | null;
+declare namespace ChartsToolbarPro {
+  var propTypes: any;
+}
+export { ChartsToolbarPro };

package/esm/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,16 +1,35 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["printOptions", "imageExportOptions"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
+import { Toolbar, ToolbarButton } from '@mui/x-charts/Toolbar';
 import { useChartContext, useSelector, useChartsSlots } from '@mui/x-charts/internals';
 import { useChartsLocalization } from '@mui/x-charts/hooks';
+import useId from '@mui/utils/useId';
+import { ChartsToolbarDivider } from "./internals/ChartsToolbarDivider.js";
+import { ChartsMenu } from "./internals/ChartsMenu.js";
 import { selectorChartZoomIsEnabled } from "../internals/plugins/useChartProZoom/index.js";
 import { ChartsToolbarZoomInTrigger } from "./ChartsToolbarZoomInTrigger.js";
 import { ChartsToolbarZoomOutTrigger } from "./ChartsToolbarZoomOutTrigger.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartsToolbarPrintExportTrigger } from "./ChartsToolbarPrintExportTrigger.js";
+import { ChartsToolbarImageExportTrigger } from "./ChartsToolbarImageExportTrigger.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
+  type: 'image/png'
+}];
+
 /**
  * The chart toolbar component for the pro package.
  */
-export function ChartsToolbarPro(props) {
+function ChartsToolbarPro(_ref) {
+  let {
+      printOptions,
+      imageExportOptions: rawImageExportOptions
+    } = _ref,
+    other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const {
     slots,
     slotProps
@@ -21,7 +40,13 @@ export function ChartsToolbarPro(props) {
   const {
     localeText
   } = useChartsLocalization();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = useId();
+  const exportMenuTriggerId = useId();
   const isZoomEnabled = useSelector(store, selectorChartZoomIsEnabled);
+  const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
+  const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
     const Tooltip = slots.baseTooltip;
@@ -30,22 +55,109 @@ export function ChartsToolbarPro(props) {
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
       children: /*#__PURE__*/_jsx(ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
-        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({}, slotProps.zoomInIcon))
+        render: /*#__PURE__*/_jsx(ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/_jsx(ZoomInIcon, _extends({
+          fontSize: "small"
+        }, slotProps.zoomInIcon))
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/_jsx(Tooltip, _extends({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
       children: /*#__PURE__*/_jsx(ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/_jsx(ToolbarButton, {}),
-        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({}, slotProps.zoomOutIcon))
+        render: /*#__PURE__*/_jsx(ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/_jsx(ZoomOutIcon, _extends({
+          fontSize: "small"
+        }, slotProps.zoomOutIcon))
       })
     }), "zoom-out"));
   }
+  if (showExportMenu) {
+    const Tooltip = slots.baseTooltip;
+    const MenuList = slots.baseMenuList;
+    const MenuItem = slots.baseMenuItem;
+    const ExportIcon = slots.exportIcon;
+    const closeExportMenu = () => setExportMenuOpen(false);
+    const handleListKeyDown = event => {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+      }
+      if (isHideMenuKey(event.key)) {
+        closeExportMenu();
+      }
+    };
+    if (children.length > 0) {
+      children.push(/*#__PURE__*/_jsx(ChartsToolbarDivider, {}, "divider"));
+    }
+    children.push(/*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: localeText.toolbarExport,
+        disableInteractive: exportMenuOpen,
+        children: /*#__PURE__*/_jsx(ToolbarButton, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
+          size: "small",
+          children: /*#__PURE__*/_jsx(ExportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/_jsx(ChartsMenu, {
+        target: exportMenuTriggerRef.current,
+        open: exportMenuOpen,
+        onClose: closeExportMenu,
+        position: "bottom-end",
+        children: /*#__PURE__*/_jsxs(MenuList, _extends({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          onKeyDown: handleListKeyDown,
+          autoFocusItem: true
+        }, slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ChartsToolbarPrintExportTrigger, {
+            render: /*#__PURE__*/_jsx(MenuItem, _extends({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportPrint
+          }), imageExportOptionList.map(imageExportOptions => /*#__PURE__*/_jsx(ChartsToolbarImageExportTrigger, {
+            render: /*#__PURE__*/_jsx(MenuItem, _extends({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: imageExportOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportImage(imageExportOptions.type)
+          }, imageExportOptions.type))]
+        }))
+      })]
+    }, "export-menu"));
+  }
   if (children.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Toolbar, _extends({}, props, {
+  return /*#__PURE__*/_jsx(Toolbar, _extends({}, other, {
     children: children
   }));
+}
+process.env.NODE_ENV !== "production" ? ChartsToolbarPro.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  imageExportOptions: PropTypes.arrayOf(PropTypes.shape({
+    fileName: PropTypes.string,
+    quality: PropTypes.number,
+    type: PropTypes.string.isRequired
+  })),
+  printOptions: PropTypes.object
+} : void 0;
+export { ChartsToolbarPro };
+function isHideMenuKey(key) {
+  return key === 'Tab' || key === 'Escape';
 }

package/esm/ChartsToolbarPro/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./ChartsToolbarPro.js";
 export * from "./ChartsToolbarZoomInTrigger.js";
-export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarPrintExportTrigger.js";
+export * from "./ChartsToolbarImageExportTrigger.js";

package/esm/ChartsToolbarPro/index.js

@@ -1,3 +1,5 @@
 export * from "./ChartsToolbarPro.js";
 export * from "./ChartsToolbarZoomInTrigger.js";
-export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarZoomOutTrigger.js";
+export * from "./ChartsToolbarPrintExportTrigger.js";
+export * from "./ChartsToolbarImageExportTrigger.js";

package/esm/ChartsToolbarPro/internals/ChartsMenu.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ChartBasePopperProps, Placement } from "../../internals/slots/chartBaseSlotProps.js";
+export interface ChartsMenuProps extends Pick<ChartBasePopperProps, 'className' | 'onExited'> {
+  open: boolean;
+  target: HTMLElement | null;
+  onClose: (event?: Event) => void;
+  position?: Placement;
+  children: React.ReactNode;
+}
+declare function ChartsMenu(props: ChartsMenuProps): React.JSX.Element;
+declare namespace ChartsMenu {
+  var propTypes: any;
+}
+export { ChartsMenu };

package/esm/ChartsToolbarPro/internals/ChartsMenu.js

@@ -0,0 +1,67 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import HTMLElementType from '@mui/utils/HTMLElementType';
+import { useChartsSlots } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+function ChartsMenu(props) {
+  const {
+      open,
+      target,
+      onClose,
+      children,
+      position,
+      onExited
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  const Popper = slots.basePopper;
+  const savedFocusRef = React.useRef(null);
+  useEnhancedEffect(() => {
+    if (open) {
+      savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    } else {
+      savedFocusRef.current?.focus?.();
+      savedFocusRef.current = null;
+    }
+  }, [open]);
+  const handleClickAway = event => {
+    if (event.target && (target === event.target || target?.contains(event.target))) {
+      return;
+    }
+    onClose(event);
+  };
+  return /*#__PURE__*/_jsx(Popper, _extends({
+    open: open,
+    target: target,
+    transition: true,
+    placement: position,
+    onClickAway: handleClickAway,
+    onExited: onExited,
+    clickAwayMouseEvent: "onMouseDown"
+  }, other, slotProps?.basePopper, {
+    children: children
+  }));
+}
+process.env.NODE_ENV !== "production" ? ChartsMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  onExited: PropTypes.func,
+  open: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  target: HTMLElementType
+} : void 0;
+export { ChartsMenu };

package/esm/ChartsToolbarPro/internals/ChartsToolbarDivider.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ChartBaseDividerProps } from "../../internals/slots/chartBaseSlotProps.js";
+export interface ChartsToolbarDividerProps extends ChartBaseDividerProps {}
+declare const ChartsToolbarDivider: React.ForwardRefExoticComponent<Omit<ChartsToolbarDividerProps, "ref"> & React.RefAttributes<HTMLHRElement>>;
+export { ChartsToolbarDivider };

package/esm/ChartsToolbarPro/internals/ChartsToolbarDivider.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
+import { NotRendered, useChartsSlots } from '@mui/x-charts/internals';
+import { jsx as _jsx } from "react/jsx-runtime";
+// This is workaround because api-docs-builder does not support the `NotRendered<ChartBaseDividerProps>` syntax.
+const NotRenderedDivider = NotRendered;
+const Divider = styled(NotRenderedDivider, {
+  name: 'MuiChartsToolbar',
+  slot: 'Divider'
+})(({
+  theme
+}) => ({
+  margin: theme.spacing(0, 0.5),
+  height: '50%'
+}));
+const ChartsToolbarDivider = /*#__PURE__*/React.forwardRef(function ChartsToolbarDivider(props, ref) {
+  const {
+    slots,
+    slotProps
+  } = useChartsSlots();
+  return /*#__PURE__*/_jsx(Divider, _extends({
+    as: slots.baseDivider,
+    orientation: "vertical"
+  }, slotProps.baseDivider, props, {
+    ref: ref
+  }));
+});
+if (process.env.NODE_ENV !== "production") ChartsToolbarDivider.displayName = "ChartsToolbarDivider";
+process.env.NODE_ENV !== "production" ? ChartsToolbarDivider.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  style: PropTypes.object
+} : void 0;
+export { ChartsToolbarDivider };