@mui/x-charts 7.0.0-alpha.0 → 7.0.0-alpha.2

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -2,15 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
 import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
+import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
 import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getTooltipUtilityClass } from './tooltipClasses';
+import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -18,11 +18,15 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return composeClasses(slots, getTooltipUtilityClass, classes);
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -46,23 +50,27 @@ const ChartsTooltipRoot = styled(Popper, {
  */
 function ChartsTooltip(props) {
   var _slots$popper, _slots$itemContent, _slots$axisContent;
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsTooltip'
+  });
   const {
     trigger = 'axis',
     itemContent,
     axisContent,
     slots,
     slotProps
-  } = props;
+  } = themeProps;
   const mousePosition = useMouseTracker();
   const {
     item,
     axis
   } = React.useContext(InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = getTootipHasData(trigger, displayedData);
+  const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: props.classes
+    classes: themeProps.classes
   });
   const PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
   const popperProps = useSlotProps({

package/esm/ChartsTooltip/ChartsTooltipTable.js

@@ -1,6 +1,6 @@
 import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
-import { tooltipClasses } from './tooltipClasses';
+import { chartsTooltipClasses } from './chartsTooltipClasses';
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -45,10 +45,10 @@ export const ChartsTooltipCell = styled('td', {
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tooltipClasses.labelCell}`]: {
+  [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
-  [`&.${tooltipClasses.valueCell}`]: {
+  [`&.${chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary
   },

package/esm/ChartsTooltip/chartsTooltipClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getChartsTooltipUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsTooltip', slot);
+}
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/esm/ChartsTooltip/index.js

@@ -1 +1,2 @@
-export * from './ChartsTooltip';
+export * from './ChartsTooltip';
+export * from './chartsTooltipClasses';

package/esm/ChartsTooltip/utils.js

@@ -71,7 +71,7 @@ export function useMouseTracker() {
   }, [svgRef]);
   return mousePosition;
 }
-export function getTootipHasData(trigger, displayedData) {
+export function getTooltipHasData(trigger, displayedData) {
   if (trigger === 'item') {
     return displayedData !== null;
   }

package/esm/LineChart/index.js

@@ -1,8 +1,8 @@
-export { LinePlot } from './LinePlot';
-export { AreaPlot } from './AreaPlot';
-export { MarkPlot } from './MarkPlot';
-export { LineHighlightPlot } from './LineHighlightPlot';
-export { LineChart } from './LineChart';
+export * from './LinePlot';
+export * from './AreaPlot';
+export * from './MarkPlot';
+export * from './LineHighlightPlot';
+export * from './LineChart';
 export * from './AreaElement';
 export * from './LineElement';
 export * from './MarkElement';

package/esm/PieChart/index.js

@@ -1,4 +1,4 @@
-export { PiePlot } from './PiePlot';
-export { PieChart } from './PieChart';
+export * from './PiePlot';
+export * from './PieChart';
 export * from './PieArc';
 export * from './PieArcLabel';

package/esm/ScatterChart/index.js

@@ -1,3 +1,3 @@
-export { ScatterPlot } from './ScatterPlot';
-export { ScatterChart } from './ScatterChart';
-export { Scatter } from './Scatter';
+export * from './ScatterPlot';
+export * from './ScatterChart';
+export * from './Scatter';

package/esm/SparkLineChart/index.js

@@ -1 +1 @@
-export { SparkLineChart } from './SparkLineChart';
+export * from './SparkLineChart';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.0
+ * @mui/x-charts v7.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/BarChart/index.js

@@ -1,2 +1,2 @@
-export { BarPlot } from './BarPlot';
-export { BarChart } from './BarChart';
+export * from './BarPlot';
+export * from './BarChart';

package/legacy/ChartsReferenceLine/common.js

@@ -3,18 +3,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
 import { referenceLineClasses } from './chartsReferenceLineClasses';
 export var ReferenceLineRoot = styled('g')(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(referenceLineClasses.line), {
+  return _defineProperty(_defineProperty({}, "& .".concat(referenceLineClasses.line), {
     fill: 'none',
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1,
     pointerEvents: 'none'
-  }), _defineProperty(_ref2, "& .".concat(referenceLineClasses.label), _extends({
+  }), "& .".concat(referenceLineClasses.label), _extends({
     fill: (theme.vars || theme).palette.text.primary,
     stroke: 'none',
     pointerEvents: 'none',
     fontSize: 12
-  }, theme.typography.body1)), _ref2;
+  }, theme.typography.body1));
 });

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -25,6 +26,7 @@ export function DefaultChartsAxisContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
+      className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
@@ -46,21 +48,23 @@ export function DefaultChartsAxisContent(props) {
             return null;
           }
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.markCell,
+              className: clsx(classes.markCell, classes.cell),
               children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
                 ownerState: {
                   color: color
                 },
