svelte-multiselect 11.5.1 → 11.6.0

package/dist/types.d.ts

@@ -62,6 +62,30 @@ export interface MultiSelectEvents<T extends Option = Option> {
     onexpandAll?: (data: {
         groups: string[];
     }) => unknown;
+    onsearch?: (data: {
+        searchText: string;
+        matchingCount: number;
+    }) => unknown;
+    onmaxreached?: (data: {
+        selected: T[];
+        maxSelect: number;
+        attemptedOption: T;
+    }) => unknown;
+    onduplicate?: (data: {
+        option: T;
+    }) => unknown;
+    onactivate?: (data: {
+        option: T | null;
+        index: number | null;
+    }) => unknown;
+    onundo?: (data: {
+        previous: T[];
+        current: T[];
+    }) => unknown;
+    onredo?: (data: {
+        previous: T[];
+        current: T[];
+    }) => unknown;
 }
 export interface LoadOptionsParams {
     search: string;
@@ -206,11 +230,32 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     collapseAllGroups?: () => void;
     expandAllGroups?: () => void;
     shortcuts?: Partial<KeyboardShortcuts>;
+    history?: boolean | number;
+    undo?: () => boolean;
+    redo?: () => boolean;
+    canUndo?: boolean;
+    canRedo?: boolean;
 }
 export interface KeyboardShortcuts {
     select_all?: string | null;
     clear_all?: string | null;
     open?: string | null;
     close?: string | null;
+    undo?: string | null;
+    redo?: string | null;
+}
+export interface NavRouteObject {
+    href: string;
+    label?: string;
+    children?: string[];
+    disabled?: boolean | string;
+    separator?: boolean;
+    align?: `left` | `right`;
+    external?: boolean;
+    tooltip?: string;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
 }
+export type NavRoute = string | [string, string] | [string, string[]] | NavRouteObject;
 export {};

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { Option } from './types';
+export declare function get_uuid(): string;
 export declare const is_object: (val: unknown) => val is Record<string, unknown>;
 export declare const has_group: <T extends Option>(opt: T) => opt is T & {
     group: string;

package/dist/utils.js

@@ -1,3 +1,14 @@
+let uuid_counter = 0;
+// Generates a UUID for component IDs. Uses native crypto.randomUUID when available.
+// Fallback uses timestamp+counter - sufficient for DOM IDs (uniqueness, not security).
+// Cryptographic randomness is unnecessary here since these IDs are only used for
+// associating labels with inputs and ensuring unique DOM element identifiers.
+export function get_uuid() {
+    if (globalThis.crypto?.randomUUID)
+        return globalThis.crypto.randomUUID();
+    const hex = (Date.now().toString(16) + (uuid_counter++).toString(16)).padStart(32, `0`);
+    return hex.replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, `$1-$2-$3-$4-$5`);
+}
 // Type guard for checking if a value is a non-null object
 export const is_object = (val) => typeof val === `object` && val !== null;
 // Type guard for checking if an option has a group key

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.5.1",
+  "version": "11.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
@@ -13,40 +13,52 @@
     "preview": "vite preview",
     "test": "vitest --run && playwright test",
     "check": "svelte-check",
-    "package": "svelte-package",
-    "prepublishOnly": "svelte-package && test -d dist"
+    "package": "svelte-package && find dist -name '*.js' -o -name '*.d.ts' | xargs sed -i '' -E \"s/(\\.\\.?\\/[^'\\\"]*)\\.ts(['\\\"])/\\1.js\\2/g\"",
+    "prepublishOnly": "pnpm package"
   },
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "peerDependencies": {
-    "svelte": "^5.35.6"
+    "@wooorm/starry-night": "^3.0.0",
+    "abstract-syntax-tree": "^2.0.0",
+    "svelte": "^5.48.0",
+    "svelte-preprocess": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@wooorm/starry-night": {
+      "optional": true
+    },
+    "abstract-syntax-tree": {
+      "optional": true
+    },
+    "svelte-preprocess": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "@stylistic/eslint-plugin": "^5.6.1",
+    "@playwright/test": "^1.58.0",
+    "@stylistic/eslint-plugin": "^5.7.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.49.2",
+    "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.1",
-    "@types/node": "^25.0.3",
-    "@vitest/coverage-v8": "^4.0.16",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^25.0.10",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@wooorm/starry-night": "^3.9.0",
+    "abstract-syntax-tree": "^2.22.0",
     "eslint": "^9.39.2",
-    "eslint-plugin-svelte": "^3.13.1",
-    "happy-dom": "^20.0.11",
-    "hastscript": "^9.0.1",
+    "eslint-plugin-svelte": "^3.14.0",
+    "happy-dom": "^20.3.7",
     "mdsvex": "^0.12.6",
-    "mdsvexamples": "^0.5.0",
-    "rehype-autolink-headings": "^7.1.0",
-    "rehype-slug": "^6.0.0",
-    "svelte": "^5.46.1",
+    "svelte": "^5.48.2",
     "svelte-check": "^4.3.5",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
     "svelte2tsx": "^0.7.46",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.51.0",
-    "vite": "^7.3.0",
-    "vitest": "^4.0.16"
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "svelte",
@@ -72,6 +84,18 @@
     "./attachments": {
       "types": "./dist/attachments.d.ts",
       "default": "./dist/attachments.js"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.js"
+    },
+    "./heading-anchors": {
+      "types": "./dist/heading-anchors.d.ts",
+      "default": "./dist/heading-anchors.js"
+    },
+    "./live-examples": {
+      "types": "./dist/live-examples/index.d.ts",
+      "default": "./dist/live-examples/index.js"
     }
   },
   "types": "./dist/index.d.ts",

package/readme.md

@@ -802,6 +802,30 @@ Example using several snippets:
 
    Triggers when the dropdown list of options disappears. `event` is the DOM's `FocusEvent`, `KeyboardEvent` or `ClickEvent` that triggered the close.
 
+1. ```ts
+   onsearch={({ searchText, matchingCount }) => console.log(searchText, matchingCount)}
+   ```
+
+   Triggers (debounced, 150ms) when the search text changes. Useful for analytics or loading remote options. `searchText` is the current input value, `matchingCount` is the number of options that match.
+
+1. ```ts
+   onmaxreached={({ selected, maxSelect, attemptedOption }) => console.log(attemptedOption)}
+   ```
+
+   Triggers when a user tries to select more options than `maxSelect` allows. Useful for showing feedback. Does not fire for `maxSelect=1` (which uses replace behavior).
+
+1. ```ts
+   onduplicate={({ option }) => console.log(`Duplicate:`, option)}
+   ```
+
+   Triggers when a user tries to add an already-selected option (when `duplicates=false`). Useful for showing feedback to the user.
+
+1. ```ts
+   onactivate={({ option, index }) => console.log(`Active:`, option, index)}
+   ```
+
+   Triggers during keyboard navigation (ArrowUp/ArrowDown) through options. `option` is the newly active option, `index` is its position. Does not fire on mouse hover.
+
 For example, here's how you might annoy your users with an alert every time one or more options are added or removed:
 
 ```svelte
@@ -987,7 +1011,7 @@ This simplified version of the DOM structure of the component shows where these
 
 ### With global CSS
 
-Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#--styling).
+Odd as it may seem, you get the most fine-grained control over the styling of every part of this component by using the following `:global()` CSS selectors. `ul.selected` is the list of currently selected options rendered inside the component's input whereas `ul.options` is the list of available options that slides out when the component is in its `open` state. See also [simplified DOM structure](#styling).
 
 ```css
 :global(div.multiselect) {