@juspay/svelte-ui-components 2.88.0 → 2.89.1

package/dist/Select/Select.svelte

@@ -551,6 +551,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-align: var(--select-value-align, left);
   }
 
   .select-placeholder {
@@ -559,6 +560,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-align: var(--select-value-align, left);
   }
 
   .select-search {

package/dist/Table/BuiltinCell.svelte

@@ -543,6 +543,7 @@
     display: inline-flex;
     align-items: center;
     min-width: 0;
+    width: var(--table-interactive-width, auto);
   }
 
   .builtin-action-group {

package/dist/Table/Table.svelte

@@ -49,7 +49,10 @@
     onSearchChange,
     pagination,
     toolbarSlot,
-    rowNumberColumn = false
+    rowNumberColumn = false,
+    rowNumberLabel = '#',
+    headerTooltipIcon,
+    headerTooltipPosition
   }: TableProperties = $props();
 
   // ─── Keyed column model → positional projection ─────────────────────────────
@@ -111,14 +114,19 @@
   };
 
   // ─── Row click ───────────────────────────────────────────────────────────────
-  const handleRowClick = (rowIndex: number, rowData: JSONValue[]): void => {
-    onRowClick?.(rowIndex, rowData);
+  const handleRowClick = (rowIndex: number, rowData: JSONValue[], originalIndex: number): void => {
+    onRowClick?.(rowIndex, rowData, originalIndex);
   };
 
-  const handleRowKeydown = (event: KeyboardEvent, rowIndex: number, rowData: JSONValue[]): void => {
+  const handleRowKeydown = (
+    event: KeyboardEvent,
+    rowIndex: number,
+    rowData: JSONValue[],
+    originalIndex: number
+  ): void => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
-      onRowClick?.(rowIndex, rowData);
+      onRowClick?.(rowIndex, rowData, originalIndex);
     }
   };
 
@@ -329,9 +337,10 @@
   const resolveRowId = (
     cfg: TableCheckboxSelectionConfig,
     row: JSONValue[],
-    rowIndex: number
+    rowIndex: number,
+    originalIndex: number
   ): string => {
-    return cfg.getRowId ? cfg.getRowId(row, rowIndex) : String(rowIndex);
+    return cfg.getRowId ? cfg.getRowId(row, rowIndex, originalIndex) : String(rowIndex);
   };
 
   let internalSelectedIds = new SvelteSet<string>();
@@ -374,7 +383,12 @@
       const originalIndex = indexMap.get(row) ?? -1;
       const stableIndex = originalIndex === -1 ? fallbackIndex : originalIndex;
       if (checkboxSelection && checkboxSelection.enabled !== false) {
-        return resolveRowId(checkboxSelection, row, stableIndex);
+        return resolveRowId(
+          checkboxSelection,
+          row,
+          stableIndex,
+          originalIndexByRow.get(row) ?? stableIndex
+        );
       }
       return String(stableIndex);
     });