-                boxShadow: 1
+                boxShadow: 1,
+                className: classes.mark
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.labelCell,
+              className: clsx(classes.labelCell, classes.cell),
               children: label ? /*#__PURE__*/_jsx(Typography, {
                 children: label
               }) : null
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.valueCell,
+              className: clsx(classes.valueCell, classes.cell),
               children: /*#__PURE__*/_jsx(Typography, {
                 children: formattedValue
               })

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -30,20 +31,23 @@ export function DefaultChartsItemContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
+      className: classes.table,
       children: /*#__PURE__*/_jsx("tbody", {
         children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+          className: classes.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
+            className: clsx(classes.markCell, classes.cell),
             children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
               ownerState: {
                 color: color
-              }
+              },
+              className: classes.mark
             })
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
+            className: clsx(classes.labelCell, classes.cell),
             children: displayedLabel
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
+            className: clsx(classes.valueCell, classes.cell),
             children: formattedValue
           })]
         })

package/legacy/ChartsTooltip/ChartsTooltip.js

@@ -2,25 +2,29 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
 import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
+import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
 import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getTooltipUtilityClass } from './tooltipClasses';
+import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return composeClasses(slots, getTooltipUtilityClass, classes);
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 var ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -47,21 +51,25 @@ var ChartsTooltipRoot = styled(Popper, {
  */
 function ChartsTooltip(props) {
   var _slots$popper, _slots$itemContent, _slots$axisContent;
-  var _props$trigger = props.trigger,
-    trigger = _props$trigger === void 0 ? 'axis' : _props$trigger,
-    itemContent = props.itemContent,
-    axisContent = props.axisContent,
-    slots = props.slots,
-    slotProps = props.slotProps;
+  var themeProps = useThemeProps({
+    props: props,
+    name: 'MuiChartsTooltip'
+  });
+  var _themeProps$trigger = themeProps.trigger,
+    trigger = _themeProps$trigger === void 0 ? 'axis' : _themeProps$trigger,
+    itemContent = themeProps.itemContent,
+    axisContent = themeProps.axisContent,
+    slots = themeProps.slots,
+    slotProps = themeProps.slotProps;
   var mousePosition = useMouseTracker();
   var _React$useContext = React.useContext(InteractionContext),
     item = _React$useContext.item,
     axis = _React$useContext.axis;
   var displayedData = trigger === 'item' ? item : axis;
-  var tooltipHasData = getTootipHasData(trigger, displayedData);
+  var tooltipHasData = getTooltipHasData(trigger, displayedData);
   var popperOpen = mousePosition !== null && tooltipHasData;
   var classes = useUtilityClasses({
-    classes: props.classes
+    classes: themeProps.classes
   });
   var PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
   var popperProps = useSlotProps({

package/legacy/ChartsTooltip/ChartsTooltipTable.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
-import { tooltipClasses } from './tooltipClasses';
+import { chartsTooltipClasses } from './chartsTooltipClasses';
 export var ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -45,21 +45,20 @@ export var ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
 })(function (_ref4) {
-  var _ref5;
   var theme = _ref4.theme;
-  return _ref5 = {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({
     verticalAlign: 'middle',
     color: (theme.vars || theme).palette.text.secondary
-  }, _defineProperty(_ref5, "&.".concat(tooltipClasses.labelCell), {
+  }, "&.".concat(chartsTooltipClasses.labelCell), {
     paddingLeft: theme.spacing(1)
-  }), _defineProperty(_ref5, "&.".concat(tooltipClasses.valueCell), {
+  }), "&.".concat(chartsTooltipClasses.valueCell), {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary
-  }), _defineProperty(_ref5, 'td:first-of-type&', {
+  }), 'td:first-of-type&', {
     paddingLeft: theme.spacing(2)
-  }), _defineProperty(_ref5, 'td:last-of-type&', {
+  }), 'td:last-of-type&', {
     paddingRight: theme.spacing(2)
-  }), _ref5;
+  });
 });
 export var ChartsTooltipMark = styled(Box, {
   name: 'MuiChartsTooltip',

package/legacy/ChartsTooltip/chartsTooltipClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getChartsTooltipUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsTooltip', slot);
+}
+export var chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);

