@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/ChartDataProvider/ChartDataProvider.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { AnimationProviderProps } from "../context/AnimationProvider/index.js";
 import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/plugin.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
-export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = Omit<AnimationProviderProps & ChartProviderProps<TSeries, TSignatures>['pluginParams'], 'children'> & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'> & {
-  children?: React.ReactNode;
-};
+export type ChartDataProviderProps<TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>> = React.PropsWithChildren<ChartProviderProps<TSeries, TSignatures>['pluginParams'] & Pick<ChartProviderProps<TSeries, TSignatures>, 'seriesConfig' | 'plugins'>>;
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/ChartDataProvider/ChartDataProvider.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useChartDataProviderProps = require("./useChartDataProviderProps");
-var _AnimationProvider = require("../context/AnimationProvider");
 var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -44,13 +43,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartDataProvider(props) {
   const {
     children,
-    animationProviderProps,
     chartProviderProps
   } = (0, _useChartDataProviderProps.useChartDataProviderProps)(props);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartProvider.ChartProvider, (0, _extends2.default)({}, chartProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-      children: children
-    }))
+    children: children
   }));
 }
 process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
@@ -58,47 +54,53 @@ process.env.NODE_ENV !== "production" ? ChartDataProvider.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  apiRef: _propTypes.default.any,
-  children: _propTypes.default.node,
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.any
+  }),
   /**
    * Color palette used to colorize multiple series.
    * @default rainbowSurgePalette
    */
-  colors: _propTypes.default.any,
+  colors: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.func]),
   /**
    * An array of objects that can be used to populate series and axes data using their `dataKey` property.
    */
-  dataset: _propTypes.default.any,
+  dataset: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: _propTypes.default.any,
+  height: _propTypes.default.number,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
-  id: _propTypes.default.any,
+  id: _propTypes.default.string,
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    *
    * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: _propTypes.default.any,
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
   /**
    * The array of series to display.
    * Each type of series has its own specificity.
    * Please refer to the appropriate docs page to learn more about it.
    */
-  series: _propTypes.default.any,
+  series: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `true`, animations are skipped.
    * If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
    */
-  skipAnimation: _propTypes.default.any,
-  theme: _propTypes.default.any,
+  skipAnimation: _propTypes.default.bool,
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: _propTypes.default.any
+  width: _propTypes.default.number
 } : void 0;

package/ChartDataProvider/useChartDataProviderProps.d.ts

@@ -1,11 +1,9 @@
 import type { ChartDataProviderProps } from './ChartDataProvider';
-import { AnimationProviderProps } from "../context/AnimationProvider/index.js";
 import { ChartProviderProps } from "../context/ChartProvider/index.js";
 import { ChartAnyPluginSignature } from "../internals/plugins/models/index.js";
 import { ChartSeriesType } from "../models/seriesType/config.js";
 import { AllPluginSignatures } from "../internals/plugins/allPlugins.js";
 export declare const useChartDataProviderProps: <TSeries extends ChartSeriesType = ChartSeriesType, TSignatures extends readonly ChartAnyPluginSignature[] = AllPluginSignatures<TSeries>>(props: ChartDataProviderProps<TSeries, TSignatures>) => {
   children: import("react").ReactNode;
-  animationProviderProps: Omit<AnimationProviderProps, "children">;
-  chartProviderProps: Omit<ChartProviderProps<TSeries, TSignatures>, "children">;
+  chartProviderProps: ChartProviderProps<TSeries, TSignatures>;
 };

package/ChartDataProvider/useChartDataProviderProps.js

