@juspay/svelte-ui-components 2.96.1 → 2.96.2

package/dist/Table/BuiltinCell.svelte

@@ -34,12 +34,14 @@
     column,
     value,
     rowIndex,
-    originalIndex
+    originalIndex,
+    usePortal = false
   }: {
     column: TableColumn;
     value: TableCellValue;
     rowIndex: number;
     originalIndex: number;
+    usePortal?: boolean;
   } = $props();
 
   // The td applies column.align as text-align, which flex containers ignore:
@@ -261,6 +263,7 @@
         disabled={selectData.disabled ?? false}
         testId={selectData.testId}
         itemTestId={selectData.itemTestId}
+        {usePortal}
         onchange={(selectedIds) => {
           if (selectedIds.length > 0) {
             column.onSelect?.(rowIndex, selectedIds[0], originalIndex);
@@ -389,6 +392,7 @@
             separator: item.separator
           }))}
           testId={column.testId && `${column.testId}-menu-${rowIndex}`}
+          {usePortal}
           onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
         >
           {#snippet trigger()}
@@ -427,6 +431,7 @@
           separator: item.separator
         }))}
         testId={column.testId && `${column.testId}-popup-${rowIndex}`}
+        {usePortal}
         onselect={(menuItem) => column.onMenuAction?.(rowIndex, menuItem.value, originalIndex)}
       >
         {#snippet trigger()}

package/dist/Table/BuiltinCell.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     value: TableCellValue;
     rowIndex: number;
     originalIndex: number;
+    usePortal?: boolean;
 };
 declare const BuiltinCell: import("svelte").Component<$$ComponentProps, {}, "">;
 type BuiltinCell = ReturnType<typeof BuiltinCell>;

package/dist/Table/Table.svelte

@@ -50,7 +50,8 @@
     rowNumberColumn = false,
     rowNumberLabel = '#',
     headerTooltipIcon,
-    headerTooltipPosition
+    headerTooltipPosition,
+    usePortal = false
   }: TableProperties = $props();
 
   // ─── Keyed column model → positional projection ─────────────────────────────
@@ -867,6 +868,7 @@
                             value={cellValue}
                             {rowIndex}
                             {originalIndex}
+                            {usePortal}
                           />
                         {:else if typeof cell === 'function'}
                           {@render cell(cellValue, rowIndex, colIndex)}

package/dist/Table/properties.d.ts

@@ -408,6 +408,14 @@ export type OptionalTableProperties = {
     headerTooltipIcon?: Snippet;
     /** Placement of every header tooltip bubble. Defaults to `'top'`. */
     headerTooltipPosition?: TooltipPosition;
+    /**
+     * When `true`, in-cell `Select` dropdowns (`type: 'select'` columns) and in-cell
+     * `Menu` popovers (`type: 'action-group'` / `'popup-menu'` columns) are portaled
+     * to `document.body` and positioned `fixed`, so the table's own scroll/overflow
+     * container cannot clip them. Set this on tables whose rows can be near a scroll
+     * edge. Defaults to `false` (in-flow rendering, unchanged).
+     */
+    usePortal?: boolean;
     sortable?: boolean;
     sortableColumns?: number[];
     stickyHeader?: boolean;

package/package.json

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