@ibobbyts/svelte-ui-utils 0.1.2 → 0.2.1

package/dist/dropdown/Dropdown.svelte

@@ -1,3 +1,5 @@
+<svelte:options runes={false} />
+
 <script lang="ts">
   import type { DropdownChangeHandler, DropdownOption, DropdownPlacement, DropdownValue } from './types.js';
 

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":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAuI1G,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;SAV8I,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;;eAAyC,qBAAqB,GAAG,SAAS;;;kBAU7Q,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":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAyI1G,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;SAV8I,MAAM,GAAG,SAAS;YAAU,aAAa;cAAY,cAAc,EAAE;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;;eAAyC,qBAAqB,GAAG,SAAS;;;kBAU7Q,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown-search/DropdownSearch.svelte

@@ -1,18 +1,29 @@
+<svelte:options runes={false} />
+
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte';
   import { getUiMessages, type UiLanguage } from '../i18n.js';
-  import { formatParamDict, normalizeDropdownSearchValue, resolveDropdownSearchStatus } from './state.js';
+  import {
+    formatParamDict,
+    normalizeDropdownSearchValue,
+    resolveDropdownSearchStatus,
+  } from './state.js';
   import type {
     DropdownSearchChangeDetail,
+    DropdownSearchEnterDetail,
     DropdownSearchItem,
     DropdownSearchItemValueGetter,
     DropdownSearchLoadOptions,
-    DropdownSearchStatus
+    DropdownSearchSelectedItemLabelGetter,
+    DropdownSearchSelectedItemsChangeHandler,
+    DropdownSearchStatus,
   } from './types.js';
 
   export let value = '';
   export let selectedItem: DropdownSearchItem | null = null;
+  export let selectedItems: DropdownSearchItem[] = [];
   export let status: DropdownSearchStatus = 'empty';
+  export let multiselect = false;
   export let placeholder = '';
   export let debounceMs = 500;
   export let limit = 10;
@@ -32,37 +43,67 @@
   export let width: string | undefined = undefined;
   export let minWidth: string | undefined = undefined;
   export let maxWidth: string | undefined = undefined;
+  export let selectedItemsLabel = 'Selected items';
+  export let removeSelectedItemLabel:
+    | DropdownSearchSelectedItemLabelGetter
+    | undefined = undefined;
   export let getItemValue: DropdownSearchItemValueGetter = (item) => item.title;
-  export let onChange: ((detail: DropdownSearchChangeDetail) => void) | undefined = undefined;
-  export let onSelect: ((item: DropdownSearchItem) => void) | undefined = undefined;
-  export let onStatusChange: ((status: DropdownSearchStatus) => void) | undefined = undefined;
+  export let onChange:
+    | ((detail: DropdownSearchChangeDetail) => void)
+    | undefined = undefined;
+  export let onSelect: ((item: DropdownSearchItem) => void) | undefined =
+    undefined;
+  export let onDeselect: ((item: DropdownSearchItem) => void) | undefined =
+    undefined;
+  export let onSelectedItemsChange:
+    | DropdownSearchSelectedItemsChangeHandler
+    | undefined = undefined;
+  export let onStatusChange:
+    | ((status: DropdownSearchStatus) => void)
+    | undefined = undefined;
   export let onInputBlur: ((event: FocusEvent) => void) | undefined = undefined;
+  export let onEnter: ((detail: DropdownSearchEnterDetail) => void) | undefined =
+    undefined;
 
   let options: DropdownSearchItem[] = [];
   let exactMatch: DropdownSearchItem | null = null;
   let focused = false;
+  let inputValue = value;
   let inputElement: HTMLInputElement | undefined;
   let searchTimer: ReturnType<typeof setTimeout> | undefined;
+  let blurTimer: ReturnType<typeof setTimeout> | undefined;
   let activeController: AbortController | undefined;
   let requestId = 0;
   let lastHandledValue = value;
 
   $: messages = getUiMessages(language);
