svelte-multiselect 5.0.3 → 5.0.6

package/MultiSelect.svelte

@@ -45,15 +45,24 @@ export let required = false;
 export let autocomplete = `off`;
 export let invalid = false;
 export let sortSelected = false;
-if (!(options?.length > 0))
-    console.error(`MultiSelect received no options`);
-if (parseLabelsAsHtml && allowUserOptions)
-    console.warn(`You shouldn't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
+if (!(options?.length > 0)) {
+    if (allowUserOptions) {
+        options = []; // initializing as array avoids errors when component mounts
+    }
+    else {
+        // only error for empty options if user is not allowed to create custom options
+        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(`maxSelect must be null or positive integer, got ${maxSelect}`);
 }
-if (!Array.isArray(selected))
-    console.error(`selected prop must be an array`);
+if (!Array.isArray(selected)) {
+    console.error(`selected prop must be an array, got ${selected}`);
+}
 const dispatch = createEventDispatcher();
 let activeMsg = false; // controls active state of <li>{addOptionMsg}</li>
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
@@ -86,10 +95,19 @@ function add(label) {
             searchText.length > 0) {
             // user entered text but no options match, so if allowUserOptions=true | 'append', we create
             // a new option from the user-entered text
-            if (typeof options[0] === `string`)
-                option = searchText;
-            else
+            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 };
+            }
+            else {
+                if ([`number`, `undefined`].includes(typeof options[0]) &&
+                    !isNaN(Number(searchText))) {
+                    // create new option as number if it parses to a number and 1st option is also number or missing
+                    option = Number(searchText);
+                }
+                else
+                    option = searchText; // else create custom option as string
+            }
             if (allowUserOptions === `append`)
                 options = [...options, option];
         }
@@ -214,7 +232,10 @@ async function handleKeydown(event) {
             // around start/end of option list. Find a better solution than waiting 10 ms to.
             setTimeout(() => {
                 const li = document.querySelector(`ul.options > li.active`);
-                li?.scrollIntoView();
+                if (li) {
+                    li.parentNode?.scrollIntoView({ block: `center` });
+                    li.scrollIntoViewIfNeeded();
+                }
             }, 10);
         }
     }
@@ -286,7 +307,7 @@ const if_enter_or_space = (handler) => (event) => {
             type="button"
             title="{removeBtnTitle} {get_label(option)}"
           >
-            <CrossIcon width="15px" />
+            <slot name="remove-icon"><CrossIcon width="15px" /></slot>
           </button>
         {/if}
       </li>
@@ -334,69 +355,74 @@ const if_enter_or_space = (handler) => (event) => {
         on:mouseup|stopPropagation={remove_all}
         on:keydown={if_enter_or_space(remove_all)}
       >
-        <CrossIcon width="15px" />
+        <slot name="remove-icon"><CrossIcon width="15px" /></slot>
       </button>
     {/if}
   {/if}
 
-  <ul class:hidden={!showOptions} class="options {ulOptionsClass}">
-    {#each matchingOptions as option, idx}
-      {@const {
-        label,
-        disabled = null,
-        title = null,
-        selectedTitle = null,
-        disabledTitle = defaultDisabledTitle,
-      } = option instanceof Object ? option : { label: option }}
-      {@const active = activeOption && get_label(activeOption) === label}
-      <li
-        on:mousedown|stopPropagation
-        on:mouseup|stopPropagation={() => {
-          if (!disabled) is_selected(label) ? remove(label) : add(label)
-        }}
-        title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
-        class:selected={is_selected(label)}
-        class:active
-        class:disabled
-        class="{liOptionClass} {active ? liActiveOptionClass : ``}"
-        on:mouseover={() => {
-          if (!disabled) activeOption = option
-        }}
-        on:focus={() => {
-          if (!disabled) activeOption = option
-        }}
-        on:mouseout={() => (activeOption = null)}
-        on:blur={() => (activeOption = null)}
-        aria-selected="false"
-      >
-        <slot name="option" {option} {idx}>
-          {#if parseLabelsAsHtml}
-            {@html get_label(option)}
-          {:else}
-            {get_label(option)}
-          {/if}
-        </slot>
-      </li>
-    {:else}
-      {#if allowUserOptions && searchText}
+  <!-- only render options dropdown if options or searchText is not empty needed to avoid briefly flashing empty dropdown -->
+  {#if searchText || options?.length > 0}
+    <ul class:hidden={!showOptions} class="options {ulOptionsClass}">
+      {#each matchingOptions as option, idx}
+        {@const {
+          label,
+          disabled = null,
+          title = null,
+          selectedTitle = null,
+          disabledTitle = defaultDisabledTitle,
+        } = option instanceof Object ? option : { label: option }}
+        {@const active = activeOption && get_label(activeOption) === label}
         <li
           on:mousedown|stopPropagation
-          on:mouseup|stopPropagation={() => add(searchText)}
-          title={addOptionMsg}
-          class:active={activeMsg}
-          on:mouseover={() => (activeMsg = true)}
-          on:focus={() => (activeMsg = true)}
-          on:mouseout={() => (activeMsg = false)}
-          on:blur={() => (activeMsg = false)}
+          on:mouseup|stopPropagation={() => {
+            if (!disabled) is_selected(label) ? remove(label) : add(label)
+          }}
+          title={disabled
+            ? disabledTitle
+            : (is_selected(label) && selectedTitle) || title}
+          class:selected={is_selected(label)}
+          class:active
+          class:disabled
+          class="{liOptionClass} {active ? liActiveOptionClass : ``}"
+          on:mouseover={() => {
+            if (!disabled) activeOption = option
+          }}
+          on:focus={() => {
+            if (!disabled) activeOption = option
+          }}
+          on:mouseout={() => (activeOption = null)}
+          on:blur={() => (activeOption = null)}
           aria-selected="false"
         >
-          {addOptionMsg}
+          <slot name="option" {option} {idx}>
+            {#if parseLabelsAsHtml}
+              {@html get_label(option)}
+            {:else}
+              {get_label(option)}
+            {/if}
+          </slot>
         </li>
       {:else}
-        <span>{noOptionsMsg}</span>
-      {/if}
-    {/each}
-  </ul>
+        {#if allowUserOptions && searchText}
+          <li
+            on:mousedown|stopPropagation
+            on:mouseup|stopPropagation={() => add(searchText)}
+            title={addOptionMsg}
+            class:active={activeMsg}
+            on:mouseover={() => (activeMsg = true)}
+            on:focus={() => (activeMsg = true)}
+            on:mouseout={() => (activeMsg = false)}
+            on:blur={() => (activeMsg = false)}
+            aria-selected="false"
+          >
+            {addOptionMsg}
+          </li>
+        {:else}
+          <span>{noOptionsMsg}</span>
+        {/if}
+      {/each}
+    </ul>
+  {/if}
 </div>
 
 <style>
@@ -476,9 +502,11 @@ const if_enter_or_space = (handler) => (event) => {
     background: none;
     flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
     min-width: 2em;
-    color: inherit;
+    /* ensure input uses text color and not --sms-selected-text-color */
+    color: var(--sms-text-color);
     font-size: inherit;
     cursor: inherit; /* needed for disabled state */
+    border-radius: 0; /* reset ul.selected > li */
   }
   :where(div.multiselect > ul.selected > li > input)::placeholder {
     padding-left: 5pt;

package/MultiSelect.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { MultiSelectEvents, Option } from './';
+import type { MultiSelectEvents, Option } from './';
 declare const __propDef: {
     props: {
         searchText?: string | undefined;
@@ -46,6 +46,7 @@ declare const __propDef: {
             option: Option;
             idx: any;
         };
+        'remove-icon': {};
         spinner: {};
         'disabled-icon': {};
         option: {

package/icons/Octocat.svelte

@@ -0,0 +1,5 @@
+<svg {...$$props} viewBox="0 0 24 24" fill="currentColor">
+  <path
+    d="M8.422 20.081c0 .896.01 1.753.016 2.285a.617.617 0 0 0 .422.58c2.078.686 4.317.718 6.414.091l.292-.087a.67.67 0 0 0 .478-.638c.005-.733.017-2.017.017-3.53c0-1.372-.477-2.25-1.031-2.707c3.399-.366 6.97-1.61 6.97-7.227c0-1.61-.592-2.91-1.566-3.934c.153-.366.688-1.866-.153-3.878c0 0-1.28-.403-4.201 1.5a14.76 14.76 0 0 0-3.82-.494c-1.298 0-2.597.165-3.819.494C5.52.65 4.24 1.036 4.24 1.036c-.84 2.012-.306 3.512-.153 3.878a5.565 5.565 0 0 0-1.566 3.934c0 5.598 3.552 6.86 6.951 7.227c-.439.366-.84 1.006-.973 1.957c-.879.384-3.075 1.006-4.45-1.207c-.286-.44-1.146-1.519-2.349-1.5c-1.28.018-.516.695.02.97c.648.347 1.393 1.646 1.565 2.067c.306.823 1.299 2.396 5.137 1.72Z"
+  />
+</svg>

package/icons/Octocat.svelte.d.ts

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

package/icons/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ExpandIcon } from './ChevronExpand.svelte';
 export { default as CrossIcon } from './Cross.svelte';
 export { default as DisabledIcon } from './Disabled.svelte';
+export { default as Octocat } from './Octocat.svelte';

package/icons/index.js

@@ -1,3 +1,4 @@
 export { default as ExpandIcon } from './ChevronExpand.svelte';
 export { default as CrossIcon } from './Cross.svelte';
 export { default as DisabledIcon } from './Disabled.svelte';
+export { default as Octocat } from './Octocat.svelte';

package/index.js

@@ -3,3 +3,24 @@ export { default } from './MultiSelect.svelte';
 export const get_label = (op) => (op instanceof Object ? op.label : op);
 // fallback on label if option is object and value is undefined
 export const get_value = (op) => op instanceof Object ? op.value ?? op.label : op;
+// 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
+if (typeof Element !== `undefined` &&
+    !Element.prototype?.scrollIntoViewIfNeeded) {
+    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);
+    };
+}

package/package.json

@@ -5,37 +5,37 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "5.0.3",
+  "version": "5.0.6",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.34",
-    "@sveltejs/kit": "1.0.0-next.345",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "@typescript-eslint/parser": "^5.29.0",
-    "eslint": "^8.18.0",
+    "@playwright/test": "^1.24.1",
+    "@sveltejs/adapter-static": "^1.0.0-next.38",
+    "@sveltejs/kit": "^1.0.0-next.396",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "eslint": "^8.20.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.0.2",
     "jsdom": "^20.0.0",
     "mdsvex": "^0.10.6",
-    "playwright": "^1.22.2",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.48.0",
+    "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-github-corner": "^0.1.0",
     "svelte-preprocess": "^4.10.6",
-    "svelte-toc": "^0.2.9",
-    "svelte2tsx": "^0.5.11",
+    "svelte-toc": "^0.2.10",
+    "svelte2tsx": "^0.5.13",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vite": "^2.9.12",
-    "vitest": "^0.16.0"
+    "vite": "^3.0.4",
+    "vitest": "^0.19.1"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -13,7 +13,7 @@
 
 </h4>
 
-**Keyboard-friendly, accessible multi-select Svelte component.**
+**Keyboard-friendly, accessible and highly customizable multi-select component.**
 <strong class="hide-in-docs">
 <a href="https://svelte-multiselect.netlify.app">Docs</a>
 </strong>
@@ -24,7 +24,7 @@
 
 - **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
-- **No 3rd-party dependencies:** needs only Svelte as dev dependency
+- **No run-time deps:** needs only Svelte as dev dependency
 - **Dropdowns:** scrollable lists for large numbers of options
 - **Searchable:** start typing to filter options
 - **Tagging:** selected options are listed as tags within the input
@@ -35,15 +35,17 @@
 
 ## Recent breaking changes
 
-- v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form or user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed to `div.multiselect.{readonly=>disabled}`.
+- v4.0.1 renamed the `readonly` prop to `disabled` which now prevents all form of user interaction with this component including opening the dropdown list which was still possible before. See [#45](https://github.com/janosh/svelte-multiselect/issues/45) for details. The associated CSS class applied to the outer `div` was likewise renamed `div.multiselect.{readonly=>disabled}`.
 
 - v4.0.3 CSS variables starting with `--sms-input-<attr>` were renamed to just `--sms-<attr>`. E.g. `--sms-input-min-height` is now `--sms-min-height`.
 
-- v5.0.0 Support both simple and object options. Previously string or number options were converted to objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's what you'll get from `bind:selected`.
+- v5.0.0 Support both simple and object options. Previously strings and numbers were converted to `{ value, label }` objects internally and returned by `bind:selected`. Now, if you pass in `string[]`, that's exactly what you'll get from `bind:selected`.
 
 ## Installation
 
 ```sh
+npm install -D svelte-multiselect
+pnpm install -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
@@ -98,7 +100,7 @@ Full list of props/bindable variables for this component:
 | `parseLabelsAsHtml`    | `false`                             | Whether option labels should be passed to [Svelte's `@html` directive](https://svelte.dev/tutorial/html-tags) or inserted into the DOM as plain text. `true` will raise an error if `allowUserOptions` is also truthy as it makes your site susceptible to [cross-site scripting (XSS) attacks](https://wikipedia.org/wiki/Cross-site_scripting).                                                                                 |
 | `addOptionMsg`         | `'Create this option...'`           | Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.                                                                                                                                                                                                                                                                                                                    |
 | `loading`              | `false`                             | Whether the component should display a spinner to indicate it's in loading state. Use `<slot name='spinner'>` to specify a custom spinner.                                                                                                                                                                                                                                                                                        |
-| `removeBtnTitle`       | `'Remove'`                          | Title text to display when user hovers over button (cross icon) to remove selected option.                                                                                                                                                                                                                                                                                                                                        |
+| `removeBtnTitle`       | `'Remove'`                          | Title text to display when user hovers over button to remove selected option (which defaults to a cross icon).                                                                                                                                                                                                                                                                                                                    |
 | `removeAllTitle`       | `'Remove all'`                      | Title text to display when user hovers over remove-all button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `defaultDisabledTitle` | `'This option is disabled'`         | Title text to display when user hovers over a disabled option. Each option can override this through its `disabledTitle` attribute.                                                                                                                                                                                                                                                                                               |
 | `autocomplete`         | `'off'`                             | Applied to the `<input>`. Specifies if browser is permitted to auto-fill this form field. See [MDN docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) for other admissible values.                                                                                                                                                                                                                        |
@@ -108,9 +110,11 @@ Full list of props/bindable variables for this component:
 
 ## Exposed methods
 
-1. `filterFunc = (op: Option, searchText: string) => boolean`: Determine what options are shown when user enters search string to filter dropdown list. Defaults to:
+1. `filterFunc = (op: Option, searchText: string) => boolean`: Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
    ```ts
+   import type { Option } from 'svelte-multiselect'
+
    filterFunc = (op: Option, searchText: string) => {
      if (!searchText) return true
      return `${op.label}`.toLowerCase().includes(searchText.toLowerCase())
@@ -131,6 +135,7 @@ Full list of props/bindable variables for this component:
 - `slot="selected"`: Customize rendering of selected items. Receives as props an `option` and the zero-indexed position (`idx`) it has in the list of selected items.
 - `slot="spinner"`: Custom spinner component to display when in `loading` state. Receives no props.
 - `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.
+- `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:
 
@@ -149,6 +154,7 @@ Example:
   </span>
 
   <CustomSpinner slot="spinner">
+  <strong slot="remove-icon">X</strong>
 </MultiSelect>
 ```
 
@@ -242,7 +248,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `padding: var(--sms-selected-li-padding, 5pt 1pt)`: Height of selected options.
   - `color: var(--sms-selected-text-color, var(--sms-text-color))`: Text color for selected options.
 - `ul.selected > li button:hover, button.remove-all:hover, button:focus`
-  - `color: var(--sms-button-hover-color, lightskyblue)`: Color of the cross-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
+  - `color: var(--sms-button-hover-color, lightskyblue)`: Color of the remove-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
 - `div.multiselect > ul.options`
   - `background: var(--sms-options-bg, white)`: Background of dropdown list.
   - `max-height: var(--sms-options-max-height, 50vh)`: Maximum height of options dropdown.