svelte-multiselect 5.0.2 → 5.0.3

package/MultiSelect.svelte

@@ -10,6 +10,7 @@ export let maxSelectMsg = null;
 export let disabled = false;
 export let disabledTitle = `This field is disabled`;
 export let options;
+export let matchingOptions = [];
 export let selected = [];
 export let selectedLabels = [];
 export let selectedValues = [];
@@ -68,6 +69,9 @@ $: 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;
 // add an option to selected list
 function add(label) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect)
@@ -225,7 +229,7 @@ function remove_all() {
     selected = [];
     searchText = ``;
 }
-$: isSelected = (label) => selectedLabels.includes(label);
+$: is_selected = (label) => selectedLabels.includes(label);
 const if_enter_or_space = (handler) => (event) => {
     if ([`Enter`, `Space`].includes(event.code)) {
         event.preventDefault();
@@ -348,10 +352,10 @@ const if_enter_or_space = (handler) => (event) => {
       <li
         on:mousedown|stopPropagation
         on:mouseup|stopPropagation={() => {
-          if (!disabled) isSelected(label) ? remove(label) : add(label)
+          if (!disabled) is_selected(label) ? remove(label) : add(label)
         }}
-        title={disabled ? disabledTitle : (isSelected(label) && selectedTitle) || title}
-        class:selected={isSelected(label)}
+        title={disabled ? disabledTitle : (is_selected(label) && selectedTitle) || title}
+        class:selected={is_selected(label)}
         class:active
         class:disabled
         class="{liOptionClass} {active ? liActiveOptionClass : ``}"

package/MultiSelect.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { CustomEvents, Option } from './';
+import { MultiSelectEvents, Option } from './';
 declare const __propDef: {
     props: {
         searchText?: string | undefined;
@@ -9,6 +9,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         disabledTitle?: string | undefined;
         options: Option[];
+        matchingOptions?: Option[] | undefined;
         selected?: Option[] | undefined;
         selectedLabels?: (string | number)[] | undefined;
         selectedValues?: unknown[] | undefined;
@@ -53,7 +54,7 @@ declare const __propDef: {
         };
     };
     getters: {};
-    events: CustomEvents;
+    events: MultiSelectEvents;
 };
 export declare type MultiSelectProps = typeof __propDef.props;
 export declare type MultiSelectEvents = typeof __propDef.events;

package/index.d.ts

@@ -28,7 +28,7 @@ export declare type DispatchEvents = {
     focus: undefined;
     blur: undefined;
 };
-export declare type CustomEvents = {
+export declare type MultiSelectEvents = {
     [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>;
 };
 export declare const get_label: (op: Option) => string | number;

package/package.json

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

package/readme.md

@@ -35,11 +35,6 @@
 
 ## Recent breaking changes
 
-- v4.0.0 renamed the slots for customizing how selected options and dropdown list items are rendered:
-
-  - old: `<slot name="renderOptions" />`, new: `<slot name="option" />`
-  - old: `<slot name="renderSelected" />`, new: `<slot name="selected" />`
-
 - 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`.
@@ -87,6 +82,7 @@ Full list of props/bindable variables for this component:
 | `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`.                                                                |
 | `selectedValues`       | `[]`                                | Values of currently selected options. Exposed just for convenience, equivalent to `selected.map(op => op.value)` when options are objects. If options are simple strings, `selected === selectedValues`. Supports binding but is read-only, i.e. since this value is reactive to `selected`, you cannot control `selected` by changing      `bind:selectedValues`.                                                                |
+| `matchingOptions`      | `Option[]`                          | List of options currently displayed to the user. Same as `options` unless the user entered `searchText` in which case this array contains only those options for which `filterFunc = (op: Option, searchText: string) => boolean` returned `true` (see [exposed methods](#exposed-methods) below for details on `filterFunc`).                                                                                                    |
 | `sortSelected`         | `boolean \| ((op1, op2) => number)` | 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.                                                                                                                                  |
 | `noOptionsMsg`         | `'No matching options'`             | What message to show if no options match the user-entered search string.                                                                                                                                                                                                                                                                                                                                                          |
 | `disabled`             | `false`                             | Disable the component. It will still be rendered but users won't be able to interact with it.                                                                                                                                                                                                                                                                                                                                     |
@@ -105,7 +101,7 @@ Full list of props/bindable variables for this component:
 | `removeBtnTitle`       | `'Remove'`                          | Title text to display when user hovers over button (cross icon) to remove selected option.                                                                                                                                                                                                                                                                                                                                        |
 | `removeAllTitle`       | `'Remove all'`                      | Title text to display when user hovers over remove-all button.                                                                                                                                                                                                                                                                                                                                                                    |
 | `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/en-US/docs/Web/HTML/Attributes/autocomplete) for other admissible values.                                                                                                                                                                                                                  |
+| `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. |
 
 </div>
@@ -250,7 +246,7 @@ If you only want to make small adjustments, you can pass the following CSS varia
 - `div.multiselect > ul.options`
   - `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/en-US/docs/Web/CSS/overscroll-behavior).
+  - `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.
 - `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.