package/legacy/ChartsTooltip/index.js

@@ -1 +1,2 @@
-export * from './ChartsTooltip';
+export * from './ChartsTooltip';
+export * from './chartsTooltipClasses';

package/legacy/ChartsTooltip/utils.js

@@ -81,7 +81,7 @@ export function useMouseTracker() {
   }, [svgRef]);
   return mousePosition;
 }
-export function getTootipHasData(trigger, displayedData) {
+export function getTooltipHasData(trigger, displayedData) {
   if (trigger === 'item') {
     return displayedData !== null;
   }

package/legacy/LineChart/index.js

@@ -1,8 +1,8 @@
-export { LinePlot } from './LinePlot';
-export { AreaPlot } from './AreaPlot';
-export { MarkPlot } from './MarkPlot';
-export { LineHighlightPlot } from './LineHighlightPlot';
-export { LineChart } from './LineChart';
+export * from './LinePlot';
+export * from './AreaPlot';
+export * from './MarkPlot';
+export * from './LineHighlightPlot';
+export * from './LineChart';
 export * from './AreaElement';
 export * from './LineElement';
 export * from './MarkElement';

package/legacy/PieChart/index.js

@@ -1,4 +1,4 @@
-export { PiePlot } from './PiePlot';
-export { PieChart } from './PieChart';
+export * from './PiePlot';
+export * from './PieChart';
 export * from './PieArc';
 export * from './PieArcLabel';

package/legacy/ScatterChart/index.js

@@ -1,3 +1,3 @@
-export { ScatterPlot } from './ScatterPlot';
-export { ScatterChart } from './ScatterChart';
-export { Scatter } from './Scatter';
+export * from './ScatterPlot';
+export * from './ScatterChart';
+export * from './Scatter';

package/legacy/SparkLineChart/index.js

@@ -1 +1 @@
-export { SparkLineChart } from './SparkLineChart';
+export * from './SparkLineChart';

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.0.0-alpha.0
+ * @mui/x-charts v7.0.0-alpha.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internals/components/AxisSharedComponents.js

@@ -9,18 +9,17 @@ export var AxisRoot = styled('g', {
     return styles.root;
   }
 })(function (_ref) {
-  var _ref2;
   var theme = _ref.theme;
-  return _ref2 = {}, _defineProperty(_ref2, "& .".concat(axisClasses.tickLabel), _extends({}, theme.typography.caption, {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(axisClasses.tickLabel), _extends({}, theme.typography.caption, {
     fill: (theme.vars || theme).palette.text.primary
-  })), _defineProperty(_ref2, "& .".concat(axisClasses.label), _extends({}, theme.typography.body1, {
+  })), "& .".concat(axisClasses.label), _extends({}, theme.typography.body1, {
     fill: (theme.vars || theme).palette.text.primary
-  })), _defineProperty(_ref2, "& .".concat(axisClasses.line), {
+  })), "& .".concat(axisClasses.line), {
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges',
     strokeWidth: 1
-  }), _defineProperty(_ref2, "& .".concat(axisClasses.tick), {
+  }), "& .".concat(axisClasses.tick), {
     stroke: (theme.vars || theme).palette.text.primary,
     shapeRendering: 'crispEdges'
-  }), _ref2;
+  });
 });

package/modern/BarChart/index.js

