svelte-multiselect 11.5.1 → 11.5.2

package/dist/CodeExample.svelte

@@ -74,7 +74,7 @@ const links = { target: `_blank`, rel: `noreferrer` };
     transition-duration: var(--code-example-pre-transition-duration, 0.3s);
     border-radius: var(--code-example-pre-border-radius, 4pt);
     background-color: var(--code-example-pre-bg, var(--pre-bg));
-    padding: var(--code-example-pre-padding, 1em);
+    padding: var(--code-example-pre-padding, 1ex 1em);
   }
   pre.open {
     visibility: visible;

package/dist/MultiSelect.svelte

@@ -26,7 +26,7 @@ loadOptions,
 // Animation parameters for selected options flip animation
 selectedFlipParams = { duration: 100 }, 
 // Option grouping feature
-collapsibleGroups = false, collapsedGroups = $bindable(new Set()), groupSelectAll = false, ungroupedPosition = `first`, groupSortOrder = `none`, searchExpandsCollapsedGroups = false, searchMatchesGroups = false, keyboardExpandsCollapsedGroups = false, stickyGroupHeaders = false, liGroupHeaderClass = ``, liGroupHeaderStyle = null, groupHeader, ongroupToggle, oncollapseAll, onexpandAll, collapseAllGroups = $bindable(), expandAllGroups = $bindable(), 
+collapsibleGroups = false, collapsedGroups = $bindable(new Set()), groupSelectAll = false, ungroupedPosition = `first`, groupSortOrder = `none`, searchExpandsCollapsedGroups = false, searchMatchesGroups = false, keyboardExpandsCollapsedGroups = false, stickyGroupHeaders = false, liGroupHeaderClass = ``, liGroupHeaderStyle = null, groupHeader, ongroupToggle, oncollapseAll, onexpandAll, onsearch, onmaxreached, onduplicate, onactivate, collapseAllGroups = $bindable(), expandAllGroups = $bindable(), 
 // Keyboard shortcuts for common actions
 shortcuts = {}, ...rest } = $props();
 // Generate unique IDs for ARIA associations (combobox pattern)
@@ -125,6 +125,30 @@ $effect(() => {
         return () => clearTimeout(timer);
     }
 });
+// Debounced onsearch event - fires 150ms after search text stops changing
+let search_debounce_timer = null;
+let search_initialized = false;
+$effect(() => {
+    const current_search = searchText;
+    // Skip initial mount - only fire on actual user input
+    if (!search_initialized) {
+        search_initialized = true;
+        return;
+    }
+    if (!onsearch)
+        return; // cleanup handles any pending timer
+    search_debounce_timer = setTimeout(() => {
+        // Optional chaining in case onsearch is removed while timer is pending
+        onsearch?.({
+            searchText: current_search,
+            matchingCount: matchingOptions.length,
+        });
+    }, 150);
+    return () => {
+        if (search_debounce_timer)
+            clearTimeout(search_debounce_timer);
+    };
+});
 // Internal state for loadOptions feature (null = never loaded)
 let loaded_options = $state([]);
 let load_options_has_more = $state(true);
@@ -272,40 +296,44 @@ function sort_selected(items) {
     }
     return items;
 }
