svelte-multiselect 5.0.4 → 6.0.0

package/MultiSelect.svelte

@@ -4,7 +4,7 @@ import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
 import Wiggle from './Wiggle.svelte';
 export let searchText = ``;
-export let showOptions = false;
+export let open = false;
 export let maxSelect = null; // null means any number of options are selectable
 export let maxSelectMsg = null;
 export let disabled = false;
@@ -21,11 +21,14 @@ export let id = undefined;
 export let name = id;
 export let noOptionsMsg = `No matching options`;
 export let activeOption = null;
+export let activeIndex = null;
 export let filterFunc = (op, searchText) => {
     if (!searchText)
         return true;
     return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase());
 };
+export let focusInputOnSelect = `desktop`;
+export let breakpoint = 800; // any screen with more horizontal pixels is considered desktop, below is mobile
 export let outerDivClass = ``;
 export let ulSelectedClass = ``;
 export let liSelectedClass = ``;
@@ -65,6 +68,7 @@ if (!Array.isArray(selected)) {
 }
 const dispatch = createEventDispatcher();
 let activeMsg = false; // controls active state of <li>{addOptionMsg}</li>
+let window_width;
 let wiggle = false; // controls wiggle animation when user tries to exceed maxSelect
 $: selectedLabels = selected.map(get_label);
 $: selectedValues = selected.map(get_value);
@@ -78,9 +82,12 @@ $: matchingOptions = options.filter((op) => filterFunc(op, searchText) &&
     !(op instanceof Object && op.disabled) &&
     !selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
 );
-// reset activeOption if it's no longer in the matchingOptions list
-$: if (activeOption && !matchingOptions.includes(activeOption))
-    activeOption = null;
+// 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}`;
+}
+// update activeOption when activeIndex changes
+$: activeOption = activeIndex ? matchingOptions[activeIndex] : null;
 // add an option to selected list
 function add(label) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
@@ -134,9 +141,11 @@ function add(label) {
             }
         }
         if (selected.length === maxSelect)
-            setOptionsVisible(false);
-        else
+            close_dropdown();
+        else if (focusInputOnSelect === true ||
+            (focusInputOnSelect === `desktop` && window_width > breakpoint)) {
             input?.focus();
+        }
         dispatch(`add`, { option });
         dispatch(`change`, { option, type: `add` });
     }
@@ -158,25 +167,24 @@ function remove(label) {
     dispatch(`remove`, { option });
     dispatch(`change`, { option, type: `remove` });
 }
-function setOptionsVisible(show) {
+function open_dropdown() {
     if (disabled)
         return;
-    showOptions = show;
-    if (show) {
-        input?.focus();
-        dispatch(`focus`);
-    }
-    else {
-        input?.blur();
-        activeOption = null;
-        dispatch(`blur`);
-    }
+    open = true;
+    input?.focus();
+    dispatch(`focus`);
+}
+function close_dropdown() {
+    open = false;
+    input?.blur();
+    activeOption = null;
+    dispatch(`blur`);
 }
 // handle all keyboard events this component receives
-async function handleKeydown(event) {
+async function handle_keydown(event) {
     // on escape or tab out of input: dismiss options dropdown and reset search text
     if (event.key === `Escape` || event.key === `Tab`) {
-        setOptionsVisible(false);
+        close_dropdown();
         searchText = ``;
     }
     // on enter key: toggle active option and reset search text
@@ -194,7 +202,7 @@ async function handleKeydown(event) {
         // no active option and no search text means the options dropdown is closed
         // in which case enter means open it
         else
-            setOptionsVisible(true);
+            open_dropdown();
     }
     // on up/down arrow keys: update active option
     else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
@@ -232,7 +240,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);
         }
     }
@@ -254,26 +265,29 @@ const if_enter_or_space = (handler) => (event) => {
         handler();
     }
 };
+function on_click_outside(event) {
+    if (outerDiv && !outerDiv.contains(event.target)) {
+        close_dropdown();
+    }
+}
 </script>
 
 <svelte:window
-  on:click={(event) => {
-    if (outerDiv && !outerDiv.contains(event.target)) {
-      setOptionsVisible(false)
-    }
-  }}
+  on:click={on_click_outside}
+  on:touchstart={on_click_outside}
+  bind:innerWidth={window_width}
 />
 
 <div
   bind:this={outerDiv}
   class:disabled
   class:single={maxSelect === 1}
-  class:open={showOptions}
-  aria-expanded={showOptions}
+  class:open
+  aria-expanded={open}
   aria-multiselectable={maxSelect === null || maxSelect > 1}
   class:invalid
   class="multiselect {outerDivClass}"
