@stackline/react-multiselect-dropdown 18.0.0 → 18.0.1

package/dist/index.js

@@ -1,15 +1,206 @@
 // src/MultiSelectDropdown.tsx
 import {
+  Fragment,
   forwardRef,
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useRef,
-  useState
+  useState as useState2
 } from "react";
 import { createPortal } from "react-dom";
 
+// src/itemUtils.ts
+function isPrimitiveItem(item) {
+  return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
+}
+function getLabel(item, settings) {
+  if (isPrimitiveItem(item)) {
+    return String(item);
+  }
+  const keys = [settings.labelKey, "itemName", "name", "label", "title", "value"].filter(Boolean);
+  for (const key of keys) {
+    if (key && item[key] != null) {
+      return String(item[key]);
+    }
+  }
+  return JSON.stringify(item);
+}
+function getPrimaryValue(item, settings) {
+  if (isPrimitiveItem(item)) {
+    return String(item);
+  }
+  const keys = [settings.primaryKey, "id", "value", "key"].filter(Boolean);
+  for (const key of keys) {
+    if (key && item[key] != null) {
+      return String(item[key]);
+    }
+  }
+  return getLabel(item, settings);
+}
+function sanitizeId(value) {
+  return value.replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 56) || "option";
+}
+function normalizeSkinName(value) {
+  return sanitizeId(value.toLowerCase()) || "classic";
+}
+function itemMatchesQuery(item, query, settings) {
+  if (!query.trim()) {
+    return true;
+  }
+  const needle = query.trim().toLowerCase();
+  const haystack = /* @__PURE__ */ new Set([getLabel(item, settings).toLowerCase()]);
+  if (!isPrimitiveItem(item)) {
+    const objectItem = item;
+    const searchKeys = settings.searchBy.length ? settings.searchBy : [settings.labelKey];
+    for (const key of searchKeys) {
+      if (key && objectItem[key] != null) {
+        haystack.add(String(objectItem[key]).toLowerCase());
+      }
+    }
+  }
+  for (const value of haystack) {
+    if (value.includes(needle)) {
+      return true;
+    }
+  }
+  return false;
+}
+function isDisabledItem(item) {
+  return !isPrimitiveItem(item) && Boolean(item.disabled);
+}
+function getGroupName(item, settings) {
+  if (!settings.groupBy) {
+    return "";
+  }
+  if (typeof settings.groupBy === "function") {
+    return settings.groupBy(item);
+  }
+  if (!isPrimitiveItem(item)) {
+    const objectItem = item;
+    if (settings.groupBy in objectItem) {
+      return String(objectItem[settings.groupBy] ?? "");
+    }
+  }
+  return "";
+}
+function mergeUniqueItems(base, extra, settings) {
+  const itemsById = /* @__PURE__ */ new Map();
+  for (const item of [...base, ...extra]) {
+    itemsById.set(getPrimaryValue(item, settings), item);
+  }
+  return Array.from(itemsById.values());
+}
+function createItemFromQuery(query, settings, sample) {
+  if (sample && !isPrimitiveItem(sample)) {
+    return {
+      [settings.primaryKey]: query.toLowerCase().replace(/\s+/g, "-"),
+      [settings.labelKey]: query
+    };
+  }
+  return query;
+}
+function buildGroups(items, settings) {
+  if (!settings.groupBy) {
+    return [];
+  }
+  const itemsByGroup = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const groupName = getGroupName(item, settings) || "Ungrouped";
+    const currentItems = itemsByGroup.get(groupName) || [];
+    currentItems.push(item);
+    itemsByGroup.set(groupName, currentItems);
+  }
+  return Array.from(itemsByGroup.entries()).map(([name, groupedItems]) => ({
+    name,
+    items: groupedItems
+  }));
+}
+function getVisibleBadgeLimit(selectedCount, rawLimit) {
+  if (!Number.isFinite(rawLimit)) {
+    return selectedCount;
+  }
+  return Math.min(selectedCount, Math.max(0, Math.floor(rawLimit)));
+}
+
+// src/settings.ts
+var DEFAULT_KEYBOARD_SETTINGS = {
+  space: true,
+  spaceOptionAction: "toggle",
+  tab: true,
+  arrows: true,
+  escape: true,
+  backspaceRemovesLastWhenSearchEmpty: false,
+  deleteRemovesFocusedBadge: true,
+  backspace: false
+};
+var DEFAULT_SETTINGS = {
+  singleSelection: false,
+  text: "Select",
+  enableCheckAll: true,
+  selectAllText: "Select All",
+  unSelectAllText: "Unselect All",
+  filterSelectAllText: "Select filtered",
+  filterUnSelectAllText: "Unselect filtered",
+  enableFilterSelectAll: true,
+  enableSearchFilter: false,
+  searchBy: [],
+  maxHeight: 300,
+  badgeShowLimit: Number.MAX_SAFE_INTEGER,
+  classes: "",
+  limitSelection: 0,
+  disabled: false,
+  searchPlaceholderText: "Search",
+  groupBy: "",
+  showCheckbox: true,
+  noDataLabel: "No Data Available",
+  searchAutofocus: true,
+  lazyLoading: false,
+  labelKey: "itemName",
+  primaryKey: "id",
+  position: "bottom",
+  autoPosition: true,
+  loading: false,
+  selectGroup: false,
+  addNewItemOnFilter: false,
+  addNewButtonText: "Add",
+  escapeToClose: true,
+  clearAll: true,
+  closeDropDownOnSelection: false,
+  tagToBody: false,
+  appendToBody: false,
+  theme: "",
+  skin: "classic",
+  ariaLabel: "Multiselect dropdown",
+  listboxAriaLabel: "Dropdown options",
+  searchAriaLabel: "Search options",
+  clearSearchAriaLabel: "Clear search",
+  clearAllAriaLabel: "Clear selected options",
+  removeItemAriaLabel: "Remove selected option",
+  openDropdownAriaLabel: "Open dropdown",
+  closeDropdownAriaLabel: "Close dropdown",
+  loadingText: "Loading options",
+  keyboard: DEFAULT_KEYBOARD_SETTINGS
+};
+function resolveDropdownSettings(incomingSettings) {
+  const escapeToClose = incomingSettings?.escapeToClose ?? DEFAULT_SETTINGS.escapeToClose;
+  const incomingKeyboard = incomingSettings?.keyboard;
+  const keyboard = {
+    ...DEFAULT_KEYBOARD_SETTINGS,
+    ...incomingKeyboard,
+    backspaceRemovesLastWhenSearchEmpty: incomingKeyboard?.backspaceRemovesLastWhenSearchEmpty ?? incomingKeyboard?.backspace ?? DEFAULT_KEYBOARD_SETTINGS.backspaceRemovesLastWhenSearchEmpty,
+    deleteRemovesFocusedBadge: incomingKeyboard?.deleteRemovesFocusedBadge ?? DEFAULT_KEYBOARD_SETTINGS.deleteRemovesFocusedBadge,
+    escape: escapeToClose && (incomingKeyboard?.escape ?? DEFAULT_KEYBOARD_SETTINGS.escape)
+  };
+  return {
+    ...DEFAULT_SETTINGS,
+    ...incomingSettings,
+    escapeToClose,
+    keyboard
+  };
+}
+
 // src/styles.ts
 var STYLE_ID = "stackline-react-multiselect-dropdown-styles";
 var styles = `
@@ -52,6 +243,7 @@ var styles = `
   position: relative;
   display: flex;
   align-items: center;
+  align-content: center;
   flex-wrap: wrap;
   width: 100%;
   min-height: 56px;
@@ -88,16 +280,26 @@ var styles = `
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  min-height: 1.45em;
   align-items: center;
+  align-content: center;
   gap: 8px;
   flex-wrap: wrap;
 }
 
 .rmsd-placeholder,
 .rmsd-single-value {
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  justify-content: flex-start;
   min-width: 0;
+  min-height: 1.45em;
+  max-width: 100%;
   color: var(--rmsd-muted);
   font-size: 0.95rem;
+  line-height: 1.25;
+  text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -176,33 +378,25 @@ var styles = `
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 0;
-  min-height: 0;
+  flex: 0 0 auto;
+  min-width: 24px;
+  min-height: 20px;
   color: var(--rmsd-muted);
   font-size: 0.8rem;
   font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
 }
 
