@juspay/svelte-ui-components 2.36.0 → 2.38.0

package/dist/Table/Table.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
-  import type { TableProperties } from './properties';
+  import type { TableProperties, TableCheckboxSelectionConfig } from './properties';
   import type { JSONValue } from 'type-decoder';
+  import { SvelteSet } from 'svelte/reactivity';
   import Button from '../Button/Button.svelte';
   import chevronUpSvg from '../assets/chevron-up.svg?raw';
   import chevronDownSvg from '../assets/chevron-down.svg?raw';
   import sortDefaultSvg from '../assets/sort-default.svg?raw';
+  import searchSvg from '../assets/search.svg?raw';
+  import closeSvg from '../assets/close.svg?raw';
+  import checkmarkSvg from '../assets/checkmark.svg?raw';
+  import minusSvg from '../assets/minus.svg?raw';
 
   let {
     tableTitle = '',
@@ -24,16 +29,21 @@
     empty,
     onRowClick,
     onSort,
+    onCellChange: _onCellChange,
     classes,
     paginatorSlot,
     getRowTestId,
-    getCellTestId
+    getCellTestId,
+    checkboxSelection,
+    searchConfig,
+    onSearchChange
   }: TableProperties = $props();
 
+  // ─── Sort state ──────────────────────────────────────────────────────────────
   let sortColumn = $state<number | null>(null);
   let sortDirection = $state<'asc' | 'desc'>('asc');
 
-  function isColumnSortable(colIndex: number): boolean {
+  const isColumnSortable = (colIndex: number): boolean => {
     if (!sortable) {
       return false;
     }
@@ -41,8 +51,61 @@
       return sortableColumns.includes(colIndex);
     }
     return true;
-  }
+  };
+
+  const handleSort = (colIndex: number): void => {
+    if (!isColumnSortable(colIndex)) {
+      return;
+    }
+
+    if (sortColumn === colIndex) {
+      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+    } else {
+      sortColumn = colIndex;
+      sortDirection = 'asc';
+    }
+    onSort?.(colIndex, sortDirection);
+  };
 
+  // ─── Row click ───────────────────────────────────────────────────────────────
+  const handleRowClick = (rowIndex: number, rowData: JSONValue[]): void => {
+    onRowClick?.(rowIndex, rowData);
+  };
+
+  const handleRowKeydown = (event: KeyboardEvent, rowIndex: number, rowData: JSONValue[]): void => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onRowClick?.(rowIndex, rowData);
+    }
+  };
+
+  let isRowClickable = $derived(typeof onRowClick === 'function');
+  let isStickyHeader = $derived(stickyHeader || isTableScrollable);
+
+  // ─── C2-3: Search ─────────────────────────────────────────────────────────
+  let searchTerm = $state('');
+  let hasSearchConfig = $derived(!!searchConfig);
+  let isServerSearch = $derived(typeof onSearchChange === 'function');
+  let searchInputRef = $state<HTMLInputElement | null>(null);
+
+  const handleSearchInput = (): void => {
+    if (!searchInputRef) {
+      return;
+    }
+    searchTerm = searchInputRef.value;
+    if (isServerSearch) {
+      onSearchChange?.(searchTerm);
+    }
+  };
+
+  const clearSearch = (): void => {
+    searchTerm = '';
+    if (isServerSearch) {
+      onSearchChange?.('');
+    }
+  };
+
+  // ─── Sort + Search pipeline ──────────────────────────────────────────────────
   let sortedTableData = $derived.by(() => {
     if (sortColumn === null) {
       return [...tableData];
@@ -76,33 +139,158 @@
     });
   });
 
