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

package/esm/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) {
   const {
     content,
+    contentProps,
     axisData,
     sx,
     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]);
   const Content = content != null ? content : DefaultChartsAxisContent;
-  return /*#__PURE__*/_jsx(Content, {
-    axisData: axisData,
-    series: relevantSeries,
-    axis: relevantAxis,
-    dataIndex: dataIndex,
-    axisValue: axisValue,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      axisData,
+      series: relevantSeries,
+      axis: relevantAxis,
+      dataIndex,
+      axisValue,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,14 +59,21 @@ export function ChartsItemTooltipContent(props) {
     content,
     itemData,
     sx,
-    classes
+    classes,
+    contentProps
   } = props;
   const series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
   const Content = content != null ? content : DefaultChartsItemContent;
-  return /*#__PURE__*/_jsx(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  const chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData,
+      series,
+      sx,
+      classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -1,8 +1,11 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { styled } from '@mui/material/styles';
 import { Popper } from '@mui/base/Popper';
 import { NoSsr } from '@mui/base/NoSsr';
+import { useSlotProps } from '@mui/base/utils';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTootipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';
@@ -21,11 +24,24 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getTooltipUtilityClass, classes);
 };
+const ChartsTooltipRoot = styled(Popper, {
+  name: 'MuiChartsTooltip',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme
+}) => ({
+  pointerEvents: 'none',
+  zIndex: theme.zIndex.modal
+}));
 function ChartsTooltip(props) {
+  var _slots$popper, _slots$itemContent, _slots$axisContent;
   const {
     trigger = 'axis',
     itemContent,
-    axisContent
+    axisContent,
+    slots,
+    slotProps
   } = props;
   const mousePosition = useMouseTracker();
   const {
@@ -38,33 +54,40 @@ function ChartsTooltip(props) {
   const classes = useUtilityClasses({
     classes: props.classes
   });
+  const PopperComponent = (_slots$popper = slots == null ? void 0 : slots.popper) != null ? _slots$popper : ChartsTooltipRoot;
+  const popperProps = useSlotProps({
+    elementType: PopperComponent,
+    externalSlotProps: slotProps == null ? void 0 : slotProps.popper,
+    additionalProps: {
+      open: popperOpen,
+      placement: 'right-start',
+      anchorEl: generateVirtualElement(mousePosition)
+    },
+    ownerState: {}
+  });
   if (trigger === 'none') {
     return null;
   }
   return /*#__PURE__*/_jsx(NoSsr, {
-    children: popperOpen && /*#__PURE__*/_jsx(Popper, {
-      open: popperOpen,
-      placement: "right-start",
-      anchorEl: generateVirtualElement(mousePosition),
-      style: {
-        pointerEvents: 'none'
-      },
+    children: popperOpen && /*#__PURE__*/_jsx(PopperComponent, _extends({}, popperProps, {
       children: trigger === 'item' ? /*#__PURE__*/_jsx(ChartsItemTooltipContent, {
         itemData: displayedData,
-        content: itemContent,
+        content: (_slots$itemContent = slots == null ? void 0 : slots.itemContent) != null ? _slots$itemContent : itemContent,
+        contentProps: slotProps == null ? void 0 : slotProps.itemContent,
         sx: {
           mx: 2
         },
         classes: classes
       }) : /*#__PURE__*/_jsx(ChartsAxisTooltipContent, {
         axisData: displayedData,
-        content: axisContent,
+        content: (_slots$axisContent = slots == null ? void 0 : slots.axisContent) != null ? _slots$axisContent : axisContent,
+        contentProps: slotProps == null ? void 0 : slotProps.axisContent,
         sx: {
           mx: 2
         },
         classes: classes
       })
-    })
+    }))
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
@@ -74,6 +97,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.elementType,
   /**
@@ -82,8 +106,19 @@ process.env.NODE_ENV !== "production" ? ChartsTooltip.propTypes = {
   classes: PropTypes.object,
   /**
    * Component to override the tooltip content when triger is set to 'item'.
+   * @deprecated Use slots.itemContent instead
    */
   itemContent: PropTypes.elementType,
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps: PropTypes.object,
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots: PropTypes.object,
   /**
    * Select the kind of tooltip to display
    * - 'item': Shows data about the item below the mouse.

package/esm/LineChart/LineChart.js

@@ -91,7 +91,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
-    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), /*#__PURE__*/_jsx(ChartsClipPath, {
+    })), /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slots: slots,
+      slotProps: slotProps
+    })), /*#__PURE__*/_jsx(ChartsClipPath, {
       id: clipPathId
     }), children]
   });
