@mui/x-charts 8.4.0 → 8.5.0

package/RadarChart/RadarChart.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
+var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _ChartsLegend = require("../ChartsLegend");
 var _ChartsOverlay = require("../ChartsOverlay/ChartsOverlay");
 var _useRadarChartProps = require("./useRadarChartProps");
@@ -23,6 +24,15 @@ var _RadarAxisHighlight = require("./RadarAxisHighlight");
 var _RadarMetricLabels = require("./RadarMetricLabels");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Demos:
+ *
+ * - [Radar Chart](https://mui.com/x/react-charts/radar/)
+ *
+ * API:
+ *
+ * - [RadarChart API](https://mui.com/x/api/charts/radar-chart/)
+ */
 const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
     props: inProps,
@@ -39,9 +49,10 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
     children
   } = (0, _useRadarChartProps.useRadarChartProps)(props);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarDataProvider.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         ref: ref,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
       })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
@@ -57,7 +68,6 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.object
   }),
-  children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
@@ -153,6 +163,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default 'sharp'
    */
   shape: _propTypes.default.oneOf(['circular', 'sharp']),
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

package/RadarChart/RadarChart.plugins.d.ts

@@ -0,0 +1,5 @@
+import { UseChartPolarAxisSignature } from "../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
+import { UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
+export type RadarChartPluginsSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];

package/RadarChart/RadarChart.plugins.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RADAR_PLUGINS = void 0;
+var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPolarAxis");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartPolarAxis.useChartPolarAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];

package/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
-import { ChartContainerProps } from "../../ChartContainer/index.js";
+import { RadarChartPluginsSignatures } from "../RadarChart.plugins.js";
 import { RadarSeriesType } from "../../models/seriesType/radar.js";
-import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugins/useChartPolarAxis/index.js";
-import { UseChartHighlightSignature } from "../../internals/plugins/featurePlugins/useChartHighlight/index.js";
-import { UseChartInteractionSignature } from "../../internals/plugins/featurePlugins/useChartInteraction/index.js";
+import { ChartDataProviderProps } from "../../ChartDataProvider/index.js";
 import { RadarConfig } from "./radar.types.js";
-type RadarPluginSignatures = [UseChartPolarAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature];
-export interface RadarDataProviderProps extends Omit<ChartContainerProps<'radar', RadarPluginSignatures>, 'series' | 'plugins' | 'rotationAxis' | 'radiusAxis' | 'dataset'> {
+import { ChartAnyPluginSignature } from "../../internals/plugins/models/plugin.js";
+export type RadarDataProviderProps<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures> = Omit<ChartDataProviderProps<'radar', TSignatures>, 'series' | 'rotationAxis' | 'radiusAxis' | 'dataset'> & {
   /**
    * The series to display in the bar chart.
    * An array of [[RadarSeriesType]] objects.
@@ -22,9 +20,6 @@ export interface RadarDataProviderProps extends Omit<ChartContainerProps<'radar'
    * @default 'axis'
    */
   highlight?: 'axis' | 'series' | 'none';
-}
-declare function RadarDataProvider(props: RadarDataProviderProps): React.JSX.Element;
-declare namespace RadarDataProvider {
-  var propTypes: any;
-}
+};
+declare function RadarDataProvider<TSignatures extends readonly ChartAnyPluginSignature[] = RadarChartPluginsSignatures>(props: RadarDataProviderProps<TSignatures>): React.JSX.Element;
 export { RadarDataProvider };

package/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -10,19 +10,15 @@ exports.RadarDataProvider = RadarDataProvider;
 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 _RadarChart = require("../RadarChart.plugins");
 var _ChartDataProvider = require("../../ChartDataProvider");
 var _defaultizeMargin = require("../../internals/defaultizeMargin");
-var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
-var _useChartHighlight = require("../../internals/plugins/featurePlugins/useChartHighlight");
-var _useChartInteraction = require("../../internals/plugins/featurePlugins/useChartInteraction");
 var _seriesConfig = require("../seriesConfig");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["series", "children", "width", "height", "colors", "highlightedItem", "onHighlightChange", "className", "skipAnimation", "margin", "radar", "highlight"];
+const _excluded = ["series", "children", "width", "height", "colors", "skipAnimation", "margin", "radar", "highlight", "plugins"];
 const RADAR_SERIES_CONFIG = {
   radar: _seriesConfig.radarSeriesConfig
 };
