@juspay/svelte-ui-components 2.76.0 → 2.77.0

package/dist/InputButton/InputButton.svelte

@@ -132,7 +132,7 @@
     --input-focus-border: none;
     --input-box-shadow: none;
     --input-margin: none;
-    --input-width: fit-content;
+    --input-width: 100%;
     font-size: var(--input-font-size, 16px) !important;
     font-weight: var(--input-button-font-weight, 500);
     margin: var(--input-button-margin);

package/dist/Select/Select.svelte

@@ -15,6 +15,8 @@
     disabled = false,
     bottomContent,
     optionIndicator,
+    showSelectAll = false,
+    selectAllLabel = 'Select all',
     triggerSummary,
     testId,
     itemTestId,
@@ -53,6 +55,31 @@
       : items
   );
 
+  type SelectRow = { kind: 'select-all' } | { kind: 'item'; item: SelectItem };
+
+  let selectAllVisible: boolean = $derived(multiple && showSelectAll && filteredItems.length > 0);
+
+  let selectedFilteredCount: number = $derived(
+    filteredItems.filter((item) => value.includes(item.id)).length
+  );
+  let allFilteredSelected: boolean = $derived(
+    filteredItems.length > 0 && selectedFilteredCount === filteredItems.length
+  );
+  let selectAllIndeterminate: boolean = $derived(
+    selectedFilteredCount > 0 && selectedFilteredCount < filteredItems.length
+  );
+
+  // Unified, keyboard-navigable row list: the optional "select all" row shares the same
+  // highlightedIndex space as the options, so arrow-key navigation needs no special casing.
+  let optionRows: SelectRow[] = $derived(
+    selectAllVisible
+      ? [
+          { kind: 'select-all' },
+          ...filteredItems.map((item): SelectRow => ({ kind: 'item', item }))
+        ]
+      : filteredItems.map((item): SelectRow => ({ kind: 'item', item }))
+  );
+
   let displayText = $derived.by(() => {
     const firstId = value.at(0);
     if (typeof firstId !== 'string') {
@@ -111,19 +138,36 @@
     onchange?.(value);
   }
 
+  function toggleSelectAll(): void {
+    if (disabled) {
+      return;
+    }
+    if (allFilteredSelected) {
+      value = value.filter((id) => !filteredItems.some((item) => item.id === id));
+    } else {
+      value = [...new Set([...value, ...filteredItems.map((item) => item.id)])];
+    }
+    onchange?.(value);
+  }
+
   function selectHighlighted(): void {
-    if (highlightedIndex < 0 || highlightedIndex >= filteredItems.length) {
+    if (highlightedIndex < 0 || highlightedIndex >= optionRows.length) {
       return;
     }
-    const item = filteredItems.at(highlightedIndex);
-    if (typeof item === 'object' && item !== null) {
-      selectItem(item.id);
+    const row = optionRows.at(highlightedIndex);
+    if (typeof row !== 'object' || row === null) {
+      return;
+    }
+    if (row.kind === 'select-all') {
+      toggleSelectAll();
+    } else {
+      selectItem(row.item.id);
     }
   }
 
   async function moveHighlight(delta: number): Promise<void> {
     const next = highlightedIndex + delta;
-    if (next < 0 || next >= filteredItems.length) {
+    if (next < 0 || next >= optionRows.length) {
       return;
     }
     highlightedIndex = next;
@@ -355,44 +399,88 @@
       {#if filteredItems.length === 0}
         <div class="select-empty">No results</div>
       {:else}
-        {#each filteredItems as item, index (item.id)}
-          <div
-            class="select-option"
-            class:multi={multiple}
-            class:selected={value.includes(item.id)}
-            class:highlighted={index === highlightedIndex}
-            role="option"
-            id={`${listboxId}-option-${index}`}
-            aria-selected={value.includes(item.id)}
-            tabindex="-1"
-            {...typeof item.testId === 'string'
-              ? { 'data-pw': item.testId }
-              : typeof itemTestId === 'string'
-                ? { 'data-pw': `${itemTestId}-${item.id}` }
-                : typeof testId === 'string'
-                  ? { 'data-pw': `${testId}-${item.id}` }
-                  : {}}
-            onclick={() => selectItem(item.id)}
-            onmouseenter={() => (highlightedIndex = index)}
-          >
-            {#if multiple}
+        {#each optionRows as row, index (row.kind === 'select-all' ? 'select-all' : row.item.id)}
+          {#if row.kind === 'select-all'}
+            <div
+              class="select-option select-all"
+              class:multi={multiple}
+              class:selected={allFilteredSelected}
+              class:highlighted={index === highlightedIndex}
+              role="option"
+              id={`${listboxId}-option-${index}`}
+              aria-selected={allFilteredSelected}
+              aria-label={selectAllIndeterminate
+                ? `${selectAllLabel}, ${selectedFilteredCount} of ${filteredItems.length} selected`
+                : selectAllLabel}
+              tabindex="-1"
+              {...typeof testId === 'string' ? { 'data-pw': `${testId}-select-all` } : {}}
+              onclick={toggleSelectAll}
+              onmouseenter={() => (highlightedIndex = index)}
+            >
               {#if typeof optionIndicator === 'function'}
-                {@render optionIndicator({ checked: value.includes(item.id) })}
+                {@render optionIndicator({
+                  checked: allFilteredSelected,
+                  indeterminate: selectAllIndeterminate
+                })}
               {:else}
                 <span
                   class="select-option-indicator"
-                  class:checked={value.includes(item.id)}
+                  class:checked={allFilteredSelected}
+                  class:indeterminate={selectAllIndeterminate}
                   aria-hidden="true"
                 >
-                  {#if value.includes(item.id)}
+                  {#if allFilteredSelected}
                     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                     <span class="select-option-check">{@html checkmarkSvg}</span>
+                  {:else if selectAllIndeterminate}
+                    <span class="select-option-dash"></span>
                   {/if}
                 </span>
               {/if}
-            {/if}
-            {item.label}
-          </div>
+              {selectAllLabel}
+            </div>
+          {:else}
+            <div
+              class="select-option"
+              class:multi={multiple}
+              class:selected={value.includes(row.item.id)}
+              class:highlighted={index === highlightedIndex}
+              role="option"
+              id={`${listboxId}-option-${index}`}
+              aria-selected={value.includes(row.item.id)}
+              tabindex="-1"
+              {...typeof row.item.testId === 'string'
+                ? { 'data-pw': row.item.testId }
+                : typeof itemTestId === 'string'
+                  ? { 'data-pw': `${itemTestId}-${row.item.id}` }
+                  : typeof testId === 'string'
+                    ? { 'data-pw': `${testId}-${row.item.id}` }
+                    : {}}
+              onclick={() => selectItem(row.item.id)}
+              onmouseenter={() => (highlightedIndex = index)}
+            >
+              {#if multiple}
+                {#if typeof optionIndicator === 'function'}
+                  {@render optionIndicator({
+                    checked: value.includes(row.item.id),
+                    indeterminate: false
+                  })}
+                {:else}
+                  <span
+                    class="select-option-indicator"
+                    class:checked={value.includes(row.item.id)}
+                    aria-hidden="true"
+                  >
+                    {#if value.includes(row.item.id)}
+                      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                      <span class="select-option-check">{@html checkmarkSvg}</span>
+                    {/if}
+                  </span>
+                {/if}
+              {/if}
+              {row.item.label}
+            </div>
+          {/if}
         {/each}
       {/if}
       {#if typeof bottomContent === 'function'}
@@ -598,6 +686,23 @@
     height: 100%;
   }
 
+  .select-option-indicator.indeterminate {
+    background-color: var(--select-option-indicator-checked-background, #2196f3);
+    border-color: var(--select-option-indicator-checked-border-color, #2196f3);
+  }
+
+  .select-option-dash {
+    width: var(--select-option-indicator-dash-size, 10px);
+    height: var(--select-option-indicator-dash-thickness, 2px);
+    border-radius: 1px;
+    background-color: var(--select-option-indicator-dash-color, #ffffff);
+  }
+
+  .select-option.select-all {
+    border-bottom: var(--select-all-border, none);
+    font-weight: var(--select-all-font-weight, inherit);
+  }
+
   .select-empty {
     padding: var(--select-empty-padding, 8px 12px);
     color: var(--select-empty-color, #999999);

package/dist/Select/properties.d.ts

@@ -18,16 +18,28 @@ export type OptionalSelectProperties = {
     disabled?: boolean;
     bottomContent?: Snippet;
     /**
-     * Snippet for rendering a custom multi-select option indicator, receiving `{ checked }`.
-     * When omitted, multiple-mode options render a design-system checkbox box (bordered square
-     * that fills and shows a checkmark when selected), themeable via the `--select-option-indicator-*`
-     * CSS variables: `-size` (18px), `-border`, `-border-radius`, `-background`,
-     * `-checked-background`, `-checked-border-color`, `-check-size`, `-check-color`. Provide this
-     * snippet to fully replace the indicator (e.g. to restore the legacy ☑/☐ glyph).
+     * Snippet for rendering a custom multi-select option indicator, receiving `{ checked, indeterminate }`.
+     * `indeterminate` is `true` only for the `showSelectAll` row when some — but not all — listed options
+     * are selected; it is always `false` for individual option rows. When omitted, multiple-mode options
+     * render a design-system checkbox box (bordered
+     * square that fills and shows a checkmark when selected, or a centred dash when indeterminate),
+     * themeable via the `--select-option-indicator-*` CSS variables: `-size` (18px), `-border`,
+     * `-border-radius`, `-background`, `-checked-background`, `-checked-border-color`, `-check-size`,
+     * `-check-color`, `-dash-size`, `-dash-thickness`, `-dash-color`. Provide this snippet to fully
+     * replace the indicator (e.g. to restore the legacy ☑/☐ glyph).
      */
     optionIndicator?: Snippet<[{
         checked: boolean;
+        indeterminate?: boolean;
     }]>;
+    /**
+     * Multiple mode only. When `true`, renders a "Select all" row at the top of the dropdown that
+     * toggles every currently-listed (search-filtered) option. The row shows an indeterminate
+     * indicator when only some of the listed options are selected. No effect outside `multiple` mode.
+     */
+    showSelectAll?: boolean;
+    /** Label for the `showSelectAll` row. Defaults to `'Select all'`. */
+    selectAllLabel?: string;
     testId?: string;
     /** Fallback per-option test id prefix. Each option emits `data-pw="{itemTestId}-{id}"` when its own `item.testId` is not set. */
     itemTestId?: string;

package/package.json

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