svelte-multiselect 11.0.0 → 11.1.0

package/dist/CmdPalette.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">import { tick } from 'svelte';
-import { fade } from 'svelte/transition';
+<script lang="ts">import { fade } from 'svelte/transition';
 import Select from './MultiSelect.svelte';
-let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, style = ``, span_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, children, ...rest } = $props();
+let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
+$effect(() => {
+    if (open && input)
+        input?.focus(); // focus input when palette is opened
+});
 async function toggle(event) {
     if (triggers.includes(event.key) && event.metaKey && !open) {
-        // open on cmd+trigger
         open = true;
-        await tick(); // wait for dialog to open and input to be mounted
-        input?.focus();
     }
     else if (close_keys.includes(event.key) && open) {
         open = false;
@@ -22,7 +22,6 @@ function trigger_action_and_close({ option }) {
     option.action(option.label);
     open = false;
 }
-const children_render = $derived(children);
 </script>
 
 <svelte:window onkeydown={toggle} onclick={close_if_outside} />
@@ -36,22 +35,18 @@ const children_render = $derived(children);
       onadd={trigger_action_and_close}
       onkeydown={toggle}
       {...rest}
-    >
-      {#snippet children({ option })}
-        <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
-        {#if children_render}
-          {@render children_render()}
-        {:else}
-          <span style={span_style}>{option.label}</span>
-        {/if}
-      {/snippet}
-    </Select>
+      --sms-bg="var(--sms-options-bg)"
+      --sms-width="min(20em, 90vw)"
+      --sms-max-width="none"
+      --sms-placeholder-color="lightgray"
+      --sms-options-margin="1px 0"
+      --sms-options-border-radius="0 0 1ex 1ex"
+    />
   </dialog>
 {/if}
 
 <style>
-  /* TODO maybe remove global */
-  :where(:global(dialog)) {
+  :where(dialog) {
     position: fixed;
     top: 30%;
     border: none;
@@ -62,12 +57,4 @@ const children_render = $derived(children);
     z-index: 10;
     font-size: 2.4ex;
   }
-  dialog :global(div.multiselect) {
-    --sms-bg: var(--sms-options-bg);
-    --sms-width: min(20em, 90vw);
-    --sms-max-width: none;
-    --sms-placeholder-color: lightgray;
-    --sms-options-margin: 1px 0;
-    --sms-options-border-radius: 0 0 1ex 1ex;
-  }
 </style>

package/dist/CmdPalette.svelte.d.ts

@@ -1,4 +1,3 @@
-import { type Snippet } from 'svelte';
 import type { MultiSelectProps } from './props';
 import type { ObjectOption } from './types';
 interface Action extends ObjectOption {
@@ -11,12 +10,10 @@ interface Props extends Omit<MultiSelectProps<Action>, `options` | `onadd` | `on
     close_keys?: string[];
     fade_duration?: number;
     style?: string;
-    span_style?: string;
     open?: boolean;
     dialog?: HTMLDialogElement | null;
     input?: HTMLInputElement | null;
     placeholder?: string;
-    children?: Snippet;
 }
 declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
 type CmdPalette = ReturnType<typeof CmdPalette>;

package/dist/MultiSelect.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { tick } from 'svelte';
+<script lang="ts">import { browser } from '$app/environment';
+import { tick } from 'svelte';
 import { flip } from 'svelte/animate';
 import CircleSpinner from './CircleSpinner.svelte';
 import Wiggle from './Wiggle.svelte';
@@ -10,7 +11,7 @@ let { activeIndex = $bindable(null), activeOption = $bindable(null), createOptio
     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
 }, closeDropdownOnSelect = `desktop`, 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, ...rest } = $props();
+    .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();
 $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
@@ -75,17 +76,17 @@ $effect(() => {
     activeOption = matchingOptions[activeIndex ?? -1] ?? null;
 });
 // add an option to selected list
-function add(option, event) {
+function add(option_to_add, event) {
     event.stopPropagation();
-    if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
+    if (maxSelect !== null && selected.length >= maxSelect)
         wiggle = true;
-    if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
-        option = Number(option); // convert to number if possible
+    if (!isNaN(Number(option_to_add)) && typeof selected.map(get_label)[0] === `number`) {
+        option_to_add = Number(option_to_add); // convert to number if possible
     }
-    const is_duplicate = selected.map(key).includes(key(option));
+    const is_duplicate = selected.map(key).includes(key(option_to_add));
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
         (duplicates || !is_duplicate)) {
-        if (!options.includes(option) && // first check if we find option in the options list
+        if (!options.includes(option_to_add) && // first check if we find option in the options list
             // this has the side-effect of not allowing to user to add the same
             // custom option twice in append mode
             [true, `append`].includes(allowUserOptions) &&
@@ -94,34 +95,34 @@ function add(option, event) {
             // a new option from the user-entered text
             if (typeof options[0] === `object`) {
                 // if 1st option is an object, we create new option as object to keep type homogeneity
-                option = { label: searchText };
+                option_to_add = { label: searchText };
             }
             else {
                 if ([`number`, `undefined`].includes(typeof options[0]) &&
                     !isNaN(Number(searchText))) {
                     // create new option as number if it parses to a number and 1st option is also number or missing
-                    option = Number(searchText);
+                    option_to_add = Number(searchText);
                 }
                 else {
-                    option = searchText; // else create custom option as string
+                    option_to_add = searchText; // else create custom option as string
                 }
-                oncreate?.({ option });
+                oncreate?.({ option: option_to_add });
             }
             if (allowUserOptions === `append`)
-                options = [...options, option];
+                options = [...options, option_to_add];
         }
         if (resetFilterOnAdd)
             searchText = ``; // reset search string on selection
-        if ([``, undefined, null].includes(option)) {
-            console.error(`MultiSelect: encountered falsy option ${option}`);
+        if ([``, undefined, null].includes(option_to_add)) {
+            console.error(`MultiSelect: encountered falsy option ${option_to_add}`);
             return;
         }
         if (maxSelect === 1) {
             // for maxSelect = 1 we always replace current option with new one
-            selected = [option];
+            selected = [option_to_add];
         }
         else {
-            selected = [...selected, option];
+            selected = [...selected, option_to_add];
             if (sortSelected === true) {
                 selected = selected.sort((op1, op2) => {
                     const [label1, label2] = [get_label(op1), get_label(op2)];
@@ -142,34 +143,34 @@ function add(option, event) {
         else if (!dropdown_should_close) {
             input?.focus();
         }
-        onadd?.({ option });
-        onchange?.({ option, type: `add` });
+        onadd?.({ option: option_to_add });
+        onchange?.({ option: option_to_add, type: `add` });
         invalid = false; // reset error status whenever new items are selected
         form_input?.setCustomValidity(``);
     }
 }
 // remove an option from selected list
-function remove(to_remove, event) {
+function remove(option_to_drop, event) {
     event.stopPropagation();
     if (selected.length === 0)
         return;
-    const idx = selected.findIndex((opt) => key(opt) === key(to_remove));
-    let [option] = selected.splice(idx, 1); // remove option from selected list
-    if (option === undefined && allowUserOptions) {
+    const idx = selected.findIndex((opt) => key(opt) === key(option_to_drop));
+    let [option_removed] = selected.splice(idx, 1); // remove option from selected list
+    if (option_removed === undefined && allowUserOptions) {
         // if option with label could not be found but allowUserOptions is truthy,
         // assume it was created by user and create corresponding option object
         // on the fly for use as event payload
         const other_ops_type = typeof options[0];
-        option = (other_ops_type ? { label: to_remove } : to_remove);
+        option_removed = (other_ops_type ? { label: option_to_drop } : option_to_drop);
     }
-    if (option === undefined) {
-        return console.error(`Multiselect can't remove selected option ${JSON.stringify(to_remove)}, not found in selected list`);
+    if (option_removed === undefined) {
+        return console.error(`Multiselect can't remove selected option ${JSON.stringify(option_to_drop)}, not found in selected list`);
     }
     selected = [...selected]; // trigger Svelte rerender
     invalid = false; // reset error status whenever items are removed
     form_input?.setCustomValidity(``);
-    onremove?.({ option });
-    onchange?.({ option, type: `remove` });
+    onremove?.({ option: option_removed });
+    onchange?.({ option: option_removed, type: `remove` });
 }
 function open_dropdown(event) {
     event.stopPropagation();
@@ -287,7 +288,6 @@ function on_click_outside(event) {
 let drag_idx = $state(null);
 // event handlers enable dragging to reorder selected options
 const drop = (target_idx) => (event) => {
-    event.preventDefault();
     if (!event.dataTransfer)
         return;
     event.dataTransfer.dropEffect = `move`;
@@ -339,6 +339,51 @@ $effect.pre(() => {
     required = required; // trigger effect when required changes
     form_input?.setCustomValidity(``);
 });
+function portal(node, params) {
+    let { target_node, active } = params;
+    if (!active)
+        return;
+    let render_in_place = !browser || !document.body.contains(node);
+    if (!render_in_place) {
+        document.body.appendChild(node);
+        node.style.position = `fixed`;
+        const update_position = () => {
+            if (!target_node || !open)
+                return (node.hidden = true);
+            const rect = target_node.getBoundingClientRect();
+            node.style.left = `${rect.left}px`;
+            node.style.top = `${rect.bottom}px`;
+            node.style.width = `${rect.width}px`;
+            node.hidden = false;
+        };
+        if (open)
+            tick().then(update_position);
+        window.addEventListener(`scroll`, update_position, true);
+        window.addEventListener(`resize`, update_position);
+        $effect.pre(() => {
+            if (open && target_node)
+                update_position();
+            else
+                node.hidden = true;
+        });
+        return {
+            update(params) {
+                target_node = params.target_node;
+                render_in_place = !browser || !document.body.contains(node);
+                if (open && !render_in_place && target_node)
+                    tick().then(update_position);
+                else if (!open || !target_node)
+                    node.hidden = true;
+            },
+            destroy() {
+                if (!render_in_place)
+                    node.remove();
+                window.removeEventListener(`scroll`, update_position, true);
+                window.removeEventListener(`resize`, update_position);
+            },
+        };
+    }
+}
 </script>
 
 <svelte:window
@@ -353,7 +398,7 @@ $effect.pre(() => {
   class:single={maxSelect === 1}
   class:open
   class:invalid
-  class="multiselect {outerDivClass}"
+  class="multiselect {outerDivClass} {rest.class ?? ``}"
   onmouseup={open_dropdown}
   title={disabled ? disabledInputTitle : null}
   data-id={id}
@@ -406,6 +451,9 @@ $effect.pre(() => {
         animate:flip={{ duration: 100 }}
         draggable={selectedOptionsDraggable && !disabled && selected.length > 1}
         ondragstart={dragstart(idx)}
+        ondragover={(event) => {
+          event.preventDefault() // needed for ondrop to fire
+        }}
         ondrop={drop(idx)}
         ondragenter={() => (drag_idx = idx)}
         class:active={drag_idx === idx}
@@ -524,6 +572,7 @@ $effect.pre(() => {
   <!-- only render options dropdown if options or searchText is not empty (needed to avoid briefly flashing empty dropdown) -->
   {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul
+      use:portal={{ target_node: outerDiv, ...portal_params }}
       class:hidden={!open}
       class="options {ulOptionsClass}"
       role="listbox"
@@ -760,14 +809,19 @@ $effect.pre(() => {
     pointer-events: none;
   }
 
-  :is(div.multiselect > ul.options) {
+  ul.options {
     list-style: none;
+    /* top, left, width, position are managed by portal when active */
+    /* but provide defaults for non-portaled or initial state */
+    position: absolute; /* Default, overridden by portal to fixed when open */
     top: 100%;
     left: 0;
     width: 100%;
-    position: absolute;
+    /* Default z-index if not portaled/overridden by portal */
+    z-index: var(--sms-options-z-index, 3);
+
     overflow: auto;
-    transition: all 0.2s;
+    transition: all 0.2s; /* Consider if this transition is desirable with portal positioning */
     box-sizing: border-box;
     background: var(--sms-options-bg, white);
     max-height: var(--sms-options-max-height, 50vh);
@@ -779,29 +833,35 @@ $effect.pre(() => {
     padding: var(--sms-options-padding);
     margin: var(--sms-options-margin, inherit);
   }
-  :is(div.multiselect > ul.options.hidden) {
+  :is(div.multiselect.open) {
+    /* increase z-index when open to ensure the dropdown of one <MultiSelect />
+    displays above that of another slightly below it on the page */
+    /* This z-index is for the div.multiselect itself, portal has its own higher z-index */
+    z-index: var(--sms-open-z-index, 4);
+  }
+  ul.options.hidden {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
   }
-  :is(div.multiselect > ul.options > li) {
+  ul.options > li {
     padding: 3pt 2ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
   }
-  :is(div.multiselect > ul.options .user-msg) {
+  ul.options .user-msg {
     /* block needed so vertical padding applies to span */
     display: block;
     padding: 3pt 2ex;
   }
-  :is(div.multiselect > ul.options > li.selected) {
+  ul.options > li.selected {
     background: var(--sms-li-selected-bg);
     color: var(--sms-li-selected-color);
   }
-  :is(div.multiselect > ul.options > li.active) {
+  ul.options > li.active {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
   }
-  :is(div.multiselect > ul.options > li.disabled) {
+  ul.options > li.disabled {
     cursor: not-allowed;
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);

package/dist/props.d.ts

@@ -70,6 +70,10 @@ export interface MultiSelectSnippets<T extends Option = Option> {
         }
     ]>;
 }
+export interface PortalParams {
+    target_node?: HTMLElement | null;
+    active?: boolean;
+}
 export interface MultiSelectParameters<T extends Option = Option> {
     activeIndex?: number | null;
     activeOption?: T | null;
@@ -132,6 +136,7 @@ export interface MultiSelectParameters<T extends Option = Option> {
     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/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -16,7 +16,7 @@
     "package": "svelte-package",
     "serve": "vite build && vite preview",
     "check": "svelte-check src",
-    "test": "vitest --run --coverage tests/unit/*.ts && npm run test:e2e",
+    "test": "vitest run && playwright test",
     "test:unit": "vitest tests/unit/*.ts",
     "test:e2e": "playwright test tests/*.test.ts",
     "changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false",

package/readme.md

@@ -8,7 +8,7 @@
 [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
 [![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml)
 [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
-[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)
+[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/peer/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)
 [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
 [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)