@@ -1,2 +1,2 @@
-export { BarPlot } from './BarPlot';
-export { BarChart } from './BarChart';
+export * from './BarPlot';
+export * from './BarChart';

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
@@ -24,6 +25,7 @@ export function DefaultChartsAxisContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
+      className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {
         children: /*#__PURE__*/_jsx(ChartsTooltipRow, {
           children: /*#__PURE__*/_jsx(ChartsTooltipCell, {
@@ -46,21 +48,23 @@ export function DefaultChartsAxisContent(props) {
             return null;
           }
           return /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+            className: classes.row,
             children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.markCell,
+              className: clsx(classes.markCell, classes.cell),
               children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
                 ownerState: {
                   color
                 },
-                boxShadow: 1
+                boxShadow: 1,
+                className: classes.mark
               })
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.labelCell,
+              className: clsx(classes.labelCell, classes.cell),
               children: label ? /*#__PURE__*/_jsx(Typography, {
                 children: label
               }) : null
             }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-              className: classes.valueCell,
+              className: clsx(classes.valueCell, classes.cell),
               children: /*#__PURE__*/_jsx(Typography, {
                 children: formattedValue
               })

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -33,20 +34,23 @@ export function DefaultChartsItemContent(props) {
     sx: sx,
     className: classes.root,
     children: /*#__PURE__*/_jsx(ChartsTooltipTable, {
+      className: classes.table,
       children: /*#__PURE__*/_jsx("tbody", {
         children: /*#__PURE__*/_jsxs(ChartsTooltipRow, {
+          className: classes.row,
           children: [/*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.markCell,
+            className: clsx(classes.markCell, classes.cell),
             children: /*#__PURE__*/_jsx(ChartsTooltipMark, {
               ownerState: {
                 color
-              }
+              },
+              className: classes.mark
             })
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.labelCell,
+            className: clsx(classes.labelCell, classes.cell),
             children: displayedLabel
           }), /*#__PURE__*/_jsx(ChartsTooltipCell, {
-            className: classes.valueCell,
+            className: clsx(classes.valueCell, classes.cell),
             children: formattedValue
           })]
         })

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -2,15 +2,15 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled } from '@mui/material/styles';
+import { styled, useThemeProps } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
 import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
+import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
 import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getTooltipUtilityClass } from './tooltipClasses';
+import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -18,11 +18,15 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    table: ['table'],
+    row: ['row'],
+    cell: ['cell'],
+    mark: ['mark'],
     markCell: ['markCell'],
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return composeClasses(slots, getTooltipUtilityClass, classes);
+  return composeClasses(slots, getChartsTooltipUtilityClass, classes);
 };
 const ChartsTooltipRoot = styled(Popper, {
   name: 'MuiChartsTooltip',
@@ -45,23 +49,27 @@ const ChartsTooltipRoot = styled(Popper, {
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
 function ChartsTooltip(props) {
+  const themeProps = useThemeProps({
+    props,
+    name: 'MuiChartsTooltip'
+  });
   const {
     trigger = 'axis',
     itemContent,
     axisContent,
     slots,
     slotProps
-  } = props;
+  } = themeProps;
   const mousePosition = useMouseTracker();
   const {
     item,
     axis
   } = React.useContext(InteractionContext);
   const displayedData = trigger === 'item' ? item : axis;
-  const tooltipHasData = getTootipHasData(trigger, displayedData);
+  const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: props.classes
+    classes: themeProps.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,6 +1,6 @@
 import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
-import { tooltipClasses } from './tooltipClasses';
+import { chartsTooltipClasses } from './chartsTooltipClasses';
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
@@ -45,10 +45,10 @@ export const ChartsTooltipCell = styled('td', {
 }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tooltipClasses.labelCell}`]: {
+  [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1)
   },
-  [`&.${tooltipClasses.valueCell}`]: {
+  [`&.${chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary
   },

package/modern/ChartsTooltip/chartsTooltipClasses.js

@@ -0,0 +1,5 @@
+import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+export function getChartsTooltipUtilityClass(slot) {
+  return generateUtilityClass('MuiChartsTooltip', slot);
+}
+export const chartsTooltipClasses = generateUtilityClasses('MuiChartsTooltip', ['root', 'table', 'row', 'cell', 'mark', 'markCell', 'labelCell', 'valueCell']);