svelte-multiselect 11.0.0-rc.1 → 11.1.0

package/dist/MultiSelect.svelte.d.ts

@@ -1,108 +1,19 @@
-import { SvelteComponent } from "svelte";
-import type { MultiSelectEvents, Option as T } from './types';
+import type { MultiSelectProps } from './props';
+import type { Option as T } from './types';
 declare class __sveltets_Render<Option extends T> {
-    props(): {
-        activeIndex?: number | null;
-        activeOption?: Option | null | undefined;
-        createOptionMsg?: string | null;
-        allowUserOptions?: boolean | "append";
-        allowEmpty?: boolean;
-        autocomplete?: string;
-        autoScroll?: boolean;
-        breakpoint?: number;
-        defaultDisabledTitle?: string;
-        disabled?: boolean;
-        disabledInputTitle?: string;
-        duplicateOptionMsg?: string;
-        duplicates?: boolean;
-        key?: ((opt: T) => unknown) | undefined;
-        filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
-        closeDropdownOnSelect?: boolean | "desktop";
-        form_input?: HTMLInputElement | null;
-        highlightMatches?: boolean;
-        id?: string | null;
-        input?: HTMLInputElement | null;
-        inputClass?: string;
-        inputStyle?: string | null;
-        inputmode?: string | null;
-        invalid?: boolean;
-        liActiveOptionClass?: string;
-        liActiveUserMsgClass?: string;
-        liOptionClass?: string;
-        liOptionStyle?: string | null;
-        liSelectedClass?: string;
-        liSelectedStyle?: string | null;
-        liUserMsgClass?: string;
-        loading?: boolean;
-        matchingOptions?: Option[] | undefined;
-        maxOptions?: number | undefined;
-        maxSelect?: number | null;
-        maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
-        maxSelectMsgClass?: string;
-        name?: string | null;
-        noMatchingOptionsMsg?: string;
-        open?: boolean;
-        options: Option[];
-        outerDiv?: HTMLDivElement | null;
-        outerDivClass?: string;
-        parseLabelsAsHtml?: boolean;
-        pattern?: string | null;
-        placeholder?: string | null;
-        removeAllTitle?: string;
-        removeBtnTitle?: string;
-        minSelect?: number | null;
-        required?: boolean | number;
-        resetFilterOnAdd?: boolean;
-        searchText?: string;
-        selected?: Option[] | undefined;
-        sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
-        selectedOptionsDraggable?: boolean;
-        style?: string | null;
-        ulOptionsClass?: string;
-        ulSelectedClass?: string;
-        ulSelectedStyle?: string | null;
-        ulOptionsStyle?: string | null;
-        value?: Option | Option[] | null | undefined;
-    };
-    events(): MultiSelectEvents;
-    slots(): {
-        'expand-icon': {
-            open: boolean;
-        };
-        selected: {
-            option: Option;
-            idx: any;
-        };
-        default: {
-            option: Option;
-            idx: any;
-        };
-        'remove-icon': {};
-        'after-input': {
-            selected: Option[];
-            disabled: boolean;
-            invalid: boolean;
-            id: string | null;
-            placeholder: string | null;
-            open: boolean;
-            required: number | boolean;
-        };
-        spinner: {};
-        'disabled-icon': {};
-        option: {
-            option: Option;
-            idx: any;
-        };
-        'user-msg': {
-            searchText: string;
-            msgType: any;
-            msg: any;
-        };
-    };
+    props(): MultiSelectProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "selected" | "invalid" | "open" | "activeIndex" | "activeOption" | "form_input" | "input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    exports(): {};
 }
