svelte-multiselect 8.0.1 → 8.0.3

package/MultiSelect.svelte

@@ -63,11 +63,12 @@ const get_label = (op) => (op instanceof Object ? op.label : op);
 $: value = maxSelect === 1 ? selected[0] ?? null : selected;
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
 if (!(options?.length > 0)) {
-    if (allowUserOptions) {
+    if (allowUserOptions || loading) {
         options = []; // initializing as array avoids errors when component mounts
     }
     else {
-        // only error for empty options if user is not allowed to create custom options
+        // only error for empty options if user is not allowed to create custom
+        // options and loading is false
         console.error(`MultiSelect received no options`);
     }
 }
@@ -237,21 +238,19 @@ async function handle_keydown(event) {
             // if no option is active and no options are matching, do nothing
             return;
         }
+        // if none of the abvove special cases apply, we make next/prev option
+        // active with wrap around at both ends
         const increment = event.key === `ArrowUp` ? -1 : 1;
         activeIndex = (activeIndex + increment) % matchingOptions.length;
-        // % in JS behaves like remainder operator, not real modulo, so negative numbers stay negative
+        // in JS % behaves like remainder operator, not real modulo, so negative numbers stay negative
         // need to do manual wrap around at 0
         if (activeIndex < 0)
             activeIndex = matchingOptions.length - 1;
         if (autoScroll) {
-            // TODO This ugly timeout hack is needed to properly scroll element into view when wrapping
-            // around start/end of option list. Find a better solution than waiting 10 ms.
             await tick();
             const li = document.querySelector(`ul.options > li.active`);
-            if (li) {
-                li.parentNode?.scrollIntoView?.({ block: `center` });
+            if (li)
                 li.scrollIntoViewIfNeeded?.();
-            }
         }
     }
     // on backspace key: remove last selected option
