@mui/x-charts 8.3.1 → 8.5.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/Scatter.js

@@ -61,19 +61,11 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = instance.isPointInside({
-        x,
-        y
-      });
-      const pointCtx = {
-        type: 'scatter',
-        seriesId: series.id,
-        dataIndex: i
-      };
+      const isInRange = instance.isPointInside(x, y);
       if (isInRange) {
         const currentItem = {
-          seriesId: pointCtx.seriesId,
-          dataIndex: pointCtx.dataIndex
+          seriesId: series.id,
+          dataIndex: i
         };
         const isItemHighlighted = isHighlighted(currentItem);
         temp.push({

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,19 +56,21 @@ 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))
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
-          trigger: "item"
-        }, props.slotProps?.tooltip)), children]
-      }))]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), children]
+      })), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+        trigger: "item"
+      }, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") ScatterChart.displayName = "ScatterChart";
 process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -181,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/SparkLineChart/SparkLineChart.js

@@ -15,7 +15,8 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _ChartsClipPath = require("../ChartsClipPath");
 var _BarChart = require("../BarChart");
 var _LineChart = require("../LineChart");
-var _ChartContainer = require("../ChartContainer");
+var _ChartDataProvider = require("../ChartDataProvider");
+var _ChartsSurface = require("../ChartsSurface");
 var _constants = require("../constants");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
@@ -78,8 +79,7 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     }
     return typeof color === 'function' ? mode => [color(mode)] : [color];
   }, [color]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
-    ref: ref,
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartDataProvider.ChartDataProvider, {
     series: [(0, _extends2.default)({
       type: plotType,
       data,
@@ -92,7 +92,6 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
     width: width,
     height: height,
     margin: margin,
-    className: className,
     xAxis: [(0, _extends2.default)({
       id: _constants.DEFAULT_X_AXIS_KEY,
       scaleType: plotType === 'bar' ? 'band' : 'point',
@@ -109,34 +108,40 @@ const SparkLineChart = exports.SparkLineChart = /*#__PURE__*/React.forwardRef(fu
       position: 'none'
     })],
     colors: colors,
-    sx: sx,
     disableAxisListener: (!showTooltip || slotProps?.tooltip?.trigger !== 'axis') && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      clipPath: `url(#${clipPathId})`,
-      children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
-        skipAnimation: true,
-        slots: slots,
-        slotProps: slotProps
-      }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
-          skipAnimation: true,
-          slots: slots,
-          slotProps: slotProps
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({
+      className: className,
+      ref: ref,
+      sx: sx
+    }, other, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        clipPath: `url(#${clipPathId})`,
+        children: [plotType === 'bar' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BarChart.BarPlot, {
           skipAnimation: true,
           slots: slots,
           slotProps: slotProps
+        }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.AreaPlot, {
+            skipAnimation: true,
+            slots: slots,
+            slotProps: slotProps
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LinePlot, {
+            skipAnimation: true,
+            slots: slots,
+            slotProps: slotProps
+          })]
         })]
-      })]
-    }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
-      slots: slots,
-      slotProps: slotProps
-    }), disableClipping ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
-      id: clipPathId,
-      offset: clipPathOffset
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), children]
-  }));
+      }), plotType === 'line' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineChart.LineHighlightPlot, {
+        slots: slots,
+        slotProps: slotProps
+      }), disableClipping ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+        id: clipPathId,
+        offset: clipPathOffset
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlight)), children]
+    })), showTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip))]
+  });
 });
+if (process.env.NODE_ENV !== "production") SparkLineChart.displayName = "SparkLineChart";
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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,27 +1,46 @@
 "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 = {
   // ----------------------------- 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,
