svelte-multiselect 8.2.4 → 8.3.0

package/MultiSelect.svelte

@@ -1,12 +1,12 @@
 <script>import { createEventDispatcher, tick } from 'svelte';
 import { flip } from 'svelte/animate';
-import CircleSpinner from './CircleSpinner.svelte';
+import { CircleSpinner, Wiggle } from '.';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
-import Wiggle from './Wiggle.svelte';
 export let activeIndex = null;
 export let activeOption = null;
-export let addOptionMsg = `Create this option...`;
+export let createOptionMsg = `Create this option...`;
 export let allowUserOptions = false;
+export let allowEmpty = false; // added for https://github.com/janosh/svelte-multiselect/issues/192
 export let autocomplete = `off`;
 export let autoScroll = true;
 export let breakpoint = 800; // any screen with more horizontal pixels is considered desktop, below is mobile
@@ -62,25 +62,30 @@ export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
 export let value = null;
 // get the label key from an option object or the option itself if it's a string or number
-const get_label = (op) => (op instanceof Object ? op.label : op);
+const get_label = (op) => {
+    if (op instanceof Object) {
+        if (op.label === undefined) {
+            console.error(`MultiSelect option ${JSON.stringify(op)} is an object but has no label key`);
+        }
+        return op.label;
+    }
+    return op;
+};
 // if maxSelect=1, value is the single item in selected (or null if selected is empty)
 // this solves both https://github.com/janosh/svelte-multiselect/issues/86 and
 // https://github.com/janosh/svelte-multiselect/issues/136
 $: 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 || loading || disabled) {
+    if (allowUserOptions || loading || disabled || allowEmpty) {
         options = []; // initializing as array avoids errors when component mounts
     }
     else {
-        // only error for empty options if user is not allowed to create custom
-        // options and loading is false
+        // error on empty options if user is not allowed to create custom options and loading is false
+        // and component is not disabled and allowEmpty is false
         console.error(`MultiSelect received no options`);
     }
 }
