svelte-multiselect 11.2.1 → 11.2.2

package/dist/CmdPalette.svelte.d.ts

@@ -14,6 +14,6 @@ interface Props extends Omit<MultiSelectProps<Action>, `options`> {
     input?: HTMLInputElement | null;
     placeholder?: string;
 }
-declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "dialog" | "input">;
+declare const CmdPalette: import("svelte").Component<Props, {}, "dialog" | "input" | "open">;
 type CmdPalette = ReturnType<typeof CmdPalette>;
 export default CmdPalette;

package/dist/CopyButton.svelte

@@ -6,21 +6,26 @@ let { content = ``, state = $bindable(`ready`), global_selector = null, global =
     error: { icon: `Alert`, text: `` },
 }, children, ...rest } = $props();
 $effect(() => {
-    if (global || global_selector) {
-        for (const node of document.querySelectorAll(global_selector ?? `pre > code`)) {
-            // skip if <pre> already contains a button (presumably for copy)
-            const pre = node.parentElement;
-            if (!pre || (skip_selector && pre.querySelector(skip_selector)))
-                continue;
-            mount(CopyButton, {
-                target: pre,
-                props: {
-                    content: node.textContent ?? ``,
-                    style: `position: absolute; top: 9pt; right: 9pt;`,
-                },
-            });
+    if (!global && !global_selector)
+        return;
+    const apply_copy_buttons = () => {
+        const button_style = typeof global === `string`
+            ? global
+            : `position: absolute; top: 9pt; right: 9pt;`;
+        for (const code of document.querySelectorAll(global_selector ?? `pre > code`)) {
+            const pre = code.parentElement;
+            if (pre && !(skip_selector && pre.querySelector(skip_selector))) {
+                mount(CopyButton, {
+                    target: pre,
+                    props: { content: code.textContent ?? ``, style: button_style },
+                });
+            }
         }
-    }
+    };
+    apply_copy_buttons();
+    const observer = new MutationObserver(apply_copy_buttons);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => observer.disconnect();
 });
 async function copy() {
     try {

package/dist/CopyButton.svelte.d.ts

@@ -6,7 +6,7 @@ interface Props {
     content?: string;
     state?: State;
     global_selector?: string | null;
-    global?: boolean;
+    global?: boolean | string;
     skip_selector?: string | null;
     as?: string;
     labels?: Record<State, {

package/dist/FileDetails.svelte

@@ -18,7 +18,7 @@ export {};
 
 <svelte:element this={as} {style}>
   {#each files as file, idx (file.title)}
-    {@const { title, content, _language = default_lang } = file ?? {}}
+    {@const { title, content, language = default_lang } = file ?? {}}
     <li>
       <!-- https://github.com/sveltejs/svelte/issues/12721#issuecomment-2269544690 -->
       <details bind:this={file.node}>
@@ -27,12 +27,12 @@ export {};
             {#if title_snippet}
               {@render title_snippet({ idx, ...file })}
             {:else}
-              <code>{title.split(`/`).at(-1)}</code>
+              {@html title}
             {/if}
           </summary>
         {/if}
 
-        <pre><code>{@html content}</code></pre>
+        <pre class="language-{language}"><code>{content}</code></pre>
         <!-- <pre><code>{@html hljs.highlight(content, { language }).value}</code></pre> -->
       </details>
     </li>

package/dist/MultiSelect.svelte.d.ts

@@ -3,7 +3,7 @@ declare class __sveltets_Render<Option extends T> {
     props(): MultiSelectProps<T>;
     events(): {};
     slots(): {};
-    bindings(): "open" | "input" | "value" | "selected" | "invalid" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
+    bindings(): "input" | "invalid" | "open" | "value" | "selected" | "activeIndex" | "activeOption" | "form_input" | "matchingOptions" | "options" | "outerDiv" | "searchText";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/attachments.d.ts

@@ -0,0 +1,46 @@
+import { type Attachment } from 'svelte/attachments';
+declare global {
+    interface CSS {
+        highlights: HighlightRegistry;
+    }
+    interface HighlightRegistry extends Map<string, Highlight> {
+        clear(): void;
+        delete(key: string): boolean;
+        set(key: string, value: Highlight): this;
+    }
+}
+export interface DraggableOptions {
+    handle_selector?: string;
+    on_drag_start?: (event: MouseEvent) => void;
+    on_drag?: (event: MouseEvent) => void;
+    on_drag_end?: (event: MouseEvent) => void;
+}
+export declare const draggable: (options?: DraggableOptions) => Attachment;
+export declare function get_html_sort_value(element: HTMLElement): string;
+export declare const sortable: ({ header_selector, asc_class, desc_class, sorted_style, }?: {
+    header_selector?: string | undefined;
+    asc_class?: string | undefined;
+    desc_class?: string | undefined;
+    sorted_style?: {
+        backgroundColor: string;
+    } | undefined;
+}) => (node: HTMLElement) => () => void;
+type HighlightOptions = {
+    query?: string;
+    disabled?: 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?: {
+    content?: string;
+    placement?: `top` | `bottom` | `left` | `right`;
+    delay?: number;
+}) => Attachment;
+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

@@ -0,0 +1,345 @@
+import {} from 'svelte/attachments';
+// Svelte 5 attachment factory to make an element draggable
+// @param options - Configuration options for dragging behavior
+// @returns Attachment function that sets up dragging on an element
+export const draggable = (options = {}) => (element) => {
+    const node = 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 handle = options.handle_selector
+        ? node.querySelector(options.handle_selector)
+        : node;
+    if (!handle) {
+        console.warn(`Draggable: handle not found with selector "${options.handle_selector}"`);
+        return;
+    }
+    function handle_mousedown(event) {
+        // Only drag if mousedown is on the handle or its children
+        if (!handle?.contains?.(event.target))
+            return;
+        dragging = true;
+        // For position: fixed elements, use getBoundingClientRect for viewport-relative position
+        const computed_style = getComputedStyle(node);
+        if (computed_style.position === `fixed`) {
+            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
+        if (handle)
+            handle.style.cursor = `grabbing`;
+        globalThis.addEventListener(`mousemove`, handle_mousemove);
+        globalThis.addEventListener(`mouseup`, handle_mouseup);
+        options.on_drag_start?.(event); // Call optional callback
+    }
+    function handle_mousemove(event) {
+        if (!dragging)
+            return;
+        // Use the exact same calculation as the fast old implementation
+        const dx = event.clientX - start.x;
+        const dy = event.clientY - start.y;
+        node.style.left = `${initial.left + dx}px`;
+        node.style.top = `${initial.top + dy}px`;
+        // Only call callback if it exists (minimize overhead)
+        if (options.on_drag)
+            options.on_drag(event);
+    }
+    function handle_mouseup(event) {
+        if (!dragging)
+            return;
+        dragging = false;
+        event.stopPropagation();
+        document.body.style.userSelect = ``;
+        if (handle)
+            handle.style.cursor = `grab`;
+        globalThis.removeEventListener(`mousemove`, handle_mousemove);
+        globalThis.removeEventListener(`mouseup`, handle_mouseup);
+        options.on_drag_end?.(event); // Call optional callback
+    }
+    if (handle) {
+        handle.addEventListener(`mousedown`, handle_mousedown);
+        handle.style.cursor = `grab`;
+    }
+    // Return cleanup function (this is the attachment pattern)
+    return () => {
+        globalThis.removeEventListener(`mousemove`, handle_mousemove);
+        globalThis.removeEventListener(`mouseup`, handle_mouseup);
+        if (handle) {
+            handle.removeEventListener(`mousedown`, handle_mousedown);
+            handle.style.cursor = ``; // Reset cursor
+        }
+    };
+};
+export function get_html_sort_value(element) {
+    if (element.dataset.sortValue !== undefined) {
+        return element.dataset.sortValue;
+    }
+    for (const child of Array.from(element.children)) {
+        const child_val = get_html_sort_value(child);
+        if (child_val !== ``)
+            return child_val;
+    }
+    return element.textContent ?? ``;
+}
+export const sortable = ({ header_selector = `thead th`, asc_class = `table-sort-asc`, desc_class = `table-sort-desc`, sorted_style = { backgroundColor: `rgba(255, 255, 255, 0.1)` }, } = {}) => (node) => {
+    // this action can be applied to bob-standard HTML tables to make them sortable by
+    // clicking on column headers (and clicking again to toggle sorting direction)
+    const headers = Array.from(node.querySelectorAll(header_selector));
+    let sort_col_idx;
+    let sort_dir = 1; // 1 = asc, -1 = desc
+    // Store event listeners for cleanup
+    const event_listeners = [];
+    for (const [idx, header] of headers.entries()) {
+        header.style.cursor = `pointer`; // add cursor pointer to headers
+        const init_styles = header.getAttribute(`style`) ?? ``;
+        const click_handler = () => {
+            // reset all headers to initial state
+            for (const header of headers) {
+                header.textContent = header.textContent?.replace(/ ↑| ↓/, ``) ?? ``;
+                header.classList.remove(asc_class, desc_class);
+                header.setAttribute(`style`, init_styles);
+            }
+            if (idx === sort_col_idx) {
+                sort_dir *= -1; // reverse sort direction
+            }
+            else {
+                sort_col_idx = idx; // set new sort column index
+                sort_dir = 1; // reset sort direction
+            }
+            header.classList.add(sort_dir > 0 ? asc_class : desc_class);
+            Object.assign(header.style, sorted_style);
+            header.textContent = `${header.textContent?.replace(/ ↑| ↓/, ``)} ${sort_dir > 0 ? `↑` : `↓`}`;
+            const table_body = node.querySelector(`tbody`);
+            if (!table_body)
+                return;
+            // re-sort table
+            const rows = Array.from(table_body.querySelectorAll(`tr`));
+            rows.sort((row_1, row_2) => {
+                const cell_1 = row_1.cells[sort_col_idx];
+                const cell_2 = row_2.cells[sort_col_idx];
+                const val_1 = get_html_sort_value(cell_1);
+                const val_2 = get_html_sort_value(cell_2);
+                if (val_1 === val_2)
+                    return 0;
+                if (val_1 === ``)
+                    return 1; // treat empty string as lower than any value
+                if (val_2 === ``)
+                    return -1; // any value is considered higher than empty string
+                const num_1 = Number(val_1);
+                const num_2 = Number(val_2);
+                if (isNaN(num_1) && isNaN(num_2)) {
+                    return sort_dir * val_1.localeCompare(val_2, undefined, { numeric: true });
+                }
+                return sort_dir * (num_1 - num_2);
+            });
+            for (const row of rows)
+                table_body.appendChild(row);
+        };
+        header.addEventListener(`click`, click_handler);
+        event_listeners.push({ header, handler: click_handler });
+    }
+    // Return cleanup function
+    return () => {
+        for (const { header, handler } of event_listeners) {
+            header.removeEventListener(`click`, handler);
+            header.style.cursor = ``; // Reset cursor
+        }
+    };
+};
+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 tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+        acceptNode: node_filter,
+    });
+    const text_nodes = [];
+    let current_node = tree_walker.nextNode();
+    while (current_node) {
+        text_nodes.push(current_node);
+        current_node = tree_walker.nextNode();
+    }
+    // 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(css_class, new Highlight(...ranges.flat()));
+    return () => {
+        CSS.highlights.delete(css_class);
+    };
+};
+// Global tooltip state to ensure only one tooltip is shown at a time
+let current_tooltip = null;
+let show_timeout;
+let hide_timeout;
+function clear_tooltip() {
+    if (show_timeout)
+        clearTimeout(show_timeout);
+    if (hide_timeout)
+        clearTimeout(hide_timeout);
+    if (current_tooltip) {
+        current_tooltip.remove();
+        current_tooltip = null;
+    }
+}
+export const tooltip = (options = {}) => (node) => {
+    // Handle null/undefined elements
+    if (!node || !(node instanceof HTMLElement))
+        return;
+    // Handle null/undefined options
+    const safe_options = options || {};
+    const cleanup_functions = [];
+    function setup_tooltip(element) {
+        if (!element)
+            return;
+        const content = safe_options.content || element.title ||
+            element.getAttribute(`aria-label`) || element.getAttribute(`data-title`);
+        if (!content)
+            return;
+        // Store original title and remove it to prevent default tooltip
+        // Only store title if we're not using custom content
+        if (element.title && !safe_options.content) {
+            element.setAttribute(`data-original-title`, element.title);
+            element.removeAttribute(`title`);
+        }
+        function show_tooltip() {
+            clear_tooltip();
+            show_timeout = setTimeout(() => {
+                const tooltip = document.createElement(`div`);
+                tooltip.className = `custom-tooltip`;
+                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;
+        `;
+                tooltip.innerHTML = content?.replace(/\r/g, `<br/>`) ?? ``;
+                document.body.appendChild(tooltip);
+                // 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`) {
+                    top = rect.top - tooltip_rect.height - margin;
+                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
+                }
+                else if (placement === `left`) {
+                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
+                    left = rect.left - tooltip_rect.width - margin;
+                }
+                else if (placement === `right`) {
+                    top = rect.top + rect.height / 2 - tooltip_rect.height / 2;
+                    left = rect.right + margin;
+                }
+                else { // bottom
+                    top = rect.bottom + margin;
+                    left = rect.left + rect.width / 2 - tooltip_rect.width / 2;
+                }
+                // Keep in viewport
+                left = Math.max(8, Math.min(left, globalThis.innerWidth - tooltip_rect.width - 8));
+                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`;
+                current_tooltip = tooltip;
+            }, safe_options.delay || 100);
+        }
+        function hide_tooltip() {
+            clear_tooltip();
+            hide_timeout = setTimeout(() => {
+                if (current_tooltip) {
+                    current_tooltip.style.opacity = `0`;
+                    setTimeout(() => {
+                        if (current_tooltip) {
+                            current_tooltip.remove();
+                            current_tooltip = null;
+                        }
+                    }, 150);
+                }
+            }, 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]));
+        return () => {
+            events.forEach((event, idx) => element.removeEventListener(event, handlers[idx]));
+            const original_title = element.getAttribute(`data-original-title`);
+            if (original_title) {
+                element.setAttribute(`title`, original_title);
+                element.removeAttribute(`data-original-title`);
+            }
+        };
+    }
+    // Setup tooltip for main node and children
+    const main_cleanup = setup_tooltip(node);
+    if (main_cleanup)
+        cleanup_functions.push(main_cleanup);
+    node.querySelectorAll(`[title], [aria-label], [data-title]`).forEach((element) => {
+        const child_cleanup = setup_tooltip(element);
+        if (child_cleanup)
+            cleanup_functions.push(child_cleanup);
+    });
+    if (cleanup_functions.length === 0)
+        return;
+    return () => {
+        cleanup_functions.forEach((cleanup) => cleanup());
+        clear_tooltip();
+    };
+};
+export const click_outside = (config = {}) => (node) => {
+    const { callback, enabled = true, exclude = [] } = config;
+    function handle_click(event) {
+        if (!enabled)
+            return;
+        const target = event.target;
+        const path = event.composedPath();
+        // Check if click target is the node or inside it
+        if (path.includes(node))
+            return;
+        // Check excluded selectors
+        if (exclude.some((selector) => target.closest(selector)))
+            return;
+        // Execute callback if provided, passing node and full config
+        callback?.(node, { callback, enabled, exclude });
+        // Dispatch custom event if click was outside
+        node.dispatchEvent(new CustomEvent(`outside-click`));
+    }
+    document.addEventListener(`click`, handle_click, true);
+    return () => document.removeEventListener(`click`, handle_click, true);
+};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './attachments';
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as CodeExample } from './CodeExample.svelte';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './attachments';
 export { default as CircleSpinner } from './CircleSpinner.svelte';
 export { default as CmdPalette } from './CmdPalette.svelte';
 export { default as CodeExample } from './CodeExample.svelte';

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.2.1",
+  "version": "11.2.2",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -13,7 +13,7 @@
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.0",
+    "@playwright/test": "^1.54.1",
     "@stylistic/eslint-plugin": "^5.1.0",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.22.5",
@@ -21,7 +21,7 @@
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
     "@types/node": "^24.0.13",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint": "^9.30.1",
+    "eslint": "^9.31.0",
     "eslint-plugin-svelte": "^3.10.1",
     "hastscript": "^9.0.1",
     "jsdom": "^26.1.0",
@@ -32,7 +32,7 @@
     "svelte": "^5.35.6",
     "svelte-check": "^4.2.2",
     "svelte-preprocess": "^6.0.3",
-    "svelte-toc": "^0.6.1",
+    "svelte-toc": "^0.6.2",
     "svelte2tsx": "^0.7.40",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.36.0",
@@ -59,6 +59,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./attachments": {
+      "types": "./dist/attachments.d.ts",
+      "default": "./dist/attachments.js"
     }
   },
   "types": "./dist/index.d.ts",