svelte-multiselect 11.3.0 → 11.4.0

package/dist/utils.js

@@ -1,10 +1,12 @@
+// Type guard for checking if a value is a non-null object
+export const is_object = (val) => typeof val === `object` && val !== null;
 // Get the label key from an option object or the option itself
 // if it's a string or number
 export const get_label = (opt) => {
-    if (opt instanceof Object) {
+    if (is_object(opt)) {
         if (opt.label === undefined) {
             const opt_str = JSON.stringify(opt);
-            console.error(`MultiSelect option ${opt_str} is an object but has no label key`);
+            console.error(`MultiSelect: option is an object but has no label key`, opt_str);
         }
         return opt.label;
     }
@@ -27,7 +29,7 @@ export function get_style(option, key = null) {
             if (key && key in option.style)
                 return option.style[key] ?? ``;
             else {
-                console.error(`Invalid style object for option=${JSON.stringify(option)}`);
+                console.error(`MultiSelect: invalid style object for option`, option);
             }
         }
     }

package/package.json

@@ -5,39 +5,46 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest --run && playwright test",
+    "check": "svelte-check"
+  },
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "peerDependencies": {
     "svelte": "^5.35.6"
   },
   "devDependencies": {
-    "@playwright/test": "^1.56.1",
-    "@stylistic/eslint-plugin": "^5.5.0",
+    "@playwright/test": "^1.57.0",
+    "@stylistic/eslint-plugin": "^5.6.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.48.4",
-    "@sveltejs/package": "2.5.4",
+    "@sveltejs/kit": "^2.49.1",
+    "@sveltejs/package": "2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^24.10.0",
-    "@vitest/coverage-v8": "^4.0.8",
+    "@types/node": "^24.10.1",
+    "@vitest/coverage-v8": "^4.0.15",
     "eslint": "^9.39.1",
-    "eslint-plugin-svelte": "^3.13.0",
-    "happy-dom": "^20.0.10",
+    "eslint-plugin-svelte": "^3.13.1",
+    "happy-dom": "^20.0.11",
     "hastscript": "^9.0.1",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.43.5",
-    "svelte-check": "^4.3.3",
+    "svelte": "^5.45.6",
+    "svelte-check": "^4.3.4",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
     "svelte2tsx": "^0.7.45",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.46.3",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.8"
+    "typescript-eslint": "^8.48.1",
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15"
   },
   "keywords": [
     "svelte",

package/readme.md

@@ -9,7 +9,7 @@
 [![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml)
 [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect)
 [![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/peer/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md)
-[![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05)
+[![Playground](https://img.shields.io/badge/Svelte-Playground-blue?label=Try%20it!)](https://svelte.dev/playground/a5a14b8f15d64cb083b567292480db05)
 [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect)
 
 </h4>
@@ -172,10 +172,18 @@ These are the core props you'll use in most cases:
    ```
 
 1. ```ts
-   placeholder: string | null = null
+   placeholder: string | { text: string; persistent?: boolean } | null = null
    ```
 
-   Text shown when no options are selected.
+   Text shown when no options are selected. Can be a simple string or an object with extended options:
+
+   ```svelte
+   <!-- Simple string -->
+   <MultiSelect placeholder="Choose..." />
+
+   <!-- Object with persistent option (stays visible even when options selected) -->
+   <MultiSelect placeholder={{ text: 'Add items...', persistent: true }} />
+   ```
 
 1. ```ts
    disabled: boolean = false
@@ -229,6 +237,41 @@ These are the core props you'll use in most cases:
 
 ### Advanced Props
 
+1. ```ts
+   loadOptions: LoadOptionsFn | LoadOptionsConfig = undefined
+   ```
+
+   **Dynamic loading for large datasets.** Enables lazy loading / infinite scroll instead of passing static `options`. Pass either a function or an object with config:
+
+   ```svelte
+   <!-- Simple: just a function -->
+   <MultiSelect loadOptions={myFetchFn} />
+
+   <!-- With config -->
+   <MultiSelect loadOptions={{ fetch: myFetchFn, debounceMs: 500, batchSize: 20 }} />
+   ```
+
+   The function receives `{ search, offset, limit }` and must return `{ options, hasMore }`:
+
+   ```ts
+   async function load_options({ search, offset, limit }) {
+     const response = await fetch(`/api/items?q=${search}&skip=${offset}&take=${limit}`)
+     const { items, total } = await response.json()
+     return { options: items, hasMore: offset + limit < total }
+   }
+   ```
+
+   Config options (when passing an object):
+
+   | Key          | Type      | Default | Description                                 |
+   | ------------ | --------- | ------- | ------------------------------------------- |
+   | `fetch`      | `fn`      | —       | Async function to load options (required)   |
+   | `debounceMs` | `number`  | `300`   | Debounce delay for search queries           |
+   | `batchSize`  | `number`  | `50`    | Number of options to load per batch         |
+   | `onOpen`     | `boolean` | `true`  | Whether to load options when dropdown opens |
+
+   Features automatic state management, debounced search, infinite scroll pagination, and loading indicators. See the [infinite-scroll demo](https://janosh.github.io/svelte-multiselect/infinite-scroll) for live examples.
+
 1. ```ts
    activeIndex: number | null = null  // bindable
    ```
@@ -268,10 +311,10 @@ These are the core props you'll use in most cases:
    Function to determine option equality. Default compares by lowercased label.
 
 1. ```ts
-   closeDropdownOnSelect: boolean | 'if-mobile' | 'retain-focus' = 'if-mobile'
+   closeDropdownOnSelect: boolean | 'if-mobile' | 'retain-focus' = false
    ```
 
-   Whether to close dropdown after selection. `'if-mobile'` closes dropdown on mobile devices only (responsive). `'retain-focus'` closes dropdown but keeps input focused for rapid typing to create custom options from text input (see `allowUserOptions`).
+   Whether to close dropdown after selection. `false` (default) keeps dropdown open for rapid multi-selection. `true` closes after each selection. `'if-mobile'` closes on mobile devices only (screen width below `breakpoint`). `'retain-focus'` closes dropdown but keeps input focused for rapid typing to create custom options from text input (see `allowUserOptions`).
 
 1. ```ts
    resetFilterOnAdd: boolean = true
@@ -349,12 +392,36 @@ These are the core props you'll use in most cases:
 
    Screen width (px) that separates 'mobile' from 'desktop' behavior.
 
+1. ```ts
+   fuzzy: boolean = true
+   ```
+
+   Whether to use fuzzy matching for filtering options. When `true` (default), matches non-consecutive characters (e.g., "ga" matches "Grapes" and "Green Apple"). When `false`, uses substring matching only.
+
 1. ```ts
    highlightMatches: boolean = true
    ```
 
    Whether to highlight matching text in dropdown options.
 
+1. ```ts
+   keepSelectedInDropdown: false | 'plain' | 'checkboxes' = false
+   ```
+
+   Controls whether selected options remain visible in dropdown. `false` (default) hides selected options. `'plain'` shows them with visual distinction. `'checkboxes'` prefixes each option with a checkbox.
+
+1. ```ts
+   selectAllOption: boolean | string = false
+   ```
+
+   Adds a "Select All" option at the top of the dropdown. `true` shows default label, or pass a custom string label.
+
+1. ```ts
+   liSelectAllClass: string = ''
+   ```
+
+   CSS class applied to the "Select All" `<li>` element.
+
 1. ```ts
    parseLabelsAsHtml: boolean = false
    ```
@@ -367,6 +434,12 @@ These are the core props you'll use in most cases:
 
    Whether selected options can be reordered by dragging.
 
+1. ```ts
+   selectedFlipParams: FlipParams = { duration: 100 }
+   ```
+
+   Animation parameters for the [Svelte flip animation](https://svelte.dev/docs/svelte/svelte-animate) when reordering selected options via drag-and-drop. Set `{ duration: 0 }` to disable animation. Accepts `duration`, `delay`, and `easing` properties.
+
 ### Message Props
 
 1. ```ts
@@ -682,7 +755,12 @@ You can also import [the types this component uses](https://github.com/janosh/sv
 
 ```ts
 import {
-  DispatchEvents,
+  LoadOptions, // Dynamic option loading callback
+  LoadOptionsConfig,
+  LoadOptionsFn,
+  LoadOptionsParams,
+  LoadOptionsResult,
+  MultiSelectEvents,
   MultiSelectEvents,
   ObjectOption,
   Option,