@mui/x-charts 7.15.0 → 7.17.0

package/node/ChartsGrid/ChartsHorizontalGrid.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsGridHorizontal = ChartsGridHorizontal;
+var React = _interopRequireWildcard(require("react"));
+var _useTicks = require("../hooks/useTicks");
+var _styledCommonents = require("./styledCommonents");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */
+function ChartsGridHorizontal(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const yTicks = (0, _useTicks.useTicks)({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledCommonents.GridLine, {
+      y1: offset,
+      y2: offset,
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
+      className: classes.horizontalLine
+    }, `horizontal-${formattedValue}`))
+  });
+}

package/node/ChartsGrid/ChartsVerticalGrid.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsGridVertical = ChartsGridVertical;
+var React = _interopRequireWildcard(require("react"));
+var _useTicks = require("../hooks/useTicks");
+var _styledCommonents = require("./styledCommonents");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */
+function ChartsGridVertical(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const xTicks = (0, _useTicks.useTicks)({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledCommonents.GridLine, {
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, `vertical-${formattedValue}`))
+  });
+}

package/node/ChartsGrid/chartsGridClasses.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/node/ChartsGrid/styledCommonents.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridRoot = exports.GridLine = void 0;
+var _styles = require("@mui/material/styles");
+var _chartsGridClasses = require("./chartsGridClasses");
+const GridRoot = exports.GridRoot = (0, _styles.styled)('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`&.${_chartsGridClasses.chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${_chartsGridClasses.chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+const GridLine = exports.GridLine = (0, _styles.styled)('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
+}));

package/node/ChartsLegend/ChartsLegend.js

@@ -1,10 +1,13 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartsLegend = ChartsLegend;
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,8 +20,7 @@ var _DefaultChartsLegend = require("./DefaultChartsLegend");
 var _hooks = require("../hooks");
 var _useSeries = require("../hooks/useSeries");
 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 && {}.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 _excluded = ["slots", "slotProps"];
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -28,31 +30,31 @@ const useUtilityClasses = ownerState => {
     root: ['root', direction],
     mark: ['mark'],
     label: ['label'],
-    series: ['series']
+    series: ['series'],
+    itemBackground: ['itemBackground']
   };
   return (0, _composeClasses.default)(slots, _chartsLegendClasses.getLegendUtilityClass, classes);
 };
