@mui/x-charts 7.16.0 → 7.17.0

package/BarChart/BarChart.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';
@@ -144,6 +146,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,

package/BarChart/BarElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "dataIndex", "classes", "color", "slots", "slotProps", "style", "onClick"];

package/BarChart/BarLabel/BarLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["seriesId", "dataIndex", "color", "isFaded", "isHighlighted", "classes"];

package/BarChart/BarPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["skipAnimation", "onItemClick", "borderRadius", "barLabel"];

package/BarChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/BarChart/useBarChartProps.js

@@ -1,3 +1,5 @@
+'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"];

package/CHANGELOG.md

@@ -3,6 +3,93 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.17.0
+
+_Sep 13, 2024_
+
+We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Charts performance improvement
+- 🧑‍💻 New Data Grid [custom columns demo](https://mui.com/x/react-data-grid/custom-columns/#full-example)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Hungarian (hu-HU) locale on the Data Grid
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.17.0`
+
+- [DataGrid] Add "does not equal" and "does not contain" filter operators (#14489) @KenanYusuf
+- [DataGrid] Add demo to the "Custom columns" page that does not use generator (#13695) @arminmeh
+- [DataGrid] Fix Voice Over reading the column name twice (#14482) @arminmeh
+- [DataGrid] Fix bug in CRUD example (#14513) @michelengelen
+- [DataGrid] Fix failing jsdom tests caused by `:has()` selectors (#14559) @KenanYusuf
+- [DataGrid] Refactor string operator filter functions (#14564) @KenanYusuf
+- [l10n] Improve Hungarian (hu-HU) locale (#14506) @ntamas
+
+#### `@mui/x-data-grid-pro@7.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.17.0`.
+
+#### `@mui/x-data-grid-premium@7.17.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.17.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.17.0`
+
+- [fields] Improve `useSplitFieldProps` and make it public (#14514) @flaviendelangle
+- [pickers] Improve clear action label (#14243) @oliviertassinari
+- [pickers] Add `"use client"` directive to every public component and hook (#14562) @flaviendelangle
+- [pickers] Allow custom fields to validate the value (#14486) @flaviendelangle
+- [pickers] Stop using utils in locales (#14505) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@7.17.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.17.0`, plus:
+
+- [DateRangePicker] Fix `currentMonthCalendarPosition` not scrolling to future sibling (#14442) @GMchris
+
+### Charts
+
+#### `@mui/x-charts@7.17.0`
+
+- [charts] Add `"use client"` directive to every public component and hook (#14578) @flaviendelangle
+- [charts] Allow `onItemClick` on the `Legend` component (#14231) @JCQuintas
+- [charts] Fix `onAxisClick` with `layout='horizontal'` (#14547) @alexfauquette
+- [charts] Replace `path` with `circle` for performance improvement (#14518) @alexfauquette
+
+#### `@mui/x-charts-pro@7.0.0-beta.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.17.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.17.0`
+
+- [TreeView] Make `useTreeItem2` stable (#14498) @flaviendelangle
+
+### Docs
+
+- [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle
+- [docs] Fix broken redirection to MUI X v5 @oliviertassinari
+- [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas
+- [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini
+- [docs] Match title with blog posts @oliviertassinari
+
+### Core
+
+- [core] Move warning methods to `@mui/x-internals` (#14528) @k-rajat19
+- [core] Sync with core release flow @oliviertassinari
+- [code-infra] Fix charts benchmark workflow (#14573) @JCQuintas
+- [docs-infra] Type interface API pages (#14138) @alexfauquette
+- [infra] Create `ESLint plugins` renovate group (#14574) @LukasTy
+- [license] Clean-up terminology to match codebase (#14531) @oliviertassinari
+- [test] Remove dead `act()` logic (#14529) @oliviertassinari
+
 ## 7.16.0
 
 _Sep 5, 2024_

package/ChartContainer/ChartContainer.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';

package/ChartContainer/useChartContainerProps.js

@@ -1,3 +1,5 @@
+'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"];

package/ChartContainer/useDefaultizeAxis.js

@@ -1,3 +1,5 @@
+'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/index.js";

package/ChartsAxis/ChartsAxis.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';

package/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';

package/ChartsClipPath/ChartsClipPath.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';

package/ChartsGrid/ChartsGrid.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["vertical", "horizontal"];

package/ChartsLegend/ChartsLegend.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps"];
@@ -21,7 +23,8 @@ const useUtilityClasses = ownerState => {
     root: ['root', direction],
     mark: ['mark'],
     label: ['label'],
-    series: ['series']
+    series: ['series'],
+    itemBackground: ['itemBackground']
   };
   return composeClasses(slots, getLegendUtilityClass, classes);
 };
@@ -108,6 +111,13 @@ process.env.NODE_ENV !== "production" ? ChartsLegend.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.

package/ChartsLegend/ChartsLegendItem.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ChartsTextStyle } from '../ChartsText';
+import { LegendItemParams } from './chartsLegend.types';
+import { ChartsLegendClasses } from './chartsLegendClasses';
+export interface ChartsLegendItemProps extends LegendItemParams {
+    positionY: number;
+    label: string;
+    positionX: number;
+    innerHeight: number;
+    innerWidth: number;
+    color: string;
+    gapX: number;
+    gapY: number;
+    legendWidth: number;
+    itemMarkHeight: number;
+    itemMarkWidth: number;
+    markGap: number;
+    labelStyle: ChartsTextStyle;
+    classes?: Omit<Partial<ChartsLegendClasses>, 'column' | 'row' | 'label'>;
+    onClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>) => void;
+}
+/**
+ * @ignore - internal component.
+ */
+declare function ChartsLegendItem(props: ChartsLegendItemProps): React.JSX.Element;
+export { ChartsLegendItem };

package/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/ChartsLegend/ContinuousColorLegend.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';

package/ChartsLegend/DefaultChartsLegend.d.ts

@@ -2,13 +2,21 @@ import * as React from 'react';
 import { FormattedSeries } from '../context/SeriesProvider';
 import { LegendPerItemProps } from './LegendPerItem';
 import { DrawingArea } from '../context/DrawingProvider';
-export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDisplay'> {
+import { SeriesLegendItemContext } from './chartsLegend.types';
+export interface LegendRendererProps extends Omit<LegendPerItemProps, 'itemsToDisplay' | 'onItemClick'> {
     series: FormattedSeries;
     seriesToDisplay: LegendPerItemProps['itemsToDisplay'];
     /**
      * @deprecated Use the `useDrawingArea` hook instead.
      */
     drawingArea: Omit<DrawingArea, 'isPointInside'>;
+    /**
+     * 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?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, legendItem: SeriesLegendItemContext, index: number) => void;
     /**
      * Set to true to hide the legend.
      * @default false

package/ChartsLegend/DefaultChartsLegend.js

@@ -1,21 +1,32 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["drawingArea", "seriesToDisplay", "hidden"];
+const _excluded = ["drawingArea", "seriesToDisplay", "hidden", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 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,
-      hidden
+      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 = {
@@ -73,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.
@@ -95,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 };

package/ChartsLegend/LegendPerItem.d.ts

@@ -55,6 +55,7 @@ export interface LegendPerItemProps extends DefaultizedProps<LegendPlacement, ke
      * @default 10
      */
     padding?: number | Partial<CardinalDirections<number>>;
+    onItemClick?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, index: number) => void;
 }
 /**
  * Internal component to display an array of items as a legend.

package/ChartsLegend/LegendPerItem.js

@@ -1,15 +1,17 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import { ChartsText } from "../ChartsText/index.js";
 import { getWordsByLines } from "../internals/getWordsByLines.js";
 import { legendItemPlacements } from "./legendItemsPlacement.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartsLegendItem } from "./ChartsLegendItem.js";
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 export const ChartsLegendRoot = styled('g', {
   name: 'MuiChartsLegend',
   slot: 'Root',
@@ -51,10 +53,10 @@ export function LegendPerItem(props) {
     markGap = 5,
     itemGap = 10,
     padding: paddingProps = 10,
-    labelStyle: inLabelStyle
+    labelStyle: inLabelStyle,
+    onItemClick
   } = props;
   const theme = useTheme();
-  const isRtl = useRtl();
   const drawingArea = useDrawingArea();
   const labelStyle = React.useMemo(() => _extends({}, theme.typography.subtitle1, {
     color: 'inherit',
@@ -110,29 +112,18 @@ export function LegendPerItem(props) {
   return /*#__PURE__*/_jsx(NoSsr, {
     children: /*#__PURE__*/_jsx(ChartsLegendRoot, {
       className: classes?.root,
-      children: itemsWithPosition.map(({
-        id,
-        label,
-        color,
-        positionX,
-        positionY
-      }) => /*#__PURE__*/_jsxs("g", {
-        className: classes?.series,
-        transform: `translate(${gapX + (isRtl ? legendWidth - positionX : positionX)} ${gapY + positionY})`,
-        children: [/*#__PURE__*/_jsx("rect", {
-          className: classes?.mark,
-          x: isRtl ? -itemMarkWidth : 0,
-          y: -itemMarkHeight / 2,
-          width: itemMarkWidth,
-          height: itemMarkHeight,
-          fill: color
-        }), /*#__PURE__*/_jsx(ChartsText, {
-          style: labelStyle,
-          text: label,
-          x: (isRtl ? -1 : 1) * (itemMarkWidth + markGap),
-          y: 0
-        })]
-      }, id))
+      children: itemsWithPosition.map((item, i) => /*#__PURE__*/_createElement(ChartsLegendItem, _extends({}, 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/ChartsLegend/PiecewiseColorLegend.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { ColorLegendSelector, PiecewiseLabelFormatterParams } from './legend.types';
 import { LegendPerItemProps } from './LegendPerItem';
-export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<LegendPerItemProps, 'itemsToDisplay'> {
+import { PiecewiseColorLegendItemContext } from './chartsLegend.types';
+export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<LegendPerItemProps, 'itemsToDisplay' | 'onItemClick'> {
     /**
      * Hide the first item of the legend, corresponding to the [-infinity, min] piece.
      * @default false
@@ -18,6 +19,13 @@ export interface PiecewiseColorLegendProps extends ColorLegendSelector, Omit<Leg
      * @returns {string|null} The displayed label, or `null` to skip the item.
      */
     labelFormatter?: (params: PiecewiseLabelFormatterParams) => string | null;
+    /**
+     * 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?: (event: React.MouseEvent<SVGRectElement, MouseEvent>, legendItem: PiecewiseColorLegendItemContext, index: number) => void;
 }
 declare function PiecewiseColorLegend(props: PiecewiseColorLegendProps): React.JSX.Element | null;
 declare namespace PiecewiseColorLegend {

package/ChartsLegend/PiecewiseColorLegend.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter"];
+const _excluded = ["axisDirection", "axisId", "hideFirst", "hideLast", "labelFormatter", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useAxis } from "./useAxis.js";
@@ -16,13 +18,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 = _objectWithoutPropertiesLoose(props, _excluded);
   const axisItem = useAxis({
@@ -43,30 +53,34 @@ function PiecewiseColorLegend(props) {
     if (hideFirst && isFirst || hideLast && isLast) {
       return null;
     }
-    const label = labelFormatter(_extends({}, index === 0 ? {
+    const data = _extends({}, 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);
   return /*#__PURE__*/_jsx(LegendPerItem, _extends({}, other, {
-    itemsToDisplay: itemsToDisplay
+    itemsToDisplay: itemsToDisplay,
+    onItemClick: onItemClick ? (e, i) => onItemClick(e, piecewiseColorContextBuilder(itemsToDisplay[i]), i) : undefined
   }));
 }
 process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
@@ -134,6 +148,13 @@ process.env.NODE_ENV !== "production" ? PiecewiseColorLegend.propTypes = {
    * @default 5
    */
   markGap: PropTypes.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.func,
   /**
    * Legend padding (in px).
    * Can either be a single number, or an object with top, left, bottom, right properties.