@mui/x-charts 8.4.0 → 8.5.1

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

@@ -55,9 +55,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;
   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 && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.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 +183,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,12 @@
 import * as React from 'react';
-export interface ToolbarProps extends React.PropsWithChildren {}
-export declare function Toolbar({
-  children
-}: ToolbarProps): React.JSX.Element;
+import { RenderProp } from '@mui/x-internals/useComponentRenderer';
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
+export interface ToolbarProps extends React.ComponentProps<'div'> {
+  className?: string;
+  /**
+   * A function to customize rendering of the component.
+   */
+  render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
+}
+export declare const Toolbar: React.ForwardRefExoticComponent<Omit<ToolbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/Toolbar/Toolbar.js

@@ -1,13 +1,22 @@
 "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;
+exports.Toolbar = 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 _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _useComponentRenderer = require("@mui/x-internals/useComponentRenderer");
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
+var _chartToolbarClasses = require("./chartToolbarClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className", "render"];
 const ToolbarRoot = (0, _styles.styled)('div', {
   name: 'MuiChartsToolbar',
   slot: 'Root'
@@ -25,10 +34,32 @@ 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
+const Toolbar = exports.Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(_ref, ref) {
+  let {
+      className,
+      render
+    } = _ref,
+    other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  const element = (0, _useComponentRenderer.useComponentRenderer)(ToolbarRoot, render, (0, _extends2.default)({
+    role: 'toolbar',
+    'aria-orientation': 'horizontal',
+    className: (0, _clsx.default)(_chartToolbarClasses.chartsToolbarClasses.root, className)
+  }, other, {
+    ref
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarContext.ToolbarContextProvider, {
+    children: element
   });
-}
+});
+if (process.env.NODE_ENV !== "production") Toolbar.displayName = "Toolbar";
+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,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func])
+} : void 0;

package/Toolbar/Toolbar.types.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface ChartsToolbarProps {}
+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,47 @@
 "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.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 _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _ToolbarContext = require("@mui/x-internals/ToolbarContext");
+var _ChartsSlotsContext = require("../context/ChartsSlotsContext");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["render", "onKeyDown", "onFocus", "disabled", "aria-disabled"],
+  _excluded2 = ["tabIndex"];
 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 buttonRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(buttonRef, ref);
+  const _useRegisterToolbarBu = (0, _ToolbarContext.useRegisterToolbarButton)(props, buttonRef),
+    {
+      tabIndex
+    } = _useRegisterToolbarBu,
+    toolbarButtonProps = (0, _objectWithoutPropertiesLoose2.default)(_useRegisterToolbarBu, _excluded2);
+  const element = (0, _useComponentRenderer.useComponentRenderer)(slots.baseIconButton, render, (0, _extends2.default)({}, slotProps?.baseIconButton, {
+    tabIndex
+  }, other, toolbarButtonProps, {
+    ref: handleRef
+  }));
+  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 +50,11 @@ process.env.NODE_ENV !== "production" ? ToolbarButton.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   className: _propTypes.default.string,
-  style: _propTypes.default.object
+  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,
+  tabIndex: _propTypes.default.number
 } : 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/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];
+    }
+  });
 });

package/context/useChartApiContext.d.ts

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

package/context/useChartApiContext.js

@@ -0,0 +1,27 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiContext = useChartApiContext;
+var React = _interopRequireWildcard(require("react"));
+var _ChartProvider = require("./ChartProvider");
+/**
+ * The `useChartApiContext` hook provides access to the chart API.
+ * This is only available when the chart is rendered within a chart or a `ChartDataProvider` component.
+ * If you want to access the chart API outside those components, you should use the `apiRef` prop instead.
+ * @example
+ * const apiRef = useChartApiContext<ChartApi<'bar'>>();
+ */
+function useChartApiContext() {
+  const {
+    publicAPI
+  } = (0, _ChartProvider.useChartContext)();
+  const apiRef = React.useRef(publicAPI);
+  React.useEffect(() => {
+    apiRef.current = publicAPI;
+  }, [publicAPI]);
+  return apiRef;
+}

package/esm/BarChart/BarChart.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { MakeOptional } from '@mui/x-internals/types';
+import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
+import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
 import { BarPlotProps, BarPlotSlotProps, BarPlotSlots } from "./BarPlot.js";
 import { ChartContainerProps } from "../ChartContainer/index.js";
 import { ChartsAxisProps } from "../ChartsAxis/index.js";
@@ -11,8 +13,8 @@ import { ChartsAxisSlots, ChartsAxisSlotProps } from "../models/axis.js";
 import { ChartsGridProps } from "../ChartsGrid/index.js";
 import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
 import { BarChartPluginsSignatures } from "./BarChart.plugins.js";
-export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots {}
-export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps {}
+export interface BarChartSlots extends ChartsAxisSlots, BarPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
+export interface BarChartSlotProps extends ChartsAxisSlotProps, BarPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
 export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<BarPlotProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the bar chart.
@@ -50,6 +52,11 @@ export interface BarChartProps extends Omit<ChartContainerProps<'bar', BarChartP
    * @default 'vertical'
    */
   layout?: BarSeriesType['layout'];
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar?: boolean;
 }
 /**
  * Demos:

package/esm/BarChart/BarChart.js

@@ -52,9 +52,10 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     chartsSurfaceProps
   } = useChartContainerProps(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [props.showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         children: [/*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
           children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
         })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
@@ -189,6 +190,11 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * An array of [[BarSeriesType]] objects.
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * If true, shows the default chart toolbar.
+   * @default false
+   */
+  showToolbar: PropTypes.bool,
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.

package/esm/BarChart/BarLabel/BarLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BarLabelOwnerState } from "./BarLabel.types.js";
-export declare const BarLabelComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
+export declare const BarLabelComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGTextElementAttributes<SVGTextElement>, keyof React.SVGTextElementAttributes<SVGTextElement>>, {}>;
 export type BarLabelProps = Omit<React.SVGProps<SVGTextElement>, 'ref' | 'id' | 'x' | 'y' | 'width' | 'height'> & BarLabelOwnerState & {
   /**
    * The x-coordinate of the stack this bar label belongs to.

package/esm/BarChart/seriesConfig/seriesProcessor.js

@@ -56,7 +56,7 @@ const seriesProcessor = (params, dataset) => {
                 warnOnce([`MUI X Charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
               }
             }
-            return 0;
+            return null;
           }
           return value;
         }) : series[id].data,

package/esm/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";