@ibobbyts/svelte-ui-utils 0.4.3 → 0.4.4

package/dist/dropdown/Dropdown.svelte

@@ -1,9 +1,17 @@
 <svelte:options runes={false} />
 
+<script context="module" lang="ts">
+  let dropdownInstanceCount = 0;
+</script>
+
 <script lang="ts">
   import { onDestroy, tick } from 'svelte';
+  import { getUiMessages, type UiLanguage } from '../i18n.js';
   import type {
     DropdownChangeHandler,
+    DropdownLoadOptions,
+    DropdownLoadOptionsResult,
+    DropdownLoadStatus,
     DropdownMenuAlign,
     DropdownMultiChangeHandler,
     DropdownMultiValue,
@@ -21,7 +29,18 @@
   export let multiselect = false;
   export let options: DropdownOption[] = [];
   export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
+  /** Labels for controlled values that are not present in the current search result. */
+  export let selectedOptions: DropdownOption[] = [];
   export let groupsCollapsedByDefault: 'true' | 'false' | 'auto' = 'false';
+  export let search = false;
+  export let loadOptions: DropdownLoadOptions | undefined = undefined;
+  export let searchDebounceMs = 300;
+  export let searchLimit = 10;
+  export let searchPlaceholder: string | undefined = undefined;
+  export let language: UiLanguage = 'en_us';
+  export let loadingText: string | undefined = undefined;
+  export let noResultsText: string | undefined = undefined;
+  export let errorText: string | undefined = undefined;
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'left';
@@ -40,6 +59,7 @@
 
   const viewportMargin = 20;
   const menuGap = 6;
+  const instanceId = ++dropdownInstanceCount;
 
   let open = false;
   let activeValue: DropdownValue = '';
@@ -58,22 +78,44 @@
   let typeaheadTimer: ReturnType<typeof setTimeout> | undefined;
   let typeaheadGeneration = 0;
   let collapsedGroupIndexes = new Set<number>();
+  // Whether the current open session has already seeded auto group collapse
+  // from a search response; once true, the user's manual toggles own the set.
+  let searchGroupsInitialized = false;
+  let searchQuery = '';
+  let searchStatus: DropdownLoadStatus = 'idle';
+  let searchOptions: DropdownOption[] = [];
+  let searchOptionGroups: DropdownOptionGroup[] | undefined = undefined;
+  let searchTimer: ReturnType<typeof setTimeout> | undefined;
+  let searchController: AbortController | undefined;
+  let searchRequestId = 0;
+  let searchInputElement: HTMLInputElement | undefined;
+  const knownLabels = new Map<DropdownValue, string>();
   // Keep the buffer long enough for users to type multi-character aliases
   // while the menu is rendering a large option list.
   const typeaheadTimeoutMs = 1000;
 
-  $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
-  $: visibleOptions = optionGroups === undefined
-    ? options
-    : optionGroups.flatMap((group, groupIndex) => group.label && collapsedGroupIndexes.has(groupIndex) ? [] : group.options);
-  $: selectedValues = normalizeSelectedValues(multiselect && Array.isArray(value) ? value : []);
+  $: messages = getUiMessages(language);
+  $: resolvedLoadingText = loadingText?.trim() ? loadingText : messages.dropdownSearch.loadingText;
+  $: resolvedNoResultsText = noResultsText?.trim() ? noResultsText : messages.dropdownSearch.noResultsText;
+  $: resolvedErrorText = errorText?.trim() ? errorText : 'Failed to load options';
+  $: resolvedListboxId = id ? `${id}-listbox` : search ? `suu-dropdown-listbox-${instanceId}` : undefined;
+  // Search results fully replace the instantiated options while searching;
+  // outside of search mode the caller-provided options stay authoritative.
+  $: renderOptions = search ? searchOptions : options;
+  $: renderOptionGroups = search ? searchOptionGroups : optionGroups;
+  $: resolvedOptions = renderOptionGroups === undefined ? renderOptions : renderOptionGroups.flatMap((group) => group.options);
+  $: visibleOptions = renderOptionGroups === undefined
+    ? renderOptions
+    : renderOptionGroups.flatMap((group, groupIndex) => group.label && collapsedGroupIndexes.has(groupIndex) ? [] : group.options);
+  $: trackOptionLabels(resolvedOptions);
+  $: trackOptionLabels(selectedOptions);
+  $: rawSelectedValues = normalizeSelectedValues(multiselect && Array.isArray(value) ? value : []);
+  $: selectedValues = orderSelectedValues(resolvedOptions, rawSelectedValues);
+  $: selectedValueSet = new Set(rawSelectedValues);
   $: selectedOption = Array.isArray(value) ? undefined : resolvedOptions.find((option) => option.value === value);
   $: selectedText = multiselect
-    ? resolvedOptions
-        .filter((option) => selectedValues.includes(option.value))
-        .map((option) => option.label)
-        .join(', ')
-    : selectedOption?.label ?? String(value);
+    ? selectedLabelTexts(selectedValues).join(', ')
+    : labelForValue(Array.isArray(value) ? '' : value);
   $: if (!open) {
     activeValue = initialActiveValue();
   }
@@ -81,13 +123,16 @@
     placement;
     if (open) {
       enableOpenViewportTracking();
-      if (multiselect) {
+      if (multiselect || search) {
         enableOutsidePointerDismissal();
       }
       void updateViewportPanelMaxHeight();
     } else {
       disableOpenViewportTracking();
       disableOutsidePointerDismissal();
+      if (search) {
+        resetSearchOnClose();
+      }
       resolvedPlacement = placement === 'up' ? 'up' : 'down';
       viewportPanelMaxHeight = undefined;
     }
@@ -98,25 +143,82 @@
   }
 
   function normalizeSelectedValues(nextValues: DropdownMultiValue): DropdownMultiValue {
-    const incoming = new Set(nextValues);
+    const seen = new Set<DropdownValue>();
     const normalized: DropdownMultiValue = [];
-    for (const option of resolvedOptions) {
-      if (incoming.has(option.value) && !normalized.includes(option.value)) {
-        normalized.push(option.value);
+    for (const nextValue of nextValues) {
+      if (!seen.has(nextValue)) {
+        seen.add(nextValue);
+        normalized.push(nextValue);
       }
     }
     return normalized;
   }
 
+  // Selected values are reported in option order, but values that are not
+  // present in the current options (e.g. picked during an earlier async
+  // search) are preserved at the end instead of being dropped.
+  function orderSelectedValues(
+    nextOptions: DropdownOption[],
+    nextSelected: DropdownMultiValue
+  ): DropdownMultiValue {
+    const selectedSet = new Set(nextSelected);
+    const ordered = nextOptions
+      .filter((option) => selectedSet.has(option.value))
+      .map((option) => option.value);
+    const orderedSet = new Set(ordered);
+    for (const nextValue of nextSelected) {
+      if (!orderedSet.has(nextValue)) {
+        ordered.push(nextValue);
+      }
+    }
+    return ordered;
+  }
+
+  function trackOptionLabels(nextOptions: DropdownOption[]) {
+    for (const option of nextOptions) {
+      knownLabels.set(option.value, option.label);
+    }
+  }
+
+  function labelForValue(nextValue: DropdownValue): string {
+    const option = resolvedOptions.find((candidate) => candidate.value === nextValue);
+    return option?.label ?? knownLabels.get(nextValue) ?? String(nextValue);
+  }
+
+  // Multiselect trigger text only lists values whose label is known; values
+  // without one never render a raw fallback string into the trigger.
+  function selectedLabelTexts(nextValues: DropdownMultiValue): string[] {
+    const texts: string[] = [];
+    for (const nextValue of nextValues) {
+      const label =
+        resolvedOptions.find((candidate) => candidate.value === nextValue)?.label ??
+        knownLabels.get(nextValue);
+      if (label !== undefined) {
+        texts.push(label);
+      }
+    }
+    return texts;
+  }
+
   function initialActiveValue(): DropdownValue {
-    const firstSelectedEnabled = visibleOptions.find(
-      (option) => selectedValues.includes(option.value) && !option.disabled
+    return initialActiveValueFor(visibleOptions, resolvedOptions);
+  }
+
+  function initialActiveValueFor(
+    nextVisibleOptions: DropdownOption[],
+    nextResolvedOptions: DropdownOption[]
+  ): DropdownValue {
+    const firstSelectedEnabled = nextVisibleOptions.find(
+      (option) => selectedValueSet.has(option.value) && !option.disabled
     );
-    return firstSelectedEnabled?.value ?? selectedOption?.value ?? firstEnabledOption()?.value ?? '';
+    const selectedFallback = Array.isArray(value)
+      ? undefined
+      : nextResolvedOptions.find((option) => option.value === value);
+    return firstSelectedEnabled?.value ?? selectedFallback?.value ?? nextVisibleOptions.find((option) => !option.disabled)?.value ?? '';
   }
 
   function isOptionSelected(option: DropdownOption): boolean {
-    return multiselect ? selectedValues.includes(option.value) : option.value === value;
+    return multiselect ? selectedValueSet.has(option.value) : option.value === value;
   }
 
   function activeOptionIndex(nextActiveValue: DropdownValue): number {
@@ -142,6 +244,7 @@
     const currentIndex = Math.max(0, enabledOptions.findIndex((option) => option.value === activeValue));
     const nextIndex = (currentIndex + offset + enabledOptions.length) % enabledOptions.length;
     activeValue = enabledOptions[nextIndex]?.value ?? activeValue;
+    scrollActiveOptionIntoView();
   }
 
   function clearTypeaheadBuffer() {
@@ -179,10 +282,14 @@
     });
   }
 
-  function handleTypeahead(key: string) {
-    const normalizedKey = key.startsWith('Key') && key.length === 4
+  function normalizeTypeaheadKey(key: string): string {
+    return key.startsWith('Key') && key.length === 4
       ? key.slice(3).toLocaleLowerCase()
       : key.toLocaleLowerCase();
+  }
+
+  function handleTypeahead(key: string) {
+    const normalizedKey = normalizeTypeaheadKey(key);
     const nextBuffer = `${typeaheadBuffer}${normalizedKey}`;
     const findMatch = (prefix: string) =>
       visibleOptions.find(
@@ -201,8 +308,7 @@
     }
 
     if (!open) {
-      updateResolvedPlacement();
-      open = true;
+      openMenu();
     }
     activeValue = match.value;
     scrollActiveOptionIntoView();
@@ -220,7 +326,7 @@
       } else {
         nextSelected.add(option.value);
       }
-      const nextValues = normalizeSelectedValues([...nextSelected]);
+      const nextValues = orderSelectedValues(resolvedOptions, [...nextSelected]);
       clearTypeaheadBuffer();
       void (onChange as DropdownMultiChangeHandler | undefined)?.(nextValues);
       return;
@@ -232,16 +338,167 @@
     buttonElement?.focus();
   }
 
+  function clampSearchLimit(limit: number): number {
+    if (!Number.isFinite(limit)) {
+      return 10;
+    }
+    return Math.min(50, Math.max(1, Math.floor(limit)));
+  }
+
+  function clearSearchTimer() {
+    if (searchTimer !== undefined) {
+      clearTimeout(searchTimer);
+      searchTimer = undefined;
+    }
+  }
+
+  function abortSearchController() {
+    if (searchController !== undefined) {
+      searchController.abort();
+      searchController = undefined;
+    }
+  }
+
+  function scheduleSearch(query: string) {
+    clearSearchTimer();
+    searchTimer = setTimeout(() => {
+      searchTimer = undefined;
+      void runSearch(query);
+    }, Math.max(0, Math.floor(searchDebounceMs)));
+  }
+
+  async function runSearch(query: string) {
+    if (!search || loadOptions === undefined) {
+      return;
+    }
+    abortSearchController();
+    const currentRequestId = ++searchRequestId;
+    const controller = new AbortController();
+    searchController = controller;
+    searchStatus = 'loading';
+
+    try {
+      const result = await loadOptions(query, {
+        limit: clampSearchLimit(searchLimit),
+        signal: controller.signal
+      });
+      // Stale or cancelled responses must never touch the UI.
+      if (controller.signal.aborted || currentRequestId !== searchRequestId) {
+        return;
+      }
+      searchStatus = 'success';
+      applySearchResult(result ?? {}, query);
+    } catch {
+      if (controller.signal.aborted || currentRequestId !== searchRequestId) {
+        return;
+      }
+      searchOptions = [];
+      searchOptionGroups = undefined;
+      searchStatus = 'error';
+    } finally {
+      if (searchController === controller) {
+        searchController = undefined;
+      }
+    }
+  }
+
+  function mergeSelectedOptions(options: DropdownOption[]): DropdownOption[] {
+    const merged = [...options];
+    const seen = new Set(options.map((option) => option.value));
+    for (const option of selectedOptions) {
+      if (!seen.has(option.value)) {
+        merged.push(option);
+        seen.add(option.value);
+      }
+    }
+    return merged;
+  }
+
+  function applySearchResult(result: DropdownLoadOptionsResult, query = '') {
+    // optionGroups is the sole render source when present; empty groups stay hidden.
+    const groups = Array.isArray(result.optionGroups)
+      ? result.optionGroups.filter((group) => Array.isArray(group.options) && group.options.length > 0)
+      : undefined;
+    if (groups !== undefined) {
+      if (query.trim()) {
+        searchOptionGroups = groups;
+      } else {
+        const groupedOptions = groups.flatMap((group) => group.options);
+        const groupedValues = new Set(groupedOptions.map((option) => option.value));
+        const missingSelected = selectedOptions.filter((option) => !groupedValues.has(option.value));
+        searchOptionGroups = missingSelected.length ? [...groups, { options: missingSelected }] : groups;
+      }
+      searchOptions = [];
+    } else {
+      searchOptionGroups = undefined;
+      searchOptions = query.trim() ? (Array.isArray(result.options) ? result.options : []) : mergeSelectedOptions(Array.isArray(result.options) ? result.options : []);
+    }
+    // Only the first valid grouped response of an open session seeds the auto
+    // collapse state; later responses just swap groups so manual collapse and
+    // expand choices survive query refreshes within the same session.
+    if (!searchGroupsInitialized && groups !== undefined && groups.length > 0) {
+      searchGroupsInitialized = true;
+      initializeCollapsedGroups(groups);
+    }
+    const nextResolvedOptions = groups === undefined ? searchOptions : groups.flatMap((group) => group.options);
+    const nextVisibleOptions = groups === undefined
+      ? searchOptions
+      : groups.flatMap((group, groupIndex) => group.label && collapsedGroupIndexes.has(groupIndex) ? [] : group.options);
+    activeValue = initialActiveValueFor(nextVisibleOptions, nextResolvedOptions);
+    scrollActiveOptionIntoView();
+  }
+
+  function resetSearchOnClose() {
+    clearSearchTimer();
+    abortSearchController();
+    searchQuery = '';
+    searchOptions = [];
+    searchOptionGroups = undefined;
+    searchStatus = 'idle';
+  }
+
+  function beginSearchOnOpen() {
+    searchQuery = '';
+    searchOptions = [];
+    searchOptionGroups = undefined;
+    collapsedGroupIndexes = new Set();
+    searchGroupsInitialized = false;
+    clearSearchTimer();
+    abortSearchController();
+    if (loadOptions === undefined) {
+      searchStatus = 'idle';
+      return;
+    }
+    // The empty query fires immediately on every expand.
+    void runSearch('');
+  }
+
+  function openMenu() {
+    updateResolvedPlacement();
+    if (search) {
+      beginSearchOnOpen();
+    } else {
+      initializeCollapsedGroups(renderOptionGroups);
+    }
+    open = true;
+    activeValue = initialActiveValue();
+    if (search) {
+      void tick().then(() => {
+        searchInputElement?.focus();
+      });
+    }
+  }
+
   function toggleOpen() {
     if (disabled) {
       return;
     }
+    clearTypeaheadBuffer();
     if (!open) {
-      updateResolvedPlacement();
-      initializeCollapsedGroups();
+      openMenu();
+      return;
     }
-    clearTypeaheadBuffer();
-    open = !open;
+    open = false;
     activeValue = initialActiveValue();
   }
 
@@ -249,19 +506,19 @@
     return collapsedGroupIndexes.has(groupIndex);
   }
 
-  function initializeCollapsedGroups() {
-    if (optionGroups === undefined || groupsCollapsedByDefault === 'false') {
+  function initializeCollapsedGroups(nextOptionGroups: DropdownOptionGroup[] | undefined) {
+    if (nextOptionGroups === undefined || groupsCollapsedByDefault === 'false') {
       collapsedGroupIndexes = new Set();
       return;
     }
     if (groupsCollapsedByDefault === 'true') {
       collapsedGroupIndexes = new Set(
-        optionGroups.flatMap((group, index) => group.label ? [index] : [])
+        nextOptionGroups.flatMap((group, index) => group.label ? [index] : [])
       );
       return;
     }
     collapsedGroupIndexes = new Set(
-      optionGroups.flatMap((group, index) =>
+      nextOptionGroups.flatMap((group, index) =>
         group.label && group.options.some((option) => isOptionSelected(option)) ? [] : group.label ? [index] : []
       )
     );
@@ -296,9 +553,7 @@
     if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
       if (!open) {
-        updateResolvedPlacement();
-        open = true;
-        activeValue = initialActiveValue();
+        openMenu();
       }
       moveActiveOption(event.key === 'ArrowDown' ? 1 : -1);
       return;
@@ -312,6 +567,15 @@
       !event.altKey
     ) {
       event.preventDefault();
+      if (search) {
+        const wasOpen = open;
+        if (!wasOpen) {
+          openMenu();
+        }
+        searchQuery = wasOpen ? `${searchQuery}${normalizeTypeaheadKey(event.key)}` : normalizeTypeaheadKey(event.key);
+        scheduleSearch(searchQuery);
+        return;
+      }
       handleTypeahead(event.key);
       return;
     }
@@ -326,6 +590,33 @@
     }
   }
 
+  function handleSearchInput(event: Event) {
+    searchQuery = (event.currentTarget as HTMLInputElement).value;
+    scheduleSearch(searchQuery);
+  }
+
+  function handleSearchKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      open = false;
+      buttonElement?.focus();
+      return;
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      moveActiveOption(event.key === 'ArrowDown' ? 1 : -1);
+      return;
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      const index = activeOptionIndex(activeValue);
+      const option = index >= 0 ? visibleOptions[index] : undefined;
+      if (option) {
+        selectOption(option);
+      }
+    }
+  }
+
   function handleFocusout(event: FocusEvent) {
     const nextTarget = event.relatedTarget;
     if (portal && nextTarget instanceof Node && menuElement?.contains(nextTarget)) {
@@ -473,6 +764,9 @@
         return;
       }
       open = false;
+      if (search) {
+        buttonElement?.focus();
+      }
     };
 
     document.addEventListener('pointerdown', handleOutsidePointer, true);