@@ -250,6 +253,8 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/PieChart/PieArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded"];
+const _excluded = ["id", "dataIndex", "classes", "color", "highlightScope", "innerRadius", "outerRadius", "cornerRadius", "highlighted", "faded", "onClick"];
 import * as React from 'react';
 import { arc as d3Arc } from 'd3-shape';
 import PropTypes from 'prop-types';
@@ -55,7 +55,8 @@ export default function PieArc(props) {
       highlighted,
       faded = {
         additionalRadius: -5
-      }
+      },
+      onClick
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const getInteractionItemProps = useInteractionItemProps(highlightScope);
@@ -92,6 +93,8 @@ export default function PieArc(props) {
       innerRadius,
       outerRadius
     })),
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,
     className: classes.root
   }, getInteractionItemProps({

package/esm/PieChart/PieChart.js

@@ -46,7 +46,8 @@ function PieChart(props) {
     bottomAxis = null,
     children,
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const margin = _extends({}, defaultMargin, marginProps);
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
@@ -74,7 +75,8 @@ function PieChart(props) {
       slotProps: slotProps
     }), /*#__PURE__*/_jsx(PiePlot, {
       slots: slots,
-      slotProps: slotProps
+      slotProps: slotProps,
+      onClick: onClick
     }), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legend, {
       slots: slots,
       slotProps: slotProps
@@ -170,6 +172,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   }),
+  onClick: PropTypes.func,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -244,6 +247,8 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/PieChart/PiePlot.js

@@ -27,7 +27,8 @@ function PiePlot(props) {
   var _slots$pieArc, _slots$pieArcLabel;
   const {
     slots,
-    slotProps
+    slotProps,
+    onClick
   } = props;
   const seriesData = React.useContext(SeriesContext).pie;
   const {
@@ -78,7 +79,14 @@ function PiePlot(props) {
               dataIndex: index,
               highlightScope: series[seriesId].highlightScope,
               highlighted: highlighted,
-              faded: faded
+              faded: faded,
+              onClick: onClick && (event => {
+                onClick(event, {
+                  type: 'pie',
+                  seriesId,
+                  dataIndex: index
+                }, item);
+              })
             }, slotProps == null ? void 0 : slotProps.pieArc));
           }), data.map((item, index) => {
             return /*#__PURE__*/_createElement(ArcLabel, _extends({}, item, {
@@ -103,6 +111,13 @@ process.env.NODE_ENV !== "production" ? PiePlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Callback fired when a pie item is clicked.
+   * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.
+   * @param {PieItemIdentifier} pieItemIdentifier The pie item identifier.
+   * @param {DefaultizedPieValueType} item The pie item.
+   */
+  onClick: PropTypes.func,
   /**
    * The props used for each component slot.
    * @default {}

package/esm/ScatterChart/ScatterChart.js

@@ -210,6 +210,8 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/esm/SparkLineChart/SparkLineChart.js

@@ -84,7 +84,10 @@ const SparkLineChart = /*#__PURE__*/React.forwardRef(function SparkLineChart(pro
         slots: slots,
         slotProps: slotProps
       })]
-    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip)), children]
+    }), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlight)), showTooltip && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltip, {
+      slotProps: slotProps,
+      slots: slots
+    })), children]
   });
 });
 process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
@@ -159,6 +162,8 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
     axisContent: PropTypes.elementType,
     classes: PropTypes.object,
     itemContent: PropTypes.elementType,
