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>