@@ -9,29 +9,25 @@ exports.useChartDataProviderProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _styles = require("@mui/material/styles");
-const _excluded = ["children", "skipAnimation", "plugins", "seriesConfig"];
+var _allPlugins = require("../internals/plugins/allPlugins");
+const _excluded = ["children", "plugins", "seriesConfig"];
 const useChartDataProviderProps = props => {
   const {
       children,
-      skipAnimation,
-      plugins,
+      plugins = _allPlugins.DEFAULT_PLUGINS,
       seriesConfig
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
   const chartProviderProps = {
-    plugins,
+    plugins: plugins,
     seriesConfig,
     pluginParams: (0, _extends2.default)({
       theme: theme.palette.mode
     }, other)
   };
-  const animationProviderProps = {
-    skipAnimation
-  };
   return {
     children,
-    animationProviderProps,
     chartProviderProps
   };
 };

package/ChartsLabel/ChartsLabelMark.js

@@ -24,15 +24,11 @@ const Root = (0, _styles.styled)('div', {
 })(() => {
   return {
     display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
     width: 14,
     height: 14,
     [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
       width: 16,
       height: 'unset',
-      display: 'flex',
       alignItems: 'center',
       [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
         height: 4,

package/ChartsLabel/index.d.ts

@@ -1,4 +1,5 @@
 export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from './ChartsLabelMark';
+export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";
 export type { ChartsLabelClasses } from './labelClasses';
 export { labelMarkClasses } from "./labelMarkClasses.js";

package/ChartsLabel/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ChartsLabelMark", {
+  enumerable: true,
+  get: function () {
+    return _ChartsLabelMark.ChartsLabelMark;
+  }
+});
 Object.defineProperty(exports, "labelClasses", {
   enumerable: true,
   get: function () {
@@ -21,6 +27,7 @@ Object.defineProperty(exports, "labelMarkClasses", {
     return _labelMarkClasses.labelMarkClasses;
   }
 });
+var _ChartsLabelMark = require("./ChartsLabelMark");
 var _labelClasses = require("./labelClasses");
 var _labelMarkClasses = require("./labelMarkClasses");
 var _labelGradientClasses = require("./labelGradientClasses");

package/ChartsLegend/continuousColorLegendClasses.d.ts

@@ -22,5 +22,5 @@ export interface ContinuousColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "minLabel" | "maxLabel" | "gradient", string>;
+export declare const useUtilityClasses: (props: ContinuousColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "gradient" | "minLabel" | "maxLabel", string>;
 export declare const continuousColorLegendClasses: ContinuousColorLegendClasses;

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -13,79 +13,63 @@ var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
-var _useAxisTooltip = require("./useAxisTooltip");
-var _hooks = require("../hooks");
+var _useAxesTooltip = require("./useAxesTooltip");
 var _ChartsLabelMark = require("../ChartsLabel/ChartsLabelMark");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartsAxisTooltipContent(props) {
-  const {
-    classes: propClasses,
-    sx
-  } = props;
-  const tooltipData = (0, _useAxisTooltip.useAxisTooltip)();
-  const xAxis = (0, _hooks.useXAxis)();
-  const yAxis = (0, _hooks.useYAxis)();
-  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
+  const classes = (0, _chartsTooltipClasses.useUtilityClasses)(props.classes);
+  const tooltipData = (0, _useAxesTooltip.useAxesTooltip)();
   if (tooltipData === null) {
     return null;
   }
-  const {
-    axisDirection,
-    axisValue,
-    axisFormattedValue,
-    seriesItems
-  } = tooltipData;
-  const axis = axisDirection === 'x' ? xAxis : yAxis;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
-    sx: sx,
+    sx: props.sx,
     className: classes.paper,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
-      className: classes.table,
-      children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipRow, {
-          className: classes.row,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            colSpan: 3,
-            className: (0, _clsx.default)(classes.cell, classes.axisValueCell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: axisFormattedValue
-            })
-          })
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
-        children: seriesItems.map(({
-          seriesId,
-          color,
-          formattedValue,
-          formattedLabel,
-          markType
-        }) => {
-          if (formattedValue == null) {
-            return null;
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-            className: classes.row,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.markCell, classes.cell),
-              children: color && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
-                type: markType,
-                color: color,
-                className: classes.mark
-              })
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.labelCell, classes.cell),
-              children: formattedLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-                children: formattedLabel
-              }) : null
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-              className: (0, _clsx.default)(classes.valueCell, classes.cell),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+    children: tooltipData.map(({
+      axisId,
+      mainAxis,
+      axisValue,
+      axisFormattedValue,
+      seriesItems
+    }) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+        className: classes.table,
+        children: [axisValue != null && !mainAxis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          component: "caption",
+          children: axisFormattedValue
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: seriesItems.map(({
+            seriesId,
+            color,
+            formattedValue,
+            formattedLabel,
+            markType
+          }) => {
+            if (formattedValue == null) {
+              return null;
+            }
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+              className: classes.row,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
+                className: (0, _clsx.default)(classes.labelCell, classes.cell),
+                component: "th",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: classes.markContainer,
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+                    type: markType,
+                    color: color,
+                    className: classes.mark
+                  })
+                }), formattedLabel || null]
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+                className: (0, _clsx.default)(classes.valueCell, classes.cell),
+                component: "td",
                 children: formattedValue
-              })
-            })]
-          }, seriesId);
-        })
-      })]
+              })]
+            }, seriesId);
+          })
+        })]
+      }, axisId);
     })
   });
 }

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -10,6 +10,7 @@ exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 var _useItemTooltip = require("./useItemTooltip");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
@@ -20,11 +21,52 @@ function ChartsItemTooltipContent(props) {
     classes: propClasses,
     sx
   } = props;