+    slotProps: PropTypes.object,
+    slots: PropTypes.object,
     trigger: PropTypes.oneOf(['axis', 'item', 'none'])
   }),
   /**

package/hooks/useChartDimensions.js

@@ -20,5 +20,4 @@ const useChartDimensions = (width, height, margin) => {
   }), [width, height, defaultizedMargin.top, defaultizedMargin.bottom, defaultizedMargin.left, defaultizedMargin.right]);
   return drawingArea;
 };
-var _default = useChartDimensions;
-exports.default = _default;
+var _default = exports.default = useChartDimensions;

package/hooks/useTicks.js

@@ -59,5 +59,4 @@ function useTicks(options) {
     }));
   }, [ticksNumber, scale, valueFormatter]);
 }
-var _default = useTicks;
-exports.default = _default;
+var _default = exports.default = useTicks;

package/index.js

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

package/internals/components/AxisSharedComponents.js

@@ -8,7 +8,7 @@ exports.ChartsTickLabel = exports.ChartsTick = exports.ChartsLine = exports.Char
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _styles = require("@mui/material/styles");
 var _axisClasses = require("../../ChartsAxis/axisClasses");
-const AxisRoot = (0, _styles.styled)('g', {
+const AxisRoot = exports.AxisRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsAxis',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -47,8 +47,7 @@ const AxisRoot = (0, _styles.styled)('g', {
     }
   }
 });
-exports.AxisRoot = AxisRoot;
-const ChartsLine = (0, _styles.styled)('line', {
+const ChartsLine = exports.ChartsLine = (0, _styles.styled)('line', {
   name: 'MuiChartsAxis',
   slot: 'Line',
   overridesResolver: (props, styles) => styles.line
@@ -59,8 +58,7 @@ const ChartsLine = (0, _styles.styled)('line', {
   shapeRendering: 'crispEdges',
   strokeWidth: 1
 }));
-exports.ChartsLine = ChartsLine;
-const ChartsTick = (0, _styles.styled)('line', {
+const ChartsTick = exports.ChartsTick = (0, _styles.styled)('line', {
   name: 'MuiChartsAxis',
   slot: 'Tick',
   overridesResolver: (props, styles) => styles.tick
@@ -70,8 +68,7 @@ const ChartsTick = (0, _styles.styled)('line', {
   stroke: (theme.vars || theme).palette.text.primary,
   shapeRendering: 'crispEdges'
 }));
-exports.ChartsTick = ChartsTick;
-const ChartsTickLabel = (0, _styles.styled)('text', {
+const ChartsTickLabel = exports.ChartsTickLabel = (0, _styles.styled)('text', {
   name: 'MuiChartsAxis',
   slot: 'TickLabel',
   overridesResolver: (props, styles) => styles.tickLabel
@@ -80,8 +77,7 @@ const ChartsTickLabel = (0, _styles.styled)('text', {
 }) => (0, _extends2.default)({}, theme.typography.caption, {
   fill: (theme.vars || theme).palette.text.primary
 }));
-exports.ChartsTickLabel = ChartsTickLabel;
-const ChartsLabel = (0, _styles.styled)('text', {
+const ChartsLabel = exports.ChartsLabel = (0, _styles.styled)('text', {
   name: 'MuiChartsAxis',
   slot: 'Label',
   overridesResolver: (props, styles) => styles.label
@@ -89,5 +85,4 @@ const ChartsLabel = (0, _styles.styled)('text', {
   theme
 }) => (0, _extends2.default)({}, theme.typography.body1, {
   fill: (theme.vars || theme).palette.text.primary
-}));
-exports.ChartsLabel = ChartsLabel;
+}));

package/internals/defaultizeValueFormatter.js

@@ -15,5 +15,4 @@ function defaultizeValueFormatter(series, defaultValueFormatter) {
   });
   return defaultizedSeries;
 }
-var _default = defaultizeValueFormatter;
-exports.default = _default;
+var _default = exports.default = defaultizeValueFormatter;

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

@@ -249,6 +249,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/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));
 }

package/legacy/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,4 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useSlotProps } from '@mui/base/utils';
 import { SeriesContext } from '../context/SeriesContextProvider';
 import { ChartsTooltipTable, ChartsTooltipCell, ChartsTooltipMark, ChartsTooltipPaper, ChartsTooltipRow } from './ChartsTooltipTable';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -53,13 +55,20 @@ export function ChartsItemTooltipContent(props) {
   var content = props.content,
     itemData = props.itemData,
     sx = props.sx,
-    classes = props.classes;
+    classes = props.classes,
+    contentProps = props.contentProps;
   var series = React.useContext(SeriesContext)[itemData.type].series[itemData.seriesId];
   var Content = content != null ? content : DefaultChartsItemContent;
-  return /*#__PURE__*/_jsx(Content, {
-    itemData: itemData,
-    series: series,
-    sx: sx,
-    classes: classes
+  var chartTooltipContentProps = useSlotProps({
+    elementType: Content,
+    externalSlotProps: contentProps,
+    additionalProps: {
+      itemData: itemData,
+      series: series,
+      sx: sx,
+      classes: classes
+    },
+    ownerState: {}
   });
+  return /*#__PURE__*/_jsx(Content, _extends({}, chartTooltipContentProps));
 }