@mui/x-charts 7.15.0 → 7.17.0

package/modern/BarChart/useBarChartProps.js

@@ -1,8 +1,10 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
 import useId from '@mui/utils/useId';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.

package/modern/ChartContainer/ChartContainer.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from '../context/DrawingProvider';
-import { SeriesProvider } from '../context/SeriesProvider';
-import { InteractionProvider } from '../context/InteractionProvider';
-import { ChartsSurface } from '../ChartsSurface';
-import { CartesianProvider } from '../context/CartesianProvider';
-import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
-import { HighlightedProvider, ZAxisContextProvider } from '../context';
-import { PluginProvider } from '../context/PluginProvider';
-import { useChartContainerProps } from './useChartContainerProps';
+import { DrawingProvider } from "../context/DrawingProvider.js";
+import { SeriesProvider } from "../context/SeriesProvider/index.js";
+import { InteractionProvider } from "../context/InteractionProvider.js";
+import { ChartsSurface } from "../ChartsSurface/index.js";
+import { CartesianProvider } from "../context/CartesianProvider/index.js";
+import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
+import { HighlightedProvider, ZAxisContextProvider } from "../context/index.js";
+import { PluginProvider } from "../context/PluginProvider/index.js";
+import { useChartContainerProps } from "./useChartContainerProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {

package/modern/ChartContainer/index.js

@@ -1 +1 @@
-export * from './ChartContainer';
+export * from "./ChartContainer.js";

package/modern/ChartContainer/useChartContainerProps.js

@@ -1,10 +1,12 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children"];
 import * as React from 'react';
 import useForkRef from '@mui/utils/useForkRef';
-import { useDefaultizeAxis } from './useDefaultizeAxis';
-import { useReducedMotion } from '../hooks/useReducedMotion';
+import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+import { useReducedMotion } from "../hooks/useReducedMotion.js";
 export const useChartContainerProps = (props, ref) => {
   const {
       width,

package/modern/ChartContainer/useDefaultizeAxis.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '../constants';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 const defaultizeAxis = (inAxis, dataset, axisName) => {
   const DEFAULT_AXIS_KEY = axisName === 'x' ? DEFAULT_X_AXIS_KEY : DEFAULT_Y_AXIS_KEY;
   return [...(inAxis?.map((axis, index) => _extends({

package/modern/ChartsAxis/ChartsAxis.js

@@ -1,9 +1,11 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { ChartsXAxis } from '../ChartsXAxis';
-import { ChartsYAxis } from '../ChartsYAxis';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { ChartsXAxis } from "../ChartsXAxis/index.js";
+import { ChartsYAxis } from "../ChartsYAxis/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getAxisId = (propsValue, defaultAxisId) => {
   if (propsValue == null) {

package/modern/ChartsAxis/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsAxis';
-export * from './axisClasses';
+export * from "./ChartsAxis.js";
+export * from "./axisClasses.js";

package/modern/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -5,10 +7,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { styled } from '@mui/material/styles';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { isBandScale } from '../internals/isBandScale';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { isBandScale } from "../internals/isBandScale.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function getAxisHighlightUtilityClass(slot) {
   return generateUtilityClass('MuiChartsAxisHighlight', slot);

package/modern/ChartsAxisHighlight/index.js

@@ -1 +1 @@
-export * from './ChartsAxisHighlight';
+export * from "./ChartsAxisHighlight.js";

package/modern/ChartsClipPath/ChartsClipPath.js

@@ -1,7 +1,9 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * API:

package/modern/ChartsClipPath/index.js

@@ -1 +1 @@
-export * from './ChartsClipPath';
+export * from "./ChartsClipPath.js";

package/modern/ChartsGrid/ChartsGrid.js

@@ -1,35 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["vertical", "horizontal"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, useThemeProps } from '@mui/material/styles';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { useTicks } from '../hooks/useTicks';
-import { getChartsGridUtilityClass, chartsGridClasses } from './chartsGridClasses';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useThemeProps } from '@mui/material/styles';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { getChartsGridUtilityClass } from "./chartsGridClasses.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { GridRoot } from "./styledCommonents.js";
+import { ChartsGridVertical } from "./ChartsVerticalGrid.js";
+import { ChartsGridHorizontal } from "./ChartsHorizontalGrid.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [{
-    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
-  }, {
-    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
-  }, styles.root]
-})({});
-const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));
 const useUtilityClasses = ({
   classes
 }) => {
@@ -67,49 +51,19 @@ function ChartsGrid(inProps) {
     yAxisIds
   } = useCartesianContext();
   const classes = useUtilityClasses(props);
-  const horizontalAxisId = yAxisIds[0];
-  const verticalAxisId = xAxisIds[0];
-  const {
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  } = xAxis[verticalAxisId];
-  const {
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  } = yAxis[horizontalAxisId];
-  const xTicks = useTicks({
-    scale: xScale,
-    tickNumber: xTickNumber,
-    tickInterval: xTickInterval
-  });
-  const yTicks = useTicks({
-    scale: yScale,
-    tickNumber: yTickNumber,
-    tickInterval: yTickInterval
-  });
+  const horizontalAxis = yAxis[yAxisIds[0]];
+  const verticalAxis = xAxis[xAxisIds[0]];
   return /*#__PURE__*/_jsxs(GridRoot, _extends({}, other, {
     className: classes.root,
-    children: [vertical && xTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
-      x1: offset,
-      x2: offset,
-      className: classes.verticalLine
-    }, `vertical-${formattedValue}`)), horizontal && yTicks.map(({
-      formattedValue,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: offset,
-      y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
-      className: classes.horizontalLine
-    }, `horizontal-${formattedValue}`))]
+    children: [vertical && /*#__PURE__*/_jsx(ChartsGridVertical, {
+      axis: verticalAxis,
+      drawingArea: drawingArea,
+      classes: classes
+    }), horizontal && /*#__PURE__*/_jsx(ChartsGridHorizontal, {
+      axis: horizontalAxis,
+      drawingArea: drawingArea,
+      classes: classes
+    })]
   }));
 }
 process.env.NODE_ENV !== "production" ? ChartsGrid.propTypes = {

package/modern/ChartsGrid/ChartsHorizontalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridHorizontal(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const yTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: yTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: offset,
+      y2: offset,
+      x1: drawingArea.left,
+      x2: drawingArea.left + drawingArea.width,
+      className: classes.horizontalLine
+    }, `horizontal-${formattedValue}`))
+  });
+}

