@mui/x-charts-pro 8.3.1 → 8.5.0

package/ScatterChartPro/ScatterChartPro.js

@@ -25,7 +25,7 @@ var _ChartZoomSlider = require("../ChartZoomSlider");
 var _ChartsToolbarPro = require("../ChartsToolbarPro");
 var _useChartContainerProProps = require("../ChartContainerPro/useChartContainerProProps");
 var _ChartDataProviderPro = require("../ChartDataProviderPro");
-var _ScatterChartPro = require("./ScatterChartPro.plugins");
+var _ScatterChartPro2 = require("./ScatterChartPro.plugins");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["initialZoom", "zoomData", "onZoomChange", "apiRef", "showToolbar"];
 /**
@@ -70,22 +70,24 @@ const ScatterChartPro = exports.ScatterChartPro = /*#__PURE__*/React.forwardRef(
     zoomData,
     onZoomChange,
     apiRef,
-    plugins: _ScatterChartPro.SCATTER_CHART_PRO_PLUGINS
+    plugins: _ScatterChartPro2.SCATTER_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsToolbarPro.ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+      children: [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)(_ChartZoomSlider.ChartZoomSlider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           "data-drawing-container": true,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterChart.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)({}, props?.slotProps?.tooltip, {
-          trigger: "item"
-        })), 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)({}, props?.slotProps?.tooltip, {
+        trigger: "item"
       }))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") ScatterChartPro.displayName = "ScatterChartPro";
 process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -95,6 +97,7 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
     current: _propTypes.default.shape({
       exportAsImage: _propTypes.default.func.isRequired,
       exportAsPrint: _propTypes.default.func.isRequired,
+      setAxisZoomData: _propTypes.default.func.isRequired,
       setZoomData: _propTypes.default.func.isRequired
     })
   }),
@@ -316,7 +319,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -379,7 +384,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -437,7 +444,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -495,7 +504,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -553,7 +564,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -611,7 +624,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -669,7 +684,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -727,7 +744,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -797,7 +816,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -859,7 +880,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -916,7 +939,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -973,7 +998,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1030,7 +1057,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1087,7 +1116,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1144,7 +1175,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])
@@ -1201,7 +1234,9 @@ process.env.NODE_ENV !== "production" ? ScatterChartPro.propTypes = {
       minStart: _propTypes.default.number,
       panning: _propTypes.default.bool,
       slider: _propTypes.default.shape({
-        enabled: _propTypes.default.bool
+        enabled: _propTypes.default.bool,
+        showTooltip: _propTypes.default.oneOf(['always', 'hover', 'never']),
+        size: _propTypes.default.number
       }),
       step: _propTypes.default.number
     }), _propTypes.default.bool])

package/context/index.d.ts

@@ -0,0 +1 @@
+export * from "./useChartApiContext.js";

package/context/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+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,9 @@
+import { ChartProApi } from "../ChartContainerPro/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<ChartProApi<'bar'>>();
+ */
+export declare function useChartApiContext<Api extends ChartProApi>(): import("react").RefObject<Api>;

package/context/useChartApiContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useChartApiContext = useChartApiContext;
+var _context = require("@mui/x-charts/context");
+/**
+ * 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<ChartProApi<'bar'>>();
+ */
+function useChartApiContext() {
+  return (0, _context.useChartApiContext)();
+}

package/esm/BarChartPro/BarChartPro.d.ts

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import { BarChartProps } from '@mui/x-charts/BarChart';
+import { BarChartProps, BarChartSlotProps, BarChartSlots } from '@mui/x-charts/BarChart';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { ChartContainerProProps } from "../ChartContainerPro/index.js";
 import { BarChartProPluginsSignatures } from "./BarChartPro.plugins.js";
