svelte-multiselect 11.2.3 → 11.3.0

package/dist/MultiSelect.svelte

@@ -1,14 +1,22 @@
-<script lang="ts">import { CircleSpinner, Icon, Wiggle } from './';
-import { tick } from 'svelte';
+<script lang="ts" generics="Option extends import('./types').Option">import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
-import { get_label, get_style, highlight_matching_nodes } from './utils';
+import { highlight_matches } from './attachments';
+import CircleSpinner from './CircleSpinner.svelte';
+import Icon from './Icon.svelte';
+import { fuzzy_match, get_label, get_style } from './utils';
+import Wiggle from './Wiggle.svelte';
 let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptionMsg = `Create this option...`, allowUserOptions = false, allowEmpty = false, autocomplete = `off`, autoScroll = true, breakpoint = 800, defaultDisabledTitle = `This option is disabled`, disabled = false, disabledInputTitle = `This input is disabled`, duplicateOptionMsg = `This option is already selected`, duplicates = false, keepSelectedInDropdown = false, key = (opt) => `${get_label(opt)}`.toLowerCase(), filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
-    return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
-}, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), selected = $bindable(options
-    ?.filter((opt) => opt instanceof Object && opt?.preselected)
-    .slice(0, maxSelect ?? undefined) ?? []), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, value = $bindable(null), expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, portal: portal_params = {}, ...rest } = $props();
+    const label = `${get_label(opt)}`;
+    return fuzzy
+        ? fuzzy_match(searchText, label)
+        : label.toLowerCase().includes(searchText.toLowerCase());
+}, fuzzy = true, closeDropdownOnSelect = `if-mobile`, form_input = $bindable(null), highlightMatches = true, id = null, input = $bindable(null), inputClass = ``, inputStyle = null, inputmode = null, invalid = $bindable(false), liActiveOptionClass = ``, liActiveUserMsgClass = ``, liOptionClass = ``, liOptionStyle = null, liSelectedClass = ``, liSelectedStyle = null, liUserMsgClass = ``, loading = false, matchingOptions = $bindable([]), maxOptions = undefined, maxSelect = null, maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``), maxSelectMsgClass = ``, name = null, noMatchingOptionsMsg = `No matching options`, open = $bindable(false), options = $bindable(), outerDiv = $bindable(null), outerDivClass = ``, parseLabelsAsHtml = false, pattern = null, placeholder = null, removeAllTitle = `Remove all`, removeBtnTitle = `Remove`, minSelect = null, required = false, resetFilterOnAdd = true, searchText = $bindable(``), value = $bindable(null), selected = $bindable(value !== null && value !== undefined
+    ? (Array.isArray(value) ? value : [value])
+    : (options
+        ?.filter((opt) => opt instanceof Object && opt?.preselected)
+        .slice(0, maxSelect ?? undefined) ?? [])), sortSelected = false, selectedOptionsDraggable = !sortSelected, style = null, ulOptionsClass = ``, ulSelectedClass = ``, ulSelectedStyle = null, ulOptionsStyle = null, expandIcon, selectedItem, children, removeIcon, afterInput, spinner, disabledIcon, option, userMsg, onblur, onclick, onfocus, onkeydown, onkeyup, onmousedown, onmouseenter, onmouseleave, ontouchcancel, ontouchend, ontouchmove, ontouchstart, onadd, oncreate, onremove, onremoveAll, onchange, onopen, onclose, portal: portal_params = {}, ...rest } = $props();
 $effect.pre(() => {
     // if maxSelect=1, value is the single item in selected (or null if selected is empty)
     // this solves both https://github.com/janosh/svelte-multiselect/issues/86 and
@@ -257,11 +265,25 @@ async function handle_keydown(event) {
         // if none of the above special cases apply, we make next/prev option
         // active with wrap around at both ends
         const increment = event.key === `ArrowUp` ? -1 : 1;
-        activeIndex = (activeIndex + increment) % matchingOptions.length;
+        // Include user message in total count if it exists
+        const has_user_msg = searchText && ((allowUserOptions && createOptionMsg) ||
+            (!duplicates && selected.map(get_label).includes(searchText)) ||
+            (matchingOptions.length === 0 && noMatchingOptionsMsg));
+        const total_items = matchingOptions.length + (has_user_msg ? 1 : 0);
+        activeIndex = (activeIndex + increment) % total_items;
         // in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
         // need to do manual wrap around at 0
         if (activeIndex < 0)
-            activeIndex = matchingOptions.length - 1;
+            activeIndex = total_items - 1;
+        // Handle user message activation
+        if (has_user_msg && activeIndex === matchingOptions.length) {
+            option_msg_is_active = true;
+            activeOption = null;
+        }
+        else {
+            option_msg_is_active = false;
+            activeOption = matchingOptions[activeIndex] ?? null;
+        }
         if (autoScroll) {
             await tick();
             const li = document.querySelector(`ul.options > li.active`);
@@ -273,7 +295,9 @@ async function handle_keydown(event) {
         event.stopPropagation();
         // Only remove option if it wouldn't violate minSelect
         if (minSelect === null || selected.length > minSelect) {
-            remove(selected.at(-1), event);
+            const last_option = selected.at(-1);
+            if (last_option)
+                remove(last_option, event);
         }
         // Don't prevent default, allow normal backspace behavior if not removing
     } // make first matching option active on any keypress (if none of the above special cases match)
@@ -310,9 +334,17 @@ const if_enter_or_space = (handler) => (event) => {
     }
 };
 function on_click_outside(event) {
-    if (outerDiv && !outerDiv.contains(event.target)) {
-        close_dropdown(event);
-    }
+    if (!outerDiv)
+        return;
+    const target = event.target;
+    // Check if click is inside the main component
+    if (outerDiv.contains(target))
+        return;
+    // If portal is active, also check if click is inside the portalled options dropdown
+    if (portal_params?.active && ul_options && ul_options.contains(target))
+        return;
+    // Click is outside both the main component and any portalled dropdown
+    close_dropdown(event);
 }
 let drag_idx = $state(null);
 // event handlers enable dragging to reorder selected options
@@ -342,27 +374,6 @@ const dragstart = (idx) => (event) => {
     event.dataTransfer.setData(`text/plain`, `${idx}`);
 };
 let ul_options = $state();
-// Update highlights whenever search text changes (after ul_options is available)
-$effect(() => {
-    if (ul_options && highlightMatches) {
-        if (searchText) {
-            highlight_matching_nodes(ul_options, searchText, noMatchingOptionsMsg);
-        }
-        else if (typeof CSS !== `undefined` && CSS.highlights) {
-            CSS.highlights.delete?.(`sms-search-matches`); // Clear highlights when search text is empty
-        }
-    }
-});
-// highlight text matching user-entered search text in available options
-function highlight_matching_options(event) {
-    if (!highlightMatches || !ul_options)
-        return;
-    // get input's search query
-    const query = event?.target?.value.trim().toLowerCase();
-    if (!query)
-        return;
-    highlight_matching_nodes(ul_options, query, noMatchingOptionsMsg);
-}
 const handle_input_keydown = (event) => {
     handle_keydown(event); // Restore internal logic
     // Call original forwarded handler
@@ -392,6 +403,7 @@ $effect(() => {
 const handle_input_blur = (event) => {
     // For portalled dropdowns, don't close on blur since clicks on portalled elements
     // will cause blur but we want to allow the click to register first
+    // (otherwise mobile touch event is unable to select options https://github.com/janosh/svelte-multiselect/issues/335)
     if (portal_params?.active) {
         onblur?.(event); // Let the click handler manage closing for portalled dropdowns
         return;
@@ -429,7 +441,7 @@ function portal(node, params) {
             tick().then(update_position);
         window.addEventListener(`scroll`, update_position, true);
         window.addEventListener(`resize`, update_position);
-        $effect.pre(() => {
+        $effect(() => {
             if (open && target_node)
                 update_position();
             else
@@ -505,8 +517,7 @@ function portal(node, params) {
   {:else}
     <Icon
       icon="ChevronExpand"
-      width="15px"
-      style="min-width: 1em; padding: 0 1pt; cursor: pointer"
+      style="width: 15px; min-width: 1em; padding: 0 1pt; cursor: pointer"
     />
   {/if}
   <ul
@@ -561,7 +572,7 @@ function portal(node, params) {
             {#if removeIcon}
               {@render removeIcon()}
             {:else}
-              <Icon icon="Cross" width="15px" />
+              <Icon icon="Cross" style="width: 15px" />
             {/if}
           </button>
         {/if}
@@ -577,13 +588,12 @@ function portal(node, params) {
       {autocomplete}
       {inputmode}
       {pattern}
-      placeholder={selected.length == 0 ? placeholder : null}
+      placeholder={selected.length === 0 ? placeholder : null}
       aria-invalid={invalid ? `true` : null}
       ondrop={() => false}
       onmouseup={open_dropdown}
       onkeydown={handle_input_keydown}
       onfocus={handle_input_focus}
-      oninput={highlight_matching_options}
       onblur={handle_input_blur}
       {onclick}
       {onkeyup}
@@ -619,8 +629,7 @@ function portal(node, params) {
     {:else}
       <Icon
         icon="Disabled"
-        width="14pt"
-        style="margin: 0 2pt"
+        style="width: 14pt; margin: 0 2pt"
         data-name="disabled-icon"
         aria-disabled="true"
       />
@@ -644,7 +653,7 @@ function portal(node, params) {
         {#if removeIcon}
           {@render removeIcon()}
         {:else}
-          <Icon icon="Cross" width="15px" />
+          <Icon icon="Cross" style="width: 15px" />
         {/if}
       </button>
     {/if}
@@ -654,6 +663,17 @@ function portal(node, params) {
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul
       use:portal={{ target_node: outerDiv, ...portal_params }}
+      {@attach highlight_matches({
+        query: searchText,
+        disabled: !highlightMatches,
+        fuzzy,
+        css_class: `sms-search-matches`,
+        // don't highlight text in the "Create this option..." message
+        node_filter: (node) =>
+          node?.parentElement?.closest(`li.user-msg`)
+            ? NodeFilter.FILTER_REJECT
+            : NodeFilter.FILTER_ACCEPT,
+      })}
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
@@ -663,10 +683,13 @@ function portal(node, params) {
       bind:this={ul_options}
       style={ulOptionsStyle}
     >
-      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as
-        optionItem,
+      {#each matchingOptions.slice(
+        0,
+        maxOptions == null ? Infinity : Math.max(0, maxOptions),
+      ) as
+        option_item,
         idx
-        (duplicates ? [key(optionItem), idx] : key(optionItem))
+        (duplicates ? [key(option_item), idx] : key(option_item))
       }
         {@const {
         label,
@@ -674,21 +697,22 @@ function portal(node, params) {
         title = null,
         selectedTitle = null,
         disabledTitle = defaultDisabledTitle,
-      } = optionItem instanceof Object ? optionItem : { label: optionItem }}
+      } = option_item instanceof Object ? option_item : { label: option_item }}
         {@const active = activeIndex === idx}
+        {@const selected = is_selected(label)}
         {@const optionStyle =
-        [get_style(optionItem, `option`), liOptionStyle].filter(Boolean).join(
+        [get_style(option_item, `option`), liOptionStyle].filter(Boolean).join(
           ` `,
         ) ||
         null}
         <li
           onclick={(event) => {
             if (disabled) return
-            if (keepSelectedInDropdown) toggle_option(optionItem, event)
-            else add(optionItem, event)
+            if (keepSelectedInDropdown) toggle_option(option_item, event)
+            else add(option_item, event)
           }}
-          title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
-          class:selected={is_selected(label)}
+          title={disabled ? disabledTitle : (selected && selectedTitle) || title}
+          class:selected
           class:active
           class:disabled
           class="{liOptionClass} {active ? liActiveOptionClass : ``}"
@@ -699,13 +723,13 @@ function portal(node, params) {
             if (!disabled) activeIndex = idx
           }}
           role="option"
-          aria-selected="false"
+          aria-selected={selected ? `true` : `false`}
           style={optionStyle}
           onkeydown={(event) => {
             if (!disabled && (event.key === `Enter` || event.code === `Space`)) {
               event.preventDefault()
-              if (keepSelectedInDropdown) toggle_option(optionItem, event)
-              else add(optionItem, event)
+              if (keepSelectedInDropdown) toggle_option(option_item, event)
+              else add(option_item, event)
             }
           }}
         >
@@ -713,25 +737,25 @@ function portal(node, params) {
             <input
               type="checkbox"
               class="option-checkbox"
-              checked={is_selected(label)}
-              aria-label="Toggle {get_label(optionItem)}"
+              checked={selected}
+              aria-label="Toggle {get_label(option_item)}"
               tabindex="-1"
             />
           {/if}
           {#if option}
             {@render option({
-          option: optionItem,
+          option: option_item,
           idx,
         })}
           {:else if children}
             {@render children({
-          option: optionItem,
+          option: option_item,
           idx,
         })}
           {:else if parseLabelsAsHtml}
-            {@html get_label(optionItem)}
+            {@html get_label(option_item)}
           {:else}
-            {get_label(optionItem)}
+            {get_label(option_item)}
           {/if}
         </li>
       {/each}
@@ -739,7 +763,7 @@ function portal(node, params) {
         {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
         {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
         {@const can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
-        {@const no_match = Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) &&
+        {@const no_match = Boolean(matchingOptions?.length === 0 && noMatchingOptionsMsg) &&
         `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}

package/dist/MultiSelect.svelte.d.ts

@@ -1,25 +1,25 @@
-import type { MultiSelectProps, Option as T } from './types';
-declare function $$render<Option extends T>(): {
-    props: MultiSelectProps;
+import type { MultiSelectProps } from './types';
+declare function $$render<Option extends import('./types').Option>(): {
+    props: MultiSelectProps<Option>;
     exports: {};
-    bindings: "value" | "selected" | "invalid" | "open" | "activeIndex" | "activeOption" | "form_input" | "input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    bindings: "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<Option extends T> {
+declare class __sveltets_Render<Option extends import('./types').Option> {
     props(): ReturnType<typeof $$render<Option>>['props'];
     events(): ReturnType<typeof $$render<Option>>['events'];
     slots(): ReturnType<typeof $$render<Option>>['slots'];
-    bindings(): "value" | "selected" | "invalid" | "open" | "activeIndex" | "activeOption" | "form_input" | "input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    bindings(): "input" | "invalid" | "value" | "selected" | "open" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <Option extends T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
+    new <Option extends import('./types').Option>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Option>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Option>['props']>, ReturnType<__sveltets_Render<Option>['events']>, ReturnType<__sveltets_Render<Option>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Option>['bindings']>;
     } & ReturnType<__sveltets_Render<Option>['exports']>;
-    <Option extends T>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
+    <Option extends import('./types').Option>(internal: unknown, props: ReturnType<__sveltets_Render<Option>['props']> & {}): ReturnType<__sveltets_Render<Option>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 declare const MultiSelect: $$IsomorphicComponent;
-type MultiSelect<Option extends T> = InstanceType<typeof MultiSelect<Option>>;
+type MultiSelect<Option extends import('./types').Option> = InstanceType<typeof MultiSelect<Option>>;
 export default MultiSelect;