svelte-multiselect 11.2.2 → 11.2.4

package/dist/PrevNext.svelte.d.ts

@@ -1,48 +1,36 @@
 import type { Snippet } from 'svelte';
-export type Item = string | [string, unknown];
-declare class __sveltets_Render<T extends Item> {
-    props(): {
-        [key: string]: unknown;
-        items?: T[] | undefined;
-        node?: string;
-        current?: string;
-        log?: `verbose` | `errors` | `silent`;
-        nav_options?: {
-            replace_state: boolean;
-            no_scroll: boolean;
-        } | undefined;
-        titles?: {
-            prev: string;
-            next: string;
-        } | undefined;
-        onkeyup?: ((obj: {
-            prev: Item;
-            next: Item;
-        }) => Record<string, string>) | null | undefined;
-        prev_snippet?: Snippet<[{
-            item: Item;
-        }]> | undefined;
-        children?: Snippet<[{
-            kind: `prev` | `next`;
-            item: Item;
-        }]> | undefined;
-        between?: Snippet<[]>;
-        next_snippet?: Snippet<[{
-            item: Item;
-        }]> | undefined;
+import type { HTMLAttributes } from 'svelte/elements';
+export type Item = [string, unknown];
+interface Props extends Omit<HTMLAttributes<HTMLElement>, `children` | `onkeyup`> {
+    items?: (string | Item)[];
+    node?: string;
+    current?: string;
+    log?: `verbose` | `errors` | `silent`;
+    nav_options?: {
+        replace_state: boolean;
+        no_scroll: boolean;
     };
-    events(): {};
-    slots(): {};
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends Item>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    titles?: {
+        prev: string;
+        next: string;
+    };
+    onkeyup?: ((obj: {
+        prev: Item;
+        next: Item;
+    }) => Record<string, string | undefined>) | null;
+    prev_snippet?: Snippet<[{
+        item: Item;
+    }]>;
+    children?: Snippet<[{
+        kind: `prev` | `next`;
+        item: Item;
+    }]>;
+    between?: Snippet<[]>;
+    next_snippet?: Snippet<[{
+        item: Item;
+    }]>;
+    min_items?: number;
 }
-declare const PrevNext: $$IsomorphicComponent;
-type PrevNext<T extends Item> = InstanceType<typeof PrevNext<T>>;
+declare const PrevNext: import("svelte").Component<Props, {}, "">;
+type PrevNext = ReturnType<typeof PrevNext>;
 export default PrevNext;

package/dist/Toggle.svelte

@@ -4,7 +4,8 @@ function handle_keydown(event) {
     onkeydown?.(event);
     if (event.key === `Enter`) {
         event.preventDefault();
-        checked = !checked;
+        const target = event.target;
+        target.click(); // simulate real user toggle so 'change' is dispatched
     }
 }
 export {};

package/dist/Toggle.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLLabelElement> {
     checked?: boolean;
     required?: boolean;
     input_style?: string;
@@ -9,7 +10,6 @@ interface Props {
     onblur?: (event: FocusEvent) => void;
     onkeydown?: (event: KeyboardEvent) => void;
     children?: Snippet<[]>;
-    [key: string]: unknown;
 }
 declare const Toggle: import("svelte").Component<Props, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;

package/dist/attachments.d.ts

@@ -25,22 +25,25 @@ export declare const sortable: ({ header_selector, asc_class, desc_class, sorted
         backgroundColor: string;
     } | undefined;
 }) => (node: HTMLElement) => () => void;
-type HighlightOptions = {
+export type HighlightOptions = {
     query?: string;
     disabled?: boolean;
+    fuzzy?: boolean;
     node_filter?: (node: Node) => number;
     css_class?: string;
 };
-export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => void) | undefined;
-export declare const tooltip: (options?: {
+export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
+export interface TooltipOptions {
     content?: string;
     placement?: `top` | `bottom` | `left` | `right`;
     delay?: number;
-}) => Attachment;
-type ClickOutsideConfig<T extends HTMLElement> = {
+    disabled?: boolean;
+    style?: string;
+}
+export declare const tooltip: (options?: TooltipOptions) => Attachment;
+export type ClickOutsideConfig<T extends HTMLElement> = {
     enabled?: boolean;
     exclude?: string[];
     callback?: (node: T, config: ClickOutsideConfig<T>) => void;
 };
 export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => () => void;
-export {};

package/dist/attachments.js

@@ -7,7 +7,7 @@ export const draggable = (options = {}) => (element) => {
     // Use simple variables for maximum performance
     let dragging = false;
     let start = { x: 0, y: 0 };
-    const initial = { left: 0, top: 0, width: 0 };
+    const initial = { left: 0, top: 0 };
     const handle = options.handle_selector
         ? node.querySelector(options.handle_selector)
         : node;
@@ -26,17 +26,14 @@ export const draggable = (options = {}) => (element) => {
             const rect = node.getBoundingClientRect();
             initial.left = rect.left;
             initial.top = rect.top;
-            initial.width = rect.width;
         }
         else {
             // For other positioning, use offset values
             initial.left = node.offsetLeft;
             initial.top = node.offsetTop;
-            initial.width = node.offsetWidth;
         }
         node.style.left = `${initial.left}px`;
         node.style.top = `${initial.top}px`;
-        node.style.width = `${initial.width}px`;
         node.style.right = `auto`; // Prevent conflict with left
         start = { x: event.clientX, y: event.clientY };
         document.body.style.userSelect = `none`; // Prevent text selection during drag
@@ -161,11 +158,15 @@ export const sortable = ({ header_selector = `thead th`, asc_class = `table-sort
     };
 };
 export const highlight_matches = (ops) => (node) => {
-    const { query = ``, disabled = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
-    // clear previous ranges from HighlightRegistry
-    CSS.highlights.clear();
-    if (!query || disabled || typeof CSS === `undefined` || !CSS.highlights)
-        return; // abort if CSS highlight API not supported
+    const { query = ``, disabled = false, fuzzy = false, node_filter = () => NodeFilter.FILTER_ACCEPT, css_class = `highlight-match`, } = ops;
+    // abort if CSS highlight API not supported
+    if (typeof CSS === `undefined` || !CSS.highlights)
+        return;
+    // always clear our own highlight first
+    CSS.highlights.delete(css_class);
+    // if disabled or empty query, stop after cleanup
+    if (!query || disabled)
+        return;
     const tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
         acceptNode: node_filter,
     });
@@ -178,28 +179,57 @@ export const highlight_matches = (ops) => (node) => {
     // iterate over all text nodes and find matches
     const ranges = text_nodes.map((el) => {
         const text = el.textContent?.toLowerCase();
-        const indices = [];
-        let start_pos = 0;
-        while (text && start_pos < text.length) {
-            const index = text.indexOf(query, start_pos);
-            if (index === -1)
-                break;
-            indices.push(index);
-            start_pos = index + query.length;
+        if (!text)
+            return [];
+        const search = query.toLowerCase();
+        if (fuzzy) {
+            // Fuzzy highlighting: highlight individual characters that match in order
+            const matching_indices = [];
+            let search_idx = 0;
+            let target_idx = 0;
+            // Find matching character indices
+            while (search_idx < search.length && target_idx < text.length) {
+                if (search[search_idx] === text[target_idx]) {
+                    matching_indices.push(target_idx);
+                    search_idx++;
+                }
+                target_idx++;
+            }
+            // Only create ranges if we found all characters in order
+            if (search_idx === search.length) {
+                return matching_indices.map((index) => {
+                    const range = new Range();
+                    range.setStart(el, index);
+                    range.setEnd(el, index + 1); // highlight single character
+                    return range;
+                });
+            }
+            return [];
+        }
+        else {
+            // Substring highlighting: highlight consecutive substrings
+            const indices = [];
+            let start_pos = 0;
+            while (start_pos < text.length) {
+                const index = text.indexOf(search, start_pos);
+                if (index === -1)
+                    break;
+                indices.push(index);
+                start_pos = index + search.length;
+            }
+            // create range object for each substring found in the text node
+            return indices.map((index) => {
+                const range = new Range();
+                range.setStart(el, index);
+                range.setEnd(el, index + search.length);
+                return range;
+            });
         }
-        // create range object for each str found in the text node
-        return indices.map((index) => {
-            const range = new Range();
-            range.setStart(el, index);
-            range.setEnd(el, index + query?.length);
-            return range;
-        });
     });
     // create Highlight object from ranges and add to registry
     CSS.highlights.set(css_class, new Highlight(...ranges.flat()));
-    return () => {
-        CSS.highlights.delete(css_class);
-    };
+    // Return cleanup function
+    return () => CSS.highlights.delete(css_class);
 };
 // Global tooltip state to ensure only one tooltip is shown at a time
 let current_tooltip = null;
@@ -223,7 +253,7 @@ export const tooltip = (options = {}) => (node) => {
     const safe_options = options || {};
     const cleanup_functions = [];
     function setup_tooltip(element) {
-        if (!element)
+        if (!element || safe_options.disabled)
             return;
         const content = safe_options.content || element.title ||
             element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
@@ -240,19 +270,133 @@ export const tooltip = (options = {}) => (node) => {
             show_timeout = setTimeout(() => {
                 const tooltip = document.createElement(`div`);
                 tooltip.className = `custom-tooltip`;
+                const placement = safe_options.placement || `bottom`;
+                tooltip.setAttribute(`data-placement`, placement);
+                // Apply base styles
                 tooltip.style.cssText = `
           position: absolute; z-index: 9999; opacity: 0;
-          background: var(--tooltip-bg); color: var(--text-color); border: var(--tooltip-border);
-          padding: 6px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4;
-          max-width: 280px; word-wrap: break-word; pointer-events: none;
-          filter: drop-shadow(0 2px 8px rgba(0,0,0,0.25)); transition: opacity 0.15s ease-out;
+          background: var(--tooltip-bg, #333); color: var(--text-color, white); border: var(--tooltip-border, none);
+          padding: var(--tooltip-padding, 6px 10px); border-radius: var(--tooltip-radius, 6px); font-size: var(--tooltip-font-size, 13px); line-height: 1.4;
+          max-width: var(--tooltip-max-width, 280px); word-wrap: break-word; pointer-events: none;
+          filter: var(--tooltip-shadow, drop-shadow(0 2px 8px rgba(0,0,0,0.25))); transition: opacity 0.15s ease-out;
         `;
+                // Apply custom styles if provided (these will override base styles due to CSS specificity)
+                if (safe_options.style) {
+                    // Parse and apply custom styles as individual properties for better control
+                    const custom_styles = safe_options.style.split(`;`).filter((style) => style.trim());
+                    custom_styles.forEach((style) => {
+                        const [property, value] = style.split(`:`).map((s) => s.trim());
+                        if (property && value)
+                            tooltip.style.setProperty(property, value);
+                    });
+                }
                 tooltip.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
+                // Mirror CSS custom properties from the trigger node onto the tooltip element
+                const trigger_styles = getComputedStyle(element);
+                [
+                    `--tooltip-bg`,
+                    `--text-color`,
+                    `--tooltip-border`,
+                    `--tooltip-padding`,
+                    `--tooltip-radius`,
+                    `--tooltip-font-size`,
+                    `--tooltip-shadow`,
+                    `--tooltip-max-width`,
+                    `--tooltip-opacity`,
+                    `--tooltip-arrow-size`,
+                ].forEach((name) => {
+                    const value = trigger_styles.getPropertyValue(name).trim();
+                    if (value)
+                        tooltip.style.setProperty(name, value);
+                });
+                // Append early so we can read computed border styles for arrow border
                 document.body.appendChild(tooltip);
+                // Arrow elements: optional border triangle behind fill triangle
+                const tooltip_styles = getComputedStyle(tooltip);
+                const arrow = document.createElement(`div`);
+                arrow.className = `custom-tooltip-arrow`;
+                arrow.style.cssText =
+                    `position: absolute; width: 0; height: 0; pointer-events: none;`;
+                const arrow_size_raw = trigger_styles.getPropertyValue(`--tooltip-arrow-size`)
+                    .trim();
+                const arrow_size_num = Number.parseInt(arrow_size_raw || ``, 10);
+                const arrow_px = Number.isFinite(arrow_size_num) ? arrow_size_num : 6;
+                const border_color = tooltip_styles.borderTopColor;
+                const border_width_num = Number.parseFloat(tooltip_styles.borderTopWidth || `0`);
+                const has_border = !!border_color && border_color !== `rgba(0, 0, 0, 0)` &&
+                    border_width_num > 0;
+                const maybe_append_border_arrow = () => {
+                    if (!has_border)
+                        return;
+                    const border_arrow = document.createElement(`div`);
+                    border_arrow.className = `custom-tooltip-arrow-border`;
+                    border_arrow.style.cssText =
+                        `position: absolute; width: 0; height: 0; pointer-events: none;`;
+                    const border_size = arrow_px + (border_width_num * 1.4);
+                    if (placement === `top`) {
+                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.bottom = `-${border_size}px`;
+                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                        border_arrow.style.borderTop = `${border_size}px solid ${border_color}`;
+                    }
+                    else if (placement === `left`) {
+                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.right = `-${border_size}px`;
+                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                        border_arrow.style.borderLeft = `${border_size}px solid ${border_color}`;
+                    }
+                    else if (placement === `right`) {
+                        border_arrow.style.top = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.left = `-${border_size}px`;
+                        border_arrow.style.borderTop = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid ${border_color}`;
+                    }
+                    else { // bottom
+                        border_arrow.style.left = `calc(50% - ${border_size}px)`;
+                        border_arrow.style.top = `-${border_size}px`;
+                        border_arrow.style.borderLeft = `${border_size}px solid transparent`;
+                        border_arrow.style.borderRight = `${border_size}px solid transparent`;
+                        border_arrow.style.borderBottom = `${border_size}px solid ${border_color}`;
+                    }
+                    tooltip.appendChild(border_arrow);
+                };
+                // Create the fill arrow on top
+                if (placement === `top`) {
+                    arrow.style.left = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.bottom = `-${arrow_px}px`;
+                    arrow.style.borderLeft = `${arrow_px}px solid transparent`;
+                    arrow.style.borderRight = `${arrow_px}px solid transparent`;
+                    arrow.style.borderTop = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                else if (placement === `left`) {
+                    arrow.style.top = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.right = `-${arrow_px}px`;
+                    arrow.style.borderTop = `${arrow_px}px solid transparent`;
+                    arrow.style.borderBottom = `${arrow_px}px solid transparent`;
+                    arrow.style.borderLeft = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                else if (placement === `right`) {
+                    arrow.style.top = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.left = `-${arrow_px}px`;
+                    arrow.style.borderTop = `${arrow_px}px solid transparent`;
+                    arrow.style.borderBottom = `${arrow_px}px solid transparent`;
+                    arrow.style.borderRight = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                else { // bottom
+                    arrow.style.left = `calc(50% - ${arrow_px}px)`;
+                    arrow.style.top = `-${arrow_px}px`;
+                    arrow.style.borderLeft = `${arrow_px}px solid transparent`;
+                    arrow.style.borderRight = `${arrow_px}px solid transparent`;
+                    arrow.style.borderBottom = `${arrow_px}px solid var(--tooltip-bg, #333)`;
+                }
+                maybe_append_border_arrow();
+                tooltip.appendChild(arrow);
                 // Position tooltip
                 const rect = element.getBoundingClientRect();
                 const tooltip_rect = tooltip.getBoundingClientRect();
-                const placement = safe_options.placement || `bottom`;
                 const margin = 12;
                 let top = 0, left = 0;
                 if (placement === `top`) {
@@ -276,29 +420,29 @@ export const tooltip = (options = {}) => (node) => {
                 top = Math.max(8, Math.min(top, globalThis.innerHeight - tooltip_rect.height - 8));
                 tooltip.style.left = `${left + globalThis.scrollX}px`;
                 tooltip.style.top = `${top + globalThis.scrollY}px`;
-                tooltip.style.opacity = `1`;
+                const custom_opacity = trigger_styles.getPropertyValue(`--tooltip-opacity`).trim();
+                tooltip.style.opacity = custom_opacity || `1`;
                 current_tooltip = tooltip;
             }, safe_options.delay || 100);
         }
         function hide_tooltip() {
             clear_tooltip();
-            hide_timeout = setTimeout(() => {
+            if (current_tooltip) {
+                current_tooltip.style.opacity = `0`;
                 if (current_tooltip) {
-                    current_tooltip.style.opacity = `0`;
-                    setTimeout(() => {
-                        if (current_tooltip) {
-                            current_tooltip.remove();
-                            current_tooltip = null;
-                        }
-                    }, 150);
+                    current_tooltip.remove();
+                    current_tooltip = null;
                 }
-            }, 50);
+            }
         }
         const events = [`mouseenter`, `mouseleave`, `focus`, `blur`];
         const handlers = [show_tooltip, hide_tooltip, show_tooltip, hide_tooltip];
         events.forEach((event, idx) => element.addEventListener(event, handlers[idx]));
+        // Hide tooltip when user scrolls
+        globalThis.addEventListener(`scroll`, hide_tooltip, true);
         return () => {
             events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
+            globalThis.removeEventListener(`scroll`, hide_tooltip, true);
             const original_title = element.getAttribute(`data-original-title`);
             if (original_title) {
                 element.setAttribute(`title`, original_title);

package/dist/index.d.ts

@@ -8,8 +8,8 @@ export { default as GitHubCorner } from './GitHubCorner.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default, default as MultiSelect } from './MultiSelect.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
-export { default as RadioButtons } from './RadioButtons.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export * from './utils';
 export { default as Wiggle } from './Wiggle.svelte';
 export declare function scroll_into_view_if_needed_polyfill(element: Element, centerIfNeeded?: boolean): IntersectionObserver;

package/dist/index.js

@@ -8,9 +8,9 @@ export { default as GitHubCorner } from './GitHubCorner.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default, default as MultiSelect } from './MultiSelect.svelte';
 export { default as PrevNext } from './PrevNext.svelte';
-export { default as RadioButtons } from './RadioButtons.svelte';
 export { default as Toggle } from './Toggle.svelte';
 export * from './types';
+export * from './utils';
 export { default as Wiggle } from './Wiggle.svelte';
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { FocusEventHandler, HTMLInputAttributes, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type Option = string | number | ObjectOption;
 export type OptionStyle = string | {
     option: string;
@@ -16,20 +16,6 @@ export type ObjectOption = {
     style?: OptionStyle;
     [key: string]: unknown;
 };
-export interface MultiSelectNativeEvents {
-    onblur?: FocusEventHandler<HTMLInputElement>;
-    onclick?: MouseEventHandler<HTMLInputElement>;
-    onfocus?: FocusEventHandler<HTMLInputElement>;
-    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
-    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
-    onmousedown?: MouseEventHandler<HTMLInputElement>;
-    onmouseenter?: MouseEventHandler<HTMLInputElement>;
-    onmouseleave?: MouseEventHandler<HTMLInputElement>;
-    ontouchcancel?: TouchEventHandler<HTMLInputElement>;
-    ontouchend?: TouchEventHandler<HTMLInputElement>;
-    ontouchmove?: TouchEventHandler<HTMLInputElement>;
-    ontouchstart?: TouchEventHandler<HTMLInputElement>;
-}
 export interface MultiSelectEvents<T extends Option = Option> {
     onadd?: (data: {
         option: T;
@@ -55,7 +41,7 @@ export interface MultiSelectEvents<T extends Option = Option> {
         event: Event;
     }) => unknown;
 }
-type AfterInputProps = Pick<MultiSelectParameters, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
+type AfterInputProps = Pick<MultiSelectProps, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>;
 type UserMsgProps = {
     searchText: string;
     msgType: false | `dupe` | `create` | `no-match`;
@@ -87,7 +73,7 @@ export interface PortalParams {
     target_node?: HTMLElement | null;
     active?: boolean;
 }
-export interface MultiSelectParameters<T extends Option = Option> {
+export interface MultiSelectProps<T extends Option = Option> extends MultiSelectEvents<T>, MultiSelectSnippets<T>, Omit<HTMLAttributes<HTMLDivElement>, `children` | `onchange` | `onclose`> {
     activeIndex?: number | null;
     activeOption?: T | null;
     createOptionMsg?: string | null;
@@ -101,8 +87,10 @@ export interface MultiSelectParameters<T extends Option = Option> {
     disabledInputTitle?: string;
     duplicateOptionMsg?: string;
     duplicates?: boolean;
+    keepSelectedInDropdown?: false | `plain` | `checkboxes`;
     key?: (opt: T) => unknown;
     filterFunc?: (opt: T, searchText: string) => boolean;
+    fuzzy?: boolean;
     closeDropdownOnSelect?: boolean | `if-mobile` | `retain-focus`;
     form_input?: HTMLInputElement | null;
     highlightMatches?: boolean;
@@ -150,8 +138,5 @@ export interface MultiSelectParameters<T extends Option = Option> {
     ulOptionsStyle?: string | null;
     value?: T | T[] | null;
     portal?: PortalParams;
-    [key: string]: unknown;
-}
-export interface MultiSelectProps<T extends Option = Option> extends MultiSelectNativeEvents, MultiSelectEvents<T>, MultiSelectSnippets<T>, MultiSelectParameters<T> {
 }
 export {};

package/dist/utils.d.ts

@@ -1,9 +1,4 @@
-import type { Option, OptionStyle } from './types';
+import type { Option } from './types';
 export declare const get_label: (opt: Option) => string | number;
-export declare function get_style(option: {
-    style?: OptionStyle;
-    [key: string]: unknown;
-} | string | number, key?: `selected` | `option` | null): string;
-export declare function highlight_matching_nodes(element: HTMLElement, // parent element
-query?: string, // search query
-noMatchingOptionsMsg?: string): void;
+export declare function get_style(option: Option, key?: `selected` | `option` | null | undefined): string;
+export declare function fuzzy_match(search_text: string, target_text: string): boolean;

package/dist/utils.js

@@ -14,14 +14,15 @@ export const get_label = (opt) => {
 // object to be used in the style attribute of the option.
 // If the style is a string, it will be returned as is
 export function get_style(option, key = null) {
+    if (key === undefined)
+        key = null;
     let css_str = ``;
-    if (![`selected`, `option`, null].includes(key)) {
+    const valid_key = key === null || key === `selected` || key === `option`;
+    if (!valid_key)
         console.error(`MultiSelect: Invalid key=${key} for get_style`);
-    }
     if (typeof option === `object` && option.style) {
-        if (typeof option.style === `string`) {
+        if (typeof option.style === `string`)
             css_str = option.style;
-        }
         if (typeof option.style === `object`) {
             if (key && key in option.style)
                 return option.style[key] ?? ``;
@@ -35,49 +36,24 @@ export function get_style(option, key = null) {
         css_str += `;`;
     return css_str;
 }
-// Highlights text nodes that matching the string query
-export function highlight_matching_nodes(element, // parent element
-query, // search query
-noMatchingOptionsMsg) {
-    if (typeof CSS === `undefined` || !CSS.highlights || !query)
-        return; // abort if CSS highlight API not supported
-    // clear previous ranges from HighlightRegistry
-    CSS.highlights.clear();
-    const tree_walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
-        acceptNode: (node) => {
-            // don't highlight text in the "no matching options" message
-            if (node?.textContent === noMatchingOptionsMsg) {
-                return NodeFilter.FILTER_REJECT;
-            }
-            return NodeFilter.FILTER_ACCEPT;
-        },
-    });
-    const text_nodes = [];
-    let current_node = tree_walker.nextNode();
-    while (current_node) {
-        text_nodes.push(current_node);
-        current_node = tree_walker.nextNode();
+// Fuzzy string matching function
+// Returns true if the search string can be found as a subsequence in the target string
+// e.g., "tageoo" matches "tasks/geo-opt" because t-a-g-e-o-o appears in order
+export function fuzzy_match(search_text, target_text) {
+    // Handle null/undefined inputs first
+    if (search_text === null || search_text === undefined || target_text === null ||
+        target_text === undefined)
+        return false;
+    if (!search_text)
+        return true;
+    if (!target_text)
+        return false;
+    const [search, target] = [search_text.toLowerCase(), target_text.toLowerCase()];
+    let [search_idx, target_idx] = [0, 0];
+    while (search_idx < search.length && target_idx < target.length) {
+        if (search[search_idx] === target[target_idx])
+            search_idx++;
+        target_idx++;
     }
-    // iterate over all text nodes and find matches
-    const ranges = text_nodes.map((el) => {
-        const text = el.textContent?.toLowerCase();
-        const indices = [];
-        let start_pos = 0;
-        while (text && start_pos < text.length) {
-            const index = text.indexOf(query, start_pos);
-            if (index === -1)
-                break;
-            indices.push(index);
-            start_pos = index + query.length;
-        }
-        // create range object for each str found in the text node
-        return indices.map((index) => {
-            const range = new Range();
-            range.setStart(el, index);
-            range.setEnd(el, index + query.length);
-            return range;
-        });
-    });
-    // create Highlight object from ranges and add to registry
-    CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()));
+    return search_idx === search.length;
 }