+  /**
+   * 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";

package/Toolbar/index.js

@@ -24,4 +24,26 @@ Object.keys(_ToolbarButton).forEach(function (key) {
       return _ToolbarButton[key];
     }
   });
+});
+var _Toolbar2 = require("./Toolbar.types");
+Object.keys(_Toolbar2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Toolbar2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Toolbar2[key];
+    }
+  });
+});
+var _chartToolbarClasses = require("./chartToolbarClasses");
+Object.keys(_chartToolbarClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartToolbarClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartToolbarClasses[key];
+    }
+  });
 });

package/Toolbar/internals/ChartsToolbar.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The chart toolbar component.
+ *
+ * In the community package, this component is empty and does not render anything.
+ */
+export declare function ChartsToolbar(): null;

package/Toolbar/internals/ChartsToolbar.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsToolbar = ChartsToolbar;
+/**
+ * The chart toolbar component.
+ *
+ * In the community package, this component is empty and does not render anything.
+ */
+function ChartsToolbar() {
+  return null;
+}

package/context/ChartProvider/ChartContext.js

@@ -10,6 +10,4 @@ var React = _interopRequireWildcard(require("react"));
  * @ignore - internal component.
  */
 const ChartContext = exports.ChartContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== 'production') {
-  ChartContext.displayName = 'ChartContext';
-}
+if (process.env.NODE_ENV !== "production") ChartContext.displayName = "ChartContext";

package/context/ChartsSlotsContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+type SlotProps<T extends Record<keyof T, React.ComponentType<any>>> = { [key in keyof T]: React.ComponentProps<T[key]> };
+export interface ChartsSlotsContextValue<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots> {
+  slots: T;
+  slotProps: Partial<SlotProps<T>>;
+}
+export declare const ChartsSlotsContext: React.Context<ChartsSlotsContextValue<ChartsSlots> | null>;
+/**
+ * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
+ * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
+ */
+export declare function useChartsSlots<T extends ChartsSlots & Record<keyof T, React.ComponentType<any>> = ChartsSlots>(): ChartsSlotsContextValue<T>;
+interface ChartsSlotsProviderProps {
+  slots?: Partial<ChartsSlots>;
+  slotProps?: Partial<ChartsSlotProps>;
+  defaultSlots: ChartsSlots;
+}
+export declare function ChartsSlotsProvider(props: React.PropsWithChildren<ChartsSlotsProviderProps>): React.JSX.Element;
+export {};

package/context/ChartsSlotsContext.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsSlotsContext = void 0;
+exports.ChartsSlotsProvider = ChartsSlotsProvider;
+exports.useChartsSlots = useChartsSlots;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+const ChartsSlotsContext = exports.ChartsSlotsContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Get the slots and slotProps from the nearest `ChartDataProvider` or `ChartDataProviderPro`.
+ * @returns {ChartsSlotsContextValue} The slots and slotProps from the context.
+ */
+if (process.env.NODE_ENV !== "production") ChartsSlotsContext.displayName = "ChartsSlotsContext";
+function useChartsSlots() {
+  const context = React.useContext(ChartsSlotsContext);
+  if (context == null) {
+    throw new Error(['MUI X Charts: Could not find the Charts Slots context.', 'It looks like you rendered your component outside of a ChartDataProvider.', 'This can also happen if you are bundling multiple versions of the library.'].join('\n'));
+  }
+  return context;
+}
+function ChartsSlotsProvider(props) {
+  const {
+    slots,
+    slotProps = {},
+    defaultSlots,
+    children
+  } = props;
+  const value = React.useMemo(() => ({
+    slots: (0, _extends2.default)({}, defaultSlots, slots),
+    slotProps
+  }), [defaultSlots, slots, slotProps]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsSlotsContext.Provider, {
+    value: value,
+    children: children
+  });
+}

package/context/index.d.ts

@@ -1 +1,2 @@
-export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export type { HighlightScope, FadeOptions, HighlightItemData, HighlightOptions } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
+export * from "./useChartApiContext.js";

package/context/index.js

@@ -2,4 +2,15 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
+});
+var _useChartApiContext = require("./useChartApiContext");
+Object.keys(_useChartApiContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useChartApiContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useChartApiContext[key];
+    }
+  });
 });