@mui/x-charts 6.0.0-alpha.9 → 6.18.1

package/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsYReferenceLine = ChartsYReferenceLine;
+exports.getYReferenceLineClasses = getYReferenceLineClasses;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _hooks = require("../hooks");
+var _common = require("./common");
+var _ChartsText = require("../internals/components/ChartsText");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getTextParams = ({
+  left,
+  width,
+  spacingX,
+  labelAlign = 'middle'
+}) => {
+  switch (labelAlign) {
+    case 'start':
+      return {
+        x: left + spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'start'
+        }
+      };
+    case 'end':
+      return {
+        x: left + width - spacingX,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'end'
+        }
+      };
+    default:
+      return {
+        x: left + width / 2,
+        style: {
+          dominantBaseline: 'auto',
+          textAnchor: 'middle'
+        }
+      };
+  }
+};
+let warnedOnce = false;
+function getYReferenceLineClasses(classes) {
+  return (0, _composeClasses.default)({
+    root: ['root', 'horizontal'],
+    line: ['line'],
+    label: ['label']
+  }, _chartsReferenceLineClasses.getReferenceLineUtilityClass, classes);
+}
+function ChartsYReferenceLine(props) {
+  const {
+    y,
+    label = '',
+    spacing = 5,
+    classes: inClasses,
+    labelAlign,
+    lineStyle,
+    labelStyle,
+    axisId
+  } = props;
+  const {
+    left,
+    width
+  } = (0, _hooks.useDrawingArea)();
+  const yAxisScale = (0, _hooks.useYScale)(axisId);
+  const yPosition = yAxisScale(y);
+  if (yPosition === undefined) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!warnedOnce) {
+        warnedOnce = true;
+        console.error(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`);
+      }
+    }
+    return null;
+  }
+  const d = `M ${left} ${yPosition} l ${width} 0`;
+  const classes = getYReferenceLineClasses(inClasses);
+  const spacingX = typeof spacing === 'object' ? spacing.x ?? 0 : spacing;
+  const spacingY = typeof spacing === 'object' ? spacing.y ?? 0 : spacing;
+  const textParams = (0, _extends2.default)({
+    y: yPosition - spacingY,
+    text: label,
+    fontSize: 12
+  }, getTextParams({
+    left,
+    width,
+    spacingX,
+    labelAlign
+  }), {
+    className: classes.label
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_common.ReferenceLineRoot, {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: d,
+      className: classes.line,
+      style: lineStyle
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, (0, _extends2.default)({}, textParams, {
+      style: (0, _extends2.default)({}, textParams.style, labelStyle)
+    }))]
+  });
+}

package/ChartsReferenceLine/chartsReferenceLineClasses.d.ts

@@ -0,0 +1,15 @@
+export interface ChartsReferenceLineClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the reference line is vertical. */
+    vertical: string;
+    /** Styles applied to the root element if the reference line is horizontal. */
+    horizontal: string;
+    /** Styles applied to the reference line. */
+    line: string;
+    /** Styles applied to the reference label. */
+    label: string;
+}
+export type ChartsReferenceLineClassKey = keyof ChartsReferenceLineClasses;
+export declare function getReferenceLineUtilityClass(slot: string): string;
+export declare const referenceLineClasses: ChartsReferenceLineClasses;

package/ChartsReferenceLine/chartsReferenceLineClasses.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getReferenceLineUtilityClass = getReferenceLineUtilityClass;
+exports.referenceLineClasses = void 0;
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getReferenceLineUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsReferenceLine', slot);
+}
+const referenceLineClasses = exports.referenceLineClasses = (0, _generateUtilityClasses.default)('MuiChartsReferenceLine', ['root', 'vertical', 'horizontal', 'line', 'label']);

package/ChartsReferenceLine/common.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { ChartsReferenceLineClasses } from './chartsReferenceLineClasses';
+import { ChartsTextStyle } from '../internals/components/ChartsText';
+export type CommonChartsReferenceLineProps = {
+    /**
+     * The alignment if the label is in the chart drawing area.
+     * @default 'middle'
+     */
+    labelAlign?: 'start' | 'middle' | 'end';
+    /**
+     * The label to display along the reference line.
+     */
+    label?: string;
+    /**
+     * Additional space arround the label in px.
+     * Can be a number or an object `{ x, y }` to distinguish space with the reference line and space with axes.
+     * @default 5
+     */
+    spacing?: number | {
+        x?: number;
+        y?: number;
+    };
+    /**
+     * The id of the axis used for the reference value.
+     * @default The `id` of the first defined axis.
+     */
+    axisId?: string;
+    /**
+     * The style applied to the label.
+     */
+    labelStyle?: ChartsTextStyle;
+    /**
+     * The style applied to the line.
+     */
+    lineStyle?: React.CSSProperties;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    classes?: Partial<ChartsReferenceLineClasses>;
+};
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGGElement>, {}>;

package/ChartsReferenceLine/common.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReferenceLineRoot = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _styles = require("@mui/material/styles");
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g')(({
+  theme
+}) => ({
+  [`& .${_chartsReferenceLineClasses.referenceLineClasses.line}`]: {
+    fill: 'none',
+    stroke: (theme.vars || theme).palette.text.primary,
+    shapeRendering: 'crispEdges',
+    strokeWidth: 1,
+    pointerEvents: 'none'
+  },
+  [`& .${_chartsReferenceLineClasses.referenceLineClasses.label}`]: (0, _extends2.default)({
+    fill: (theme.vars || theme).palette.text.primary,
+    stroke: 'none',
+    pointerEvents: 'none',
+    fontSize: 12
+  }, theme.typography.body1)
+}));

package/ChartsReferenceLine/index.d.ts

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

package/ChartsReferenceLine/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsReferenceLine = require("./ChartsReferenceLine");
+Object.keys(_ChartsReferenceLine).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsReferenceLine[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsReferenceLine[key];
+    }
+  });
+});
+var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
+Object.keys(_chartsReferenceLineClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _chartsReferenceLineClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _chartsReferenceLineClasses[key];
+    }
+  });
+});

package/ChartsReferenceLine/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/ChartsReferenceLine/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/ChartsSurface.d.ts

@@ -1,4 +1,4 @@
-import { SxProps, Theme } from '@mui/system';
+import { SxProps, Theme } from '@mui/material/styles';
 import * as React from 'react';
 type ViewBox = {
     x?: number;
@@ -7,7 +7,13 @@ type ViewBox = {
     height?: number;
 };
 export interface ChartsSurfaceProps {
+    /**
+     * The width of the chart in px.
+     */
     width: number;
+    /**
+     * The height of the chart in px.
+     */
     height: number;
     viewBox?: ViewBox;
     className?: string;
@@ -15,6 +21,11 @@ export interface ChartsSurfaceProps {
     desc?: string;
     sx?: SxProps<Theme>;
     children?: React.ReactNode;
+    /**
+     * If `true`, the charts will not listen to the mouse move event.
+     * It might break interactive features, but will improve performance.
+     * @default false
+     */
     disableAxisListener?: boolean;
 }
 export declare const ChartsSurface: React.ForwardRefExoticComponent<ChartsSurfaceProps & React.RefAttributes<SVGSVGElement>>;

package/ChartsSurface.js

@@ -7,25 +7,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.ChartsSurface = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _system = require("@mui/system");
+var _styles = require("@mui/material/styles");
 var React = _interopRequireWildcard(require("react"));
 var _useAxisEvents = require("./hooks/useAxisEvents");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className", "sx"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ChartChartsSurfaceStyles = (0, _system.styled)('svg', {
+const _excluded = ["children", "width", "height", "viewBox", "disableAxisListener", "className"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ChartChartsSurfaceStyles = (0, _styles.styled)('svg', {
   name: 'MuiChartsSurface',
   slot: 'Root'
 })(() => ({}));
-const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
+const ChartsSurface = exports.ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props, ref) {
   const {
       children,
       width,
       height,
       viewBox,
-      disableAxisListener = false,
-      sx
+      disableAxisListener = false
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const svgView = (0, _extends2.default)({
@@ -39,14 +38,7 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
     width: width,
     height: height,
     viewBox: `${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`,
-    ref: ref,
-    sx: [{
-      '--ChartsLegend-itemWidth': '100px',
-      '--ChartsLegend-itemMarkSize': '20px',
-      '--ChartsLegend-rootSpacing': '5px',
-      '--ChartsLegend-labelSpacing': '5px',
-      '--ChartsLegend-rootOffsetY': '-20px'
-    }, ...(Array.isArray(sx) ? sx : [sx])]
+    ref: ref
   }, other, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("title", {
       children: props.title
@@ -54,5 +46,4 @@ const ChartsSurface = /*#__PURE__*/React.forwardRef(function ChartsSurface(props
       children: props.desc
     }), children]
   }));
-});
-exports.ChartsSurface = ChartsSurface;
+});

package/ChartsTooltip/ChartsAxisTooltipContent.d.ts

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

package/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChartsAxisTooltipContent = ChartsAxisTooltipContent;
 exports.DefaultChartsAxisContent = DefaultChartsAxisContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function DefaultChartsAxisContent(props) {
   const {
     series,
@@ -29,7 +31,6 @@ function DefaultChartsAxisContent(props) {
   const axisFormatter = axis.valueFormatter ?? (v => v.toLocaleString());
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipTable, {
       children: [axisValue != null && !axis.hideTooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
@@ -48,27 +49,33 @@ function DefaultChartsAxisContent(props) {
           label,
           valueFormatter,
           data
-        }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.markCell,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
-              ownerState: {
-                color
-              },
-              boxShadow: 1
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.labelCell,
-            children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: label
-            }) : null
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
-            className: classes.valueCell,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-              children: valueFormatter(data[dataIndex])
-            })
-          })]
-        }, id))
+        }) => {
+          const formattedValue = valueFormatter(data[dataIndex]);
+          if (formattedValue == null) {
+            return null;
+          }
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltipTable.ChartsTooltipRow, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: classes.markCell,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipMark, {
+                ownerState: {
+                  color
+                },
+                boxShadow: 1
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: classes.labelCell,
+              children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: label
+              }) : null
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipCell, {
+              className: classes.valueCell,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+                children: formattedValue
+              })
+            })]
+          }, id);
+        })
       })]
     })
   });
@@ -76,6 +83,7 @@ function DefaultChartsAxisContent(props) {
 function ChartsAxisTooltipContent(props) {
   const {
     content,
+    contentProps,
     axisData,
     sx,
     classes
@@ -108,13 +116,19 @@ function ChartsAxisTooltipContent(props) {
     return isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
   }, [USED_AXIS_ID, isXaxis, xAxis, yAxis]);
   const Content = content ?? DefaultChartsAxisContent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = (0, _utils.useSlotProps)({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex,
+      axisValue,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
 }

package/ChartsTooltip/ChartsItemTooltipContent.d.ts

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

package/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,16 +1,19 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsItemTooltipContent = ChartsItemTooltipContent;
 exports.DefaultChartsItemContent = DefaultChartsItemContent;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/base/utils");
 var _SeriesContextProvider = require("../context/SeriesContextProvider");
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function DefaultChartsItemContent(props) {
   const {
     series,
@@ -37,7 +40,6 @@ function DefaultChartsItemContent(props) {
   const formattedValue = series.valueFormatter(series.data[itemData.dataIndex]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipPaper, {
     sx: sx,
-    variant: "outlined",
     className: classes.root,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltipTable.ChartsTooltipTable, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
@@ -66,14 +68,21 @@ function ChartsItemTooltipContent(props) {
     content,
     itemData,
     sx,
-    classes
+    classes,
+    contentProps
   } = props;
   const series = React.useContext(_SeriesContextProvider.SeriesContext)[itemData.type].series[itemData.seriesId];
   const Content = content ?? DefaultChartsItemContent;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = (0, _utils.useSlotProps)({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData,
+      series,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, (0, _extends2.default)({}, chartTooltipContentProps));
 }

package/ChartsTooltip/ChartsTooltip.d.ts

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