-const defaultProps = {
-  position: {
-    horizontal: 'middle',
-    vertical: 'top'
-  },
-  direction: 'row'
-};
 function ChartsLegend(inProps) {
   const props = (0, _styles.useThemeProps)({
-    props: (0, _extends2.default)({}, defaultProps, inProps),
+    props: inProps,
     name: 'MuiChartsLegend'
   });
+  const defaultizedProps = (0, _extends2.default)({
+    direction: 'row'
+  }, props, {
+    position: (0, _extends2.default)({
+      horizontal: 'middle',
+      vertical: 'top'
+    }, props.position)
+  });
   const {
-    position,
-    direction,
-    hidden,
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = defaultizedProps,
+    other = (0, _objectWithoutPropertiesLoose2.default)(defaultizedProps, _excluded);
   const theme = (0, _styles.useTheme)();
-  const classes = useUtilityClasses((0, _extends2.default)({}, props, {
+  const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
   const drawingArea = (0, _hooks.useDrawingArea)();
@@ -62,15 +64,12 @@ function ChartsLegend(inProps) {
   const chartLegendRenderProps = (0, _useSlotProps.default)({
     elementType: ChartLegendRender,
     externalSlotProps: slotProps?.legend,
-    additionalProps: {
-      position,
-      direction,
+    additionalProps: (0, _extends2.default)({}, other, {
       classes,
       drawingArea,
       series,
-      hidden,
       seriesToDisplay
-    },
+    }),
     ownerState: {}
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartLegendRender, (0, _extends2.default)({}, chartLegendRenderProps));
@@ -94,6 +93,49 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: _propTypes.default.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: _propTypes.default.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: _propTypes.default.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: _propTypes.default.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: _propTypes.default.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: _propTypes.default.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {SeriesLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: _propTypes.default.func,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
   /**
    * The position of the legend.
    */

package/node/ChartsLegend/ChartsLegendItem.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsLegendItem = ChartsLegendItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _ChartsText = require("../ChartsText");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * @ignore - internal component.
+ */
+function ChartsLegendItem(props) {
+  const isRTL = (0, _RtlProvider.useRtl)();
+  const {
+    id,
+    positionY,
+    label,
+    positionX,
+    innerHeight,
+    innerWidth,
+    legendWidth,
+    color,
+    gapX,
+    gapY,
+    itemMarkHeight,
+    itemMarkWidth,
+    markGap,
+    labelStyle,
+    classes,
+    onClick
+  } = props;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: (0, _clsx.default)(classes?.series, `${classes?.series}-${id}`),
+    transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      x: isRTL ? -(innerWidth + 2) : -2,
+      y: -itemMarkHeight / 2 - 2,
+      width: innerWidth + 4,
+      height: innerHeight + 4,
+      fill: "transparent",
+      className: classes?.itemBackground,
+      onClick: onClick,
+      style: {
+        pointerEvents: onClick ? 'all' : 'none',
+        cursor: onClick ? 'pointer' : 'unset'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      className: classes?.mark,
+      x: isRTL ? -itemMarkWidth : 0,
+      y: -itemMarkHeight / 2,
+      width: itemMarkWidth,
+      height: itemMarkHeight,
+      fill: color,
+      style: {
+        pointerEvents: 'none'
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
+      style: (0, _extends2.default)({
+        pointerEvents: 'none'
+      }, labelStyle),
+      text: label,
+      x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+      y: 0
+    })]
+  });
+}

package/node/ChartsLegend/ContinuousColorLegend.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -18,8 +20,6 @@ var _ChartsText = require("../ChartsText");
 var _domUtils = require("../internals/domUtils");
 var _useAxis = require("./useAxis");
 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 && {}.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 getPositionOffset(position, legendBox, svgBox) {
   let offsetX = 0;
   let offsetY = 0;

package/node/ChartsLegend/DefaultChartsLegend.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,16 +13,27 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _LegendPerItem = require("./LegendPerItem");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["drawingArea", "seriesToDisplay"];
-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 && {}.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 _excluded = ["drawingArea", "seriesToDisplay", "hidden", "onItemClick"];
+const seriesContextBuilder = context => ({
+  type: 'series',
+  color: context.color,
+  label: context.label,
+  seriesId: context.seriesId,
+  itemId: context.itemId
+});
 function DefaultChartsLegend(props) {
   const {
-      seriesToDisplay
+      seriesToDisplay,
+      hidden,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  if (hidden) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LegendPerItem.LegendPerItem, (0, _extends2.default)({}, other, {
-    itemsToDisplay: seriesToDisplay
+    itemsToDisplay: seriesToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
@@ -78,6 +91,13 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
    * @default 5
    */
   markGap: _propTypes.default.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {SeriesLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.
@@ -100,6 +120,10 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   seriesToDisplay: _propTypes.default.arrayOf(_propTypes.default.shape({
     color: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-    label: _propTypes.default.string.isRequired
+    itemId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    label: _propTypes.default.string.isRequired,
+    maxValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    minValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   })).isRequired
 } : void 0;

package/node/ChartsLegend/LegendPerItem.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,18 +10,16 @@ exports.ChartsLegendRoot = void 0;
 exports.LegendPerItem = LegendPerItem;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _NoSsr = _interopRequireDefault(require("@mui/material/NoSsr"));
 var _styles = require("@mui/material/styles");
-var _RtlProvider = require("@mui/system/RtlProvider");
-var _ChartsText = require("../ChartsText");
 var _getWordsByLines = require("../internals/getWordsByLines");
 var _legendItemsPlacement = require("./legendItemsPlacement");
 var _useDrawingArea = require("../hooks/useDrawingArea");
+var _ChartsLegendItem = require("./ChartsLegendItem");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["rotate", "dominantBaseline"];
-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 && {}.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 ChartsLegendRoot = exports.ChartsLegendRoot = (0, _styles.styled)('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
@@ -52,7 +52,6 @@ const getStandardizedPadding = padding => {
  */
 function LegendPerItem(props) {
   const {
-    hidden,
     position,
     direction,
     itemsToDisplay,
@@ -62,10 +61,10 @@ function LegendPerItem(props) {
     markGap = 5,
     itemGap = 10,
     padding: paddingProps = 10,
-    labelStyle: inLabelStyle
+    labelStyle: inLabelStyle,
+    onItemClick
   } = props;
   const theme = (0, _styles.useTheme)();
-  const isRtl = (0, _RtlProvider.useRtl)();
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const labelStyle = React.useMemo(() => (0, _extends2.default)({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -118,35 +117,21 @@ function LegendPerItem(props) {
         return (totalHeight - legendHeight) / 2;
     }
   }, [position.vertical, padding.top, padding.bottom, totalHeight, legendHeight]);
-  if (hidden) {
-    return null;
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsLegendRoot, {
       className: classes?.root,
-      children: itemsWithPosition.map(({
-        id,
-        label,
-        color,
-        positionX,
-        positionY
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-        className: classes?.series,
-        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
-          className: classes?.mark,
-          x: isRtl ? -itemMarkWidth : 0,
-          y: -itemMarkHeight / 2,
-          width: itemMarkWidth,
-          height: itemMarkHeight,
-          fill: color
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsText.ChartsText, {
-          style: labelStyle,
-          text: label,
-          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
-          y: 0
-        })]
-      }, id))
+      children: itemsWithPosition.map((item, i) => /*#__PURE__*/(0, _react.createElement)(_ChartsLegendItem.ChartsLegendItem, (0, _extends2.default)({}, item, {
+        key: item.id,
+        gapX: gapX,
+        gapY: gapY,
+        legendWidth: legendWidth,
+        itemMarkHeight: itemMarkHeight,
+        itemMarkWidth: itemMarkWidth,
+        markGap: markGap,
+        labelStyle: labelStyle,
+        classes: classes,
+        onClick: onItemClick ? e => onItemClick(e, i) : undefined
+      })))
     })
   });
 }

package/node/ChartsLegend/PiecewiseColorLegend.js

@@ -1,6 +1,8 @@
 "use strict";
+'use client';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +15,7 @@ var _useAxis = require("./useAxis");
 var _LegendPerItem = require("./LegendPerItem");
 var _notNull = require("../internals/notNull");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
-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 && {}.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 _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
 function defaultLabelFormatter(params) {
   if (params.min === null) {
     return `<${params.formattedMax}`;
@@ -25,13 +25,21 @@ function defaultLabelFormatter(params) {
   }
   return `${params.formattedMin}-${params.formattedMax}`;
 }
+const piecewiseColorContextBuilder = context => ({
+  type: 'piecewiseColor',
+  color: context.color,
+  label: context.label,
+  maxValue: context.maxValue,
+  minValue: context.minValue
+});
 function PiecewiseColorLegend(props) {
   const {
       axisDirection,
       axisId,
       hideFirst,
       hideLast,
-      labelFormatter = defaultLabelFormatter
+      labelFormatter = defaultLabelFormatter,
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const axisItem = (0, _useAxis.useAxis)({
@@ -52,30 +60,34 @@ function PiecewiseColorLegend(props) {
     if (hideFirst && isFirst || hideLast && isLast) {
       return null;
     }
-    const label = labelFormatter((0, _extends2.default)({}, index === 0 ? {
+    const data = (0, _extends2.default)({}, isFirst ? {
       min: null,
       formattedMin: null
     } : {
       min: colorMap.thresholds[index - 1],
       formattedMin: formattedLabels[index - 1]
-    }, index === colorMap.colors.length - 1 ? {
+    }, isLast ? {
       max: null,
       formattedMax: null
     } : {
       max: colorMap.thresholds[index],
       formattedMax: formattedLabels[index]
-    }));
+    });
+    const label = labelFormatter(data);
     if (label === null) {
       return null;
     }
     return {
       id: label,
       color,
-      label
+      label,
+      minValue: data.min,
+      maxValue: data.max
     };
   }).filter(_notNull.notNull);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LegendPerItem.LegendPerItem, (0, _extends2.default)({}, other, {
-    itemsToDisplay: itemsToDisplay
+    itemsToDisplay: itemsToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
@@ -102,11 +114,6 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * The default depends on the chart.
    */
   direction: _propTypes.default.oneOf(['column', 'row']).isRequired,
-  /**
-   * Set to true to hide the legend.
-   * @default false
-   */
-  hidden: _propTypes.default.bool,
   /**
    * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
    * @default false
@@ -148,6 +155,13 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * @default 5
    */
   markGap: _propTypes.default.number,
+  /**
+   * Callback fired when a legend item is clicked.
+   * @param {React.MouseEvent<SVGRectElement, MouseEvent>} event The click event.
+   * @param {PiecewiseColorLegendItemContext} legendItem The legend item data.
+   * @param {number} index The index of the clicked legend item.
+   */
+  onItemClick: _propTypes.default.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.

package/node/ChartsLegend/chartsLegendClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getLegendUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiChartsLegend', slot);
 }
-const legendClasses = exports.legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'mark', 'label', 'column', 'row']);
+const legendClasses = exports.legendClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsLegend', ['root', 'series', 'itemBackground', 'mark', 'label', 'column', 'row']);

package/node/ChartsLegend/legendItemsPlacement.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });

package/node/ChartsLegend/useAxis.js

@@ -1,5 +1,7 @@
 "use strict";
+'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,8 +9,6 @@ exports.useAxis = useAxis;
 var React = _interopRequireWildcard(require("react"));
 var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useCartesianContext = require("../context/CartesianProvider/useCartesianContext");
-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 && {}.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; }
 /**
  * Helper to select an axis definition according to its direction and id.
  */