svelte-multiselect 8.2.3 → 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
@@ -14,6 +14,7 @@ export let defaultDisabledTitle = `This option is disabled`;
 export let disabled = false;
 export let disabledInputTitle = `This input is disabled`;
 // case-insensitive equality comparison after string coercion (looking only at the `label` key of object options)
+// prettier-ignore
 export let duplicateFunc = (op1, op2) => `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase();
 export let duplicateOptionMsg = `This option is already selected`;
 export let duplicates = false; // whether to allow duplicate options
@@ -53,7 +54,7 @@ export let required = false;
 export let resetFilterOnAdd = true;
 export let searchText = ``;
 export let selected = options
-    ?.filter((op) => op?.preselected)
+    ?.filter((op) => op instanceof Object && op?.preselected)
     .slice(0, maxSelect ?? undefined) ?? [];
 export let sortSelected = false;
 export let selectedOptionsDraggable = !sortSelected;
@@ -61,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}`);
 }
@@ -89,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
@@ -123,7 +132,7 @@ function add(label, event) {
             // 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
-                option = { label: searchText, value: searchText };
+                option = { label: searchText };
             }
             else {
                 if ([`number`, `undefined`].includes(typeof options[0]) &&
@@ -147,7 +156,7 @@ function add(label, event) {
             return;
         }
         if (maxSelect === 1) {
-            // for maxselect = 1 we always replace current option with new one
+            // for maxSelect = 1 we always replace current option with new one
             selected = [option];
         }
         else {
@@ -179,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 correspondidng option object
+        // 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
@@ -212,7 +222,7 @@ function close_dropdown(event) {
 }
 // handle all keyboard events this component receives
 async function handle_keydown(event) {
-    // on escape or tab out of input: dismiss options dropdown and reset search text
+    // on escape or tab out of input: close options dropdown and reset search text
     if (event.key === `Escape` || event.key === `Tab`) {
         close_dropdown(event);
         searchText = ``;
@@ -297,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);
@@ -375,9 +385,10 @@ const dragstart = (idx) => (event) => {
         on:dragstart={dragstart(idx)}
         on:drop|preventDefault={drop(idx)}
         on:dragenter={() => (drag_idx = idx)}
+        on:dragover|preventDefault
         class:active={drag_idx === idx}
-        ondragover="return false"
       >
+        <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
           {#if parseLabelsAsHtml}
             {@html get_label(option)}
@@ -391,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" />
@@ -452,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)}
@@ -465,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 {
@@ -511,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)}
@@ -521,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

@@ -1,18 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-import type { MultiSelectEvents, Option } from './';
-declare const __propDef: {
-    props: {
+import type { MultiSelectEvents, Option as GenericOption } from './';
+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;
         defaultDisabledTitle?: string | undefined;
         disabled?: boolean | undefined;
         disabledInputTitle?: string | undefined;
-        duplicateFunc?: ((op1: Option, op2: Option) => boolean) | undefined;
+        duplicateFunc?: ((op1: GenericOption, op2: GenericOption) => boolean) | undefined;
         duplicateOptionMsg?: string | undefined;
         duplicates?: boolean | undefined;
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
@@ -53,7 +54,8 @@ declare const __propDef: {
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
     };
-    slots: {
+    events(): MultiSelectEvents;
+    slots(): {
         'expand-icon': {
             open: boolean;
         };
@@ -69,11 +71,10 @@ declare const __propDef: {
             idx: any;
         };
     };
-    events: MultiSelectEvents;
-};
-export type MultiSelectProps = typeof __propDef.props;
-export type MultiSelectEvents = typeof __propDef.events;
-export type MultiSelectSlots = typeof __propDef.slots;
-export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
+}
+export type MultiSelectProps<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['props']>;
+export type MultiSelectEvents<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['events']>;
+export type MultiSelectSlots<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['slots']>;
+export default class MultiSelect<Option extends GenericOption> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
 }
 export {};

package/changelog.md

@@ -4,6 +4,32 @@ All notable changes to this project will be documented in this file. Dates are d
 
 <!-- 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
+
+- Coverage badges [`#190`](https://github.com/janosh/svelte-multiselect/pull/190)
+- feat: add type inference for the `options` prop [`#189`](https://github.com/janosh/svelte-multiselect/pull/189)
+- feat: add type inference for the `options` prop (#189) [`#78`](https://github.com/janosh/svelte-multiselect/issues/78)
+- merge ExampleCode.svelte with CollapsibleCode.svelte [`56ff99b`](https://github.com/janosh/svelte-multiselect/commit/56ff99bcc378c5582b303aa1c03302cdbceb3076)
+- pnpm add -D svelte-zoo to outsource some site components and icons [`6ee64f3`](https://github.com/janosh/svelte-multiselect/commit/6ee64f376dfe166b993c94a36d376d1dce5f44f5)
+- restore reactive searchText block in loading example [`846da66`](https://github.com/janosh/svelte-multiselect/commit/846da66af058ac1f448c8aaa513d12fb4c2ac4cc)
+- fix bunch of TS errors, add playwright test for dragging selected options to reorder [`a483217`](https://github.com/janosh/svelte-multiselect/commit/a4832176f6fceb5346af2d4cd8ecc01a5626ab43)
+- add update-coverage package.json script [`1094f08`](https://github.com/janosh/svelte-multiselect/commit/1094f08cec9d6fd2f54b058af05022ab35ec4ac9)
+- 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)
+
 #### [v8.2.3](https://github.com/janosh/svelte-multiselect/compare/v8.2.2...v8.2.3)
 
 > 28 December 2022
@@ -116,7 +142,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Fix single select with arrow and enter keys [`#128`](https://github.com/janosh/svelte-multiselect/pull/128)
 - Add SCSS preprocessing [`#126`](https://github.com/janosh/svelte-multiselect/pull/126)
-- [pre-commit.ci] pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
+- pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
 - more unit tests [`1adbc99`](https://github.com/janosh/svelte-multiselect/commit/1adbc994b746b39c4ad081dc2573bf37f27c96c0)
 - test required but empty MultiSelect fails form validity check (i.e. causes unsubmittable form) and filled one passes it [`fd8b377`](https://github.com/janosh/svelte-multiselect/commit/fd8b37782cd508aacfc8125c6647cefe56144b80)
 
@@ -186,7 +212,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - Convert E2E tests from`vitest` to `@playwright/test` [`#95`](https://github.com/janosh/svelte-multiselect/pull/95)
 - Allow empty Multiselect [`#94`](https://github.com/janosh/svelte-multiselect/pull/94)
 - Add new slot `'remove-icon'` [`#93`](https://github.com/janosh/svelte-multiselect/pull/93)
-- [pre-commit.ci] pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
+- pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
 
 #### [v5.0.3](https://github.com/janosh/svelte-multiselect/compare/v5.0.2...v5.0.3)
 
@@ -224,7 +250,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Fix backspace deleting multiple selected options if identical labels [`#72`](https://github.com/janosh/svelte-multiselect/pull/72)
 - Several fixes for `allowUserOptions` [`#69`](https://github.com/janosh/svelte-multiselect/pull/69)
-- [pre-commit.ci] pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
+- pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
 
 #### [v4.0.5](https://github.com/janosh/svelte-multiselect/compare/v4.0.4...v4.0.5)
 
@@ -347,7 +373,7 @@ All notable changes to this project will be documented in this file. Dates are d
 - favorite web framework show Confetti.svelte on:add Svelte [`8d109ee`](https://github.com/janosh/svelte-multiselect/commit/8d109ee5c7755e447fcb72419f3b7ecc19cac0b2)
 - bump svelte@3.45.0 to silence warning: MultiSelect has unused export property 'defaultDisabledTitle' (sveltejs/svelte#6964) [`f80a7a6`](https://github.com/janosh/svelte-multiselect/commit/f80a7a622310005407585298f2611597c0941990)
 - update readme + svelte-toc@0.2.0 [`40013ba`](https://github.com/janosh/svelte-multiselect/commit/40013badd61dd0fcade7ab295dabd26693e3cc51)
-- [pre-commit.ci] pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
+- pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
 - iOS Safari prevent zoom into page on focus MultiSelect input [`44f17be`](https://github.com/janosh/svelte-multiselect/commit/44f17be53378e38f4a8748b815737d25cdebc85f)
 
 ### [v3.0.0](https://github.com/janosh/svelte-multiselect/compare/v2.0.0...v3.0.0)
@@ -398,7 +424,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - Add new prop disabledOptions [`#9`](https://github.com/janosh/svelte-multiselect/pull/9)
 - add pre-commit hooks [`dfb6399`](https://github.com/janosh/svelte-multiselect/commit/dfb6399a77b705f8e5979eb887d345a5f52ff929)
-- [pre-commit.ci] pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
+- pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
 
 #### [v1.1.11](https://github.com/janosh/svelte-multiselect/compare/v1.1.10...v1.1.11)
 
@@ -490,7 +516,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 - remove hidden input for storing currently selected options as JSON [`802a219`](https://github.com/janosh/svelte-multiselect/commit/802a2195a28986c219298d7d9e7ca47f2aaf7db6)
 
-#### v1.0.0
+### v1.0.0
 
 > 7 May 2021
 

package/icons/ChevronExpand.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  ChevronExpandEvents */
 /** @typedef {typeof __propDef.slots}  ChevronExpandSlots */
 export default class ChevronExpand extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type ChevronExpandSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/icons/Cross.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  CrossEvents */
 /** @typedef {typeof __propDef.slots}  CrossSlots */
 export default class Cross extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type CrossSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/icons/Disabled.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  DisabledEvents */
 /** @typedef {typeof __propDef.slots}  DisabledSlots */
 export default class Disabled extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type DisabledSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/icons/Octocat.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  OctocatEvents */
 /** @typedef {typeof __propDef.slots}  OctocatSlots */
 export default class Octocat extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type OctocatSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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;
@@ -47,3 +49,4 @@ export type MultiSelectEvents = {
     touchmove: TouchEvent;
     touchstart: TouchEvent;
 };
+export declare function scroll_into_view_if_needed_polyfill(centerIfNeeded?: boolean): IntersectionObserver;

package/index.js

@@ -1,23 +1,29 @@
-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
 // https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
+// exported for testing
+export function scroll_into_view_if_needed_polyfill(centerIfNeeded = true) {
+    const el = this;
+    const observer = new IntersectionObserver(function ([entry]) {
+        const ratio = entry.intersectionRatio;
+        if (ratio < 1) {
+            const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
+            el.scrollIntoView({
+                block: place,
+                inline: place,
+            });
+        }
+        this.disconnect();
+    });
+    observer.observe(this);
+    return observer; // return for testing
+}
 if (typeof Element !== `undefined` &&
     !Element.prototype?.scrollIntoViewIfNeeded &&
     typeof IntersectionObserver !== `undefined`) {
-    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
-        const el = this;
-        new IntersectionObserver(function ([entry]) {
-            const ratio = entry.intersectionRatio;
-            if (ratio < 1) {
-                const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-                el.scrollIntoView({
-                    block: place,
-                    inline: place,
-                });
-            }
-            this.disconnect();
-        }).observe(this);
-    };
+    Element.prototype.scrollIntoViewIfNeeded = scroll_into_view_if_needed_polyfill;
 }

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.3",
+  "version": "8.3.0",
   "type": "module",
   "svelte": "index.js",
-  "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",
-    "@playwright/test": "^1.29.0",
-    "@sveltejs/adapter-static": "1.0.0",
-    "@sveltejs/kit": "1.0.1",
-    "@sveltejs/package": "1.0.1",
+    "@playwright/test": "^1.29.2",
+    "@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.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "@vitest/coverage-c8": "^0.25.8",
-    "eslint": "^8.30.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.1.0",
+    "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
-    "jsdom": "^20.0.3",
+    "jsdom": "^21.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.1",
+    "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": "^2.10.2",
-    "svelte-github-corner": "^0.1.0",
-    "svelte-preprocess": "^5.0.0",
-    "svelte-toc": "^0.5.0",
-    "svelte2tsx": "^0.5.22",
+    "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.1",
-    "vitest": "^0.25.8"
+    "vite": "^4.0.4",
+    "vitest": "^0.27.2"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -21,7 +21,7 @@
 
 <slot name="examples" />
 
-## 💡 &nbsp; Features
+## 💡 &thinsp; Features
 
 - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`.
 - **Keyboard friendly** for mouse-less form completion
@@ -34,23 +34,28 @@
 
 <slot name="nav" />
 
-## 📜 &nbsp; Breaking changes
+## 🧪 &thinsp; Coverage
+
+| Statements                                                                                 | Branches                                                                             | Lines                                                                            |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| ![Statements](https://img.shields.io/badge/statements-92.95%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-92.95%25-brightgreen.svg?style=flat) |
+
+## 📜 &thinsp; 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).
 
-## 🔨 &nbsp; Installation
+## 🔨 &thinsp; Installation
 
 ```sh
-npm install -D svelte-multiselect
-pnpm add -D svelte-multiselect
-yarn add -D svelte-multiselect
+npm install --dev svelte-multiselect
+pnpm add --dev svelte-multiselect
+yarn add --dev svelte-multiselect
 ```
 
-## 📙 &nbsp; Usage
+## 📙 &thinsp; Usage
 
 ```svelte
 <script>
@@ -68,7 +73,7 @@ Favorite Frontend Tools?
 <MultiSelect bind:selected options={ui_libs} />
 ```
 
-## 🔣 &nbsp; Props
+## 🔣 &thinsp; Props
 
 Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
 
@@ -85,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
    ```
@@ -135,7 +146,7 @@ Full list of props/bindable variables for this component. The `Option` type you
 
 <!-- prettier-ignore -->
 1. ```ts
-   duplicateFunc: (op1: Option, op2: Option) => boolean = (op1, op2) =>
+   duplicateFunc: (op1: GenericOption, op2: GenericOption) => boolean = (op1, op2) =>
     `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
    ```
 
@@ -344,7 +355,7 @@ 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: `value` supports 1-way binding only, meaning `bind:value` will update `value` when internal component state changes but changing `value` externally will not update internal component state. This is because `value` is already reactive to `selected` and making `selected` reactive to `value` would be cyclic. Suggestions for better solutions that solve both [#86](https://github.com/janosh/svelte-multiselect/issues/86) and [#136](https://github.com/janosh/svelte-multiselect/issues/136) welcome!
 
-## 🎰 &nbsp; Slots
+## 🎰 &thinsp; Slots
 
 `MultiSelect.svelte` accepts the following named slots:
 
@@ -376,7 +387,7 @@ Example:
 </MultiSelect>
 ```
 
-## 🎬 &nbsp; Events
+## 🎬 &thinsp; Events
 
 `MultiSelect.svelte` dispatches the following events:
 
@@ -439,25 +450,36 @@ The above list of events are [Svelte `dispatch` events](https://svelte.dev/tutor
 />
 ```
 
-## 🦺 &nbsp; TypeScript
+## 🦺 &thinsp; TypeScript
 
-TypeScript users can import the types used for internal type safety:
+The type of `options` is inferred automatically from the data you pass. E.g.
 
-```svelte
-<script lang="ts">
-  import MultiSelect from 'svelte-multiselect'
-  import type { Option, ObjectOption } from 'svelte-multiselect'
-
-  const myOptions: ObjectOption[] = [
-    { label: 'foo', value: 42 },
-    { label: 'bar', value: 69 },
-  ]
-  // an Option can be string | number | ObjectOption
-  const myNumbers: Option[] = [42, 69]
-</script>
+```ts
+const options = [
+   { label: `foo`, value: 42 }
+   { label: `bar`, value: 69 }
+]
+// type Option = { label: string, value: number }
+const options = [`foo`, `bar`]
+// type Option = string
+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).
+
+You can also import [the types this component uses](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for downstream applications:
+
+```ts
+import {
+  Option,
+  ObjectOption,
+  DispatchEvents,
+  MultiSelectEvents,
+} from 'svelte-multiselect'
 ```
 
-## ✨ &nbsp; Styling
+## ✨ &thinsp; Styling
 
 There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component:
 
@@ -608,10 +630,10 @@ Odd as it may seem, you get the most fine-grained control over the styling of ev
 }
 ```
 
-## 🆕 &nbsp; Changelog
+## 🆕 &thinsp; Changelog
 
 [View the changelog](changelog.md).
 
-## 🙏 &nbsp; Contributing
+## 🙏 &thinsp; Contributing
 
 Here are some steps to [get you started](contributing.md) if you'd like to contribute to this project!