@@ -601,7 +615,7 @@
           {/if}
           {#if rowNumberColumn}
             <th class="table-header table-row-number-col" class:table-header-sticky={isStickyHeader}
-              >#</th
+              >{rowNumberLabel}</th
             >
           {/if}
           {#each effectiveHeaders as header, colIndex (colIndex)}
@@ -622,8 +636,16 @@
                     : null}
               >
                 {#if headerColumn?.tooltip}
-                  <Tooltip text={headerColumn.tooltip}>
-                    <span class="table-header-label">{header}</span>
+                  <Tooltip
+                    text={headerColumn.tooltip}
+                    position={headerTooltipPosition}
+                    icon={headerTooltipIcon}
+                    iconPosition="trailing"
+                  >
+                    <span
+                      class="table-header-label"
+                      class:table-header-label-plain={headerTooltipIcon}>{header}</span
+                    >
                   </Tooltip>
                 {:else}
                   {header}
@@ -725,9 +747,9 @@
               class:table-row-clickable={isRowClickable}
               class:table-row-selected={rowSelected}
               data-pw={typeof getRowTestId === 'function' ? getRowTestId(row, rowIndex) : null}
-              onclick={isRowClickable ? () => handleRowClick(rowIndex, row) : null}
+              onclick={isRowClickable ? () => handleRowClick(rowIndex, row, originalIndex) : null}
               onkeydown={isRowClickable
-                ? (keyboardEvent) => handleRowKeydown(keyboardEvent, rowIndex, row)
+                ? (keyboardEvent) => handleRowKeydown(keyboardEvent, rowIndex, row, originalIndex)
                 : null}
               tabindex={isRowClickable ? 0 : null}
             >
@@ -979,12 +1001,14 @@
     letter-spacing: var(--table-header-letter-spacing, 0.02em);
     text-transform: var(--table-header-text-transform);
     color: var(--table-header-color, var(--table-header-font-color, #6b7280));
+    border-bottom: var(--table-header-border, var(--table-inner-border, none));
   }
 
   .table-header-content {
     display: flex;
     align-items: center;
     gap: 4px;
+    justify-content: var(--table-header-justify, flex-start);
   }
 
   .table-header-label {
@@ -993,6 +1017,10 @@
     cursor: help;
   }
 
+  .table-header-label-plain {
+    text-decoration: none;
+  }
+
   .table-header-filter {
     display: inline-flex;
     align-items: center;
@@ -1245,6 +1273,7 @@
     width: var(--table-row-number-col-width, 48px);
     color: var(--table-row-number-color, #6b7280);
     font-variant-numeric: tabular-nums;
+    text-align: var(--table-row-number-align, var(--table-text-align, left));
   }
 
   /* ── Accessibility ──────────────────────────────────────────────────────── */

package/dist/Table/properties.d.ts

@@ -1,5 +1,6 @@
 import type { JSONValue } from 'type-decoder';
 import type { Snippet } from 'svelte';
+import type { TooltipPosition } from '../Tooltip/properties';
 export type SortDirection = 'asc' | 'desc';
 /**
  * Built-in cell renderer vocabulary for the keyed column model.
@@ -244,7 +245,7 @@ export type TableCheckboxSelectionConfig = {
     enabled?: boolean;
     selectionMode?: 'single' | 'multiple';
     onSelectionChange?: (selectedIds: Set<string>) => void;
-    getRowId?: (row: JSONValue[], rowIndex: number) => string;
+    getRowId?: (row: JSONValue[], rowIndex: number, originalIndex: number) => string;
     disabledRowIds?: Set<string>;
     /**
      * Controlled-selection overlay. Omitted: today's uncontrolled behavior via
@@ -335,6 +336,16 @@ export type OptionalTableProperties = {
     }]>;
     /** Prepends a sequential row-number column (1-based, pagination-aware). */
     rowNumberColumn?: boolean;
+    /** Header label for the row-number column. Defaults to `'#'`. */
+    rowNumberLabel?: string;
+    /**
+     * Icon snippet shown after each header label that has a `tooltip` — the
+     * consumer supplies the glyph; the table places it trailing inside the tooltip
+     * trigger. When set, the default underline affordance on those labels is dropped.
+     */
+    headerTooltipIcon?: Snippet;
+    /** Placement of every header tooltip bubble. Defaults to `'top'`. */
+    headerTooltipPosition?: TooltipPosition;
     sortable?: boolean;
     sortableColumns?: number[];
     stickyHeader?: boolean;
@@ -367,7 +378,7 @@ export type OptionalTableProperties = {
     searchConfig?: TableSearchConfig;
 };
 export type TableEventProperties = {
-    onRowClick?: (rowIndex: number, rowData: JSONValue[]) => void;
+    onRowClick?: (rowIndex: number, rowData: JSONValue[], originalIndex: number) => void;
     onSort?: (columnIndex: number, direction: SortDirection) => void;
     /**
      * C2-2: Callback invoked when a cell value changes via an editable element

package/dist/Tooltip/Tooltip.svelte

@@ -11,6 +11,7 @@
     classes,
     children,
     icon,
+    iconPosition = 'leading',
     content,
     usePortal = false
   }: TooltipProperties = $props();
@@ -355,10 +356,13 @@
   onfocusout={hideTooltip}
   data-pw={testId}
 >
-  {#if typeof icon === 'function'}
+  {#if typeof icon === 'function' && iconPosition === 'leading'}
     <span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
   {/if}
   {@render children()}
+  {#if typeof icon === 'function' && iconPosition === 'trailing'}
+    <span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
+  {/if}
   {#if visible && !usePortal}
     <div
       use:clampInlineBubble

package/dist/Tooltip/properties.d.ts

@@ -9,8 +9,10 @@ export type OptionalTooltipProperties = {
     delay?: number;
     testId?: string | null;
     classes?: string;
-    /** Snippet rendered as a leading icon in the trigger wrapper. No default glyph is provided — consumers supply their own. */
+    /** Snippet rendered as an icon in the trigger wrapper, beside the content. No default glyph is provided — consumers supply their own. Placement is controlled by `iconPosition`. */
     icon?: Snippet;
+    /** Which side of the trigger content the `icon` sits on. Defaults to `'leading'`. */
+    iconPosition?: 'leading' | 'trailing';
     /** Snippet rendered as the bubble body. When provided, replaces the plain `text` string inside the tooltip bubble. */
     content?: Snippet;
     /**

package/package.json

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