svelte-multiselect 10.1.0 → 10.3.0

package/dist/CmdPalette.svelte

@@ -28,8 +28,8 @@ function close_if_outside(event) {
         open = false;
     }
 }
-function run_and_close(event) {
-    event.detail.option.action();
+function trigger_action_and_close(event) {
+    event.detail.option.action(event.detail.option.label);
     open = false;
 }
 </script>
@@ -42,7 +42,7 @@ function run_and_close(event) {
       options={actions}
       bind:input
       {placeholder}
-      on:add={run_and_close}
+      on:add={trigger_action_and_close}
       on:keydown={toggle}
       {...$$restProps}
       let:option

package/dist/MultiSelect.svelte

@@ -26,17 +26,22 @@ export let filterFunc = (opt, searchText) => {
         return true;
     return `${get_label(opt)}`.toLowerCase().includes(searchText.toLowerCase());
 };
-export let focusInputOnSelect = `desktop`;
+export let closeDropdownOnSelect = `desktop`;
 export let form_input = null;
 export let highlightMatches = true;
 export let id = null;
 export let input = null;
 export let inputClass = ``;
+export let inputStyle = null;
 export let inputmode = null;
 export let invalid = false;
 export let liActiveOptionClass = ``;
+export let liActiveUserMsgClass = ``;
 export let liOptionClass = ``;
+export let liOptionStyle = null;
 export let liSelectedClass = ``;
+export let liSelectedStyle = null;
+export let liUserMsgClass = ``;
 export let loading = false;
 export let matchingOptions = [];
 export let maxOptions = undefined;
@@ -63,8 +68,11 @@ export let selected = options
     .slice(0, maxSelect ?? undefined) ?? []; // don't allow more than maxSelect preselected options
 export let sortSelected = false;
 export let selectedOptionsDraggable = !sortSelected;
+export let style = null;
 export let ulOptionsClass = ``;
 export let ulSelectedClass = ``;
+export let ulSelectedStyle = null;
+export let ulOptionsStyle = null;
 export let value = null;
 const selected_to_value = (selected) => {
     value = maxSelect === 1 ? selected[0] ?? null : selected;
@@ -186,10 +194,13 @@ function add(option, event) {
                 selected = selected.sort(sortSelected);
             }
         }
-        if (selected.length === maxSelect)
+        const reached_max_select = selected.length === maxSelect;
+        const dropdown_should_close = closeDropdownOnSelect === true ||
+            (closeDropdownOnSelect === `desktop` && window_width < breakpoint);
+        if (reached_max_select || dropdown_should_close) {
             close_dropdown(event);
-        else if (focusInputOnSelect === true ||
-            (focusInputOnSelect === `desktop` && window_width > breakpoint)) {
+        }
+        else if (!dropdown_should_close) {
             input?.focus();
         }
         dispatch(`add`, { option });
@@ -302,10 +313,10 @@ async function handle_keydown(event) {
     }
 }
 function remove_all() {
-    selected = [];
-    searchText = ``;
     dispatch(`removeAll`, { options: selected });
     dispatch(`change`, { options: selected, type: `removeAll` });
+    selected = [];
+    searchText = ``;
 }
 $: is_selected = (label) => selected.map(get_label).includes(label);
 const if_enter_or_space = (handler) => (event) => {
@@ -350,7 +361,7 @@ let ul_options;
 // highlight text matching user-entered search text in available options
 function highlight_matching_options(event) {
     if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights)
-        return; // don't try if CSS highlight API not supported
+        return; // abort if CSS highlight API not supported
     // clear previous ranges from HighlightRegistry
     CSS.highlights.clear();
     // get input's search query
@@ -392,9 +403,11 @@ function highlight_matching_options(event) {
         });
     });
     // create Highlight object from ranges and add to registry
-    // eslint-disable-next-line no-undef
     CSS.highlights.set(`sms-search-matches`, new Highlight(...ranges.flat()));
 }
+// reset form validation when required prop changes
+// https://github.com/janosh/svelte-multiselect/issues/285
+$: required, form_input?.setCustomValidity(``);
 </script>
 
 <svelte:window
@@ -415,12 +428,13 @@ function highlight_matching_options(event) {
   data-id={id}
   role="searchbox"
   tabindex="-1"
+  {style}
 >
   <!-- 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}
-    required={Boolean(required)}
+    {required}
     value={selected.length >= Number(required) ? JSON.stringify(selected) : null}
     tabindex="-1"
     aria-hidden="true"