-  $: resolvedNoResultsText = noResultsText?.trim() ? noResultsText : messages.dropdownSearch.noResultsText;
-  $: resolvedLoadingText = loadingText?.trim() ? loadingText : messages.dropdownSearch.loadingText;
-  $: resolvedClearLabel = clearLabel?.trim() ? clearLabel : messages.dropdownSearch.clearLabel;
+  $: resolvedNoResultsText = noResultsText?.trim()
+    ? noResultsText
+    : messages.dropdownSearch.noResultsText;
+  $: resolvedLoadingText = loadingText?.trim()
+    ? loadingText
+    : messages.dropdownSearch.loadingText;
+  $: resolvedClearLabel = clearLabel?.trim()
+    ? clearLabel
+    : messages.dropdownSearch.clearLabel;
   $: resolvedListboxId = listboxId ?? (id ? `${id}-options` : undefined);
   $: hasQuery = normalizeDropdownSearchValue(value).length > 0;
-  $: showOptions = focused && !disabled && (options.length > 0 || status === 'loading' || (hasQuery && status === 'invalid'));
+  $: showOptions =
+    focused &&
+    !disabled &&
+    (hasQuery || (multiselect && options.length > 0)) &&
+    (options.length > 0 ||
+      status === 'loading' ||
+      (validate && hasQuery && options.length === 0));
   $: if (!validate && status !== 'empty' && status !== 'loading') {
     setStatus('empty');
   }
-  $: if (searchOnExternalValueChange && value !== lastHandledValue) {
-    handleExternalValue(value);
+  $: if (value !== lastHandledValue && value !== inputValue) {
+    handleIncomingValue(value);
   }
 
   function emitChange() {
-    const detail = { value, selectedItem, status };
+    const detail = { value, selectedItem, selectedItems, status };
     onChange?.(detail);
   }
 
@@ -76,7 +117,9 @@
   function resetSearchState(nextValue: string) {
     lastHandledValue = nextValue;
     value = nextValue;
-    selectedItem = null;
+    if (!multiselect) {
+      selectedItem = null;
+    }
     exactMatch = null;
     options = [];
     const trimmed = normalizeDropdownSearchValue(nextValue);
@@ -85,7 +128,17 @@
       setStatus('loading');
     } else {
       abortActiveSearch();
-      setStatus(resolveDropdownSearchStatus({ value, selectedItem, exactMatch, minLength, validate }));
+      setStatus(
+        resolveDropdownSearchStatus({
+          value,
+          selectedItem,
+          selectedItems,
+          exactMatch,
+          minLength,
+          validate,
+          multiselect,
+        }),
+      );
     }
     emitChange();
   }
@@ -97,6 +150,13 @@
     }
   }
 