-  const tooltipData = (0, _useItemTooltip.useItemTooltip)();
+  const tooltipData = (0, _useItemTooltip.useInternalItemTooltip)();
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
   if (!tooltipData) {
     return null;
   }
+  if ('values' in tooltipData) {
+    const {
+      label: seriesLabel,
+      color,
+      markType
+    } = tooltipData;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
+      sx: sx,
+      className: classes.paper,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
+        className: classes.table,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Typography.default, {
+          component: "caption",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: classes.markContainer,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+              type: markType,
+              color: color,
+              className: classes.mark
+            })
+          }), seriesLabel]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: tooltipData.values.map(({
+            formattedValue,
+            label
+          }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            className: classes.row,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.labelCell, classes.cell),
+              component: "th",
+              children: label
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: (0, _clsx.default)(classes.valueCell, classes.cell),
+              component: "td",
+              children: formattedValue
+            })]
+          }, label))
+        })]
+      })
+    });
+  }
   const {
     color,
     label,
@@ -39,18 +81,20 @@ function ChartsItemTooltipContent(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
           className: classes.row,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: (0, _clsx.default)(classes.markCell, classes.cell),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
-              type: markType,
-              color: color,
-              className: classes.mark
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes.labelCell, classes.cell),
-            children: label
+            component: "th",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: classes.markContainer,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLabelMark.ChartsLabelMark, {
+                type: markType,
+                color: color,
+                className: classes.mark
+              })
+            }), label]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
             className: (0, _clsx.default)(classes.valueCell, classes.cell),
+            component: "td",
             children: formattedValue
           })]
         })

package/ChartsTooltip/ChartsTooltip.js

@@ -65,7 +65,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -74,7 +74,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   /**
    * The props used for each slot inside the Popper.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: _propTypes.default.shape({

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -20,11 +20,13 @@ var _useSvgRef = require("../hooks/useSvgRef");
 var _utils = require("./utils");
 var _useSelector = require("../internals/store/useSelector");
 var _useStore = require("../internals/store/useStore");
-var _hooks = require("../hooks");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
+var _useChartPolarInteraction = require("../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
+var _useAxisSystem = require("../hooks/useAxisSystem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["trigger", "classes", "children"];
+const noAxis = () => false;
 const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   name: 'MuiChartsTooltip',
   slot: 'Root',
@@ -35,7 +37,6 @@ const ChartsTooltipRoot = (0, _styles.styled)(_Popper.default, {
   pointerEvents: 'none',
   zIndex: theme.zIndex.modal
 }));
-const axisHasData = axis => axis?.data !== undefined && axis.data.length !== 0;
 
 /**
  * Demos:
@@ -59,16 +60,14 @@ function ChartsTooltipContainer(inProps) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const svgRef = (0, _useSvgRef.useSvgRef)();
   const pointerType = (0, _utils.usePointerType)();
-  const xAxis = (0, _hooks.useXAxis)();
   const popperRef = React.useRef(null);
   const positionRef = (0, _useLazyRef.default)(() => ({
     x: 0,
     y: 0
   }));
+  const axisSystem = (0, _useAxisSystem.useAxisSystem)();
   const store = (0, _useStore.useStore)();
-  const isOpen = (0, _useSelector.useSelector)(store,
-  // eslint-disable-next-line no-nested-ternary
-  trigger === 'axis' ? axisHasData(xAxis) ? _useChartCartesianAxis.selectorChartsInteractionXAxisIsDefined : _useChartCartesianAxis.selectorChartsInteractionYAxisIsDefined : _useChartInteraction.selectorChartsInteractionItemIsDefined);
+  const isOpen = (0, _useSelector.useSelector)(store, trigger === 'axis' ? axisSystem === 'polar' && _useChartPolarInteraction.selectorChartsInteractionPolarAxisTooltip || axisSystem === 'cartesian' && _useChartCartesianAxis.selectorChartsInteractionAxisTooltip || noAxis : _useChartInteraction.selectorChartsInteractionItemIsDefined);
   const popperOpen = pointerType !== null && isOpen; // tooltipHasData;
 
   React.useEffect(() => {
@@ -162,7 +161,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: _propTypes.default.shape({
@@ -171,7 +170,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {
   /**
    * The props used for each slot inside the Popper.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: _propTypes.default.shape({

package/ChartsTooltip/ChartsTooltipTable.d.ts

@@ -13,4 +13,6 @@ export declare const ChartsTooltipRow: import("@emotion/styled").StyledComponent
 /**
  * @ignore - internal component.
  */
