svelte-multiselect 6.0.1 → 6.0.3

package/MultiSelect.svelte

@@ -37,12 +37,12 @@ export let options;
 export let outerDiv = null;
 export let outerDivClass = ``;
 export let parseLabelsAsHtml = false; // should not be combined with allowUserOptions!
-export let placeholder = undefined;
+export let placeholder = null;
 export let removeAllTitle = `Remove all`;
 export let removeBtnTitle = `Remove`;
 export let required = false;
 export let searchText = ``;
-export let selected = [];
+export let selected = options?.filter((op) => op?.preselected) ?? [];
 export let selectedLabels = [];
 export let selectedValues = [];
 export let sortSelected = false;
@@ -67,7 +67,7 @@ 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 add_option_msg_is_active = 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);
@@ -78,9 +78,7 @@ $: formValue = selectedValues.join(`,`);
 $: if (formValue)
     invalid = false; // reset error status whenever component state changes
 // options matching the current search text
-$: matchingOptions = options.filter((op) => filterFunc(op, searchText) &&
-    !(op instanceof Object && op.disabled) &&
-    !selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
+$: matchingOptions = options.filter((op) => filterFunc(op, searchText) && !selectedLabels.includes(get_label(op)) // remove already selected options from dropdown list
 );
 // raise if matchingOptions[activeIndex] does not yield a value
 if (activeIndex !== null && !matchingOptions[activeIndex]) {
@@ -207,34 +205,26 @@ async function handle_keydown(event) {
     // on up/down arrow keys: update active option
     else if ([`ArrowDown`, `ArrowUp`].includes(event.key)) {
         // if no option is active yet, but there are matching options, make first one active
-        if (activeOption === null && matchingOptions.length > 0) {
-            activeOption = matchingOptions[0];
+        if (activeIndex === null && matchingOptions.length > 0) {
+            activeIndex = 0;
             return;
         }
         else if (allowUserOptions && searchText.length > 0) {
             // if allowUserOptions is truthy and user entered text but no options match, we make
             // <li>{addUserMsg}</li> active on keydown (or toggle it if already active)
-            activeMsg = !activeMsg;
+            add_option_msg_is_active = !add_option_msg_is_active;
             return;
         }
-        else if (activeOption === null) {
+        else if (activeIndex === null) {
             // if no option is active and no options are matching, do nothing
             return;
         }
         const increment = event.key === `ArrowUp` ? -1 : 1;
-        const newActiveIdx = matchingOptions.indexOf(activeOption) + increment;
-        if (newActiveIdx < 0) {
-            // wrap around top
-            activeOption = matchingOptions[matchingOptions.length - 1];
-        }
-        else if (newActiveIdx === matchingOptions.length) {
-            // wrap around bottom
-            activeOption = matchingOptions[0];
-        }
-        else {
-            // default case: select next/previous in item list
-            activeOption = matchingOptions[newActiveIdx];
-        }
+        activeIndex = (activeIndex + increment) % matchingOptions.length;
+        // % in JS behaves like remainder operator, not real modulo, so negative numbers stay negative
+        // need to do manual wrap around at 0
+        if (activeIndex < 0)
+            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.
@@ -419,11 +409,11 @@ function on_click_outside(event) {
             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)}
+            class:active={add_option_msg_is_active}
+            on:mouseover={() => (add_option_msg_is_active = true)}
+            on:focus={() => (add_option_msg_is_active = true)}
+            on:mouseout={() => (add_option_msg_is_active = false)}
+            on:blur={() => (add_option_msg_is_active = false)}
             aria-selected="false"
           >
             {addOptionMsg}

package/MultiSelect.svelte.d.ts

@@ -32,7 +32,7 @@ declare const __propDef: {
         outerDiv?: HTMLDivElement | null | undefined;
         outerDivClass?: string | undefined;
         parseLabelsAsHtml?: boolean | undefined;
-        placeholder?: string | undefined;
+        placeholder?: string | null | undefined;
         removeAllTitle?: string | undefined;
         removeBtnTitle?: string | undefined;
         required?: boolean | undefined;

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://svelte-multiselect.netlify.app",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "type": "module",
   "svelte": "index.js",
   "main": "index.js",

package/readme.md

@@ -76,7 +76,7 @@ import type { Option } from 'svelte-multiselect'
 ```
 
 1. ```ts
-   activeIndex: integer | null = null
+   activeIndex: number | null = 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
@@ -88,22 +88,22 @@ import type { Option } from 'svelte-multiselect'
    Currently active option, i.e. the one the user currently hovers or navigated to with arrow keys.
 
 1. ```ts
-   addOptionMsg: string = 'Create this option...'
+   addOptionMsg: string = `Create this option...`
    ```
 
    Message shown to users after entering text when no options match their query and `allowUserOptions` is truthy.
 
 1. ```ts
-   allowUserOptions: boolean = false
+   allowUserOptions: boolean | 'append' = false
    ```
 
    Whether users are allowed to enter values not in the dropdown list. `true` means add user-defined options to the selected list only, `'append'` means add to both options and selected.
 
 1. ```ts
-   autocomplete: string = 'off'
+   autocomplete: string = `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.
+   Applied to the `<input>`. Specifies if browser is permitted to auto-fill this form field. Should usually be one of `'on'` or `'off'` but see [MDN docs](https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete) for other admissible values.
 
 1. ```ts
    autoScroll: boolean = true
@@ -112,13 +112,13 @@ import type { Option } from 'svelte-multiselect'
    `false` disables keeping the active dropdown items in view when going up/down the list of options with arrow keys.
 
 1. ```ts
-   breakpoint: integer = 800
+   breakpoint: number = 800
    ```
 
    Screens wider than `breakpoint` in pixels will be considered `'desktop'`, everything narrower as `'mobile'`.
 
 1. ```ts
-   defaultDisabledTitle: string = 'This option is disabled'
+   defaultDisabledTitle: string = `This option is disabled`
    ```
 
    Title text to display when user hovers over a disabled option. Each option can override this through its `disabledTitle` attribute.
@@ -130,13 +130,13 @@ import type { Option } from 'svelte-multiselect'
    Disable the component. It will still be rendered but users won't be able to interact with it.
 
 1. ```ts
-   disabledInputTitle: string = 'This input is disabled'
+   disabledInputTitle: string = `This input is disabled`
    ```
 
    Tooltip text to display on hover when the component is in `disabled` state.
 
 1. ```ts
-   filterFunc: = (op: Option, searchText: string): boolean => {
+   filterFunc = (op: Option, searchText: string): boolean => {
      if (!searchText) return true
      return `${get_label(op)}`.toLowerCase().includes(searchText.toLowerCase())
    }
@@ -187,7 +187,7 @@ import type { Option } from 'svelte-multiselect'
    Positive integer to limit the number of options users can pick. `null` means no limit.
 
 1. ```ts
-   maxSelectMsg: (current: number, max: number): string = null
+   maxSelectMsg: ((current: number, max: number) => string) | null = null
    ```
 
    Inform users how many of the maximum allowed options they have already selected. Set `maxSelectMsg={null}` to not show a message. Defaults to `null` when `maxSelect={1}` or `maxSelect={null}`. Else if `maxSelect > 1`, defaults to:
@@ -203,7 +203,7 @@ import type { Option } from 'svelte-multiselect'
    Applied to the `<input>` element. Sets the key of this field in a submitted form data object. Not useful at the moment since the value is stored in Svelte state, not on the `<input>` node.
 
 1. ```ts
-   noOptionsMsg: string = 'No matching options'
+   noOptionsMsg: string = `No matching options`
    ```
 
    What message to show if no options match the user-entered search string.
@@ -239,13 +239,13 @@ import type { Option } from 'svelte-multiselect'
    String shown in the text input when no option is selected.
 
 1. ```ts
-   removeAllTitle: string = 'Remove all'
+   removeAllTitle: string = `Remove all`
    ```
 
    Title text to display when user hovers over remove-all button.
 
 1. ```ts
-   removeBtnTitle: string = 'Remove'
+   removeBtnTitle: string = `Remove`
    ```
 
    Title text to display when user hovers over button to remove selected option (which defaults to a cross icon).
@@ -257,13 +257,13 @@ import type { Option } from 'svelte-multiselect'
    Whether forms can be submitted without selecting any options. Aborts submission, is scrolled into view and shows help "Please fill out" message when true and user tries to submit with no options selected.
 
 1. ```ts
-   searchText: string = ''
+   searchText: string = ``
    ```
 
    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.
 
 1. ```ts
-   selected: Option[] = []
+   selected: Option[] = options?.filter((op) => op?.preselected) ?? []
    ```
 
    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.
@@ -286,6 +286,13 @@ import type { Option } from 'svelte-multiselect'
 
    Default behavior is to render selected items in the order they were chosen. `sortSelected={true}` uses default JS array sorting. A compare function enables custom logic for sorting selected options. See the [`/sort-selected`](https://svelte-multiselect.netlify.app/sort-selected) example.
 
+1. ```ts
+   userInputAs: 'string' | 'number' | 'object' =
+    options.length > 0 ? (typeof options[0] as 'object' | 'string' | 'number') : 'string'
+   ```
+
+   What type new options created from user text input should be. Only relevant if `allowUserOptions=true | 'append'`. If not explicitly set, we default `userInputAs` to the type of the 1st option (if available, else `string`) to keep type homogeneity. E.g. if MultiSelect already contains at least one option and it's an object, new options from user-entered text will take the shape `{label: userText, value: userText}`. Likewise if the 1st existing option is a number of string. If MultiSelect starts out empty but you still want user-created custom options to be objects, pass `userInputAs='object'`.
+
 ## Slots
 
 `MultiSelect.svelte` has 3 named slots:
@@ -321,34 +328,50 @@ Example:
 
 `MultiSelect.svelte` dispatches the following events:
 
-<div class="table">
+1. ```ts
+   on:add={(event) => console.log(event.detail.option)}
+   ```
 
-| name        | detail                                   | description                                                                                                                                             |
-| ----------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `add`       | `{ option: Option }`                     | Triggers when a new option is selected.                                                                                                                 |
-| `remove`    | `{ option: Option }`                     | Triggers when one selected option provided as `event.detail.option` is removed.                                                                         |
-| `removeAll` | `options: Option[]`                      | Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected.                     |
-| `change`    | `type: 'add' \| 'remove' \| 'removeAll'` | Triggers when a option is either added or removed, or all options are removed at once. Payload will be a single or an array of `Option`s, respectively. |
-| `blur`      | none                                     | Triggers when the input field looses focus.                                                                                                             |
+   Triggers when a new option is selected.
 
-</div>
+1. ```ts
+   on:remove={(event) => console.log(event.detail.option)}`
+   ```
 
-Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
+   Triggers when one selected option provided as `event.detail.option` is removed.
 
-### Examples
+1. ```ts
+   on:removeAll={(event) => console.log(event.detail.options)}`
+   ```
 
-<!-- prettier-ignore -->
-- `on:add={(event) => console.log(event.detail.option)}`
-- `on:remove={(event) => console.log(event.detail.option)}`.
-- ``on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}``
-- `on:blur={myFunction}`
+   Triggers when all selected options are removed. The payload `event.detail.options` gives the options that were previously selected.
+
+1. ```ts
+   on:change={(event) => console.log(`${event.detail.type}: '${event.detail.option}'`)}
+   ```
+
+   Triggers when an option is either added or removed, or all options are removed at once. `type` is one of `'add' | 'remove' | 'removeAll'` and payload will be `option: Option` or `options: Option[]`, respectively.
+
+1. ```ts
+   on:blur={() => console.log('Multiselect input lost focus')}
+   ```
+
+   Triggers when the input field looses focus.
+
+For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
 ```svelte
 <MultiSelect
-  on:change={(e) => alert(`You ${e.detail.type}ed '${e.detail.option}'`)}
+  on:change={(e) => {
+    if (e.detail.type === 'add') alert(`You added ${e.detail.option}`)
+    if (e.detail.type === 'remove') alert(`You removed ${e.detail.option}`)
+    if (e.detail.type === 'removeAll') alert(`You removed ${e.detail.options}`)
+  }}
 />
 ```
 
+> Note: Depending on the data passed to the component the `options(s)` payload will either be objects or simple strings/numbers.
+
 ## TypeScript
 
 TypeScript users can import the types used for internal type safety:
@@ -385,7 +408,7 @@ There are 3 ways to style this component. To understand which options do what, i
 
 ### With CSS variables
 
-If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context. See [`app.css`](https://github.com/janosh/svelte-multiselect/blob/main/src/app.css) for how these variables are set for the demo site of this component.
+If you only want to make small adjustments, you can pass the following CSS variables directly to the component as props or define them in a `:global()` CSS context. See [`app.css`](https://github.com/janosh/svelte-multiselect/blob/main/src/app.css) for how these variables are set on the demo site of this component.
 
 - `div.multiselect`
   - `border: var(--sms-border, 1pt solid lightgray)`: Change this to e.g. to `1px solid red` to indicate this form field is in an invalid state.
@@ -393,9 +416,10 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `padding: var(--sms-padding, 0 3pt)`
   - `background: var(--sms-bg)`
   - `color: var(--sms-text-color)`
-  - `min-height: var(--sms-min-height)`
+  - `min-height: var(--sms-min-height, 19pt)`
   - `max-width: var(--sms-max-width)`
   - `margin: var(--sms-margin)`
+  - `font-size: var(--sms-font-size, inherit)`
 - `div.multiselect.open`
   - `z-index: var(--sms-open-z-index, 4)`: Increase this if needed to ensure the dropdown list is displayed atop all other page elements.
 - `div.multiselect:focus-within`
@@ -404,10 +428,10 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-disabled-bg, lightgray)`: Background when in disabled state.
 - `div.multiselect input::placeholder`
   - `color: var(--sms-placeholder-color)`
-  - `color: var(--sms-placeholder-opacity)`
+  - `opacity: var(--sms-placeholder-opacity)`
 - `div.multiselect > ul.selected > li`
   - `background: var(--sms-selected-bg, rgba(0, 0, 0, 0.15))`: Background of selected options.
-  - `padding: var(--sms-selected-li-padding, 5pt 1pt)`: Height of selected options.
+  - `padding: var(--sms-selected-li-padding, 1pt 5pt)`: 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 remove-icon buttons for removing all or individual selected options when in `:focus` or `:hover` state.
@@ -415,7 +439,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
   - `background: var(--sms-options-bg, white)`: Background of dropdown list.
   - `max-height: var(--sms-options-max-height, 50vh)`: Maximum height of options dropdown.
   - `overscroll-behavior: var(--sms-options-overscroll, none)`: Whether scroll events bubble to parent elements when reaching the top/bottom of the options dropdown. See [MDN](https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior).
-  - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black);`: Box shadow of dropdown list.
+  - `box-shadow: var(--sms-options-shadow, 0 0 14pt -8pt black)`: Box shadow of dropdown list.
 - `div.multiselect > ul.options > li`
   - `scroll-margin: var(--sms-options-scroll-margin, 100px)`: Top/bottom margin to keep between dropdown list items and top/bottom screen edge when auto-scrolling list to keep items in view.
 - `div.multiselect > ul.options > li.selected`