-export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
-export type MultiSelectEvents_<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
-export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
-export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents_<Option>, MultiSelectSlots<Option>> {
+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']>> & {
+        $$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']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<Option extends T> = InstanceType<typeof MultiSelect<Option>>;
+export default MultiSelect;

package/dist/Wiggle.svelte

@@ -1,24 +1,15 @@
-<script>import { spring } from 'svelte/motion';
-// bind to this state and set it to true from parent
-export let wiggle = false;
-// intended use case: set max value during wiggle for one of angle, scale, dx, dy through props
-export let angle = 0; // try 20
-export let scale = 1; // try 1.2
-export let dx = 0; // try 10
-export let dy = 0; // try 10
-export let duration = 200;
-export let stiffness = 0.05;
-export let damping = 0.1;
-let rest_state = { angle: 0, scale: 1, dx: 0, dy: 0 };
-let store = spring(rest_state, { stiffness, damping });
-$: store.set(wiggle ? { scale, angle, dx, dy } : rest_state);
-$: if (wiggle)
-    setTimeout(() => (wiggle = false), duration);
+<script lang="ts">import { Spring } from 'svelte/motion';
+let { wiggle = $bindable(false), angle = 0, scale = 1, dx = 0, dy = 0, duration = 200, stiffness = 0.05, damping = 0.1, children, } = $props();
+const store = Spring.of(() => (wiggle ? { scale, angle, dx, dy } : { angle: 0, scale: 1, dx: 0, dy: 0 }), { stiffness, damping });
+$effect.pre(() => {
+    if (wiggle)
+        setTimeout(() => (wiggle = false), duration);
+});
 </script>
 
 <span
-  style:transform="rotate({$store.angle}deg) scale({$store.scale}) translate({$store.dx}px,
-  {$store.dy}px)"
+  style:transform="rotate({store.current.angle}deg) scale({store.current.scale})
+  translate({store.current.dx}px, {store.current.dy}px)"
 >
-  <slot />
+  {@render children?.()}
 </span>

package/dist/Wiggle.svelte.d.ts

