@mui/x-charts-pro 8.13.1 → 8.14.1

package/LineChartPro/LineChartPro.js

@@ -324,8 +324,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -393,8 +391,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -452,8 +448,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -512,8 +508,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -571,8 +567,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -630,8 +626,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -689,8 +685,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
+    min: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -748,8 +748,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
+    min: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -807,8 +811,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['bottom', 'none', 'top']),
     reverse: _propTypes.default.bool,
@@ -883,8 +887,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -951,8 +953,6 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1009,8 +1009,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1068,8 +1068,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1126,8 +1126,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1184,8 +1184,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1242,8 +1242,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
+    min: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1300,8 +1304,12 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
+    min: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+      valueOf: _propTypes.default.func.isRequired
+    })]),
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1358,8 +1366,8 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
     ignoreTooltip: _propTypes.default.bool,
     label: _propTypes.default.string,
     labelStyle: _propTypes.default.object,
-    max: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
-    min: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number]),
+    max: _propTypes.default.number,
+    min: _propTypes.default.number,
     offset: _propTypes.default.number,
     position: _propTypes.default.oneOf(['left', 'none', 'right']),
     reverse: _propTypes.default.bool,
@@ -1431,10 +1439,14 @@ process.env.NODE_ENV !== "production" ? LineChartPro.propTypes = {
    * Configuration for zoom interactions.
    */
   zoomInteractionConfig: _propTypes.default.shape({
-    pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag']), _propTypes.default.shape({
+    pan: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['drag', 'pressAndDrag']), _propTypes.default.shape({
       pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
       requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
       type: _propTypes.default.oneOf(['drag']).isRequired
+    }), _propTypes.default.shape({
+      pointerMode: _propTypes.default.oneOf(['mouse', 'touch']),
+      requiredKeys: _propTypes.default.arrayOf(_propTypes.default.string),
+      type: _propTypes.default.oneOf(['pressAndDrag']).isRequired
     })]).isRequired),
     zoom: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf(['pinch', 'tapAndDrag', 'wheel']), _propTypes.default.shape({
       pointerMode: _propTypes.default.any,

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>;

package/SankeyChart/plugins/useSankeyHighlight.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSankeyHighlight = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _useAssertModelConsistency = require("@mui/x-internals/useAssertModelConsistency");
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
+/**
+ * Custom highlight plugin for Sankey charts that uses SankeyItemIdentifier
+ * instead of the standard HighlightItemData.
+ */
+const useSankeyHighlight = ({
+  store,
+  params
+}) => {
+  (0, _useAssertModelConsistency.useAssertModelConsistency)({
+    warningPrefix: 'MUI X Charts',
+    componentName: 'SankeyChart',
+    propName: 'highlightedItem',
+    controlled: params.highlightedItem,
+    defaultValue: null
+  });
+  (0, _useEnhancedEffect.default)(() => {
+    store.update(prevState => prevState.highlight.item === params.highlightedItem ? prevState : (0, _extends2.default)({}, prevState, {
+      highlight: (0, _extends2.default)({}, prevState.highlight, {
+        item: params.highlightedItem
+      })
+    }));
+  }, [store, params.highlightedItem]);
+  const clearHighlight = (0, _useEventCallback.default)(() => {
+    params.onHighlightChange?.(null);
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      highlight: {
+        item: null
+      }
+    }));
+  });
+  const setHighlight = (0, _useEventCallback.default)(newItem => {
+    const prevItem = store.getSnapshot().highlight.item;
+    if ((0, _fastObjectShallowCompare.fastObjectShallowCompare)(prevItem, newItem)) {
+      return;
+    }
+    params.onHighlightChange?.(newItem);
+    store.update(prev => (0, _extends2.default)({}, prev, {
+      highlight: {
+        item: newItem
+      }
+    }));
+  });
+  return {
+    instance: {
+      clearHighlight,
+      setHighlight
+    }
+  };
+};
+exports.useSankeyHighlight = useSankeyHighlight;
+useSankeyHighlight.getDefaultizedParams = ({
+  params
+}) => (0, _extends2.default)({}, params, {
+  highlightedItem: params.highlightedItem ?? null
+});
+useSankeyHighlight.getInitialState = params => ({
+  highlight: {
+    item: params.highlightedItem
+  }
+});
+useSankeyHighlight.params = {
+  highlightedItem: true,
+  onHighlightChange: true
+};