-.rmsd-root.rmsd-has-overflow:not(.skin-classic) .rmsd-trigger {
+.rmsd-root.rmsd-has-overflow .rmsd-trigger {
   padding-right: 104px;
 }
 
-.rmsd-root.rmsd-has-overflow:not(.skin-classic):not(.rmsd-has-clear) .rmsd-trigger {
+.rmsd-root.rmsd-has-overflow:not(.rmsd-has-clear) .rmsd-trigger {
   padding-right: 74px;
 }
 
-.rmsd-root.rmsd-has-overflow:not(.skin-classic) .rmsd-overflow {
-  position: absolute;
-  top: 50%;
-  right: 76px;
-  transform: translateY(-50%);
-  z-index: 1;
-}
-
-.rmsd-root.rmsd-has-overflow:not(.skin-classic):not(.rmsd-has-clear) .rmsd-overflow {
-  right: 42px;
-}
-
 .rmsd-actions {
   position: absolute;
   top: 50%;
@@ -684,6 +878,7 @@ var styles = `
 
 .theme-classic .rmsd-trigger,
 .skin-classic .rmsd-trigger {
+  align-content: center;
   flex-wrap: nowrap;
   gap: 6px;
   min-height: 42px;
@@ -766,9 +961,12 @@ var styles = `
 
 .theme-classic .rmsd-overflow,
 .skin-classic .rmsd-overflow {
+  min-width: 24px;
+  min-height: 20px;
   color: #333333;
   font-size: 14px;
   font-weight: 400;
+  line-height: 1;
 }
 
 .theme-classic .rmsd-actions,
@@ -1036,7 +1234,7 @@ var styles = `
 
 @media (max-width: 720px) {
   .rmsd-trigger {
-    align-items: flex-start;
+    align-items: center;
     padding-right: 54px;
   }
 }
@@ -1054,56 +1252,30 @@ function ensureDropdownStyles() {
   document.head.appendChild(tag);
 }
 
+// src/useControllableSelection.ts
+import { useState } from "react";
+function useControllableSelection(controlledValue, defaultValue, onChange) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const setValue = (nextValue) => {
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onChange?.(nextValue);
+  };
+  return [value, setValue];
+}
+
 // src/MultiSelectDropdown.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_SETTINGS = {
-  singleSelection: false,
-  text: "Select",
-  enableCheckAll: true,
-  selectAllText: "Select All",
-  unSelectAllText: "Unselect All",
-  filterSelectAllText: "Select filtered",
-  filterUnSelectAllText: "Unselect filtered",
-  enableFilterSelectAll: true,
-  enableSearchFilter: false,
-  searchBy: [],
-  maxHeight: 300,
-  badgeShowLimit: Number.MAX_SAFE_INTEGER,
-  classes: "",
-  limitSelection: 0,
-  disabled: false,
-  searchPlaceholderText: "Search",
-  groupBy: "",
-  showCheckbox: true,
-  noDataLabel: "No Data Available",
-  searchAutofocus: true,
-  lazyLoading: false,
-  labelKey: "itemName",
-  primaryKey: "id",
-  position: "bottom",
-  autoPosition: true,
-  loading: false,
-  selectGroup: false,
-  addNewItemOnFilter: false,
-  addNewButtonText: "Add",
-  escapeToClose: true,
-  clearAll: true,
-  closeDropDownOnSelection: false,
-  tagToBody: false,
-  appendToBody: false,
-  theme: "",
-  skin: "classic",
-  ariaLabel: "Multiselect dropdown",
-  listboxAriaLabel: "Dropdown options",
-  searchAriaLabel: "Search options",
-  clearSearchAriaLabel: "Clear search",
-  clearAllAriaLabel: "Clear selected options",
-  removeItemAriaLabel: "Remove selected option",
-  openDropdownAriaLabel: "Open dropdown",
-  closeDropdownAriaLabel: "Close dropdown",
-  loadingText: "Loading options"
-};
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var useClientLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function isSpaceKey(key) {
+  return key === " " || key === "Spacebar";
+}
+function renderSlot(Slot, props, fallback) {
+  return Slot ? /* @__PURE__ */ jsx(Fragment2, { children: Slot(props) }) : /* @__PURE__ */ jsx(Fragment2, { children: fallback });
+}
 function StacklineIcon({ name, className = "rmsd-icon" }) {
   if (name === "remove") {
     return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 47.971 47.971", focusable: "false", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" }) });
@@ -1116,131 +1288,6 @@ function StacklineIcon({ name, className = "rmsd-icon" }) {
   }
   return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 612 612", focusable: "false", "aria-hidden": "true", children: name === "angle-up" ? /* @__PURE__ */ jsx("path", { d: "M604.501,440.509L325.398,134.956c-5.331-5.357-12.423-7.627-19.386-7.27c-6.989-0.357-14.056,1.913-19.387,7.27L7.499,440.509c-9.999,10.024-9.999,26.298,0,36.323s26.223,10.024,36.222,0l262.293-287.164L568.28,476.832c9.999,10.024,26.222,10.024,36.221,0C614.5,466.809,614.5,450.534,604.501,440.509z" }) : /* @__PURE__ */ jsx("path", { d: "M604.501,134.782c-9.999-10.05-26.222-10.05-36.221,0L306.014,422.558L43.721,134.782c-9.999-10.05-26.223-10.05-36.222,0s-9.999,26.35,0,36.399l279.103,306.241c5.331,5.357,12.422,7.652,19.386,7.296c6.988,0.356,14.055-1.939,19.386-7.296l279.128-306.268C614.5,161.106,614.5,144.832,604.501,134.782z" }) });
 }
-function isPrimitiveItem(item) {
-  return typeof item === "string" || typeof item === "number" || typeof item === "boolean";
-}
-function getLabel(item, settings) {
-  if (isPrimitiveItem(item)) {
-    return String(item);
-  }
-  const keys = [settings.labelKey, "itemName", "name", "label", "title", "value"].filter(Boolean);
-  for (const key of keys) {
-    if (key && item[key] != null) {
-      return String(item[key]);
-    }
-  }
-  return JSON.stringify(item);
-}
-function getPrimaryValue(item, settings) {
-  if (isPrimitiveItem(item)) {
-    return String(item);
-  }
-  const keys = [settings.primaryKey, "id", "value", "key"].filter(Boolean);
-  for (const key of keys) {
-    if (key && item[key] != null) {
-      return String(item[key]);
-    }
-  }
-  return getLabel(item, settings);
-}
-function itemMatchesQuery(item, query, settings) {
-  if (!query.trim()) {
-    return true;
-  }
-  const needle = query.trim().toLowerCase();
-  const haystack = /* @__PURE__ */ new Set();
-  haystack.add(getLabel(item, settings).toLowerCase());
-  if (!isPrimitiveItem(item)) {
-    const searchKeys = settings.searchBy.length ? settings.searchBy : [settings.labelKey];
-    for (const key of searchKeys) {
-      if (key && item[key] != null) {
-        haystack.add(String(item[key]).toLowerCase());
-      }
-    }
-  }
-  for (const value of haystack) {
-    if (value.includes(needle)) {
-      return true;
-    }
-  }
-  return false;
-}
-function getGroupName(item, settings) {
-  if (!settings.groupBy) {
-    return "";
-  }
-  if (typeof settings.groupBy === "function") {
-    return settings.groupBy(item);
-  }
-  if (!isPrimitiveItem(item)) {
-    const groupKey = settings.groupBy;
-    const objectItem = item;
-    if (groupKey in objectItem) {
-      return String(objectItem[groupKey] ?? "");
-    }
-  }
-  return "";
-}
-function mergeUniqueItems(base, extra, settings) {
-  const bucket = /* @__PURE__ */ new Map();
-  for (const item of [...base, ...extra]) {
-    bucket.set(getPrimaryValue(item, settings), item);
-  }
-  return Array.from(bucket.values());
-}
-function createItemFromQuery(query, settings, sample) {
-  if (sample && !isPrimitiveItem(sample)) {
-    return {
-      [settings.primaryKey]: query.toLowerCase().replace(/\s+/g, "-"),
-      [settings.labelKey]: query
-    };
-  }
-  return query;
-}
-function isDisabledItem(item) {
-  return !isPrimitiveItem(item) && Boolean(item.disabled);
-}
-function buildGroups(items, settings) {
-  if (!settings.groupBy) {
-    return [];
-  }
-  const map = /* @__PURE__ */ new Map();
-  for (const item of items) {
-    const groupName = getGroupName(item, settings) || "Ungrouped";
-    const current = map.get(groupName) || [];
-    current.push(item);
-    map.set(groupName, current);
-  }
-  return Array.from(map.entries()).map(([name, groupedItems]) => ({
-    name,
-    items: groupedItems
-  }));
-}
-function useControllableSelection(controlledValue, defaultValue, onChange) {
-  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : internalValue;
-  const setValue = (nextValue) => {
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onChange?.(nextValue);
-  };
-  return [value, setValue];
-}
-function sanitizeId(value) {
-  return value.replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 56) || "option";
-}
-function normalizeSkinName(value) {
-  return sanitizeId(value.toLowerCase()) || "classic";
-}
-function getVisibleBadgeLimit(selectedCount, rawLimit) {
-  if (!Number.isFinite(rawLimit)) {
-    return selectedCount;
-  }
-  const limit = Math.max(0, Math.floor(rawLimit));
-  return Math.min(selectedCount, limit);
-}
 function InnerMultiSelectDropdown({
   data,
   settings: incomingSettings,
@@ -1265,22 +1312,23 @@ function InnerMultiSelectDropdown({
   renderItem,
   renderBadge,
   renderSearch,
-  renderEmptyState
+  renderEmptyState,
+  slots
 }, ref) {
   ensureDropdownStyles();
-  const settings = { ...DEFAULT_SETTINGS, ...incomingSettings };
+  const settings = useMemo(() => resolveDropdownSettings(incomingSettings), [incomingSettings]);
   const [selectedItems, setSelectedItems] = useControllableSelection(
     controlledSelectedItems,
     defaultSelectedItems,
     onChange
   );
-  const [isOpen, setIsOpen] = useState(false);
-  const [filter, setFilter] = useState("");
-  const [addedItems, setAddedItems] = useState([]);
-  const [activeDescendantId, setActiveDescendantId] = useState(null);
-  const [bodyMenuStyle, setBodyMenuStyle] = useState();
-  const [bodyListMaxHeight, setBodyListMaxHeight] = useState();
-  const [effectivePosition, setEffectivePosition] = useState(
+  const [isOpen, setIsOpen] = useState2(false);
+  const [filter, setFilter] = useState2("");
+  const [addedItems, setAddedItems] = useState2([]);
+  const [activeDescendantId, setActiveDescendantId] = useState2(null);
+  const [bodyMenuStyle, setBodyMenuStyle] = useState2();
+  const [bodyListMaxHeight, setBodyListMaxHeight] = useState2();
+  const [effectivePosition, setEffectivePosition] = useState2(
     settings.position === "top" ? "top" : "bottom"
   );
   const rootRef = useRef(null);
@@ -1290,10 +1338,11 @@ function InnerMultiSelectDropdown({
   const listRef = useRef(null);
   const lastScrollHeightRef = useRef(0);
   const pendingFocusRef = useRef(null);
+  const addRequestIdRef = useRef(0);
   const instanceIdRef = useRef(`rmsd-${Math.random().toString(36).slice(2)}`);
   const allItems = useMemo(
-    () => mergeUniqueItems(data, addedItems, settings),
-    [addedItems, data, settings]
+    () => mergeUniqueItems(data, [...selectedItems, ...addedItems], settings),
+    [addedItems, data, selectedItems, settings]
   );
   const filteredItems = useMemo(
     () => allItems.filter((item) => itemMatchesQuery(item, filter, settings)),
@@ -1324,6 +1373,68 @@ function InnerMultiSelectDropdown({
   };
   const focusFirstOption = () => focusOptionByIndex(0);
   const focusLastOption = () => focusOptionByIndex(getOptionElements().length - 1);
+  const focusOptionById = (optionId) => {
+    const option = document.getElementById(optionId);
+    if (!option || !listRef.current?.contains(option) || option.getAttribute("aria-disabled") === "true") {
+      return false;
+    }
+    option.focus();
+    setActiveDescendantId(option.id || null);
+    option.scrollIntoView({ block: "nearest" });
+    return true;
+  };
+  const focusOptionAfterPointerSelection = (optionId, fallbackIndex) => {
+    window.setTimeout(() => {
+      const focusAfterRender = () => {
+        if (focusOptionById(optionId)) {
+          return;
+        }
+        focusOptionByIndex(fallbackIndex);
+      };
+      if (typeof window.requestAnimationFrame === "function") {
+        window.requestAnimationFrame(focusAfterRender);
+        return;
+      }
+      focusAfterRender();
+    }, 0);
+  };
+  const focusOptionAfterKeyboardSelection = (optionId, fallbackIndex, moveToNextOption) => {
+    window.setTimeout(() => {
+      const focusAfterRender = () => {
+        if (moveToNextOption) {
+          const options = getOptionElements();
+          const currentIndex = options.findIndex((option) => option.id === optionId);
+          const nextOption = currentIndex >= 0 ? options[currentIndex + 1] : void 0;
+          if (nextOption) {
+            nextOption.focus();
+            setActiveDescendantId(nextOption.id || null);
+            nextOption.scrollIntoView({ block: "nearest" });
+            return;
+          }
+        }
+        if (!focusOptionById(optionId)) {
+          focusOptionByIndex(fallbackIndex);
+        }
+      };
+      if (typeof window.requestAnimationFrame === "function") {
+        window.requestAnimationFrame(focusAfterRender);
+        return;
+      }
+      focusAfterRender();
+    }, 0);
+  };
+  const focusAfterSelectionChange = (target = "search") => {
+    if (target === "none") {
+      return;
+    }
+    window.setTimeout(() => {
+      if (target === "search" && isOpen && settings.enableSearchFilter) {
+        searchRef.current?.focus();
+        return;
+      }
+      triggerRef.current?.focus();
+    }, 0);
+  };
   const updateSelection = (nextItems) => {
     setSelectedItems(nextItems);
   };
@@ -1357,6 +1468,7 @@ function InnerMultiSelectDropdown({
     const previousItems = selectedItems;
     updateSelection([]);
     onDeSelectAll?.(previousItems);
+    focusAfterSelectionChange();
   };
   const toggleDropdown = () => {
     if (isOpen) {
@@ -1365,25 +1477,39 @@ function InnerMultiSelectDropdown({
       openDropdown("search");
     }
   };
-  const removeItem = (item) => {
+  const removeItem = (item, focusTarget = "search") => {
     const nextItems = selectedItems.filter(
       (selectedItem) => getPrimaryValue(selectedItem, settings) !== getPrimaryValue(item, settings)
     );
     updateSelection(nextItems);
     onDeSelect?.(item);
+    focusAfterSelectionChange(focusTarget);
   };
-  const selectItem = (item) => {
+  const removeLastSelectedItem = () => {
+    const lastItem = selectedItems[selectedItems.length - 1];
+    if (!lastItem) {
+      return;
+    }
+    removeItem(lastItem);
+  };
+  const selectItem = (item, focusTarget = "search") => {
     if (settings.disabled || isDisabledItem(item)) {
       return;
     }
     if (isSelected(item)) {
-      removeItem(item);
+      if (settings.singleSelection) {
+        closeDropdown(true);
+        focusAfterSelectionChange("trigger");
+        return;
+      }
+      removeItem(item, focusTarget);
       return;
     }
     if (settings.singleSelection) {
       updateSelection([item]);
       onSelect?.(item);
       closeDropdown(true);
+      focusAfterSelectionChange("trigger");
       return;
     }
     if (settings.limitSelection && selectedItems.length >= settings.limitSelection) {
@@ -1394,7 +1520,10 @@ function InnerMultiSelectDropdown({
     onSelect?.(item);
     if (settings.closeDropDownOnSelection) {
       closeDropdown(true);
+      focusAfterSelectionChange("trigger");
+      return;
     }
+    focusAfterSelectionChange(focusTarget);
   };
   const selectAllItems = (items, filteredSelection = false) => {
     if (settings.singleSelection) {
@@ -1410,6 +1539,7 @@ function InnerMultiSelectDropdown({
     } else {
       onSelectAll?.(nextItems);
     }
+    focusAfterSelectionChange();
   };
   const deSelectAllItems = (items, filteredSelection = false) => {
     const ids = new Set(items.map((item) => getPrimaryValue(item, settings)));
@@ -1420,13 +1550,19 @@ function InnerMultiSelectDropdown({
     } else {
       onDeSelectAll?.(items);
     }
+    focusAfterSelectionChange();
   };
   const handleAddFilterNewItem = async () => {
     const query = filter.trim();
     if (!query) {
       return;
     }
+    const requestId = addRequestIdRef.current + 1;
+    addRequestIdRef.current = requestId;
     const result = await onAddFilterNewItem?.(query);
+    if (requestId !== addRequestIdRef.current) {
+      return;
+    }
     const nextItem = result === void 0 ? createItemFromQuery(query, settings, data[0]) : result;
     setAddedItems((currentItems) => mergeUniqueItems(currentItems, [nextItem], settings));
     if (settings.singleSelection) {
@@ -1435,6 +1571,7 @@ function InnerMultiSelectDropdown({
       updateSelection(mergeUniqueItems(selectedItems, [nextItem], settings));
     }
     setFilter("");
+    focusAfterSelectionChange();
   };
   const toggleGroup = (groupName, items) => {
     const groupItems = items.filter((item) => !isDisabledItem(item));
@@ -1442,10 +1579,12 @@ function InnerMultiSelectDropdown({
     if (allSelected) {
       deSelectAllItems(groupItems, false);
       onGroupDeSelect?.(groupName, groupItems);
+      focusAfterSelectionChange();
       return;
     }
     selectAllItems(groupItems, false);
     onGroupSelect?.(groupName, groupItems);
+    focusAfterSelectionChange();
   };
   const handleListScroll = () => {
     if (!listRef.current || !onScrollToEnd) {
@@ -1485,7 +1624,7 @@ function InnerMultiSelectDropdown({
       }
     };
     const handleKeyDown = (event) => {
-      if (event.key === "Escape" && settings.escapeToClose) {
+      if (event.key === "Escape" && settings.keyboard.escape) {
         closeDropdown(true);
       }
     };
@@ -1497,7 +1636,7 @@ function InnerMultiSelectDropdown({
       document.removeEventListener("touchstart", handlePointerDown);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, settings.escapeToClose]);
+  }, [isOpen, settings.keyboard.escape]);
   const updateBodyMenuPosition = () => {
     if (!shouldAppendToBody || !triggerRef.current || typeof window === "undefined") {
       return;
@@ -1656,20 +1795,38 @@ function InnerMultiSelectDropdown({
     return `${settings.ariaLabel}: ${selectedItems.map((item) => getLabel(item, settings)).join(", ")}`;
   };
   const stopInlineKey = (event) => {
-    if (event.key === "Enter" || event.key === " ") {
+    if (isSpaceKey(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey(event.key)) {
       event.stopPropagation();
     }
   };
+  const handleBadgeRemoveKeyDown = (event, item) => {
+    if (settings.keyboard.deleteRemovesFocusedBadge && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      event.stopPropagation();
+      removeItem(item);
+      return;
+    }
+    stopInlineKey(event);
+  };
   const handleTriggerKeyDown = (event) => {
     if (settings.disabled) {
       return;
     }
-    if (event.key === "Enter" || event.key === " ") {
+    if (isSpaceKey(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey(event.key)) {
       event.preventDefault();
       toggleDropdown();
       return;
     }
-    if (event.key === "ArrowDown") {
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
       event.preventDefault();
       if (!isOpen) {
         openDropdown("first");
@@ -1678,7 +1835,7 @@ function InnerMultiSelectDropdown({
       }
       return;
     }
-    if (event.key === "ArrowUp") {
+    if (settings.keyboard.arrows && event.key === "ArrowUp") {
       event.preventDefault();
       if (!isOpen) {
         openDropdown("last");
@@ -1687,48 +1844,84 @@ function InnerMultiSelectDropdown({
       }
       return;
     }
-    if (event.key === "Escape" && isOpen) {
+    if (settings.keyboard.escape && event.key === "Escape" && isOpen) {
       event.preventDefault();
       closeDropdown(true);
     }
   };
   const handleArrowButtonKeyDown = (event) => {
-    if (event.key === "Enter" || event.key === " ") {
+    if (isSpaceKey(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey(event.key)) {
       event.preventDefault();
       event.stopPropagation();
       toggleDropdown();
       return;
     }
-    if (event.key === "ArrowDown") {
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
       event.preventDefault();
       event.stopPropagation();
-      openDropdown("first");
+      if (isOpen) {
+        focusFirstOption();
+      } else {
+        openDropdown("first");
+      }
       return;
     }
-    if (event.key === "ArrowUp") {
+    if (settings.keyboard.arrows && event.key === "ArrowUp") {
       event.preventDefault();
       event.stopPropagation();
-      openDropdown("last");
+      if (isOpen) {
+        focusLastOption();
+      } else {
+        openDropdown("last");
+      }
     }
   };
   const handleSearchKeyDown = (event) => {
-    if (event.key === "ArrowDown") {
+    if (isSpaceKey(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      return;
+    }
+    if (settings.keyboard.backspaceRemovesLastWhenSearchEmpty && event.key === "Backspace" && !filter && selectedItems.length > 0 && !settings.singleSelection) {
+      event.preventDefault();
+      removeLastSelectedItem();
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
       event.preventDefault();
       focusFirstOption();
       return;
     }
-    if (event.key === "Escape" && settings.escapeToClose) {
+    if (settings.keyboard.escape && event.key === "Escape") {
       event.preventDefault();
       closeDropdown(true);
     }
   };
   const handleOptionKeyDown = (event, item, optionIndex) => {
-    if (event.key === "Enter" || event.key === " ") {
+    if (isSpaceKey(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      return;
+    }
+    if ((event.key === "Enter" || isSpaceKey(event.key)) && event.repeat) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey(event.key)) {
       event.preventDefault();
-      selectItem(item);
+      const willClose = settings.singleSelection || !isSelected(item) && settings.closeDropDownOnSelection;
+      const currentOptionId = event.currentTarget.id;
+      const moveToNextOption = isSpaceKey(event.key) && settings.keyboard.spaceOptionAction === "toggle-and-next";
+      selectItem(item, willClose ? "trigger" : "none");
+      if (!willClose) {
+        focusOptionAfterKeyboardSelection(currentOptionId, optionIndex, moveToNextOption);
+      }
       return;
     }
-    if (event.key === "ArrowDown") {
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
       event.preventDefault();
       const nextIndex = optionIndex + 1;
       const options = getOptionElements();
@@ -1739,7 +1932,7 @@ function InnerMultiSelectDropdown({
       }
       return;
     }
-    if (event.key === "ArrowUp") {
+    if (settings.keyboard.arrows && event.key === "ArrowUp") {
       event.preventDefault();
       if (optionIndex > 0) {
         focusOptionByIndex(optionIndex - 1);
@@ -1750,21 +1943,54 @@ function InnerMultiSelectDropdown({
       }
       return;
     }
-    if (event.key === "Home") {
+    if (settings.keyboard.arrows && event.key === "Home") {
       event.preventDefault();
       focusFirstOption();
       return;
     }
-    if (event.key === "End") {
+    if (settings.keyboard.arrows && event.key === "End") {
       event.preventDefault();
       focusLastOption();
       return;
     }
-    if (event.key === "Escape" && settings.escapeToClose) {
+    if (settings.keyboard.escape && event.key === "Escape") {
       event.preventDefault();
       closeDropdown(true);
     }
   };
+  const slotState = {
+    settings,
+    isOpen,
+    filter,
+    selectedItems,
+    visibleBadges,
+    hiddenBadgeCount,
+    filteredItems,
+    selectableItems,
+    allFilteredSelected,
+    hasFilteredResults,
+    loading: Boolean(loading ?? settings.loading),
+    listboxId,
+    activeDescendantId: activeDescendantId || void 0,
+    label: selectedItems.length ? selectedItems.map((item) => getLabel(item, settings)).join(", ") : settings.text
+  };
+  const slotActions = {
+    openDropdown: () => openDropdown("search"),
+    closeDropdown: () => closeDropdown(),
+    toggleDropdown,
+    clearSelection,
+    selectItem: (item) => selectItem(item),
+    removeItem: (item) => removeItem(item),
+    selectAll: (items = selectableItems) => selectAllItems(items),
+    deSelectAll: (items = selectedItems) => deSelectAllItems(items),
+    toggleGroup,
+    addFilterNewItem: handleAddFilterNewItem,
+    setFilter
+  };
+  const slotBase = {
+    state: slotState,
+    actions: slotActions
+  };
   const renderItemNode = (item) => {
     const context = {
       item,
@@ -1780,49 +2006,122 @@ function InnerMultiSelectDropdown({
       !isPrimitiveItem(item) && item.caption ? /* @__PURE__ */ jsx("span", { className: "rmsd-option-hint", children: String(item.caption) }) : null
     ] });
   };
-  const renderBadgeNode = (item) => {
+  const renderBadgeLabel = (item) => {
+    const label = getLabel(item, settings);
     const context = {
       item,
-      label: getLabel(item, settings),
+      label,
       selected: true,
       disabled: settings.disabled || isDisabledItem(item),
       query: filter,
       toggle: () => selectItem(item),
       remove: () => removeItem(item)
     };
-    return renderBadge ? renderBadge(item, context) : context.label;
+    const badgeContent = renderBadge ? renderBadge(item, context) : context.label;
+    const badgeLabelProps = { className: "rmsd-badge-label" };
+    return renderSlot(
+      slots?.BadgeLabel,
+      { ...slotBase, props: badgeLabelProps, item, label, children: badgeContent },
+      /* @__PURE__ */ jsx("span", { ...badgeLabelProps, children: badgeContent })
+    );
+  };
+  const renderCheckbox = (checked, context) => {
+    if (!settings.showCheckbox) {
+      return null;
+    }
+    const checkboxProps = {
+      className: "rmsd-checkbox",
+      "data-checked": checked,
+      "aria-hidden": true
+    };
+    return renderSlot(
+      slots?.Checkbox,
+      { ...slotBase, props: checkboxProps, checked, context },
+      /* @__PURE__ */ jsx("span", { ...checkboxProps })
+    );
+  };
+  const renderBadgeRemoveButton = (item) => {
+    const label = getLabel(item, settings);
+    const removeProps = {
+      type: "button",
+      className: "rmsd-badge-remove",
+      "aria-label": getRemoveItemAriaLabel(item),
+      onKeyDown: (event) => handleBadgeRemoveKeyDown(event, item),
+      onClick: (event) => {
+        event.stopPropagation();
+        removeItem(item);
+      }
+    };
+    const icon = /* @__PURE__ */ jsx(StacklineIcon, { name: "remove" });
+    return renderSlot(
+      slots?.BadgeRemove,
+      { ...slotBase, props: removeProps, item, label, icon },
+      /* @__PURE__ */ jsx("button", { ...removeProps, children: icon })
+    );
+  };
+  const renderBadgeNode = (item) => {
+    const label = getLabel(item, settings);
+    const badgeProps = { className: "rmsd-badge" };
+    const removeButton = !settings.disabled ? renderBadgeRemoveButton(item) : null;
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      renderBadgeLabel(item),
+      removeButton
+    ] });
+    return renderSlot(
+      slots?.Badge,
+      { ...slotBase, props: badgeProps, item, label, children, removeButton },
+      /* @__PURE__ */ jsx("span", { ...badgeProps, children })
+    );
   };
-  let optionCursor = -1;
+  let enabledOptionCursor = -1;
   const renderOption = (item, prefix, localIndex) => {
     const selected = isSelected(item);
     const disabled = settings.disabled || isDisabledItem(item) || limitReached && !selected;
-    optionCursor += 1;
-    const optionIndex = optionCursor;
+    const optionIndex = disabled ? -1 : enabledOptionCursor += 1;
     const optionId = getOptionId(item, localIndex, prefix);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        id: optionId,
-        className: `rmsd-option${selected ? " rmsd-selected" : ""}${disabled ? " rmsd-disabled" : ""}`,
-        role: "option",
-        "aria-selected": selected,
-        "aria-disabled": disabled,
-        tabIndex: disabled ? -1 : 0,
-        "data-rmsd-option": "true",
-        onFocus: () => setActiveDescendantId(optionId),
-        onClick: () => {
-          if (!disabled) {
-            selectItem(item);
-          }
-        },
-        onKeyDown: (event) => handleOptionKeyDown(event, item, optionIndex),
-        children: [
-          settings.showCheckbox ? /* @__PURE__ */ jsx("span", { className: "rmsd-checkbox", "data-checked": selected, "aria-hidden": "true" }) : null,
-          renderItemNode(item)
-        ]
+    const optionKey = `${prefix}-${getPrimaryValue(item, settings)}-${localIndex}`;
+    const optionSlot = {
+      item,
+      id: optionId,
+      key: optionKey,
+      label: getLabel(item, settings),
+      selected,
+      disabled,
+      index: optionIndex,
+      groupName: prefix.startsWith("group-") ? prefix : void 0
+    };
+    const optionProps = {
+      id: optionId,
+      className: `rmsd-option${selected ? " rmsd-selected" : ""}${disabled ? " rmsd-disabled" : ""}`,
+      role: "option",
+      "aria-selected": selected,
+      "aria-checked": selected,
+      "aria-disabled": disabled,
+      tabIndex: disabled || !settings.keyboard.tab ? -1 : 0,
+      "data-rmsd-option": "true",
+      onFocus: () => setActiveDescendantId(optionId),
+      onClick: () => {
+        if (disabled) {
+          return;
+        }
+        const willClose = settings.singleSelection || !isSelected(item) && settings.closeDropDownOnSelection;
+        selectItem(item, willClose ? "trigger" : "none");
+        if (!willClose) {
+          focusOptionAfterPointerSelection(optionId, optionIndex);
+        }
       },
-      `${prefix}-${getPrimaryValue(item, settings)}-${localIndex}`
-    );
+      onKeyDown: (event) => handleOptionKeyDown(event, item, optionIndex)
+    };
+    const checkbox = renderCheckbox(selected, "option");
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      checkbox,
+      renderItemNode(item)
+    ] });
+    return /* @__PURE__ */ jsx(Fragment, { children: renderSlot(
+      slots?.Option,
+      { ...slotBase, props: optionProps, option: optionSlot, checkbox, children },
+      /* @__PURE__ */ jsx("div", { ...optionProps, children })
+    ) }, optionKey);
   };
   const handleTriggerClick = (event) => {
     if (event.target.closest("button")) {
@@ -1830,173 +2129,1238 @@ function InnerMultiSelectDropdown({
     }
     toggleDropdown();
   };
-  const menu = isOpen ? /* @__PURE__ */ jsxs(
-    "div",
-    {
+  const renderSelectAllButton = () => {
+    const label = allFilteredSelected ? filter.trim() ? settings.filterUnSelectAllText : settings.unSelectAllText : filter.trim() ? settings.filterSelectAllText : settings.selectAllText;
+    const selectAllProps = {
+      type: "button",
+      className: "rmsd-inline-button rmsd-select-all-button",
+      onClick: () => allFilteredSelected ? deSelectAllItems(selectableItems, Boolean(filter.trim())) : selectAllItems(selectableItems, Boolean(filter.trim())),
+      onKeyDown: stopInlineKey,
+      disabled: settings.disabled || selectableItems.length === 0
+    };
+    const checkbox = renderCheckbox(allFilteredSelected, "selectAll");
+    return renderSlot(
+      slots?.SelectAll,
+      { ...slotBase, props: selectAllProps, checked: allFilteredSelected, label, checkbox },
+      /* @__PURE__ */ jsxs("button", { ...selectAllProps, children: [
+        checkbox,
+        /* @__PURE__ */ jsx("span", { children: label })
+      ] })
+    );
+  };
+  const renderAddNewItemButton = () => {
+    const query = filter.trim();
+    if (!query) {
+      return null;
+    }
+    const label = `${settings.addNewButtonText} "${query}"`;
+    const addItemProps = {
+      type: "button",
+      className: "rmsd-inline-button rmsd-add-button",
+      onKeyDown: stopInlineKey,
+      onClick: handleAddFilterNewItem
+    };
+    return renderSlot(
+      slots?.AddNewItem,
+      { ...slotBase, props: addItemProps, query, label },
+      /* @__PURE__ */ jsx("button", { ...addItemProps, children: label })
+    );
+  };
+  const renderSearchNode = () => {
+    if (!settings.enableSearchFilter) {
+      return null;
+    }
+    const searchShellProps = { className: "rmsd-search-shell" };
+    const searchInputProps = {
+      ref: searchRef,
+      className: "rmsd-search-input",
+      value: filter,
+      onChange: (event) => setFilter(event.target.value),
+      onKeyDown: handleSearchKeyDown,
+      placeholder: settings.searchPlaceholderText,
+      "aria-label": settings.searchAriaLabel
+    };
+    const searchClearProps = {
+      type: "button",
+      className: "rmsd-search-clear",
+      "aria-label": settings.clearSearchAriaLabel,
+      onKeyDown: stopInlineKey,
+      onClick: () => setFilter("")
+    };
+    const icon = /* @__PURE__ */ jsx(StacklineIcon, { name: "search", className: "rmsd-search-icon" });
+    const clearIcon = /* @__PURE__ */ jsx(StacklineIcon, { name: "clear" });
+    const fallback = renderSearch ? renderSearch({ query: filter, setQuery: setFilter, closeDropdown: () => closeDropdown() }) : /* @__PURE__ */ jsxs("div", { ...searchShellProps, children: [
+      icon,
+      /* @__PURE__ */ jsx("input", { ...searchInputProps }),
+      filter ? /* @__PURE__ */ jsx("button", { ...searchClearProps, children: clearIcon }) : null
+    ] });
+    return renderSlot(
+      slots?.Search,
+      {
+        ...slotBase,
+        props: searchShellProps,
+        inputProps: searchInputProps,
+        clearButtonProps: searchClearProps,
+        query: filter,
+        icon,
+        clearIcon
+      },
+      fallback
+    );
+  };
+  const renderGroupAction = (group) => {
+    if (!settings.selectGroup || settings.singleSelection) {
+      return null;
+    }
+    const label = group.selected ? "Unselect" : "Select";
+    const groupActionProps = {
+      type: "button",
+      className: "rmsd-group-action",
+      onKeyDown: stopInlineKey,
+      onClick: () => toggleGroup(group.name, group.items)
+    };
+    return renderSlot(
+      slots?.GroupAction,
+      { ...slotBase, props: groupActionProps, group, label },
+      /* @__PURE__ */ jsx("button", { ...groupActionProps, children: label })
+    );
+  };
+  const renderGroupNode = (group, groupIndex) => {
+    const enabledItems = group.items.filter((item) => !isDisabledItem(item));
+    const groupSlot = {
+      name: group.name,
+      items: group.items,
+      enabledItems,
+      selected: enabledItems.length > 0 && enabledItems.every((item) => isSelected(item)),
+      disabled: enabledItems.length === 0,
+      index: groupIndex
+    };
+    const action = renderGroupAction(groupSlot);
+    const groupHeaderProps = { className: "rmsd-group-header" };
+    const header = renderSlot(
+      slots?.GroupHeader,
+      { ...slotBase, props: groupHeaderProps, group: groupSlot, action },
+      /* @__PURE__ */ jsxs("div", { ...groupHeaderProps, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          group.name,
+          " \xB7 ",
+          group.items.length
+        ] }),
+        action
+      ] })
+    );
+    const groupProps = {
+      className: "rmsd-group",
+      role: "group",
+      "aria-label": group.name
+    };
+    const children = group.items.map((item, index) => renderOption(item, `group-${groupIndex}`, index));
+    return /* @__PURE__ */ jsx(Fragment, { children: renderSlot(
+      slots?.Group,
+      { ...slotBase, props: groupProps, group: groupSlot, header, children },
+      /* @__PURE__ */ jsxs("div", { ...groupProps, children: [
+        header,
+        children
+      ] })
+    ) }, group.name);
+  };
+  const renderOptionListChildren = () => {
+    if (loading ?? settings.loading) {
+      const loadingProps = { className: "rmsd-state", role: "status" };
+      return renderSlot(
+        slots?.LoadingState,
+        { ...slotBase, props: loadingProps, text: settings.loadingText },
+        /* @__PURE__ */ jsx("div", { ...loadingProps, children: settings.loadingText })
+      );
+    }
+    if (groupedItems.length > 0) {
+      return groupedItems.map((group, groupIndex) => renderGroupNode(group, groupIndex));
+    }
+    if (hasFilteredResults) {
+      return filteredItems.map((item, index) => renderOption(item, "item", index));
+    }
+    const emptyProps = { className: "rmsd-state" };
+    return renderSlot(
+      slots?.EmptyState,
+      { ...slotBase, props: emptyProps, query: filter, text: settings.noDataLabel },
+      /* @__PURE__ */ jsx("div", { ...emptyProps, children: renderEmptyState ? renderEmptyState(filter) : settings.noDataLabel })
+    );
+  };
+  const renderOptionList = () => {
+    const listProps = {
+      className: "rmsd-list",
+      ref: listRef,
+      style: {
+        maxHeight: shouldAppendToBody ? bodyListMaxHeight ?? settings.maxHeight : settings.maxHeight
+      },
+      onScroll: settings.lazyLoading ? handleListScroll : void 0,
+      id: listboxId,
+      role: "listbox",
+      "aria-label": settings.listboxAriaLabel,
+      "aria-multiselectable": !settings.singleSelection
+    };
+    const children = renderOptionListChildren();
+    return renderSlot(
+      slots?.OptionList,
+      { ...slotBase, props: listProps, children },
+      /* @__PURE__ */ jsx("div", { ...listProps, children })
+    );
+  };
+  const renderBulkActions = () => {
+    if (!hasBulkActions) {
+      return null;
+    }
+    const bulkActionsProps = { className: "rmsd-bulk-actions" };
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      settings.enableCheckAll && !settings.singleSelection ? renderSelectAllButton() : null,
+      settings.addNewItemOnFilter && filter.trim() ? renderAddNewItemButton() : null
+    ] });
+    return renderSlot(
+      slots?.BulkActions,
+      { ...slotBase, props: bulkActionsProps, children },
+      /* @__PURE__ */ jsx("div", { ...bulkActionsProps, children })
+    );
+  };
+  const renderToolbar = () => {
+    const toolbarProps = { className: "rmsd-toolbar" };
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      renderBulkActions(),
+      renderSearchNode()
+    ] });
+    return renderSlot(
+      slots?.Toolbar,
+      { ...slotBase, props: toolbarProps, children },
+      /* @__PURE__ */ jsx("div", { ...toolbarProps, children })
+    );
+  };
+  const renderMenuFooter = () => {
+    if (!slots?.MenuFooter) {
+      return null;
+    }
+    return renderSlot(slots.MenuFooter, { ...slotBase, props: { className: "rmsd-menu-footer" } }, null);
+  };
+  const renderMenu = () => {
+    if (!isOpen) {
+      return null;
+    }
+    const menuProps = {
       ref: menuRef,
       className: `rmsd-menu rmsd-${effectivePosition} skin-${skinName} theme-${skinName}${skinFallbackClass ? ` ${skinFallbackClass}` : ""}${shouldAppendToBody ? " rmsd-body-overlay" : ""}`,
       style: shouldAppendToBody ? bodyMenuStyle : void 0,
       onMouseDown: (event) => event.stopPropagation(),
-      onTouchStart: (event) => event.stopPropagation(),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "rmsd-toolbar", children: [
-          hasBulkActions ? /* @__PURE__ */ jsxs("div", { className: "rmsd-bulk-actions", children: [
-            settings.enableCheckAll && !settings.singleSelection ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: "rmsd-inline-button rmsd-select-all-button",
-                onClick: () => allFilteredSelected ? deSelectAllItems(selectableItems, Boolean(filter.trim())) : selectAllItems(selectableItems, Boolean(filter.trim())),
-                disabled: settings.disabled || selectableItems.length === 0,
-                children: [
-                  settings.showCheckbox ? /* @__PURE__ */ jsx("span", { className: "rmsd-checkbox", "data-checked": allFilteredSelected, "aria-hidden": "true" }) : null,
-                  /* @__PURE__ */ jsx("span", { children: allFilteredSelected ? filter.trim() ? settings.filterUnSelectAllText : settings.unSelectAllText : filter.trim() ? settings.filterSelectAllText : settings.selectAllText })
-                ]
-              }
-            ) : null,
-            settings.addNewItemOnFilter && filter.trim() ? /* @__PURE__ */ jsxs("button", { type: "button", className: "rmsd-inline-button rmsd-add-button", onClick: handleAddFilterNewItem, children: [
-              settings.addNewButtonText,
-              ' "',
-              filter.trim(),
-              '"'
-            ] }) : null
-          ] }) : null,
-          settings.enableSearchFilter ? renderSearch ? renderSearch({ query: filter, setQuery: setFilter, closeDropdown: () => closeDropdown() }) : /* @__PURE__ */ jsxs("div", { className: "rmsd-search-shell", children: [
-            /* @__PURE__ */ jsx(StacklineIcon, { name: "search", className: "rmsd-search-icon" }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: searchRef,
-                className: "rmsd-search-input",
-                value: filter,
-                onChange: (event) => setFilter(event.target.value),
-                onKeyDown: handleSearchKeyDown,
-                placeholder: settings.searchPlaceholderText,
-                "aria-label": settings.searchAriaLabel
-              }
-            ),
-            filter ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "rmsd-search-clear",
-                "aria-label": settings.clearSearchAriaLabel,
-                onKeyDown: stopInlineKey,
-                onClick: () => setFilter(""),
-                children: /* @__PURE__ */ jsx(StacklineIcon, { name: "clear" })
-              }
-            ) : null
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "rmsd-list",
-            ref: listRef,
-            style: { maxHeight: shouldAppendToBody ? bodyListMaxHeight ?? settings.maxHeight : settings.maxHeight },
-            onScroll: settings.lazyLoading ? handleListScroll : void 0,
-            id: listboxId,
-            role: "listbox",
-            "aria-label": settings.listboxAriaLabel,
-            "aria-multiselectable": !settings.singleSelection,
-            children: loading ?? settings.loading ? /* @__PURE__ */ jsx("div", { className: "rmsd-state", role: "status", children: settings.loadingText }) : groupedItems.length > 0 ? groupedItems.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "rmsd-group", role: "group", "aria-label": group.name, children: [
-              /* @__PURE__ */ jsxs("div", { className: "rmsd-group-header", children: [
-                /* @__PURE__ */ jsxs("span", { children: [
-                  group.name,
-                  " \xB7 ",
-                  group.items.length
-                ] }),
-                settings.selectGroup && !settings.singleSelection ? /* @__PURE__ */ jsx("button", { type: "button", className: "rmsd-group-action", onClick: () => toggleGroup(group.name, group.items), children: group.items.filter((item) => !isDisabledItem(item)).every((item) => isSelected(item)) ? "Unselect" : "Select" }) : null
-              ] }),
-              group.items.map((item, index) => renderOption(item, `group-${groupIndex}`, index))
-            ] }, group.name)) : hasFilteredResults ? filteredItems.map((item, index) => renderOption(item, "item", index)) : /* @__PURE__ */ jsx("div", { className: "rmsd-state", children: renderEmptyState ? renderEmptyState(filter) : settings.noDataLabel })
-          }
-        )
-      ]
-    }
-  ) : null;
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style, ref: rootRef, "data-open": isOpen, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
+      onTouchStart: (event) => event.stopPropagation()
+    };
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      renderToolbar(),
+      renderOptionList(),
+      renderMenuFooter()
+    ] });
+    return renderSlot(
+      slots?.Menu,
       {
-        ref: triggerRef,
-        className: `rmsd-trigger${settings.disabled ? " rmsd-disabled" : ""}`,
-        onClick: handleTriggerClick,
-        onKeyDown: handleTriggerKeyDown,
-        tabIndex: settings.disabled ? -1 : 0,
-        role: "combobox",
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        "aria-controls": listboxId,
-        "aria-disabled": settings.disabled,
-        "aria-activedescendant": activeDescendantId || void 0,
-        "aria-label": getTriggerAriaLabel(),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "rmsd-value", children: selectedItems.length === 0 ? /* @__PURE__ */ jsx("span", { className: "rmsd-placeholder", children: settings.text }) : settings.singleSelection ? /* @__PURE__ */ jsx("span", { className: "rmsd-single-value", children: getLabel(selectedItems[0], settings) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "rmsd-badge-list", children: visibleBadges.map((item) => /* @__PURE__ */ jsxs("span", { className: "rmsd-badge", children: [
-              /* @__PURE__ */ jsx("span", { className: "rmsd-badge-label", children: renderBadgeNode(item) }),
-              !settings.disabled ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "rmsd-badge-remove",
-                  "aria-label": getRemoveItemAriaLabel(item),
-                  onKeyDown: stopInlineKey,
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    removeItem(item);
-                  },
-                  children: /* @__PURE__ */ jsx(StacklineIcon, { name: "remove" })
-                }
-              ) : null
-            ] }, getPrimaryValue(item, settings))) }),
-            hiddenBadgeCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "rmsd-overflow", children: [
-              "+",
-              hiddenBadgeCount
-            ] }) : null
-          ] }) }),
-          /* @__PURE__ */ jsxs("div", { className: "rmsd-actions", children: [
-            settings.clearAll && selectedItems.length > 0 && !settings.disabled ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "rmsd-clear",
-                "aria-label": settings.clearAllAriaLabel,
-                onKeyDown: stopInlineKey,
-                onClick: (event) => {
-                  event.stopPropagation();
-                  clearSelection();
-                },
-                children: /* @__PURE__ */ jsx(StacklineIcon, { name: "remove" })
-              }
-            ) : null,
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "rmsd-arrow-button",
-                disabled: settings.disabled,
-                "aria-label": isOpen ? settings.closeDropdownAriaLabel : settings.openDropdownAriaLabel,
-                "aria-expanded": isOpen,
-                "aria-controls": listboxId,
-                onKeyDown: handleArrowButtonKeyDown,
-                onClick: (event) => {
-                  event.stopPropagation();
-                  toggleDropdown();
-                },
-                children: /* @__PURE__ */ jsx("span", { className: "rmsd-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx(StacklineIcon, { name: isOpen ? "angle-up" : "angle-down" }) })
-              }
-            )
-          ] })
-        ]
+        ...slotBase,
+        props: menuProps,
+        children,
+        position: effectivePosition,
+        appendToBody: shouldAppendToBody
+      },
+      /* @__PURE__ */ jsx("div", { ...menuProps, children })
+    );
+  };
+  const renderValue = () => {
+    const valueProps = { className: "rmsd-value" };
+    let children;
+    if (selectedItems.length === 0) {
+      const placeholderProps = { className: "rmsd-placeholder" };
+      children = renderSlot(
+        slots?.Placeholder,
+        { ...slotBase, props: placeholderProps, text: settings.text },
+        /* @__PURE__ */ jsx("span", { ...placeholderProps, children: settings.text })
+      );
+    } else if (settings.singleSelection) {
+      const item = selectedItems[0];
+      const singleValueProps = { className: "rmsd-single-value" };
+      children = renderSlot(
+        slots?.SingleValue,
+        { ...slotBase, props: singleValueProps, item, label: getLabel(item, settings) },
+        /* @__PURE__ */ jsx("span", { ...singleValueProps, children: getLabel(item, settings) })
+      );
+    } else {
+      const badgeListProps = { className: "rmsd-badge-list" };
+      const badgeListChildren = visibleBadges.map((item) => /* @__PURE__ */ jsx(Fragment, { children: renderBadgeNode(item) }, getPrimaryValue(item, settings)));
+      children = renderSlot(
+        slots?.BadgeList,
+        { ...slotBase, props: badgeListProps, items: visibleBadges, children: badgeListChildren },
+        /* @__PURE__ */ jsx("div", { ...badgeListProps, children: badgeListChildren })
+      );
+    }
+    return renderSlot(
+      slots?.Value,
+      { ...slotBase, props: valueProps, children },
+      /* @__PURE__ */ jsx("div", { ...valueProps, children })
+    );
+  };
+  const renderActions = () => {
+    const actionsProps = { className: "rmsd-actions" };
+    const overflowProps = { className: "rmsd-overflow" };
+    const clearAllProps = {
+      type: "button",
+      className: "rmsd-clear",
+      "aria-label": settings.clearAllAriaLabel,
+      onKeyDown: stopInlineKey,
+      onClick: (event) => {
+        event.stopPropagation();
+        clearSelection();
+      }
+    };
+    const arrowProps = {
+      type: "button",
+      className: "rmsd-arrow-button",
+      disabled: settings.disabled,
+      "aria-label": isOpen ? settings.closeDropdownAriaLabel : settings.openDropdownAriaLabel,
+      "aria-expanded": isOpen,
+      "aria-controls": listboxId,
+      onKeyDown: handleArrowButtonKeyDown,
+      onClick: (event) => {
+        event.stopPropagation();
+        toggleDropdown();
       }
-    ),
+    };
+    const clearIcon = /* @__PURE__ */ jsx(StacklineIcon, { name: "remove" });
+    const arrowIcon = /* @__PURE__ */ jsx("span", { className: "rmsd-arrow", "aria-hidden": "true", children: /* @__PURE__ */ jsx(StacklineIcon, { name: isOpen ? "angle-up" : "angle-down" }) });
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      hiddenBadgeCount > 0 ? renderSlot(
+        slots?.OverflowCounter,
+        { ...slotBase, props: overflowProps, count: hiddenBadgeCount },
+        /* @__PURE__ */ jsxs("span", { ...overflowProps, children: [
+          "+",
+          hiddenBadgeCount
+        ] })
+      ) : null,
+      settings.clearAll && selectedItems.length > 0 && !settings.disabled ? renderSlot(
+        slots?.ClearAll,
+        { ...slotBase, props: clearAllProps, icon: clearIcon },
+        /* @__PURE__ */ jsx("button", { ...clearAllProps, children: clearIcon })
+      ) : null,
+      renderSlot(
+        slots?.Arrow,
+        { ...slotBase, props: arrowProps, icon: arrowIcon, direction: isOpen ? "up" : "down" },
+        /* @__PURE__ */ jsx("button", { ...arrowProps, children: arrowIcon })
+      )
+    ] });
+    return renderSlot(
+      slots?.Actions,
+      { ...slotBase, props: actionsProps, children },
+      /* @__PURE__ */ jsx("div", { ...actionsProps, children })
+    );
+  };
+  const renderTrigger = () => {
+    const triggerProps = {
+      ref: triggerRef,
+      className: `rmsd-trigger${settings.disabled ? " rmsd-disabled" : ""}`,
+      onClick: handleTriggerClick,
+      onKeyDown: handleTriggerKeyDown,
+      tabIndex: settings.disabled ? -1 : 0,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-controls": listboxId,
+      "aria-disabled": settings.disabled,
+      "aria-activedescendant": activeDescendantId || void 0,
+      "aria-label": getTriggerAriaLabel()
+    };
+    const children = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      renderValue(),
+      renderActions()
+    ] });
+    return renderSlot(
+      slots?.Trigger,
+      { ...slotBase, props: triggerProps, children },
+      /* @__PURE__ */ jsx("div", { ...triggerProps, children })
+    );
+  };
+  const menu = renderMenu();
+  const rootChildren = /* @__PURE__ */ jsxs(Fragment2, { children: [
+    renderTrigger(),
     shouldAppendToBody && menu && typeof document !== "undefined" ? createPortal(menu, document.body) : menu
   ] });
+  const rootProps = {
+    className: rootClassName,
+    style,
+    ref: rootRef,
+    "data-open": isOpen
+  };
+  return renderSlot(
+    slots?.Root,
+    { ...slotBase, props: rootProps, children: rootChildren },
+    /* @__PURE__ */ jsx("div", { ...rootProps, children: rootChildren })
+  );
 }
 var ReactMultiSelectDropdown = forwardRef(InnerMultiSelectDropdown);
 var MultiSelectDropdown = ReactMultiSelectDropdown;
+
+// src/useMultiSelectDropdown.ts
+import {
+  useEffect as useEffect2,
+  useId,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+
+// src/reactUtils.ts
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref && "current" in ref) {
+    ref.current = value;
+  }
+}
+function eventWasPrevented(event) {
+  return Boolean(event.defaultPrevented);
+}
+function callAll(ownHandler, userHandler) {
+  return (event) => {
+    userHandler?.(event);
+    if (!eventWasPrevented(event)) {
+      ownHandler?.(event);
+    }
+  };
+}
+
+// src/useMultiSelectState.ts
+import { useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+function useMultiSelectState({
+  data,
+  settings: incomingSettings,
+  selectedItems: controlledSelectedItems,
+  defaultSelectedItems,
+  onChange,
+  onSelect,
+  onDeSelect,
+  onSelectAll,
+  onDeSelectAll,
+  onFilterSelectAll,
+  onFilterDeSelectAll,
+  onAddFilterNewItem,
+  onGroupSelect,
+  onGroupDeSelect,
+  onSelectionShouldClose
+}) {
+  const [filter, setFilter] = useState3("");
+  const [addedItems, setAddedItems] = useState3([]);
+  const addRequestIdRef = useRef2(0);
+  const settings = useMemo2(() => resolveDropdownSettings(incomingSettings), [incomingSettings]);
+  const [selectedItems, setSelectedItems] = useControllableSelection(
+    controlledSelectedItems,
+    defaultSelectedItems,
+    onChange
+  );
+  const allItems = useMemo2(
+    () => mergeUniqueItems(data, [...selectedItems, ...addedItems], settings),
+    [addedItems, data, selectedItems, settings]
+  );
+  const filteredItems = useMemo2(
+    () => allItems.filter((item) => itemMatchesQuery(item, filter, settings)),
+    [allItems, filter, settings]
+  );
+  const isSelected = (item) => selectedItems.some(
+    (selectedItem) => getPrimaryValue(selectedItem, settings) === getPrimaryValue(item, settings)
+  );
+  const isDisabled = (item) => settings.disabled || isDisabledItem(item);
+  const selectableItems = filteredItems.filter((item) => !isDisabled(item));
+  const allFilteredSelected = selectableItems.length > 0 && selectableItems.every((item) => isSelected(item));
+  const visibleBadgeLimit = getVisibleBadgeLimit(selectedItems.length, settings.badgeShowLimit);
+  const visibleBadges = settings.singleSelection ? selectedItems : selectedItems.slice(0, visibleBadgeLimit);
+  const hiddenBadgeCount = settings.singleSelection ? 0 : Math.max(selectedItems.length - visibleBadges.length, 0);
+  const updateSelection = (nextItems) => {
+    setSelectedItems(nextItems);
+  };
+  const removeItem = (item) => {
+    if (settings.disabled) {
+      return;
+    }
+    const nextItems = selectedItems.filter(
+      (selectedItem) => getPrimaryValue(selectedItem, settings) !== getPrimaryValue(item, settings)
+    );
+    updateSelection(nextItems);
+    onDeSelect?.(item);
+  };
+  const removeLastSelectedItem = () => {
+    const lastItem = selectedItems[selectedItems.length - 1];
+    if (!lastItem || settings.disabled) {
+      return;
+    }
+    removeItem(lastItem);
+  };
+  const selectItem = (item) => {
+    if (settings.disabled || isDisabledItem(item)) {
+      return;
+    }
+    if (isSelected(item)) {
+      if (settings.singleSelection) {
+        onSelectionShouldClose?.();
+        return;
+      }
+      removeItem(item);
+      return;
+    }
+    if (settings.singleSelection) {
+      updateSelection([item]);
+      onSelect?.(item);
+      onSelectionShouldClose?.();
+      return;
+    }
+    if (settings.limitSelection && selectedItems.length >= settings.limitSelection) {
+      return;
+    }
+    const nextItems = [...selectedItems, item];
+    updateSelection(nextItems);
+    onSelect?.(item);
+    if (settings.closeDropDownOnSelection) {
+      onSelectionShouldClose?.();
+    }
+  };
+  const selectAll = (items = selectableItems, filteredSelection = false) => {
+    if (settings.disabled || settings.singleSelection) {
+      return;
+    }
+    const selectedIds = new Set(selectedItems.map((item) => getPrimaryValue(item, settings)));
+    const remainingCapacity = settings.limitSelection ? Math.max(settings.limitSelection - selectedItems.length, 0) : Number.MAX_SAFE_INTEGER;
+    const nextItemsToAdd = items.filter((item) => !selectedIds.has(getPrimaryValue(item, settings))).filter((item) => !isDisabledItem(item)).slice(0, remainingCapacity);
+    const nextItems = [...selectedItems, ...nextItemsToAdd];
+    updateSelection(nextItems);
+    if (filteredSelection) {
+      onFilterSelectAll?.(nextItemsToAdd);
+    } else {
+      onSelectAll?.(nextItems);
+    }
+  };
+  const deSelectAll = (items = selectedItems, filteredSelection = false) => {
+    if (settings.disabled) {
+      return;
+    }
+    const itemIds = new Set(items.map((item) => getPrimaryValue(item, settings)));
+    const nextItems = selectedItems.filter((item) => !itemIds.has(getPrimaryValue(item, settings)));
+    updateSelection(nextItems);
+    if (filteredSelection) {
+      onFilterDeSelectAll?.(items);
+    } else {
+      onDeSelectAll?.(items);
+    }
+  };
+  const clearSelection = () => deSelectAll(selectedItems);
+  const toggleGroup = (groupName, items) => {
+    if (settings.disabled) {
+      return;
+    }
+    const enabledItems = items.filter((item) => !isDisabledItem(item));
+    const allSelected = enabledItems.length > 0 && enabledItems.every((item) => isSelected(item));
+    if (allSelected) {
+      deSelectAll(enabledItems);
+      onGroupDeSelect?.(groupName, enabledItems);
+      return;
+    }
+    selectAll(enabledItems);
+    onGroupSelect?.(groupName, enabledItems);
+  };
+  const addFilterNewItem = async () => {
+    if (settings.disabled) {
+      return;
+    }
+    const query = filter.trim();
+    if (!query) {
+      return;
+    }
+    const requestId = addRequestIdRef.current + 1;
+    addRequestIdRef.current = requestId;
+    const result = await onAddFilterNewItem?.(query);
+    if (requestId !== addRequestIdRef.current) {
+      return;
+    }
+    const nextItem = result === void 0 ? createItemFromQuery(query, settings, data[0]) : result;
+    setAddedItems((currentItems) => mergeUniqueItems(currentItems, [nextItem], settings));
+    if (settings.singleSelection) {
+      updateSelection([nextItem]);
+    } else {
+      updateSelection(mergeUniqueItems(selectedItems, [nextItem], settings));
+    }
+    setFilter("");
+  };
+  return {
+    settings,
+    filter,
+    setFilter,
+    selectedItems,
+    allItems,
+    filteredItems,
+    selectableItems,
+    visibleBadges,
+    hiddenBadgeCount,
+    allFilteredSelected,
+    isSelected,
+    isDisabled,
+    getItemLabel: (item) => getLabel(item, settings),
+    getItemKey: (item) => getPrimaryValue(item, settings),
+    selectItem,
+    removeItem,
+    removeLastSelectedItem,
+    selectAll,
+    deSelectAll,
+    clearSelection,
+    toggleGroup,
+    addFilterNewItem
+  };
+}
+
+// src/useMultiSelectDropdown.ts
+function isSpaceKey2(key) {
+  return key === " " || key === "Spacebar";
+}
+function useMultiSelectDropdown({
+  id,
+  data,
+  settings: incomingSettings,
+  selectedItems: controlledSelectedItems,
+  defaultSelectedItems,
+  onChange,
+  onSelect,
+  onDeSelect,
+  onSelectAll,
+  onDeSelectAll,
+  onOpen,
+  onClose,
+  onScrollToEnd,
+  onFilterSelectAll,
+  onFilterDeSelectAll,
+  onAddFilterNewItem,
+  onGroupSelect,
+  onGroupDeSelect
+}) {
+  const reactId = useId();
+  const instanceId = sanitizeId(id || `stackline-multiselect-${reactId}`);
+  const rootRef = useRef3(null);
+  const triggerRef = useRef3(null);
+  const searchRef = useRef3(null);
+  const listboxRef = useRef3(null);
+  const optionRefs = useRef3(/* @__PURE__ */ new Map());
+  const lastScrollHeightRef = useRef3(0);
+  const closeDropdownRef = useRef3(() => void 0);
+  const pendingFocusRef = useRef3("search");
+  const [isOpen, setIsOpen] = useState4(false);
+  const [activeOptionIndex, setActiveOptionIndex] = useState4(-1);
+  const listboxId = `${instanceId}-listbox`;
+  const state = useMultiSelectState({
+    data,
+    settings: incomingSettings,
+    selectedItems: controlledSelectedItems,
+    defaultSelectedItems,
+    onChange,
+    onSelect,
+    onDeSelect,
+    onSelectAll,
+    onDeSelectAll,
+    onFilterSelectAll,
+    onFilterDeSelectAll,
+    onAddFilterNewItem,
+    onGroupSelect,
+    onGroupDeSelect,
+    onSelectionShouldClose: () => closeDropdownRef.current()
+  });
+  const {
+    settings,
+    filter,
+    setFilter,
+    selectedItems,
+    filteredItems,
+    selectableItems,
+    visibleBadges,
+    hiddenBadgeCount,
+    allFilteredSelected,
+    isSelected,
+    isDisabled
+  } = state;
+  const limitReached = Boolean(settings.limitSelection) && selectedItems.length >= settings.limitSelection;
+  const options = useMemo3(() => {
+    let optionIndex = -1;
+    return filteredItems.map((item) => {
+      optionIndex += 1;
+      const groupName = getGroupName(item, settings) || void 0;
+      const selected = selectedItems.some(
+        (selectedItem) => getPrimaryValue(selectedItem, settings) === getPrimaryValue(item, settings)
+      );
+      const disabled = settings.disabled || isDisabledItem(item) || limitReached && !selected;
+      const key = getPrimaryValue(item, settings);
+      return {
+        item,
+        key,
+        id: `${instanceId}-option-${optionIndex}-${sanitizeId(key)}`,
+        label: getLabel(item, settings),
+        selected,
+        disabled,
+        index: optionIndex,
+        groupName
+      };
+    });
+  }, [filteredItems, instanceId, limitReached, selectedItems, settings]);
+  const selectableOptions = options.filter((option) => !option.disabled);
+  const selectedOptions = options.filter((option) => option.selected);
+  const groups = useMemo3(() => {
+    if (!settings.groupBy) {
+      return [];
+    }
+    const bucket = /* @__PURE__ */ new Map();
+    for (const option of options) {
+      const groupName = option.groupName || "Ungrouped";
+      const current = bucket.get(groupName) || [];
+      current.push(option);
+      bucket.set(groupName, current);
+    }
+    return Array.from(bucket.entries()).map(([name, groupOptions]) => {
+      const enabledOptions = groupOptions.filter((option) => !option.disabled);
+      return {
+        name,
+        items: groupOptions,
+        selected: enabledOptions.length > 0 && enabledOptions.every((option) => option.selected),
+        disabled: enabledOptions.length === 0
+      };
+    });
+  }, [options, settings.groupBy]);
+  const activeOption = options.find((option) => option.index === activeOptionIndex && !option.disabled);
+  const activeDescendantId = activeOption?.id;
+  const hasFilteredResults = options.length > 0;
+  const label = selectedItems.length ? selectedItems.map((item) => getLabel(item, settings)).join(", ") : settings.text;
+  const focusOption = (index) => {
+    if (!options.length) {
+      setActiveOptionIndex(-1);
+      return;
+    }
+    const enabledOptions = options.filter((option2) => !option2.disabled);
+    if (!enabledOptions.length) {
+      setActiveOptionIndex(-1);
+      return;
+    }
+    const boundedIndex = Math.max(0, Math.min(index, enabledOptions.length - 1));
+    const option = enabledOptions[boundedIndex];
+    setActiveOptionIndex(option.index);
+    window.setTimeout(() => {
+      optionRefs.current.get(option.id)?.focus();
+      optionRefs.current.get(option.id)?.scrollIntoView({ block: "nearest" });
+    }, 0);
+  };
+  const focusOptionById = (optionId, fallbackIndex, moveToNextOption = false) => {
+    setActiveOptionIndex(fallbackIndex);
+    window.setTimeout(() => {
+      const focusAfterRender = () => {
+        if (moveToNextOption) {
+          const optionNodes = Array.from(
+            listboxRef.current?.querySelectorAll(
+              '[data-headless-option="true"]:not([aria-disabled="true"])'
+            ) ?? []
+          );
+          const currentIndex = optionNodes.findIndex((optionNode2) => optionNode2.id === optionId);
+          const nextOptionNode = currentIndex >= 0 ? optionNodes[currentIndex + 1] : void 0;
+          if (nextOptionNode) {
+            const nextOption = options.find((option) => option.id === nextOptionNode.id);
+            nextOptionNode.focus();
+            nextOptionNode.scrollIntoView({ block: "nearest" });
+            setActiveOptionIndex(nextOption?.index ?? fallbackIndex + 1);
+            return;
+          }
+        }
+        const optionNode = optionRefs.current.get(optionId);
+        if (optionNode) {
+          optionNode.focus();
+          optionNode.scrollIntoView({ block: "nearest" });
+          return;
+        }
+        focusOption(fallbackIndex);
+      };
+      if (typeof window.requestAnimationFrame === "function") {
+        window.requestAnimationFrame(focusAfterRender);
+        return;
+      }
+      focusAfterRender();
+    }, 0);
+  };
+  const openDropdown = (focusTarget = "search") => {
+    if (settings.disabled) {
+      return;
+    }
+    pendingFocusRef.current = focusTarget;
+    setIsOpen((current) => {
+      if (!current) {
+        onOpen?.();
+      }
+      return true;
+    });
+  };
+  const closeDropdown = () => {
+    setIsOpen((current) => {
+      if (current) {
+        onClose?.();
+      }
+      return false;
+    });
+    setActiveOptionIndex(-1);
+  };
+  closeDropdownRef.current = closeDropdown;
+  const toggleDropdown = () => {
+    if (isOpen) {
+      closeDropdown();
+      return;
+    }
+    openDropdown();
+  };
+  const focusAfterSelectionChange = (target = "search") => {
+    if (target === "none") {
+      return;
+    }
+    window.setTimeout(() => {
+      if (target === "search" && isOpen && settings.enableSearchFilter) {
+        searchRef.current?.focus();
+        return;
+      }
+      triggerRef.current?.focus();
+    }, 0);
+  };
+  const selectItem = (item, focusTarget = "search") => {
+    const wasSelected = state.isSelected(item);
+    const willClose = settings.singleSelection || !wasSelected && settings.closeDropDownOnSelection;
+    state.selectItem(item);
+    focusAfterSelectionChange(willClose ? "trigger" : focusTarget);
+  };
+  const removeItem = (item, focusTarget = "search") => {
+    state.removeItem(item);
+    focusAfterSelectionChange(focusTarget);
+  };
+  const removeLastSelectedItem = () => {
+    state.removeLastSelectedItem();
+    focusAfterSelectionChange();
+  };
+  const selectAll = (items = selectableItems, filteredSelection = false) => {
+    state.selectAll(items, filteredSelection);
+    focusAfterSelectionChange();
+  };
+  const deSelectAll = (items = selectedItems, filteredSelection = false) => {
+    state.deSelectAll(items, filteredSelection);
+    focusAfterSelectionChange();
+  };
+  const clearSelection = () => {
+    state.clearSelection();
+    focusAfterSelectionChange();
+  };
+  const toggleGroup = (groupName, items) => {
+    state.toggleGroup(groupName, items);
+    focusAfterSelectionChange();
+  };
+  const addFilterNewItem = async () => {
+    await state.addFilterNewItem();
+    focusAfterSelectionChange();
+  };
+  const handleListScroll = () => {
+    if (!listboxRef.current || !onScrollToEnd) {
+      return;
+    }
+    const { scrollHeight, scrollTop, clientHeight } = listboxRef.current;
+    if (scrollHeight === lastScrollHeightRef.current && scrollTop + clientHeight < scrollHeight - 12) {
+      return;
+    }
+    if (scrollTop + clientHeight >= scrollHeight - 12) {
+      lastScrollHeightRef.current = scrollHeight;
+      onScrollToEnd({ scrollTop, scrollHeight, clientHeight });
+    }
+  };
+  const handleTriggerKeyDown = (event) => {
+    if (settings.disabled) {
+      return;
+    }
+    if (isSpaceKey2(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey2(event.key)) {
+      event.preventDefault();
+      toggleDropdown();
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
+      event.preventDefault();
+      if (isOpen) {
+        focusOption(0);
+      } else {
+        openDropdown("first");
+      }
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "ArrowUp") {
+      event.preventDefault();
+      if (isOpen) {
+        focusOption(selectableOptions.length - 1);
+      } else {
+        openDropdown("last");
+      }
+      return;
+    }
+    if (settings.keyboard.escape && event.key === "Escape" && isOpen) {
+      event.preventDefault();
+      closeDropdown();
+    }
+  };
+  const handleSearchKeyDown = (event) => {
+    if (isSpaceKey2(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      return;
+    }
+    if (settings.keyboard.backspaceRemovesLastWhenSearchEmpty && event.key === "Backspace" && !filter && selectedItems.length > 0 && !settings.singleSelection) {
+      event.preventDefault();
+      removeLastSelectedItem();
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
+      event.preventDefault();
+      focusOption(0);
+      return;
+    }
+    if (settings.keyboard.escape && event.key === "Escape") {
+      event.preventDefault();
+      closeDropdown();
+      triggerRef.current?.focus();
+    }
+  };
+  const handleOptionKeyDown = (event, option) => {
+    if (isSpaceKey2(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      return;
+    }
+    if ((event.key === "Enter" || isSpaceKey2(event.key)) && event.repeat) {
+      event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey2(event.key)) {
+      event.preventDefault();
+      const enabledOptions2 = options.filter((currentOption) => !currentOption.disabled);
+      const currentEnabledIndex2 = enabledOptions2.findIndex((currentOption) => currentOption.id === option.id);
+      const willClose = settings.singleSelection || !state.isSelected(option.item) && settings.closeDropDownOnSelection;
+      const moveToNextOption = isSpaceKey2(event.key) && settings.keyboard.spaceOptionAction === "toggle-and-next";
+      selectItem(option.item, willClose ? "trigger" : "none");
+      if (!willClose) {
+        focusOptionById(option.id, Math.max(0, currentEnabledIndex2), moveToNextOption);
+      }
+      return;
+    }
+    const enabledOptions = options.filter((currentOption) => !currentOption.disabled);
+    const currentEnabledIndex = enabledOptions.findIndex((currentOption) => currentOption.id === option.id);
+    if (settings.keyboard.arrows && event.key === "ArrowDown") {
+      event.preventDefault();
+      if (currentEnabledIndex < enabledOptions.length - 1) {
+        focusOption(currentEnabledIndex + 1);
+      } else if (settings.lazyLoading) {
+        handleListScroll();
+      }
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "ArrowUp") {
+      event.preventDefault();
+      if (currentEnabledIndex > 0) {
+        focusOption(currentEnabledIndex - 1);
+      } else if (settings.enableSearchFilter) {
+        searchRef.current?.focus();
+      } else {
+        triggerRef.current?.focus();
+      }
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "Home") {
+      event.preventDefault();
+      focusOption(0);
+      return;
+    }
+    if (settings.keyboard.arrows && event.key === "End") {
+      event.preventDefault();
+      focusOption(enabledOptions.length - 1);
+      return;
+    }
+    if (settings.keyboard.escape && event.key === "Escape") {
+      event.preventDefault();
+      closeDropdown();
+      triggerRef.current?.focus();
+    }
+  };
+  const handleInlineButtonKeyDown = (event) => {
+    if (isSpaceKey2(event.key) && !settings.keyboard.space) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (event.key === "Enter" || isSpaceKey2(event.key)) {
+      event.stopPropagation();
+    }
+  };
+  const handleRemoveButtonKeyDown = (event, item) => {
+    if (settings.keyboard.deleteRemovesFocusedBadge && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      event.stopPropagation();
+      removeItem(item);
+      return;
+    }
+    handleInlineButtonKeyDown(event);
+  };
+  const getOptionFromItem = (optionOrItem) => {
+    if (optionOrItem && typeof optionOrItem === "object" && "item" in optionOrItem && "id" in optionOrItem && "index" in optionOrItem) {
+      return optionOrItem;
+    }
+    const item = optionOrItem;
+    const key = getPrimaryValue(item, settings);
+    const existingOption = options.find((option) => option.key === key);
+    if (existingOption) {
+      return existingOption;
+    }
+    const selected = isSelected(item);
+    return {
+      item,
+      key,
+      id: `${instanceId}-option-manual-${sanitizeId(key)}`,
+      label: getLabel(item, settings),
+      selected,
+      disabled: settings.disabled || isDisabledItem(item) || limitReached && !selected,
+      index: -1,
+      groupName: getGroupName(item, settings) || void 0
+    };
+  };
+  useEffect2(() => {
+    if (!isOpen) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (!rootRef.current?.contains(target) && !listboxRef.current?.contains(target)) {
+        closeDropdown();
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && settings.keyboard.escape) {
+        closeDropdown();
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, settings.keyboard.escape]);
+  useEffect2(() => {
+    lastScrollHeightRef.current = 0;
+  }, [options.length]);
+  useEffect2(() => {
+    if (!isOpen) {
+      return;
+    }
+    const pendingFocus = pendingFocusRef.current;
+    pendingFocusRef.current = "search";
+    window.setTimeout(() => {
+      if (pendingFocus === "first") {
+        focusOption(0);
+        return;
+      }
+      if (pendingFocus === "last") {
+        focusOption(selectableOptions.length - 1);
+        return;
+      }
+      if (settings.enableSearchFilter && settings.searchAutofocus) {
+        searchRef.current?.focus();
+      }
+    }, 0);
+  }, [
+    isOpen,
+    options.length,
+    selectableOptions.length,
+    settings.enableSearchFilter,
+    settings.searchAutofocus
+  ]);
+  return {
+    settings,
+    isOpen,
+    filter,
+    setFilter,
+    selectedItems,
+    selectedOptions,
+    options,
+    groups,
+    visibleOptions: options,
+    visibleBadges,
+    hiddenBadgeCount,
+    allFilteredSelected,
+    hasFilteredResults,
+    activeDescendantId,
+    listboxId,
+    label,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    clearSelection,
+    selectItem,
+    removeItem,
+    selectAll,
+    deSelectAll,
+    toggleGroup,
+    addFilterNewItem,
+    isSelected,
+    isDisabled,
+    getItemLabel: (item) => getLabel(item, settings),
+    getItemKey: (item) => getPrimaryValue(item, settings),
+    getRootProps: (props = {}) => ({
+      ...props,
+      ref: (node) => {
+        rootRef.current = node;
+        assignRef(props.ref, node);
+      }
+    }),
+    getTriggerProps: (props = {}) => ({
+      type: "button",
+      ...props,
+      ref: (node) => {
+        triggerRef.current = node;
+        assignRef(props.ref, node);
+      },
+      disabled: settings.disabled || props.disabled,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-controls": listboxId,
+      "aria-disabled": settings.disabled || void 0,
+      "aria-activedescendant": activeDescendantId,
+      "aria-label": selectedItems.length ? `${settings.ariaLabel}: ${selectedItems.map((item) => getLabel(item, settings)).join(", ")}` : settings.ariaLabel,
+      onClick: callAll(() => toggleDropdown(), props.onClick),
+      onKeyDown: callAll((event) => {
+        handleTriggerKeyDown(event);
+      }, props.onKeyDown)
+    }),
+    getListboxProps: (props = {}) => ({
+      ...props,
+      ref: (node) => {
+        listboxRef.current = node;
+        assignRef(props.ref, node);
+      },
+      id: props.id || listboxId,
+      role: "listbox",
+      "aria-label": props["aria-label"] || settings.listboxAriaLabel,
+      "aria-multiselectable": !settings.singleSelection,
+      onScroll: callAll(() => {
+        if (settings.lazyLoading) {
+          handleListScroll();
+        }
+      }, props.onScroll)
+    }),
+    getOptionProps: (optionOrItem, props = {}) => {
+      const option = getOptionFromItem(optionOrItem);
+      return {
+        ...props,
+        ref: (node) => {
+          if (node) {
+            optionRefs.current.set(option.id, node);
+          } else {
+            optionRefs.current.delete(option.id);
+          }
+          assignRef(props.ref, node);
+        },
+        id: props.id || option.id,
+        role: "option",
+        tabIndex: option.disabled || !settings.keyboard.tab ? -1 : props.tabIndex ?? 0,
+        "aria-selected": option.selected,
+        "aria-checked": option.selected,
+        "aria-disabled": option.disabled || void 0,
+        "data-headless-option": "true",
+        onClick: callAll((event) => {
+          if (option.disabled) {
+            return;
+          }
+          const willClose = settings.singleSelection || !state.isSelected(option.item) && settings.closeDropDownOnSelection;
+          selectItem(option.item, willClose ? "trigger" : "none");
+          if (!willClose) {
+            setActiveOptionIndex(option.index);
+            focusOptionById(option.id, option.index);
+          }
+        }, props.onClick),
+        onFocus: callAll(() => setActiveOptionIndex(option.index), props.onFocus),
+        onKeyDown: callAll((event) => {
+          handleOptionKeyDown(event, option);
+        }, props.onKeyDown)
+      };
+    },
+    getSearchInputProps: (props = {}) => ({
+      type: "search",
+      ...props,
+      ref: (node) => {
+        searchRef.current = node;
+        assignRef(props.ref, node);
+      },
+      value: props.value ?? filter,
+      placeholder: props.placeholder ?? settings.searchPlaceholderText,
+      "aria-label": props["aria-label"] ?? settings.searchAriaLabel,
+      onChange: callAll((event) => {
+        setFilter(event.currentTarget.value);
+      }, props.onChange),
+      onKeyDown: callAll((event) => {
+        handleSearchKeyDown(event);
+      }, props.onKeyDown)
+    }),
+    getClearAllButtonProps: (props = {}) => ({
+      type: "button",
+      ...props,
+      disabled: settings.disabled || selectedItems.length === 0 || props.disabled,
+      "aria-label": props["aria-label"] ?? settings.clearAllAriaLabel,
+      onKeyDown: callAll((event) => {
+        handleInlineButtonKeyDown(event);
+      }, props.onKeyDown),
+      onClick: callAll(() => clearSelection(), props.onClick)
+    }),
+    getRemoveButtonProps: (item, props = {}) => ({
+      type: "button",
+      ...props,
+      disabled: settings.disabled || props.disabled,
+      "aria-label": props["aria-label"] ?? (typeof settings.removeItemAriaLabel === "function" ? settings.removeItemAriaLabel(item) : `${settings.removeItemAriaLabel}: ${getLabel(item, settings)}`),
+      onKeyDown: callAll((event) => {
+        handleRemoveButtonKeyDown(event, item);
+      }, props.onKeyDown),
+      onClick: callAll(() => removeItem(item), props.onClick)
+    })
+  };
+}
+
+// src/createMultiSelectDropdown.ts
+function createMultiSelectDropdown() {
+  const TypedDropdown = MultiSelectDropdown;
+  function useDropdown(props) {
+    return useMultiSelectDropdown(props);
+  }
+  function useSelectionState(props) {
+    return useMultiSelectState(props);
+  }
+  function defineSettings(settings) {
+    return settings;
+  }
+  function defineSlots(slots) {
+    return slots;
+  }
+  return {
+    Dropdown: TypedDropdown,
+    MultiSelectDropdown: TypedDropdown,
+    useDropdown,
+    useSelectionState,
+    defineSettings,
+    defineSlots
+  };
+}
 export {
   MultiSelectDropdown,
-  ReactMultiSelectDropdown
+  ReactMultiSelectDropdown,
+  createMultiSelectDropdown,
+  useMultiSelectDropdown,
+  useMultiSelectState
 };