svelte-multiselect 10.3.0 → 11.0.0

package/dist/utils.js

@@ -1,4 +1,8 @@
-// get the label key from an option object or the option itself if it's a string or number
+/**
+ * Get the label key from an option object or the option itself if it's a string or number
+ * @param opt Option
+ * @returns Label
+ */
 export const get_label = (opt) => {
     if (opt instanceof Object) {
         if (opt.label === undefined) {
@@ -8,8 +12,13 @@ export const get_label = (opt) => {
     }
     return `${opt}`;
 };
-// this function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option
-// if the style is a string, it will be returned as is
+/**
+ * This function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option.
+ * If the style is a string, it will be returned as is
+ * @param option Option
+ * @param key
+ * @returns CSS string
+ */
 export function get_style(option, key = null) {
     let css_str = ``;
     if (![`selected`, `option`, null].includes(key)) {
@@ -32,3 +41,51 @@ export function get_style(option, key = null) {
         css_str += `;`;
     return css_str;
 }
+/**
+ * Highlights text nodes that matching the string query
+ * @param element Parent element
+ * @param query Search query
+ * @param noMatchingOptionsMsg Text for empty node
+ */
+export function highlight_matching_nodes(element, query, noMatchingOptionsMsg) {
+    if (typeof CSS == `undefined` || !CSS.highlights || !query)
+        return; // abort if CSS highlight API not supported
+    // clear previous ranges from HighlightRegistry
+    CSS.highlights.clear();
+    const tree_walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
+        acceptNode: (node) => {
+            // don't highlight text in the "no matching options" message
+            if (node?.textContent === noMatchingOptionsMsg)
+                return NodeFilter.FILTER_REJECT;
+            return NodeFilter.FILTER_ACCEPT;
+        },
+    });
+    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(`sms-search-matches`, new Highlight(...ranges.flat()));
+}

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "10.3.0",
+  "version": "11.0.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -15,46 +15,49 @@
     "preview": "vite preview",
     "package": "svelte-package",
     "serve": "vite build && vite preview",
-    "check": "svelte-check --ignore dist",
-    "test": "vitest --run --coverage tests/unit/*.ts && playwright test tests/*.test.ts",
+    "check": "svelte-check src",
+    "test": "vitest --run --coverage tests/unit/*.ts && npm run test:e2e",
     "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",
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
-  "dependencies": {
-    "svelte": "4.2.12"
+  "peerDependencies": {
+    "svelte": "^5.8.0"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.6",
-    "@playwright/test": "^1.43.0",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.5",
-    "@sveltejs/package": "2.3.1",
-    "@sveltejs/vite-plugin-svelte": "3.0.2",
-    "@vitest/coverage-v8": "^1.4.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-svelte": "^2.36.0",
-    "globals": "^15.0.0",
-    "hastscript": "^9.0.0",
-    "highlight.js": "^11.9.0",
-    "jsdom": "^24.0.0",
-    "mdsvex": "^0.11.0",
-    "mdsvexamples": "^0.4.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "@iconify/svelte": "^5.0.0",
+    "@playwright/test": "^1.52.0",
+    "@stylistic/eslint-plugin": "^4.2.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.21.0",
+    "@sveltejs/package": "2.3.11",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@types/node": "^22.15.18",
+    "@vitest/coverage-v8": "^3.1.3",
+    "eslint": "^9.26.0",
+    "eslint-plugin-svelte": "^3.6.0",
+    "globals": "^16.1.0",
+    "hastscript": "^9.0.1",
+    "highlight.js": "^11.11.1",
+    "jsdom": "^26.1.0",
+    "mdsvex": "^0.12.6",
+    "mdsvexamples": "^0.5.0",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte-check": "^3.6.9",
-    "svelte-multiselect": "^10.2.0",
-    "svelte-preprocess": "^5.1.3",
-    "svelte-toc": "^0.5.8",
-    "svelte-zoo": "^0.4.10",
-    "svelte2tsx": "^0.7.6",
-    "typescript": "5.4.4",
-    "typescript-eslint": "^7.5.0",
-    "vite": "^5.1.5",
-    "vitest": "^1.4.0"
+    "svelte": "^5.30.1",
+    "svelte-check": "^4.2.1",
+    "svelte-multiselect": "11.0.0-rc.1",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-toc": "^0.6.0",
+    "svelte-zoo": "^0.4.18",
+    "svelte2tsx": "^0.7.39",
+    "typescript": "5.8.3",
+    "typescript-eslint": "^8.32.1",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -40,34 +40,6 @@
 | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
 | ![Statements](https://img.shields.io/badge/statements-97.94%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-79.39%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-97.94%25-brightgreen.svg?style=flat) |
 
-## 📜   Breaking changes
-
-- **8.0.0** (2022-10-22) 
-  - Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
-  - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
-- **v8.3.0** (2023-01-25)  `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
-- **v9.0.0** (2023-06-01)  Svelte bumped from v3 to v4. Also, not breaking but noteworthy: MultiSelect received a default slot that functions as both `"option"` and `"selected"`. If you previously had two identical slots for `"option"` and `"selected"`, you can now remove the `name` from one of them and drop the other:
-
-  ```diff
-  <MultiSelect
-    {options}
-  + let:option
-  >
-  - <SlotComponent let:option {option} slot="selected" />
-  - <SlotComponent let:option {option} slot="option" />
-  + <SlotComponent {option} />
-  </MultiSelect>
-  ```
-
-- **v10.0.0** (2023-06-23)&nbsp; `duplicateFunc()` renamed to `key` in [#238](https://github.com/janosh/svelte-multiselect/pull/238). Signature changed:
-
-  ```diff
-  - duplicateFunc: (op1: T, op2: T) => boolean = (op1, op2) => `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
-  + key: (opt: T) => unknown = (opt) => `${get_label(opt)}`.toLowerCase()
-  ```
-
-  Rather than implementing custom equality in `duplicateFunc`, the `key` function is now expected to map options to a unique identifier. `key(op1) === key(op2)` should mean `op1` and `op2` are the same option. `key` can return any type but usually best to return primitives (`string`, `number`, ...) for Svelte keyed each blocks (see [#217](https://github.com/janosh/svelte-multiselect/pull/217)).
-
 ## 🔨 &thinsp; Installation
 
 ```sh
@@ -84,7 +56,7 @@ yarn add --dev svelte-multiselect
 
   const ui_libs = [`Svelte`, `React`, `Vue`, `Angular`, `...`]
 
-  let selected = []
+  let selected = $state([])
 </script>
 
 Favorite Frontend Tools?
@@ -123,7 +95,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    Whether to `console.error` if dropdown list of options is empty. `allowEmpty={false}` will suppress errors. `allowEmpty={true}` will report a console error if component is not `disabled`, not in `loading` state and doesn't `allowUserOptions`.
 
 1. ```ts
-   allowUserOptions: boolean | 'append' = false
+   allowUserOptions: boolean | `append` = false
    ```
 
    Whether users can enter values that are not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected.
@@ -194,7 +166,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
 1. ```ts
-   closeDropdownOnSelect: boolean | 'desktop' = `desktop`
+   closeDropdownOnSelect: boolean | `desktop` = `desktop`
    ```
 
    One of `true`, `false` or `'desktop'`. Whether to close the dropdown list after selecting a dropdown item. If `true`, component will loose focus and `dropdown` is closed. `'desktop'` means `false` if current window width is larger than the current value of `breakpoint` prop (default is 800, meaning screen width in pixels). This is to align with the default behavior of many mobile browsers like Safari which close dropdowns after selecting an option while desktop browsers facilitate multi-selection by leaving dropdowns open.
@@ -257,7 +229,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    loading: boolean = false
    ```
 
-   Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner.
+   Whether the component should display a spinner to indicate it's in loading state. Use `{#snippet spinner()} ... {/snippet}` to specify a custom spinner.
 
 1. ```ts
    matchingOptions: Option[] = []
@@ -334,7 +306,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    parseLabelsAsHtml: boolean = false
    ```
 
-   Whether option labels should be passed to [Svelte's `@html` directive](https://svelte.dev/tutorial/html-tags) or inserted into the DOM as plain text. `true` will raise an error if `allowUserOptions` is also truthy as it makes your site susceptible to [cross-site scripting (XSS) attacks](https://wikipedia.org/wiki/Cross-site_scripting).
+   Whether option labels should be passed to [Svelte's `@html` directive](https://svelte.dev/tutorial/svelte/html-tags) or inserted into the DOM as plain text. `true` will raise an error if `allowUserOptions` is also truthy as it makes your site susceptible to [cross-site scripting (XSS) attacks](https://wikipedia.org/wiki/Cross-site_scripting).
 
 1. ```ts
    pattern: string | null = null
@@ -423,35 +395,42 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    If `maxSelect={1}`, `value` will be the single item in `selected` (or `null` if `selected` is empty). If `maxSelect != 1`, `maxSelect` and `selected` are equal. Warning: Setting `value` does not rendered state on initial mount, meaning `bind:value` will update local variable `value` whenever internal component state changes but passing a `value` when component first mounts won't be reflected in UI. This is because the source of truth for rendering is `bind:selected`. `selected` is reactive to `value` internally but only on reassignment from initial value. Suggestions for better solutions than [#249](https://github.com/janosh/svelte-multiselect/issues/249) welcome!
 
-## 🎰 &thinsp; Slots
+## 🎰 &thinsp; Snippets
 
-`MultiSelect.svelte` accepts the following named slots:
+`MultiSelect.svelte` accepts the following named snippets:
 
-1. `slot="option"`: Customize rendering of dropdown options. Receives as props an `option` and the zero-indexed position (`idx`) it has in the dropdown.
-1. `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items.
-1. `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props.
-1. `slot="disabled-icon"`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `<span slot="disabled-icon" />` or `div` to remove the default disabled icon.
-1. `slot="expand-icon"`: Allows setting a custom icon to indicate to users that the Multiselect text input field is expandable into a dropdown list. Receives prop `open: boolean` which is true if the Multiselect dropdown is visible and false if it's hidden.
-1. `slot="remove-icon"`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
-1. `slot="user-msg"`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). Receives props:
+1. `#snippet option({ option, idx })`: Customize rendering of dropdown options. Receives as props an `option` and the zero-indexed position (`idx`) it has in the dropdown.
+1. `#snippet selectedItem({ option, idx })`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items.
+1. `#snippet spinner()`: Custom spinner component to display when in `loading` state. Receives no props.
+1. `#snippet disabledIcon()`: Custom icon to display inside the input when in `disabled` state. Receives no props. Use an empty `{#snippet disabledIcon()}{/snippet}` to remove the default disabled icon.
+1. `#snippet expandIcon()`: Allows setting a custom icon to indicate to users that the Multiselect text input field is expandable into a dropdown list. Receives prop `open: boolean` which is true if the Multiselect dropdown is visible and false if it's hidden.
+1. `#snippet removeIcon()`: Custom icon to display as remove button. Will be used both by buttons to remove individual selected options and the 'remove all' button that clears all options at once. Receives no props.
+1. `#snippet userMsg({ searchText, msgType, msg })`: Displayed like a dropdown item when the list is empty and user is allowed to create custom options based on text input (or if the user's text input clashes with an existing option). Receives props:
    - `searchText`: The text user typed into search input.
    - `msgType: false | 'create' | 'dupe' | 'no-match'`: `'dupe'` means user input is a duplicate of an existing option. `'create'` means user is allowed to convert their input into a new option not previously in the dropdown. `'no-match'` means user input doesn't match any dropdown items and users are not allowed to create new options. `false` means none of the above.
-   - `msg`: Will be `duplicateOptionMsg` or `createOptionMsg` (see [props](#🔣-props)) based on whether user input is a duplicate or can be created as new option. Note this slot replaces the default UI for displaying these messages so the slot needs to render them instead (unless purposely not showing a message).
-1. `slot='after-input'`: Placed after the search input. For arbitrary content like icons or temporary messages. Receives props `selected: Option[]`, `disabled: boolean`, `invalid: boolean`, `id: string | null`, `placeholder: string`, `open: boolean`, `required: boolean`. Can serve as a more dynamic, more customizable alternative to the `placeholder` prop.
+   - `msg`: Will be `duplicateOptionMsg` or `createOptionMsg` (see [props](#🔣-props)) based on whether user input is a duplicate or can be created as new option. Note this snippet replaces the default UI for displaying these messages so the snippet needs to render them instead (unless purposely not showing a message).
+1. `snippet='after-input'`: Placed after the search input. For arbitrary content like icons or temporary messages. Receives props `selected: Option[]`, `disabled: boolean`, `invalid: boolean`, `id: string | null`, `placeholder: string`, `open: boolean`, `required: boolean`. Can serve as a more dynamic, more customizable alternative to the `placeholder` prop.
 
-Example using several slots:
+Example using several snippets:
 
 ```svelte
-<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]} let:idx let:option>
-   <!-- default slot overrides rendering of both dropdown-listed and selected options -->
-  <span>
-    {idx + 1}
-    {option.label}
-    <span style:background={option.label} style=" width: 1em; height: 1em;" />
-  </span>
-
-  <CustomSpinner slot="spinner">
-  <strong slot="remove-icon">X</strong>
+<MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}>
+  {#snippet children({ idx, option })}
+    <span style="display: flex; align-items: center; gap: 6pt;">
+      <span
+        style:background={`${option}`}
+        style="border-radius: 50%; width: 1em; height: 1em;"
+      ></span>
+      {idx + 1}
+      {option}
+    </span>
+  {/snippet}
+  {#snippet spinner()}
+    <CustomSpinner />
+  {/snippet}
+  {#snippet removeIcon()}
+    <strong>X</strong>
+  {/snippet}
 </MultiSelect>
 ```
 
@@ -460,37 +439,37 @@ Example using several slots:
 `MultiSelect.svelte` dispatches the following events:
 
 1. ```ts
-   on:add={(event) => console.log(event.detail.option)}
+   onadd={(event) => console.log(event.detail.option)}
    ```
 
    Triggers when a new option is selected. The newly selected option is provided as `event.detail.option`.
 
 1. ```ts
-   on:remove={(event) => console.log(event.detail.option)}`
+   onremove={(event) => console.log(event.detail.option)}`
    ```
 
    Triggers when a single selected option is removed. The removed option is provided as `event.detail.option`.
 
 1. ```ts
-   on:removeAll={(event) => console.log(event.detail.options)}`
+   onremoveAll={(event) => console.log(event.detail.options)}`
    ```
 
    Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected.
 
 1. ```ts
-   on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}
+   onchange={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}
    ```
 
    Triggers when an option is either added (selected) or removed from selected, or all selected options are removed at once. `type` is one of `'add' | 'remove' | 'removeAll'` and payload will be `option: Option` or `options: Option[]`, respectively.
 
 1. ```ts
-   on:open={(event) => console.log(`Multiselect dropdown was opened by ${event}`)}
+   onopen={(event) => console.log(`Multiselect dropdown was opened by ${event}`)}
    ```
 
    Triggers when the dropdown list of options appears. Event is the DOM's `FocusEvent`,`KeyboardEvent` or `ClickEvent` that initiated this Svelte `dispatch` event.
 
 1. ```ts
-   on:close={(event) => console.log(`Multiselect dropdown was closed by ${event}`)}
+   onclose={(event) => console.log(`Multiselect dropdown was closed by ${event}`)}
    ```
 
    Triggers when the dropdown list of options disappears. Event is the DOM's `FocusEvent`, `KeyboardEvent` or `ClickEvent` that initiated this Svelte `dispatch` event.
@@ -499,7 +478,7 @@ For example, here's how you might annoy your users with an alert every time one
 
 ```svelte
 <MultiSelect
-  on:change={(e) => {
+  onchange={(e) => {
     if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
     if (e.detail.type === 'remove') alert(`You removed ${e.detail.option}`)
     if (e.detail.type === 'removeAll') alert(`You removed ${e.detail.options}`)
@@ -509,12 +488,12 @@ For example, here's how you might annoy your users with an alert every time one
 
 > Note: Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
 
-The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events). This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. Registering listeners for these events works the same:
+The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutorial/svelte/component-events). This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. Registering listeners for these events works the same:
 
 ```svelte
 <MultiSelect
   options={[1, 2, 3]}
-  on:keyup={(event) => console.log('key', event.target.value)}
+  onkeyup={(event) => console.log('key', event.target.value)}
 />
 ```
 
@@ -534,7 +513,7 @@ const options = [42, 69]
 // type Option = number
 ```
 
-The inferred type of `Option` is used to enforce type-safety on derived props like `selected` as well as slot components. E.g. you'll get an error when trying to use a slot component that expects a string if your options are objects (see [this comment](https://github.com/janosh/svelte-multiselect/pull/189/files#r1058853697) for example screenshots).
+The inferred type of `Option` is used to enforce type-safety on derived props like `selected` as well as snippets. E.g. you'll get an error when trying to use a snippet that expects a string if your options are objects (see [this comment](https://github.com/janosh/svelte-multiselect/pull/189/files#r1058853697) for example screenshots).
 
 You can also import [the types this component uses](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for downstream applications: