@mui/x-charts 6.0.0-alpha.12 → 6.0.0-alpha.14

package/BarChart/BarChart.d.ts

@@ -4,13 +4,13 @@ import { ResponsiveChartContainerProps } from '../ResponsiveChartContainer';
 import { ChartsAxisProps } from '../ChartsAxis';
 import { BarSeriesType } from '../models/seriesType/bar';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotsComponent, ChartsLegendSlotComponentProps } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotsComponent, ChartsAxisSlotComponentProps } from '../models/axis';
-export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, ChartsLegendSlotsComponent {
+export interface BarChartSlotsComponent extends ChartsAxisSlotsComponent, BarPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface BarChartSlotComponentProps extends ChartsAxisSlotComponentProps, BarPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface BarChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<BarSeriesType, 'type'>[];

package/BarChart/BarChart.js

@@ -20,7 +20,7 @@ var _ChartsClipPath = require("../ChartsClipPath");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
+const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -101,7 +101,6 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(props, ref) {
     }), children]
   });
 });
-exports.BarChart = BarChart;
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -250,6 +249,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/BarChart/BarElement.js

@@ -26,8 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getBarElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiBarElement', slot);
 }
-const lineElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
-exports.lineElementClasses = lineElementClasses;
+const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiBarElement', ['root']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,7 +37,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getBarElementUtilityClass, classes);
 };
-const BarElementPath = (0, _styles.styled)('rect', {
+const BarElementPath = exports.BarElementPath = (0, _styles.styled)('rect', {
   name: 'MuiBarElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -51,7 +50,6 @@ const BarElementPath = (0, _styles.styled)('rect', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded && 0.3 || 1
 }));
-exports.BarElementPath = BarElementPath;
 function BarElement(props) {
   const {
       id,

package/BarChart/formatter.js

@@ -63,5 +63,4 @@ const formatter = (params, dataset) => {
     series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/BarChart/legend.js

@@ -16,5 +16,4 @@ const legendGetter = params => {
   }));
   return data.filter(item => item.label !== undefined);
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;

package/CHANGELOG.md

@@ -3,6 +3,150 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.16.1
+
+_Oct 6, 2023_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🥧 Support interaction with pie chart
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.1`
+
+- [DataGrid] Add a new demo with sparklines (#9228) @flaviendelangle
+- [DataGrid] Fix autosize missing a few pixels (#10471) @romgrk
+- [DataGrid] Make `disableColumnSelector` demo idempotent (#10548) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.16.1`.
+
+#### `@mui/x-data-grid-premium@6.16.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.16.1`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.1`
+
+- [pickers] Avoid calendar layout shifting when changing views (#10541) @LukasTy
+- [pickers] Fix clearable behavior when disabled (#10542) @noraleonte
+- [pickers] Improve customization playground examples (#10544) @noraleonte
+
+#### `@mui/x-date-pickers-pro@6.16.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.16.1`, plus:
+
+- [DateRangePicker] Fix `InputProps` propagation in multi input (#10564) @alexfauquette
+
+### Charts / `@mui/x-charts@6.0.0-alpha.14`
+
+- [charts] Display cursor pointer for pie chart only if `onClick` is provided (#10551) @giladappsforce
+- [charts] Add `onClick` prop to PieChart (#10506) @giladappsforce
+- [charts] Support `slots`/`slotProps` for the tooltip (#10515) @alexfauquette
+
+### Docs
+
+- [docs] Add `DateRangePicker` example with a `Button` trigger (#10485) @LukasTy
+- [docs] Add section about disabling columns panel (#10328) @MBilalShafi
+- [docs] Add section about overriding slots to base concepts (#10421) @noraleonte
+- [docs] Add "What's new" page listing all release announcements (#9727) @joserodolfofreitas
+- [docs] Update RTL Support section of the grid localization docs (#10561) @MBilalShafi
+
+### Core
+
+- [core] Fix casing consistency with legal and marketing content @oliviertassinari
+- [core] Revert the link in the priority support ticket description (#10517) @michelengelen
+- [CHANGELOG] Polish image @oliviertassinari
+
+## 6.16.0
+
+_Sep 29, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add a clearable behavior to all the single input pickers and fields (#9095) @noraleonte
+
+  The pickers and fields now have an out-of-the box implementation for clearing the field value. You can see the documentation for this behavior on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#clearing-the-value).
+
+  <img width="337" height="139" alt="Clearable behavior" src="https://github.com/mui/mui-x/assets/3165635/a5407cb6-0b8a-443c-b4b9-1f81ceb4d087">
+
+- 💫 Add Date Picker customization playground (#9581) @noraleonte
+
+  You can play around with style customization options on the [Date Picker documentation](https://mui.com/x/react-date-pickers/date-picker/#customization).
+
+  We are thrilled to hear your feedback about this functionality!
+
+- 🚀 Fix header filters menu auto closing on render (#10483) @MBilalShafi
+- 🎯 Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
+- 🌍 Improve Russian (ru-RU) locale on the data grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.16.0`
+
+- [DataGrid] Fix column headers scroll when theme scoping is used (#10437) @cherniavskii
+- [DataGrid] Rename `global` to `globalScope` due to Jest issue (#10470) @romgrk
+- [l10n] Improve Russian (ru-RU) locale (#10464 and #10407) @NKodos
+
+#### `@mui/x-data-grid-pro@6.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.16.0`, plus:
+
+- [DataGridPro] Fix header filters menu auto closing on render (#10483) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@6.16.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.16.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.16.0`
+
+- [pickers] Add warning to `shouldDisableDate` validation (#10502) @michelengelen
+- [pickers] Implement `clearable` field behavior (#9095) @noraleonte
+- [pickers] Refactor `dayOfWeekFormatter` (#10345) @michelengelen
+
+#### `@mui/x-date-pickers-pro@6.16.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.16.0`.
+
+### Charts / `@mui/x-charts@6.0.0-alpha.13`
+
+- [charts] Share upfront future Pro features (#10465) @oliviertassinari
+
+### Tree View / `@mui/x-tree-view@6.0.0-beta.0`
+
+- [TreeView] Do not try to focus a collapsed node when re-focusing the TreeView (#10422) @flaviendelangle
+- [TreeView] Fix the typing of the `Multiple` generic (#10478) @flaviendelangle
+
+### Docs
+
+- [docs] Correct the typo in data grid api docs (#10477) @MBilalShafi
+- [docs] Add customization playground (#9581) @noraleonte
+- [docs] Fix Tree View product ID (#10428) @oliviertassinari
+- [docs] Fix demo crashing when all rows are deleted (#10438) @cherniavskii
+- [docs] Fix mobile scrollbar column resize (#10455) @oliviertassinari
+- [docs] Fix usage of `GridRenderCellParams` interface (#10435) @cherniavskii
+
+### Core
+
+- [core] Fix typo in header data grid quick filter @oliviertassinari
+- [core] Group D3 renovate PRs (#10480) @flaviendelangle
+- [core] Link the priority support page (#10495) @michelengelen
+- [core] Move the pickers describes to the test utils folder (#10490) @flaviendelangle
+- [core] Priority Support casing normalization @oliviertassinari
+- [core] Remove automated DataGrid performance tests (#10414) @romgrk
+- [core] Sync `prism-okaidia.css` with docs-infra @oliviertassinari
+- [core] Update issue actions & templates (#10375) @romgrk
+- [core] Update release guide (#10468) @DanailH
+
 ## 6.15.0
 
 _Sep 22, 2023_

package/ChartContainer/index.js

@@ -16,7 +16,7 @@ var _HighlightProvider = require("../context/HighlightProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
+const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
     width,
     height,
@@ -64,5 +64,4 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
       })
     })
   });
-});
-exports.ChartContainer = ChartContainer;
+});

package/ChartsAxis/axisClasses.js

@@ -9,5 +9,4 @@ var _utils = require("@mui/utils");
 function getAxisUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsAxis', slot);
 }
-const axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
-exports.axisClasses = axisClasses;
+const axisClasses = exports.axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/ChartsLegend/ChartsLegend.js

@@ -63,7 +63,7 @@ function getTranslePosition({
     transform: `translate(${xValue}, ${yValue})`
   };
 }
-const ChartsLegendRoot = (0, _styles.styled)('g', {
+const ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -90,8 +90,7 @@ const ChartsLegendRoot = (0, _styles.styled)('g', {
     offsetY
   }));
 });
-exports.ChartsLegendRoot = ChartsLegendRoot;
-const ChartsSeriesLegendGroup = (0, _styles.styled)('g', {
+const ChartsSeriesLegendGroup = exports.ChartsSeriesLegendGroup = (0, _styles.styled)('g', {
   name: 'MuiChartsLegend',
   slot: 'ChartsSeriesLegendGroup',
   overridesResolver: (props, styles) => styles.series
@@ -111,8 +110,7 @@ const ChartsSeriesLegendGroup = (0, _styles.styled)('g', {
     transform: `translate(0, calc(${seriesIndex} * (var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-rootSpacing))))`
   };
 });
-exports.ChartsSeriesLegendGroup = ChartsSeriesLegendGroup;
-const ChartsLegendMark = (0, _styles.styled)('rect', {
+const ChartsLegendMark = exports.ChartsLegendMark = (0, _styles.styled)('rect', {
   name: 'MuiChartsLegend',
   slot: 'Mark',
   overridesResolver: (props, styles) => styles.mark
@@ -125,8 +123,7 @@ const ChartsLegendMark = (0, _styles.styled)('rect', {
   height: 'var(--ChartsLegend-itemMarkSize)',
   fill: ownerState.color
 }));
-exports.ChartsLegendMark = ChartsLegendMark;
-const ChartsLegendLabel = (0, _styles.styled)('text', {
+const ChartsLegendLabel = exports.ChartsLegendLabel = (0, _styles.styled)('text', {
   name: 'MuiChartsLegend',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
@@ -141,7 +138,6 @@ const ChartsLegendLabel = (0, _styles.styled)('text', {
   fill: (theme.vars || theme).palette.text.primary,
   dominantBaseline: 'central'
 }));
-exports.ChartsLegendLabel = ChartsLegendLabel;
 const defaultProps = {
   position: {
     horizontal: 'middle',

package/ChartsLegend/chartsLegendClasses.js

@@ -9,5 +9,4 @@ var _utils = require("@mui/utils");
 function getChartsLegendUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsLegend', slot);
 }
-const legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
-exports.legendClasses = legendClasses;
+const legendClasses = exports.legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);

package/ChartsSurface.js

@@ -18,7 +18,7 @@ const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(() => ({}));
-const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
   const {
       children,
       width,
@@ -54,5 +54,4 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
       children: props.desc
     }), children]
   }));
-});
-exports.ChartsSurface = ChartsSurface;
+});

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

@@ -35,6 +35,7 @@ export declare function DefaultChartsAxisContent(props: ChartsAxisContentProps):
 export declare function ChartsAxisTooltipContent(props: {
     axisData: AxisInteractionData;
     content?: React.ElementType<ChartsAxisContentProps>;
+    contentProps?: Partial<ChartsAxisContentProps>;
     sx?: SxProps<Theme>;
     classes: ChartsAxisContentProps['classes'];
 }): React.JSX.Element;

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
 exports.DefaultChartsAxisContent = DefaultChartsAxisContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
@@ -75,6 +77,7 @@ function DefaultChartsAxisContent(props) {
 function ChartsAxisTooltipContent(props) {
   const {
     content,
+    contentProps,
     axisData,
     sx,
     classes
@@ -107,13 +110,19 @@ function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = (0, _utils.useSlotProps)({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex,
+      axisValue,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
 }

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

@@ -3,7 +3,7 @@ import { SxProps, Theme } from '@mui/material/styles';
 import { ItemInteractionData } from '../context/InteractionProvider';
 import { ChartSeriesDefaultized, ChartSeriesType } from '../models/seriesType/config';
 import { ChartsTooltipClasses } from './tooltipClasses';
-export type ChartsItemContentProps<T extends ChartSeriesType> = {
+export type ChartsItemContentProps<T extends ChartSeriesType = ChartSeriesType> = {
     /**
      * The data used to identify the triggered item.
      */
@@ -18,10 +18,11 @@ export type ChartsItemContentProps<T extends ChartSeriesType> = {
     classes: ChartsTooltipClasses;
     sx?: SxProps<Theme>;
 };
-export declare function DefaultChartsItemContent<T extends ChartSeriesType>(props: ChartsItemContentProps<T>): React.JSX.Element | null;
+export declare function DefaultChartsItemContent<T extends ChartSeriesType = ChartSeriesType>(props: ChartsItemContentProps<T>): React.JSX.Element | null;
 export declare function ChartsItemTooltipContent<T extends ChartSeriesType>(props: {
     itemData: ItemInteractionData<T>;
     content?: React.ElementType<ChartsItemContentProps<T>>;
+    contentProps?: Partial<ChartsItemContentProps<T>>;
     sx?: SxProps<Theme>;
     classes: ChartsItemContentProps<T>['classes'];
 }): React.JSX.Element;

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,11 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 exports.DefaultChartsItemContent = DefaultChartsItemContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -65,14 +68,21 @@ function ChartsItemTooltipContent(props) {
     content,
     itemData,
     sx,
-    classes
+    classes,
+    contentProps
   } = props;
   const series = React.useContext(_SeriesContextProvider.SeriesContext)[itemData.type].series[itemData.seriesId];
   const Content = content ?? DefaultChartsItemContent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = (0, _utils.useSlotProps)({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData,
+      series,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
 }

package/ChartsTooltip/ChartsTooltip.d.ts

@@ -1,8 +1,19 @@
 import * as React from 'react';
+import { PopperProps } from '@mui/base/Popper';
 import { TriggerOptions } from './utils';
 import { ChartsItemContentProps } from './ChartsItemTooltipContent';
 import { ChartsAxisContentProps } from './ChartsAxisTooltipContent';
 import { ChartsTooltipClasses } from './tooltipClasses';
+export interface ChartsTooltipSlotsComponent {
+    popper?: React.ElementType<PopperProps>;
+    axisContent?: React.ElementType<ChartsAxisContentProps>;
+    itemContent?: React.ElementType<ChartsItemContentProps>;
+}
+export interface ChartsTooltipSlotComponentProps {
+    popper?: Partial<PopperProps>;
+    axisContent?: Partial<ChartsAxisContentProps>;
+    itemContent?: Partial<ChartsItemContentProps>;
+}
 export type ChartsTooltipProps = {
     /**
      * Select the kind of tooltip to display
@@ -14,16 +25,28 @@ export type ChartsTooltipProps = {
     trigger?: TriggerOptions;
     /**
      * Component to override the tooltip content when triger is set to 'item'.
+     * @deprecated Use slots.itemContent instead
      */
     itemContent?: React.ElementType<ChartsItemContentProps<any>>;
     /**
      * Component to override the tooltip content when triger is set to 'axis'.
+     * @deprecated Use slots.axisContent instead
      */
     axisContent?: React.ElementType<ChartsAxisContentProps>;
     /**
      * Override or extend the styles applied to the component.
      */
     classes?: Partial<ChartsTooltipClasses>;
+    /**
+     * Overridable component slots.
+     * @default {}
+     */
+    slots?: ChartsTooltipSlotsComponent;
+    /**
+     * The props used for each component slot.
+     * @default {}
+     */
+    slotProps?: ChartsTooltipSlotComponentProps;
 };
 declare function ChartsTooltip(props: ChartsTooltipProps): React.JSX.Element | null;
 declare namespace ChartsTooltip {

package/ChartsTooltip/ChartsTooltip.js

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsTooltip = ChartsTooltip;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
 var _Popper = require("@mui/base/Popper");
 var _NoSsr = require("@mui/base/NoSsr");
+var _utils = require("@mui/base/utils");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _utils2 = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
@@ -28,13 +31,25 @@ const useUtilityClasses = ownerState => {
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
 };
+const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
 function ChartsTooltip(props) {
   const {
     trigger = 'axis',
     itemContent,
-    axisContent
+    axisContent,
+    slots,
+    slotProps
   } = props;
   const mousePosition = (0, _utils2.useMouseTracker)();
   const {
@@ -47,33 +62,40 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: props.classes
   });
+  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
+  const popperProps = (0, _utils.useSlotProps)({
+    elementType: PopperComponent,
+    externalSlotProps: slotProps?.popper,
+    additionalProps: {
+      open: popperOpen,
+      placement: 'right-start',
+      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition)
+    },
+    ownerState: {}
+  });
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
-    children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.Popper, {
-      open: popperOpen,
-      placement: "right-start",
-      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition),
-      style: {
-        pointerEvents: 'none'
-      },
+    children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsItemTooltipContent.ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: itemContent,
+        content: slots?.itemContent ?? itemContent,
+        contentProps: slotProps?.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisTooltipContent.ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: axisContent,
+        content: slots?.axisContent ?? axisContent,
+        contentProps: slotProps?.axisContent,
         sx: {
           mx: 2
         },
         classes: classes
       })
-    })
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -83,6 +105,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when triger is set to 'axis'.
+   * @deprecated Use slots.axisContent instead
    */
   axisContent: _propTypes.default.elementType,
   /**
@@ -91,8 +114,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   classes: _propTypes.default.object,
   /**
    * Component to override the tooltip content when triger is set to 'item'.
+   * @deprecated Use slots.itemContent instead
    */
   itemContent: _propTypes.default.elementType,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.