Multiselect portal (#306)

* fix drag and drop selected options and reinstate playwright test

also reinstate multiselect test 'opens dropdown on focus', no longer fails

* more CmdPalette coverage with vitest in tests/unit/CmdPalette.svelte.test.ts

* simplify CSS scoping

* add/remove use generic T for option arg type, rename arg for clarity

* minor refactor CmdPalette

* fix escape key navigating back to landing page from demo pages

* add portal functionality to MultiSelect component (closes #301)

to extend dropdown outside of parent component (e.g. inside a modal dialog)

- new `portal` function manages dropdown rendering if portal prop is not empty
- `MultiSelectProps` include optional `portal` parameter to enable and customize portal functionality
- refactored the `add` function to simplify max selection logic
- improved CSS for dropdown positioning and z-index management when using the portal

* add /modal/+page.svelte demo page for portal feature

* playwright test for MultiSelect portal feature

Author: janosh

.pre-commit-config.yaml

@@ -38,7 +38,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.26.0
+    rev: v9.27.0
     hooks:
       - id: eslint
         types: [file]

package.json

@@ -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",

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)
 

src/app.css

@@ -2,6 +2,7 @@
   --night: #0b0b1b;
   --blue: cornflowerblue;
   --text-color: #ccc;
+  --main-max-width: 50em;
 
   --sms-active-color: rgba(255, 255, 255, 0.1);
   --sms-focus-border: 1pt solid cornflowerblue;
@@ -28,7 +29,7 @@ main {
   margin: auto;
   margin-bottom: 3em;
   width: 100%;
-  max-width: 50em;
+  max-width: var(--main-max-width);
 }
 button,
 a.btn {
@@ -139,7 +140,7 @@ div.multiselect.invalid {
 aside.toc.desktop {
   position: fixed;
   top: 3em;
-  left: calc(50vw + 50em / 2);
+  left: calc(50vw + var(--main-max-width) / 2);
   max-width: 16em;
 }
 

src/lib/CmdPalette.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { tick, type Snippet } from 'svelte'
   import { fade } from 'svelte/transition'
-
   import Select from './MultiSelect.svelte'
   import type { MultiSelectProps } from './props'
   import type { ObjectOption } from './types'
@@ -22,34 +20,31 @@
     fade_duration?: number // in ms
     style?: string // for dialog
     // for span in option snippet, has no effect when specifying a custom option snippet
-    span_style?: string
     open?: boolean
     dialog?: HTMLDialogElement | null
     input?: HTMLInputElement | null
     placeholder?: string
-    children?: Snippet
   }
   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 = $props()
 
+  $effect(() => {
+    if (open && input) input?.focus() // focus input when palette is opened
+  })
+
   async function toggle(event: KeyboardEvent) {
     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
     }
@@ -65,8 +60,6 @@
     option.action(option.label)
     open = false
   }
-
-  const children_render = $derived(children)
 </script>
 
 <svelte:window onkeydown={toggle} onclick={close_if_outside} />
@@ -80,22 +73,18 @@
       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;
@@ -106,12 +95,4 @@
     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>