-const RADAR_PLUGINS = [_useChartPolarAxis.useChartPolarAxis, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight];
 const DEFAULT_RADAR_MARGIN = {
   top: 30,
   bottom: 30,
@@ -36,12 +32,11 @@ function RadarDataProvider(props) {
       width,
       height,
       colors,
-      highlightedItem,
-      onHighlightChange,
       skipAnimation,
       margin,
       radar,
-      highlight
+      highlight,
+      plugins
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const rotationAxes = React.useMemo(() => [{
@@ -87,116 +82,11 @@ function RadarDataProvider(props) {
     height: height,
     margin: defaultizedMargin,
     colors: colors,
-    highlightedItem: highlightedItem,
-    onHighlightChange: onHighlightChange,
     skipAnimation: skipAnimation,
-    plugins: RADAR_PLUGINS,
+    plugins: plugins ?? _RadarChart.RADAR_PLUGINS,
     rotationAxis: rotationAxes,
     radiusAxis: radiusAxis,
     seriesConfig: RADAR_SERIES_CONFIG,
     children: children
   }));
-}
-process.env.NODE_ENV !== "production" ? RadarDataProvider.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
-  // ----------------------------------------------------------------------
-  apiRef: _propTypes.default.shape({
-    current: _propTypes.default.object
-  }),
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
-  /**
-   * Color palette used to colorize multiple series.
-   * @default rainbowSurgePalette
-   */
-  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
-  desc: _propTypes.default.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: _propTypes.default.bool,
-  /**
-   * The height of the chart in px. If not defined, it takes the height of the parent element.
-   */
-  height: _propTypes.default.number,
-  /**
-   * Indicates if the chart should highlight items per axis or per series.
-   * @default 'axis'
-   */
-  highlight: _propTypes.default.oneOf(['axis', 'none', 'series']),
-  /**
-   * The highlighted item.
-   * Used when the highlight is controlled.
-   */
-  highlightedItem: _propTypes.default.shape({
-    dataIndex: _propTypes.default.number,
-    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
-  }),
-  /**
-   * This prop is used to help implement the accessibility logic.
-   * If you don't provide this prop. It falls back to a randomly generated id.
-   */
-  id: _propTypes.default.string,
-  /**
-   * Localized text for chart components.
-   */
-  localeText: _propTypes.default.object,
-  /**
-   * The margin between the SVG and the drawing area.
-   * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   *
-   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   */
-  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-    bottom: _propTypes.default.number,
-    left: _propTypes.default.number,
-    right: _propTypes.default.number,
-    top: _propTypes.default.number
-  })]),
-  /**
-   * The callback fired when the highlighted item changes.
-   *
-   * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
-   */
-  onHighlightChange: _propTypes.default.func,
-  /**
-   * The configuration of the radar scales.
-   */
-  radar: _propTypes.default.shape({
-    labelFormatter: _propTypes.default.func,
-    labelGap: _propTypes.default.number,
-    max: _propTypes.default.number,
-    metrics: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({
-      max: _propTypes.default.number,
-      min: _propTypes.default.number,
-      name: _propTypes.default.string.isRequired
-    }))]).isRequired,
-    startAngle: _propTypes.default.number
-  }).isRequired,
-  /**
-   * The series to display in the bar chart.
-   * An array of [[RadarSeriesType]] objects.
-   */
-  series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * The configuration helpers used to compute attributes according to the series type.
-   * @ignore Unstable props for internal usage.
-   */
-  seriesConfig: _propTypes.default.object,
-  /**
-   * If `true`, animations are skipped.
-   * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
-   */
-  skipAnimation: _propTypes.default.bool,
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  theme: _propTypes.default.oneOf(['dark', 'light']),
-  title: _propTypes.default.string,
-  /**
-   * The width of the chart in px. If not defined, it takes the width of the parent element.
-   */
-  width: _propTypes.default.number
-} : void 0;
+}

package/RadarChart/index.d.ts

@@ -1,5 +1,7 @@
 export { RadarChart as Unstable_RadarChart } from "./RadarChart.js";
+export { RadarChart } from "./RadarChart.js";
 export { RadarDataProvider as Unstable_RadarDataProvider } from "./RadarDataProvider/index.js";