-export interface BarChartProProps extends Omit<BarChartProps, 'apiRef'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig'> {
+export interface BarChartProSlots extends BarChartSlots, Partial<ChartsSlotsPro> {}
+export interface BarChartProSlotProps extends BarChartSlotProps, Partial<ChartsSlotPropsPro> {}
+export interface BarChartProProps extends Omit<BarChartProps, 'apiRef' | 'slots' | 'slotProps'>, Omit<ChartContainerProProps<'bar', BarChartProPluginsSignatures>, 'series' | 'plugins' | 'seriesConfig' | 'slots' | 'slotProps'> {
   /**
-   * If true, shows the default chart toolbar.
-   * @default false
+   * Overridable component slots.
+   * @default {}
    */
-  showToolbar?: boolean;
+  slots?: BarChartProSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BarChartProSlotProps;
 }
 /**
  * Demos:

package/esm/BarChartPro/BarChartPro.js

@@ -70,16 +70,18 @@ const BarChartPro = /*#__PURE__*/React.forwardRef(function BarChartPro(inProps,
     plugins: BAR_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
+  const Toolbar = props.slots?.toolbar ?? ChartsToolbarPro;
   return /*#__PURE__*/_jsx(ChartDataProviderPro, _extends({}, chartDataProviderProProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
-      children: [showToolbar ? /*#__PURE__*/_jsx(ChartsToolbarPro, {}) : null, !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
+      children: [showToolbar ? /*#__PURE__*/_jsx(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(ChartZoomSlider, {}), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
-      }))]
+        })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartZoomSlider, {}), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+      })), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip))]
     }))
   }));
 });
+if (process.env.NODE_ENV !== "production") BarChartPro.displayName = "BarChartPro";
 process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -89,6 +91,7 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
     current: PropTypes.shape({
       exportAsImage: PropTypes.func.isRequired,
       exportAsPrint: PropTypes.func.isRequired,
+      setAxisZoomData: PropTypes.func.isRequired,
       setZoomData: PropTypes.func.isRequired
     })
   }),
@@ -318,7 +321,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -381,7 +386,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -439,7 +446,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -497,7 +506,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -555,7 +566,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -613,7 +626,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -671,7 +686,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -729,7 +746,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -799,7 +818,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -861,7 +882,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -918,7 +941,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -975,7 +1000,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1032,7 +1059,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1089,7 +1118,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1146,7 +1177,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])
@@ -1203,7 +1236,9 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
       minStart: PropTypes.number,
       panning: PropTypes.bool,
       slider: PropTypes.shape({
-        enabled: PropTypes.bool
+        enabled: PropTypes.bool,
+        showTooltip: PropTypes.oneOf(['always', 'hover', 'never']),
+        size: PropTypes.number
       }),
       step: PropTypes.number
     }), PropTypes.bool])

package/esm/ChartContainerPro/ChartContainerPro.d.ts

@@ -7,7 +7,6 @@ export type ChartContainerProProps<TSeries extends ChartSeriesType = ChartSeries
 type ChartContainerProComponent = <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartContainerProProps<TSeries, TSignatures> & {
   ref?: React.ForwardedRef<SVGSVGElement>;
 }) => React.JSX.Element;
-export type ChartProApi = NonNullable<NonNullable<ChartContainerProProps['apiRef']>['current']>;
 /**
  * It sets up the data providers as well as the `<svg>` for the chart.
  *

package/esm/ChartContainerPro/ChartContainerPro.js

@@ -45,6 +45,7 @@ const ChartContainerPro = /*#__PURE__*/React.forwardRef(function ChartContainerP
 });
 
 // @ts-expect-error the type coercion breaks the prop types
+if (process.env.NODE_ENV !== "production") ChartContainerPro.displayName = "ChartContainerPro";
 process.env.NODE_ENV !== "production" ? ChartContainerPro.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/ChartContainerPro/ChartProApi.d.ts

@@ -0,0 +1,26 @@
+import { ChartAnyPluginSignature, ChartPublicAPI } from '@mui/x-charts/internals';
+import { HeatmapPluginsSignatures } from "../Heatmap/Heatmap.plugins.js";
+import { LineChartProPluginsSignatures } from "../LineChartPro/LineChartPro.plugins.js";
+import { ScatterChartProPluginsSignatures } from "../ScatterChartPro/ScatterChartPro.plugins.js";
+import { BarChartProPluginsSignatures } from "../BarChartPro/BarChartPro.plugins.js";
+import { AllPluginSignatures, DefaultPluginSignatures } from "../internals/plugins/allPlugins.js";
+import { FunnelChartPluginsSignatures } from "../FunnelChart/FunnelChart.plugins.js";
+import { RadarChartProPluginsSignatures } from "../RadarChartPro/RadarChartPro.plugins.js";
+type PluginsPerSeriesType = {
+  heatmap: HeatmapPluginsSignatures;
+  line: LineChartProPluginsSignatures;
+  scatter: ScatterChartProPluginsSignatures;
+  bar: BarChartProPluginsSignatures;
+  funnel: FunnelChartPluginsSignatures;
+  radar: RadarChartProPluginsSignatures;
+  composition: DefaultPluginSignatures;
+};
+/**
+ * The API of the chart `apiRef` object.
+ * The chart type can be passed as the first generic parameter to narrow down the API to the specific chart type.
+ * @example ChartProApi<'bar'>
+ * If the chart is being created using composition, the `composition` value can be used.
+ * @example ChartProApi<'composition'>
+ */
+export type ChartProApi<TSeries extends keyof PluginsPerSeriesType | undefined = undefined, TSignatures extends readonly ChartAnyPluginSignature[] = (TSeries extends keyof PluginsPerSeriesType ? PluginsPerSeriesType[TSeries] : AllPluginSignatures)> = ChartPublicAPI<TSignatures>;
+export {};