-  function handleSort(colIndex: number) {
-    if (!isColumnSortable(colIndex)) {
+  /**
+   * Client-side filtered rows. When `onSearchChange` is provided (server
+   * delegation) or `searchConfig` is absent, the sorted data passes through
+   * untouched.
+   */
+  let filteredTableData = $derived.by(() => {
+    if (!hasSearchConfig || isServerSearch || searchTerm.trim() === '') {
+      return sortedTableData;
+    }
+
+    const term = searchTerm.trim().toLowerCase();
+    const colIndices = searchConfig?.searchableColumnIndices;
+
+    return sortedTableData.filter((row) => {
+      const indicesToSearch = colIndices ? colIndices : row.map((_cell, idx) => idx);
+      return indicesToSearch.some((idx) => {
+        const cellValue = row[idx];
+        return cellValue !== null && String(cellValue).toLowerCase().includes(term);
+      });
+    });
+  });
+
+  // ─── C2-1: Checkbox selection ─────────────────────────────────────────────
+  const resolveRowId = (
+    cfg: TableCheckboxSelectionConfig,
+    row: JSONValue[],
+    rowIndex: number
+  ): string => {
+    return cfg.getRowId ? cfg.getRowId(row, rowIndex) : String(rowIndex);
+  };
+
+  let selectedIds = new SvelteSet<string>();
+
+  const isRowDisabled = (rowId: string): boolean => {
+    return checkboxSelection?.disabledRowIds?.has(rowId) ?? false;
+  };
+
+  const isRowSelected = (rowId: string): boolean => {
+    return selectedIds.has(rowId);
+  };
+
+  /**
+   * Stable string ID for every row in the currently visible (filtered) view.
+   *
+   * Each entry is resolved by iterating `filteredTableData` and looking up the
+   * row's pre-sort position via `sortedTableData.indexOf(row)`. Using the
+   * pre-filter index as the default numeric ID keeps `String(originalIndex)`
+   * stable even when the visible set shrinks or expands as the search term
+   * changes — so a row that was "row 2" in the full set keeps ID `"2"` even
+   * when it becomes the only visible result.
+   */
+  let filteredRowIds = $derived.by((): string[] => {
+    return filteredTableData.map((row, fallbackIndex) => {
+      const originalIndex = sortedTableData.indexOf(row);
+      const stableIndex = originalIndex === -1 ? fallbackIndex : originalIndex;
+      if (checkboxSelection && checkboxSelection.enabled !== false) {
+        return resolveRowId(checkboxSelection, row, stableIndex);
+      }
+      return String(stableIndex);
+    });
+  });
+
+  /**
+   * IDs of all selectable (non-disabled) rows in the currently filtered view.
+   *
+   * Iterates `filteredTableData` (the post-filter, post-sort visible rows) and
+   * resolves each row's stable ID using `sortedTableData.indexOf(row)` for the
+   * pre-filter positional index. When `getRowId` is absent this keeps the
+   * default numeric ID (`String(originalIndex)`) unchanged regardless of which
+   * rows the current search term hides, preventing ID collisions as the visible
+   * set changes.
+   */
+  let selectableRowIds = $derived.by((): string[] => {
+    if (!checkboxSelection || checkboxSelection.enabled === false) {
+      return [];
+    }
+    return filteredRowIds.filter((rowId) => !isRowDisabled(rowId));
+  });
+
+  /**
+   * Header checkbox tri-state.
+   * - `'all'`   → every selectable row is selected → show checked
+   * - `'some'`  → some but not all → show indeterminate
+   * - `'none'`  → nothing selected → show unchecked
+   */
+  let headerCheckboxState = $derived.by((): 'all' | 'some' | 'none' => {
+    if (
+      !checkboxSelection ||
+      checkboxSelection.enabled === false ||
+      selectableRowIds.length === 0
+    ) {
+      return 'none';
+    }
+    const selectedCount = selectableRowIds.filter((rowId) => selectedIds.has(rowId)).length;
+    if (selectedCount === 0) {
+      return 'none';
+    }
+    if (selectedCount === selectableRowIds.length) {
+      return 'all';
+    }
+    return 'some';
+  });
+
+  const toggleRowSelection = (rowId: string): void => {
+    if (!checkboxSelection || checkboxSelection.enabled === false || isRowDisabled(rowId)) {
       return;
     }
 
-    if (sortColumn === colIndex) {
-      sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
+    if (checkboxSelection.selectionMode === 'single') {
+      const wasSelected = selectedIds.has(rowId);
+      selectedIds.clear();
+      if (!wasSelected) {
+        selectedIds.add(rowId);
+      }
     } else {
-      sortColumn = colIndex;
-      sortDirection = 'asc';
+      if (selectedIds.has(rowId)) {
+        selectedIds.delete(rowId);
+      } else {
+        selectedIds.add(rowId);
+      }
     }
-    onSort?.(colIndex, sortDirection);
-  }
+    checkboxSelection.onSelectionChange?.(new Set(selectedIds));
+  };
 
-  function handleRowClick(rowIndex: number, rowData: JSONValue[]) {
-    onRowClick?.(rowIndex, rowData);
-  }
+  const toggleAllSelection = (): void => {
+    if (!checkboxSelection || checkboxSelection.enabled === false) {
+      return;
+    }
+    // selectableRowIds already excludes disabled rows
+    if (headerCheckboxState === 'all') {
+      // deselect all selectable rows in the current view
+      for (const rowId of selectableRowIds) {
+        selectedIds.delete(rowId);
+      }
+    } else {
+      // select all selectable rows in the current view
+      for (const rowId of selectableRowIds) {
+        selectedIds.add(rowId);
+      }
+    }
+    checkboxSelection.onSelectionChange?.(new Set(selectedIds));
+  };
 
-  function handleRowKeydown(event: KeyboardEvent, rowIndex: number, rowData: JSONValue[]) {
-    if (event.key === 'Enter' || event.key === ' ') {
+  const handleCheckboxKeydown = (event: KeyboardEvent, action: () => void): void => {
+    if (event.key === ' ' || event.key === 'Enter') {
       event.preventDefault();
-      onRowClick?.(rowIndex, rowData);
+      action();
     }
-  }
+  };
 
-  let isRowClickable = $derived(typeof onRowClick === 'function');
-  let isStickyHeader = $derived(stickyHeader || isTableScrollable);
+  let isCheckboxMode = $derived(!!checkboxSelection && checkboxSelection.enabled !== false);
+  let isSingleSelect = $derived(checkboxSelection?.selectionMode === 'single');
 </script>
 
 {#if typeof tableTitle === 'string' && tableTitle.length > 0}
@@ -110,6 +298,37 @@
     {tableTitle}
   </div>
 {/if}
+
+{#if hasSearchConfig}
+  <div class="table-search">
+    <span class="table-search-icon">
+      <!-- eslint-disable svelte/no-at-html-tags -->
+      {@html searchSvg}
+    </span>
+    <input
+      bind:this={searchInputRef}
+      class="table-search-input"
+      type="search"
+      placeholder={searchConfig?.placeholder ?? 'Search…'}
+      value={searchTerm}
+      oninput={handleSearchInput}
+      data-pw={searchConfig?.testId ?? null}
+      aria-label={searchConfig?.placeholder ?? 'Search'}
+    />
+    {#if searchTerm.length > 0}
+      <button
+        class="table-search-clear"
+        type="button"
+        onclick={clearSearch}
+        aria-label="Clear search"
+      >
+        <!-- eslint-disable svelte/no-at-html-tags -->
+        {@html closeSvg}
+      </button>
+    {/if}
+  </div>
+{/if}
+
 {#if tableHeaders.length !== 0 || tableData.length !== 0}
   <div
     class="table-container {isTableScrollable ? 'scrollable-table' : ''} {classes ?? ''}"
@@ -121,6 +340,37 @@
       {/if}
       <thead>
         <tr>
+          {#if isCheckboxMode && !isSingleSelect}
+            <th class="table-header table-checkbox-col" class:table-header-sticky={isStickyHeader}>
+              <!-- Header tri-state checkbox -->
+              <span
+                class="table-checkbox-box"
+                class:checked={headerCheckboxState === 'all'}
+                class:indeterminate={headerCheckboxState === 'some'}
+                role="checkbox"
+                tabindex={0}
+                aria-checked={headerCheckboxState === 'some'
+                  ? 'mixed'
+                  : headerCheckboxState === 'all'}
+                aria-label="Select all rows"
+                onclick={toggleAllSelection}
+                onkeydown={(keyboardEvent) =>
+                  handleCheckboxKeydown(keyboardEvent, toggleAllSelection)}
+              >
+                {#if headerCheckboxState === 'all'}
+                  <!-- eslint-disable svelte/no-at-html-tags -->
+                  <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
+                {:else if headerCheckboxState === 'some'}
+                  <!-- eslint-disable svelte/no-at-html-tags -->
+                  <span class="table-checkbox-icon">{@html minusSvg}</span>
+                {/if}
+              </span>
+            </th>
+          {:else if isCheckboxMode && isSingleSelect}
+            <!-- In single-select mode the header cell is an empty spacer -->
+            <th class="table-header table-checkbox-col" class:table-header-sticky={isStickyHeader}>
+            </th>
+          {/if}
           {#each tableHeaders as header, colIndex (colIndex)}
             <th class="table-header" class:table-header-sticky={isStickyHeader}>
               <span class="table-header-content">
@@ -163,17 +413,24 @@
         </tr>
       </thead>
       <tbody>
-        {#if sortedTableData.length === 0 && typeof empty === 'function'}
+        {#if filteredTableData.length === 0 && typeof empty === 'function'}
           <tr>
-            <td class="table-empty" colspan={tableHeaders.length}>
+            <td
+              class="table-empty"
+              colspan={isCheckboxMode ? tableHeaders.length + 1 : tableHeaders.length}
+            >
               {@render empty()}
             </td>
           </tr>
         {:else}
-          {#each sortedTableData as row, rowIndex (rowIndex)}
+          {#each filteredTableData as row, rowIndex (filteredRowIds[rowIndex])}
+            {@const rowId = filteredRowIds[rowIndex]}
+            {@const rowDisabled = isCheckboxMode && isRowDisabled(rowId)}
+            {@const rowSelected = isCheckboxMode && isRowSelected(rowId)}
             <tr
               class="table-row"
               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}
               onkeydown={isRowClickable
@@ -181,6 +438,32 @@
                 : null}
               tabindex={isRowClickable ? 0 : null}
             >
+              {#if isCheckboxMode}
+                <td class="table-content table-checkbox-col">
+                  <span
+                    class="table-checkbox-box"
+                    class:checked={rowSelected}
+                    class:disabled={rowDisabled}
+                    role="checkbox"
+                    tabindex={rowDisabled ? -1 : 0}
+                    aria-checked={rowSelected}
+                    aria-disabled={rowDisabled}
+                    onclick={(mouseEvent) => {
+                      mouseEvent.stopPropagation();
+                      toggleRowSelection(rowId);
+                    }}
+                    onkeydown={(keyboardEvent) => {
+                      keyboardEvent.stopPropagation();
+                      handleCheckboxKeydown(keyboardEvent, () => toggleRowSelection(rowId));
+                    }}
+                  >
+                    {#if rowSelected}
+                      <!-- eslint-disable svelte/no-at-html-tags -->
+                      <span class="table-checkbox-icon">{@html checkmarkSvg}</span>
+                    {/if}
+                  </span>
+                </td>
+              {/if}
               {#each row as cellValue, colIndex (colIndex)}
                 <td
                   class="table-content"
@@ -211,6 +494,7 @@
 {/if}
 
 <style>
+  /* ── Title ─────────────────────────────────────────────────────────────── */
   .table-title {
     margin: var(--table-title-margin, 0px 0px 12px 0px);
     font-size: var(--table-title-font-size, var(--table-tile-font-size, 18px));
@@ -220,6 +504,78 @@
     padding: var(--table-title-padding);
   }
 
+  /* ── C2-3 Search bar ────────────────────────────────────────────────────── */
+  .table-search {
+    display: flex;
+    align-items: center;
+    gap: var(--table-search-gap, 8px);
+    padding: var(--table-search-padding, 8px 12px);
+    border: var(--table-search-border, 1px solid #e5e7eb);
+    border-radius: var(--table-search-border-radius, 8px);
+    background-color: var(--table-search-background, #ffffff);
+    margin-bottom: var(--table-search-margin-bottom, 8px);
+  }
+
+  .table-search-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--table-search-icon-color, #9ca3af);
+    flex-shrink: 0;
+  }
+
+  .table-search-icon :global(svg) {
+    width: var(--table-search-icon-size, 16px);
+    height: var(--table-search-icon-size, 16px);
+  }
+
+  .table-search-input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(--table-search-font-size, 14px);
+    color: var(--table-search-color, #111827);
+    min-width: 0;
+  }
+
+  .table-search-input:focus-visible {
+    outline: 2px solid var(--table-focus-outline-color, #3b82f6);
+    outline-offset: 2px;
+    border-radius: var(--table-search-focus-border-radius, 2px);
+  }
+
+  .table-search-input::placeholder {
+    color: var(--table-search-placeholder-color, #9ca3af);
+  }
+
+  /* Hide browser-default clear button on search inputs */
+  .table-search-input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .table-search-clear {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px;
+    border: none;
+    background: transparent;
+    color: var(--table-search-clear-color, #6b7280);
+    cursor: pointer;
+    border-radius: 4px;
+    flex-shrink: 0;
+  }
+
+  .table-search-clear:hover {
+    color: var(--table-search-clear-hover-color, #111827);
+    background-color: var(--table-search-clear-hover-background, rgba(0, 0, 0, 0.05));
+  }
+
+  .table-search-clear :global(svg) {
+    width: var(--table-search-clear-icon-size, 14px);
+    height: var(--table-search-clear-icon-size, 14px);
+  }
+
+  /* ── Container ──────────────────────────────────────────────────────────── */
   .table-container {
     border: var(--table-border, 1px solid #e5e7eb);
     border-radius: var(--table-border-radius, 8px);
@@ -313,6 +669,77 @@
     outline-offset: -2px;
   }
 
+  /* C2-1: Selected row highlight */
+  .table-row-selected {
+    background-color: var(--table-row-selected-background, #eff6ff);
+  }
+
+  .table-row-selected > .table-content {
+    background-color: var(--table-row-selected-background, #eff6ff);
+  }
+
+  /* ── C2-1 Checkbox column ───────────────────────────────────────────────── */
+  .table-checkbox-col {
+    width: var(--table-checkbox-col-width, 44px);
+    padding: var(--table-checkbox-col-padding, 12px 12px);
+  }
+
+  .table-checkbox-box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--table-checkbox-size, 18px);
+    height: var(--table-checkbox-size, 18px);
+    border: var(--table-checkbox-border, 2px solid #9ca3af);
+    border-radius: var(--table-checkbox-border-radius, 3px);
+    background-color: var(--table-checkbox-background, transparent);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition:
+      background-color 0.15s,
+      border-color 0.15s;
+    user-select: none;
+  }
+
+  .table-checkbox-box:focus-visible {
+    outline: none;
+    box-shadow: var(--table-checkbox-focus-ring, 0 0 0 3px rgba(59, 130, 246, 0.3));
+  }
+
+  .table-checkbox-box:not(.disabled):hover {
+    border-color: var(--table-checkbox-hover-border-color, #6b7280);
+  }
+
+  .table-checkbox-box.checked {
+    background-color: var(--table-checkbox-checked-background, #2563eb);
+    border-color: var(--table-checkbox-checked-border-color, #2563eb);
+  }
+
+  .table-checkbox-box.indeterminate {
+    background-color: var(--table-checkbox-indeterminate-background, #2563eb);
+    border-color: var(--table-checkbox-indeterminate-border-color, #2563eb);
+  }
+
+  .table-checkbox-box.disabled {
+    opacity: var(--table-checkbox-disabled-opacity, 0.4);
+    cursor: not-allowed;
+  }
+
+  .table-checkbox-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--table-checkbox-icon-size, 12px);
+    height: var(--table-checkbox-icon-size, 12px);
+    color: var(--table-checkbox-icon-color, #ffffff);
+  }
+
+  .table-checkbox-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ── Sort button ────────────────────────────────────────────────────────── */
   .sort-button {
     --button-color: transparent;
     --button-border: none;
@@ -351,18 +778,21 @@
     opacity: var(--table-sort-idle-hover-opacity, 0.85);
   }
 
+  /* ── Empty ──────────────────────────────────────────────────────────────── */
   .table-empty {
     padding: var(--table-empty-padding, 32px 24px);
     text-align: center;
     color: var(--table-empty-color, #9ca3af);
   }
 
+  /* ── Footer ─────────────────────────────────────────────────────────────── */
   .table-footer {
     border-top: var(--table-footer-border, 1px solid #e5e7eb);
     padding: var(--table-footer-padding, 8px 16px);
     background-color: var(--table-footer-background, transparent);
   }
 
+  /* ── Accessibility ──────────────────────────────────────────────────────── */
   .sr-only {
     position: absolute;
     width: 1px;

package/dist/Table/properties.d.ts

@@ -1,6 +1,45 @@
 import type { JSONValue } from 'type-decoder';
 import type { Snippet } from 'svelte';
 export type SortDirection = 'asc' | 'desc';
+/**
+ * Configuration for row checkbox selection (C2-1).
+ *
+ * - `enabled` — activates the checkbox column.
+ * - `selectionMode` — `'single'` allows at most one row selected at a time;
+ *   `'multiple'` (default) allows arbitrary many.
+ * - `onSelectionChange` — called whenever the selection set changes, receives
+ *   the new set of selected row IDs.
+ * - `getRowId` — derives a stable string ID from a row + its index. Defaults
+ *   to `String(rowIndex)` when omitted.
+ * - `disabledRowIds` — rows whose IDs appear in this set render a disabled,
+ *   unchecked checkbox and cannot be selected.
+ */
+export type TableCheckboxSelectionConfig = {
+    /**
+     * Whether to activate the checkbox column. Defaults to `true` when the
+     * config object is provided — the presence of `checkboxSelection` already
+     * signals the intent to enable selection, so `enabled: false` is redundant.
+     * Kept for explicit opt-out without removing the config object.
+     */
+    enabled?: boolean;
+    selectionMode?: 'single' | 'multiple';
+    onSelectionChange?: (selectedIds: Set<string>) => void;
+    getRowId?: (row: JSONValue[], rowIndex: number) => string;
+    disabledRowIds?: Set<string>;
+};
+/**
+ * Configuration for the built-in search bar (C2-3).
+ *
+ * - `placeholder` — input placeholder text (default "Search…").
+ * - `searchableColumnIndices` — restrict filtering to these column indices.
+ *   When omitted all columns are searched.
+ * - `testId` — `data-pw` attribute on the search input element.
+ */
+export type TableSearchConfig = {
+    placeholder?: string;
+    searchableColumnIndices?: number[];
+    testId?: string;
+};
 export type TableProperties = OptionalTableProperties & TableEventProperties;
 export type OptionalTableProperties = {
     tableTitle?: string | null;
@@ -25,8 +64,57 @@ export type OptionalTableProperties = {
     getRowTestId?: (row: JSONValue[], rowIndex: number) => string;
     /** Return a data-pw value for the given cell. */
     getCellTestId?: (row: JSONValue[], column: JSONValue, rowIndex: number) => string;
+    /**
+     * C2-1: Opt-in checkbox row-selection.
+     * Pass `{ enabled: true }` to show a leading checkbox column.
+     */
+    checkboxSelection?: TableCheckboxSelectionConfig;
+    /**
+     * C2-3: Opt-in built-in search bar rendered above the table.
+     * Client-side filtering is performed by default; pass `onSearchChange` to
+     * delegate to the server instead.
+     */
+    searchConfig?: TableSearchConfig;
 };
 export type TableEventProperties = {
     onRowClick?: (rowIndex: number, rowData: JSONValue[]) => void;
     onSort?: (columnIndex: number, direction: SortDirection) => void;
+    /**
+     * C2-2: Callback invoked when a cell value changes via an editable element
+     * inside the consumer's `cell` snippet (e.g. an `<Input>` or `<Select>`).
+     *
+     * **How to wire it**: Svelte 5 snippets execute in the consumer's scope, so
+     * `onCellChange` is NOT forwarded by Table — you must close over your own
+     * handler directly inside the snippet:
+     *
+     * ```svelte
+     * <script>
+     *   let rows = $state(myData);
+     *   const handleCellChange = (rowIndex, colIndex, newValue) => {
+     *     rows[rowIndex][colIndex] = newValue;
+     *   };
+     * </script>
+     *
+     * <Table tableData={rows}>
+     *   {#snippet cell(value, rowIndex, colIndex)}
+     *     <Input
+     *       value={String(value ?? '')}
+     *       onInput={(newValue) => handleCellChange(rowIndex, colIndex, newValue)}
+     *     />
+     *   {/snippet}
+     * </Table>
+     * ```
+     *
+     * Table never mutates `tableData`; the consumer owns the source-of-truth
+     * array. Pass `onCellChange` as a top-level prop if you want Table to expose
+     * this handler to parent components via the standard props channel — it does
+     * not change the wiring inside the snippet.
+     */
+    onCellChange?: (rowIndex: number, colIndex: number, newValue: JSONValue) => void;
+    /**
+     * C2-3: When provided, the built-in client-side filtering is disabled and
+     * this callback is called on every search input change instead, letting the
+     * server decide what rows to show.
+     */
+    onSearchChange?: (searchTerm: string) => void;
 };

package/dist/Toast/Toast.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { fly } from 'svelte/transition';
   import type { ToastDirection, ToastProperties } from './properties';
   import type { FlyAnimationConfig } from '../types';
-  import { onMount } from 'svelte';
   import Img from '../Img/Img.svelte';
 
   let {
@@ -29,8 +29,11 @@
 
   const animationConfig: FlyAnimationConfig = $derived(getAnimationConfig(overlapPage, direction));
 
-  let showToast = $state(false);
-  let timeoutId = $state<ReturnType<typeof setTimeout> | null>(null);
+  let showToast = $state(true);
+
+  const rootClass = $derived(
+    ['toast', type ?? '', classes ?? ''].filter((cls) => cls.length > 0).join(' ')
+  );
 
   function hideToast() {
     showToast = false;
@@ -83,21 +86,30 @@
     };
   }
 
-  onMount(() => {
-    showToast = true;
-    timeoutId = setTimeout(hideToast, duration);
+  // Track `message` and `duration` as reactive dependencies so the timer
+  // restarts whenever either prop changes. Writing `showToast = true` via
+  // `untrack` prevents the assignment from enrolling `showToast` as a
+  // dependency of this effect, which would create an unwanted reactive cycle.
+  // eslint-disable-next-line no-restricted-syntax
+  $effect(() => {
+    void message;
+    void duration;
+
+    untrack(() => {
+      showToast = true;
+    });
+
+    const id = setTimeout(hideToast, duration);
 
     return () => {
-      if (timeoutId !== null) {
-        clearTimeout(timeoutId);
-      }
+      clearTimeout(id);
     };
   });
 </script>
 
 {#if showToast}
   <div
-    class="toast {type ?? ''} {classes ?? ''}"
+    class={rootClass}
     class:no-page-overlap={!overlapPage}
     role="alert"
     aria-live="assertive"
@@ -129,9 +141,9 @@
         tabindex="0"
         role="button"
         onclick={hideToast}
-        onkeypress={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
+        onkeydown={(event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
             hideToast();
           }
         }}

package/dist/Toast/properties.d.ts

@@ -1,10 +1,12 @@
 import type { Snippet } from 'svelte';
 export type ToastType = 'success' | 'error' | 'info' | 'warn';
 export type ToastDirection = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
-export type ToastProperties = ToastEventProperties & {
+export type MandatoryToastProperties = {
+    message: string;
+};
+export type OptionalToastProperties = {
     duration?: number;
     leftIcon?: string | null;
-    message: string;
     subtext?: string | null;
     rightIcon?: string | null;
     type?: ToastType | null;
@@ -24,3 +26,4 @@ export type ToastProperties = ToastEventProperties & {
 export type ToastEventProperties = {
     onToastHide?: () => void;
 };
+export type ToastProperties = MandatoryToastProperties & OptionalToastProperties & ToastEventProperties;

package/package.json

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