package/modern/ChartsGrid/ChartsVerticalGrid.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { useTicks } from "../hooks/useTicks.js";
+import { GridLine } from "./styledCommonents.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+export function ChartsGridVertical(props) {
+  const {
+    axis,
+    drawingArea,
+    classes
+  } = props;
+  const {
+    scale,
+    tickNumber,
+    tickInterval
+  } = axis;
+  const xTicks = useTicks({
+    scale,
+    tickNumber,
+    tickInterval
+  });
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: xTicks.map(({
+      formattedValue,
+      offset
+    }) => /*#__PURE__*/_jsx(GridLine, {
+      y1: drawingArea.top,
+      y2: drawingArea.top + drawingArea.height,
+      x1: offset,
+      x2: offset,
+      className: classes.verticalLine
+    }, `vertical-${formattedValue}`))
+  });
+}

package/modern/ChartsGrid/index.js

@@ -1,2 +1,2 @@
-export * from './ChartsGrid';
-export * from './chartsGridClasses';
+export * from "./ChartsGrid.js";
+export * from "./chartsGridClasses.js";

package/modern/ChartsGrid/styledCommonents.js

@@ -0,0 +1,22 @@
+import { styled } from '@mui/material/styles';
+import { chartsGridClasses } from "./chartsGridClasses.js";
+export const GridRoot = styled('g', {
+  name: 'MuiChartsGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
+  }, {
+    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
+  }, styles.root]
+})({});
+export const GridLine = styled('line', {
+  name: 'MuiChartsGrid',
+  slot: 'Line',
+  overridesResolver: (props, styles) => styles.line
+})(({
+  theme
+}) => ({
+  stroke: (theme.vars || theme).palette.divider,
+  shapeRendering: 'crispEdges',
+  strokeWidth: 1
+}));

package/modern/ChartsLegend/ChartsLegend.js

@@ -1,14 +1,18 @@
+'use client';
+
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
-import { getSeriesToDisplay } from './utils';
-import { getLegendUtilityClass } from './chartsLegendClasses';
-import { DefaultChartsLegend } from './DefaultChartsLegend';
-import { useDrawingArea } from '../hooks';
-import { useSeries } from '../hooks/useSeries';
+import { getSeriesToDisplay } from "./utils.js";
+import { getLegendUtilityClass } from "./chartsLegendClasses.js";
+import { DefaultChartsLegend } from "./DefaultChartsLegend.js";
+import { useDrawingArea } from "../hooks/index.js";
+import { useSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -19,31 +23,31 @@ const useUtilityClasses = ownerState => {
     root: ['root', direction],
     mark: ['mark'],
     label: ['label'],
-    series: ['series']
+    series: ['series'],
+    itemBackground: ['itemBackground']
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
-const defaultProps = {
-  position: {
-    horizontal: 'middle',
-    vertical: 'top'
-  },
-  direction: 'row'
-};
 function ChartsLegend(inProps) {
   const props = useThemeProps({
-    props: _extends({}, defaultProps, inProps),
+    props: inProps,
     name: 'MuiChartsLegend'
   });
+  const defaultizedProps = _extends({
+    direction: 'row'
+  }, props, {
+    position: _extends({
+      horizontal: 'middle',
+      vertical: 'top'
+    }, props.position)
+  });
   const {
-    position,
-    direction,
-    hidden,
-    slots,
-    slotProps
-  } = props;
+      slots,
+      slotProps
+    } = defaultizedProps,
+    other = _objectWithoutPropertiesLoose(defaultizedProps, _excluded);
   const theme = useTheme();
-  const classes = useUtilityClasses(_extends({}, props, {
+  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
     theme
   }));
   const drawingArea = useDrawingArea();
@@ -53,15 +57,12 @@ function ChartsLegend(inProps) {
   const chartLegendRenderProps = useSlotProps({
     elementType: ChartLegendRender,
     externalSlotProps: slotProps?.legend,
-    additionalProps: {
-      position,
-      direction,
+    additionalProps: _extends({}, other, {
       classes,
       drawingArea,
       series,
-      hidden,
       seriesToDisplay
-    },
+    }),
     ownerState: {}
   });
   return /*#__PURE__*/_jsx(ChartLegendRender, _extends({}, chartLegendRenderProps));
@@ -85,6 +86,49 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.propTypes = {
    * @default false
    */
   hidden: PropTypes.bool,
+  /**
+   * Space between two legend items (in px).
+   * @default 10
+   */
+  itemGap: PropTypes.number,
+  /**
+   * Height of the item mark (in px).
+   * @default 20
+   */
+  itemMarkHeight: PropTypes.number,
+  /**
+   * Width of the item mark (in px).
+   * @default 20
+   */
+  itemMarkWidth: PropTypes.number,
+  /**
+   * Style applied to legend labels.
+   * @default theme.typography.subtitle1
+   */
+  labelStyle: PropTypes.object,
+  /**
+   * Space between the mark and the label (in px).
+   * @default 5
+   */
+  markGap: PropTypes.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.func,
+  /**
+   * Legend padding (in px).
+   * Can either be a single number, or an object with top, left, bottom, right properties.
+   * @default 10
+   */
+  padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    bottom: PropTypes.number,
+    left: PropTypes.number,
+    right: PropTypes.number,
+    top: PropTypes.number
+  })]),
   /**
    * The position of the legend.
    */