-if (!loadOptions && !((options?.length ?? 0) > 0)) {
-    if (allowUserOptions || loading || disabled || allowEmpty) {
-        options = []; // initializing as array avoids errors when component mounts
-    }
-    else {
-        // error on empty options if user is not allowed to create custom options and loading is false
-        // and component is not disabled and allowEmpty is false
-        console.error(`MultiSelect: received no options`);
+untrack(() => {
+    if (!loadOptions && !((options?.length ?? 0) > 0)) {
+        if (allowUserOptions || loading || disabled || allowEmpty) {
+            options = []; // initializing as array avoids errors when component mounts
+        }
+        else {
+            // error on empty options if user is not allowed to create custom options and loading is false
+            // and component is not disabled and allowEmpty is false
+            console.error(`MultiSelect: received no options`);
+        }
     }
-}
+});
 if (maxSelect !== null && maxSelect < 1) {
     console.error(`MultiSelect: maxSelect must be null or positive integer, got ${maxSelect}`);
 }
 if (!Array.isArray(selected)) {
     console.error(`MultiSelect: selected prop should always be an array, got ${selected}`);
 }
-if (maxSelect && typeof required === `number` && required > maxSelect) {
-    console.error(`MultiSelect: maxSelect=${maxSelect} < required=${required}, makes it impossible for users to submit a valid form`);
-}
-if (parseLabelsAsHtml && allowUserOptions) {
-    console.warn(`MultiSelect: don't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
-}
-if (sortSelected && selectedOptionsDraggable) {
-    console.warn(`MultiSelect: sortSelected and selectedOptionsDraggable should not be combined as any ` +
-        `user re-orderings of selected options will be undone by sortSelected on component re-renders.`);
-}
-if (allowUserOptions && !createOptionMsg && createOptionMsg !== null) {
-    console.error(`MultiSelect: allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
-        `This prevents the "Add option" <span> from showing up, resulting in a confusing user experience.`);
-}
-if (maxOptions &&
-    (typeof maxOptions != `number` || maxOptions < 0 || maxOptions % 1 != 0)) {
-    console.error(`MultiSelect: maxOptions must be undefined or a positive integer, got ${maxOptions}`);
-}
+$effect(() => {
+    if (maxSelect && typeof required === `number` && required > maxSelect) {
+        console.error(`MultiSelect: maxSelect=${maxSelect} < required=${required}, makes it impossible for users to submit a valid form`);
+    }
+    if (parseLabelsAsHtml && allowUserOptions) {
+        console.warn(`MultiSelect: don't combine parseLabelsAsHtml and allowUserOptions. It's susceptible to XSS attacks!`);
+    }
+    if (sortSelected && selectedOptionsDraggable) {
+        console.warn(`MultiSelect: sortSelected and selectedOptionsDraggable should not be combined as any ` +
+            `user re-orderings of selected options will be undone by sortSelected on component re-renders.`);
+    }
+    if (allowUserOptions && !createOptionMsg && createOptionMsg !== null) {
+        console.error(`MultiSelect: allowUserOptions=${allowUserOptions} but createOptionMsg=${createOptionMsg} is falsy. ` +
+            `This prevents the "Add option" <span> from showing up, resulting in a confusing user experience.`);
+    }
+    if (maxOptions &&
+        (typeof maxOptions != `number` || maxOptions < 0 || maxOptions % 1 != 0)) {
+        console.error(`MultiSelect: maxOptions must be undefined or a positive integer, got ${maxOptions}`);
+    }
+});
 let option_msg_is_active = $state(false); // controls active state of <li>{createOptionMsg}</li>
 let window_width = $state(0);
 // Check if option matches search text (label or optionally group name)
@@ -367,6 +395,14 @@ function add(option_to_add, event) {
         option_to_add = Number(option_to_add); // convert to number if possible
     }
     const is_duplicate = selected_keys_set.has(key(option_to_add));
+    const max_reached = maxSelect !== null && maxSelect !== 1 &&
+        selected.length >= maxSelect;
+    // Fire events for blocked add attempts
+    if (max_reached) {
+        onmaxreached?.({ selected, maxSelect, attemptedOption: option_to_add });
+    }
+    if (is_duplicate && !duplicates)
+        onduplicate?.({ option: option_to_add });
     if ((maxSelect === null || maxSelect === 1 || selected.length < maxSelect) &&
         (duplicates || !is_duplicate)) {
         if (!effective_options.includes(option_to_add) && // first check if we find option in the options list
@@ -503,6 +539,11 @@ async function handle_arrow_navigation(direction) {
     }
     else {
         const total = navigable_options.length + (has_user_msg ? 1 : 0);
+        // Guard against division by zero (can happen if options filtered away before effect resets activeIndex)
+        if (total === 0) {
+            activeIndex = null;
+            return;
+        }
         activeIndex = (activeIndex + direction + total) % total; // +total handles negative mod
     }
     // update active state based on new index
@@ -514,6 +555,8 @@ async function handle_arrow_navigation(direction) {
         await tick();
         document.querySelector(`ul.options > li.active`)?.scrollIntoViewIfNeeded?.();
     }
+    // Fire onactivate for keyboard navigation only (not mouse hover)
+    onactivate?.({ option: activeOption, index: activeIndex });
 }
 // handle all keyboard events this component receives
 async function handle_keydown(event) {
@@ -1359,7 +1402,9 @@ function handle_options_scroll(event) {
     border: 0;
   }
 
-  :is(div.multiselect) {
+  /* Use :where() for elements with user-overridable class props (outerDivClass, ulSelectedClass, liSelectedClass)
+     so user-provided classes take precedence. See: https://github.com/janosh/svelte-multiselect/issues/380 */
+  :where(div.multiselect) {
     position: relative;
     align-items: center;
     display: flex;
@@ -1376,27 +1421,27 @@ function handle_options_scroll(event) {
     min-height: var(--sms-min-height, 22pt);
     margin: var(--sms-margin);
   }
-  :is(div.multiselect.open) {
+  :where(div.multiselect.open) {
     /* increase z-index when open to ensure the dropdown of one <MultiSelect />
     displays above that of another slightly below it on the page */
     z-index: var(--sms-open-z-index, 4);
   }
-  :is(div.multiselect:focus-within) {
+  :where(div.multiselect:focus-within) {
     border: var(--sms-focus-border, 1pt solid var(--sms-active-color, cornflowerblue));
   }
-  :is(div.multiselect.disabled) {
+  :where(div.multiselect.disabled) {
     background: var(--sms-disabled-bg, light-dark(lightgray, #444));
     cursor: not-allowed;
   }
 
-  :is(div.multiselect > ul.selected) {
+  :where(div.multiselect > ul.selected) {
     display: flex;
     flex: 1;
     padding: 0;
     margin: 0;
     flex-wrap: wrap;
   }
-  :is(div.multiselect > ul.selected > li) {
+  :where(div.multiselect > ul.selected > li) {
     align-items: center;
     border-radius: 3pt;
     display: flex;
@@ -1411,10 +1456,10 @@ function handle_options_scroll(event) {
     padding: var(--sms-selected-li-padding, 1pt 5pt);
     color: var(--sms-selected-text-color, var(--sms-text-color));
   }
-  :is(div.multiselect > ul.selected > li[draggable='true']) {
+  :where(div.multiselect > ul.selected > li[draggable='true']) {
     cursor: grab;
   }
-  :is(div.multiselect > ul.selected > li.active) {
+  :where(div.multiselect > ul.selected > li.active) {
     background: var(
       --sms-li-active-bg,
       var(--sms-active-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)))
@@ -1448,7 +1493,7 @@ function handle_options_scroll(event) {
     margin: auto 0; /* CSS reset */
     padding: 0; /* CSS reset */
   }
-  :is(div.multiselect > ul.selected > input) {
+  :where(div.multiselect > ul.selected > input) {
     border: none;
     outline: none;
     background: none;
@@ -1462,7 +1507,7 @@ function handle_options_scroll(event) {
   }
 
   /* When options are selected, placeholder is hidden in which case we minimize input width to avoid adding unnecessary width to div.multiselect */
-  :is(div.multiselect > ul.selected > input:not(:placeholder-shown)) {
+  :where(div.multiselect > ul.selected > input:not(:placeholder-shown)) {
     min-width: 1px; /* Minimal width to remain interactive */
   }
 
@@ -1483,7 +1528,8 @@ function handle_options_scroll(event) {
     pointer-events: none;
   }
 
-  ul.options {
+  /* Use :where() for ul.options elements with class props (ulOptionsClass, liOptionClass, liUserMsgClass) */
+  :where(ul.options) {
     list-style: none;
     /* top, left, width, position are managed by portal when active */
     /* but provide defaults for non-portaled or initial state */
@@ -1511,24 +1557,24 @@ function handle_options_scroll(event) {
     padding: var(--sms-options-padding);
     margin: var(--sms-options-margin, 6pt 0 0 0);
   }
-  ul.options.hidden {
+  :where(ul.options.hidden) {
     visibility: hidden;
     opacity: 0;
     transform: translateY(50px);
     pointer-events: none;
   }
-  ul.options > li {
+  :where(ul.options > li) {
     padding: 3pt 1ex;
     cursor: pointer;
     scroll-margin: var(--sms-options-scroll-margin, 100px);
     border-left: 3px solid transparent;
   }
-  ul.options .user-msg {
+  :where(ul.options .user-msg) {
     /* block needed so vertical padding applies to span */
     display: block;
     padding: 3pt 2ex;
   }
-  ul.options > li.selected {
+  :where(ul.options > li.selected) {
     background: var(
       --sms-li-selected-plain-bg,
       light-dark(rgba(0, 123, 255, 0.1), rgba(100, 180, 255, 0.2))
@@ -1538,26 +1584,26 @@ function handle_options_scroll(event) {
       3px solid var(--sms-active-color, cornflowerblue)
     );
   }
-  ul.options > li.active {
+  :where(ul.options > li.active) {
     background: var(
       --sms-li-active-bg,
       var(--sms-active-color, light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)))
     );
   }
-  ul.options > li.disabled {
+  :where(ul.options > li.disabled) {
     cursor: not-allowed;
     background: var(--sms-li-disabled-bg, light-dark(#f5f5f6, #2a2a2a));
     color: var(--sms-li-disabled-text, light-dark(#b8b8b8, #666));
   }
-  /* Checkbox styling for keepSelectedInDropdown='checkboxes' mode */
-  ul.options > li > input.option-checkbox {
+  /* Checkbox styling for keepSelectedInDropdown='checkboxes' mode - internal, no class prop */
+  :is(ul.options > li > input.option-checkbox) {
     width: 16px;
     height: 16px;
     margin-right: 6px;
     accent-color: var(--sms-active-color, cornflowerblue);
   }
-  /* Select all option styling */
-  ul.options > li.select-all {
+  /* Select all option styling - has liSelectAllClass prop */
+  :where(ul.options > li.select-all) {
     border-bottom: var(
       --sms-select-all-border-bottom,
       1px solid light-dark(lightgray, #555)
@@ -1567,7 +1613,7 @@ function handle_options_scroll(event) {
     background: var(--sms-select-all-bg, transparent);
     margin-bottom: var(--sms-select-all-margin-bottom, 2pt);
   }
-  ul.options > li.select-all:hover {
+  :where(ul.options > li.select-all:hover) {
     background: var(
       --sms-select-all-hover-bg,
       var(
@@ -1579,8 +1625,8 @@ function handle_options_scroll(event) {
       )
     );
   }
-  /* Group header styling */
-  ul.options > li.group-header {
+  /* Group header styling - has liGroupHeaderClass prop */
+  :where(ul.options > li.group-header) {
     display: flex;
     align-items: center;
     font-weight: var(--sms-group-header-font-weight, 600);
@@ -1593,30 +1639,31 @@ function handle_options_scroll(event) {
     text-transform: var(--sms-group-header-text-transform, uppercase);
     letter-spacing: var(--sms-group-header-letter-spacing, 0.5px);
   }
-  ul.options > li.group-header:not(:first-child) {
+  :where(ul.options > li.group-header:not(:first-child)) {
     margin-top: var(--sms-group-header-margin-top, 4pt);
     border-top: var(--sms-group-header-border-top, 1px solid light-dark(#eee, #333));
   }
-  ul.options > li.group-header.collapsible {
+  :where(ul.options > li.group-header.collapsible) {
     cursor: pointer;
   }
-  ul.options > li.group-header.collapsible:hover {
+  :where(ul.options > li.group-header.collapsible:hover) {
     background: var(
       --sms-group-header-hover-bg,
       light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))
     );
   }
-  ul.options > li.group-header .group-label {
+  /* Internal elements without class props - keep :is() for specificity */
+  :is(ul.options > li.group-header .group-label) {
     flex: 1;
   }
-  ul.options > li.group-header .group-count {
+  :is(ul.options > li.group-header .group-count) {
     opacity: 0.6;
     font-size: 0.9em;
     font-weight: normal;
     margin-left: 4pt;
   }
   /* Sticky group headers when enabled */
-  ul.options > li.group-header.sticky {
+  :where(ul.options > li.group-header.sticky) {
     position: sticky;
     top: 0;
     z-index: 1;
@@ -1626,17 +1673,20 @@ function handle_options_scroll(event) {
     );
   }
   /* Indent grouped options for visual hierarchy */
-  ul.options > li:not(.group-header):not(.select-all):not(.user-msg):not(.loading-more) {
+  :where(
+    ul.options > li:not(.group-header):not(.select-all):not(.user-msg):not(.loading-more)
+  ) {
     padding-left: var(
       --sms-group-item-padding-left,
       var(--sms-group-option-indent, 1.5ex)
     );
   }
-  /* Collapse/expand animation for group chevron icon */
-  ul.options > li.group-header :global(svg) {
+  /* Collapse/expand animation for group chevron icon - internal, keep :is() for specificity */
+  :is(ul.options > li.group-header) :global(svg) {
     transition: transform var(--sms-group-collapse-duration, 0.15s) ease-out;
   }
-  ul.options > li.group-header button.group-select-all {
+  /* Keep :is() for internal buttons without class props */
+  :is(ul.options > li.group-header button.group-select-all) {
     font-size: 0.9em;
     font-weight: normal;
     text-transform: none;
@@ -1649,23 +1699,23 @@ function handle_options_scroll(event) {
     border-radius: 3pt;
     aspect-ratio: auto; /* override global button aspect-ratio: 1 */
   }
-  ul.options > li.group-header button.group-select-all:hover {
+  :is(ul.options > li.group-header button.group-select-all:hover) {
     background: var(
       --sms-group-select-all-hover-bg,
       light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1))
     );
   }
-  ul.options > li.group-header button.group-select-all.deselect {
+  :is(ul.options > li.group-header button.group-select-all.deselect) {
     color: var(--sms-group-deselect-color, light-dark(#c44, #f77));
   }
-  :is(span.max-select-msg) {
+  :where(span.max-select-msg) {
     padding: 0 3pt;
   }
   ::highlight(sms-search-matches) {
     color: light-dark(#1a8870, mediumaquamarine);
   }
-  /* Loading more indicator for infinite scrolling */
-  ul.options > li.loading-more {
+  /* Loading more indicator for infinite scrolling - internal, no class prop */
+  :is(ul.options > li.loading-more) {
     display: flex;
     justify-content: center;
     align-items: center;