@mui/x-charts 6.0.0-alpha.13 → 6.0.0-alpha.15

package/internals/domUtils.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStyleString = exports.getStringSize = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+// DOM utils taken from
+// https://github.com/recharts/recharts/blob/master/src/util/DOMUtils.ts
+
+const isSsr = () => !(typeof window !== 'undefined' && window.document && window.setTimeout);
+const stringCache = {
+  widthCache: {},
+  cacheCount: 0
+};
+const MAX_CACHE_NUM = 2000;
+const SPAN_STYLE = {
+  position: 'absolute',
+  top: '-20000px',
+  left: 0,
+  padding: 0,
+  margin: 0,
+  border: 'none',
+  whiteSpace: 'pre'
+};
+const STYLE_LIST = ['minWidth', 'maxWidth', 'width', 'minHeight', 'maxHeight', 'height', 'top', 'left', 'fontSize', 'padding', 'margin', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom'];
+const MEASUREMENT_SPAN_ID = 'mui_measurement_span';
+
+/**
+ *
+ * @param name CSS property name
+ * @param value
+ * @returns add 'px' for distance properties
+ */
+function autoCompleteStyle(name, value) {
+  if (STYLE_LIST.indexOf(name) >= 0 && value === +value) {
+    return `${value}px`;
+  }
+  return value;
+}
+
+/**
+ *
+ * @param text camelcase css property
+ * @returns css property
+ */
+function camelToMiddleLine(text) {
+  const strs = text.split('');
+  const formatStrs = strs.reduce((result, entry) => {
+    if (entry === entry.toUpperCase()) {
+      return [...result, '-', entry.toLowerCase()];
+    }
+    return [...result, entry];
+  }, []);
+  return formatStrs.join('');
+}
+
+/**
+ *
+ * @param style React style object
+ * @returns CSS styling string
+ */
+const getStyleString = style => Object.keys(style).sort().reduce((result, s) => `${result}${camelToMiddleLine(s)}:${autoCompleteStyle(s, style[s])};`, '');
+
+/**
+ *
+ * @param text The string to estimate
+ * @param style The style applied
+ * @returns width and height of the text
+ */
+exports.getStyleString = getStyleString;
+const getStringSize = (text, style = {}) => {
+  if (text === undefined || text === null || isSsr()) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+  const str = `${text}`;
+  const styleString = getStyleString(style);
+  const cacheKey = `${str}-${styleString}`;
+  if (stringCache.widthCache[cacheKey]) {
+    return stringCache.widthCache[cacheKey];
+  }
+  try {
+    let measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (measurementSpan === null) {
+      measurementSpan = document.createElement('span');
+      measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+      measurementSpan.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(measurementSpan);
+    }
+    // Need to use CSS Object Model (CSSOM) to be able to comply with Content Security Policy (CSP)
+    // https://en.wikipedia.org/wiki/Content_Security_Policy
+    const measurementSpanStyle = (0, _extends2.default)({}, SPAN_STYLE, style);
+    Object.keys(measurementSpanStyle).map(styleKey => {
+      measurementSpan.style[camelToMiddleLine(styleKey)] = autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);
+      return styleKey;
+    });
+    measurementSpan.textContent = str;
+    const rect = measurementSpan.getBoundingClientRect();
+    const result = {
+      width: rect.width,
+      height: rect.height
+    };
+    stringCache.widthCache[cacheKey] = result;
+    if (stringCache.cacheCount + 1 > MAX_CACHE_NUM) {
+      stringCache.cacheCount = 0;
+      stringCache.widthCache = {};
+    } else {
+      stringCache.cacheCount += 1;
+    }
+    return result;
+  } catch (e) {
+    return {
+      width: 0,
+      height: 0
+    };
+  }
+};
+exports.getStringSize = getStringSize;

package/internals/stackSeries.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getStackingGroups = exports.StackOrder = exports.StackOffset = void 0;
 var _d3Shape = require("d3-shape");
