@mui/x-charts-pro 8.5.3 → 8.6.0

package/CHANGELOG.md

@@ -5,6 +5,113 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.6.0
+
+_Jun 27, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add export menu to charts toolbar
+- 📅 Add `usePickerAdapter` hook to access the date adapter.
+
+  You can use the adapter in your custom components if you need them to work with multiple date libraries — [Learn more](https://mui.com/x/react-date-pickers/custom-components/#access-date-adapter).
+- 🌎 Improve Danish (da-DK) locale
+- 🌎 Improve German (de-DE) locale
+
+Special thanks go out to the community members for their valuable contributions:
+@ShahrazH, @vadimka123
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @JCQuintas, @KenanYusuf, @LukasTy, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.6.0`
+
+- [DataGrid] Fix `label` type in `GridActionsCellItem` type (#18175) @sai6855
+- [DataGrid] Fix grid menu not closing when pressing escape/tab (#18300) @KenanYusuf
+- [l10n] Improve Danish (da-DK) locale (#18428) @ShahrazH
+- [l10n] Improve German (de-DE) locale (#18388) @omalyutin
+
+#### `@mui/x-data-grid-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.6.0`, plus:
+
+- [DataGridPro] Fix lazy loading params calculated from rendering context (#18460) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.6.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.6.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.6.0`
+
+- [pickers] Add `usePickerAdapter` hook (#18457) @LukasTy
+- [pickers] Fix to use latest `value` when updating `lastCommittedValue` in internal state (#18518) @LukasTy
+- [pickers] Use `usePickerAdapter` hook internally instead of `useUtils` (#18465) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.6.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.6.0`
+
+- [charts] Add `data-series` to charts legend item (#18414) @bernardobelchior
+- [charts] Add `data-series` to bar charts (#18413) @bernardobelchior
+- [charts] Add `data-series` to elements of line chart (#18409) @bernardobelchior
+- [charts] Add `data-series` to pie charts (#18432) @bernardobelchior
+- [charts] Fix missing key in bar plot (#18502) @bernardobelchior
+- [charts] Split axis utils from main file (#18517) @JCQuintas
+- [charts] Improve touch behavior for polar axis (#18531) @JCQuintas
+- [charts] Add `isElementInside` helper (#18530) @JCQuintas
+
+#### `@mui/x-charts-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.6.0`, plus:
+
+- [charts-pro] Add export menu to charts toolbar (#18210) @bernardobelchior
+- [charts-pro] Fix export docs mentioning tooltip instead of toolbar (#18490) @bernardobelchior
+- [charts-pro] Fix iframe not being removed after print export (#18500) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.6.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.6.0`, plus:
+
+- [tree view pro] Fix theme augmentation (#18437) @LukasTy
+
+### Codemod
+
+#### `@mui/x-codemod@8.6.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Document `GridRenderContext` (#18492) @arminmeh
+- [docs] Prevent stale rows to appear on sort and filter change in the lazy loading demo (#18461) @arminmeh
+- [docs][pickers] Update action bar demo to use the `nextOrAccept` action (#18505) @LukasTy
+- [docs] Update indeterminate checkbox section in migration guide (#18229) @michelengelen
+- [docs] Data source nested pagination recipe (#14777) @MBilalShafi
+
+### Core
+
+- [core] Avoid json stringify whole window object (#18512) @vadimka123
+
+### Miscellaneous
+
+- [code-infra] Dynamically get pickers adapters dependencies versions (#18446) @JCQuintas
+- [infra] Adjust inquirer version and usage (#18495) @michelengelen
+- [infra] Use `String.raw` for creating the remote regex (#18462) @michelengelen
+
 ## 8.5.3
 
 _Jun 19, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc1MDI4NDAwMDAwMA==";
+const releaseInfo = "MTc1MDk3NTIwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/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/ChartsToolbarPro/ChartsToolbarImageExportTrigger.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarImageExportTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _internals = require("@mui/x-charts/internals");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "options", "onClick"];
+/**
+ * A button that triggers an image export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarImageExportTrigger = exports.ChartsToolbarImageExportTrigger = (0, _forwardRef.forwardRef)(function ChartsToolbarImageExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const apiRef = (0, _context.useChartApiContext)();
+  const handleClick = event => {
+    apiRef.current.exportAsImage(options);
+    onClick?.(event);
+  };
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.string,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.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.default.shape({
+    fileName: _propTypes.default.string,
+    quality: _propTypes.default.number,
+    type: _propTypes.default.string.isRequired
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number
+} : void 0;

package/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/ChartsToolbarPro/ChartsToolbarPrintExportTrigger.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbarPrintExportTrigger = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _internals = require("@mui/x-charts/internals");
+var _context = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "options", "onClick"];
+/**
+ * A button that triggers a print export.
+ * It renders the `baseButton` slot.
+ *
+ * Demos:
+ *
+ * - [Export](https://mui.com/x/react-charts/export/)
+ */
+const ChartsToolbarPrintExportTrigger = exports.ChartsToolbarPrintExportTrigger = (0, _forwardRef.forwardRef)(function ChartsToolbarPrintExportTrigger(props, ref) {
+  const {
+      render,
+      options,
+      onClick
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const apiRef = (0, _context.useChartApiContext)();
+  const handleClick = event => {
+    apiRef.current.exportAsPrint(options);
+    onClick?.(event);
+  };
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseButton, render, (0, _extends2.default)({}, slotProps?.baseButton, {
+    onClick: handleClick
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.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.default.string,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.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.default.shape({
+    fileName: _propTypes.default.string
+  }),
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
+  style: _propTypes.default.object,
+  tabIndex: _propTypes.default.number
+} : void 0;

package/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/ChartsToolbarPro/ChartsToolbarPro.js

@@ -1,24 +1,42 @@
 "use strict";
+'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsToolbarPro = ChartsToolbarPro;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _Toolbar = require("@mui/x-charts/Toolbar");
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Toolbar = require("@mui/x-charts/Toolbar");
 var _internals = require("@mui/x-charts/internals");
 var _hooks = require("@mui/x-charts/hooks");
+var _useId = _interopRequireDefault(require("@mui/utils/useId"));
+var _ChartsToolbarDivider = require("./internals/ChartsToolbarDivider");
+var _ChartsMenu = require("./internals/ChartsMenu");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
 var _ChartsToolbarZoomInTrigger = require("./ChartsToolbarZoomInTrigger");
 var _ChartsToolbarZoomOutTrigger = require("./ChartsToolbarZoomOutTrigger");
+var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
+var _ChartsToolbarImageExportTrigger = require("./ChartsToolbarImageExportTrigger");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["printOptions", "imageExportOptions"];
+const DEFAULT_IMAGE_EXPORT_OPTIONS = [{
+  type: 'image/png'
+}];
+
 /**
  * The chart toolbar component for the pro package.
  */
-function ChartsToolbarPro(props) {
+function ChartsToolbarPro(_ref) {
+  let {
+      printOptions,
+      imageExportOptions: rawImageExportOptions
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const {
     slots,
     slotProps
@@ -29,7 +47,13 @@ function ChartsToolbarPro(props) {
   const {
     localeText
   } = (0, _hooks.useChartsLocalization)();
+  const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
+  const exportMenuTriggerRef = React.useRef(null);
+  const exportMenuId = (0, _useId.default)();
+  const exportMenuTriggerId = (0, _useId.default)();
   const isZoomEnabled = (0, _internals.useSelector)(store, _useChartProZoom.selectorChartZoomIsEnabled);
+  const imageExportOptionList = rawImageExportOptions ?? DEFAULT_IMAGE_EXPORT_OPTIONS;
+  const showExportMenu = !printOptions?.disableToolbarButton || imageExportOptionList.length > 0;
   const children = [];
   if (isZoomEnabled) {
     const Tooltip = slots.baseTooltip;
@@ -38,22 +62,108 @@ function ChartsToolbarPro(props) {
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomIn,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomInTrigger.ChartsToolbarZoomInTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({}, slotProps.zoomInIcon))
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomInIcon, (0, _extends2.default)({
+          fontSize: "small"
+        }, slotProps.zoomInIcon))
       })
     }), "zoom-in"));
     children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, slotProps.baseTooltip, {
       title: localeText.zoomOut,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarZoomOutTrigger.ChartsToolbarZoomOutTrigger, {
-        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {}),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({}, slotProps.zoomOutIcon))
+        render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+          size: "small"
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ZoomOutIcon, (0, _extends2.default)({
+          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__*/(0, _jsxRuntime.jsx)(_ChartsToolbarDivider.ChartsToolbarDivider, {}, "divider"));
+    }
+    children.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+        title: localeText.toolbarExport,
+        disableInteractive: exportMenuOpen,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.ToolbarButton, {
+          ref: exportMenuTriggerRef,
+          id: exportMenuTriggerId,
+          "aria-controls": exportMenuId,
+          "aria-haspopup": "true",
+          "aria-expanded": exportMenuOpen ? 'true' : undefined,
+          onClick: () => setExportMenuOpen(!exportMenuOpen),
+          size: "small",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExportIcon, {
+            fontSize: "small"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsMenu.ChartsMenu, {
+        target: exportMenuTriggerRef.current,
+        open: exportMenuOpen,
+        onClose: closeExportMenu,
+        position: "bottom-end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(MenuList, (0, _extends2.default)({
+          id: exportMenuId,
+          "aria-labelledby": exportMenuTriggerId,
+          onKeyDown: handleListKeyDown,
+          autoFocusItem: true
+        }, slotProps?.baseMenuList, {
+          children: [!printOptions?.disableToolbarButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPrintExportTrigger.ChartsToolbarPrintExportTrigger, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItem, (0, _extends2.default)({
+              dense: true
+            }, slotProps?.baseMenuItem)),
+            options: printOptions,
+            onClick: closeExportMenu,
+            children: localeText.toolbarExportPrint
+          }), imageExportOptionList.map(imageExportOptions => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarImageExportTrigger.ChartsToolbarImageExportTrigger, {
+            render: /*#__PURE__*/(0, _jsxRuntime.jsx)(MenuItem, (0, _extends2.default)({
+              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__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, 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.default.arrayOf(_propTypes.default.shape({
+    fileName: _propTypes.default.string,
+    quality: _propTypes.default.number,
+    type: _propTypes.default.string.isRequired
+  })),
+  printOptions: _propTypes.default.object
+} : void 0;
+function isHideMenuKey(key) {
+  return key === 'Tab' || key === 'Escape';
 }

package/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/ChartsToolbarPro/index.js

@@ -35,4 +35,26 @@ Object.keys(_ChartsToolbarZoomOutTrigger).forEach(function (key) {
       return _ChartsToolbarZoomOutTrigger[key];
     }
   });
+});
+var _ChartsToolbarPrintExportTrigger = require("./ChartsToolbarPrintExportTrigger");
+Object.keys(_ChartsToolbarPrintExportTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarPrintExportTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarPrintExportTrigger[key];
+    }
+  });
+});
+var _ChartsToolbarImageExportTrigger = require("./ChartsToolbarImageExportTrigger");
+Object.keys(_ChartsToolbarImageExportTrigger).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsToolbarImageExportTrigger[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsToolbarImageExportTrigger[key];
+    }
+  });
 });

package/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/ChartsToolbarPro/internals/ChartsMenu.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsMenu = ChartsMenu;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
+var _internals = require("@mui/x-charts/internals");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
+function ChartsMenu(props) {
+  const {
+      open,
+      target,
+      onClose,
+      children,
+      position,
+      onExited
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _internals.useChartsSlots)();
+  const Popper = slots.basePopper;
+  const savedFocusRef = React.useRef(null);
+  (0, _useEnhancedEffect.default)(() => {
+    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__*/(0, _jsxRuntime.jsx)(Popper, (0, _extends2.default)({
+    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.default.node,
+  className: _propTypes.default.string,
+  onClose: _propTypes.default.func.isRequired,
+  onExited: _propTypes.default.func,
+  open: _propTypes.default.bool.isRequired,
+  position: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  target: _HTMLElementType.default
+} : void 0;

package/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 };