svelte-multiselect 9.0.0 → 10.1.0

package/dist/CircleSpinner.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         color?: string | undefined;
@@ -13,6 +13,6 @@ declare const __propDef: {
 export type CircleSpinnerProps = typeof __propDef.props;
 export type CircleSpinnerEvents = typeof __propDef.events;
 export type CircleSpinnerSlots = typeof __propDef.slots;
-export default class CircleSpinner extends SvelteComponentTyped<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
+export default class CircleSpinner extends SvelteComponent<CircleSpinnerProps, CircleSpinnerEvents, CircleSpinnerSlots> {
 }
 export {};

package/dist/CmdPalette.svelte

@@ -1,6 +1,4 @@
-<script>/* eslint-disable no-undef */ // TODO: remove when fixed
-// https://github.com/sveltejs/eslint-plugin-svelte3/issues/201
-import { tick } from 'svelte';
+<script>import { tick } from 'svelte';
 import { fade } from 'svelte/transition';
 import Select from './MultiSelect.svelte';
 export let actions;

package/dist/CmdPalette.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -26,6 +26,6 @@ declare const __propDef: {
 export type CmdPaletteProps = typeof __propDef.props;
 export type CmdPaletteEvents = typeof __propDef.events;
 export type CmdPaletteSlots = typeof __propDef.slots;
-export default class CmdPalette extends SvelteComponentTyped<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
+export default class CmdPalette extends SvelteComponent<CmdPaletteProps, CmdPaletteEvents, CmdPaletteSlots> {
 }
 export {};

package/dist/MultiSelect.svelte

@@ -3,6 +3,7 @@ import { flip } from 'svelte/animate';
 import CircleSpinner from './CircleSpinner.svelte';
 import Wiggle from './Wiggle.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
+import { get_label, get_style } from './utils';
 export let activeIndex = null;
 export let activeOption = null;
 export let createOptionMsg = `Create this option...`;
@@ -14,15 +15,16 @@ export let breakpoint = 800; // any screen with more horizontal pixels is consid
 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
-export let filterFunc = (op, searchText) => {
+// takes two options and returns true if they are equal
+// case-insensitive equality comparison after string coercion and looks only at the `label` key of object options by default
+export let key = (opt) => `${get_label(opt)}`.toLowerCase();
+export let filterFunc = (opt, searchText) => {
     if (!searchText)
         return true;
-    return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase());
+    return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
 };
 export let focusInputOnSelect = `desktop`;
 export let form_input = null;
@@ -37,6 +39,7 @@ export let liOptionClass = ``;
 export let liSelectedClass = ``;
 export let loading = false;
 export let matchingOptions = [];
+export let maxOptions = undefined;
 export let maxSelect = null; // null means there is no upper limit for selected.length
 export let maxSelectMsg = (current, max) => (max > 1 ? `${current}/${max}` : ``);
 export let maxSelectMsgClass = ``;
@@ -56,27 +59,27 @@ export let required = false;
 export let resetFilterOnAdd = true;
 export let searchText = ``;
 export let selected = options
-    ?.filter((op) => op instanceof Object && op?.preselected)
-    .slice(0, maxSelect ?? undefined) ?? [];
+    ?.filter((opt) => opt instanceof Object && opt?.preselected)
+    .slice(0, maxSelect ?? undefined) ?? []; // don't allow more than maxSelect preselected options
 export let sortSelected = false;
 export let selectedOptionsDraggable = !sortSelected;
 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
-export 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;
+const selected_to_value = (selected) => {
+    value = maxSelect === 1 ? selected[0] ?? null : selected;
+};
+const value_to_selected = (value) => {
+    if (maxSelect === 1)
+        selected = value ? [value] : [];
+    else
+        selected = value ?? [];
 };
 // 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;
+$: selected_to_value(selected);
+$: value_to_selected(value);
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
 if (!(options?.length > 0)) {
     if (allowUserOptions || loading || disabled || allowEmpty) {
@@ -108,12 +111,17 @@ if (allowUserOptions && !createOptionMsg && createOptionMsg !== null) {
     console.error(`MultiSelect has allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
         `This prevents the "Add option" <span> from showing up, resulting in a confusing user experience.`);
 }
+if (maxOptions &&
+    (typeof maxOptions != `number` || maxOptions < 0 || maxOptions % 1 != 0)) {
+    console.error(`MultiSelect's maxOptions must be undefined or a positive integer, got ${maxOptions}`);
+}
 const dispatch = createEventDispatcher();
 let 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.includes(op) // remove already selected options from dropdown list
-);
+$: matchingOptions = options.filter((opt) => filterFunc(opt, searchText) &&
+    // remove already selected options from dropdown list unless duplicate selections are allowed
+    (!selected.map(key).includes(key(opt)) || duplicates));
 // raise if matchingOptions[activeIndex] does not yield a value
 if (activeIndex !== null && !matchingOptions[activeIndex]) {
     throw `Run time error, activeIndex=${activeIndex} is out of bounds, matchingOptions.length=${matchingOptions.length}`;
@@ -127,7 +135,7 @@ function add(option, event) {
     if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
         option = Number(option); // convert to number if possible
     }
-    const is_duplicate = selected.some((op) => duplicateFunc(op, option));
+    const is_duplicate = selected.map(key).includes(key(option));
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
         (duplicates || !is_duplicate)) {
         if (!options.includes(option) && // first check if we find option in the options list
@@ -194,7 +202,7 @@ function add(option, event) {
 function remove(to_remove) {
     if (selected.length === 0)
         return;
-    const idx = selected.findIndex((op) => JSON.stringify(op) === JSON.stringify(to_remove));
+    const idx = selected.findIndex((opt) => key(opt) === key(to_remove));
     let [option] = selected.splice(idx, 1); // remove option from selected list
     if (option === undefined && allowUserOptions) {
         // if option with label could not be found but allowUserOptions is truthy,
@@ -408,6 +416,7 @@ function highlight_matching_options(event) {
   role="searchbox"
   tabindex="-1"
 >
+  <!-- form control input invisible to the user, only purpose is to abort form submission if this component fails data validation -->
   <!-- bind:value={selected} prevents form submission if required prop is true and no options are selected -->
   <input
     {name}
@@ -435,7 +444,7 @@ function highlight_matching_options(event) {
     <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt; cursor: pointer;" />
   </slot>
   <ul class="selected {ulSelectedClass}" aria-label="selected options">
-    {#each selected as option, idx (option)}
+    {#each selected as option, idx (duplicates ? [key(option), idx] : key(option))}
       <li
         class={liSelectedClass}
         role="option"
@@ -447,6 +456,7 @@ function highlight_matching_options(event) {
         on:dragenter={() => (drag_idx = idx)}
         on:dragover|preventDefault
         class:active={drag_idx === idx}
+        style={get_style(option, `selected`)}
       >
         <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
@@ -504,6 +514,16 @@ function highlight_matching_options(event) {
       on:touchstart
     />
     <!-- the above on:* lines forward potentially useful DOM events -->
+    <slot
+      name="after-input"
+      {selected}
+      {disabled}
+      {invalid}
+      {id}
+      {placeholder}
+      {open}
+      {required}
+    />
   </ul>
   {#if loading}
     <slot name="spinner">
@@ -537,7 +557,7 @@ function highlight_matching_options(event) {
     {/if}
   {/if}
 
-  <!-- only render options dropdown if options or searchText is not empty needed to avoid briefly flashing empty dropdown -->
+  <!-- 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}
@@ -548,7 +568,7 @@ function highlight_matching_options(event) {
       aria-disabled={disabled ? `true` : null}
       bind:this={ul_options}
     >
-      {#each matchingOptions as option, idx}
+      {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as option, idx}
         {@const {
           label,
           disabled = null,
@@ -579,6 +599,7 @@ function highlight_matching_options(event) {
           on:blur={() => (activeIndex = null)}
           role="option"
           aria-selected="false"
+          style={get_style(option, `option`)}
         >
           <slot name="option" {option} {idx}>
             <slot {option} {idx}>
@@ -590,16 +611,25 @@ function highlight_matching_options(event) {
             </slot>
           </slot>
         </li>
-      {:else}
-        {@const search_is_duplicate = selected.some((option) =>
-          duplicateFunc(option, searchText)
-        )}
-        {@const msg =
-          !duplicates && search_is_duplicate ? duplicateOptionMsg : createOptionMsg}
-        {#if allowUserOptions && searchText && msg}
+      {/each}
+      {#if searchText}
+        {@const text_input_is_duplicate = selected.map(get_label).includes(searchText)}
+        {@const is_dupe = !duplicates && text_input_is_duplicate && `dupe`}
+        {@const can_create = allowUserOptions && createOptionMsg && `create`}
+        {@const no_match =
+          matchingOptions?.length == 0 && noMatchingOptionsMsg && `no-match`}
+        {@const msgType = is_dupe || can_create || no_match}
+        {#if msgType}
+          {@const msg = {
+            dupe: duplicateOptionMsg,
+            create: createOptionMsg,
+            'no-match': noMatchingOptionsMsg,
+          }[msgType]}
           <li
             on:mousedown|stopPropagation
-            on:mouseup|stopPropagation={(event) => add(searchText, event)}
+            on:mouseup|stopPropagation={(event) => {
+              if (allowUserOptions) add(searchText, event)
+            }}
             title={createOptionMsg}
             class:active={option_msg_is_active}
             on:mouseover={() => (option_msg_is_active = true)}
@@ -609,15 +639,18 @@ function highlight_matching_options(event) {
             role="option"
             aria-selected="false"
             class="user-msg"
+            style:cursor={{
+              dupe: `not-allowed`,
+              create: `pointer`,
+              'no-match': `default`,
+            }[msgType]}
           >
-            {msg}
+            <slot name="user-msg" {searchText} {msgType} {msg}>
+              {msg}
+            </slot>
           </li>
-        {:else if noMatchingOptionsMsg}
-          <!-- use span to not have cursor: pointer -->
-          <span class="user-msg">{noMatchingOptionsMsg}</span>
         {/if}
-        <!-- Show nothing if all messages are empty -->
-      {/each}
+      {/if}
     </ul>
   {/if}
 </div>

package/dist/MultiSelect.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { MultiSelectEvents, Option as T } from './types';
 declare class __sveltets_Render<Option extends T> {
     props(): {
@@ -13,10 +13,10 @@ declare class __sveltets_Render<Option extends T> {
         defaultDisabledTitle?: string | undefined;
         disabled?: boolean | undefined;
         disabledInputTitle?: string | undefined;
-        duplicateFunc?: ((op1: T, op2: T) => boolean) | undefined;
         duplicateOptionMsg?: string | undefined;
         duplicates?: boolean | undefined;
-        filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
+        key?: ((opt: T) => unknown) | undefined;
+        filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
         focusInputOnSelect?: boolean | "desktop" | undefined;
         form_input?: HTMLInputElement | null | undefined;
         highlightMatches?: boolean | undefined;
@@ -30,6 +30,7 @@ declare class __sveltets_Render<Option extends T> {
         liSelectedClass?: string | undefined;
         loading?: boolean | undefined;
         matchingOptions?: Option[] | undefined;
+        maxOptions?: number | undefined;
         maxSelect?: number | null | undefined;
         maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
         maxSelectMsgClass?: string | undefined;
@@ -54,7 +55,6 @@ declare class __sveltets_Render<Option extends T> {
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         value?: Option | Option[] | null | undefined;
-        get_label?: ((op: T) => string | number) | undefined;
     };
     events(): MultiSelectEvents;
     slots(): {
@@ -70,18 +70,31 @@ declare class __sveltets_Render<Option extends T> {
             idx: any;
         };
         'remove-icon': {};
+        'after-input': {
+            selected: Option[];
+            disabled: boolean;
+            invalid: boolean;
+            id: string | null;
+            placeholder: string | null;
+            open: boolean;
+            required: number | boolean;
+        };
         spinner: {};
         'disabled-icon': {};
         option: {
             option: Option;
             idx: any;
         };
+        'user-msg': {
+            searchText: string;
+            msgType: any;
+            msg: any;
+        };
     };
 }
 export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
 export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
 export type MultiSelectSlots<Option extends T> = ReturnType<__sveltets_Render<Option>['slots']>;
-export default class MultiSelect<Option extends T> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
-    get get_label(): (op: T) => string | number;
+export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
 }
 export {};

package/dist/Wiggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         wiggle?: boolean | undefined;
@@ -20,6 +20,6 @@ declare const __propDef: {
 export type WiggleProps = typeof __propDef.props;
 export type WiggleEvents = typeof __propDef.events;
 export type WiggleSlots = typeof __propDef.slots;
-export default class Wiggle extends SvelteComponentTyped<WiggleProps, WiggleEvents, WiggleSlots> {
+export default class Wiggle extends SvelteComponent<WiggleProps, WiggleEvents, WiggleSlots> {
 }
 export {};

package/dist/icons/ChevronExpand.svelte.d.ts

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

package/dist/icons/Cross.svelte.d.ts

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

package/dist/icons/Disabled.svelte.d.ts

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

package/dist/icons/Octocat.svelte.d.ts

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

package/dist/types.d.ts

@@ -1,4 +1,8 @@
 export type Option = string | number | ObjectOption;
+export type OptionStyle = string | {
+    option: string;
+    selected: string;
+};
 export type ObjectOption = {
     label: string | number;
     value?: unknown;
@@ -7,6 +11,7 @@ export type ObjectOption = {
     preselected?: boolean;
     disabledTitle?: string;
     selectedTitle?: string;
+    style?: OptionStyle;
     [key: string]: unknown;
 };
 export type DispatchEvents<T = Option> = {

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Option, OptionStyle } from './types';
+export declare const get_label: (opt: Option) => string | number;
+export declare function get_style(option: {
+    style?: OptionStyle;
+    [key: string]: unknown;
+} | string | number, key?: 'selected' | 'option' | null): string | null | undefined;

package/dist/utils.js

@@ -0,0 +1,30 @@
+// get the label key from an option object or the option itself if it's a string or number
+export const get_label = (opt) => {
+    if (opt instanceof Object) {
+        if (opt.label === undefined) {
+            console.error(`MultiSelect option ${JSON.stringify(opt)} is an object but has no label key`);
+        }
+        return opt.label;
+    }
+    return `${opt}`;
+};
+export function get_style(option, key = null) {
+    if (!option?.style)
+        return null;
+    if (![`selected`, `option`, null].includes(key)) {
+        console.error(`MultiSelect: Invalid key=${key} for get_style`);
+        return;
+    }
+    if (typeof option == `object` && option.style) {
+        if (typeof option.style == `string`) {
+            return option.style;
+        }
+        if (typeof option.style == `object`) {
+            if (key && key in option.style)
+                return option.style[key];
+            else {
+                console.error(`Invalid style object for option=${JSON.stringify(option)}`);
+            }
+        }
+    }
+}

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "9.0.0",
+  "version": "10.1.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": "^4.0.0-next.0"
+    "svelte": "^4.0.5"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.3",
-    "@playwright/test": "^1.34.3",
+    "@iconify/svelte": "^3.1.4",
+    "@playwright/test": "^1.36.1",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.19.0",
-    "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "1.0.0-next.29",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
-    "@vitest/coverage-c8": "^0.31.1",
-    "eslint": "^8.41.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "@sveltejs/kit": "^1.22.3",
+    "@sveltejs/package": "2.2.0",
+    "@sveltejs/vite-plugin-svelte": "2.4.2",
+    "@typescript-eslint/eslint-plugin": "^6.1.0",
+    "@typescript-eslint/parser": "^6.1.0",
+    "@vitest/coverage-v8": "^0.33.0",
+    "eslint": "^8.45.0",
+    "eslint-plugin-svelte": "^2.32.2",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.8.0",
-    "jsdom": "^22.0.0",
-    "mdsvex": "^0.10.6",
+    "jsdom": "^22.1.0",
+    "mdsvex": "^0.11.0",
     "mdsvexamples": "^0.3.3",
     "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.0",
+    "prettier-plugin-svelte": "^2.10.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.2",
-    "svelte-preprocess": "^5.0.3",
+    "svelte-check": "^3.4.6",
+    "svelte-preprocess": "^5.0.4",
     "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.6",
-    "svelte2tsx": "^0.6.15",
-    "typescript": "5.0.4",
-    "vite": "^4.3.9",
-    "vitest": "^0.31.1"
+    "svelte-zoo": "^0.4.9",
+    "svelte2tsx": "^0.6.19",
+    "typescript": "5.1.6",
+    "vite": "^4.4.4",
+    "vitest": "^0.33.0"
   },
   "keywords": [
     "svelte",
@@ -77,6 +77,7 @@
       "default": "./dist/index.js"
     }
   },
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ]

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/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/packages/svelte/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)
 
@@ -59,6 +59,15 @@
   </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
@@ -156,30 +165,29 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    Tooltip text to display on hover when the component is in `disabled` state.
 
-<!-- prettier-ignore -->
 1. ```ts
-   duplicateFunc: (op1: T, op2: T) => boolean = (op1, op2) =>
-    `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
+   duplicates: boolean = false
    ```
 
-   This option determines when two options are considered duplicates. Defaults to case-insensitive equality comparison after string coercion (looking only at the `label` key of object options). I.e. the default `duplicateFunc` considers `'Foo' == 'foo'`, `'42' == 42` and ``{ label: `Foo`, value: 0 } == { label: `foo`, value: 42 }``.
+   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 `key` to customize when a pair of options is considered equal.
 
 1. ```ts
-   duplicates: boolean = false
+   duplicateOptionMsg: string = `This option is already selected`
    ```
 
-   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.
+   Text to display to users when `allowUserOptions` is truthy and they try to create a new option that's already selected.
 
+<!-- prettier-ignore -->
 1. ```ts
-   duplicateOptionMsg: string = `This option is already selected`
+   key: (opt: T) => unknown = (opt) => `${get_label(opt)}`.toLowerCase()
    ```
 
-   Text to display to users when `allowUserOptions` is truthy and they try to create a new option that's already selected.
+   A function that maps options to a value by which equality of options is determined. Defaults to mapping options to their lower-cased label. E.g. by default ``const opt1 = { label: `foo`, id: 1 }`` and ``const opt2 = { label: `foo`, id: 2 }`` are considered equal. If you want to consider them different, you can set `key` to e.g. `key={(opt) => opt.id}` or ``key={(opt) => `${opt.label}-${opt.id}}`` or even `key={JSON.stringify}`.
 
 1. ```ts
-   filterFunc = (op: Option, searchText: string): boolean => {
+   filterFunc = (opt: Option, searchText: string): boolean => {
      if (!searchText) return true
-     return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase())
+     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase())
    }
    ```
 
@@ -219,7 +227,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    inputmode: string | null = null
    ```
 
-   The `inputmode` attribute hints at the type of data the user may enter. Values like `'numeric' | 'tel' | 'email'` allow browsers to display an appropriate virtual keyboard. See [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) for details.
+   The `inputmode` attribute hints at the type of data the user may enter. Values like `'numeric' | 'tel' | 'email'` allow mobile browsers to display an appropriate virtual on-screen keyboard. See [MDN](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode) for details. If you want to suppress the on-screen keyboard to leave full-screen real estate for the dropdown list of options, set `inputmode="none"`.
 
 1. ```ts
    invalid: boolean = false
@@ -239,6 +247,12 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    List of options currently displayed to the user. Same as `options` unless the user entered `searchText` in which case this array contains only those options for which `filterFunc = (op: Option, searchText: string) => boolean` returned `true`.
 
+1. ```ts
+   maxOptions: number | undefined = undefined
+   ```
+
+   Positive integer to limit the number of options displayed in the dropdown. `undefined` and 0 mean no limit.
+
 1. ```ts
    maxSelect: number | null = null
    ```
@@ -371,7 +385,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    value: Option | Option[] | null = null
    ```
 
-   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!
+   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
 
@@ -383,8 +397,15 @@ Full list of props/bindable variables for this component. The `Option` type you
 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.
-
-Example:
+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). `let:props`:
+   - `duplicateOptionMsg: string`: See [props](#🔣-props).
+   - `createOptionMsg: string`: See [props](#🔣-props).
+   - `textInputIsDuplicate: boolean`: Whether user has typed text that matches an already existing option.
+   - `searchText: string`: The text user typed into search input.
+   - `msg: string`: `duplicateOptionMsg` if user input is a duplicate else `createOptionMsg`.
+1. `slot='after-input'`: ForPlaced after the search input. For arbitrary content like icons or temporary messages. Receives props `selected`, `disabled`, `invalid`, `id`, `placeholder`, `open`, `required`.
+
+Example using several slots:
 
 ```svelte
 <MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]} let:idx let:option>