@juspay/svelte-ui-components 2.81.0 → 2.81.2

package/dist/Table/BuiltinCell.svelte

@@ -244,6 +244,7 @@
         placeholder={selectData.placeholder ?? ''}
         disabled={selectData.disabled ?? false}
         testId={selectData.testId}
+        itemTestId={selectData.itemTestId}
         onchange={(selectedIds) => {
           if (selectedIds.length > 0) {
             column.onSelect?.(rowIndex, selectedIds[0]);

package/dist/Table/cellData.js

@@ -134,6 +134,9 @@ export const asSelectCellData = (value) => {
     if (typeof record.testId === 'string') {
         selectData.testId = record.testId;
     }
+    if (typeof record.itemTestId === 'string') {
+        selectData.itemTestId = record.itemTestId;
+    }
     return selectData;
 };
 export const asInputCellData = (value) => {

package/dist/Table/properties.d.ts

@@ -97,6 +97,8 @@ export type TableSelectCellData = {
     placeholder?: string;
     disabled?: boolean;
     testId?: string;
+    /** Per-option test id prefix — each option emits `data-pw="{itemTestId}-{id}"`. */
+    itemTestId?: string;
 };
 /** Cell shape for `type: 'input'` — the handler lives on the column. */
 export type TableInputCellData = {

package/dist/_chart/geometry.js

@@ -94,25 +94,37 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         columnGroups.get(col).push(n.id);
     }
     const colWidth = maxCol === 0 ? 0 : (width - nodeWidth) / maxCol;
+    const columnPadding = new Map();
     // Initialize y positions
     const nodeY = new Map();
     const nodeH = new Map();
-    for (const [, ids] of columnGroups) {
+    for (const [col, ids] of columnGroups) {
         const totalValue = ids.reduce((s, id) => s + (nodeValues.get(id) ?? 0), 0);
-        const availableHeight = height - (ids.length - 1) * nodePadding;
-        let y = 0;
-        for (const id of ids) {
+        const gapCount = ids.length - 1;
+        const availableHeight = height - gapCount * nodePadding;
+        const renderedHeights = ids.map((id) => {
             const val = nodeValues.get(id) ?? 0;
             const h = totalValue > 0 ? (val / totalValue) * availableHeight : availableHeight / ids.length;
-            const renderedH = Math.max(minLinkWidth, h);
+            return Math.max(minLinkWidth, h);
+        });
+        const sumRendered = renderedHeights.reduce((s, h) => s + h, 0);
+        const paddingBudget = gapCount > 0 ? (height - sumRendered) / gapCount : 0;
+        const effectivePadding = Math.max(0, Math.min(nodePadding, paddingBudget));
+        const scale = sumRendered > height && sumRendered > 0 ? height / sumRendered : 1;
+        columnPadding.set(col, effectivePadding);
+        let y = 0;
+        for (let index = 0; index < ids.length; index++) {
+            const id = ids[index];
+            const renderedH = renderedHeights[index] * scale;
             nodeY.set(id, y);
             nodeH.set(id, renderedH);
-            y += renderedH + nodePadding;
+            y += renderedH + effectivePadding;
         }
     }
     // Iterative relaxation (upstream pass)
     for (let iter = 0; iter < iterations; iter++) {
-        for (const [, ids] of columnGroups) {
+        for (const [col, ids] of columnGroups) {
+            const padding = columnPadding.get(col) ?? nodePadding;
             for (const id of ids) {
                 const deps = incoming.get(id) ?? [];
                 const totalDepValue = deps.reduce((s, d) => s + d.value, 0);
@@ -128,15 +140,13 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                     nodeY.set(id, Math.max(0, weightedY - (nodeH.get(id) ?? 0) / 2));
                 }
             }
-            // Resolve overlaps: push down from the top.
-            ids.sort((a, b) => (nodeY.get(a) ?? 0) - (nodeY.get(b) ?? 0));
             let y = 0;
             for (const id of ids) {
                 const cy = nodeY.get(id) ?? 0;
                 if (cy < y) {
                     nodeY.set(id, y);
                 }
-                y = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0) + nodePadding;
+                y = (nodeY.get(id) ?? 0) + (nodeH.get(id) ?? 0) + padding;
             }
             // Resolve overlaps: pull back up from the bottom. The push-down pass
             // above only ever grows a column's block downward, so a fan-out whose
@@ -151,7 +161,7 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
                 if (nodeBottom > bottomBoundary) {
                     nodeY.set(id, bottomBoundary - (nodeH.get(id) ?? 0));
                 }
-                bottomBoundary = (nodeY.get(id) ?? 0) - nodePadding;
+                bottomBoundary = (nodeY.get(id) ?? 0) - padding;
             }
             // Re-centre the column's node group within [0, height]: once overlaps
             // are resolved, anchor the block at the midpoint of its remaining
@@ -184,25 +194,53 @@ export function computeSankeyLayout(nodes, links, width, height, nodeWidth = 16,
         column: columns.get(n.id) ?? 0
     }));
     const nodeById = new Map(computedNodes.map((n) => [n.id, n]));
-    // Build computed links with Bezier paths
-    const sourceOffsets = new Map();
-    const targetOffsets = new Map();
-    for (const n of nodes) {
-        sourceOffsets.set(n.id, nodeY.get(n.id) ?? 0);
-        targetOffsets.set(n.id, nodeY.get(n.id) ?? 0);
+    const linkKey = (l) => `${l.source}${l.target}`;
+    const linkWidths = new Map();
+    for (const l of links) {
+        const sVal = nodeValues.get(l.source) ?? 1;
+        const sourceH = nodeH.get(l.source) ?? 0;
+        linkWidths.set(linkKey(l), Math.max(minLinkWidth, (l.value / Math.max(sVal, 1)) * sourceH));
+    }
+    const linkSy = new Map();
+    const linkTy = new Map();
+    const bySource = new Map();
+    const byTarget = new Map();
+    for (const l of links) {
+        if (!bySource.has(l.source)) {
+            bySource.set(l.source, []);
+        }
+        bySource.get(l.source).push(l);
+        if (!byTarget.has(l.target)) {
+            byTarget.set(l.target, []);
+        }
+        byTarget.get(l.target).push(l);
+    }
+    for (const [source, group] of bySource) {
+        group.sort((a, b) => (nodeY.get(a.target) ?? 0) - (nodeY.get(b.target) ?? 0));
+        let offset = nodeY.get(source) ?? 0;
+        for (const l of group) {
+            const w = linkWidths.get(linkKey(l)) ?? 0;
+            linkSy.set(linkKey(l), offset + w / 2);
+            offset += w;
+        }
+    }
+    for (const [target, group] of byTarget) {
+        group.sort((a, b) => (nodeY.get(a.source) ?? 0) - (nodeY.get(b.source) ?? 0));
+        let offset = nodeY.get(target) ?? 0;
+        for (const l of group) {
+            const w = linkWidths.get(linkKey(l)) ?? 0;
+            linkTy.set(linkKey(l), offset + w / 2);
+            offset += w;
+        }
     }
     const computedLinks = links.map((l) => {
         const sourceNode = nodeById.get(l.source);
         const targetNode = nodeById.get(l.target);
-        const sVal = nodeValues.get(l.source) ?? 1;
-        const sourceH = nodeH.get(l.source) ?? 0;
-        const linkWidth = Math.max(minLinkWidth, (l.value / Math.max(sVal, 1)) * sourceH);
+        const linkWidth = linkWidths.get(linkKey(l)) ?? minLinkWidth;
         const sx = (sourceNode?.x ?? 0) + nodeWidth;
-        const sy = (sourceOffsets.get(l.source) ?? 0) + linkWidth / 2;
+        const sy = linkSy.get(linkKey(l)) ?? 0;
         const tx = targetNode?.x ?? 0;
-        const ty = (targetOffsets.get(l.target) ?? 0) + linkWidth / 2;
-        sourceOffsets.set(l.source, (sourceOffsets.get(l.source) ?? 0) + linkWidth);
-        targetOffsets.set(l.target, (targetOffsets.get(l.target) ?? 0) + linkWidth);
+        const ty = linkTy.get(linkKey(l)) ?? 0;
         const midX = (sx + tx) / 2;
         const path = `M ${sx} ${sy} C ${midX} ${sy}, ${midX} ${ty}, ${tx} ${ty}`;
         return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juspay/svelte-ui-components",
-  "version": "2.81.0",
+  "version": "2.81.2",
   "description": "A themeable Svelte 5 UI component library with CSS custom property driven styling",
   "keywords": [
     "svelte",