@juspay/svelte-ui-components 2.30.0 → 2.31.0

package/dist/Select/Select.svelte

@@ -13,6 +13,7 @@
     disabled = false,
     bottomContent,
     optionIndicator,
+    triggerSummary,
     testId,
     itemTestId,
     onchange,
@@ -256,30 +257,48 @@
     tabindex={disabled ? -1 : searchable ? -1 : 0}
   >
     {#if multiple}
-      {#each value as id (id)}
-        <Pill
-          text={getLabel(id)}
-          dismissible
-          {disabled}
-          ondismiss={() => removeItem(id)}
-          {...typeof testId === 'string' ? { testId: `${testId}-pill-${id}` } : {}}
-        />
-      {/each}
-      {#if searchable}
-        <input
-          class="select-search"
-          type="text"
-          value={query}
-          oninput={handleSearchInput}
-          onfocus={handleSearchFocus}
-          bind:this={searchInputEl}
-          placeholder={value.length === 0 ? placeholder : ''}
-          {disabled}
-          autocomplete="off"
-          tabindex={disabled ? -1 : 0}
-        />
-      {:else if value.length === 0}
-        <span class="select-placeholder">{placeholder}</span>
+      {#if typeof triggerSummary === 'function'}
+        {@render triggerSummary({ value, items })}
+        {#if searchable}
+          <input
+            class="select-search"
+            type="text"
+            value={query}
+            oninput={handleSearchInput}
+            onfocus={handleSearchFocus}
+            bind:this={searchInputEl}
+            placeholder={value.length === 0 ? placeholder : ''}
+            {disabled}
+            autocomplete="off"
+            tabindex={disabled ? -1 : 0}
+          />
+        {/if}
+      {:else}
+        {#each value as id (id)}
+          <Pill
+            text={getLabel(id)}
+            dismissible
+            {disabled}
+            ondismiss={() => removeItem(id)}
+            {...typeof testId === 'string' ? { testId: `${testId}-pill-${id}` } : {}}
+          />
+        {/each}
+        {#if searchable}
+          <input
+            class="select-search"
+            type="text"
+            value={query}
+            oninput={handleSearchInput}
+            onfocus={handleSearchFocus}
+            bind:this={searchInputEl}
+            placeholder={value.length === 0 ? placeholder : ''}
+            {disabled}
+            autocomplete="off"
+            tabindex={disabled ? -1 : 0}
+          />
+        {:else if value.length === 0}
+          <span class="select-placeholder">{placeholder}</span>
+        {/if}
       {/if}
     {:else if searchable}
       <input

package/dist/Select/properties.d.ts

@@ -27,6 +27,11 @@ export type OptionalSelectProperties = {
     open?: boolean;
     /** Horizontal anchor of the dropdown panel. `'left'` (default) anchors to the trigger's left edge; `'right'` anchors to the right edge so a content-wider panel hangs leftward instead of overflowing. */
     dropdownAlign?: 'left' | 'right';
+    /** Snippet for rendering a compact trigger summary in multiple mode instead of one Pill per selected value. Receives `{ value, items }` so the consumer can compute e.g. "All" / "3 selected". When not provided the default Pill-per-value behaviour is used. */
+    triggerSummary?: import('svelte').Snippet<[{
+        value: string[];
+        items: SelectItem[];
+    }]>;
 };
 export type SelectEventProperties = {
     onchange?: (value: string[]) => void;

package/package.json

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