svelte-multiselect 10.2.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

@@ -32,11 +32,16 @@ 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;
@@ -353,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
@@ -395,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
@@ -418,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"
@@ -446,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}
@@ -459,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}>
@@ -488,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}
@@ -570,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 {
@@ -602,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}>
@@ -641,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

@@ -23,11 +23,16 @@ declare class __sveltets_Render<Option extends T> {
         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.2.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.2.0"
+    "svelte": "4.2.12"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.4",
-    "@playwright/test": "^1.37.1",
-    "@sveltejs/adapter-static": "^2.0.3",
-    "@sveltejs/kit": "^1.24.1",
-    "@sveltejs/package": "2.2.2",
-    "@sveltejs/vite-plugin-svelte": "2.4.5",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
-    "@vitest/coverage-v8": "^0.34.4",
-    "eslint": "^8.49.0",
-    "eslint-plugin-svelte": "^2.33.1",
-    "hastscript": "^8.0.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.4.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "rehype-autolink-headings": "^7.0.0",
+    "prettier": "^3.2.5",
+    "prettier-plugin-svelte": "^3.2.2",
+    "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte-check": "^3.5.1",
-    "svelte-preprocess": "^5.0.4",
-    "svelte-toc": "^0.5.6",
-    "svelte-zoo": "^0.4.9",
-    "svelte2tsx": "^0.6.21",
-    "typescript": "5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "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

@@ -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
    ```
@@ -427,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)}`
@@ -445,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}`)}
@@ -605,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:
@@ -622,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>
 ```