@@ -301,7 +300,8 @@ function on_click_outside(event) {
   <!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
   <input
     {required}
-    bind:value={selected}
+    {name}
+    value={selected.length > 0 ? JSON.stringify(selected) : null}
     tabindex="-1"
     aria-hidden="true"
     aria-label="ignore this, used only to prevent form submission if select is required but empty"
@@ -344,7 +344,6 @@ function on_click_outside(event) {
         on:focus
         on:focus={open_dropdown}
         {id}
-        {name}
         {disabled}
         {inputmode}
         {pattern}
@@ -373,7 +372,7 @@ function on_click_outside(event) {
   {/if}
   {#if disabled}
     <slot name="disabled-icon">
-      <DisabledIcon width="15px" />
+      <DisabledIcon width="14pt" style="margin: 0 2pt;" data-name="disabled-icon" />
     </slot>
   {:else if selected.length > 0}
     {#if maxSelect && (maxSelect > 1 || maxSelectMsg)}
@@ -480,7 +479,7 @@ function on_click_outside(event) {
     padding: var(--sms-padding, 0 3pt);
     color: var(--sms-text-color);
     font-size: var(--sms-font-size, inherit);
-    min-height: var(--sms-min-height, 19pt);
+    min-height: var(--sms-min-height, 22pt);
     margin: var(--sms-margin);
   }
   :where(div.multiselect.open) {

package/Wiggle.svelte

@@ -9,9 +9,9 @@ export let dy = 0; // try 10
 export let duration = 200;
 export let stiffness = 0.05;
 export let damping = 0.1;
-let restState = { angle: 0, scale: 1, dx: 0, dy: 0 };
-let store = spring(restState, { stiffness, damping });
-$: store.set(wiggle ? { scale, angle, dx, dy } : restState);
+let rest_state = { angle: 0, scale: 1, dx: 0, dy: 0 };
+let store = spring(rest_state, { stiffness, damping });
+$: store.set(wiggle ? { scale, angle, dx, dy } : rest_state);
 $: if (wiggle)
     setTimeout(() => (wiggle = false), duration);
 </script>

package/icons/Disabled.svelte

@@ -1,6 +1,6 @@
+<!-- https://api.iconify.design/fe:disabled.svg -->
 <svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
-  <path fill="none" d="M0 0h24v24H0V0z" />
   <path
-    d="M14.48 11.95c.17.02.34.05.52.05 2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .18.03.35.05.52l3.43 3.43zm2.21 2.21L22.53 20H23v-2c0-2.14-3.56-3.5-6.31-3.84zM0 3.12l4 4V10H1v2h3v3h2v-3h2.88l2.51 2.51C9.19 15.11 7 16.3 7 18v2h9.88l4 4 1.41-1.41L1.41 1.71 0 3.12zM6.88 10H6v-.88l.88.88z"
+    d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10Zm-4.906-3.68L18.32 7.094A8 8 0 0 1 7.094 18.32ZM5.68 16.906A8 8 0 0 1 16.906 5.68L5.68 16.906Z"
   />
 </svg>

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.0.1",
+  "version": "8.0.3",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
@@ -13,31 +13,33 @@
   "devDependencies": {
     "@iconify/svelte": "^3.0.0",
     "@playwright/test": "^1.27.1",
-    "@sveltejs/adapter-static": "^1.0.0-next.44",
-    "@sveltejs/kit": "^1.0.0-next.516",
-    "@sveltejs/package": "^1.0.0-next.5",
-    "@sveltejs/vite-plugin-svelte": "^1.0.9",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "eslint": "^8.25.0",
+    "@sveltejs/adapter-static": "1.0.0-next.48",
+    "@sveltejs/kit": "1.0.0-next.544",
+    "@sveltejs/package": "1.0.0-next.5",
+    "@sveltejs/vite-plugin-svelte": "^1.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "@vitest/coverage-c8": "^0.25.1",
+    "eslint": "^8.27.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.1.0",
-    "jsdom": "^20.0.1",
+    "highlight.js": "^11.6.0",
+    "jsdom": "^20.0.2",
     "mdsvex": "^0.10.6",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.8.0",
     "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.0.1",
-    "svelte": "^3.52.0",
+    "rehype-slug": "^5.1.0",
+    "svelte": "^3.53.1",
     "svelte-check": "^2.9.2",
     "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^4.10.6",
-    "svelte-toc": "^0.4.0",
+    "svelte-preprocess": "^4.10.7",
+    "svelte-toc": "^0.4.1",
     "svelte2tsx": "^0.5.20",
-    "tslib": "^2.4.0",
+    "tslib": "^2.4.1",
     "typescript": "^4.8.4",
-    "vite": "^3.1.8",
-    "vitest": "^0.24.3"
+    "vite": "^3.2.3",
+    "vitest": "^0.25.1"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -14,10 +14,10 @@
 
 </h4>
 
-**Keyboard-friendly, accessible and highly customizable multi-select component.**
-<span class="hide-in-docs">
-<a href="https://svelte-multiselect.netlify.app">View the docs</a>
-</span>
+<p align="center"><strong>
+  Keyboard-friendly, accessible and highly customizable multi-select component.
+  <a class="hide-in-docs" href="https://svelte-multiselect.netlify.app">View the docs</a>
+</strong></p>
 
 <slot name="examples" />
 
@@ -36,14 +36,14 @@
 
 ## Recent breaking changes
 
-- **v6.0.0**&nbsp; The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. See [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
-- **v6.0.1**&nbsp; The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
-- **v6.0.1**&nbsp; The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. See [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
-- **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. See [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
-- **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. See [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
+- **v6.0.0**&nbsp; The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to `open`. [PR 103](https://github.com/janosh/svelte-multiselect/pull/103).
+- **v6.0.1**&nbsp; The prop `disabledTitle` which sets the title of the `<MultiSelect>` `<input>` node if in `disabled` mode was renamed to `disabledInputTitle`. [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
+- **v6.0.1**&nbsp; The default margin of `1em 0` on the wrapper `div.multiselect` was removed. Instead, there is now a new CSS variable `--sms-margin`. Set it to `--sms-margin: 1em 0;` to restore the old appearance. [PR 105](https://github.com/janosh/svelte-multiselect/pull/105).
+- **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
+- **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
 - **8.0.0**&nbsp;
-  - 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. See [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
-  - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. See [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
+  - 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).
 
 ## Installation
 
@@ -98,7 +98,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    ```
 
    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.
-   If `allowUserOptions` is `true` or `'append'` then the type `object | number | string` of entered value is determined from the first option of the list to keep type homogeneity.
+   If `allowUserOptions` is `true` or `'append'` then the type `object | number | string` of entered value is determined by `typeof options[0]` (i.e. the first option in the dropdown list) to keep type homogeneity.
 
 1. ```ts
    autocomplete: string = `off`
@@ -148,7 +148,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    duplicates: boolean = false
    ```
 
-   Whether to allow users to select duplicate options. Applies only to the selected item list, not the options dropdown. Keeping that free of duplicates is left to developer. The selected item list can have duplicates if `allowUserOptions` is truthy, `duplicates` is ` true` and users create the same option multiple times. Use `duplicateOptionMsg` to customize the message shown to user if `duplicates` is `false` and users attempt this and `duplicateFunc` to customize when a pair of options is considered a duplicate.
+   Whether to allow users to select duplicate options. Applies only to the selected item list, not the options dropdown. Keeping that free of duplicates is left to developer. The selected item list can have duplicates if `allowUserOptions` is truthy, `duplicates` is `true` and users create the same option multiple times. Use `duplicateOptionMsg` to customize the message shown to user if `duplicates` is `false` and users attempt this and `duplicateFunc` to customize when a pair of options is considered a duplicate.
 
 1. ```ts
    duplicateOptionMsg: string = `This option is already selected`
@@ -215,9 +215,9 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 1. ```ts
    maxSelectMsg: ((current: number, max: number) => string) | null = (
-    current: number,
-    max: number
-  ) => (max > 1 ? `${current}/${max}` : ``)
+     current: number,
+     max: number
+   ) => (max > 1 ? `${current}/${max}` : ``)
    ```
 
    Inform users how many of the maximum allowed options they have already selected. Set `maxSelectMsg={null}` to not show a message. Defaults to `null` when `maxSelect={1}` or `maxSelect={null}`. Else if `maxSelect > 1`, defaults to:
@@ -230,7 +230,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    name: string | null = null
    ```
 
-   Applied to the `<input>` element. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>` node.
+   Applied to the `<input>` element. Sets the key of this field in a submitted form data object. See [form example](https://svelte-multiselect.netlify.app/form).
 
 1. ```ts
    noMatchingOptionsMsg: string = `No matching options`
@@ -410,7 +410,7 @@ 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.
 
-This component also forwards many DOM events from the `<input>` node: `blur`, `change`, `click`, `keydown`, `keyup`, `mousedown`, `mouseenter`, `mouseleave`, `touchcancel`, `touchend`, `touchmove`, `touchstart`. You can register listeners for these just like for the above [Svelte `dispatch` events](https://svelte.dev/tutorial/component-events):
+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:
 
 ```svelte
 <MultiSelect
@@ -425,7 +425,8 @@ TypeScript users can import the types used for internal type safety:
 
 ```svelte
 <script lang="ts">
-  import MultiSelect, { Option, ObjectOption } from 'svelte-multiselect'
+  import MultiSelect from 'svelte-multiselect'
+  import type { Option, ObjectOption } from 'svelte-multiselect'
 
   const myOptions: ObjectOption[] = [
     { label: 'foo', value: 42 },
@@ -463,7 +464,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `padding: var(--sms-padding, 0 3pt)`
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
-  - `min-height: var(--sms-min-height, 19pt)`
+  - `min-height: var(--sms-min-height, 22pt)`
   - `width: var(--sms-width)`
   - `max-width: var(--sms-max-width)`
   - `margin: var(--sms-margin)`
@@ -585,40 +586,6 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 }
 ```
 
-## Downstream testing
-
-To test a Svelte component which imports `svelte-multiselect`, you need to configure your test runner to avoid [transpiling issues](https://github.com/janosh/svelte-multiselect/issues/48).
-
-For Jest, exclude `svelte-multiselect` from `transformIgnorePatterns` in your `jest.config.json`:
-
-```json
-{
-  "transformIgnorePatterns": ["node_modules/?!(svelte-multiselect)"],
-  "transform": {
-    "^.+\\.[t|j]s?$": "esbuild-jest",
-    "^.+\\.svelte$": ["svelte-jester", { "preprocess": true }]
-  }
-}
-```
-
-For Vitest, include `svelte-multiselect` in `deps.inline`:
-
-```ts
-// vite.config.ts
-import { svelte } from '@sveltejs/vite-plugin-svelte'
-
-export default {
-  plugins: [svelte({ hot: !process.env.VITEST })],
-  test: {
-    deps: {
-      inline: [/svelte-multiselect/],
-    },
-  },
-}
-```
-
-Here's a [Stackblitz example](https://stackblitz.com/fork/github/davipon/test-svelte-multiselect?initialPath=__vitest__) that also uses [`vitest-svelte-kit`](https://github.com/nickbreaton/vitest-svelte-kit).
-
 ## Want to contribute?
 
 To submit a PR, clone the repo, install dependencies and start the dev server to try out your changes.
@@ -626,6 +593,6 @@ To submit a PR, clone the repo, install dependencies and start the dev server to
 ```sh
 git clone https://github.com/janosh/svelte-multiselect
 cd svelte-multiselect
-npm install
-npm run dev
+pnpm install
+pnpm dev
 ```