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

package/ChartsTooltip/ChartsTooltip.js

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsTooltip = ChartsTooltip;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
 var _Popper = require("@mui/base/Popper");
 var _NoSsr = require("@mui/base/NoSsr");
+var _utils = require("@mui/base/utils");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _utils2 = require("./utils");
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
@@ -28,13 +31,25 @@ const useUtilityClasses = ownerState => {
     labelCell: ['labelCell'],
     valueCell: ['valueCell']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _tooltipClasses.getTooltipUtilityClass, classes);
 };
+const ChartsTooltipRoot = (0, _styles.styled)(_Popper.Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
 function ChartsTooltip(props) {
   const {
     trigger = 'axis',
     itemContent,
-    axisContent
+    axisContent,
+    slots,
+    slotProps
   } = props;
   const mousePosition = (0, _utils2.useMouseTracker)();
   const {
@@ -47,33 +62,40 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: props.classes
   });
+  const PopperComponent = slots?.popper ?? ChartsTooltipRoot;
+  const popperProps = (0, _utils.useSlotProps)({
+    elementType: PopperComponent,
+    externalSlotProps: slotProps?.popper,
+    additionalProps: {
+      open: popperOpen,
+      placement: 'right-start',
+      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition)
+    },
+    ownerState: {}
+  });
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.NoSsr, {
-    children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.Popper, {
-      open: popperOpen,
-      placement: "right-start",
-      anchorEl: (0, _utils2.generateVirtualElement)(mousePosition),
-      style: {
-        pointerEvents: 'none'
-      },
+    children: popperOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(PopperComponent, (0, _extends2.default)({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsItemTooltipContent.ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: itemContent,
+        content: slots?.itemContent ?? itemContent,
+        contentProps: slotProps?.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisTooltipContent.ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: axisContent,
+        content: slots?.axisContent ?? axisContent,
+        contentProps: slotProps?.axisContent,
         sx: {
           mx: 2
         },
         classes: classes
       })
-    })
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -83,6 +105,7 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   // ----------------------------------------------------------------------
   /**
    * Component to override the tooltip content when triger is set to 'axis'.
+   * @deprecated Use slots.axisContent instead
    */
   axisContent: _propTypes.default.elementType,
   /**
@@ -91,8 +114,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   classes: _propTypes.default.object,
   /**
    * Component to override the tooltip content when triger is set to 'item'.
+   * @deprecated Use slots.itemContent instead
    */
   itemContent: _propTypes.default.elementType,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: _propTypes.default.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: _propTypes.default.object,
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/ChartsTooltip/ChartsTooltipTable.js

@@ -8,7 +8,7 @@ exports.ChartsTooltipTable = exports.ChartsTooltipRow = exports.ChartsTooltipPap
 var _Box = _interopRequireDefault(require("@mui/system/Box"));
 var _styles = require("@mui/material/styles");
 var _tooltipClasses = require("./tooltipClasses");
-const ChartsTooltipPaper = (0, _styles.styled)('div', {
+const ChartsTooltipPaper = exports.ChartsTooltipPaper = (0, _styles.styled)('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container'
 })(({
@@ -20,8 +20,7 @@ const ChartsTooltipPaper = (0, _styles.styled)('div', {
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: theme.shape.borderRadius
 }));
-exports.ChartsTooltipPaper = ChartsTooltipPaper;
-const ChartsTooltipTable = (0, _styles.styled)('table', {
+const ChartsTooltipTable = exports.ChartsTooltipTable = (0, _styles.styled)('table', {
   name: 'MuiChartsTooltip',
   slot: 'Table'
 })(({
@@ -32,8 +31,7 @@ const ChartsTooltipTable = (0, _styles.styled)('table', {
     borderBottom: `solid ${(theme.vars || theme).palette.divider} 1px`
   }
 }));
-exports.ChartsTooltipTable = ChartsTooltipTable;
-const ChartsTooltipRow = (0, _styles.styled)('tr', {
+const ChartsTooltipRow = exports.ChartsTooltipRow = (0, _styles.styled)('tr', {
   name: 'MuiChartsTooltip',
   slot: 'Row'
 })(({
@@ -46,8 +44,7 @@ const ChartsTooltipRow = (0, _styles.styled)('tr', {
     paddingBottom: theme.spacing(1)
   }
 }));
-exports.ChartsTooltipRow = ChartsTooltipRow;
-const ChartsTooltipCell = (0, _styles.styled)('td', {
+const ChartsTooltipCell = exports.ChartsTooltipCell = (0, _styles.styled)('td', {
   name: 'MuiChartsTooltip',
   slot: 'Cell'
 })(({
@@ -69,8 +66,7 @@ const ChartsTooltipCell = (0, _styles.styled)('td', {
     paddingRight: theme.spacing(2)
   }
 }));
-exports.ChartsTooltipCell = ChartsTooltipCell;
-const ChartsTooltipMark = (0, _styles.styled)(_Box.default, {
+const ChartsTooltipMark = exports.ChartsTooltipMark = (0, _styles.styled)(_Box.default, {
   name: 'MuiChartsTooltip',
   slot: 'Mark'
 })(({
@@ -84,5 +80,4 @@ const ChartsTooltipMark = (0, _styles.styled)(_Box.default, {
   borderColor: (theme.vars || theme).palette.background.paper,
   border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box'
-}));
-exports.ChartsTooltipMark = ChartsTooltipMark;
+}));

package/ChartsTooltip/tooltipClasses.js

@@ -9,5 +9,4 @@ var _utils = require("@mui/utils");
 function getTooltipUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsTooltip', slot);
 }
-const tooltipClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsTooltip', ['root', 'markCell', 'labelCell', 'valueCell']);
-exports.tooltipClasses = tooltipClasses;
+const tooltipClasses = exports.tooltipClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsTooltip', ['root', 'markCell', 'labelCell', 'valueCell']);

package/ChartsXAxis/ChartsXAxis.js

@@ -9,15 +9,17 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../internals/components/ChartsText");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 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 useUtilityClasses = ownerState => {
@@ -33,7 +35,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 const defaultProps = {
   position: 'bottom',
@@ -54,7 +56,7 @@ function ChartsXAxis(inProps) {
       xAxis: {
         [_props$axisId]: {
           scale: xScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -85,7 +87,7 @@ function ChartsXAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const xTicks = (0, _useTicks.default)({
     scale: xScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
   const positionSigne = position === 'bottom' ? 1 : -1;
@@ -93,10 +95,38 @@ function ChartsXAxis(inProps) {
     x: left + width / 2,
     y: positionSigne * (tickFontSize + tickSize + 10)
   };
-  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
-  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
-  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisTickLabelProps = (0, _utils.useSlotProps)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+      style: {
+        fontSize: tickFontSize
+      },
+      className: classes.tickLabel
+    },
+    className: classes.tickLabel,
+    ownerState: {}
+  });
+  const axisLabelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
+      style: {
+        fontSize: labelFontSize,
+        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
+      },
+      className: classes.label
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height : top})`,
     className: classes.root,
@@ -120,24 +150,17 @@ function ChartsXAxis(inProps) {
         }, slotProps?.axisTick)), formattedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel,
-          "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue
+          "transform-origin": `${xTickLabel}px ${yTickLabel}px`
+        }, axisTickLabelProps, {
+          text: formattedValue.toString()
         }))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsXAxis.propTypes = {

package/ChartsYAxis/ChartsYAxis.js

@@ -9,15 +9,17 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _utils = require("@mui/base/utils");
+var _utils2 = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _CartesianContextProvider = require("../context/CartesianContextProvider");
 var _DrawingProvider = require("../context/DrawingProvider");
 var _useTicks = _interopRequireDefault(require("../hooks/useTicks"));
 var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../internals/components/ChartsText");
 var _axisClasses = require("../ChartsAxis/axisClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["scale", "ticksNumber"];
+const _excluded = ["scale", "tickNumber"];
 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 useUtilityClasses = ownerState => {
@@ -33,7 +35,7 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return (0, _utils.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
+  return (0, _utils2.unstable_composeClasses)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
 const defaultProps = {
   position: 'left',
@@ -54,7 +56,7 @@ function ChartsYAxis(inProps) {
       yAxis: {
         [_props$axisId]: {
           scale: yScale,
-          ticksNumber
+          tickNumber
         }
       }
     } = _React$useContext,
@@ -85,7 +87,7 @@ function ChartsYAxis(inProps) {
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = (0, _useTicks.default)({
     scale: yScale,
-    ticksNumber,
+    tickNumber,
     valueFormatter
   });
   const positionSigne = position === 'right' ? 1 : -1;
@@ -93,10 +95,38 @@ function ChartsYAxis(inProps) {
     x: positionSigne * (tickFontSize + tickSize + 10),
     y: top + height / 2
   };
-  const Line = slots?.axisLine ?? _AxisSharedComponents.ChartsLine;
-  const Tick = slots?.axisTick ?? _AxisSharedComponents.ChartsTick;
-  const TickLabel = slots?.axisTickLabel ?? _AxisSharedComponents.ChartsTickLabel;
-  const Label = slots?.axisLabel ?? _AxisSharedComponents.ChartsLabel;
+  const Line = slots?.axisLine ?? 'line';
+  const Tick = slots?.axisTick ?? 'line';
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
+  const axisTickLabelProps = (0, _utils.useSlotProps)({
+    elementType: TickLabel,
+    externalSlotProps: slotProps?.axisTickLabel,
+    additionalProps: {
+      textAnchor: position === 'right' ? 'start' : 'end',
+      dominantBaseline: 'central',
+      style: {
+        fontSize: tickFontSize
+      },
+      className: classes.tickLabel
+    },
+    ownerState: {}
+  });
+  const axisLabelProps = (0, _utils.useSlotProps)({
+    elementType: Label,
+    externalSlotProps: slotProps?.axisLabel,
+    additionalProps: {
+      textAnchor: 'middle',
+      dominantBaseline: 'auto',
+      style: {
+        fontSize: labelFontSize,
+        transform: `rotate(${positionSigne * 90}deg)`,
+        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
+      },
+      className: classes.label
+    },
+    ownerState: {}
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_AxisSharedComponents.AxisRoot, {
     transform: `translate(${position === 'right' ? left + width : left}, 0)`,
     className: classes.root,
@@ -121,24 +151,15 @@ function ChartsYAxis(inProps) {
           x: xTickLabel,
           y: yTickLabel,
           "transform-origin": `${xTickLabel}px ${yTickLabel}px`,
-          sx: {
-            fontSize: tickFontSize
-          },
-          className: classes.tickLabel
-        }, slotProps?.axisTickLabel, {
-          children: formattedValue.toLocaleString()
-        }))]
+          text: formattedValue.toString()
+        }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, {
-      sx: {
-        fontSize: labelFontSize,
-        transform: `rotate(${positionSigne * 90}deg)`,
-        transformOrigin: `${labelRefPoint.x}px ${labelRefPoint.y}px`
-      },
-      className: classes.label
-    }, slotProps?.axisLabel, {
-      children: label
-    }))]
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+      className: classes.label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
+        text: label
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {

package/LineChart/AreaElement.js

@@ -26,8 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getAreaElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiAreaElement', slot);
 }
-const areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded']);
-exports.areaElementClasses = areaElementClasses;
+const areaElementClasses = exports.areaElementClasses = (0, _generateUtilityClasses.default)('MuiAreaElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,7 +39,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getAreaElementUtilityClass, classes);
 };
-const AreaElementPath = (0, _styles.styled)('path', {
+const AreaElementPath = exports.AreaElementPath = (0, _styles.styled)('path', {
   name: 'MuiAreaElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -52,7 +51,6 @@ const AreaElementPath = (0, _styles.styled)('path', {
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
-exports.AreaElementPath = AreaElementPath;
 AreaElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/LineChart/LineChart.d.ts

@@ -6,19 +6,22 @@ import { MarkPlotSlotComponentProps, MarkPlotSlotsComponent } from './MarkPlot';
 import { ChartsAxisProps } from '../ChartsAxis/ChartsAxis';
 import { LineSeriesType } from '../models/seriesType/line';
 import { MakeOptional } from '../models/helpers';
-import { ChartsTooltipProps } from '../ChartsTooltip';
+import { ChartsTooltipProps, ChartsTooltipSlotComponentProps, ChartsTooltipSlotsComponent } from '../ChartsTooltip';
 import { ChartsLegendProps, ChartsLegendSlotComponentProps, ChartsLegendSlotsComponent } from '../ChartsLegend';
 import { ChartsAxisHighlightProps } from '../ChartsAxisHighlight';
 import { ChartsAxisSlotComponentProps, ChartsAxisSlotsComponent } from '../models/axis';
 import { LineHighlightPlotSlotsComponent, LineHighlightPlotSlotComponentProps } from './LineHighlightPlot';
-export interface LineChartSlotsComponent extends ChartsAxisSlotsComponent, AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, ChartsLegendSlotsComponent {
+export interface LineChartSlotsComponent extends ChartsAxisSlotsComponent, AreaPlotSlotsComponent, LinePlotSlotsComponent, MarkPlotSlotsComponent, LineHighlightPlotSlotsComponent, ChartsLegendSlotsComponent, ChartsTooltipSlotsComponent {
 }
-export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, ChartsLegendSlotComponentProps {
+export interface LineChartSlotComponentProps extends ChartsAxisSlotComponentProps, AreaPlotSlotComponentProps, LinePlotSlotComponentProps, MarkPlotSlotComponentProps, LineHighlightPlotSlotComponentProps, ChartsLegendSlotComponentProps, ChartsTooltipSlotComponentProps {
 }
 export interface LineChartProps extends Omit<ResponsiveChartContainerProps, 'series'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'> {
     series: MakeOptional<LineSeriesType, 'type'>[];
     tooltip?: ChartsTooltipProps;
     axisHighlight?: ChartsAxisHighlightProps;
+    /**
+     * @deprecated Consider using `slotProps.legend` instead.
+     */
     legend?: ChartsLegendProps;
     /**
      * If `true`, render the line highlight item.

package/LineChart/LineChart.js

@@ -23,7 +23,7 @@ var _LineHighlightPlot = require("./LineHighlightPlot");
 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; }
-const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
+const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   const {
     xAxis,
     yAxis,
@@ -96,12 +96,14 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, {
       id: clipPathId
     }), children]
   });
 });
-exports.LineChart = LineChart;
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -171,23 +173,19 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     tickNumber: _propTypes.default.number,
     tickSize: _propTypes.default.number
   }), _propTypes.default.string]),
+  /**
+   * @deprecated Consider using `slotProps.legend` instead.
+   */
   legend: _propTypes.default.shape({
     classes: _propTypes.default.object,
     direction: _propTypes.default.oneOf(['column', 'row']),
     hidden: _propTypes.default.bool,
-    itemWidth: _propTypes.default.number,
-    markSize: _propTypes.default.number,
-    offset: _propTypes.default.shape({
-      x: _propTypes.default.number,
-      y: _propTypes.default.number
-    }),
     position: _propTypes.default.shape({
       horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
     }),
     slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object,
-    spacing: _propTypes.default.number
+    slots: _propTypes.default.object
   }),
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -256,6 +254,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: _propTypes.default.elementType,
     classes: _propTypes.default.object,
     itemContent: _propTypes.default.elementType,
+    slotProps: _propTypes.default.object,
+    slots: _propTypes.default.object,
     trigger: _propTypes.default.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/LineChart/LineElement.js

@@ -27,8 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getLineElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLineElement', slot);
 }
-const lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded']);
-exports.lineElementClasses = lineElementClasses;
+const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -41,7 +40,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, getLineElementUtilityClass, classes);
 };
-const LineElementPath = (0, _styles.styled)('path', {
+const LineElementPath = exports.LineElementPath = (0, _styles.styled)('path', {
   name: 'MuiLineElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -55,7 +54,6 @@ const LineElementPath = (0, _styles.styled)('path', {
   transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',
   opacity: ownerState.isFaded ? 0.3 : 1
 }));
-exports.LineElementPath = LineElementPath;
 LineElementPath.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/LineChart/LineHighlightElement.js

@@ -22,8 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getHighlightElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiHighlightElement', slot);
 }
-const lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
-exports.lineHighlightElementClasses = lineHighlightElementClasses;
+const lineHighlightElementClasses = exports.lineHighlightElementClasses = (0, _generateUtilityClasses.default)('MuiHighlightElement', ['root']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/LineChart/MarkElement.js

@@ -26,8 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function getMarkElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
 }
-const markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded']);
-exports.markElementClasses = markElementClasses;
+const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/LineChart/formatter.js

@@ -62,5 +62,4 @@ const formatter = (params, dataset) => {
     series: (0, _defaultizeValueFormatter.default)(completedSeries, v => v.toLocaleString())
   };
 };
-var _default = formatter;
-exports.default = _default;
+var _default = exports.default = formatter;

package/LineChart/legend.js

@@ -16,5 +16,4 @@ const legendGetter = params => {
   }));
   return data.filter(item => item.label !== undefined);
 };
-var _default = legendGetter;
-exports.default = _default;
+var _default = exports.default = legendGetter;

package/PieChart/PieArc.d.ts

@@ -28,6 +28,7 @@ export type PieArcProps = Omit<PieArcOwnerState, 'isFaded' | 'isHighlighted'> &
     cornerRadius: PieSeriesType['cornerRadius'];
     highlighted: PieSeriesType['highlighted'];
     faded: PieSeriesType['faded'];
+    onClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>) => void;
 };
 declare function PieArc(props: PieArcProps): React.JSX.Element;
 declare namespace PieArc {