@mui/x-charts 7.16.0 → 7.18.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,
@@ -193,6 +196,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

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,186 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.18.0
+
+_Sep 20, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Support [Row spanning](https://mui.com/x/react-data-grid/row-spanning/) on the Data Grid that automatically merges the consecutive cells in a column based on the cell value
+
+  <img width="600" src="https://github.com/user-attachments/assets/d32ec936-d238-4c92-9e1a-af6788d74cdf" alt="data grid row spanning" />
+
+- ⏰ Support `date-fns` v4 (#14673) @LukasTy
+- 🎉 Add option for Pickers to change the order of displayed years (#11780) @thomasmoon
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.18.0`
+
+- [DataGrid] Add default reset value in row edit mode (#14050) @michelengelen
+- [DataGrid] Add `columnGroupHeaderHeight` prop for sizing column group headers (#14637) @KenanYusuf
+- [DataGrid] Fix `document` reference when the grid is rendered in a popup window (#14649) @arminmeh
+- [DataGrid] Remove `minFirstColumn` from `GetHeadersParams` interface (#14450) @k-rajat19
+- [DataGrid] Row spanning (#14124) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@7.18.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.18.0`, plus:
+
+- [DataGridPro] Fix `onRowsScrollEnd` being triggered instantly when bottom pinned row is present (#14602) @arminmeh
+- [DataGridPro] Fix header filters rendering issue for `isEmpty` and `isNotEmpty` filter operators (#14493) @k-rajat19
+- [DataGridPro] Fix pinned columns in RTL mode (#14586) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.18.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.18.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.18.0`
+
+- [pickers] Add option to change the order of displayed years (#11780) @thomasmoon
+- [pickers] Support `date-fns` v4 (#14673) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.18.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.18.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.18.0`
+
+- [charts] Add a `PolarProvider` to manage polar axes (#14642) @alexfauquette
+- [charts] Fix `LineChart` animation being stuck with initial drawing area value (#14553) @JCQuintas
+- [charts] Fix legend slot typing (#14657) @alexfauquette
+- [charts] Pass the axis index to extremum getter (#14641) @alexfauquette
+- [charts] Provide hooks to create custom tooltip (#14377) @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.18.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.18.0`
+
+- [TreeView] Add `"use client"` directive to every public component and hook (#14579) @flaviendelangle
+
+### Docs
+
+- [docs] Add `groupingValueGetter` callout in column definition docs (#14599) @michelengelen
+- [docs] Clean v6 => v7 migration guide (#14652) @flaviendelangle
+- [docs] Copy `vale-action.yml` from main repo @oliviertassinari
+- [docs] Edit the Pickers Getting started doc (#14555) @samuelsycamore
+- [docs] Fix TypeScript capitalization @oliviertassinari
+- [docs] Fix Vale error @oliviertassinari
+- [docs] Make the migration guide diff a bit easier to read @oliviertassinari
+- [docs] Report Vale at warning level (#14660) @oliviertassinari
+- [docs] Warn about the `valueGetter` and `valueFormatter` signature change (#14613) @cherniavskii
+- [docs] Polish code formatting (#14603) @oliviertassinari
+- [test] Spy on `observe` method to avoid flaky wait for a callback (#14640) @arminmeh
+
+### Core
+
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix failing CI on `master` (#14644) @cherniavskii
+- [core] Fix `package.json` repository rule @oliviertassinari
+- [core] MUI X repository moved to a new location @oliviertassinari
+- [docs-infra] Strengthen CSP (#14581) @oliviertassinari
+- [license] Finish renaming of LicensingModel (#14615) @oliviertassinari
+
+## 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_
@@ -108,7 +288,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
 
 - 💫 Support Material UI v6 (`@mui/material@6`) peer dependency (#14142) @cherniavskii
 
-You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
+You can now use MUI X components with either v5 or v6 of `@mui/material` package 🎉
 
 - 🐞 Bugfixes
 
@@ -153,7 +333,7 @@ Same changes as in `@mui/x-charts@7.15.0`, plus:
 
 - [docs] Fix sentence case `h2` @oliviertassinari
 - [docs] Clarify contribution guide references @oliviertassinari
-- [docs] Fix Stack Overflow issue canned response @oliviertassinari
+- [docs] Fix Stack Overflow issue canned response @oliviertassinari
 - [docs] Fix outdated link to support page @oliviertassinari
 - [docs] Fix use of Material UI @oliviertassinari
 - [docs] Update deprecated props in docs (#14295) @JCQuintas
@@ -411,7 +591,7 @@ The [Pro plan](https://mui.com/x/introduction/licensing/#pro-plan) is receiving
 
 As always, every feature released as part of the MIT plan will remain free and MIT licensed forever.
 
-This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
+This expansion of the Pro plan comes with some adjustments to our pricing strategy. Learn more about those in the [Upcoming changes to MUI X pricing in 2024](https://mui.com/blog/mui-x-sep-2024-price-update/) blog post.
 
 ### Highlights
 
@@ -476,7 +656,7 @@ Same changes as in `@mui/x-date-pickers@7.12.0`.
 #### `@mui/x-charts@7.12.0`
 
 - [charts] Fix incorrect `axisId` prop being allowed in xAxis/yAxis config. Use `id` instead. (#13986) @JCQuintas
-- [charts] Use vendor to have Common JS bundle working out of the box (#13608) @alexfauquette
+- [charts] Use vendor to have CommonJS bundle working out of the box (#13608) @alexfauquette
 - [charts] Divide the `SeriesProvider` to use in filtering (#14026) @JCQuintas
 
 ### Tree View

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.d.ts

@@ -7,10 +7,10 @@ export interface ChartsLegendSlots {
      * Custom rendering of the legend.
      * @default DefaultChartsLegend
      */
-    legend?: React.JSXElementConstructor<ChartsLegendPropsBase>;
+    legend?: React.JSXElementConstructor<LegendRendererProps>;
 }
 export interface ChartsLegendSlotProps {
-    legend?: Partial<ChartsLegendPropsBase>;
+    legend?: Partial<LegendRendererProps>;
 }
 export interface ChartsLegendProps extends ChartsLegendPropsBase {
     /**

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
+      })))
     })
   });
 }