@@ -1,27 +1,15 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        wiggle?: boolean;
-        angle?: number;
-        scale?: number;
-        dx?: number;
-        dy?: number;
-        duration?: number;
-        stiffness?: number;
-        damping?: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type WiggleProps = typeof __propDef.props;
-export type WiggleEvents = typeof __propDef.events;
-export type WiggleSlots = typeof __propDef.slots;
-export default class Wiggle extends SvelteComponent<WiggleProps, WiggleEvents, WiggleSlots> {
+import type { Snippet } from 'svelte';
+interface Props {
+    wiggle?: boolean;
+    angle?: number;
+    scale?: number;
+    dx?: number;
+    dy?: number;
+    duration?: number;
+    stiffness?: number;
+    damping?: number;
+    children?: Snippet;
 }
-export {};
+declare const Wiggle: import("svelte").Component<Props, {}, "wiggle">;
+type Wiggle = ReturnType<typeof Wiggle>;
+export default Wiggle;

package/dist/icons/ChevronExpand.svelte

@@ -1,4 +1,8 @@
-<svg {...$$props} fill="currentColor" viewBox="0 0 16 16">
+<script lang="ts">let { ...props } = $props();
+export {};
+</script>
+
+<svg {...props} fill="currentColor" viewBox="0 0 16 16">
   <path
     d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"
   />

package/dist/icons/ChevronExpand.svelte.d.ts

@@ -1,25 +1,4 @@
-/** @typedef {typeof __propDef.props}  ChevronExpandProps */
-/** @typedef {typeof __propDef.events}  ChevronExpandEvents */
-/** @typedef {typeof __propDef.slots}  ChevronExpandSlots */
-export default class ChevronExpand extends SvelteComponent<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ChevronExpandProps = typeof __propDef.props;
-export type ChevronExpandEvents = typeof __propDef.events;
-export type ChevronExpandSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+import type { SVGAttributes } from 'svelte/elements';
+declare const ChevronExpand: import("svelte").Component<SVGAttributes<EventTarget>, {}, "">;
+type ChevronExpand = ReturnType<typeof ChevronExpand>;
+export default ChevronExpand;

package/dist/icons/Cross.svelte

@@ -1,6 +1,10 @@
-<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
+<script lang="ts">let { ...props } = $props();
+export {};
+</script>
+
+<!-- https://api.iconify.design/ic:round-clear.svg -->
+<svg {...props} viewBox="0 0 24 24" fill="currentColor">
   <path
     d="M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59L7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12L5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
   />
 </svg>
-<!-- https://api.iconify.design/ic:round-clear.svg -->

package/dist/icons/Cross.svelte.d.ts

@@ -1,25 +1,4 @@
-/** @typedef {typeof __propDef.props}  CrossProps */
-/** @typedef {typeof __propDef.events}  CrossEvents */
-/** @typedef {typeof __propDef.slots}  CrossSlots */
-export default class Cross extends SvelteComponent<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type CrossProps = typeof __propDef.props;
-export type CrossEvents = typeof __propDef.events;
-export type CrossSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+import type { SVGAttributes } from 'svelte/elements';
+declare const Cross: import("svelte").Component<SVGAttributes<EventTarget>, {}, "">;
+type Cross = ReturnType<typeof Cross>;
+export default Cross;

package/dist/icons/Disabled.svelte

@@ -1,5 +1,9 @@
+<script lang="ts">let { ...props } = $props();
+export {};
+</script>
+
 <!-- https://api.iconify.design/fe:disabled.svg -->
-<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
+<svg {...props} viewBox="0 0 24 24" fill="currentColor">
   <path
     d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm-4.906-3.68L18.32 7.094A8 8 0 0 1 7.094 18.32ZM5.68 16.906A8 8 0 0 1 16.906 5.68L5.68 16.906Z"
   />

package/dist/icons/Disabled.svelte.d.ts

@@ -1,25 +1,4 @@
-/** @typedef {typeof __propDef.props}  DisabledProps */
-/** @typedef {typeof __propDef.events}  DisabledEvents */
-/** @typedef {typeof __propDef.slots}  DisabledSlots */
-export default class Disabled extends SvelteComponent<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DisabledProps = typeof __propDef.props;
-export type DisabledEvents = typeof __propDef.events;
-export type DisabledSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+import type { SVGAttributes } from 'svelte/elements';
+declare const Disabled: import("svelte").Component<SVGAttributes<EventTarget>, {}, "">;
+type Disabled = ReturnType<typeof Disabled>;
+export default Disabled;

package/dist/icons/Octocat.svelte

@@ -1,4 +1,8 @@
-<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
+<script lang="ts">let { ...props } = $props();
+export {};
+</script>
+
+<svg {...props} viewBox="0 0 24 24" fill="currentColor">
   <path
     d="M8.422 20.081c0 .896.01 1.753.016 2.285a.617.617 0 0 0 .422.58c2.078.686 4.317.718 6.414.091l.292-.087a.67.67 0 0 0 .478-.638c.005-.733.017-2.017.017-3.53c0-1.372-.477-2.25-1.031-2.707c3.399-.366 6.97-1.61 6.97-7.227c0-1.61-.592-2.91-1.566-3.934c.153-.366.688-1.866-.153-3.878c0 0-1.28-.403-4.201 1.5a14.76 14.76 0 0 0-3.82-.494c-1.298 0-2.597.165-3.819.494C5.52.65 4.24 1.036 4.24 1.036c-.84 2.012-.306 3.512-.153 3.878a5.565 5.565 0 0 0-1.566 3.934c0 5.598 3.552 6.86 6.951 7.227c-.439.366-.84 1.006-.973 1.957c-.879.384-3.075 1.006-4.45-1.207c-.286-.44-1.146-1.519-2.349-1.5c-1.28.018-.516.695.02.97c.648.347 1.393 1.646 1.565 2.067c.306.823 1.299 2.396 5.137 1.72Z"
   />

package/dist/icons/Octocat.svelte.d.ts

@@ -1,25 +1,4 @@
-/** @typedef {typeof __propDef.props}  OctocatProps */
-/** @typedef {typeof __propDef.events}  OctocatEvents */
-/** @typedef {typeof __propDef.slots}  OctocatSlots */
-export default class Octocat extends SvelteComponent<{
-    [x: string]: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type OctocatProps = typeof __propDef.props;
-export type OctocatEvents = typeof __propDef.events;
-export type OctocatSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+import type { SVGAttributes } from 'svelte/elements';
+declare const Octocat: import("svelte").Component<SVGAttributes<EventTarget>, {}, "">;
+type Octocat = ReturnType<typeof Octocat>;
+export default Octocat;

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
+export * from './props';
 export * from './types';
-export declare function scroll_into_view_if_needed_polyfill(centerIfNeeded?: boolean): IntersectionObserver;
+export declare function scroll_into_view_if_needed_polyfill(element: Element, centerIfNeeded?: boolean): IntersectionObserver;

package/dist/index.js

@@ -2,30 +2,32 @@ export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as MultiSelect, default } from './MultiSelect.svelte';
 export { default as Wiggle } from './Wiggle.svelte';
+export * from './props';
 export * from './types';
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87
 // Polyfill copied from
 // https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
 // exported for testing
-export function scroll_into_view_if_needed_polyfill(centerIfNeeded = true) {
-    const elem = this;
-    const observer = new IntersectionObserver(function ([entry]) {
+export function scroll_into_view_if_needed_polyfill(element, centerIfNeeded = true) {
+    const observer = new IntersectionObserver(([entry], obs) => {
         const ratio = entry.intersectionRatio;
         if (ratio < 1) {
             const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-            elem.scrollIntoView({
+            element.scrollIntoView({
                 block: place,
                 inline: place,
             });
         }
-        this.disconnect();
+        obs.disconnect();
     });
-    observer.observe(elem);
+    observer.observe(element);
     return observer; // return for testing
 }
 if (typeof Element !== `undefined` &&
     !Element.prototype?.scrollIntoViewIfNeeded &&
     typeof IntersectionObserver !== `undefined`) {
-    Element.prototype.scrollIntoViewIfNeeded = scroll_into_view_if_needed_polyfill;
+    Element.prototype.scrollIntoViewIfNeeded = function scrollIntoViewIfNeeded() {
+        scroll_into_view_if_needed_polyfill(this);
+    };
 }

package/dist/props.d.ts

@@ -0,0 +1,143 @@
+import type { Snippet } from 'svelte';
+import type { FocusEventHandler, HTMLInputAttributes, KeyboardEventHandler, MouseEventHandler, TouchEventHandler } from 'svelte/elements';
+import type { Option } from './types';
+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 MultiSelectComponentEvents<T extends Option = Option> {
+    onadd?: (data: {
+        option: T;
+    }) => unknown;
+    oncreate?: (data: {
+        option: T;
+    }) => unknown;
+    onremove?: (data: {
+        option: T;
+    }) => unknown;
+    onremoveAll?: (data: {
+        options: T[];
+    }) => unknown;
+    onchange?: (data: {
+        option?: T;
+        options?: T[];
+        type: `add` | `remove` | `removeAll`;
+    }) => unknown;
+    onopen?: (data: {
+        event: Event;
+    }) => unknown;
+    onclose?: (data: {
+        event: Event;
+    }) => unknown;
+}
+export interface MultiSelectSnippets<T extends Option = Option> {
+    expandIcon?: Snippet<[{
+        open: boolean;
+    }]>;
+    selectedItem?: Snippet<[{
+        option: T;
+        idx: number;
+    }]>;
+    children?: Snippet<[{
+        option: T;
+        idx: number;
+    }]>;
+    removeIcon?: Snippet;
+    afterInput?: Snippet<[
+        Pick<MultiSelectParameters, `selected` | `disabled` | `invalid` | `id` | `placeholder` | `open` | `required`>
+    ]>;
+    spinner?: Snippet;
+    disabledIcon?: Snippet;
+    option?: Snippet<[{
+        option: T;
+        idx: number;
+    }]>;
+    userMsg?: Snippet<[
+        {
+            searchText: string;
+            msgType: false | `dupe` | `create` | `no-match`;
+            msg: null | string;
+        }
+    ]>;
+}
+export interface PortalParams {
+    target_node?: HTMLElement | null;
+    active?: boolean;
+}
+export interface MultiSelectParameters<T extends Option = Option> {
+    activeIndex?: number | null;
+    activeOption?: T | null;
+    createOptionMsg?: string | null;
+    allowUserOptions?: boolean | `append`;
+    allowEmpty?: boolean;
+    autocomplete?: HTMLInputAttributes[`autocomplete`];
+    autoScroll?: boolean;
+    breakpoint?: number;
+    defaultDisabledTitle?: string;
+    disabled?: boolean;
+    disabledInputTitle?: string;
+    duplicateOptionMsg?: string;
+    duplicates?: boolean;
+    key?: (opt: T) => unknown;
+    filterFunc?: (opt: T, searchText: string) => boolean;
+    closeDropdownOnSelect?: boolean | `desktop`;
+    form_input?: HTMLInputElement | null;
+    highlightMatches?: boolean;
+    id?: string | null;
+    input?: HTMLInputElement | null;
+    inputClass?: string;
+    inputStyle?: string | null;
+    inputmode?: HTMLInputAttributes[`inputmode`] | null;
+    invalid?: boolean;
+    liActiveOptionClass?: string;
+    liActiveUserMsgClass?: string;
+    liOptionClass?: string;
+    liOptionStyle?: string | null;
+    liSelectedClass?: string;
+    liSelectedStyle?: string | null;
+    liUserMsgClass?: string;
+    loading?: boolean;
+    matchingOptions?: T[];
+    maxOptions?: number | undefined;
+    maxSelect?: number | null;
+    maxSelectMsg?: ((current: number, max: number) => string) | null;
+    maxSelectMsgClass?: string;
+    name?: string | null;
+    noMatchingOptionsMsg?: string;
+    open?: boolean;
+    options: T[];
+    outerDiv?: HTMLDivElement | null;
+    outerDivClass?: string;
+    parseLabelsAsHtml?: boolean;
+    pattern?: string | null;
+    placeholder?: string | null;
+    removeAllTitle?: string;
+    removeBtnTitle?: string;
+    minSelect?: number | null;
+    required?: boolean | number;
+    resetFilterOnAdd?: boolean;
+    searchText?: string;
+    selected?: T[];
+    sortSelected?: boolean | ((op1: T, op2: T) => number);
+    selectedOptionsDraggable?: boolean;
+    style?: string | null;
+    ulOptionsClass?: string;
+    ulSelectedClass?: string;
+    ulSelectedStyle?: string | null;
+    ulOptionsStyle?: string | null;
+    value?: T | T[] | null;
+    portal?: PortalParams;
+    [key: string]: unknown;
+}
+export interface MultiSelectProps<T extends Option = Option> extends MultiSelectNativeEvents, MultiSelectComponentEvents<T>, MultiSelectSnippets<T>, MultiSelectParameters<T> {
+}

package/dist/props.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -14,43 +14,3 @@ export type ObjectOption = {
     style?: OptionStyle;
     [key: string]: unknown;
 };
-export type DispatchEvents<T = Option> = {
-    add: {
-        option: T;
-    };
-    create: {
-        option: T;
-    };
-    remove: {
-        option: T;
-    };
-    removeAll: {
-        options: T[];
-    };
-    change: {
-        option?: T;
-        options?: T[];
-        type: 'add' | 'remove' | 'removeAll';
-    };
-    open: {
-        event: Event;
-    };
-    close: {
-        event: Event;
-    };
-};
-export type MultiSelectEvents = {
-    [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
-} & {
-    blur: FocusEvent;
-    click: MouseEvent;
-    focus: FocusEvent;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    mouseenter: MouseEvent;
-    mouseleave: MouseEvent;
-    touchcancel: TouchEvent;
-    touchend: TouchEvent;
-    touchmove: TouchEvent;
-    touchstart: TouchEvent;
-};

package/dist/utils.d.ts

@@ -1,6 +1,25 @@
-import type { Option, OptionStyle } from './types';
-export declare const get_label: (opt: Option) => string | number;
+import type { Option, OptionStyle } from '../types';
+/**
+ * Get the label key from an option object or the option itself if it's a string or number
+ * @param opt Option
+ * @returns Label
+ */
+export declare const get_label: (opt: Option) => any;
+/**
+ * This function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option.
+ * If the style is a string, it will be returned as is
+ * @param option Option
+ * @param key
+ * @returns CSS string
+ */
 export declare function get_style(option: {
     style?: OptionStyle;
     [key: string]: unknown;
-} | string | number, key?: 'selected' | 'option' | null): string;
+} | string | number, key?: `selected` | `option` | null): any;
+/**
+ * Highlights text nodes that matching the string query
+ * @param element Parent element
+ * @param query Search query
+ * @param noMatchingOptionsMsg Text for empty node
+ */
+export declare function highlight_matching_nodes(element: HTMLElement, query?: string, noMatchingOptionsMsg?: string): void;