@mui/x-charts 7.15.0 → 7.17.0

package/modern/ChartsLegend/LegendPerItem.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from '../ChartsText';
-import { getWordsByLines } from '../internals/getWordsByLines';
-import { legendItemPlacements } from './legendItemsPlacement';
-import { useDrawingArea } from '../hooks/useDrawingArea';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getWordsByLines } from "../internals/getWordsByLines.js";
+import { legendItemPlacements } from "./legendItemsPlacement.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { ChartsLegendItem } from "./ChartsLegendItem.js";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
@@ -42,7 +44,6 @@ const getStandardizedPadding = padding => {
  */
 export function LegendPerItem(props) {
   const {
-    hidden,
     position,
     direction,
     itemsToDisplay,
@@ -52,10 +53,10 @@ export function LegendPerItem(props) {
     markGap = 5,
     itemGap = 10,
     padding: paddingProps = 10,
-    labelStyle: inLabelStyle
+    labelStyle: inLabelStyle,
+    onItemClick
   } = props;
   const theme = useTheme();
-  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -108,35 +109,21 @@ export function LegendPerItem(props) {
         return (totalHeight - legendHeight) / 2;
     }
   }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  if (hidden) {
-    return null;
-  }
   return /*#__PURE__*/_jsx(NoSsr, {
     children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
       className: classes?.root,
-      children: itemsWithPosition.map(({
-        id,
-        label,
-        color,
-        positionX,
-        positionY
-      }) => /*#__PURE__*/_jsxs("g", {
-        className: classes?.series,
-        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-        children: [/*#__PURE__*/_jsx("rect", {
-          className: classes?.mark,
-          x: isRtl ? -itemMarkWidth : 0,
-          y: -itemMarkHeight / 2,
-          width: itemMarkWidth,
-          height: itemMarkHeight,
-          fill: color
-        }), /*#__PURE__*/_jsx(ChartsText, {
-          style: labelStyle,
-          text: label,
-          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
-          y: 0
-        })]
-      }, id))
+      children: itemsWithPosition.map((item, i) => /*#__PURE__*/_createElement(ChartsLegendItem, _extends({}, item, {
+        key: item.id,
+        gapX: gapX,
+        gapY: gapY,
+        legendWidth: legendWidth,
+        itemMarkHeight: itemMarkHeight,
+        itemMarkWidth: itemMarkWidth,
+        markGap: markGap,
+        labelStyle: labelStyle,
+        classes: classes,
+        onClick: onItemClick ? e => onItemClick(e, i) : undefined
+      })))
     })
   });
 }

package/modern/ChartsLegend/PiecewiseColorLegend.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
+const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAxis } from './useAxis';
-import { LegendPerItem } from './LegendPerItem';
-import { notNull } from '../internals/notNull';
+import { useAxis } from "./useAxis.js";
+import { LegendPerItem } from "./LegendPerItem.js";
+import { notNull } from "../internals/notNull.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function defaultLabelFormatter(params) {
   if (params.min === null) {
@@ -16,13 +18,21 @@ function defaultLabelFormatter(params) {
   }
   return `${params.formattedMin}-${params.formattedMax}`;
 }