@@ -490,6 +784,8 @@
     disableOpenViewportTracking();
     disableOutsidePointerDismissal();
     clearTypeaheadBuffer();
+    clearSearchTimer();
+    abortSearchController();
   });
 </script>
 
@@ -498,6 +794,7 @@
   class={[
     'suu-dropdown',
     multiselect ? 'suu-dropdown--multiselect' : '',
+    search ? 'suu-dropdown--search' : '',
     width !== undefined || minWidth !== undefined || maxWidth !== undefined
       ? 'suu-dropdown--sized'
       : '',
@@ -556,21 +853,54 @@
       style:--suu-dropdown-menu-width={portalMenuWidth}
       style:--suu-dropdown-panel-max-height={viewportPanelMaxHeight}
     >
+      {#if search}
+        <div class="suu-dropdown__search">
+          <svg class="suu-dropdown__search-icon" viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"></circle>
+            <path d="m16 16 4 4"></path>
+          </svg>
+          <input
+            bind:this={searchInputElement}
+            class="suu-dropdown__search-input"
+            type="text"
+            value={searchQuery}
+            placeholder={searchPlaceholder ?? ''}
+            aria-label={ariaLabel}
+            autocomplete="off"
+            role="combobox"
+            aria-expanded="true"
+            aria-autocomplete="list"
+            aria-controls={resolvedListboxId}
+            on:input={handleSearchInput}
+            on:keydown={handleSearchKeydown}
+          />
+        </div>
+      {/if}
       <div
         class="suu-dropdown__panel"
+        id={resolvedListboxId}
         role="listbox"
         aria-label={ariaLabel}
         aria-multiselectable={multiselect || undefined}
       >
-        {#if optionGroups === undefined}
-          {#each options as option}
+        {#if search && searchStatus === 'loading'}
+          <div class="suu-dropdown__status suu-dropdown__status--loading" aria-live="polite">
+            <span class="suu-dropdown__spinner" aria-hidden="true"></span>
+            <span>{resolvedLoadingText}</span>
+          </div>
+        {:else if search && searchStatus === 'error'}
+          <div class="suu-dropdown__status suu-dropdown__status--error" role="alert">{resolvedErrorText}</div>
+        {:else if search && resolvedOptions.length === 0}
+          <div class="suu-dropdown__status suu-dropdown__status--empty">{resolvedNoResultsText}</div>
+        {:else if renderOptionGroups === undefined}
+          {#each renderOptions as option}
             <button
               type="button"
               class="suu-dropdown__option"
               class:suu-dropdown__option--active={option.value === activeValue}
               class:suu-dropdown__option--disabled={option.disabled}
               role="option"
-              aria-selected={multiselect ? selectedValues.includes(option.value) : option.value === value}
+              aria-selected={multiselect ? selectedValueSet.has(option.value) : option.value === value}
               aria-disabled={option.disabled}
               disabled={option.disabled}
               data-value={String(option.value)}
@@ -585,7 +915,7 @@
               {#if multiselect}
                 <span
                   class="suu-dropdown__checkbox"
-                  data-checked={multiselect ? selectedValues.includes(option.value) : option.value === value}
+                  data-checked={multiselect ? selectedValueSet.has(option.value) : option.value === value}
                   aria-hidden="true"
                 ></span>
               {/if}
@@ -593,7 +923,7 @@
             </button>
           {/each}
         {:else}
-          {#each optionGroups as group, groupIndex}
+          {#each renderOptionGroups as group, groupIndex}
             <div class="suu-dropdown__group" role="group" aria-label={group.label}>
               {#if group.label}
                 <button
@@ -615,7 +945,7 @@
                   class:suu-dropdown__option--active={option.value === activeValue}
                   class:suu-dropdown__option--disabled={option.disabled}
                   role="option"
-                  aria-selected={multiselect ? selectedValues.includes(option.value) : option.value === value}
+                  aria-selected={multiselect ? selectedValueSet.has(option.value) : option.value === value}
                   aria-disabled={option.disabled}
                   disabled={option.disabled}
                   data-value={String(option.value)}
@@ -630,7 +960,7 @@
                   {#if multiselect}
                     <span
                       class="suu-dropdown__checkbox"
-                      data-checked={multiselect ? selectedValues.includes(option.value) : option.value === value}
+                      data-checked={multiselect ? selectedValueSet.has(option.value) : option.value === value}
                       aria-hidden="true"
                     ></span>
                   {/if}

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -1,4 +1,5 @@
-import type { DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
+import { type UiLanguage } from '../i18n.js';
+import type { DropdownLoadOptions, DropdownMenuAlign, DropdownOption, DropdownOptionGroup, DropdownPlacement, DropdownSelectionChangeHandler, DropdownSelection, DropdownTriggerClickHandler } from './types.js';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -18,7 +19,17 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     multiselect?: boolean;
     options?: DropdownOption[];
     optionGroups?: DropdownOptionGroup[] | undefined;
+    /** Labels for controlled values that are not present in the current search result. */ selectedOptions?: DropdownOption[];
     groupsCollapsedByDefault?: "true" | "false" | "auto";
+    search?: boolean;
+    loadOptions?: DropdownLoadOptions | undefined;
+    searchDebounceMs?: number;
+    searchLimit?: number;
+    searchPlaceholder?: string | undefined;
+    language?: UiLanguage;
+    loadingText?: string | undefined;
+    noResultsText?: string | undefined;
+    errorText?: string | undefined;
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
     menuAlign?: DropdownMenuAlign;

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAER,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AAuiBtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAV0e,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUpmC,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAER,mBAAmB,EAGnB,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA81BtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAXswB,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;IACj7B,sFAAsF,mBAAkB,cAAc,EAAE;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;;kBAAwC,mBAAmB,GAAG,SAAS;;;wBAAoG,MAAM,GAAG,SAAS;eAAa,UAAU;kBAAgB,MAAM,GAAG,SAAS;oBAAkB,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUj4B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/DropdownMultiSelect.svelte

@@ -16,6 +16,7 @@
   export let value: DropdownMultiValue = [];
   export let options: DropdownOption[] = [];
   export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
+  export let selectedOptions: DropdownOption[] = [];
   export let groupsCollapsedByDefault: 'true' | 'false' | 'auto' = 'false';
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'auto';
@@ -38,6 +39,7 @@
   multiselect={true}
   {options}
   {optionGroups}
+  {selectedOptions}
   {groupsCollapsedByDefault}
   {ariaLabel}
   {placement}

package/dist/dropdown/DropdownMultiSelect.svelte.d.ts

@@ -17,6 +17,7 @@ declare const DropdownMultiSelect: $$__sveltets_2_IsomorphicComponent<{
     value?: DropdownMultiValue;
     options?: DropdownOption[];
     optionGroups?: DropdownOptionGroup[] | undefined;
+    selectedOptions?: DropdownOption[];
     groupsCollapsedByDefault?: "true" | "false" | "auto";
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;