+  function clearBlurTimer() {
+    if (blurTimer) {
+      clearTimeout(blurTimer);
+      blurTimer = undefined;
+    }
+  }
+
   function abortActiveSearch() {
     if (activeController) {
       activeController.abort();
@@ -111,7 +171,15 @@
       abortActiveSearch();
       options = [];
       exactMatch = null;
-      setStatus(resolveDropdownSearchStatus({ value: query, minLength, validate }));
+      setStatus(
+        resolveDropdownSearchStatus({
+          value: query,
+          selectedItems,
+          minLength,
+          validate,
+          multiselect,
+        }),
+      );
       emitChange();
       return;
     }
@@ -124,7 +192,10 @@
     emitChange();
 
     try {
-      const result = await loadOptions(trimmed, { limit, signal: controller.signal });
+      const result = await loadOptions(trimmed, {
+        limit,
+        signal: controller.signal,
+      });
 
       if (controller.signal.aborted || currentRequestId !== requestId) {
         return;
@@ -132,8 +203,21 @@
 
       options = result.options ?? [];
       exactMatch = validate ? (result.exactMatch ?? null) : null;
-      selectedItem = validate && exactMatch && !exactMatch.disabled ? exactMatch : null;
-      setStatus(resolveDropdownSearchStatus({ value, selectedItem, exactMatch, minLength, validate }));
+      selectedItem =
+        !multiselect && validate && exactMatch && !exactMatch.disabled
+          ? exactMatch
+          : null;
+      setStatus(
+        resolveDropdownSearchStatus({
+          value,
+          selectedItem,
+          selectedItems,
+          exactMatch: multiselect ? null : exactMatch,
+          minLength,
+          validate,
+          multiselect,
+        }),
+      );
       emitChange();
     } catch (error) {
       if (controller.signal.aborted || currentRequestId !== requestId) {
@@ -143,7 +227,16 @@
       options = [];
       exactMatch = null;
       selectedItem = null;
-      setStatus(resolveDropdownSearchStatus({ value: query, errored: true, minLength, validate }));
+      setStatus(
+        resolveDropdownSearchStatus({
+          value: query,
+          selectedItems,
+          errored: true,
+          minLength,
+          validate,
+          multiselect,
+        }),
+      );
       emitChange();
     } finally {
       if (activeController === controller) {
@@ -159,10 +252,57 @@
     }, debounceMs);
   }
 
+  function handleInputValue(nextValue: string) {
+    clearBlurTimer();
+    focused = true;
+    inputValue = nextValue;
+    resetSearchState(nextValue);
+    scheduleSearch(nextValue);
+  }
+
   function handleInput(event: Event) {
     const input = event.currentTarget as HTMLInputElement;
-    resetSearchState(input.value);
-    scheduleSearch(input.value);
+    handleInputValue(input.value);
+  }
+
+  function handleBeforeInput() {
+    setTimeout(() => {
+      if (!inputElement || inputElement.value === lastHandledValue) {
+        return;
+      }
+
+      handleInputValue(inputElement.value);
+    }, 0);
+  }
+
+  function handleFocus() {
+    clearBlurTimer();
+    focused = true;
+  }
+
+  function handleBlur(event: FocusEvent) {
+    onInputBlur?.(event);
+    clearBlurTimer();
+    blurTimer = setTimeout(() => {
+      focused = document.activeElement === inputElement;
+      blurTimer = undefined;
+    }, 120);
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Enter' || multiselect) {
+      return;
+    }
+
+    onEnter?.({
+      event,
+      value,
+      selectedItem,
+      selectedItems,
+      status,
+      exactMatch,
+      options,
+    });
   }
 
   function selectItem(item: DropdownSearchItem) {
@@ -170,11 +310,17 @@
       return;
     }
 
+    if (multiselect) {
+      toggleSelectedItem(item);
+      return;
+    }
+
     clearSearchTimer();
     abortActiveSearch();
     selectedItem = item;
     exactMatch = validate ? item : null;
     value = getItemValue(item);
+    inputValue = value;
     lastHandledValue = value;
     setStatus(validate ? 'valid' : 'empty');
     focused = false;
@@ -182,6 +328,85 @@
     onSelect?.(item);
   }
 
