svelte-multiselect 8.4.0 → 8.6.0

package/dist/CmdPalette.svelte

@@ -1,12 +1,18 @@
-<script>import { tick } from 'svelte/internal';
+<script>/* eslint-disable no-undef */ // TODO: remove when fixed
+// https://github.com/sveltejs/eslint-plugin-svelte3/issues/201
+import { tick } from 'svelte';
 import { fade } from 'svelte/transition';
 import Select from '.';
 export let actions;
 export let trigger = `k`;
 export let fade_duration = 200; // in ms
-let open = false;
-let dialog;
-let input;
+export let style = ``; // for dialog
+// for span in option slot, has no effect when passing slot="option"
+export let span_style = ``;
+export let open = false;
+export let dialog;
+export let input;
+export let placeholder = `Filter actions...`;
 async function toggle(event) {
     if (event.key === trigger && event.metaKey && !open) {
         // open on cmd+trigger
@@ -24,7 +30,7 @@ function close_if_outside(event) {
         open = false;
     }
 }
-function move(event) {
+function run_and_close(event) {
     event.detail.option.action();
     open = false;
 }
@@ -33,14 +39,25 @@ function move(event) {
 <svelte:window on:keydown={toggle} on:click={close_if_outside} />
 
 {#if open}
-  <dialog class:open bind:this={dialog} transition:fade={{ duration: fade_duration }}>
+  <dialog
+    class:open
+    bind:this={dialog}
+    transition:fade={{ duration: fade_duration }}
+    {style}
+  >
     <Select
       options={actions}
       bind:input
-      placeholder="Go to..."
-      on:add={move}
+      {placeholder}
+      on:add={run_and_close}
       on:keydown={toggle}
-    />
+      {...$$props}
+    >
+      <!-- wait for https://github.com/sveltejs/svelte/pull/8304 -->
+      <slot slot="option" name="option" let:option>
+        <span style={span_style}>{option.label}</span>
+      </slot>
+    </Select>
   </dialog>
 {/if}
 

package/dist/CmdPalette.svelte.d.ts

@@ -1,17 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         actions: {
             label: string;
             action: () => void;
         }[];
         trigger?: string | undefined;
         fade_duration?: number | undefined;
+        style?: string | undefined;
+        span_style?: string | undefined;
+        open?: boolean | undefined;
+        dialog: HTMLDialogElement;
+        input: HTMLInputElement;
+        placeholder?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        option: {
+            slot: string;
+        };
+    };
 };
 export type CmdPaletteProps = typeof __propDef.props;
 export type CmdPaletteEvents = typeof __propDef.events;

package/dist/MultiSelect.svelte

@@ -25,6 +25,7 @@ export let filterFunc = (op, searchText) => {
 };
 export let focusInputOnSelect = `desktop`;
 export let form_input = null;
+export let highlightMatches = true;
 export let id = null;
 export let input = null;
 export let inputClass = ``;
@@ -128,7 +129,7 @@ function add(label, event) {
             // custom option twice in append mode
             [true, `append`].includes(allowUserOptions) &&
             searchText.length > 0) {
-            // user entered text but no options match, so if allowUserOptions=true | 'append', we create
+            // user entered text but no options match, so if allowUserOptions = true | 'append', we create
             // 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
@@ -140,8 +141,10 @@ function add(label, event) {
                     // create new option as number if it parses to a number and 1st option is also number or missing
                     option = Number(searchText);
                 }
-                else
+                else {
                     option = searchText; // else create custom option as string
+                }
+                dispatch(`create`, { option });
             }
             if (allowUserOptions === `append`)
                 options = [...options, option];
@@ -199,10 +202,10 @@ function remove(label) {
         return console.error(`Multiselect can't remove selected option ${label}, not found in selected list`);
     }
     selected = selected.filter((op) => get_label(op) !== label); // remove option from selected list
-    dispatch(`remove`, { option });
-    dispatch(`change`, { option, type: `remove` });
     invalid = false; // reset error status whenever items are removed
     form_input?.setCustomValidity(``);
+    dispatch(`remove`, { option });
+    dispatch(`change`, { option, type: `remove` });
 }
 function open_dropdown(event) {
     if (disabled)
@@ -287,10 +290,10 @@ async function handle_keydown(event) {
     }
 }
 function remove_all() {
-    dispatch(`removeAll`, { options: selected });
-    dispatch(`change`, { options: selected, type: `removeAll` });
     selected = [];
     searchText = ``;
+    dispatch(`removeAll`, { options: selected });
+    dispatch(`change`, { options: selected, type: `removeAll` });
 }
 $: is_selected = (label) => selected.map(get_label).includes(label);
 const if_enter_or_space = (handler) => (event) => {
@@ -331,6 +334,47 @@ const dragstart = (idx) => (event) => {
     event.dataTransfer.dropEffect = `move`;
     event.dataTransfer.setData(`text/plain`, `${idx}`);
 };
+let ul_options;
+function highlight_matching_options(event) {
+    if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights)
+        return; // don't try if CSS highlight API not supported
+    // clear previous ranges from HighlightRegistry
+    CSS.highlights.clear();
+    // get input's search query
+    const query = event?.target?.value.trim().toLowerCase();
+    if (!query)
+        return;
+    const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT);
+    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 (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
+    // eslint-disable-next-line no-undef
+    CSS.highlights.set(`search-results`, new Highlight(...ranges.flat()));
+}
 </script>
 
 <svelte:window
@@ -344,13 +388,10 @@ const dragstart = (idx) => (event) => {
   class:disabled
   class:single={maxSelect === 1}
   class:open
-  aria-expanded={open}
-  aria-multiselectable={maxSelect === null || maxSelect > 1}
   class:invalid
   class="multiselect {outerDivClass}"
   on:mouseup|stopPropagation={open_dropdown}
   title={disabled ? disabledInputTitle : null}
-  aria-disabled={disabled ? `true` : null}
   data-id={id}
 >
   <!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
@@ -379,11 +420,10 @@ const dragstart = (idx) => (event) => {
   <slot name="expand-icon" {open}>
     <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt; cursor: pointer;" />
   </slot>
-  <ul class="selected {ulSelectedClass}">
+  <ul class="selected {ulSelectedClass}" aria-label="selected options">
     {#each selected as option, idx (get_label(option))}
       <li
         class={liSelectedClass}
-        aria-selected="true"
         animate:flip={{ duration: 100 }}
         draggable={selectedOptionsDraggable && !disabled && selected.length > 1}
         on:dragstart={dragstart(idx)}
@@ -397,8 +437,7 @@ const dragstart = (idx) => (event) => {
           {#if parseLabelsAsHtml}
             {@html get_label(option)}
           {:else}
-            {get_label(option)}
-          {/if}
+            {get_label(option)}{/if}
         </slot>
         {#if !disabled && (minSelect === null || selected.length > minSelect)}
           <button
@@ -415,38 +454,37 @@ const dragstart = (idx) => (event) => {
         {/if}
       </li>
     {/each}
-    <li style="display: contents;">
-      <input
-        class={inputClass}
-        bind:this={input}
-        bind:value={searchText}
-        on:mouseup|self|stopPropagation={open_dropdown}
-        on:keydown|stopPropagation={handle_keydown}
-        on:focus
-        on:focus={open_dropdown}
-        {id}
-        {disabled}
-        {autocomplete}
-        {inputmode}
-        {pattern}
-        placeholder={selected.length == 0 ? placeholder : null}
-        aria-invalid={invalid ? `true` : null}
-        ondrop="return false"
-        on:blur
-        on:change
-        on:click
-        on:keydown
-        on:keyup
-        on:mousedown
-        on:mouseenter
-        on:mouseleave
-        on:touchcancel
-        on:touchend
-        on:touchmove
-        on:touchstart
-      />
-      <!-- the above on:* lines forward potentially useful DOM events -->
-    </li>
+    <input
+      class={inputClass}
+      bind:this={input}
+      bind:value={searchText}
+      on:mouseup|self|stopPropagation={open_dropdown}
+      on:keydown|stopPropagation={handle_keydown}
+      on:focus
+      on:focus={open_dropdown}
+      on:input={highlight_matching_options}
+      {id}
+      {disabled}
+      {autocomplete}
+      {inputmode}
+      {pattern}
+      placeholder={selected.length == 0 ? placeholder : null}
+      aria-invalid={invalid ? `true` : null}
+      ondrop="return false"
+      on:blur
+      on:change
+      on:click
+      on:keydown
+      on:keyup
+      on:mousedown
+      on:mouseenter
+      on:mouseleave
+      on:touchcancel
+      on:touchend
+      on:touchmove
+      on:touchstart
+    />
+    <!-- the above on:* lines forward potentially useful DOM events -->
   </ul>
   {#if loading}
     <slot name="spinner">
@@ -482,7 +520,7 @@ const dragstart = (idx) => (event) => {
 
   <!-- 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 class:hidden={!open} class="options {ulOptionsClass}">
+    <ul class:hidden={!open} class="options {ulOptionsClass}" bind:this={ul_options}>
       {#each matchingOptions as option, idx}
         {@const {
           label,
@@ -512,7 +550,6 @@ const dragstart = (idx) => (event) => {
           }}
           on:mouseout={() => (activeIndex = null)}
           on:blur={() => (activeIndex = null)}
-          aria-selected="false"
         >
           <slot name="option" {option} {idx}>
             {#if parseLabelsAsHtml}
@@ -533,7 +570,6 @@ const dragstart = (idx) => (event) => {
             on:focus={() => (add_option_msg_is_active = true)}
             on:mouseout={() => (add_option_msg_is_active = false)}
             on:blur={() => (add_option_msg_is_active = false)}
-            aria-selected="false"
           >
             {!duplicates && selected.some((option) => duplicateFunc(option, searchText))
               ? duplicateOptionMsg
@@ -627,7 +663,7 @@ const dragstart = (idx) => (event) => {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :where(div.multiselect > ul.selected > li > input) {
+  :where(div.multiselect > ul.selected > input) {
     border: none;
     outline: none;
     background: none;
@@ -640,7 +676,7 @@ const dragstart = (idx) => (event) => {
     border-radius: 0; /* reset ul.selected > li */
   }
   /* don't wrap ::placeholder rules in :where() as it seems to be overpowered by browser defaults i.t.o. specificity */
-  div.multiselect > ul.selected > li > input::placeholder {
+  div.multiselect > ul.selected > input::placeholder {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);
@@ -705,4 +741,10 @@ const dragstart = (idx) => (event) => {
   :where(span.max-select-msg) {
     padding: 0 3pt;
   }
+  ::highlight(search-results) {
+    color: var(--sms-highlight-color, orange);
+    background: var(--sms-highlight-bg);
+    text-decoration: var(--sms-highlight-text-decoration);
+    text-decoration-color: var(--sms-highlight-text-decoration-color);
+  }
 </style>

package/dist/MultiSelect.svelte.d.ts

@@ -19,6 +19,7 @@ declare class __sveltets_Render<Option extends GenericOption> {
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
         focusInputOnSelect?: boolean | "desktop" | undefined;
         form_input?: HTMLInputElement | null | undefined;
+        highlightMatches?: boolean | undefined;
         id?: string | null | undefined;
         input?: HTMLInputElement | null | undefined;
         inputClass?: string | undefined;

package/dist/index.d.ts

@@ -17,6 +17,9 @@ export type DispatchEvents<T = Option> = {
     add: {
         option: T;
     };
+    create: {
+        option: T;
+    };
     remove: {
         option: 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": "8.4.0",
+  "version": "8.6.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,37 +23,37 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^3.55.1"
+    "svelte": "^3.57.0"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.0",
-    "@playwright/test": "^1.31.1",
+    "@playwright/test": "^1.31.2",
     "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.9.2",
+    "@sveltejs/kit": "^1.12.0",
     "@sveltejs/package": "2.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.54.0",
-    "@typescript-eslint/parser": "^5.54.0",
-    "@vitest/coverage-c8": "^0.29.2",
-    "eslint": "^8.35.0",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
+    "@vitest/coverage-c8": "^0.29.3",
+    "eslint": "^8.36.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
-    "jsdom": "^21.1.0",
+    "jsdom": "^21.1.1",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
     "prettier": "^2.8.4",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.0.4",
-    "svelte-preprocess": "^5.0.1",
-    "svelte-toc": "^0.5.2",
-    "svelte-zoo": "^0.3.4",
-    "svelte2tsx": "^0.6.2",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.4",
-    "vitest": "^0.29.2"
+    "svelte-check": "^3.1.4",
+    "svelte-preprocess": "^5.0.3",
+    "svelte-toc": "^0.5.4",
+    "svelte-zoo": "^0.4.3",
+    "svelte2tsx": "^0.6.10",
+    "typescript": "5.0.2",
+    "vite": "^4.2.0",
+    "vitest": "^0.29.3"
   },
   "keywords": [
     "svelte",

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/dev/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+[![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/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)
 
@@ -185,6 +185,12 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    Handle to the `<input>` DOM node that's responsible for form validity checks and passing selected options to form submission handlers. Only available after component mounts (`null` before then).
 
+1. ```ts
+   highlightMatches: boolean = true
+   ```
+
+   Whether to highlight text in the dropdown options that matches the current user-entered search query. Uses the [CSS Custom Highlight API](https://developer.mozilla.org/docs/Web/API/CSS_Custom_Highlight_API) with limited browser support and [styling options](https://developer.mozilla.org/docs/Web/CSS/::highlight). See `::highlight(search-results)` below for available CSS variables.
+
 1. ```ts
    id: string | null = null
    ```
@@ -500,6 +506,12 @@ There are 3 ways to style this component. To understand which options do what, i
 
 If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context. See [`app.css`](https://github.com/janosh/svelte-multiselect/blob/main/src/app.css) for how these variables are set on the demo site of this component.
 
+Minimal example that changes the background color of the options dropdown:
+
+```svelte
+<MultiSelect --sms-options-bg="white" />
+```
+
 - `div.multiselect`
   - `border: var(--sms-border, 1pt solid lightgray)`: Change this to e.g. to `1px solid red` to indicate this form field is in an invalid state.
   - `border-radius: var(--sms-border-radius, 3pt)`
@@ -547,12 +559,11 @@ If you only want to make small adjustments, you can pass the following CSS varia
 - `div.multiselect > ul.options > li.disabled`
   - `background: var(--sms-li-disabled-bg, #f5f5f6)`: Background of disabled options in the dropdown list.
   - `color: var(--sms-li-disabled-text, #b8b8b8)`: Text color of disabled option in the dropdown list.
-
-For example, to change the background color of the options dropdown:
-
-```svelte
-<MultiSelect --sms-options-bg="white" />
-```
+- `::highlight(search-results)`: applies to search results in dropdown list that match the current search query if `highlightMatches=true`
+  - `color: var(--sms-highlight-color, orange)`
+  - `background: var(--sms-highlight-bg)`
+  - `text-decoration: var(--sms-highlight-text-decoration)`
+  - `text-decoration-color: var(--sms-highlight-text-decoration-color)`
 
 ### With CSS frameworks
 
@@ -611,7 +622,7 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 :global(div.multiselect > ul.selected > li button, button.remove-all) {
   /* buttons to remove a single or all selected options at once */
 }
-:global(div.multiselect > ul.selected > li > input) {
+:global(div.multiselect > input[autocomplete]) {
   /* input inside the top-level wrapper div */
 }
 :global(div.multiselect > ul.options) {