package/modern/ChartsLegend/ChartsLegendItem.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import clsx from 'clsx';
+import { useRtl } from '@mui/system/RtlProvider';
+import { ChartsText } from "../ChartsText/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @ignore - internal component.
+ */
+function ChartsLegendItem(props) {
+  const isRTL = useRtl();
+  const {
+    id,
+    positionY,
+    label,
+    positionX,
+    innerHeight,
+    innerWidth,
+    legendWidth,
+    color,
+    gapX,
+    gapY,
+    itemMarkHeight,
+    itemMarkWidth,
+    markGap,
+    labelStyle,
+    classes,
+    onClick
+  } = props;
+  return /*#__PURE__*/_jsxs("g", {
+    className: clsx(classes?.series, `${classes?.series}-${id}`),
+    transform: `translate(${gapX + (isRTL ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
+    children: [/*#__PURE__*/_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__*/_jsx("rect", {
+      className: classes?.mark,
+      x: isRTL ? -itemMarkWidth : 0,
+      y: -itemMarkHeight / 2,
+      width: itemMarkWidth,
+      height: itemMarkHeight,
+      fill: color,
+      style: {
+        pointerEvents: 'none'
+      }
+    }), /*#__PURE__*/_jsx(ChartsText, {
+      style: _extends({
+        pointerEvents: 'none'
+      }, labelStyle),
+      text: label,
+      x: (isRTL ? -1 : 1) * (itemMarkWidth + markGap),
+      y: 0
+    })]
+  });
+}
+export { ChartsLegendItem };

package/modern/ChartsLegend/ContinuousColorLegend.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import ChartsContinuousGradient from '../internals/components/ChartsAxesGradients/ChartsContinuousGradient';
-import { useChartId, useDrawingArea } from '../hooks';
-import { getScale } from '../internals/getScale';
-import { getPercentageValue } from '../internals/getPercentageValue';
-import { ChartsText } from '../ChartsText';
-import { getStringSize } from '../internals/domUtils';
-import { useAxis } from './useAxis';
+import ChartsContinuousGradient from "../internals/components/ChartsAxesGradients/ChartsContinuousGradient.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
+import { getScale } from "../internals/getScale.js";
+import { getPercentageValue } from "../internals/getPercentageValue.js";
+import { ChartsText } from "../ChartsText/index.js";
+import { getStringSize } from "../internals/domUtils.js";
+import { useAxis } from "./useAxis.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getPositionOffset(position, legendBox, svgBox) {
   let offsetX = 0;

package/modern/ChartsLegend/DefaultChartsLegend.js

@@ -1,17 +1,32 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["drawingArea", "seriesToDisplay"];
+const _excluded = ["drawingArea", "seriesToDisplay", "hidden", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { LegendPerItem } from './LegendPerItem';
+import { LegendPerItem } from "./LegendPerItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+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 = _objectWithoutPropertiesLoose(props, _excluded);
+  if (hidden) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: seriesToDisplay
+    itemsToDisplay: seriesToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, seriesContextBuilder(seriesToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
@@ -69,6 +84,13 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.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.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.
@@ -91,7 +113,11 @@ process.env.NODE_ENV !== "production" ? DefaultChartsLegend.propTypes = {
   seriesToDisplay: PropTypes.arrayOf(PropTypes.shape({
     color: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-    label: PropTypes.string.isRequired
+    itemId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    label: PropTypes.string.isRequired,
+    maxValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    minValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
   })).isRequired
 } : void 0;
 export { DefaultChartsLegend };