@mui/x-charts-pro 8.14.0 → 8.15.0

package/BarChartPro/BarChartPro.js

@@ -125,6 +125,14 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * Defines the border radius of the bar element.
    */
   borderRadius: _propTypes.default.number,
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    preventHighlight: _propTypes.default.bool,
+    preventTooltip: _propTypes.default.bool
+  }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**

package/BarChartPro/BarChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'bar'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginSignatures>;

package/BarChartPro/BarChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.BAR_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/CHANGELOG.md

@@ -5,6 +5,208 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.15.0
+
+_Oct 23, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🖌️ Add new [`brush` charts interaction](https://mui.com/x/react-charts/brush/) for building custom behavior.
+  ![brush visualization example](https://github.com/user-attachments/assets/60c382a1-e418-4736-8dcb-1567c4e361e3)
+- ⚡️ Performance improvements for large bar charts
+- 🤖 Data Grid AI assistant can now [visualize the query results](https://mui.com/x/react-data-grid/ai-assistant/#data-visualization) by controlling the chart integration settings
+- 📦 DataGrid uses an internal MUI fork of ExcelJS that does not depend on vulnerable versions of NPM packages
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@ZagrebaAlex
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @prakhargupta1, @rita-codes, @siriwatknp, @arminmeh, @brijeshb42, @noraleonte
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.15.0`
+
+- [DataGrid] Fix `dataSource.fetchRows` API's return type (#20068) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.15.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@8.15.0`, plus:
+
+- [DataGridPro] Keep children in the tree after parent row is re-fetched with the data source (#19934) @arminmeh
+- [DataGridPro] Support scroll shadows customization (#19982) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@8.15.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@8.15.0`, plus:
+
+- [DataGridPremium] Use ExcelJS fork (#19796) @cherniavskii
+- [DataGridPremium] Support data visualization in AI Assistant (#19831) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.15.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.15.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@8.15.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.15.0`
+
+- [charts] Add `ChartsBrushOverlay` and allow brush configuration (#19956) @JCQuintas
+- [charts] Add `getStringSize` benchmark. Remove benchmarks from built package. (#19995) @bernardobelchior
+- [charts] Batch string size measurement (#19994) @bernardobelchior
+- [charts] Fix console issue (#20025) @JCQuintas
+- [charts] Fix is[ZoomFeature]Enabled type (#20058) @alexfauquette
+- [charts] Fix reference line middle spacing (#20004) @JCQuintas
+- [charts] Improve `getStringSize` and `batchMeasureStrings` performance (#19996) @bernardobelchior
+- [charts] Improve deep export script (#20007) @JCQuintas
+- [charts] Improve string measurement benchmarks (#19999) @bernardobelchior
+- [charts] Measure string sizes using SVG elements (#19981) @bernardobelchior
+- [l10n] Improve Greek (gr-GR) locale (#20060) @ZagrebaAlex
+
+#### `@mui/x-charts-pro@8.15.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-charts@8.15.0`, plus:
+
+- [charts-pro] Fix pan with `axis.reverse` (#20031) @JCQuintas
+
+#### `@mui/x-charts-premium@8.15.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-charts-pro@8.15.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.15.0`
+
+- [tree view] Multi character type-ahead (#19942) @noraleonte
+
+#### `@mui/x-tree-view-pro@8.15.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-tree-view@8.15.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add overview section for scatter chart and heatmap (#19888) @prakhargupta1
+- [docs] Add charts bell curve example (#20003) @JCQuintas
+- [docs] Add grouped multiple fields for Data Grid row grouping recipe (#19964) @siriwatknp
+- [docs] Add Data Grid loading state recipe (#19958) @siriwatknp
+
+### Core
+
+- [code-infra] Remove @mui/monorepo usage for react versioning (#19894) @Janpot
+- [code-infra] Remove invalid `environment: 'browser'` from vitest browser config (#19993) @bernardobelchior
+- [code-infra] Remove unused babel aliases (#19987) @Janpot
+- [code-infra] Turn on all testing-library eslint rules (#19946) @brijeshb42
+- [docs-infra] Fix broken hash link (#20062) @Janpot
+
+## 8.14.1
+
+_Oct 16, 2025_
+
+We'd like to extend a big thank you to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Charts have optimized data structures for closest point calculations — initial render times reduced by ~25% for 1,000+ data points, with greater gains at larger scales (#19790) @bernardobelchior
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@djpremier, @jacknot, @justdoit1897, @mellis481, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @noraleonte, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.14.1`
+
+- [DataGrid] Fix cell not rerendering on `isCellEditable` prop change (#19898) @cherniavskii
+- [DataGrid] Fix virtualizer memory leaks (#19886) @cherniavskii
+- [DataGrid] Fix tree data unable to deselect row for exclude model (#19846) @siriwatknp
+- [l10n] Improve Italian (it-IT) locale (#19322) @jacknot and (#19940) @justdoit1897
+
+#### `@mui/x-data-grid-pro@8.14.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-data-grid@8.14.1`, plus:
+
+- [DataGridPro] Clear cache before new request to the nested request queue after a row has been edited (#19873) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.14.1` [![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@8.14.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.14.1`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.14.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-date-pickers@8.14.1`.
+
+### Charts
+
+#### `@mui/x-charts@8.14.1`
+
+- [charts] Fix `minBarSize` when y-axis is reversed (#19932) @bernardobelchior
+- [charts] Fix bar chart border radius when axis is reversed (#19895) @bernardobelchior
+- [charts] Fix scatter chart `datasetKeys.id` not being optional (#19897) @bernardobelchior
+- [charts] Use more performant data structure for closest point (#19790) @bernardobelchior
+- [charts] Fix `GaugeValueArc` having wrong class (#19965) @bernardobelchior
+- [charts] Fix `undefined` path when highlight empty line chart axis (#19969) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.14.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@8.14.1`, plus:
+
+- [charts-pro] Add `highlighting` to Sankey chart (#19662) @JCQuintas
+
+#### `@mui/x-charts-premium@8.14.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.14.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.14.1`
+
+- [tree view] Do not forward the `ownerState` to the icon (#19772) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.14.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-tree-view@8.14.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.14.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add `'bumpX'` and `'bumpY'` curve types to the interpolation demo (#19676) @djpremier
+- [docs] Add scatter chart with linear regression demo (#19900) @bernardobelchior
+- [docs] Correctly describe Data Grid's row selection behavior (#19968) @arminmeh
+- [docs] Fix `isExpanded` type in tree view docs (#19092) @mellis481
+
+### Core
+
+- [code-infra] Disable Netlify cache plugin (#19950) @Janpot
+- [code-infra] Lint json through eslint (#19890) @Janpot
+- [docs-infra] Use published netlify cache plugin package (#19929) @brijeshb42
+
 ## 8.14.0
 
 _Oct 9, 2025_

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -18,7 +18,7 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc1OTk2ODAwMDAwMA==";
+const releaseInfo = "MTc2MTE3NzYwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/ChartsBrushOverlay/index.d.ts

@@ -0,0 +1 @@
+export * from '@mui/x-charts/ChartsBrushOverlay';

package/ChartsBrushOverlay/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsBrushOverlay = require("@mui/x-charts/ChartsBrushOverlay");
+Object.keys(_ChartsBrushOverlay).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsBrushOverlay[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsBrushOverlay[key];
+    }
+  });
+});

package/LineChartPro/LineChartPro.js

@@ -117,6 +117,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     x: _propTypes.default.oneOf(['band', 'line', 'none']),
     y: _propTypes.default.oneOf(['band', 'line', 'none'])
   }),
+  /**
+   * Configuration for the brush interaction.
+   */
+  brushConfig: _propTypes.default.shape({
+    enabled: _propTypes.default.bool,
+    preventHighlight: _propTypes.default.bool,
+    preventTooltip: _propTypes.default.bool
+  }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**

package/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { UseChartZAxisSignature, UseChartCartesianAxisSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartBrushSignature, ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartCartesianAxisSignature<'line'>, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginSignatures>;

package/LineChartPro/LineChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.LINE_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartCartesianAxis, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/SankeyChart/SankeyChart.d.ts

@@ -7,7 +7,7 @@ import { type SankeyChartPluginSignatures } from "./SankeyChart.plugins.js";
 import type { SankeySeriesType } from "./sankey.types.js";
 import type { SankeyChartSlotExtension } from "./sankeySlots.types.js";
 export type SankeySeries = MakeOptional<SankeySeriesType, 'type'>;
-export interface SankeyChartProps extends Omit<ChartContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation' | 'highlightedItem' | 'onHighlightChange'>, Omit<SankeyPlotProps, 'data'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, SankeyChartSlotExtension {
+export interface SankeyChartProps extends Omit<ChartContainerProProps<'sankey', SankeyChartPluginSignatures>, 'plugins' | 'series' | 'slotProps' | 'slots' | 'dataset' | 'hideLegend' | 'skipAnimation'>, Omit<SankeyPlotProps, 'data'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, SankeyChartSlotExtension {
   /**
    * The series to display in the Sankey chart.
    * A single object is expected.

package/SankeyChart/SankeyChart.js

@@ -101,6 +101,30 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: _propTypes.default.oneOfType([_propTypes.default.shape({
+    nodeId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    subType: _propTypes.default.oneOf([
+    /**
+     * Subtype to differentiate between node and link
+     */
+    'node']).isRequired,
+    type: _propTypes.default.oneOf(['sankey']).isRequired
+  }), _propTypes.default.shape({
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    sourceId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    subType: _propTypes.default.oneOf([
+    /**
+     * Subtype to differentiate between node and link
+     */
+    'link']).isRequired,
+    targetId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    type: _propTypes.default.oneOf(['sankey']).isRequired
+  })]),
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
@@ -127,6 +151,12 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   })]),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {SankeyHighlightItemData | null} highlightedItem The newly highlighted item.
+   */
+  onHighlightChange: _propTypes.default.func,
   /**
    * Callback fired when a sankey item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/SankeyChart/SankeyChart.plugins.d.ts

@@ -1,4 +1,5 @@
-import { ConvertSignaturesIntoPlugins, UseChartHighlightSignature, UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { ConvertSignaturesIntoPlugins, UseChartInteractionSignature } from '@mui/x-charts/internals';
 import { UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type SankeyChartPluginSignatures = [UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+import { type UseSankeyHighlightSignature } from "./plugins/index.js";
+export type SankeyChartPluginSignatures = [UseChartInteractionSignature, UseSankeyHighlightSignature, UseChartProExportSignature];
 export declare const SANKEY_CHART_PLUGINS: ConvertSignaturesIntoPlugins<SankeyChartPluginSignatures>;

package/SankeyChart/SankeyChart.plugins.js

@@ -6,4 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.SANKEY_CHART_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
-const SANKEY_CHART_PLUGINS = exports.SANKEY_CHART_PLUGINS = [_internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];
+var _plugins = require("./plugins");
+const SANKEY_CHART_PLUGINS = exports.SANKEY_CHART_PLUGINS = [_internals.useChartInteraction, _plugins.useSankeyHighlight, _useChartProExport.useChartProExport];

package/SankeyChart/SankeyLinkElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SeriesId } from '@mui/x-charts/internals';
-import { SankeyLayoutLink, type SankeyLinkIdentifierWithData } from "./sankey.types.js";
+import type { SankeyLayoutLink, SankeyLinkIdentifierWithData } from "./sankey.types.js";
 export interface SankeyLinkElementProps {
   /**
    * The series ID to which the link belongs

package/SankeyChart/SankeyLinkElement.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-charts/internals");
+var _plugins = require("./plugins");
+var _useSankeyHighlight = require("./plugins/useSankeyHighlight.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -22,6 +24,7 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     onClick,
     seriesId
   } = props;
+  const store = (0, _internals.useStore)();
   const identifier = {
     type: 'sankey',
     seriesId,
@@ -30,6 +33,8 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     sourceId: link.source.id,
     link
   };
+  const isHighlighted = (0, _internals.useSelector)(store, _plugins.selectorIsLinkHighlighted, [link]);
+  const isFaded = (0, _internals.useSelector)(store, _useSankeyHighlight.selectorIsSankeyItemFaded, [isHighlighted]);
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
@@ -37,15 +42,23 @@ const SankeyLinkElement = exports.SankeyLinkElement = /*#__PURE__*/React.forward
     onClick?.(event, identifier);
   });
   if (!link.path) {
-    return null; // No path defined, nothing to render
+    return null;
+  }
+  let finalOpacity = opacity;
+  if (isFaded) {
+    finalOpacity = opacity * 0.3;
+  } else if (isHighlighted) {
+    finalOpacity = Math.min(opacity * 1.2, 1);
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", (0, _extends2.default)({
     ref: ref,
     d: link.path,
     fill: link.color,
-    opacity: opacity,
+    opacity: finalOpacity,
     "data-link-source": link.source.id,
     "data-link-target": link.target.id,
+    "data-highlighted": isHighlighted || undefined,
+    "data-faded": isFaded || undefined,
     onClick: onClick ? handleClick : undefined,
     cursor: onClick ? 'pointer' : 'default'
   }, interactionProps));

package/SankeyChart/SankeyNodeElement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SeriesId } from '@mui/x-charts/internals';
-import { SankeyLayoutNode, type SankeyNodeIdentifierWithData } from "./sankey.types.js";
+import type { SankeyLayoutNode, SankeyNodeIdentifierWithData } from "./sankey.types.js";
 export interface SankeyNodeElementProps {
   /**
    * The series ID to which the node belongs

package/SankeyChart/SankeyNodeElement.js

@@ -12,6 +12,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _internals = require("@mui/x-charts/internals");
 var _styles = require("@mui/material/styles");
+var _plugins = require("./plugins");
+var _useSankeyHighlight = require("./plugins/useSankeyHighlight.selectors");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -24,6 +26,7 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
     seriesId
   } = props;
   const theme = (0, _styles.useTheme)();
+  const store = (0, _internals.useStore)();
   const x0 = node.x0 ?? 0;
   const y0 = node.y0 ?? 0;
   const x1 = node.x1 ?? 0;
@@ -43,12 +46,20 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
     nodeId: node.id,
     node
   };
+  const isHighlighted = (0, _internals.useSelector)(store, _plugins.selectorIsNodeHighlighted, [node]);
+  const isFaded = (0, _internals.useSelector)(store, _useSankeyHighlight.selectorIsSankeyItemFaded, [isHighlighted]);
 
   // Add interaction props for tooltips
   const interactionProps = (0, _internals.useInteractionItemProps)(identifier);
   const handleClick = (0, _useEventCallback.default)(event => {
     onClick?.(event, identifier);
   });
+  let opacity = 1;
+  if (isFaded) {
+    opacity = 0.3;
+  } else if (isHighlighted) {
+    opacity = 1;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
     ref: ref,
     "data-node": node.id,
@@ -58,9 +69,12 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
       width: nodeWidth,
       height: nodeHeight,
       fill: node.color,
+      opacity: opacity,
       onClick: onClick ? handleClick : undefined,
       cursor: onClick ? 'pointer' : 'default',
-      stroke: "none"
+      stroke: "none",
+      "data-highlighted": isHighlighted || undefined,
+      "data-faded": isFaded || undefined
     }, interactionProps)), showLabel && node.label && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
       x: labelX,
       y: (y0 + y1) / 2,
@@ -69,6 +83,7 @@ const SankeyNodeElement = exports.SankeyNodeElement = /*#__PURE__*/React.forward
       fontSize: theme.typography.caption.fontSize,
       fontFamily: theme.typography.fontFamily,
       pointerEvents: "none",
+      opacity: opacity,
       children: node.label
     })]
   });

package/SankeyChart/SankeyPlot.js

@@ -18,6 +18,18 @@ var _SankeyLinkLabel = require("./SankeyLinkLabel");
 var _useSankeySeries = require("../hooks/useSankeySeries");
 var _sankeyClasses = require("./sankeyClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const SankeyPlotRoot = (0, _styles.styled)('g')({
+  [`.${_sankeyClasses.sankeyPlotClasses.links} path, .${_sankeyClasses.sankeyPlotClasses.nodes} rect`]: {
+    transition: 'opacity 0.1s ease-out, filter 0.1s ease-out'
+  },
+  '& [data-faded=true]': {
+    filter: 'saturate(80%)'
+  },
+  '& [data-highlighted=true]': {
+    filter: 'saturate(120%)'
+  }
+});
+
 /**
  * Renders a Sankey diagram plot.
  */
@@ -50,7 +62,7 @@ function SankeyPlot(props) {
   if (!data || !data.links) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SankeyPlotRoot, {
     className: classes.root,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.links,

package/SankeyChart/plugins/index.d.ts

@@ -0,0 +1,3 @@
+export { useSankeyHighlight } from "./useSankeyHighlight.js";
+export * from "./useSankeyHighlight.types.js";
+export { selectorIsSankeyItemFaded as selectorIsFaded, selectorIsLinkHighlighted, selectorIsNodeHighlighted } from "./useSankeyHighlight.selectors.js";

package/SankeyChart/plugins/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  useSankeyHighlight: true,
+  selectorIsFaded: true,
+  selectorIsLinkHighlighted: true,
+  selectorIsNodeHighlighted: true
+};
+Object.defineProperty(exports, "selectorIsFaded", {
+  enumerable: true,
+  get: function () {
+    return _useSankeyHighlight3.selectorIsSankeyItemFaded;
+  }
+});
+Object.defineProperty(exports, "selectorIsLinkHighlighted", {
+  enumerable: true,
+  get: function () {
+    return _useSankeyHighlight3.selectorIsLinkHighlighted;
+  }
+});
+Object.defineProperty(exports, "selectorIsNodeHighlighted", {
+  enumerable: true,
+  get: function () {
+    return _useSankeyHighlight3.selectorIsNodeHighlighted;
+  }
+});
+Object.defineProperty(exports, "useSankeyHighlight", {
+  enumerable: true,
+  get: function () {
+    return _useSankeyHighlight.useSankeyHighlight;
+  }
+});
+var _useSankeyHighlight = require("./useSankeyHighlight");
+var _useSankeyHighlight2 = require("./useSankeyHighlight.types");
+Object.keys(_useSankeyHighlight2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useSankeyHighlight2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useSankeyHighlight2[key];
+    }
+  });
+});
+var _useSankeyHighlight3 = require("./useSankeyHighlight.selectors");

package/SankeyChart/plugins/useSankeyHighlight.d.ts

@@ -0,0 +1,7 @@
+import { ChartPlugin } from '@mui/x-charts/internals';
+import type { UseSankeyHighlightSignature } from "./useSankeyHighlight.types.js";
+/**
+ * Custom highlight plugin for Sankey charts that uses SankeyItemIdentifier
+ * instead of the standard HighlightItemData.
+ */
+export declare const useSankeyHighlight: ChartPlugin<UseSankeyHighlightSignature>;