-const StackOrder = {
+const StackOrder = exports.StackOrder = {
   /**
    * Series order such that the earliest series (according to the maximum value) is at the bottom.
    * */
@@ -31,8 +31,7 @@ const StackOrder = {
    */
   reverse: _d3Shape.stackOrderReverse
 };
-exports.StackOrder = StackOrder;
-const StackOffset = {
+const StackOffset = exports.StackOffset = {
   /**
    * Applies a zero baseline and normalizes the values for each point such that the topline is always one.
    * */
@@ -60,7 +59,6 @@ const StackOffset = {
  * @param series the object of all bars series
  * @returns an array of groups, including the ids, the stacking order, and the stacking offset.
  */
-exports.StackOffset = StackOffset;
 const getStackingGroups = params => {
   const {
     series,

package/legacy/BarChart/BarChart.js

@@ -167,23 +167,19 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     tickNumber: PropTypes.number,
     tickSize: PropTypes.number
   }), PropTypes.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: PropTypes.shape({
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
-    itemWidth: PropTypes.number,
-    markSize: PropTypes.number,
-    offset: PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number
-    }),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: PropTypes.object,
-    slots: PropTypes.object,
-    spacing: PropTypes.number
+    slots: PropTypes.object
   }),
   margin: PropTypes.shape({
     bottom: PropTypes.number,
@@ -249,6 +245,8 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/legacy/ChartsLegend/ChartsLegend.js

@@ -1,12 +1,17 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
+var _excluded = ["label"];
 import * as React from 'react';
 import { useSlotProps } from '@mui/base/utils';
+import { NoSsr } from '@mui/base/NoSsr';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { DrawingContext } from '../context/DrawingProvider';
 import { getSeriesToDisplay } from './utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { getChartsLegendUtilityClass } from './chartsLegendClasses';
+import { ChartsText, getWordsByLines } from '../internals/components/ChartsText';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -20,165 +25,218 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getChartsLegendUtilityClass, classes);
 };
-function getTranslePosition(_ref) {
-  var position = _ref.position,
-    drawingArea = _ref.drawingArea;
-  var xValue;
-  switch (position.horizontal) {
-    case 'left':
-      xValue = "calc(var(--ChartsLegend-rootOffsetX, 0px) + ".concat(drawingArea.left, "px - var(--ChartsLegend-rootWidth))");
-      break;
-    case 'middle':
-      xValue = "calc(var(--ChartsLegend-rootOffsetX, 0px) + ".concat(drawingArea.left + drawingArea.width / 2, "px - 0.5 * var(--ChartsLegend-rootWidth))");
-      break;
-    default:
-      xValue = "calc(var(--ChartsLegend-rootOffsetX, 0px) + ".concat(drawingArea.left + drawingArea.width, "px)");
-      break;
-  }
-  var yValue;
-  switch (position.vertical) {
-    case 'top':
-      yValue = "calc(var(--ChartsLegend-rootOffsetY, 0px) + ".concat(drawingArea.top, "px - var(--ChartsLegend-rootHeight))");
-      break;
-    case 'middle':
-      yValue = "calc(var(--ChartsLegend-rootOffsetY, 0px) + ".concat(drawingArea.top + drawingArea.height / 2, "px - 0.5 * var(--ChartsLegend-rootHeight))");
-      break;
-    default:
-      yValue = "calc(var(--ChartsLegend-rootOffsetY, 0px) + ".concat(drawingArea.top + drawingArea.height, "px)");
-      break;
-  }
-  return {
-    transform: "translate(".concat(xValue, ", ").concat(yValue, ")")
-  };
-}
 export var ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
-})(function (_ref2) {
-  var ownerState = _ref2.ownerState;
-  var direction = ownerState.direction,
-    drawingArea = ownerState.drawingArea,
-    offsetX = ownerState.offsetX,
-    offsetY = ownerState.offsetY,
-    seriesNumber = ownerState.seriesNumber,
-    position = ownerState.position;
-  return _extends({
-    '--ChartsLegend-rootOffsetX': typeof offsetX === 'number' ? "".concat(offsetX, "px") : undefined,
-    '--ChartsLegend-rootOffsetY': typeof offsetY === 'number' ? "".concat(offsetY, "px") : undefined,
-    '--ChartsLegend-rootWidth': direction === 'row' ? "calc(var(--ChartsLegend-itemWidth) * ".concat(seriesNumber, " + var(--ChartsLegend-rootSpacing) * ").concat(seriesNumber - 1, " )") : 'var(--ChartsLegend-itemWidth)',
-    '--ChartsLegend-rootHeight': direction === 'row' ? 'var(--ChartsLegend-itemMarkSize)' : "calc(var(--ChartsLegend-itemMarkSize) * ".concat(seriesNumber, " + var(--ChartsLegend-rootSpacing) * ").concat(seriesNumber - 1, " )")
-  }, getTranslePosition({
-    position: position,
-    drawingArea: drawingArea,
-    offsetX: offsetX,
-    offsetY: offsetY
-  }));
-});
-export var ChartsSeriesLegendGroup = styled('g', {
-  name: 'MuiChartsLegend',
-  slot: 'ChartsSeriesLegendGroup',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.series;
-  }
-})(function (_ref3) {
-  var ownerState = _ref3.ownerState;
-  var direction = ownerState.direction,
-    seriesIndex = ownerState.seriesIndex;
-  if (direction === 'row') {
-    return {
-      transform: "translate(calc(".concat(seriesIndex, " * (var(--ChartsLegend-itemWidth) + var(--ChartsLegend-rootSpacing))), 0)")
-    };
-  }
-  return {
-    transform: "translate(0, calc(".concat(seriesIndex, " * (var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-rootSpacing))))")
-  };
-});
-export var ChartsLegendMark = styled('rect', {
-  name: 'MuiChartsLegend',
-  slot: 'Mark',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.mark;
-  }
-})(function (_ref4) {
-  var ownerState = _ref4.ownerState;
-  return {
-    x: 0,
-    y: 0,
-    width: 'var(--ChartsLegend-itemMarkSize)',
-    height: 'var(--ChartsLegend-itemMarkSize)',
-    fill: ownerState.color
-  };
-});
-export var ChartsLegendLabel = styled('text', {
-  name: 'MuiChartsLegend',
-  slot: 'Label',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.label;
-  }
-})(function (_ref5) {
-  var theme = _ref5.theme;
-  return _extends({}, theme.typography.body1, {
-    color: 'inherit',
-    transform: "translate(\n      calc(var(--ChartsLegend-itemMarkSize) + var(--ChartsLegend-labelSpacing)),\n      calc(0.5 * var(--ChartsLegend-itemMarkSize))\n      )",
-    fill: (theme.vars || theme).palette.text.primary,
-    dominantBaseline: 'central'
-  });
-});
+})({});
 var defaultProps = {
   position: {
     horizontal: 'middle',
     vertical: 'top'
   },
-  direction: 'row',
-  markSize: 20,
-  itemWidth: 100,
-  spacing: 2
+  direction: 'row'
+};
+/**
+ * Transforms number or partial padding object to a defaultized padding object.
+ */
+var getStandardizedPadding = function getStandardizedPadding(padding) {
+  if (typeof padding === 'number') {
+    return {
+      left: padding,
+      right: padding,
+      top: padding,
+      bottom: padding
+    };
+  }
+  return _extends({
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
+  }, padding);
 };
 function DefaultChartsLegend(props) {
   var hidden = props.hidden,
     position = props.position,
     direction = props.direction,
-    offset = props.offset,
-    series = props.series,
     seriesToDisplay = props.seriesToDisplay,
     drawingArea = props.drawingArea,
-    classes = props.classes;
+    classes = props.classes,
+    _props$itemMarkWidth = props.itemMarkWidth,
+    itemMarkWidth = _props$itemMarkWidth === void 0 ? 20 : _props$itemMarkWidth,
+    _props$itemMarkHeight = props.itemMarkHeight,
+    itemMarkHeight = _props$itemMarkHeight === void 0 ? 20 : _props$itemMarkHeight,
+    _props$markGap = props.markGap,
+    markGap = _props$markGap === void 0 ? 5 : _props$markGap,
+    _props$itemGap = props.itemGap,
+    itemGap = _props$itemGap === void 0 ? 10 : _props$itemGap,
+    _props$padding = props.padding,
+    paddingProps = _props$padding === void 0 ? 10 : _props$padding,
+    inLabelStyle = props.labelStyle;
+  var theme = useTheme();
+  var labelStyle = React.useMemo(function () {
+    return _extends({}, theme.typography.subtitle1, {
+      color: 'inherit',
+      fill: (theme.vars || theme).palette.text.primary,
+      lineHeight: 1
+    }, inLabelStyle);
+  }, [inLabelStyle, theme]);
+  var padding = React.useMemo(function () {
+    return getStandardizedPadding(paddingProps);
+  }, [paddingProps]);
+  var getItemSpace = React.useCallback(function (label, style) {
+    var linesSize = getWordsByLines({
+      style: style,
+      needsComputation: true,
+      text: label
+    });
+    var innerSize = {
+      innerWidth: itemMarkWidth + markGap + Math.max.apply(Math, _toConsumableArray(linesSize.map(function (size) {
+        return size.width;
+      }))),
+      innerHeight: Math.max(itemMarkHeight, linesSize.length * linesSize[0].height)
+    };
+    return _extends({}, innerSize, {
+      outerWidth: innerSize.innerWidth + itemGap,
+      outerHeight: innerSize.innerHeight + itemGap
+    });
+  }, [itemGap, itemMarkHeight, itemMarkWidth, markGap]);
+  var totalWidth = drawingArea.left + drawingArea.width + drawingArea.right;
+  var totalHeight = drawingArea.top + drawingArea.height + drawingArea.bottom;
+  var availableWidth = totalWidth - padding.left - padding.right;
+  var availableHeight = totalHeight - padding.top - padding.bottom;
+  var seriesWithPosition = React.useMemo(function () {
+    // Start at 0, 0. Will be modified later by padding and position.
+    var x = 0;
+    var y = 0;
+
+    // total values used to align legend later.
+    var totalWidthUsed = 0;
+    var totalHeightUsed = 0;
+    var rowIndex = 0;
+    var rowMaxHeight = [0];
+    var seriesWithRawPosition = seriesToDisplay.map(function (_ref) {
+      var label = _ref.label,
+        other = _objectWithoutProperties(_ref, _excluded);
+      var itemSpace = getItemSpace(label, labelStyle);
+      var rep = _extends({}, other, {
+        label: label,
+        positionX: x,
+        positionY: y,
+        innerHeight: itemSpace.innerHeight,
+        innerWidth: itemSpace.innerWidth,
+        outerHeight: itemSpace.outerHeight,
+        outerWidth: itemSpace.outerWidth,
+        rowIndex: rowIndex
+      });
+      if (direction === 'row') {
+        if (x + itemSpace.innerWidth > availableWidth) {
+          // This legend item would create overflow along the x-axis, so we start a new row.
+          x = 0;
+          y += rowMaxHeight[rowIndex];
+          rowIndex += 1;
+          if (rowMaxHeight.length <= rowIndex) {
+            rowMaxHeight.push(0);
+          }
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowMaxHeight[rowIndex] = Math.max(rowMaxHeight[rowIndex], itemSpace.outerHeight);
+        x += itemSpace.outerWidth;
+      }
+      if (direction === 'column') {
+        if (y + itemSpace.innerHeight > availableHeight) {
+          // This legend item would create overflow along the y-axis, so we start a new column.
+          x = totalWidthUsed + itemGap;
+          y = 0;
+          rowIndex = 0;
+          rep.positionX = x;
+          rep.positionY = y;
+          rep.rowIndex = rowIndex;
+        }
+        if (rowMaxHeight.length <= rowIndex) {
+          rowMaxHeight.push(0);
+        }
+        totalWidthUsed = Math.max(totalWidthUsed, x + itemSpace.outerWidth);
+        totalHeightUsed = Math.max(totalHeightUsed, y + itemSpace.outerHeight);
+        rowIndex += 1;
+        y += itemSpace.outerHeight;
+      }
+      return rep;
+    });
+
+    // Move the legend according to padding and position
+    var gapX = 0;
+    var gapY = 0;
+    switch (position.horizontal) {
+      case 'left':
+        gapX = padding.left;
+        break;
+      case 'right':
+        gapX = totalWidth - padding.right - totalWidthUsed;
+        break;
+      default:
+        gapX = (totalWidth - totalWidthUsed) / 2;
+        break;
+    }
+    switch (position.vertical) {
+      case 'top':
+        gapY = padding.top;
+        break;
+      case 'bottom':
+        gapY = totalHeight - padding.bottom - totalHeightUsed;
+        break;
+      default:
+        gapY = (totalHeight - totalHeightUsed) / 2;
+        break;
+    }
+    return seriesWithRawPosition.map(function (item) {
+      return _extends({}, item, {
+        // Add the gap due to the position
+        positionX: item.positionX + gapX,
+        // Add the gap due to the position
+        positionY: item.positionY + gapY + (direction === 'row' ? rowMaxHeight[item.rowIndex] / 2 // Get the center of the entire row
+        : item.outerHeight / 2) // Get the center of the item
+      });
+    });
+  }, [seriesToDisplay, position.horizontal, position.vertical, getItemSpace, labelStyle, direction, availableWidth, availableHeight, itemGap, padding.left, padding.right, padding.top, padding.bottom, totalWidth, totalHeight]);
   if (hidden) {
     return null;
   }
-  return /*#__PURE__*/_jsx(ChartsLegendRoot, {
-    ownerState: {
-      direction: direction,
-      offsetX: offset == null ? void 0 : offset.x,
-      offsetY: offset == null ? void 0 : offset.y,
-      seriesNumber: seriesToDisplay.length,
-      position: position,
-      drawingArea: drawingArea
-    },
-    className: classes.root,
-    children: seriesToDisplay.map(function (_ref6, seriesIndex) {
-      var id = _ref6.id,
-        label = _ref6.label,
-        color = _ref6.color;
-      return /*#__PURE__*/_jsxs(ChartsSeriesLegendGroup, {
-        ownerState: _extends({
-          direction: direction,
-          seriesIndex: seriesIndex
-        }, series),
-        className: classes.series,
-        children: [/*#__PURE__*/_jsx(ChartsLegendMark, {
-          ownerState: {
-            color: color
-          },
-          className: classes.mark
-        }), /*#__PURE__*/_jsx(ChartsLegendLabel, {
-          className: classes.label,
-          children: label
-        })]
-      }, id);
+  return /*#__PURE__*/_jsx(NoSsr, {
+    children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
+      className: classes.root,
+      children: seriesWithPosition.map(function (_ref2) {
+        var id = _ref2.id,
+          label = _ref2.label,
+          color = _ref2.color,
+          positionX = _ref2.positionX,
+          positionY = _ref2.positionY;
+        return /*#__PURE__*/_jsxs("g", {
+          className: classes.series,
+          transform: "translate(".concat(positionX, " ").concat(positionY, ")"),
+          children: [/*#__PURE__*/_jsx("rect", {
+            className: classes.mark,
+            y: -itemMarkHeight / 2,
+            width: itemMarkWidth,
+            height: itemMarkHeight,
+            fill: color
+          }), /*#__PURE__*/_jsx(ChartsText, {
+            style: labelStyle,
+            dominantBaseline: "central",
+            textAnchor: "start",
+            text: label,
+            x: itemMarkWidth + markGap,
+            y: 0
+          })]
+        }, id);
+      })
     })
   });
 }
@@ -190,7 +248,6 @@ export function ChartsLegend(inProps) {
   });
   var position = props.position,
     direction = props.direction,
-    offset = props.offset,
     hidden = props.hidden,
     slots = props.slots,
     slotProps = props.slotProps;
@@ -208,7 +265,6 @@ export function ChartsLegend(inProps) {
     additionalProps: {
       position: position,
       direction: direction,
-      offset: offset,
       classes: classes,
       drawingArea: drawingArea,
       series: series,

package/legacy/ChartsSurface.js

@@ -1,7 +1,6 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
+var _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import { useAxisEvents } from './hooks/useAxisEvents';
@@ -21,7 +20,6 @@ export var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(
     _props$disableAxisLis = props.disableAxisListener,
     disableAxisListener = _props$disableAxisLis === void 0 ? false : _props$disableAxisLis,
     className = props.className,
-    sx = props.sx,
     other = _objectWithoutProperties(props, _excluded);
   var svgView = _extends({
     width: width,
@@ -34,14 +32,7 @@ export var ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(
     width: width,
     height: height,
     viewBox: "".concat(svgView.x, " ").concat(svgView.y, " ").concat(svgView.width, " ").concat(svgView.height),
-    ref: ref,
-    sx: [{
-      '--ChartsLegend-itemWidth': '100px',
-      '--ChartsLegend-itemMarkSize': '20px',
-      '--ChartsLegend-rootSpacing': '5px',
-      '--ChartsLegend-labelSpacing': '5px',
-      '--ChartsLegend-rootOffsetY': '-20px'
-    }].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]))
+    ref: ref
   }, other, {
     children: [/*#__PURE__*/_jsx("title", {
       children: props.title

package/legacy/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,5 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { CartesianContext } from '../context/CartesianContextProvider';
 import { ChartsTooltipCell, ChartsTooltipPaper, ChartsTooltipTable, ChartsTooltipMark, ChartsTooltipRow } from './ChartsTooltipTable';
@@ -67,6 +69,7 @@ export function DefaultChartsAxisContent(props) {
 }
 export function ChartsAxisTooltipContent(props) {
   var content = props.content,
+    contentProps = props.contentProps,
     axisData = props.axisData,
     sx = props.sx,
     classes = props.classes;
@@ -99,13 +102,19 @@ export function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   var Content = content != null ? content : DefaultChartsAxisContent;
-  return /*#__PURE__*/_jsx(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  var chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData: axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex: dataIndex,
+      axisValue: axisValue,
+      sx: sx,
+      classes: classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }