@mui/x-charts-pro 8.14.0 → 8.14.1

package/SankeyChart/plugins/useSankeyHighlight.selectors.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectorSankeyHighlightedItem = exports.selectorNodeHighlightConfig = exports.selectorNodeFadeConfig = exports.selectorLinkHighlightConfig = exports.selectorLinkFadeConfig = exports.selectorIsSankeyItemFaded = exports.selectorIsNodeHighlighted = exports.selectorIsLinkHighlighted = void 0;
+var _internals = require("@mui/x-charts/internals");
+const selectorSankeyHighlight = state => state.highlight;
+const selectSeries = state => state.series;
+const selectorSankeySeries = (0, _internals.createSelector)([selectSeries], series => series.processedSeries.sankey?.series[series.processedSeries.sankey?.seriesOrder[0]] || null);
+const DEFAULT_NODE_HIGHLIGHT = 'links';
+const DEFAULT_LINK_HIGHLIGHT = 'links';
+const DEFAULT_FADE = 'none';
+
+/**
+ * Get the node highlight configuration from the Sankey series.
+ * Defaults to 'nodes' if not specified.
+ */
+const selectorNodeHighlightConfig = exports.selectorNodeHighlightConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.nodeOptions?.highlight ?? DEFAULT_NODE_HIGHLIGHT);
+
+/**
+ * Get the node fade configuration from the Sankey series.
+ * Defaults to 'none' if not specified.
+ */
+const selectorNodeFadeConfig = exports.selectorNodeFadeConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.nodeOptions?.fade ?? DEFAULT_FADE);
+
+/**
+ * Get the link highlight configuration from the Sankey series.
+ * Defaults to 'links' if not specified.
+ */
+const selectorLinkHighlightConfig = exports.selectorLinkHighlightConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.linkOptions?.highlight ?? DEFAULT_LINK_HIGHLIGHT);
+
+/**
+ * Get the link fade configuration from the Sankey series.
+ * Defaults to 'none' if not specified.
+ */
+const selectorLinkFadeConfig = exports.selectorLinkFadeConfig = (0, _internals.createSelector)([selectorSankeySeries], series => series?.linkOptions?.fade ?? DEFAULT_FADE);
+
+/**
+ * Get the currently highlighted item in the Sankey chart.
+ * @param {UseSankeyHighlightSignature['state']} state The state of the chart.
+ * @returns {SankeyItemIdentifier | null} The highlighted item identifier or null.
+ */
+const selectorSankeyHighlightedItem = exports.selectorSankeyHighlightedItem = (0, _internals.createSelector)([selectorSankeyHighlight], highlight => highlight.item);
+
+/**
+ * Determines if a specific node should be highlighted.
+ * A node is highlighted if:
+ * - It's the highlighted node (unless highlight mode is 'none')
+ * - It's connected to a highlighted link (based on linkOptions.highlight)
+ */
+const selectorIsNodeHighlighted = exports.selectorIsNodeHighlighted = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (_, node) => node.id], (highlightedItem, nodeHighlight, linkHighlight, nodeId) => {
+  if (!highlightedItem) {
+    return false;
+  }
+  if (highlightedItem.subType === 'node' && highlightedItem.nodeId === nodeId) {
+    return nodeHighlight !== 'none';
+  }
+  if (highlightedItem.subType === 'link') {
+    if (!linkHighlight || linkHighlight === 'none' || linkHighlight === 'links') {
+      return false;
+    }
+    const {
+      sourceId,
+      targetId
+    } = highlightedItem;
+    switch (linkHighlight) {
+      case 'nodes':
+        return nodeId === sourceId || nodeId === targetId;
+      case 'source':
+        return nodeId === sourceId;
+      case 'target':
+        return nodeId === targetId;
+      default:
+        return false;
+    }
+  }
+  return false;
+});
+
+/**
+ * Selector that determines if a specific link should be highlighted.
+ * A link is highlighted if:
+ * - It's the highlighted link (unless highlight mode is 'none')
+ * - It's connected to a highlighted node (based on nodeOptions.highlight)
+ */
+const selectorIsLinkHighlighted = exports.selectorIsLinkHighlighted = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeHighlightConfig, selectorLinkHighlightConfig, (_, link) => link], (highlightedItem, nodeHighlight, linkHighlight, link) => {
+  if (!highlightedItem) {
+    return false;
+  }
+  if (highlightedItem.subType === 'link' && highlightedItem.sourceId === link.source.id && highlightedItem.targetId === link.target.id) {
+    return linkHighlight !== 'none';
+  }
+  if (highlightedItem.subType === 'node') {
+    if (!nodeHighlight || nodeHighlight === 'none' || nodeHighlight === 'nodes') {
+      return false;
+    }
+    const highlightedNodeId = highlightedItem.nodeId;
+    switch (nodeHighlight) {
+      case 'links':
+        return link.source.id === highlightedNodeId || link.target.id === highlightedNodeId;
+      case 'incoming':
+        return link.target.id === highlightedNodeId;
+      case 'outgoing':
+        return link.source.id === highlightedNodeId;
+      default:
+        return false;
+    }
+  }
+  return false;
+});
+
+/**
+ * Selector that determines if an item should be faded.
+ * An item is faded if:
+ * - There's a highlighted item
+ * - This item is not highlighted
+ * - The fade mode is 'global' for the highlighted element type
+ */
+const selectorIsSankeyItemFaded = exports.selectorIsSankeyItemFaded = (0, _internals.createSelector)([selectorSankeyHighlightedItem, selectorNodeFadeConfig, selectorLinkFadeConfig, (_, isHighlighted) => isHighlighted], (highlightedItem, nodeFade, linkFade, isHighlighted) => {
+  if (!highlightedItem || isHighlighted) {
+    return false;
+  }
+  const fadeMode = highlightedItem.subType === 'node' ? nodeFade : linkFade;
+  return fadeMode === 'global';
+});

package/SankeyChart/plugins/useSankeyHighlight.types.d.ts

@@ -0,0 +1,55 @@
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { ChartPluginSignature } from '@mui/x-charts/internals';
+import { SankeyItemIdentifier } from "../sankey.types.js";
+/**
+ * The data of the highlighted item in a Sankey chart.
+ * Can be either a node or a link.
+ *
+ * @example
+ * // Highlight a node
+ * { type: 'sankey', seriesId: 'series-1', subType: 'node', nodeId: 'A' }
+ *
+ * // Highlight a link
+ * { type: 'sankey', seriesId: 'series-1', subType: 'link', sourceId: 'A', targetId: 'B' }
+ *
+ * // Clear the highlight
+ * null
+ */
+export type SankeyHighlightItemData = SankeyItemIdentifier;
+export interface UseSankeyHighlightInstance {
+  /**
+   * Remove all highlight.
+   */
+  clearHighlight: () => void;
+  /**
+   * Set the highlighted item.
+   * @param {SankeyHighlightItemData} item The item to highlight.
+   */
+  setHighlight: (item: SankeyHighlightItemData) => void;
+}
+export interface UseSankeyHighlightParameters {
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem?: SankeyHighlightItemData | null;
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {SankeyHighlightItemData | null} highlightedItem The newly highlighted item.
+   */
+  onHighlightChange?: (highlightedItem: SankeyHighlightItemData | null) => void;
+}
+export type UseSankeyHighlightDefaultizedParameters = DefaultizedProps<UseSankeyHighlightParameters, 'highlightedItem'>;
+export interface UseSankeyHighlightState {
+  highlight: {
+    item: SankeyHighlightItemData | null;
+  };
+}
+export type UseSankeyHighlightSignature = ChartPluginSignature<{
+  instance: UseSankeyHighlightInstance;
+  state: UseSankeyHighlightState;
+  params: UseSankeyHighlightParameters;
+  defaultizedParams: UseSankeyHighlightDefaultizedParameters;
+  modelNames: 'highlightedItem';
+}>;

package/SankeyChart/plugins/useSankeyHighlight.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/SankeyChart/sankey.highlight.types.d.ts

@@ -0,0 +1,42 @@
+export type SankeyNodeHighlight = 'nodes' | 'links' | 'incoming' | 'outgoing' | 'none';
+export type SankeyNodeFade = 'global' | 'none';
+export type SankeyLinkHighlight = 'links' | 'nodes' | 'source' | 'target' | 'none';
+export type SankeyLinkFade = 'global' | 'none';
+export type SankeyNodeHighlightScope = {
+  /**
+   * Highlight mode for nodes
+   * - 'nodes': Highlight hovered node
+   * - 'links': Highlight links connected to hovered node
+   * - 'incoming': Highlight incoming links to hovered node
+   * - 'outgoing': Highlight outgoing links from hovered node
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyNodeHighlight;
+  /**
+   * Fade mode for nodes
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyNodeFade;
+};
+export type SankeyLinkHighlightScope = {
+  /**
+   * Highlight mode for links
+   * - 'links': Highlight hovered link
+   * - 'nodes': Highlight nodes connected to hovered link
+   * - 'source': Highlight source node of hovered link
+   * - 'target': Highlight target node of hovered link
+   * - 'none': No highlighting
+   * @default 'links'
+   */
+  highlight?: SankeyLinkHighlight;
+  /**
+   * Fade mode for links
+   * - 'global': Fade all non-highlighted items
+   * - 'none': No fading
+   * @default 'none'
+   */
+  fade?: SankeyLinkFade;
+};

package/SankeyChart/sankey.highlight.types.js

@@ -0,0 +1,6 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/SankeyChart/sankey.types.d.ts

@@ -1,6 +1,7 @@
 import type { HighlightScope, SeriesId } from '@mui/x-charts/internals';
 import type { DefaultizedProps, MakeRequired } from '@mui/x-internals/types';
 import type { SankeyLink as D3SankeyLink, SankeyNode as D3SankeyNode } from '@mui/x-charts-vendor/d3-sankey';