+  function selectedItemKey(item: DropdownSearchItem): string {
+    return String(item.id);
+  }
+
+  function isSelectedItem(item: DropdownSearchItem): boolean {
+    const key = selectedItemKey(item);
+    return selectedItems.some((selected) => selectedItemKey(selected) === key);
+  }
+
+  function resolveRemoveSelectedItemLabel(item: DropdownSearchItem): string {
+    return removeSelectedItemLabel?.(item) ?? `Remove ${item.title}`;
+  }
+
+  function setSelectedItems(nextItems: DropdownSearchItem[]) {
+    selectedItems = nextItems;
+    void onSelectedItemsChange?.(selectedItems);
+  }
+
+  function toggleSelectedItem(item: DropdownSearchItem) {
+    const selected = isSelectedItem(item);
+    const nextItems = selected
+      ? selectedItems.filter(
+          (selectedItem) =>
+            selectedItemKey(selectedItem) !== selectedItemKey(item),
+        )
+      : [...selectedItems, item];
+
+    clearSearchTimer();
+    abortActiveSearch();
+    setSelectedItems(nextItems);
+    selectedItem = null;
+    exactMatch = null;
+    value = '';
+    inputValue = value;
+    lastHandledValue = value;
+    setStatus(
+      resolveDropdownSearchStatus({
+        value,
+        selectedItems,
+        minLength,
+        validate,
+        multiselect,
+      }),
+    );
+    focused = true;
+    emitChange();
+
+    if (selected) {
+      onDeselect?.(item);
+    } else {
+      onSelect?.(item);
+    }
+
+    inputElement?.focus();
+  }
+
+  function removeSelectedItem(item: DropdownSearchItem) {
+    if (disabled || !multiselect) {
+      return;
+    }
+
+    const nextItems = selectedItems.filter(
+      (selectedItem) => selectedItemKey(selectedItem) !== selectedItemKey(item),
+    );
+    setSelectedItems(nextItems);
+    setStatus(
+      resolveDropdownSearchStatus({
+        value,
+        selectedItems,
+        minLength,
+        validate,
+        multiselect,
+      }),
+    );
+    emitChange();
+    onDeselect?.(item);
+    inputElement?.focus();
+  }
+
   function clearSearch() {
     if (!hasQuery || disabled) {
       return;
@@ -190,25 +415,65 @@
     clearSearchTimer();
     abortActiveSearch();
     value = '';
+    inputValue = value;
     lastHandledValue = value;
-    selectedItem = null;
+    if (!multiselect) {
+      selectedItem = null;
+    }
     exactMatch = null;
     options = [];
-    setStatus(resolveDropdownSearchStatus({ value, selectedItem, exactMatch, minLength, validate }));
+    setStatus(
+      resolveDropdownSearchStatus({
+        value,
+        selectedItem,
+        selectedItems,
+        exactMatch,
+        minLength,
+        validate,
+        multiselect,
+      }),
+    );
     focused = true;
     emitChange();
     inputElement?.focus();
   }
 
+  function handleIncomingValue(nextValue: string) {
+    inputValue = nextValue;
+
+    if (searchOnExternalValueChange) {
+      handleExternalValue(nextValue);
+      return;
+    }
+
+    lastHandledValue = nextValue;
+  }
+
   function handleExternalValue(nextValue: string) {
     lastHandledValue = nextValue;
-    selectedItem = null;
+    inputValue = nextValue;
+    if (!multiselect) {
+      selectedItem = null;
+    }
     exactMatch = null;
     options = [];
 
     clearSearchTimer();
-    if (!normalizeDropdownSearchValue(nextValue) || normalizeDropdownSearchValue(nextValue).length < minLength) {
-      setStatus(resolveDropdownSearchStatus({ value: nextValue, selectedItem, exactMatch, minLength, validate }));
+    if (
+      !normalizeDropdownSearchValue(nextValue) ||
+      normalizeDropdownSearchValue(nextValue).length < minLength
+    ) {
+      setStatus(
+        resolveDropdownSearchStatus({
+          value: nextValue,
+          selectedItem,
+          selectedItems,
+          exactMatch,
+          minLength,
+          validate,
+          multiselect,
+        }),
+      );
       emitChange();
       return;
     }
@@ -218,6 +483,7 @@
 
   onDestroy(() => {
     clearSearchTimer();
+    clearBlurTimer();
     abortActiveSearch();
   });
 
@@ -230,14 +496,47 @@
 
 <div
   class={`suu-dropdown-search suu-dropdown-search--${status}`}
+  class:suu-dropdown-search--multi={multiselect}
   class:suu-dropdown-search--has-clear={hasQuery && !disabled}
   data-status={status}
+  data-multiselect={multiselect}
   style:width
   style:min-width={minWidth}
   style:max-width={maxWidth}
 >
+  {#if multiselect && selectedItems.length > 0}
+    <div
+      class="suu-dropdown-search__selected-items"
+      aria-label={selectedItemsLabel}
+    >
+      {#each selectedItems as item (item.id)}
+        <span class="suu-dropdown-search__selected-item">
+          <span class="suu-dropdown-search__selected-title">{item.title}</span>
+          {#if !disabled}
+            <button
+              type="button"
+              class="suu-dropdown-search__selected-remove"
+              aria-label={resolveRemoveSelectedItemLabel(item)}
+              title={resolveRemoveSelectedItemLabel(item)}
+              on:mousedown|preventDefault
+              on:click={() => removeSelectedItem(item)}
+            >
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <path d="m6 6 8 8M14 6l-8 8"></path>
+              </svg>
+            </button>
+          {/if}
+        </span>
+      {/each}
+    </div>
+  {/if}
+
   <div class="suu-dropdown-search__field">
-    <svg class="suu-dropdown-search__icon" viewBox="0 0 24 24" aria-hidden="true">
+    <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>
@@ -246,7 +545,7 @@
       class="suu-dropdown-search__input"
       {id}
       {name}
-      {value}
+      bind:value={inputValue}
       {placeholder}
       aria-label={ariaLabel}
       {disabled}
@@ -255,12 +554,11 @@
       aria-controls={resolvedListboxId}
       aria-expanded={showOptions}
       aria-invalid={status === 'invalid' || status === 'error'}
+      on:beforeinput={handleBeforeInput}
       on:input={handleInput}
-      on:focus={() => (focused = true)}
-      on:blur={(event) => {
-        onInputBlur?.(event);
-        setTimeout(() => (focused = false), 120);
-      }}
+      on:keydown={handleKeydown}
+      on:focus={handleFocus}
+      on:blur={handleBlur}
     />
     {#if hasQuery && !disabled}
       <button
@@ -280,10 +578,19 @@
 
   {#if showOptions}
     <div class="suu-dropdown-search__menu">
-      <div class="suu-dropdown-search__menu-panel" id={resolvedListboxId} role="listbox">
+      <div
+        class="suu-dropdown-search__menu-panel"
+        id={resolvedListboxId}
+        role="listbox"
+        aria-multiselectable={multiselect}
+      >
         {#if status === 'loading'}
-          <div class="suu-dropdown-search__empty suu-dropdown-search__empty--loading" aria-live="polite">
-            <span class="suu-dropdown-search__spinner" aria-hidden="true"></span>
+          <div
+            class="suu-dropdown-search__empty suu-dropdown-search__empty--loading"
+            aria-live="polite"
+          >
+            <span class="suu-dropdown-search__spinner" aria-hidden="true"
+            ></span>
             <span>{resolvedLoadingText}</span>
           </div>
         {:else if options.length > 0}
@@ -292,14 +599,27 @@
               type="button"
               class="suu-dropdown-search__option"
               class:suu-dropdown-search__option--disabled={option.disabled}
+              class:suu-dropdown-search__option--selected={multiselect &&
+                isSelectedItem(option)}
               role="option"
-              aria-selected={selectedItem?.id === option.id}
+              aria-selected={multiselect
+                ? isSelectedItem(option)
+                : selectedItem?.id === option.id}
               disabled={option.disabled}
               on:mousedown|preventDefault={() => selectItem(option)}
             >
+              {#if multiselect}
+                <span class="suu-dropdown-search__check" aria-hidden="true">
+                  <svg viewBox="0 0 20 20">
+                    <path d="m4.5 10.5 3.5 3.5 7.5-8"></path>
+                  </svg>
+                </span>
+              {/if}
               <span class="suu-dropdown-search__title">{option.title}</span>
               {#if formatParamDict(option.param_dict).length > 0}
-                <span class="suu-dropdown-search__meta">{formatParamDict(option.param_dict).join(' · ')}</span>
+                <span class="suu-dropdown-search__meta"
+                  >{formatParamDict(option.param_dict).join(' · ')}</span
+                >
               {/if}
             </button>
           {/each}

package/dist/dropdown-search/DropdownSearch.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type UiLanguage } from '../i18n.js';
-import type { DropdownSearchChangeDetail, DropdownSearchItem, DropdownSearchItemValueGetter, DropdownSearchLoadOptions, DropdownSearchStatus } from './types.js';
+import type { DropdownSearchChangeDetail, DropdownSearchEnterDetail, DropdownSearchItem, DropdownSearchItemValueGetter, DropdownSearchLoadOptions, DropdownSearchSelectedItemLabelGetter, DropdownSearchSelectedItemsChangeHandler, DropdownSearchStatus } 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;
@@ -16,7 +16,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const DropdownSearch: $$__sveltets_2_IsomorphicComponent<{
     value?: string;
     selectedItem?: DropdownSearchItem | null;
+    selectedItems?: DropdownSearchItem[];
     status?: DropdownSearchStatus;
+    multiselect?: boolean;
     placeholder?: string;
     debounceMs?: number;
     limit?: number;
@@ -36,11 +38,16 @@ declare const DropdownSearch: $$__sveltets_2_IsomorphicComponent<{
     width?: string | undefined;
     minWidth?: string | undefined;
     maxWidth?: string | undefined;
+    selectedItemsLabel?: string;
+    removeSelectedItemLabel?: DropdownSearchSelectedItemLabelGetter | undefined;
     getItemValue?: DropdownSearchItemValueGetter;
     onChange?: ((detail: DropdownSearchChangeDetail) => void) | undefined;
     onSelect?: ((item: DropdownSearchItem) => void) | undefined;
+    onDeselect?: ((item: DropdownSearchItem) => void) | undefined;
+    onSelectedItemsChange?: DropdownSearchSelectedItemsChangeHandler | undefined;
     onStatusChange?: ((status: DropdownSearchStatus) => void) | undefined;
     onInputBlur?: ((event: FocusEvent) => void) | undefined;
+    onEnter?: ((detail: DropdownSearchEnterDetail) => void) | undefined;
 }, {
     mousedown: MouseEvent;
 } & {

package/dist/dropdown-search/DropdownSearch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSearch.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/DropdownSearch.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EACR,0BAA0B,EAC1B,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAgRtB,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,cAAc;;mBAVoqB,kBAAkB,GAAG,IAAI;aAAW,oBAAoB;;;;;;iBAAiK,yBAAyB;SAAO,MAAM,GAAG,SAAS;WAAS,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAyC,UAAU;oBAAkB,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;iBAAe,MAAM,GAAG,SAAS;;YAA4E,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;mBAAiB,6BAA6B;eAAa,CAAC,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAC,GAAG,SAAS;eAAa,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;qBAAmB,CAAC,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS;kBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;kBAUniD,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DropdownSearch.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/DropdownSearch.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAM5D,OAAO,KAAK,EACR,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,qCAAqC,EACrC,wCAAwC,EACxC,oBAAoB,EACrB,MAAM,YAAY,CAAC;AA+iBtB,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,cAAc;;mBAdq5B,kBAAkB,GAAG,IAAI;oBAAkB,kBAAkB,EAAE;aAAW,oBAAoB;;;;;;;iBAAmM,yBAAyB;SAAO,MAAM,GAAG,SAAS;WAAS,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAyC,UAAU;oBAAkB,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;iBAAe,MAAM,GAAG,SAAS;;YAA4E,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;;8BAA8E,qCAAqC,GAC1vD,SAAS;mBAAiB,6BAA6B;eAAe,CAAC,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAC,GACpH,SAAS;eAAa,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;iBAAe,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;4BAA4B,wCAAwC,GACzM,SAAS;qBAAqB,CAAC,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC,GACtE,SAAS;kBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;kBAU1C,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}