-  on:mouseup|stopPropagation={() => setOptionsVisible(true)}
+  on:mouseup|stopPropagation={open_dropdown}
   title={disabled ? disabledTitle : null}
   aria-disabled={disabled ? `true` : null}
 >
@@ -315,9 +329,9 @@ const if_enter_or_space = (handler) => (event) => {
         bind:this={input}
         {autocomplete}
         bind:value={searchText}
-        on:mouseup|self|stopPropagation={() => setOptionsVisible(true)}
-        on:keydown={handleKeydown}
-        on:focus={() => setOptionsVisible(true)}
+        on:mouseup|self|stopPropagation={open_dropdown}
+        on:keydown={handle_keydown}
+        on:focus={open_dropdown}
         {id}
         {name}
         {disabled}
@@ -359,7 +373,7 @@ const if_enter_or_space = (handler) => (event) => {
 
   <!-- 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}">
+    <ul class:hidden={!open} class="options {ulOptionsClass}">
       {#each matchingOptions as option, idx}
         {@const {
           label,
@@ -368,7 +382,7 @@ const if_enter_or_space = (handler) => (event) => {
           selectedTitle = null,
           disabledTitle = defaultDisabledTitle,
         } = option instanceof Object ? option : { label: option }}
-        {@const active = activeOption && get_label(activeOption) === label}
+        {@const active = activeIndex === idx}
         <li
           on:mousedown|stopPropagation
           on:mouseup|stopPropagation={() => {
@@ -382,13 +396,13 @@ const if_enter_or_space = (handler) => (event) => {
           class:disabled
           class="{liOptionClass} {active ? liActiveOptionClass : ``}"
           on:mouseover={() => {
-            if (!disabled) activeOption = option
+            if (!disabled) activeIndex = idx
           }}
           on:focus={() => {
-            if (!disabled) activeOption = option
+            if (!disabled) activeIndex = idx
           }}
-          on:mouseout={() => (activeOption = null)}
-          on:blur={() => (activeOption = null)}
+          on:mouseout={() => (activeIndex = null)}
+          on:blur={() => (activeIndex = null)}
           aria-selected="false"
         >
           <slot name="option" {option} {idx}>
@@ -499,9 +513,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

@@ -3,7 +3,7 @@ import type { MultiSelectEvents, Option } from './';
 declare const __propDef: {
     props: {
         searchText?: string | undefined;
-        showOptions?: boolean | undefined;
+        open?: boolean | undefined;
         maxSelect?: number | null | undefined;
         maxSelectMsg?: ((current: number, max: number) => string) | null | undefined;
         disabled?: boolean | undefined;
@@ -20,7 +20,10 @@ declare const __propDef: {
         name?: string | undefined;
         noOptionsMsg?: string | undefined;
         activeOption?: Option | null | undefined;
+        activeIndex?: number | null | undefined;
         filterFunc?: ((op: Option, searchText: string) => boolean) | undefined;
+        focusInputOnSelect?: boolean | "desktop" | undefined;
+        breakpoint?: number | undefined;
         outerDivClass?: string | undefined;
         ulSelectedClass?: string | undefined;
         liSelectedClass?: string | undefined;

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.d.ts

@@ -32,4 +32,4 @@ export declare type MultiSelectEvents = {
     [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
 };
 export declare const get_label: (op: Option) => string | number;
-export declare const get_value: (op: Option) => unknown;
+export declare const get_value: (op: Option) => {};

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,19 +5,21 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "5.0.4",
+  "version": "6.0.0",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
-    "@playwright/test": "^1.23.1",
-    "@sveltejs/adapter-static": "^1.0.0-next.34",
-    "@sveltejs/kit": "^1.0.0-next.360",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
-    "@typescript-eslint/eslint-plugin": "^5.30.5",
-    "@typescript-eslint/parser": "^5.30.5",
-    "eslint": "^8.19.0",
+    "@playwright/test": "^1.25.1",
+    "@sveltejs/adapter-netlify": "^1.0.0-next.76",
+    "@sveltejs/adapter-static": "^1.0.0-next.41",
+    "@sveltejs/kit": "^1.0.0-next.465",
+    "@sveltejs/package": "^1.0.0-next.3",
+    "@sveltejs/vite-plugin-svelte": "^1.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "eslint": "^8.23.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.0.2",
     "jsdom": "^20.0.0",
@@ -26,16 +28,16 @@
     "prettier-plugin-svelte": "^2.7.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
-    "svelte": "^3.48.0",
-    "svelte-check": "^2.8.0",
+    "svelte": "^3.50.0",
+    "svelte-check": "^2.9.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.16",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
-    "vite": "^2.9.13",
-    "vitest": "^0.18.0"
+    "typescript": "^4.8.2",
+    "vite": "^3.1.0-beta.2",
+    "vitest": "^0.22.1"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -5,18 +5,19 @@
 
 <h4 align="center">
 
-[![REPL](https://img.shields.io/badge/Svelte-REPL-blue)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
 [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a45b62c3-ea45-4cfd-9912-77ec4fc8d7e8/deploy-status)](https://app.netlify.com/sites/svelte-multiselect/deploys)
 [![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/dev/svelte?color=teal)](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md)
+[![REPL](https://img.shields.io/badge/Svelte-REPL-blue)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
+[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=pytorchlightning)](https://stackblitz.com/github/janosh/svelte-multiselect)
 
 </h4>
 
 **Keyboard-friendly, accessible and highly customizable multi-select component.**
-<strong class="hide-in-docs">
-<a href="https://svelte-multiselect.netlify.app">Docs</a>
-</strong>
+<span class="hide-in-docs">
+<a href="https://svelte-multiselect.netlify.app">View the docs</a>
+</span>
 
 <slot name="examples" />
 
@@ -35,15 +36,14 @@
 
 ## 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.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 Supports 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`.
+- v6.0.0 The prop `showOptions` which controls whether the list of dropdown options is currently open or closed was renamed to just `open`.
 
 ## Installation
 
 ```sh
+npm install -D svelte-multiselect
+pnpm install -D svelte-multiselect
 yarn add -D svelte-multiselect
 ```
 
@@ -78,6 +78,7 @@ Full list of props/bindable variables for this component:
 | `showOptions`          | `false`                             | Bindable boolean that controls whether the options dropdown is visible.                                                                                                                                                                                                                                                                                                                                                           |
 | `searchText`           | ``                                  | Text the user-entered to filter down on the list of options. Binds both ways, i.e. can also be used to set the input text.                                                                                                                                                                                                                                                                                                        |
 | `activeOption`         | `null`                              | Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.                                                                                                                                                                                                                                                                                                                                  |
+| `activeIndex`          | `null`                              | Zero-based index of currently active option in the array of currently matching options, i.e. if the user typed a search string into the input and only a subset of options match, this index refers to the array position of the matching subset of options                                                                                                                                                                       |
 | `maxSelect`            | `null`                              | Positive integer to limit the number of options users can pick. `null` means no limit.                                                                                                                                                                                                                                                                                                                                            |
 | `selected`             | `[]`                                | Array of currently selected options. Can be bound to `bind:selected={[1, 2, 3]}` to control component state externally or passed as prop to set pre-selected options that will already be populated when component mounts before any user interaction.                                                                                                                                                                            |
 | `selectedLabels`       | `[]`                                | Labels of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.label)` when options are objects. If options are simple strings, `selected === selectedLabels`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing      `bind:selectedLabels`.                                                                |
@@ -103,14 +104,18 @@ Full list of props/bindable variables for this component:
 | `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.                                                                                                                                                                                                                        |
 | `invalid`              | `false`                             | If `required=true` and user tries to submit but `selected = []` is empty, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed again as soon as the user selects an option. `invalid` can also be controlled externally by binding to it `<MultiSelect bind:invalid />` and setting it to `true` based on outside events or custom validation. |
+| `focusInputOnSelect`   | `'desktop'`                         | One of `true`, `false` or `'desktop'`. Whether to set the cursor back to the input element after selecting an element. 'desktop' means only do so if current window width is larger than the current value of `breakpoint` prop (default 800).                                                                                                                                                                                    |
+| `breakpoint`           | `800`                               | Screens wider than `breakpoint` in pixels will be considered `'desktop'`, everything narrower as `'mobile'`.                                                                                                                                                                                                                                                                                                                      |
 
 </div>
 
 ## 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())
@@ -188,16 +193,14 @@ TypeScript users can import the types used for internal type safety:
 
 ```svelte
 <script lang="ts">
-  import MultiSelect, {
-    Option,
-    Primitive,
-    ProtoOption,
-  } from 'svelte-multiselect'
+  import MultiSelect, { Option, ObjectOption } from 'svelte-multiselect'
 
-  const myOptions: Option[] = [
+  const myOptions: ObjectOption[] = [
     { label: 'foo', value: 42 },
     { label: 'bar', value: 69 },
   ]
+  // an Option can be string | number | ObjectOption
+  const myNumbers: Option[] = [42, 69]
 </script>
 ```
 
@@ -387,6 +390,6 @@ To submit a PR, clone the repo, install dependencies and start the dev server to
 ```sh
 git clone https://github.com/janosh/svelte-multiselect
 cd svelte-multiselect
-yarn
-yarn dev
+npm install
+npm run dev
 ```