@razorpay/blade 12.98.0 → 12.110.0

package/build/lib/web/production/components/Charts/SankeyChart/SankeyChart.web.js

@@ -0,0 +1,728 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { createContext, useMemo, isValidElement, useState, useContext, useCallback } from 'react';
+import '../../../node_modules/recharts/es6/index.js';
+import '../utils/index.js';
+import '../CommonChartComponents/index.js';
+import { CommonChartComponentsContext } from '../CommonChartComponents/CommonChartComponentsContext.js';
+import { calculateTextWidth } from '../CommonChartComponents/utils.js';
+import { TOOLTIP_Z_INDEX, componentIds, LABEL_CAP_HEIGHT_RATIO, CHIP_VALUE_BUDGET, CHIP_MAX_WIDTH, CHIP_MIN_WIDTH, NODE_DEFAULT_OPACITY, NODE_DIMMED_OPACITY, LINK_DEFAULT_OPACITY, LINK_HOVER_OPACITY, LINK_DIMMED_OPACITY, NODE_MIN_HEIGHT, NODE_WIDTH } from './tokens.js';
+import { humanizeIndian } from './humanizeIndian.js';
+import '../../../utils/isValidAllowedChildren/index.js';
+import '../../../utils/logger/index.js';
+import getIn from '../../../utils/lodashButBetter/get.js';
+import '../../../utils/metaAttribute/index.js';
+import '../../../utils/makeAnalyticsAttribute/index.js';
+import '../../../utils/index.js';
+import '../../../utils/assignWithoutSideEffects/index.js';
+import '../../BladeProvider/index.js';
+import '../../Box/BaseBox/index.js';
+import '../../Typography/index.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import useTheme from '../../BladeProvider/useTheme.js';
+import { castWebType } from '../../../utils/platform/castUtils.js';
+import { Text } from '../../Typography/Text/Text.js';
+import useChartsColorTheme from '../utils/useColorTheme.js';
+import { getComponentId } from '../../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
+import { assignDataColorMapping } from '../utils/assignDataColorMapping/assignDataColorMapping.js';
+import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
+import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
+import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { ResponsiveContainer } from '../../../node_modules/recharts/es6/component/ResponsiveContainer.js';
+import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import { throwBladeError } from '../../../utils/logger/logger.js';
+import { Sankey } from '../../../node_modules/recharts/es6/chart/Sankey.js';
+import { ChartTooltip } from '../CommonChartComponents/CommonChartComponents.web.js';
+
+var _excluded = ["children", "showTooltip", "colorTheme", "nodeColorOverride", "linkColorOverride", "testID"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Default is null — rendering ChartSankey outside ChartSankeyWrapper is detected and
+// throws a descriptive Blade error rather than silently failing with an empty palette.
+var SankeyChartContext = /*#__PURE__*/createContext(null);
+
+// ─── Hover state ──────────────────────────────────────────────────────────────
+
+// Recharts Sankey's event prop type is MouseEventHandler<SVGSVGElement> &
+// ((item, type, e) => void) — an intersection TypeScript cannot satisfy with a
+// plain callback. This module-level alias is cast through `any` at the call site.
+
+// ─── Tooltip content ──────────────────────────────────────────────────────────
+
+function SankeyTooltipContent(_ref) {
+  var _payload$, _item$name;
+  var active = _ref.active,
+    payload = _ref.payload,
+    labelUnit = _ref.labelUnit;
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  if (!active || !(payload !== null && payload !== void 0 && payload.length)) return null;
+  var item = (_payload$ = payload[0]) === null || _payload$ === void 0 ? void 0 : _payload$.payload;
+  if (!item) return null;
+  var label = (_item$name = item.name) !== null && _item$name !== void 0 ? _item$name : '';
+  var value = item.value != null ? item.value.toLocaleString() : '';
+  var content = "".concat(label, ": ").concat(value).concat(labelUnit ? " ".concat(labelUnit) : '');
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      // surface.icon.staticBlack.normal is the token used by CommonChartComponents tooltip.
+      // The icon→surface semantic mismatch is a known issue to fix system-wide separately.
+      backgroundColor: theme.colors.surface.icon.staticBlack.normal,
+      borderRadius: theme.border.radius.large,
+      border: "".concat(theme.border.width.thin, "px solid ").concat(theme.colors.surface.border.gray.muted),
+      padding: theme.spacing[4],
+      pointerEvents: 'none',
+      whiteSpace: 'nowrap',
+      zIndex: TOOLTIP_Z_INDEX,
+      boxShadow: castWebType(theme.elevation.highRaised)
+    },
+    children: /*#__PURE__*/jsx(Text, {
+      size: "small",
+      weight: "regular",
+      color: "surface.text.staticWhite.normal",
+      children: content
+    })
+  });
+}
+
+// ─── Indian number humanizer (private default for formatValue) ────────────────
+// ─── ChartSankeyWrapper ───────────────────────────────────────────────────────
+// Orchestration layer — mirrors ChartDonutWrapper.
+// Inspects children to extract data, computes dataColorMapping,
+// provides CommonChartComponentsContext + private SankeyChartContext.
+
+var _ChartSankeyWrapper = function _ChartSankeyWrapper(_ref2) {
+  var children = _ref2.children,
+    _ref2$showTooltip = _ref2.showTooltip,
+    showTooltip = _ref2$showTooltip === void 0 ? true : _ref2$showTooltip,
+    _ref2$colorTheme = _ref2.colorTheme,
+    colorTheme = _ref2$colorTheme === void 0 ? 'categorical' : _ref2$colorTheme,
+    nodeColorOverride = _ref2.nodeColorOverride,
+    linkColorOverride = _ref2.linkColorOverride,
+    testID = _ref2.testID,
+    restProps = _objectWithoutProperties(_ref2, _excluded);
+  // Categorical palette — same filter used in DonutChart (gray.faint is near-white).
+  // Memoised so the filtered array reference is stable across renders and downstream
+  // useMemo/useCallback hooks that depend on it don't recompute needlessly.
+  var allColorTokens = useChartsColorTheme({
+    colorTheme: colorTheme
+  });
+  var defaultColorTokens = useMemo(function () {
+    return allColorTokens.filter(function (t) {
+      return t !== 'data.background.categorical.gray.faint';
+    });
+  }, [allColorTokens]);
+
+  // Extract data from the ChartSankey child to compute dataColorMapping ahead of render.
+  // children is typed as React.ReactElement so no array traversal needed — check directly.
+  var data = useMemo(function () {
+    return /*#__PURE__*/isValidElement(children) && getComponentId(children) === componentIds.ChartSankey ? children.props.data : {
+      nodes: [],
+      links: []
+    };
+  }, [children]);
+
+  // Build dataColorMapping for CommonChartComponentsContext.
+  // Pre-populate explicit overrides then fill the rest with assignDataColorMapping().
+  var dataColorMapping = useMemo(function () {
+    var mapping = {};
+    data.nodes.forEach(function (node) {
+      var override = nodeColorOverride !== null && nodeColorOverride !== void 0 ? nodeColorOverride : node.color;
+      mapping[node.id] = {
+        // Entries without an explicit override use undefined as a placeholder;
+        // assignDataColorMapping() fills in the real palette token afterwards.
+        // Cast is narrower than `as any` — undefined is intentional here, not a type escape.
+        colorToken: override,
+        isCustomColor: Boolean(override)
+      };
+    });
+    assignDataColorMapping(mapping, defaultColorTokens);
+    return mapping;
+  }, [data.nodes, nodeColorOverride, defaultColorTokens]);
+  return /*#__PURE__*/jsx(CommonChartComponentsContext.Provider, {
+    value: {
+      chartName: 'sankey',
+      dataColorMapping: dataColorMapping
+    },
+    children: /*#__PURE__*/jsx(SankeyChartContext.Provider, {
+      value: {
+        showTooltip: showTooltip,
+        nodeColorOverride: nodeColorOverride,
+        linkColorOverride: linkColorOverride,
+        defaultColorTokens: defaultColorTokens
+      },
+      children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+        name: componentIds.ChartSankeyWrapper,
+        testID: testID
+      })), makeAnalyticsAttribute(restProps)), {}, {
+        width: "100%",
+        height: "100%"
+      }, restProps), {}, {
+        position: "relative",
+        children: /*#__PURE__*/jsx(ResponsiveContainer, {
+          width: "100%",
+          height: "100%",
+          children: children
+        })
+      }))
+    })
+  });
+};
+
+/**
+ * Orchestration wrapper for the Sankey flow diagram.
+ * Computes colour mapping, provides chart context, and owns the responsive container.
+ * Must contain exactly one `<ChartSankey>` child.
+ *
+ * @example
+ * <Box height="420px">
+ *   <ChartSankeyWrapper showTooltip>
+ *     <ChartSankey data={{ nodes, links }} labelUnit="txn" />
+ *   </ChartSankeyWrapper>
+ * </Box>
+ */
+var ChartSankeyWrapper = /*#__PURE__*/assignWithoutSideEffects(_ChartSankeyWrapper, {
+  componentId: componentIds.ChartSankeyWrapper
+});
+
+// ─── Node label render helpers ───────────────────────────────────────────────
+// Pure functions extracted from renderNode to keep the useCallback lean.
+// All positional/style data is passed explicitly so there are no hidden closures.
+
+function renderChipLabel(_ref3) {
+  var chipX = _ref3.chipX,
+    chipY = _ref3.chipY,
+    chipW = _ref3.chipW,
+    chipH = _ref3.chipH,
+    fontSize = _ref3.fontSize,
+    fontFamily = _ref3.fontFamily,
+    labelNameColor = _ref3.labelNameColor,
+    labelValueColor = _ref3.labelValueColor,
+    chipBg = _ref3.chipBg,
+    chipBorderColor = _ref3.chipBorderColor,
+    chipRadius = _ref3.chipRadius,
+    chipPadX = _ref3.chipPadX,
+    lineGap = _ref3.lineGap,
+    borderThin = _ref3.borderThin,
+    capHeightRatio = _ref3.capHeightRatio,
+    name = _ref3.name,
+    labelValue = _ref3.labelValue,
+    shouldWrap = _ref3.shouldWrap,
+    semibold = _ref3.semibold,
+    regular = _ref3.regular;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("rect", {
+      x: chipX + borderThin / 2,
+      y: chipY + borderThin / 2,
+      width: chipW - borderThin,
+      height: chipH - borderThin,
+      fill: chipBg,
+      rx: chipRadius,
+      stroke: chipBorderColor,
+      strokeWidth: borderThin
+    }), shouldWrap ? /*#__PURE__*/jsxs("text", {
+      fontSize: fontSize,
+      style: {
+        userSelect: 'none',
+        fontFamily: fontFamily
+      },
+      children: [/*#__PURE__*/jsx("tspan", {
+        x: chipX + chipPadX,
+        y: chipY + lineGap * 2 + fontSize * (1 + capHeightRatio) / 2,
+        fontWeight: semibold,
+        fill: labelNameColor,
+        children: name
+      }), /*#__PURE__*/jsx("tspan", {
+        x: chipX + chipPadX,
+        y: chipY + lineGap * 2 + fontSize + lineGap + fontSize * (1 + capHeightRatio) / 2,
+        fontWeight: regular,
+        fill: labelValueColor,
+        children: labelValue
+      })]
+    }) : /*#__PURE__*/jsxs("text", {
+      x: chipX + chipPadX,
+      y: chipY + (chipH + fontSize * capHeightRatio) / 2,
+      fontSize: fontSize,
+      style: {
+        userSelect: 'none',
+        fontFamily: fontFamily
+      },
+      children: [/*#__PURE__*/jsx("tspan", {
+        fontWeight: semibold,
+        fill: labelNameColor,
+        children: name
+      }), /*#__PURE__*/jsx("tspan", {
+        fontWeight: regular,
+        fill: labelValueColor,
+        dx: lineGap,
+        children: labelValue
+      })]
+    })]
+  });
+}
+function renderPlainTextLabel(_ref4) {
+  var chipX = _ref4.chipX,
+    nodeMidY = _ref4.nodeMidY,
+    fontSize = _ref4.fontSize,
+    fontFamily = _ref4.fontFamily,
+    labelNameColor = _ref4.labelNameColor,
+    labelValueColor = _ref4.labelValueColor,
+    lineGap = _ref4.lineGap,
+    capHeightRatio = _ref4.capHeightRatio,
+    name = _ref4.name,
+    labelValue = _ref4.labelValue,
+    shouldWrap = _ref4.shouldWrap,
+    semibold = _ref4.semibold,
+    regular = _ref4.regular;
+  if (shouldWrap) {
+    return /*#__PURE__*/jsxs("text", {
+      fontSize: fontSize,
+      style: {
+        userSelect: 'none',
+        fontFamily: fontFamily
+      },
+      children: [/*#__PURE__*/jsx("tspan", {
+        x: chipX,
+        y: nodeMidY - (fontSize + lineGap) / 2,
+        fontWeight: semibold,
+        fill: labelNameColor,
+        children: name
+      }), /*#__PURE__*/jsx("tspan", {
+        x: chipX,
+        y: nodeMidY + (fontSize + lineGap) / 2,
+        fontWeight: regular,
+        fill: labelValueColor,
+        children: labelValue
+      })]
+    });
+  }
+  return /*#__PURE__*/jsxs("text", {
+    x: chipX,
+    y: nodeMidY + fontSize * capHeightRatio / 2,
+    fontSize: fontSize,
+    style: {
+      userSelect: 'none',
+      fontFamily: fontFamily
+    },
+    children: [/*#__PURE__*/jsx("tspan", {
+      fontWeight: semibold,
+      fill: labelNameColor,
+      children: name
+    }), /*#__PURE__*/jsx("tspan", {
+      fontWeight: regular,
+      fill: labelValueColor,
+      dx: lineGap,
+      children: labelValue
+    })]
+  });
+}
+
+// ─── ChartSankey ──────────────────────────────────────────────────────────────
+// Presentational layer — mirrors ChartDonut.
+// Reads wrapper config from SankeyChartContext, manages local hover state only.
+
+var _ChartSankey = function _ChartSankey(_ref5) {
+  var data = _ref5.data,
+    _ref5$showLabels = _ref5.showLabels,
+    showLabels = _ref5$showLabels === void 0 ? true : _ref5$showLabels,
+    _ref5$showLabelChip = _ref5.showLabelChip,
+    showLabelChip = _ref5$showLabelChip === void 0 ? true : _ref5$showLabelChip,
+    _ref5$showPercentage = _ref5.showPercentage,
+    showPercentage = _ref5$showPercentage === void 0 ? true : _ref5$showPercentage,
+    labelUnit = _ref5.labelUnit,
+    formatValue = _ref5.formatValue,
+    onNodeClick = _ref5.onNodeClick,
+    onLinkClick = _ref5.onLinkClick,
+    width = _ref5.width,
+    height = _ref5.height;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHovered = _useState2[1];
+
+  // Read wrapper-level config from private context.
+  // null means ChartSankey was rendered outside ChartSankeyWrapper — throw a clear error.
+  var sankeyCtx = useContext(SankeyChartContext);
+  if (sankeyCtx === null) {
+    throwBladeError({
+      message: 'ChartSankey must be rendered as a direct child of ChartSankeyWrapper',
+      moduleName: 'ChartSankey'
+    });
+  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  var _ref6 = sankeyCtx,
+    showTooltip = _ref6.showTooltip,
+    nodeColorOverride = _ref6.nodeColorOverride,
+    linkColorOverride = _ref6.linkColorOverride,
+    defaultColorTokens = _ref6.defaultColorTokens;
+
+  // ── Theme tokens ──────────────────────────────────────────────────────────
+  var _useTheme2 = useTheme(),
+    theme = _useTheme2.theme;
+  var resolveColor = useCallback(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function (tokenPath) {
+    var _ref7;
+    return (_ref7 = getIn(theme.colors, tokenPath)) !== null && _ref7 !== void 0 ? _ref7 : tokenPath;
+  }, [theme]);
+
+  // Chip layout — derived from Blade spacing tokens
+  var CHIP_PAD_X = theme.spacing[3]; // 8px horizontal padding
+  var CHIP_H = theme.typography.fonts.size[75] + theme.spacing[3] * 2; // 28px single-line
+  var CHIP_GAP = theme.spacing[3]; // 8px
+  var fontFamily = theme.typography.fonts.family.text;
+  // Imported from tokens.ts — see LABEL_CAP_HEIGHT_RATIO for derivation notes.
+  var capHeightRatio = LABEL_CAP_HEIGHT_RATIO;
+
+  // Canvas-based text width measurement — delegates to calculateTextWidth from CommonChartComponents.
+  // Uses size[75] (node labels are larger than the default size[50] used by axis labels) and
+  // accepts a per-call fontWeight override so name vs value segments can use different weights.
+  var measureText = useCallback(function (text, weight) {
+    return calculateTextWidth(text, theme, {
+      fontSize: theme.typography.fonts.size[75],
+      fontWeight: weight,
+      // skipPadding: return the bare canvas pixel width so shouldWrap decisions
+      // use actual glyph widths rather than the MIN_WIDTH-floored chip widths
+      // that calculateTextWidth normally returns for axis label chips.
+      skipPadding: true
+    }).width;
+  }, [theme]);
+  var labelNameColor = theme.colors.surface.text.gray.normal;
+  var labelValueColor = theme.colors.surface.text.gray.muted;
+  var chipBg = theme.colors.surface.background.gray.intense;
+  var chipBorderColor = theme.colors.interactive.border.gray.faded;
+  var chipRadius = theme.border.radius.small;
+  var nodePadding = theme.spacing[4]; // 12px
+  var motionDuration = theme.motion.duration.quick;
+
+  // ── Transform data to Recharts format ────────────────────────────────────
+  var nodeIdToIndex = useMemo(function () {
+    return new Map(data.nodes.map(function (n, i) {
+      return [n.id, i];
+    }));
+  }, [data.nodes]);
+  var rechartsLinks = useMemo(function () {
+    return data.links.map(function (l, i) {
+      var source = nodeIdToIndex.get(l.source);
+      var target = nodeIdToIndex.get(l.target);
+      if (source === undefined || target === undefined) return null;
+      return {
+        source: source,
+        target: target,
+        value: l.value,
+        _originalIndex: i
+      };
+    }).filter(function (l) {
+      return l !== null;
+    });
+  }, [data.links, nodeIdToIndex]);
+
+  // Dynamic right margin — based on widest chip across all nodes
+  var dynamicRightMargin = useMemo(function () {
+    if (!showLabels) return theme.spacing[3];
+    if (!showLabelChip) {
+      var maxTextW = data.nodes.reduce(function (max, node) {
+        var nameW = measureText(node.name, theme.typography.fonts.weight.semibold);
+        return Math.max(max, nameW + theme.spacing[2] + CHIP_VALUE_BUDGET);
+      }, 0);
+      return Math.min(CHIP_MAX_WIDTH, maxTextW) + CHIP_GAP + theme.spacing[3];
+    }
+    var maxChipW = data.nodes.reduce(function (max, node) {
+      var nameW = measureText(node.name, theme.typography.fonts.weight.semibold);
+      var chipW = Math.min(CHIP_MAX_WIDTH, Math.max(CHIP_MIN_WIDTH, nameW + theme.spacing[2] + CHIP_VALUE_BUDGET + CHIP_PAD_X * 2));
+      return Math.max(max, chipW);
+    }, 0);
+    return maxChipW + CHIP_GAP + theme.spacing[3];
+  }, [showLabels, showLabelChip, data.nodes, measureText, theme, CHIP_PAD_X, CHIP_GAP]);
+
+  // Node depth map + count per level — suppress percentage for sole node at a level
+  var nodeDepthInfo = useMemo(function () {
+    var incomingCount = new Map(data.nodes.map(function (n) {
+      return [n.id, 0];
+    }));
+    data.links.forEach(function (l) {
+      var _incomingCount$get;
+      return incomingCount.set(l.target, ((_incomingCount$get = incomingCount.get(l.target)) !== null && _incomingCount$get !== void 0 ? _incomingCount$get : 0) + 1);
+    });
+    var outgoing = new Map(data.nodes.map(function (n) {
+      return [n.id, []];
+    }));
+    data.links.forEach(function (l) {
+      var _outgoing$get;
+      return (_outgoing$get = outgoing.get(l.source)) === null || _outgoing$get === void 0 ? void 0 : _outgoing$get.push(l.target);
+    });
+    var depthOf = new Map();
+    var queue = data.nodes.filter(function (n) {
+      return incomingCount.get(n.id) === 0;
+    }).map(function (n) {
+      return n.id;
+    });
+    queue.forEach(function (id) {
+      return depthOf.set(id, 0);
+    });
+    var _loop = function _loop() {
+      var _depthOf$get, _outgoing$get2;
+      var id = queue[i];
+      var d = (_depthOf$get = depthOf.get(id)) !== null && _depthOf$get !== void 0 ? _depthOf$get : 0;
+      (_outgoing$get2 = outgoing.get(id)) === null || _outgoing$get2 === void 0 || _outgoing$get2.forEach(function (tid) {
+        if (!depthOf.has(tid)) {
+          depthOf.set(tid, d + 1);
+          queue.push(tid);
+        }
+      });
+    };
+    for (var i = 0; i < queue.length; i++) {
+      _loop();
+    }
+    var countPerDepth = new Map();
+    depthOf.forEach(function (d) {
+      var _countPerDepth$get;
+      return countPerDepth.set(d, ((_countPerDepth$get = countPerDepth.get(d)) !== null && _countPerDepth$get !== void 0 ? _countPerDepth$get : 0) + 1);
+    });
+    return {
+      depthOf: depthOf,
+      countPerDepth: countPerDepth
+    };
+  }, [data.nodes, data.links]);
+
+  // Total value = sum of outflows from root nodes
+  var totalValue = useMemo(function () {
+    var targetIds = new Set(data.links.map(function (l) {
+      return l.target;
+    }));
+    return data.links.filter(function (l) {
+      return !targetIds.has(l.source);
+    }).reduce(function (sum, l) {
+      return sum + l.value;
+    }, 0);
+  }, [data.links]);
+
+  // ── Opacity helpers ────────────────────────────────────────────────────────
+  var getNodeOpacity = useCallback(function (nodeIdx) {
+    if (hovered === null) return NODE_DEFAULT_OPACITY;
+    if (hovered.type === 'node' && hovered.index === nodeIdx) return NODE_DEFAULT_OPACITY;
+    if (hovered.type === 'link') {
+      var link = rechartsLinks[hovered.index];
+      if (link && (link.source === nodeIdx || link.target === nodeIdx)) return NODE_DEFAULT_OPACITY;
+    }
+    return NODE_DIMMED_OPACITY;
+  }, [hovered, rechartsLinks]);
+  var getLinkOpacity = useCallback(function (linkIdx) {
+    if (hovered === null) return LINK_DEFAULT_OPACITY;
+    if (hovered.type === 'link' && hovered.index === linkIdx) return LINK_HOVER_OPACITY;
+    if (hovered.type === 'node') {
+      var link = rechartsLinks[linkIdx];
+      if (link && (link.source === hovered.index || link.target === hovered.index)) return LINK_HOVER_OPACITY;
+    }
+    return LINK_DIMMED_OPACITY;
+  }, [hovered, rechartsLinks]);
+
+  // ── Custom node render ─────────────────────────────────────────────────────
+  var renderNode = useCallback(function (props) {
+    var _ref8, _payload$value, _nodeDepthInfo$depthO, _nodeDepthInfo$countP;
+    var x = props.x,
+      y = props.y,
+      width = props.width,
+      nodeHeight = props.height,
+      index = props.index,
+      payload = props.payload;
+    var nodeData = data.nodes[index];
+    if (!nodeData) return /*#__PURE__*/jsx("g", {});
+    var colorToken = (_ref8 = nodeColorOverride !== null && nodeColorOverride !== void 0 ? nodeColorOverride : nodeData.color) !== null && _ref8 !== void 0 ? _ref8 : defaultColorTokens[index % defaultColorTokens.length];
+    var fill = resolveColor(colorToken);
+    var opacity = getNodeOpacity(index);
+    var nodeMidY = y + nodeHeight / 2;
+    var chipX = x + width + CHIP_GAP;
+    var nodeValue = (_payload$value = payload.value) !== null && _payload$value !== void 0 ? _payload$value : 0;
+    var formatter = formatValue !== null && formatValue !== void 0 ? formatValue : humanizeIndian;
+    var humanized = formatter(nodeValue);
+    var nodeDepth = (_nodeDepthInfo$depthO = nodeDepthInfo.depthOf.get(nodeData.id)) !== null && _nodeDepthInfo$depthO !== void 0 ? _nodeDepthInfo$depthO : 0;
+    var levelCount = (_nodeDepthInfo$countP = nodeDepthInfo.countPerDepth.get(nodeDepth)) !== null && _nodeDepthInfo$countP !== void 0 ? _nodeDepthInfo$countP : 1;
+    var pct = totalValue > 0 ? Math.round(nodeValue / totalValue * 100) : 0;
+    var valueText = labelUnit != null ? "".concat(humanized, " ").concat(labelUnit) : humanized;
+    var labelValue = showPercentage && levelCount > 1 ? "".concat(valueText, "  (").concat(pct, "%)") : valueText;
+    var fontSize = theme.typography.fonts.size[75];
+    var nameW = measureText(nodeData.name, theme.typography.fonts.weight.semibold);
+    var labelW = measureText(labelValue, theme.typography.fonts.weight.regular);
+    var contentW = nameW + theme.spacing[2] + labelW;
+    var shouldWrap = contentW + CHIP_PAD_X * 2 > CHIP_MAX_WIDTH;
+    var chipW = shouldWrap ? Math.min(CHIP_MAX_WIDTH, Math.max(CHIP_MIN_WIDTH, Math.max(nameW, labelW) + CHIP_PAD_X * 2)) : Math.max(CHIP_MIN_WIDTH, contentW + CHIP_PAD_X * 2);
+    var lineGap = theme.spacing[2]; // 4px — fixed y-formula gives 16px baseline-to-baseline at size[75]
+    var chipH = shouldWrap ? theme.spacing[3] + fontSize + lineGap + fontSize + theme.spacing[3] : CHIP_H;
+    var chipY = nodeMidY - chipH / 2;
+    return /*#__PURE__*/jsxs("g", {
+      opacity: opacity,
+      style: {
+        transition: "opacity ".concat(motionDuration, "ms ").concat(castWebType(theme.motion.easing.standard))
+      },
+      children: [/*#__PURE__*/jsx("rect", {
+        x: x,
+        y: y,
+        width: width,
+        height: Math.max(NODE_MIN_HEIGHT, nodeHeight),
+        fill: fill,
+        rx: theme.border.radius.none,
+        style: {
+          cursor: 'pointer'
+        }
+      }), showLabels && /*#__PURE__*/jsx("g", {
+        style: {
+          pointerEvents: 'none'
+        },
+        children: (showLabelChip ? renderChipLabel : renderPlainTextLabel)({
+          chipX: chipX,
+          chipY: chipY,
+          chipW: chipW,
+          chipH: chipH,
+          nodeMidY: nodeMidY,
+          fontSize: fontSize,
+          fontFamily: fontFamily,
+          labelNameColor: labelNameColor,
+          labelValueColor: labelValueColor,
+          chipBg: chipBg,
+          chipBorderColor: chipBorderColor,
+          chipRadius: chipRadius,
+          chipPadX: CHIP_PAD_X,
+          lineGap: lineGap,
+          borderThin: theme.border.width.thin,
+          capHeightRatio: capHeightRatio,
+          name: nodeData.name,
+          labelValue: labelValue,
+          shouldWrap: shouldWrap,
+          semibold: theme.typography.fonts.weight.semibold,
+          regular: theme.typography.fonts.weight.regular
+        })
+      })]
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // CHIP_MAX_WIDTH is a module-level constant — stable, intentionally omitted
+  [data.nodes, nodeColorOverride, defaultColorTokens, resolveColor, getNodeOpacity, showLabels, showLabelChip, showPercentage, labelUnit, formatValue, capHeightRatio, CHIP_H, CHIP_PAD_X, CHIP_GAP, fontFamily, labelNameColor, labelValueColor, chipBg, chipBorderColor, chipRadius, motionDuration, measureText, totalValue, nodeDepthInfo, theme]);
+
+  // ── Custom link render ─────────────────────────────────────────────────────
+  var renderLink = useCallback(function (props) {
+    var _ref9, _srcNode$color;
+    var sourceX = props.sourceX,
+      targetX = props.targetX,
+      sourceY = props.sourceY,
+      targetY = props.targetY,
+      sourceControlX = props.sourceControlX,
+      targetControlX = props.targetControlX,
+      linkWidth = props.linkWidth,
+      index = props.index,
+      payload = props.payload;
+    var resolveSourceIndex = function resolveSourceIndex(source) {
+      var _id, _nodeIdToIndex$get;
+      if (typeof source === 'number') return source;
+      var id = (_id = source === null || source === void 0 ? void 0 : source.id) !== null && _id !== void 0 ? _id : '';
+      return (_nodeIdToIndex$get = nodeIdToIndex.get(id)) !== null && _nodeIdToIndex$get !== void 0 ? _nodeIdToIndex$get : 0;
+    };
+    var srcNodeIndex = resolveSourceIndex(payload.source);
+    var srcNode = data.nodes[srcNodeIndex];
+    var colorToken = (_ref9 = linkColorOverride !== null && linkColorOverride !== void 0 ? linkColorOverride : nodeColorOverride) !== null && _ref9 !== void 0 ? _ref9 : srcNode ? (_srcNode$color = srcNode.color) !== null && _srcNode$color !== void 0 ? _srcNode$color :
+    // srcNodeIndex is already resolved above — O(1) map lookup, not O(n) indexOf
+    defaultColorTokens[srcNodeIndex % defaultColorTokens.length] : defaultColorTokens[0];
+    var stroke = resolveColor(colorToken);
+    var opacity = getLinkOpacity(index);
+    var d = "\n        M".concat(sourceX, ",").concat(sourceY + linkWidth / 2, "\n        C").concat(sourceControlX, ",").concat(sourceY + linkWidth / 2, "\n          ").concat(targetControlX, ",").concat(targetY + linkWidth / 2, "\n          ").concat(targetX, ",").concat(targetY + linkWidth / 2, "\n        L").concat(targetX, ",").concat(targetY - linkWidth / 2, "\n        C").concat(targetControlX, ",").concat(targetY - linkWidth / 2, "\n          ").concat(sourceControlX, ",").concat(sourceY - linkWidth / 2, "\n          ").concat(sourceX, ",").concat(sourceY - linkWidth / 2, "\n        Z\n      ");
+    return /*#__PURE__*/jsx("path", {
+      d: d,
+      fill: stroke,
+      fillOpacity: opacity,
+      style: {
+        cursor: 'pointer',
+        transition: "fill-opacity ".concat(motionDuration, "ms ").concat(castWebType(theme.motion.easing.standard))
+      }
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // castWebType is module-level — stable, intentionally omitted
+  [data.nodes, nodeIdToIndex, linkColorOverride, nodeColorOverride, defaultColorTokens, resolveColor, getLinkOpacity, motionDuration, theme]);
+
+  // ── Event handlers ─────────────────────────────────────────────────────────
+
+  var handleMouseEnter = useCallback(function (item, type) {
+    setHovered({
+      type: type,
+      index: item.index
+    });
+  }, []);
+  var handleMouseLeave = useCallback(function () {
+    setHovered(null);
+  }, []);
+  var handleClick = useCallback(function (item, type) {
+    if (type === 'node') {
+      var nodeData = data.nodes[item.index];
+      if (nodeData) onNodeClick === null || onNodeClick === void 0 || onNodeClick(nodeData, item.index);
+    } else {
+      var link = rechartsLinks[item.index];
+      if (link !== undefined) {
+        var originalLink = data.links[link._originalIndex];
+        if (originalLink) onLinkClick === null || onLinkClick === void 0 || onLinkClick(originalLink, link._originalIndex);
+      }
+    }
+  }, [data.nodes, data.links, rechartsLinks, onNodeClick, onLinkClick]);
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+  return /*#__PURE__*/jsx(Sankey, {
+    data: {
+      nodes: data.nodes,
+      links: rechartsLinks
+    },
+    width: width,
+    height: height,
+    nodeWidth: NODE_WIDTH,
+    nodePadding: nodePadding,
+    node: renderNode,
+    link: renderLink
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
+    onClick: handleClick,
+    margin: {
+      top: theme.spacing[3],
+      right: dynamicRightMargin,
+      bottom: theme.spacing[3],
+      left: theme.spacing[3]
+    },
+    children: showTooltip && /*#__PURE__*/jsx(ChartTooltip, {
+      isAnimationActive: false,
+      content: function content(tooltipProps) {
+        return /*#__PURE__*/jsx(SankeyTooltipContent, {
+          active: tooltipProps.active,
+          payload: tooltipProps.payload,
+          labelUnit: labelUnit
+        });
+      }
+    })
+  });
+};
+
+/**
+ * Presentational layer for the Sankey flow diagram.
+ * Renders nodes, link ribbons, and labels; delegates colour and tooltip config
+ * to the parent `<ChartSankeyWrapper>`.
+ * Must be rendered as a direct child of `<ChartSankeyWrapper>`.
+ *
+ * @example
+ * <Box height="420px">
+ *   <ChartSankeyWrapper>
+ *     <ChartSankey
+ *     data={{ nodes, links }}
+ *     showLabels
+ *     showLabelChip
+ *     labelUnit="txn"
+ *     onNodeClick={(node, i) => console.log(node, i)}
+ *   />
+ *   </ChartSankeyWrapper>
+ * </Box>
+ */
+var ChartSankey = /*#__PURE__*/assignWithoutSideEffects(_ChartSankey, {
+  componentId: componentIds.ChartSankey
+});
+
+export { ChartSankey, ChartSankeyWrapper };
+//# sourceMappingURL=SankeyChart.web.js.map