-if (parseLabelsAsHtml && allowUserOptions) {
-    console.warn(`Don't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
-}
 if (maxSelect !== null && maxSelect < 1) {
     console.error(`MultiSelect's maxSelect must be null or positive integer, got ${maxSelect}`);
 }
@@ -90,11 +95,14 @@ if (!Array.isArray(selected)) {
 if (maxSelect && typeof required === `number` && required > maxSelect) {
     console.error(`MultiSelect maxSelect=${maxSelect} < required=${required}, makes it impossible for users to submit a valid form`);
 }
+if (parseLabelsAsHtml && allowUserOptions) {
+    console.warn(`Don't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
+}
 if (sortSelected && selectedOptionsDraggable) {
     console.warn(`MultiSelect's sortSelected and selectedOptionsDraggable should not be combined as any user re-orderings of selected options will be undone by sortSelected on component re-renders.`);
 }
 const dispatch = createEventDispatcher();
-let add_option_msg_is_active = false; // controls active state of <li>{addOptionMsg}</li>
+let add_option_msg_is_active = false; // controls active state of <li>{createOptionMsg}</li>
 let window_width;
 // options matching the current search text
 $: matchingOptions = options.filter((op) => filterFunc(op, searchText) && !selected.map(get_label).includes(get_label(op)) // remove already selected options from dropdown list
@@ -180,16 +188,17 @@ function add(label, event) {
 function remove(label) {
     if (selected.length === 0)
         return;
-    selected.splice(selected.map(get_label).lastIndexOf(label), 1);
-    selected = selected; // Svelte rerender after in-place splice
-    const option = options.find((option) => get_label(option) === label) ??
+    let option = selected.find((op) => get_label(op) === label);
+    if (option === undefined && allowUserOptions) {
         // if option with label could not be found but allowUserOptions is truthy,
         // assume it was created by user and create corresponding option object
         // on the fly for use as event payload
-        (allowUserOptions && { label, value: label });
-    if (!option) {
-        return console.error(`MultiSelect: option with label ${label} not found`);
+        option = (typeof options[0] == `object` ? { label } : label);
+    }
+    if (option === undefined) {
+        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
@@ -298,7 +307,7 @@ const drop = (target_idx) => (event) => {
         return;
     event.dataTransfer.dropEffect = `move`;
     const start_idx = parseInt(event.dataTransfer.getData(`text/plain`));
-    const new_selected = selected;
+    const new_selected = [...selected];
     if (start_idx < target_idx) {
         new_selected.splice(target_idx + 1, 0, new_selected[start_idx]);
         new_selected.splice(start_idx, 1);
@@ -393,6 +402,7 @@ const dragstart = (idx) => (event) => {
             on:keydown={if_enter_or_space(() => remove(get_label(option)))}
             type="button"
             title="{removeBtnTitle} {get_label(option)}"
+            class="remove"
           >
             <slot name="remove-icon">
               <CrossIcon width="15px" />
@@ -454,7 +464,7 @@ const dragstart = (idx) => (event) => {
     {#if maxSelect !== 1 && selected.length > 1}
       <button
         type="button"
-        class="remove-all"
+        class="remove remove-all"
         title={removeAllTitle}
         on:mouseup|stopPropagation={remove_all}
         on:keydown={if_enter_or_space(remove_all)}
@@ -467,7 +477,7 @@ const dragstart = (idx) => (event) => {
   {/if}
 
   <!-- only render options dropdown if options or searchText is not empty needed to avoid briefly flashing empty dropdown -->
-  {#if searchText || options?.length > 0}
+  {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}
     <ul class:hidden={!open} class="options {ulOptionsClass}">
       {#each matchingOptions as option, idx}
         {@const {
@@ -513,7 +523,7 @@ const dragstart = (idx) => (event) => {
           <li
             on:mousedown|stopPropagation
             on:mouseup|stopPropagation={(event) => add(searchText, event)}
-            title={addOptionMsg}
+            title={createOptionMsg}
             class:active={add_option_msg_is_active}
             on:mouseover={() => (add_option_msg_is_active = true)}
             on:focus={() => (add_option_msg_is_active = true)}
@@ -523,7 +533,7 @@ const dragstart = (idx) => (event) => {
           >
             {!duplicates && selected.some((option) => duplicateFunc(option, searchText))
               ? duplicateOptionMsg
-              : addOptionMsg}
+              : createOptionMsg}
           </li>
         {:else}
           <span>{noMatchingOptionsMsg}</span>

package/MultiSelect.svelte.d.ts

@@ -4,8 +4,9 @@ declare class __sveltets_Render<Option extends GenericOption> {
     props(): {
         activeIndex?: number | null | undefined;
         activeOption?: Option | null | undefined;
-        addOptionMsg?: string | undefined;
+        createOptionMsg?: string | undefined;
         allowUserOptions?: boolean | "append" | undefined;
+        allowEmpty?: boolean | undefined;
         autocomplete?: string | undefined;
         autoScroll?: boolean | undefined;
         breakpoint?: number | undefined;

package/changelog.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
+<!-- auto-changelog-above -->
+
+#### [v8.3.0](https://github.com/janosh/svelte-multiselect/compare/v8.2.4...v8.3.0)
+
+> 25 January 2023
+
+- Don't error on removing options that are in `selected` but not in `options` array [`#204`](https://github.com/janosh/svelte-multiselect/pull/204)
+- Add class 'remove' to buttons that remove selected options [`#202`](https://github.com/janosh/svelte-multiselect/pull/202)
+- Add prop allowEmpty: boolean = false [`#198`](https://github.com/janosh/svelte-multiselect/pull/198)
+- Support `immutable` Svelte compiler option [`#197`](https://github.com/janosh/svelte-multiselect/pull/197)
+- group demo routes [`e813e48`](https://github.com/janosh/svelte-multiselect/commit/e813e480716f29ab4bdd53f90afe56485507fb1c)
+- breaking: rename addOptionMsg to createOptionMsg [`f24e025`](https://github.com/janosh/svelte-multiselect/commit/f24e0256fcdc32c90ed798edbb663a6be18ebe00)
+
 #### [v8.2.4](https://github.com/janosh/svelte-multiselect/compare/v8.2.3...v8.2.4)
 
 > 8 January 2023
@@ -17,8 +30,6 @@ All notable changes to this project will be documented in this file. Dates are d
 - add vite alias $root to clean up package.json, readme|contributing|changelog.md imports [`c19cbe4`](https://github.com/janosh/svelte-multiselect/commit/c19cbe4e38413bbcd04d4e35eddcd4cd88c67662)
 - mv src/components src/site [`3683ed7`](https://github.com/janosh/svelte-multiselect/commit/3683ed70f19498070ffe9e95c0261c688fb2f7c7)
 
-<!-- auto-changelog-above -->
-
 #### [v8.2.3](https://github.com/janosh/svelte-multiselect/compare/v8.2.2...v8.2.3)
 
 > 28 December 2022

package/index.d.ts

@@ -1,4 +1,6 @@
-export { default } from './MultiSelect.svelte';
+export { default as CircleSpinner } from './CircleSpinner.svelte';
+export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as Wiggle } from './Wiggle.svelte';
 export type Option = string | number | ObjectOption;
 export type ObjectOption = {
     label: string | number;

package/index.js

@@ -1,4 +1,6 @@
-export { default } from './MultiSelect.svelte';
+export { default as CircleSpinner } from './CircleSpinner.svelte';
+export { default, default as MultiSelect } from './MultiSelect.svelte';
+export { default as Wiggle } from './Wiggle.svelte';
 // Firefox lacks support for scrollIntoViewIfNeeded, see
 // https://github.com/janosh/svelte-multiselect/issues/87
 // this polyfill was copied from

package/package.json

@@ -5,42 +5,41 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.2.4",
+  "version": "8.3.0",
   "type": "module",
   "svelte": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",
     "@playwright/test": "^1.29.2",
-    "@sveltejs/adapter-static": "1.0.1",
-    "@sveltejs/kit": "1.0.7",
+    "@sveltejs/adapter-static": "^1.0.5",
+    "@sveltejs/kit": "^1.2.2",
     "@sveltejs/package": "1.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "@vitest/coverage-c8": "^0.26.3",
-    "eslint": "^8.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
+    "@vitest/coverage-c8": "^0.27.2",
+    "eslint": "^8.32.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
     "jsdom": "^21.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte": "^3.55.0",
-    "svelte-check": "^3.0.1",
-    "svelte-github-corner": "^0.2.0",
-    "svelte-preprocess": "^5.0.0",
-    "svelte-toc": "^0.5.1",
-    "svelte-zoo": "^0.1.4",
+    "svelte": "^3.55.1",
+    "svelte-check": "^3.0.2",
+    "svelte-preprocess": "^5.0.1",
+    "svelte-toc": "^0.5.2",
+    "svelte-zoo": "^0.2.3",
     "svelte2tsx": "^0.6.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
     "vite": "^4.0.4",
-    "vitest": "^0.26.3"
+    "vitest": "^0.27.2"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -42,11 +42,10 @@
 
 ## 📜   Breaking changes
 
-- **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. [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**&nbsp; `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
 
 ## 🔨 &thinsp; Installation
 
@@ -91,11 +90,17 @@ Full list of props/bindable variables for this component. The `Option` type you
    Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.
 
 1. ```ts
-   addOptionMsg: string = `Create this option...`
+   createOptionMsg: string = `Create this option...`
    ```
 
    Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.
 
+1. ```ts
+   allowEmpty: boolean = false
+   ```
+
+   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
    ```