svelte-multiselect 7.0.0 → 7.0.2

package/MultiSelect.svelte

@@ -1,5 +1,4 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { get_label, get_value } from './';
+<script>import { createEventDispatcher, tick } from 'svelte';
 import CircleSpinner from './CircleSpinner.svelte';
 import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
 import Wiggle from './Wiggle.svelte';
@@ -52,6 +51,10 @@ export let selectedValues = [];
 export let sortSelected = false;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
+// 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);
+// fallback on label if option is object and value is undefined
+const get_value = (op) => (op instanceof Object ? op.value ?? op.label : op);
 // selected and _selected are identical except if maxSelect=1, selected will be the single item (or null)
 // in _selected which will always be an array for easier component internals. selected then solves
 // https://github.com/janosh/svelte-multiselect/issues/86
@@ -85,8 +88,8 @@ let add_option_msg_is_active = false; // controls active state of <li>{addOption
 let window_width;
 // formValue binds to input.form-control to prevent form submission if required
 // prop is true and no options are selected
-$: formValue = _selectedValues.join(`,`);
-$: if (formValue)
+$: form_value = _selectedValues.join(`,`);
+$: if (form_value)
     invalid = false; // reset error status whenever component state changes
 // options matching the current search text
 $: matchingOptions = options.filter((op) => filterFunc(op, searchText) && !_selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
@@ -128,8 +131,8 @@ function add(label, event) {
                 options = [...options, option];
         }
         searchText = ``; // reset search string on selection
-        if (!option) {
-            console.error(`MultiSelect: option with label ${label} not found`);
+        if ([``, undefined, null].includes(option)) {
+            console.error(`MultiSelect: encountered missing option with label ${label} (or option is poorly labeled)`);
             return;
         }
         if (maxSelect === 1) {
@@ -204,7 +207,7 @@ async function handle_keydown(event) {
         event.preventDefault(); // prevent enter key from triggering form submission
         if (activeOption) {
             const label = get_label(activeOption);
-            selectedLabels.includes(label) ? remove(label) : add(label, event);
+            selectedLabels?.includes(label) ? remove(label) : add(label, event);
             searchText = ``;
         }
         else if (allowUserOptions && searchText.length > 0) {
@@ -241,14 +244,13 @@ async function handle_keydown(event) {
             activeIndex = matchingOptions.length - 1;
         if (autoScroll) {
             // TODO This ugly timeout hack is needed to properly scroll element into view when wrapping
-            // around start/end of option list. Find a better solution than waiting 10 ms to.
-            setTimeout(() => {
-                const li = document.querySelector(`ul.options > li.active`);
-                if (li) {
-                    li.parentNode?.scrollIntoView({ block: `center` });
-                    li.scrollIntoViewIfNeeded();
-                }
-            }, 10);
+            // around start/end of option list. Find a better solution than waiting 10 ms.
+            await tick();
+            const li = document.querySelector(`ul.options > li.active`);
+            if (li) {
+                li.parentNode?.scrollIntoView?.({ block: `center` });
+                li.scrollIntoViewIfNeeded?.();
+            }
         }
     }
     // on backspace key: remove last selected option
@@ -295,9 +297,10 @@ function on_click_outside(event) {
   title={disabled ? disabledInputTitle : null}
   aria-disabled={disabled ? `true` : null}
 >
+  <!-- formValue binds to input.form-control to prevent form submission if required prop is true and no options are selected -->
   <input
     {required}
-    bind:value={formValue}
+    bind:value={form_value}
     tabindex="-1"
     aria-hidden="true"
     aria-label="ignore this, used only to prevent form submission if select is required but empty"
@@ -456,8 +459,146 @@ function on_click_outside(event) {
   {/if}
 </div>
 
-<style>
-  :where(div.multiselect) {
+<style>:where(div.multiselect) {
+  position: relative;
+  align-items: center;
+  display: flex;
+  cursor: text;
+  border: var(--sms-border, 1pt solid lightgray);
+  border-radius: var(--sms-border-radius, 3pt);
+  background: var(--sms-bg);
+  max-width: var(--sms-max-width);
+  padding: var(--sms-padding, 0 3pt);
+  color: var(--sms-text-color);
+  font-size: var(--sms-font-size, inherit);
+  min-height: var(--sms-min-height, 19pt);
+  margin: var(--sms-margin);
+}
+:where(div.multiselect).open {
+  /* increase z-index when open to ensure the dropdown of one <MultiSelect />
+  displays above that of another slightly below it on the page */
+  z-index: var(--sms-open-z-index, 4);
+}
+:where(div.multiselect):focus-within {
+  border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
+}
+:where(div.multiselect).disabled {
+  background: var(--sms-disabled-bg, lightgray);
+  cursor: not-allowed;
+}
+:where(div.multiselect) > ul.selected {
+  display: flex;
+  flex: 1;
+  padding: 0;
+  margin: 0;
+  flex-wrap: wrap;
+}
+:where(div.multiselect) > ul.selected > li {
+  align-items: center;
+  border-radius: 3pt;
+  display: flex;
+  margin: 2pt;
+  line-height: normal;
+  transition: 0.3s;
+  white-space: nowrap;
+  background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15));
+  padding: var(--sms-selected-li-padding, 1pt 5pt);
+  color: var(--sms-selected-text-color, var(--sms-text-color));
+}
+:where(div.multiselect) button {
+  border-radius: 50%;
+  display: flex;
+  transition: 0.2s;
+  color: inherit;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  padding: 0;
+  margin: 0 0 0 3pt; /* CSS reset */
+}
+:where(div.multiselect) button.remove-all {
+  margin: 0 3pt;
+}
+:where(div.multiselect) ul.selected > li button:hover,
+:where(div.multiselect) button.remove-all:hover,
+:where(div.multiselect) button:focus {
+  color: var(--sms-button-hover-color, lightskyblue);
+}
+:where(div.multiselect) input {
+  margin: auto 0; /* CSS reset */
+  padding: 0; /* CSS reset */
+}
+:where(div.multiselect) > ul.selected > li > input {
+  border: none;
+  outline: none;
+  background: none;
+  flex: 1; /* this + next line fix issue #12 https://git.io/JiDe3 */
+  min-width: 2em;
+  /* 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;
+  color: var(--sms-placeholder-color);
+  opacity: var(--sms-placeholder-opacity);
+}
+:where(div.multiselect) > input.form-control {
+  width: 2em;
+  position: absolute;
+  background: transparent;
+  border: none;
+  outline: none;
+  z-index: -1;
+  opacity: 0;
+  pointer-events: none;
+}
+:where(div.multiselect) > ul.options {
+  list-style: none;
+  padding: 4pt 0;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  position: absolute;
+  border-radius: 1ex;
+  overflow: auto;
+  background: var(--sms-options-bg, white);
+  max-height: var(--sms-options-max-height, 50vh);
+  overscroll-behavior: var(--sms-options-overscroll, none);
+  box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
+  transition: all 0.2s;
+}
+:where(div.multiselect) > ul.options.hidden {
+  visibility: hidden;
+  opacity: 0;
+  transform: translateY(50px);
+}
+:where(div.multiselect) > ul.options > li {
+  padding: 3pt 2ex;
+  cursor: pointer;
+  scroll-margin: var(--sms-options-scroll-margin, 100px);
+}
+:where(div.multiselect) > ul.options span {
+  padding: 3pt 2ex;
+}
+:where(div.multiselect) > ul.options > li.selected {
+  background: var(--sms-li-selected-bg);
+  color: var(--sms-li-selected-color);
+}
+:where(div.multiselect) > ul.options > li.active {
+  background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
+}
+:where(div.multiselect) > ul.options > li.disabled {
+  cursor: not-allowed;
+  background: var(--sms-li-disabled-bg, #f5f5f6);
+  color: var(--sms-li-disabled-text, #b8b8b8);
+}
+
+@supports not selector(:where(div.multiselect)) {
+  div.multiselect {
     position: relative;
     align-items: center;
     display: flex;
@@ -472,27 +613,26 @@ function on_click_outside(event) {
     min-height: var(--sms-min-height, 19pt);
     margin: var(--sms-margin);
   }
-  :where(div.multiselect.open) {
+  div.multiselect.open {
     /* increase z-index when open to ensure the dropdown of one <MultiSelect />
     displays above that of another slightly below it on the page */
     z-index: var(--sms-open-z-index, 4);
   }
-  :where(div.multiselect:focus-within) {
+  div.multiselect:focus-within {
     border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
   }
-  :where(div.multiselect.disabled) {
+  div.multiselect.disabled {
     background: var(--sms-disabled-bg, lightgray);
     cursor: not-allowed;
   }
-
-  :where(div.multiselect > ul.selected) {
+  div.multiselect > ul.selected {
     display: flex;
     flex: 1;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
   }
-  :where(div.multiselect > ul.selected > li) {
+  div.multiselect > ul.selected > li {
     align-items: center;
     border-radius: 3pt;
     display: flex;
@@ -504,7 +644,7 @@ function on_click_outside(event) {
     padding: var(--sms-selected-li-padding, 1pt 5pt);
     color: var(--sms-selected-text-color, var(--sms-text-color));
   }
-  :where(div.multiselect button) {
+  div.multiselect button {
     border-radius: 50%;
     display: flex;
     transition: 0.2s;
@@ -516,18 +656,19 @@ function on_click_outside(event) {
     padding: 0;
     margin: 0 0 0 3pt; /* CSS reset */
   }
-  :where(div.multiselect button.remove-all) {
+  div.multiselect button.remove-all {
     margin: 0 3pt;
   }
-  :where(ul.selected > li button:hover, button.remove-all:hover, button:focus) {
+  div.multiselect ul.selected > li button:hover,
+div.multiselect button.remove-all:hover,
+div.multiselect button:focus {
     color: var(--sms-button-hover-color, lightskyblue);
   }
-
-  :where(div.multiselect input) {
+  div.multiselect input {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :where(div.multiselect > ul.selected > li > input) {
+  div.multiselect > ul.selected > li > input {
     border: none;
     outline: none;
     background: none;
@@ -539,12 +680,12 @@ function on_click_outside(event) {
     cursor: inherit; /* needed for disabled state */
     border-radius: 0; /* reset ul.selected > li */
   }
-  :where(div.multiselect > ul.selected > li > input)::placeholder {
+  div.multiselect > ul.selected > li > input::placeholder {
     padding-left: 5pt;
     color: var(--sms-placeholder-color);
     opacity: var(--sms-placeholder-opacity);
   }
-  :where(div.multiselect > input.form-control) {
+  div.multiselect > input.form-control {
     width: 2em;
     position: absolute;
     background: transparent;
@@ -554,8 +695,7 @@ function on_click_outside(event) {
     opacity: 0;
     pointer-events: none;
   }
-
-  :where(div.multiselect > ul.options) {
+  div.multiselect > ul.options {
     list-style: none;
     padding: 4pt 0;
     top: 100%;
@@ -570,30 +710,29 @@ function on_click_outside(event) {
     box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);
     transition: all 0.2s;
   }
-  :where(div.multiselect > ul.options.hidden) {
+  div.multiselect > ul.options.hidden {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
   }
-  :where(div.multiselect > ul.options > li) {
+  div.multiselect > ul.options > li {
     padding: 3pt 2ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
   }
-  /* for noOptionsMsg */
-  :where(div.multiselect > ul.options span) {
+  div.multiselect > ul.options span {
     padding: 3pt 2ex;
   }
-  :where(div.multiselect > ul.options > li.selected) {
+  div.multiselect > ul.options > li.selected {
     background: var(--sms-li-selected-bg);
     color: var(--sms-li-selected-color);
   }
-  :where(div.multiselect > ul.options > li.active) {
+  div.multiselect > ul.options > li.active {
     background: var(--sms-li-active-bg, var(--sms-active-color, rgba(0, 0, 0, 0.15)));
   }
-  :where(div.multiselect > ul.options > li.disabled) {
+  div.multiselect > ul.options > li.disabled {
     cursor: not-allowed;
     background: var(--sms-li-disabled-bg, #f5f5f6);
     color: var(--sms-li-disabled-text, #b8b8b8);
   }
-</style>
+}</style>

package/index.d.ts

@@ -47,5 +47,3 @@ export declare type MultiSelectEvents = {
     touchmove: TouchEvent;
     touchstart: TouchEvent;
 };
-export declare const get_label: (op: Option) => string | number;
-export declare const get_value: (op: Option) => {};

package/index.js

@@ -1,14 +1,11 @@
 export { default } from './MultiSelect.svelte';
-// get the label key from an option object or the option itself if it's a string or number
-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 &&
+    typeof IntersectionObserver !== `undefined`) {
     Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
         const el = this;
         new IntersectionObserver(function ([entry]) {

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "7.0.0",
+  "version": "7.0.2",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",
@@ -27,6 +27,7 @@
     "prettier-plugin-svelte": "^2.7.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
+    "sass": "^1.55.0",
     "svelte": "^3.50.1",
     "svelte-check": "^2.9.0",
     "svelte-github-corner": "^0.1.0",

package/readme.md

@@ -193,7 +193,7 @@ import type { Option } from 'svelte-multiselect'
    maxSelect: number | null = null
    ```
 
-   Positive integer to limit the number of options users can pick. `null` means no limit.
+   Positive integer to limit the number of options users can pick. `null` means no limit. `maxSelect={1}` will change the type of `selected` to be a single `Option` (or `null`) (not a length-1 array). Likewise, the type of `selectedLabels` changes from `(string | number)[]` to `string | number | null` and `selectedValues` from `unknown[]` to `unknown | null`. `maxSelect={1}` will also give `div.multiselect` a class of `single`. I.e. you can target the selector `div.multiselect.single` to give single selects a different appearance from multi selects.
 
 1. ```ts
    maxSelectMsg: ((current: number, max: number) => string) | null = null