+export { RadarDataProvider } from "./RadarDataProvider/index.js";
 export type { RadarChartProps } from "./RadarChart.js";
 export type { RadarDataProviderProps } from "./RadarDataProvider/index.js";
 export * from "./RadarGrid/index.js";

package/RadarChart/index.js

@@ -5,8 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   Unstable_RadarChart: true,
-  Unstable_RadarDataProvider: true
+  RadarChart: true,
+  Unstable_RadarDataProvider: true,
+  RadarDataProvider: true
 };
+Object.defineProperty(exports, "RadarChart", {
+  enumerable: true,
+  get: function () {
+    return _RadarChart.RadarChart;
+  }
+});
+Object.defineProperty(exports, "RadarDataProvider", {
+  enumerable: true,
+  get: function () {
+    return _RadarDataProvider.RadarDataProvider;
+  }
+});
 Object.defineProperty(exports, "Unstable_RadarChart", {
   enumerable: true,
   get: function () {

package/RadarChart/useRadarChartProps.d.ts

@@ -5,6 +5,7 @@ import type { ChartsWrapperProps } from "../internals/components/ChartsWrapper/i
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
+import { RadarChartPluginsSignatures } from "./RadarChart.plugins.js";
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -16,7 +17,7 @@ export declare const useRadarChartProps: (props: RadarChartProps) => {
   highlight: "none" | "series" | "axis";
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartsSurfaceProps: ChartsSurfaceProps;
-  radarDataProviderProps: RadarDataProviderProps;
+  radarDataProviderProps: RadarDataProviderProps<RadarChartPluginsSignatures>;
   radarGrid: RadarGridProps;
   overlayProps: ChartsOverlayProps;
   legendProps: ChartsLegendSlotExtension;

package/RadarChart/useRadarChartProps.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRadarChartProps = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-const _excluded = ["series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight"];
+const _excluded = ["apiRef", "series", "radar", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "hideLegend", "divisions", "shape", "stripeColor", "highlight", "showToolbar"];
 /**
  * A helper function that extracts RadarChartProps from the input props
  * and returns an object with props for the children components of RadarChart.
@@ -17,6 +17,7 @@ const _excluded = ["series", "radar", "width", "height", "margin", "colors", "sx
  */
 const useRadarChartProps = props => {
   const {
+      apiRef,
       series,
       radar,
       width,
@@ -38,6 +39,7 @@ const useRadarChartProps = props => {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const radarDataProviderProps = {
+    apiRef,
     series,
     radar,
     highlight,

package/ScatterChart/ScatterChart.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
+import { ChartsSlots, ChartsSlotProps } from "../internals/material/index.js";
 import { ScatterPlotProps, ScatterPlotSlotProps, ScatterPlotSlots } from "./ScatterPlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
@@ -12,8 +14,8 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { UseChartVoronoiSignature } from "../internals/plugins/featurePlugins/useChartVoronoi/index.js";
 import { ScatterChartPluginsSignatures } from "./ScatterChart.plugins.js";
-export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface ScatterChartSlots extends ChartsAxisSlots, ScatterPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface ScatterChartSlotProps extends ChartsAxisSlotProps, ScatterPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', ScatterChartPluginsSignatures>, 'series' | 'plugins' | 'onItemClick'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the scatter chart.
@@ -39,6 +41,11 @@ export interface ScatterChartProps extends Omit<ChartContainerProps<'scatter', S
    * If `true`, the legend is not rendered.
    */
   hideLegend?: boolean;
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
   /**
    * Overridable component slots.
    * @default {}

package/ScatterChart/ScatterChart.js

@@ -23,6 +23,7 @@ var _useChartContainerProps = require("../ChartContainer/useChartContainerProps"
 var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
+var _ChartsToolbar = require("../Toolbar/internals/ChartsToolbar");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -55,9 +56,10 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbar.ChartsToolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [props.showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
@@ -182,6 +184,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * An array of [[ScatterSeriesType]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: _propTypes.default.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

package/ScatterChart/useScatterChartProps.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _ScatterChart = require("./ScatterChart.plugins");
-const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "hideLegend", "width", "height", "margin", "colors", "sx", "grid", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "showToolbar"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -62,7 +62,9 @@ const useScatterChartProps = props => {
     voronoiMaxRadius,
     onItemClick: disableVoronoi ? undefined : onItemClick,
     className,
-    plugins: _ScatterChart.SCATTER_CHART_PLUGINS
+    plugins: _ScatterChart.SCATTER_CHART_PLUGINS,
+    slots,
+    slotProps
   });
   const chartsAxisProps = {
     slots,

package/SparkLineChart/SparkLineChart.d.ts

@@ -13,7 +13,7 @@ import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
 import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
 export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
 export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
-export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors'> {
+export interface SparkLineChartProps extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps'> {
   /**
    * The xAxis configuration.
    * Notice it is a single [[AxisConfig]] object, not an array of configuration.

package/Toolbar/Toolbar.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
-export interface ToolbarProps extends React.PropsWithChildren {}
+export interface ChartsToolbarProps extends React.ComponentProps<'div'> {
+  className?: string;
+}
 export declare function Toolbar({
-  children
-}: ToolbarProps): React.JSX.Element;
+  className,
+  ...other
+}: ChartsToolbarProps): React.JSX.Element;
+export declare namespace Toolbar {
+  var propTypes: any;
+}

package/Toolbar/Toolbar.js

@@ -1,13 +1,20 @@
 "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.Toolbar = Toolbar;
+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 _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _chartToolbarClasses = require("./chartToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
 const ToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiChartsToolbar',
   slot: 'Root'
@@ -25,10 +32,19 @@ const ToolbarRoot = (0, _styles.styled)('div', {
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: 4
 }));
-function Toolbar({
-  children
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarRoot, {
-    children: children
-  });
-}
+function Toolbar(_ref) {
+  let {
+      className
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarRoot, (0, _extends2.default)({
+    className: (0, _clsx.default)(_chartToolbarClasses.chartsToolbarClasses.root, className)
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? Toolbar.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
+} : void 0;

package/Toolbar/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ChartsToolbarProps } from "./Toolbar.js";
+export interface ChartsToolbarSlots {
+  /**
+   * Custom component for the toolbar.
+   * @default ChartsToolbar
+   */
+  toolbar?: React.ElementType<ChartsToolbarProps>;
+}
+export interface ChartsToolbarSlotProps {
+  /**
+   * Props for the toolbar component.
+   */
+  toolbar?: Partial<ChartsToolbarProps>;
+}

package/Toolbar/Toolbar.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/Toolbar/ToolbarButton.d.ts

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { ChartBaseIconButtonProps } from "../models/slots/chartsBaseSlotProps.js";
-export interface ToolbarButtonProps extends ChartBaseIconButtonProps {}
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+import { ChartsSlotProps } from "../internals/material/index.js";
+export type ToolbarButtonProps = ChartsSlotProps['baseIconButton'] & {
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render?: RenderProp<ChartsSlotProps['baseIconButton']>;
+};
 declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { ToolbarButton };

package/Toolbar/ToolbarButton.js

@@ -1,21 +1,34 @@
 "use strict";
 
-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.ToolbarButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _material = require("../internals/material");
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render"];
 const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButton(props, ref) {
-  const IconButton = _material.defaultSlotsMaterial.baseIconButton;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, (0, _extends2.default)({
-    ref: ref
-  }, props));
+  const {
+      render
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    slots,
+    slotProps
+  } = (0, _ChartsSlotsContext.useChartsSlots)();
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: element
+  });
 });
 if (process.env.NODE_ENV !== "production") ToolbarButton.displayName = "ToolbarButton";
 process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
@@ -24,5 +37,10 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  /**
+   * A function to customize the rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
   style: _propTypes.default.object
 } : void 0;

package/Toolbar/chartToolbarClasses.d.ts

@@ -0,0 +1,6 @@
+export interface ChartsToolbarClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+export type ChartsToolbarClassKey = keyof ChartsToolbarClasses;
+export declare const chartsToolbarClasses: ChartsToolbarClasses;

package/Toolbar/chartToolbarClasses.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.chartsToolbarClasses = void 0;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+const chartsToolbarClasses = exports.chartsToolbarClasses = (0, _generateUtilityClasses.default)('MuiChartsToolbar', ['root']);

package/Toolbar/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Toolbar.js";
-export * from "./ToolbarButton.js";
+export * from "./ToolbarButton.js";
+export * from "./Toolbar.types.js";
+export * from "./chartToolbarClasses.js";