package/esm/ChartContainerPro/ChartProApi.js

@@ -0,0 +1 @@
+export {};

package/esm/ChartContainerPro/index.d.ts

@@ -1,2 +1,3 @@
 import "../typeOverloads/index.js";
-export * from "./ChartContainerPro.js";
+export * from "./ChartContainerPro.js";
+export * from "./ChartProApi.js";

package/esm/ChartContainerPro/index.js

@@ -1,2 +1,3 @@
 import "../typeOverloads/index.js";
-export * from "./ChartContainerPro.js";
+export * from "./ChartContainerPro.js";
+export * from "./ChartProApi.js";

package/esm/ChartDataProviderPro/ChartDataProviderPro.d.ts

@@ -1,8 +1,18 @@
 import * as React from 'react';
 import { ChartSeriesType, ChartAnyPluginSignature, ChartProviderProps } from '@mui/x-charts/internals';
 import { ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
+import { ChartsSlotPropsPro, ChartsSlotsPro } from "../internals/material/index.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'];
+export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = ChartDataProviderProps<TSeries, TSignatures> & ChartProviderProps<TSeries, TSignatures>['pluginParams'] & {
+  /**
+   * Slots to customize charts' components.
+   */
+  slots?: Partial<ChartsSlotsPro>;
+  /**
+   * The props for the slots.
+   */
+  slotProps?: Partial<ChartsSlotPropsPro>;
+};
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -4,13 +4,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Watermark } from '@mui/x-license/Watermark';
-import { ChartProvider } from '@mui/x-charts/internals';
+import { ChartProvider, ChartsSlotsProvider } from '@mui/x-charts/internals';
 import { ChartsLocalizationProvider } from '@mui/x-charts/ChartsLocalizationProvider';
 import { useLicenseVerifier } from '@mui/x-license/useLicenseVerifier';
+import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc0NzE3MzYwMDAwMA==";
+const releaseInfo = "MTc0ODQ2OTYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.
@@ -43,7 +44,9 @@ function ChartDataProviderPro(props) {
   const {
     children,
     localeText,
-    chartProviderProps
+    chartProviderProps,
+    slots,
+    slotProps
   } = useChartDataProviderProProps(_extends({}, props, {
     plugins: props.plugins ?? DEFAULT_PLUGINS
   }));
@@ -51,7 +54,12 @@ function ChartDataProviderPro(props) {
   return /*#__PURE__*/_jsxs(ChartProvider, _extends({}, chartProviderProps, {
     children: [/*#__PURE__*/_jsx(ChartsLocalizationProvider, {
       localeText: localeText,
-      children: children
+      children: /*#__PURE__*/_jsx(ChartsSlotsProvider, {
+        slots: slots,
+        slotProps: slotProps,
+        defaultSlots: defaultSlotsMaterial,
+        children: children
+      })
     }), /*#__PURE__*/_jsx(Watermark, {
       packageName: packageIdentifier,
       releaseInfo: releaseInfo
@@ -111,6 +119,14 @@ process.env.NODE_ENV !== "production" ? ChartDataProviderPro.propTypes = {
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
   skipAnimation: PropTypes.bool,
+  /**
+   * The props for the slots.
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Slots to customize charts' components.
+   */
+  slots: PropTypes.object,
   theme: PropTypes.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/esm/ChartDataProviderPro/useChartDataProviderProProps.d.ts

@@ -5,4 +5,6 @@ export declare const useChartDataProviderProProps: <TSeries extends ChartSeriesT
   children: import("react").ReactNode;
   localeText: Partial<import("@mui/x-charts/locales").ChartsLocaleText> | undefined;
   chartProviderProps: import("@mui/x-charts/internals").ChartProviderProps<TSeries, TSignatures>;
+  slots: Partial<import("@mui/x-charts/internals").ChartsSlots> | undefined;
+  slotProps: Partial<import("@mui/x-charts/internals").ChartsSlotProps> | undefined;
 };