+const piecewiseColorContextBuilder = context => ({
+  type: 'piecewiseColor',
+  color: context.color,
+  label: context.label,
+  maxValue: context.maxValue,
+  minValue: context.minValue
+});
 function PiecewiseColorLegend(props) {
   const {
       axisDirection,
       axisId,
       hideFirst,
       hideLast,
-      labelFormatter = defaultLabelFormatter
+      labelFormatter = defaultLabelFormatter,
+      onItemClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const axisItem = useAxis({
@@ -43,30 +53,34 @@ function PiecewiseColorLegend(props) {
     if (hideFirst && isFirst || hideLast && isLast) {
       return null;
     }
-    const label = labelFormatter(_extends({}, index === 0 ? {
+    const data = _extends({}, isFirst ? {
       min: null,
       formattedMin: null
     } : {
       min: colorMap.thresholds[index - 1],
       formattedMin: formattedLabels[index - 1]
-    }, index === colorMap.colors.length - 1 ? {
+    }, isLast ? {
       max: null,
       formattedMax: null
     } : {
       max: colorMap.thresholds[index],
       formattedMax: formattedLabels[index]
-    }));
+    });
+    const label = labelFormatter(data);
     if (label === null) {
       return null;
     }
     return {
       id: label,
       color,
-      label
+      label,
+      minValue: data.min,
+      maxValue: data.max
     };
   }).filter(notNull);
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay
+    itemsToDisplay: itemsToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
@@ -93,11 +107,6 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * The default depends on the chart.
    */
   direction: PropTypes.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: PropTypes.bool,
   /**
    * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
    * @default false
@@ -139,6 +148,13 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: PropTypes.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.

package/modern/ChartsLegend/chartsLegendClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generat
 export function getLegendUtilityClass(slot) {
   return generateUtilityClass('MuiChartsLegend', slot);
 }
-export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
+export const legendClasses = generateUtilityClasses('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);

package/modern/ChartsLegend/index.js

@@ -1,6 +1,6 @@
-export * from './ChartsLegend';
-export * from './DefaultChartsLegend';
-export * from './ContinuousColorLegend';
-export * from './PiecewiseColorLegend';
-export * from './chartsLegendClasses';
-export * from './utils';
+export * from "./ChartsLegend.js";
+export * from "./DefaultChartsLegend.js";
+export * from "./ContinuousColorLegend.js";
+export * from "./PiecewiseColorLegend.js";
+export * from "./chartsLegendClasses.js";
+export * from "./utils.js";

package/modern/ChartsLegend/useAxis.js

@@ -1,6 +1,8 @@
+'use client';
+
 import * as React from 'react';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useCartesianContext } from '../context/CartesianProvider/useCartesianContext';
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/useCartesianContext.js";
 /**
  * Helper to select an axis definition according to its direction and id.
  */

package/modern/ChartsLegend/utils.js

@@ -1,7 +1,7 @@
-import getBarLegend from '../BarChart/legend';
-import getScatterLegend from '../ScatterChart/legend';
-import getLineLegend from '../LineChart/legend';
-import getPieLegend from '../PieChart/legend';
+import getBarLegend from "../BarChart/legend.js";
+import getScatterLegend from "../ScatterChart/legend.js";
+import getLineLegend from "../LineChart/legend.js";
+import getPieLegend from "../PieChart/legend.js";
 const legendGetter = {
   bar: getBarLegend,
   scatter: getScatterLegend,

package/modern/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -1,9 +1,11 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useSeries } from '../hooks/useSeries';
-import { useSvgRef } from '../hooks';
-import { useCartesianContext } from '../context/CartesianProvider';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { useSvgRef } from "../hooks/index.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsOnAxisClickHandler(props) {
   const {
@@ -27,7 +29,7 @@ function ChartsOnAxisClickHandler(props) {
     }
     const handleMouseClick = event => {
       event.preventDefault();
-      const isXaxis = (axis.x && axis.x.index) !== undefined;
+      const isXaxis = axis.x && axis.x.index !== -1;
       const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
       const dataIndex = isXaxis ? axis.x && axis.x.index : axis.y && axis.y.index;
       if (dataIndex == null) {

package/modern/ChartsOnAxisClickHandler/index.js

@@ -1 +1 @@
-export * from './ChartsOnAxisClickHandler';
+export * from "./ChartsOnAxisClickHandler.js";

package/modern/ChartsOverlay/ChartsLoadingOverlay.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/modern/ChartsOverlay/ChartsNoDataOverlay.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["message"];
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledText = styled('text')(({
   theme

package/modern/ChartsOverlay/ChartsOverlay.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-import { useSeries } from '../hooks/useSeries';
-import { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+import { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+import { useSeries } from "../hooks/useSeries.js";
+import { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function useNoData() {
   const seriesPerType = useSeries();

package/modern/ChartsOverlay/index.js

@@ -1,3 +1,3 @@
-export { ChartsOverlay } from './ChartsOverlay';
-export { ChartsLoadingOverlay } from './ChartsLoadingOverlay';
-export { ChartsNoDataOverlay } from './ChartsNoDataOverlay';
+export { ChartsOverlay } from "./ChartsOverlay.js";
+export { ChartsLoadingOverlay } from "./ChartsLoadingOverlay.js";
+export { ChartsNoDataOverlay } from "./ChartsNoDataOverlay.js";

package/modern/ChartsReferenceLine/ChartsReferenceLine.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { ChartsXReferenceLine } from './ChartsXReferenceLine';
-import { ChartsYReferenceLine } from './ChartsYReferenceLine';
+import { ChartsXReferenceLine } from "./ChartsXReferenceLine.js";
+import { ChartsYReferenceLine } from "./ChartsYReferenceLine.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChartsReferenceLine(props) {
   const {

package/modern/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useXScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { warnOnce } from '@mui/x-internals/warning';
+import { useDrawingArea, useXScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,

package/modern/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -1,11 +1,13 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-import { useDrawingArea, useYScale } from '../hooks';
-import { ReferenceLineRoot } from './common';
-import { ChartsText } from '../ChartsText';
-import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { warnOnce } from '../internals/warning';
+import { warnOnce } from '@mui/x-internals/warning';
+import { useDrawingArea, useYScale } from "../hooks/index.js";
+import { ReferenceLineRoot } from "./common.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getReferenceLineUtilityClass } from "./chartsReferenceLineClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,

package/modern/ChartsReferenceLine/common.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { styled } from '@mui/material/styles';
-import { referenceLineClasses } from './chartsReferenceLineClasses';
+import { referenceLineClasses } from "./chartsReferenceLineClasses.js";
 export const ReferenceLineRoot = styled('g')(({
   theme
 }) => ({

package/modern/ChartsReferenceLine/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsReferenceLine';
-export * from './chartsReferenceLineClasses';
+export * from "./ChartsReferenceLine.js";
+export * from "./chartsReferenceLineClasses.js";

package/modern/ChartsSurface/ChartsSurface.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "title", "desc"];
 import { styled, useThemeProps } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useAxisEvents } from '../hooks/useAxisEvents';
+import { useAxisEvents } from "../hooks/useAxisEvents.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartChartsSurfaceStyles = styled('svg', {
   name: 'MuiChartsSurface',

package/modern/ChartsSurface/index.js

@@ -1 +1 @@
-export * from './ChartsSurface';
+export * from "./ChartsSurface.js";

package/modern/ChartsText/ChartsText.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "style", "text", "ownerState"],
   _excluded2 = ["angle", "textAnchor", "dominantBaseline"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { getWordsByLines } from '../internals/getWordsByLines';
+import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Helper component to manage multiline text in SVG

package/modern/ChartsText/index.js

@@ -1 +1 @@
-export { ChartsText } from './ChartsText';
+export { ChartsText } from "./ChartsText.js";

package/modern/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { isCartesianSeriesType } from '../internals/isCartesian';
-import { useSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { DefaultChartsAxisTooltipContent } from "./DefaultChartsAxisTooltipContent.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { isCartesianSeriesType } from "../internals/isCartesian.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.

package/modern/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ZAxisContext } from '../context/ZAxisContextProvider';
-import { useColorProcessor } from '../context/PluginProvider/useColorProcessor';
-import { useSeries } from '../hooks/useSeries';
+import { DefaultChartsItemTooltipContent } from "./DefaultChartsItemTooltipContent.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ZAxisContext } from "../context/ZAxisContextProvider.js";
+import { useColorProcessor } from "../context/PluginProvider/useColorProcessor.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.

package/modern/ChartsTooltip/ChartsTooltip.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -6,11 +8,11 @@ import { styled, useThemeProps } from '@mui/material/styles';
 import Popper from '@mui/material/Popper';
 import NoSsr from '@mui/material/NoSsr';
 import useSlotProps from '@mui/utils/useSlotProps';
-import { InteractionContext } from '../context/InteractionProvider';
-import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
-import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
-import { ChartsAxisTooltipContent } from './ChartsAxisTooltipContent';
-import { getChartsTooltipUtilityClass } from './chartsTooltipClasses';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { generateVirtualElement, useMouseTracker, getTooltipHasData } from "./utils.js";
+import { ChartsItemTooltipContent } from "./ChartsItemTooltipContent.js";
+import { ChartsAxisTooltipContent } from "./ChartsAxisTooltipContent.js";
+import { getChartsTooltipUtilityClass } from "./chartsTooltipClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -18,6 +20,7 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root'],
+    paper: ['paper'],
     table: ['table'],
     row: ['row'],
     cell: ['cell'],
@@ -48,9 +51,9 @@ const ChartsTooltipRoot = styled(Popper, {
  *
  * - [ChartsTooltip API](https://mui.com/x/api/charts/charts-tool-tip/)
  */
-function ChartsTooltip(props) {
-  const themeProps = useThemeProps({
-    props,
+function ChartsTooltip(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiChartsTooltip'
   });
   const {
@@ -59,7 +62,7 @@ function ChartsTooltip(props) {
     axisContent,
     slots,
     slotProps
-  } = themeProps;
+  } = props;
   const mousePosition = useMouseTracker();
   const {
     item,
@@ -69,7 +72,7 @@ function ChartsTooltip(props) {
   const tooltipHasData = getTooltipHasData(trigger, displayedData);
   const popperOpen = mousePosition !== null && tooltipHasData;
   const classes = useUtilityClasses({
-    classes: themeProps.classes
+    classes: props.classes
   });
   const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
   const popperProps = useSlotProps({
@@ -93,6 +96,7 @@ function ChartsTooltip(props) {
   }
   return /*#__PURE__*/_jsx(NoSsr, {
     children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
+      className: classes.root,
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
         content: slots?.itemContent ?? itemContent,
@@ -147,7 +151,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
    * - 'item': Shows data about the item below the mouse.
    * - 'axis': Shows values associated with the hovered x value
    * - 'none': Does not display tooltip
-   * @default 'item'
+   * @default 'axis'
    */
   trigger: PropTypes.oneOf(['axis', 'item', 'none'])
 } : void 0;

package/modern/ChartsTooltip/ChartsTooltipTable.js

@@ -1,13 +1,14 @@
 import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system';
-import { chartsTooltipClasses } from './chartsTooltipClasses';
+import { chartsTooltipClasses } from "./chartsTooltipClasses.js";
 
 /**
  * @ignore - internal component.
  */
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
-  slot: 'Container'
+  slot: 'Container',
+  overridesResolver: (props, styles) => styles.paper
 })(({
   theme
 }) => ({
@@ -23,7 +24,8 @@ export const ChartsTooltipPaper = styled('div', {
  */
 export const ChartsTooltipTable = styled('table', {
   name: 'MuiChartsTooltip',
-  slot: 'Table'
+  slot: 'Table',
+  overridesResolver: (props, styles) => styles.table
 })(({
   theme
 }) => ({
@@ -38,7 +40,8 @@ export const ChartsTooltipTable = styled('table', {
  */
 export const ChartsTooltipRow = styled('tr', {
   name: 'MuiChartsTooltip',
-  slot: 'Row'
+  slot: 'Row',
+  overridesResolver: (props, styles) => styles.row
 })(({
   theme
 }) => ({
@@ -55,7 +58,8 @@ export const ChartsTooltipRow = styled('tr', {
  */
 export const ChartsTooltipCell = styled('td', {
   name: 'MuiChartsTooltip',
-  slot: 'Cell'
+  slot: 'Cell',
+  overridesResolver: (props, styles) => styles.cell
 })(({
   theme
 }) => ({
@@ -82,6 +86,7 @@ export const ChartsTooltipCell = styled('td', {
 export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',
+  overridesResolver: (props, styles) => styles.mark,
   shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'color'
 })(({
   theme,

package/modern/ChartsTooltip/DefaultChartsAxisTooltipContent.js

@@ -1,11 +1,13 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
-import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
-import { utcFormatter } from './utils';
-import { getLabel } from '../internals/getLabel';
-import { isCartesianSeries } from '../internals/isCartesian';
+import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from "./ChartsTooltipTable.js";
+import { utcFormatter } from "./utils.js";
+import { getLabel } from "../internals/getLabel.js";
+import { isCartesianSeries } from "../internals/isCartesian.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function DefaultChartsAxisTooltipContent(props) {
   const {
@@ -22,7 +24,7 @@ function DefaultChartsAxisTooltipContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => axis.scaleType === 'utc' ? utcFormatter(v) : v.toLocaleString());
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     sx: sx,
-    className: classes.root,
+    className: classes.paper,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {
       className: classes.table,
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/_jsx("thead", {