+import type { SankeyLinkHighlightScope, SankeyNodeHighlightScope } from "./sankey.highlight.types.js";
 export type SankeyNodeId = string | number;
 export interface SankeyNode {
   /**
@@ -79,7 +80,7 @@ export type SankeyNodeOptions = {
    * @returns {number} Comparison result
    */
   sort?: (a: SankeyLayoutNode, b: SankeyLayoutNode) => number | null;
-};
+} & SankeyNodeHighlightScope;
 export type SankeyLinkOptions = {
   /**
    * Default color for links without specified colors.
@@ -111,7 +112,7 @@ export type SankeyLinkOptions = {
    * @default 10
    */
   curveCorrection?: number;
-};
+} & SankeyLinkHighlightScope;
 export interface SankeyData {
   /**
    * An array of node configs for the Sankey diagram

package/SankeyChart/sankeyClasses.d.ts

@@ -12,4 +12,4 @@ export declare function getSankeyPlotUtilityClass(slot: string): string;
 export declare const sankeyPlotClasses: SankeyPlotClasses;
 export declare const useUtilityClasses: (ownerState: {
   classes?: Partial<SankeyPlotClasses>;
-}) => Record<"root" | "nodes" | "links" | "linkLabels", string>;
+}) => Record<"nodes" | "links" | "root" | "linkLabels", string>;

package/SankeyChart/useSankeyChartProps.js

@@ -10,7 +10,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _constants = require("@mui/x-charts/constants");
 var _internals = require("@mui/x-charts/internals");
 var _SankeyChart = require("./SankeyChart.plugins");
-const _excluded = ["series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "loading", "className", "apiRef", "onNodeClick", "onLinkClick"];
+const _excluded = ["series", "width", "height", "margin", "colors", "sx", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className", "apiRef", "onNodeClick", "onLinkClick"];
 /**
  * A helper function that extracts SankeyChartProps from the input props
  * and returns an object with props for the children components of SankeyChart.
@@ -30,8 +30,8 @@ const useSankeyChartProps = props => {
       slots,
       slotProps,
       loading,
-      // highlightedItem,
-      // onHighlightChange,
+      highlightedItem,
+      onHighlightChange,
       className,
       apiRef,
       onNodeClick,
@@ -48,8 +48,8 @@ const useSankeyChartProps = props => {
     margin,
     colors,
     sx,
-    // highlightedItem,
-    // onHighlightChange,
+    highlightedItem,
+    onHighlightChange,
     className,
     apiRef,
     plugins: _SankeyChart.SANKEY_CHART_PLUGINS

package/esm/ChartDataProviderPro/ChartDataProviderPro.js

@@ -11,7 +11,7 @@ import { defaultSlotsMaterial } from "../internals/material/index.js";
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 import { useChartDataProviderProProps } from "./useChartDataProviderProProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const releaseInfo = "MTc1OTk2ODAwMDAwMA==";
+const releaseInfo = "MTc2MDU3MjgwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
 /**
  * Orchestrates the data providers for the chart components and hooks.

package/esm/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/esm/SankeyChart/SankeyChart.js

@@ -94,6 +94,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.number,
+  /**
+   * The highlighted item.
+   * Used when the highlight is controlled.
+   */
+  highlightedItem: PropTypes.oneOfType([PropTypes.shape({
+    nodeId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    subType: PropTypes.oneOf([
+    /**
+     * Subtype to differentiate between node and link
+     */
+    'node']).isRequired,
+    type: PropTypes.oneOf(['sankey']).isRequired
+  }), PropTypes.shape({
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    sourceId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    subType: PropTypes.oneOf([
+    /**
+     * Subtype to differentiate between node and link
+     */
+    'link']).isRequired,
+    targetId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    type: PropTypes.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.
@@ -120,6 +144,12 @@ process.env.NODE_ENV !== "production" ? SankeyChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * The callback fired when the highlighted item changes.
+   *
+   * @param {SankeyHighlightItemData | null} highlightedItem The newly highlighted item.
+   */
+  onHighlightChange: PropTypes.func,
   /**
    * Callback fired when a sankey item is clicked.
    * @param {React.MouseEvent<SVGElement, MouseEvent>} event The event source of the callback.

package/esm/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/esm/SankeyChart/SankeyChart.plugins.js

@@ -1,5 +1,4 @@
-import { useChartHighlight
-// useChartHighlight,
-, useChartInteraction } from '@mui/x-charts/internals';
+import { useChartInteraction } from '@mui/x-charts/internals';
 import { useChartProExport } from "../internals/plugins/useChartProExport/index.js";
-export const SANKEY_CHART_PLUGINS = [useChartInteraction, useChartHighlight, useChartProExport];
+import { useSankeyHighlight } from "./plugins/index.js";
+export const SANKEY_CHART_PLUGINS = [useChartInteraction, useSankeyHighlight, useChartProExport];

package/esm/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/esm/SankeyChart/SankeyLinkElement.js

@@ -3,7 +3,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useInteractionItemProps } from '@mui/x-charts/internals';
+import { useInteractionItemProps, useStore, useSelector } from '@mui/x-charts/internals';
+import { selectorIsLinkHighlighted } from "./plugins/index.js";
+import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -15,6 +17,7 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
     onClick,
     seriesId
   } = props;
+  const store = useStore();
   const identifier = {
     type: 'sankey',
     seriesId,
@@ -23,6 +26,8 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
     sourceId: link.source.id,
     link
   };
+  const isHighlighted = useSelector(store, selectorIsLinkHighlighted, [link]);
+  const isFaded = useSelector(store, selectorIsSankeyItemFaded, [isHighlighted]);
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);
@@ -30,15 +35,23 @@ export const SankeyLinkElement = /*#__PURE__*/React.forwardRef(function SankeyLi
     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__*/_jsx("path", _extends({
     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/esm/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/esm/SankeyChart/SankeyNodeElement.js

@@ -3,8 +3,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useInteractionItemProps } from '@mui/x-charts/internals';
+import { useInteractionItemProps, useStore, useSelector } from '@mui/x-charts/internals';
 import { useTheme } from '@mui/material/styles';
+import { selectorIsNodeHighlighted } from "./plugins/index.js";
+import { selectorIsSankeyItemFaded } from "./plugins/useSankeyHighlight.selectors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -17,6 +19,7 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
     seriesId
   } = props;
   const theme = useTheme();
+  const store = useStore();
   const x0 = node.x0 ?? 0;
   const y0 = node.y0 ?? 0;
   const x1 = node.x1 ?? 0;
@@ -36,12 +39,20 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
     nodeId: node.id,
     node
   };
+  const isHighlighted = useSelector(store, selectorIsNodeHighlighted, [node]);
+  const isFaded = useSelector(store, selectorIsSankeyItemFaded, [isHighlighted]);
 
   // Add interaction props for tooltips
   const interactionProps = useInteractionItemProps(identifier);
   const handleClick = useEventCallback(event => {
     onClick?.(event, identifier);
   });
+  let opacity = 1;
+  if (isFaded) {
+    opacity = 0.3;
+  } else if (isHighlighted) {
+    opacity = 1;
+  }
   return /*#__PURE__*/_jsxs("g", {
     ref: ref,
     "data-node": node.id,
@@ -51,9 +62,12 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
       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__*/_jsx("text", {
       x: labelX,
       y: (y0 + y1) / 2,
@@ -62,6 +76,7 @@ export const SankeyNodeElement = /*#__PURE__*/React.forwardRef(function SankeyNo
       fontSize: theme.typography.caption.fontSize,
       fontFamily: theme.typography.fontFamily,
       pointerEvents: "none",
+      opacity: opacity,
       children: node.label
     })]
   });

package/esm/SankeyChart/SankeyPlot.js

@@ -2,15 +2,27 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useDrawingArea } from '@mui/x-charts/hooks';
 import { calculateSankeyLayout } from "./calculateSankeyLayout.js";
 import { SankeyNodeElement } from "./SankeyNodeElement.js";
 import { SankeyLinkElement } from "./SankeyLinkElement.js";
 import { SankeyLinkLabel } from "./SankeyLinkLabel.js";
 import { useSankeySeriesContext } from "../hooks/useSankeySeries.js";
-import { useUtilityClasses } from "./sankeyClasses.js";
+import { sankeyPlotClasses, useUtilityClasses } from "./sankeyClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SankeyPlotRoot = styled('g')({
+  [`.${sankeyPlotClasses.links} path, .${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.
  */
@@ -43,7 +55,7 @@ function SankeyPlot(props) {
   if (!data || !data.links) {
     return null;
   }
-  return /*#__PURE__*/_jsxs("g", {
+  return /*#__PURE__*/_jsxs(SankeyPlotRoot, {
     className: classes.root,
     children: [/*#__PURE__*/_jsx("g", {
       className: classes.links,

package/esm/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/esm/SankeyChart/plugins/index.js

@@ -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/esm/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>;

package/esm/SankeyChart/plugins/useSankeyHighlight.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useAssertModelConsistency } from '@mui/x-internals/useAssertModelConsistency';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
+/**
+ * Custom highlight plugin for Sankey charts that uses SankeyItemIdentifier
+ * instead of the standard HighlightItemData.
+ */
+export const useSankeyHighlight = ({
+  store,
+  params
+}) => {
+  useAssertModelConsistency({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'SankeyChart',
+    propName: 'highlightedItem',
+    controlled: params.highlightedItem,
+    defaultValue: null
+  });
+  useEnhancedEffect(() => {
+    store.update(prevState => prevState.highlight.item === params.highlightedItem ? prevState : _extends({}, prevState, {
+      highlight: _extends({}, prevState.highlight, {
+        item: params.highlightedItem
+      })
+    }));
+  }, [store, params.highlightedItem]);
+  const clearHighlight = useEventCallback(() => {
+    params.onHighlightChange?.(null);
+    store.update(prev => _extends({}, prev, {
+      highlight: {
+        item: null
+      }
+    }));
+  });
+  const setHighlight = useEventCallback(newItem => {
+    const prevItem = store.getSnapshot().highlight.item;
+    if (fastObjectShallowCompare(prevItem, newItem)) {
+      return;
+    }
+    params.onHighlightChange?.(newItem);
+    store.update(prev => _extends({}, prev, {
+      highlight: {
+        item: newItem
+      }
+    }));
+  });
+  return {
+    instance: {
+      clearHighlight,
+      setHighlight
+    }
+  };
+};
+useSankeyHighlight.getDefaultizedParams = ({
+  params
+}) => _extends({}, params, {
+  highlightedItem: params.highlightedItem ?? null
+});
+useSankeyHighlight.getInitialState = params => ({
+  highlight: {
+    item: params.highlightedItem
+  }
+});
+useSankeyHighlight.params = {
+  highlightedItem: true,
+  onHighlightChange: true
+};