-export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof import("react").ClassAttributes<HTMLTableDataCellElement> | keyof import("react").TdHTMLAttributes<HTMLTableDataCellElement>>, {}>;
+export declare const ChartsTooltipCell: import("@emotion/styled").StyledComponent<Pick<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "p" | "style" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "className" | "children" | "sx" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping">, "p" | "slot" | "style" | "title" | "ref" | "typography" | "zIndex" | "classes" | "border" | "boxShadow" | "fontWeight" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "content" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "translate" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "sx" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+  component?: React.ElementType;
+}, {}, {}>;

package/ChartsTooltip/ChartsTooltipTable.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPaper = exports.ChartsTooltipCell = void 0;
 var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 /**
  * @ignore - internal component.
@@ -33,8 +35,19 @@ const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('tab
   theme
 }) => ({
   borderSpacing: 0,
-  '& thead td': {
-    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
+  [`& .${_chartsTooltipClasses.chartsTooltipClasses.markContainer}`]: {
+    display: 'inline-block',
+    width: `calc(20px + ${theme.spacing(1.5)})`,
+    verticalAlign: 'middle'
+  },
+  '& caption': {
+    borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`,
+    padding: theme.spacing(0.5, 1.5),
+    textAlign: 'start',
+    whiteSpace: 'nowrap',
+    '& span': {
+      marginRight: theme.spacing(1.5)
+    }
   }
 }));
 
@@ -59,18 +72,20 @@ const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
 /**
  * @ignore - internal component.
  */
-const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td', {
+const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)(_Typography.default, {
   name: 'MuiChartsTooltip',
-  slot: 'Cell',
-  overridesResolver: (props, styles) => styles.cell
+  slot: 'Cell'
 })(({
   theme
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
+  textAlign: 'start',
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.cell}`]: {
     paddingLeft: theme.spacing(1),
-    paddingRight: theme.spacing(1.5),
+    paddingRight: theme.spacing(1)
+  },
+  [`&.${_chartsTooltipClasses.chartsTooltipClasses.labelCell}`]: {
     fontWeight: theme.typography.fontWeightRegular
   },
   [`&.${_chartsTooltipClasses.chartsTooltipClasses.valueCell}, &.${_chartsTooltipClasses.chartsTooltipClasses.axisValueCell}`]: {
@@ -81,10 +96,10 @@ const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td',
     paddingLeft: theme.spacing(1.5),
     paddingRight: theme.spacing(1.5)
   },
-  'td:first-of-type&': {
+  'td:first-of-type&, th:first-of-type&': {
     paddingLeft: theme.spacing(1.5)
   },
-  'td:last-of-type&': {
+  'td:last-of-type&, th:last-of-type&': {
     paddingRight: theme.spacing(1.5)
   }
 }));

package/ChartsTooltip/chartsTooltipClasses.d.ts

@@ -11,8 +11,8 @@ export interface ChartsTooltipClasses {
   cell: string;
   /** Styles applied to the mark element. */
   mark: string;
-  /** Styles applied to the markCell element. */
-  markCell: string;
+  /** Styles applied to the markContainer element. */
+  markContainer: string;
   /** Styles applied to the labelCell element. */
   labelCell: string;
   /** Styles applied to the valueCell element. */
@@ -20,7 +20,7 @@ export interface ChartsTooltipClasses {
   /** Styles applied to the axisValueCell element. Only available for axis tooltip. */
   axisValueCell: string;
 }
-export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markCell' | 'labelCell' | 'valueCell'>;
+export type ChartsTooltipClassKey = keyof Omit<ChartsTooltipClasses, 'markContainer' | 'labelCell' | 'valueCell'>;
 export declare function getChartsTooltipUtilityClass(slot: string): string;
 export declare const chartsTooltipClasses: ChartsTooltipClasses;
-export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markCell" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;
+export declare const useUtilityClasses: (classes?: Partial<ChartsTooltipClasses>) => Record<"root" | "mark" | "table" | "cell" | "row" | "markContainer" | "labelCell" | "valueCell" | "paper" | "axisValueCell", string>;