@@ -443,7 +457,11 @@ function highlight_matching_options(event) {
   <slot name="expand-icon" {open}>
     <ExpandIcon width="15px" style="min-width: 1em; padding: 0 1pt; cursor: pointer;" />
   </slot>
-  <ul class="selected {ulSelectedClass}" aria-label="selected options">
+  <ul
+    class="selected {ulSelectedClass}"
+    aria-label="selected options"
+    style={ulSelectedStyle}
+  >
     {#each selected as option, idx (duplicates ? [key(option), idx] : key(option))}
       <li
         class={liSelectedClass}
@@ -456,7 +474,7 @@ function highlight_matching_options(event) {
         on:dragenter={() => (drag_idx = idx)}
         on:dragover|preventDefault
         class:active={drag_idx === idx}
-        style={get_style(option, `selected`)}
+        style="{get_style(option, `selected`)} {liSelectedStyle}"
       >
         <!-- on:dragover|preventDefault needed for the drop to succeed https://stackoverflow.com/a/31085796 -->
         <slot name="selected" {option} {idx}>
@@ -485,6 +503,7 @@ function highlight_matching_options(event) {
     {/each}
     <input
       class={inputClass}
+      style={inputStyle}
       bind:this={input}
       bind:value={searchText}
       on:mouseup|self|stopPropagation={open_dropdown}
@@ -567,6 +586,7 @@ function highlight_matching_options(event) {
       aria-expanded={open}
       aria-disabled={disabled ? `true` : null}
       bind:this={ul_options}
+      style={ulOptionsStyle}
     >
       {#each matchingOptions.slice(0, Math.max(0, maxOptions ?? 0) || Infinity) as option, idx}
         {@const {
@@ -599,7 +619,7 @@ function highlight_matching_options(event) {
           on:blur={() => (activeIndex = null)}
           role="option"
           aria-selected="false"
-          style={get_style(option, `option`)}
+          style="{get_style(option, `option`)} {liOptionStyle}"
         >
           <slot name="option" {option} {idx}>
             <slot {option} {idx}>
@@ -615,9 +635,9 @@ function highlight_matching_options(event) {
       {#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 can_create = Boolean(allowUserOptions && createOptionMsg) && `create`}
         {@const no_match =
-          matchingOptions?.length == 0 && noMatchingOptionsMsg && `no-match`}
+          Boolean(matchingOptions?.length == 0 && noMatchingOptionsMsg) && `no-match`}
         {@const msgType = is_dupe || can_create || no_match}
         {#if msgType}
           {@const msg = {
@@ -638,7 +658,9 @@ function highlight_matching_options(event) {
             on:blur={() => (option_msg_is_active = false)}
             role="option"
             aria-selected="false"
-            class="user-msg"
+            class="user-msg {liUserMsgClass} {option_msg_is_active
+              ? liActiveUserMsgClass
+              : ``}"
             style:cursor={{
               dupe: `not-allowed`,
               create: `pointer`,

package/dist/MultiSelect.svelte.d.ts

@@ -17,17 +17,22 @@ declare class __sveltets_Render<Option extends T> {
         duplicates?: boolean | undefined;
         key?: ((opt: T) => unknown) | undefined;
         filterFunc?: ((opt: Option, searchText: string) => boolean) | undefined;
-        focusInputOnSelect?: boolean | "desktop" | undefined;
+        closeDropdownOnSelect?: boolean | "desktop" | undefined;
         form_input?: HTMLInputElement | null | undefined;
         highlightMatches?: boolean | undefined;
         id?: string | null | undefined;
         input?: HTMLInputElement | null | undefined;
         inputClass?: string | undefined;
+        inputStyle?: string | null | undefined;
         inputmode?: string | null | undefined;
         invalid?: boolean | undefined;
         liActiveOptionClass?: string | undefined;
+        liActiveUserMsgClass?: string | undefined;
         liOptionClass?: string | undefined;
+        liOptionStyle?: string | null | undefined;
         liSelectedClass?: string | undefined;
+        liSelectedStyle?: string | null | undefined;
+        liUserMsgClass?: string | undefined;
         loading?: boolean | undefined;
         matchingOptions?: Option[] | undefined;
         maxOptions?: number | undefined;
@@ -52,8 +57,11 @@ declare class __sveltets_Render<Option extends T> {
         selected?: Option[] | undefined;
         sortSelected?: boolean | ((op1: Option, op2: Option) => number) | undefined;
         selectedOptionsDraggable?: boolean | undefined;
+        style?: string | null | undefined;
         ulOptionsClass?: string | undefined;
         ulSelectedClass?: string | undefined;
+        ulSelectedStyle?: string | null | undefined;
+        ulOptionsStyle?: string | null | undefined;
         value?: Option | Option[] | null | undefined;
     };
     events(): MultiSelectEvents;
@@ -93,8 +101,8 @@ declare class __sveltets_Render<Option extends T> {
     };
 }
 export type MultiSelectProps<Option extends T> = ReturnType<__sveltets_Render<Option>['props']>;
-export type MultiSelectEvents<Option extends T> = ReturnType<__sveltets_Render<Option>['events']>;
+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 SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
+export default class MultiSelect<Option extends T> extends SvelteComponent<MultiSelectProps<Option>, MultiSelectEvents_<Option>, MultiSelectSlots<Option>> {
 }
 export {};

package/dist/utils.d.ts

@@ -3,4 +3,4 @@ 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;
+} | string | number, key?: 'selected' | 'option' | null): string;

package/dist/utils.js

@@ -8,23 +8,27 @@ export const get_label = (opt) => {
     }
     return `${opt}`;
 };
+// this function is used extract CSS strings from a {selected, option} style object to be used in the style attribute of the option
+// if the style is a string, it will be returned as is
 export function get_style(option, key = null) {
-    if (!option?.style)
-        return null;
+    let css_str = ``;
     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;
+            css_str = option.style;
         }
         if (typeof option.style == `object`) {
             if (key && key in option.style)
-                return option.style[key];
+                return option.style[key] ?? ``;
             else {
                 console.error(`Invalid style object for option=${JSON.stringify(option)}`);
             }
         }
     }
+    // ensure css_str ends with a semicolon
+    if (css_str.trim() && !css_str.trim().endsWith(`;`))
+        css_str += `;`;
+    return css_str;
 }

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "10.1.0",
+  "version": "10.3.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -23,37 +23,38 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^4.0.5"
+    "svelte": "4.2.12"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.4",
-    "@playwright/test": "^1.36.1",
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@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.1.0",
+    "@iconify/svelte": "^3.1.6",
+    "@playwright/test": "^1.43.0",
+    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/package": "2.3.1",
+    "@sveltejs/vite-plugin-svelte": "3.0.2",
+    "@vitest/coverage-v8": "^1.4.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "hastscript": "^9.0.0",
+    "highlight.js": "^11.9.0",
+    "jsdom": "^24.0.0",
     "mdsvex": "^0.11.0",
-    "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.4.6",
-    "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.5",
-    "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.19",
-    "typescript": "5.1.6",
-    "vite": "^4.4.4",
-    "vitest": "^0.33.0"
+    "mdsvexamples": "^0.4.1",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "svelte-check": "^3.6.9",
+    "svelte-multiselect": "^10.2.0",
+    "svelte-preprocess": "^5.1.3",
+    "svelte-toc": "^0.5.8",
+    "svelte-zoo": "^0.4.10",
+    "svelte2tsx": "^0.7.6",
+    "typescript": "5.4.4",
+    "typescript-eslint": "^7.5.0",
+    "vite": "^5.1.5",
+    "vitest": "^1.4.0"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -194,10 +194,10 @@ Full list of props/bindable variables for this component. The `Option` type you
    Customize how dropdown options are filtered when user enters search string into `<MultiSelect />`. Defaults to:
 
 1. ```ts
-   focusInputOnSelect: boolean | 'desktop' = `desktop`
+   closeDropdownOnSelect: boolean | 'desktop' = `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).
+   One of `true`, `false` or `'desktop'`. Whether to close the dropdown list after selecting a dropdown item. If `true`, component will loose focus and `dropdown` is closed. `'desktop'` means `false` if current window width is larger than the current value of `breakpoint` prop (default is 800, meaning screen width in pixels). This is to align with the default behavior of many mobile browsers like Safari which close dropdowns after selecting an option while desktop browsers facilitate multi-selection by leaving dropdowns open.
 
 1. ```ts
    form_input: HTMLInputElement | null = null
@@ -229,12 +229,30 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    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
+   inputStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<input>` element.
+
 1. ```ts
    invalid: boolean = false
    ```
 
    If `required = true, 1, 2, ...` and user tries to submit form but `selected = []` is empty/`selected.length < required`, `invalid` is automatically set to `true` and CSS class `invalid` applied to the top-level `div.multiselect`. `invalid` class is removed as soon as any change to `selected` is registered. `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.
 
+1. ```ts
+   liOptionStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<li>` elements that wrap the dropdown options.
+
+1. ```ts
+   liSelectedStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<li>` elements that wrap the selected options.
+
 1. ```ts
    loading: boolean = false
    ```
@@ -304,7 +322,7 @@ Full list of props/bindable variables for this component. The `Option` type you
    options: Option[]
    ```
 
-   **The only required prop** (no default). Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. A few keys like `preselected` and `title` have special meaning though. See type `ObjectOption` in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for all special keys and their purpose.
+   **The only required prop** (no default). Array of strings/numbers or `Option` objects to be listed in the dropdown. The only required key on objects is `label` which must also be unique. An object's `value` defaults to `label` if `undefined`. You can add arbitrary additional keys to your option objects. A few keys like `preselected` and `title` have special meaning though. See type `ObjectOption` in [`/src/lib/types.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/types.ts) for all special keys and their purpose.
 
 1. ```ts
    outerDiv: HTMLDivElement | null = null
@@ -381,6 +399,24 @@ Full list of props/bindable variables for this component. The `Option` type you
 
    Whether selected options are draggable so users can change their order.
 
+1. ```ts
+   style: string | null = null
+   ```
+
+   One-off CSS rules applied to the outer `<div class="multiselect">` that wraps the whole component for passing one-off CSS.
+
+1. ```ts
+   ulSelectedStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<ul class="selected">` that wraps the list of selected options.
+
+1. ```ts
+   ulOptionsStyle: string | null = null
+   ```
+
+   One-off CSS rules applied to the `<ul class="options">` that wraps the list of selected options.
+
 1. ```ts
    value: Option | Option[] | null = null
    ```
@@ -397,13 +433,11 @@ 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.
-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`.
+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). Receives props:
+   - `searchText`: The text user typed into search input.
+   - `msgType: false | 'create' | 'dupe' | 'no-match'`: `'dupe'` means user input is a duplicate of an existing option. `'create'` means user is allowed to convert their input into a new option not previously in the dropdown. `'no-match'` means user input doesn't match any dropdown items and users are not allowed to create new options. `false` means none of the above.
+   - `msg`: Will be `duplicateOptionMsg` or `createOptionMsg` (see [props](#🔣-props)) based on whether user input is a duplicate or can be created as new option. Note this slot replaces the default UI for displaying these messages so the slot needs to render them instead (unless purposely not showing a message).
+1. `slot='after-input'`: Placed after the search input. For arbitrary content like icons or temporary messages. Receives props `selected: Option[]`, `disabled: boolean`, `invalid: boolean`, `id: string | null`, `placeholder: string`, `open: boolean`, `required: boolean`. Can serve as a more dynamic, more customizable alternative to the `placeholder` prop.
 
 Example using several slots:
 
@@ -429,13 +463,13 @@ Example using several slots:
    on:add={(event) => console.log(event.detail.option)}
    ```
 
-   Triggers when a new option is selected.
+   Triggers when a new option is selected. The newly selected option is provided as `event.detail.option`.
 
 1. ```ts
    on:remove={(event) => console.log(event.detail.option)}`
    ```
 
-   Triggers when one selected option provided as `event.detail.option` is removed.
+   Triggers when a single selected option is removed. The removed option is provided as `event.detail.option`.
 
 1. ```ts
    on:removeAll={(event) => console.log(event.detail.options)}`
@@ -447,7 +481,7 @@ Example using several slots:
    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.
+   Triggers when an option is either added (selected) or removed from selected, or all selected 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:open={(event) => console.log(`Multiselect dropdown was opened by ${event}`)}
@@ -607,6 +641,8 @@ The second method allows you to pass in custom classes to the important DOM elem
 - `ulOptionsClass`: available options listed in the dropdown when component is in `open` state
 - `liOptionClass`: list items selectable from dropdown list
 - `liActiveOptionClass`: the currently active dropdown list item (i.e. hovered or navigated to with arrow keys)
+- `liUserMsgClass`: user message (last child of dropdown list when no options match user input)
+- `liActiveUserMsgClass`: user message when active (i.e. hovered or navigated to with arrow keys)
 - `maxSelectMsgClass`: small span towards the right end of the input field displaying to the user how many of the allowed number of options they've already selected
 
 This simplified version of the DOM structure of the component shows where these classes are inserted:
@@ -624,6 +660,10 @@ This simplified version of the DOM structure of the component shows where these
     <li class="{liOptionClass} {liActiveOptionClass}">
       Option 2 (currently active)
     </li>
+    ...
+    <li class="{liUserMsgClass} {liActiveUserMsgClass}">
+      Create this option...
+    </li>
   </ul>
 </div>
 ```