@spear-ai/spectral 1.13.1 → 1.14.1

package/dist/MultiSelect/MultiSelectBase.js

@@ -1,348 +1,425 @@
-'use client'
-import '../styles/main.css'
-import { CheckmarkIcon as e } from "../Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as t } from "../Icons/ChevronDownIcon.js";
-import { CloseIcon as n } from "../Icons/CloseIcon.js";
-import { SearchIcon as r } from "../Icons/SearchIcon.js";
-import { t as i } from "../twUtils-BpqlKSeB.js";
-import { ErrorMessage as a, WarningMessage as o } from "../FormFieldMessage.js";
-import { EmptyState as s, LoadingState as c, getAriaProps as l, getDropdownSurfaceClasses as u, getDropdownWidthStyles as d, getErrorMessageId as f, getTriggerClasses as ee, useFormFieldId as te } from "../utils/formFieldUtils.js";
-import { useUncontrolledState as ne } from "../hooks/useUncontrolledState.js";
-import { Label as re } from "../Label.js";
-import { useAutoDropdownHorizontalShift as ie } from "../utils/dropdownPositioning.js";
-import { a as ae, i as oe, n as se, r as ce } from "../dist-B9w6c9RC.js";
-import { useCallback as p, useEffect as le, useId as ue, useMemo as m, useRef as de, useState as h } from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+'use client';
+import { CheckmarkIcon } from "../Icons/CheckmarkIcon.js";
+import { ChevronDownIcon } from "../Icons/ChevronDownIcon.js";
+import { CloseIcon } from "../Icons/CloseIcon.js";
+import { SearchIcon } from "../Icons/SearchIcon.js";
+import { cn } from "../utils/twUtils.js";
+import { ErrorMessage, WarningMessage } from "../FormFieldMessage.js";
+import { EmptyState, LoadingState, getAriaProps, getDropdownSurfaceClasses, getDropdownWidthStyles, getErrorMessageId, getTriggerClasses, useFormFieldId } from "../utils/formFieldUtils.js";
+import { useUncontrolledState } from "../hooks/useUncontrolledState.js";
+import { Label } from "../Label.js";
+import { useAutoDropdownHorizontalShift } from "../utils/dropdownPositioning.js";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Popover from "@radix-ui/react-popover";
+
 //#region src/components/MultiSelect/MultiSelectBase.tsx
-var fe = "h-4 w-4", pe = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)"), me = (e, t, n, r, i, a, o, s, c) => {
-	let [l, u] = h(-1), d = m(() => {
-		let t = [];
-		return o && t.push({ type: "search" }), s && t.push({ type: "select-all" }), e.forEach((e, n) => {
-			e.disabled || t.push({
+const ICON_SIZE = "h-4 w-4";
+const getDropdownClasses = () => {
+	return cn("max-h-80 z-50 overflow-hidden", getDropdownSurfaceClasses(), "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:fade-in-0", "motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:zoom-in-95", "motion-safe:data-[side=bottom]:slide-in-from-top-2", "motion-safe:data-[side=top]:slide-in-from-bottom-2", "origin-(--radix-popover-content-transform-origin)");
+};
+const useKeyboardNavigation = (options, onClearAll, onClose, onSelect, onSelectAll, searchInputRef, showSearch, showSelectAll, showClearAll) => {
+	const [focusedIndex, setFocusedIndex] = useState(-1);
+	const focusableItems = useMemo(() => {
+		const items = [];
+		if (showSearch) items.push({ type: "search" });
+		if (showSelectAll) items.push({ type: "select-all" });
+		options.forEach((option, index) => {
+			if (!option.disabled) items.push({
 				type: "option",
-				index: n,
-				value: e.value
+				index,
+				value: option.value
 			});
-		}), c && t.push({ type: "clear-all" }), t;
+		});
+		if (showClearAll) items.push({ type: "clear-all" });
+		return items;
 	}, [
-		e,
-		o,
-		s,
-		c
-	]), f = p((e) => {
-		e < 0 || e >= d.length || d[e].type === "search" && a.current?.focus();
-	}, [d, a]);
+		options,
+		showSearch,
+		showSelectAll,
+		showClearAll
+	]);
+	const focusCurrentItem = useCallback((index) => {
+		if (index < 0 || index >= focusableItems.length) return;
+		if (focusableItems[index].type === "search") searchInputRef.current?.focus();
+	}, [focusableItems, searchInputRef]);
 	return {
-		focusedIndex: l,
-		setFocusedIndex: u,
-		handleKeyDown: p((e) => {
-			let a = l >= 0 && l < d.length ? d[l] : null;
-			if (e.key === " " && a?.type === "search" || e.key === "Enter" && a?.type === "search") return;
-			let o = {
+		focusedIndex,
+		setFocusedIndex,
+		handleKeyDown: useCallback((event) => {
+			const currentItem = focusedIndex >= 0 && focusedIndex < focusableItems.length ? focusableItems[focusedIndex] : null;
+			if (event.key === " " && currentItem?.type === "search") return;
+			if (event.key === "Enter" && currentItem?.type === "search") return;
+			const handler = {
 				ArrowDown: () => {
-					e.preventDefault();
-					let t = Math.min(l + 1, d.length - 1);
-					u(t), f(t);
+					event.preventDefault();
+					const newIndex = Math.min(focusedIndex + 1, focusableItems.length - 1);
+					setFocusedIndex(newIndex);
+					focusCurrentItem(newIndex);
 				},
 				ArrowUp: () => {
-					e.preventDefault();
-					let t = Math.max(l - 1, 0);
-					u(t), f(t);
+					event.preventDefault();
+					const newIndex = Math.max(focusedIndex - 1, 0);
+					setFocusedIndex(newIndex);
+					focusCurrentItem(newIndex);
 				},
 				Tab: () => {
-					if (e.shiftKey) if (l <= 0) n();
+					if (event.shiftKey) if (focusedIndex <= 0) onClose();
 					else {
-						e.preventDefault();
-						let t = l - 1;
-						u(t), f(t);
+						event.preventDefault();
+						const newIndex = focusedIndex - 1;
+						setFocusedIndex(newIndex);
+						focusCurrentItem(newIndex);
 					}
-					else if (l >= d.length - 1) n();
+					else if (focusedIndex >= focusableItems.length - 1) onClose();
 					else {
-						e.preventDefault();
-						let t = l + 1;
-						u(t), f(t);
+						event.preventDefault();
+						const newIndex = focusedIndex + 1;
+						setFocusedIndex(newIndex);
+						focusCurrentItem(newIndex);
 					}
 				},
 				Enter: () => {
-					if (e.preventDefault(), l >= 0 && l < d.length) {
-						let e = d[l];
-						e.type === "select-all" ? i() : e.type === "clear-all" ? t() : e.type === "option" && r(e.value);
+					event.preventDefault();
+					if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {
+						const item = focusableItems[focusedIndex];
+						if (item.type === "select-all") onSelectAll();
+						else if (item.type === "clear-all") onClearAll();
+						else if (item.type === "option") onSelect(item.value);
 					}
 				},
 				" ": () => {
-					if (e.preventDefault(), l >= 0 && l < d.length) {
-						let e = d[l];
-						e.type === "select-all" ? i() : e.type === "clear-all" ? t() : e.type === "option" && r(e.value);
+					event.preventDefault();
+					if (focusedIndex >= 0 && focusedIndex < focusableItems.length) {
+						const item = focusableItems[focusedIndex];
+						if (item.type === "select-all") onSelectAll();
+						else if (item.type === "clear-all") onClearAll();
+						else if (item.type === "option") onSelect(item.value);
 					}
 				},
 				Escape: () => {
-					e.preventDefault(), n();
+					event.preventDefault();
+					onClose();
 				}
-			}[e.key];
-			o && o();
+			}[event.key];
+			if (handler) handler();
 		}, [
-			d,
-			l,
-			r,
-			i,
-			t,
-			n,
-			f
+			focusableItems,
+			focusedIndex,
+			onSelect,
+			onSelectAll,
+			onClearAll,
+			onClose,
+			focusCurrentItem
 		]),
-		getOptionFocusIndex: p((e) => {
-			if (l < 0 || l >= d.length) return !1;
-			let t = d[l];
-			return t.type === "option" && t.index === e;
-		}, [l, d]),
-		isSearchFocused: m(() => l < 0 || l >= d.length ? !1 : d[l].type === "search", [l, d]),
-		isSelectAllFocused: m(() => l < 0 || l >= d.length ? !1 : d[l].type === "select-all", [l, d]),
-		isClearAllFocused: m(() => l < 0 || l >= d.length ? !1 : d[l].type === "clear-all", [l, d]),
-		focusedOptionValue: m(() => {
-			if (l < 0 || l >= d.length) return null;
-			let e = d[l];
-			return e.type === "option" ? e.value : null;
-		}, [l, d])
+		getOptionFocusIndex: useCallback((optionIndex) => {
+			if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false;
+			const item = focusableItems[focusedIndex];
+			return item.type === "option" && item.index === optionIndex;
+		}, [focusedIndex, focusableItems]),
+		isSearchFocused: useMemo(() => {
+			if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false;
+			return focusableItems[focusedIndex].type === "search";
+		}, [focusedIndex, focusableItems]),
+		isSelectAllFocused: useMemo(() => {
+			if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false;
+			return focusableItems[focusedIndex].type === "select-all";
+		}, [focusedIndex, focusableItems]),
+		isClearAllFocused: useMemo(() => {
+			if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return false;
+			return focusableItems[focusedIndex].type === "clear-all";
+		}, [focusedIndex, focusableItems]),
+		focusedOptionValue: useMemo(() => {
+			if (focusedIndex < 0 || focusedIndex >= focusableItems.length) return null;
+			const item = focusableItems[focusedIndex];
+			return item.type === "option" ? item.value : null;
+		}, [focusedIndex, focusableItems])
 	};
-}, y = ({ className: u, clearAllLabel: y = "Clear all", closeOnSelect: b = !1, dropdownWidth: x = "trigger", emptyMessage: he = "No options found", errorMessage: ge, defaultValue: _e = [], disabled: ve, id: S, label: C, loadingMessage: ye = "Loading options…", maxCount: w = 3, name: T, onChange: be, options: E = [], placeholder: xe = "Select options", ref: Se, searchPlaceholder: Ce = "Search options…", selectAllLabel: we = "Select all", showClearAll: Te = !0, showSearch: D = !0, showSelectAll: O = !0, sortAlphabetically: k = !1, state: A = "default", value: Ee, warningMessage: j, "aria-label": De, "aria-describedby": Oe, ...M }) => {
-	let ke = ue(), N = te(S, T ?? `multiselect-${ke}`), P = `${N}-listbox`, F = f(N), I = `${N}-warning`, Ae = A === "error" ? F : A === "warning" && j ? I : void 0, [L, R] = h(!1), { dropdownShiftStyle: je, setDropdownElement: Me } = ie(L), [z, Ne] = h(""), [B, V] = ne({
-		value: Ee,
-		defaultValue: _e,
-		onChange: be
-	}), H = de(null), U = !!ve, Pe = A === "loading", Fe = l(A, Oe, M.required, Ae), { dropdownOverflowStyle: Ie, dropdownWidthMode: W, resolvedDropdownWidth: Le } = d({
-		dropdownWidth: x,
+};
+const MultiSelectBase = ({ className, clearAllLabel = "Clear all", closeOnSelect = false, dropdownWidth = "trigger", emptyMessage = "No options found", errorMessage, defaultValue = [], disabled, id, label, loadingMessage = "Loading options…", maxCount = 3, name, onChange, options = [], placeholder = "Select options", ref, searchPlaceholder = "Search options…", selectAllLabel = "Select all", showClearAll = true, showSearch = true, showSelectAll = true, sortAlphabetically = false, state = "default", value: valueProp, warningMessage, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }) => {
+	const generatedId = useId();
+	const multiSelectId = useFormFieldId(id, name ?? `multiselect-${generatedId}`);
+	const listboxId = `${multiSelectId}-listbox`;
+	const errorMessageId = getErrorMessageId(multiSelectId);
+	const warningMessageId = `${multiSelectId}-warning`;
+	const messageId = state === "error" ? errorMessageId : state === "warning" && warningMessage ? warningMessageId : void 0;
+	const [isOpen, setIsOpen] = useState(false);
+	const { dropdownShiftStyle, setDropdownElement } = useAutoDropdownHorizontalShift(isOpen);
+	const [searchValue, setSearchValue] = useState("");
+	const [value, setValue] = useUncontrolledState({
+		value: valueProp,
+		defaultValue,
+		onChange
+	});
+	const searchInputRef = useRef(null);
+	const isDisabled = Boolean(disabled);
+	const isLoading = state === "loading";
+	const ariaProps = getAriaProps(state, ariaDescribedBy, props.required, messageId);
+	const { dropdownOverflowStyle, dropdownWidthMode, resolvedDropdownWidth } = getDropdownWidthStyles({
+		dropdownWidth,
 		triggerWidth: "var(--radix-popover-trigger-width)"
-	}), G = m(() => {
-		let e = E.filter((e) => e.label.toLowerCase().includes(z.toLowerCase()));
-		return k && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
+	});
+	const filteredOptions = useMemo(() => {
+		let filtered = options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+		if (sortAlphabetically) filtered = [...filtered].sort((a, b) => a.label.localeCompare(b.label));
+		return filtered;
 	}, [
-		E,
-		z,
-		k
-	]), K = m(() => {
-		let e = {}, t = [];
-		return G.forEach((n) => {
-			n.group ? (e[n.group] || (e[n.group] = []), e[n.group].push(n)) : t.push(n);
-		}), {
-			groups: e,
-			ungrouped: t,
-			hasGroups: Object.keys(e).length > 0
+		options,
+		searchValue,
+		sortAlphabetically
+	]);
+	const groupedOptions = useMemo(() => {
+		const groups = {};
+		const ungrouped = [];
+		filteredOptions.forEach((option) => {
+			if (option.group) {
+				if (!groups[option.group]) groups[option.group] = [];
+				groups[option.group].push(option);
+			} else ungrouped.push(option);
+		});
+		return {
+			groups,
+			ungrouped,
+			hasGroups: Object.keys(groups).length > 0
 		};
-	}, [G]), q = p((e) => {
-		E.find((t) => t.value === e)?.disabled || (V(B.includes(e) ? B.filter((t) => t !== e) : [...B, e]), b && R(!1));
+	}, [filteredOptions]);
+	const toggleOption = useCallback((optionValue) => {
+		if (options.find((o) => o.value === optionValue)?.disabled) return;
+		setValue(value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]);
+		if (closeOnSelect) setIsOpen(false);
 	}, [
-		b,
-		E,
-		V,
-		B
-	]), J = p(() => {
-		let e = E.filter((e) => !e.disabled).map((e) => e.value);
-		e.every((e) => B.includes(e)) ? V([]) : V(e);
+		closeOnSelect,
+		options,
+		setValue,
+		value
+	]);
+	const handleSelectAll = useCallback(() => {
+		const allValues = options.filter((o) => !o.disabled).map((o) => o.value);
+		if (allValues.every((v) => value.includes(v))) setValue([]);
+		else setValue(allValues);
 	}, [
-		E,
-		V,
-		B
-	]), Y = p(() => {
-		V([]);
-	}, [V]), X = m(() => E.filter((e) => !e.disabled).map((e) => e.value), [E]), Re = X.length > 0 && X.every((e) => B.includes(e)), { focusedOptionValue: Z, getOptionFocusIndex: ze, handleKeyDown: Be, isSelectAllFocused: Ve, setFocusedIndex: Q } = me(G, Y, () => R(!1), q, J, H, D, O, !1);
-	le(() => {
-		Q(L ? 0 : -1);
-	}, [L, Q]);
-	let He = p((e) => {
-		Ne(e.target.value);
-	}, []), Ue = () => {
-		if (B.length === 0) return /* @__PURE__ */ _("span", {
+		options,
+		setValue,
+		value
+	]);
+	const handleClearAll = useCallback(() => {
+		setValue([]);
+	}, [setValue]);
+	const allSelectableValues = useMemo(() => options.filter((o) => !o.disabled).map((o) => o.value), [options]);
+	const isAllSelected = allSelectableValues.length > 0 && allSelectableValues.every((v) => value.includes(v));
+	const { focusedOptionValue, getOptionFocusIndex, handleKeyDown, isSelectAllFocused, setFocusedIndex } = useKeyboardNavigation(filteredOptions, handleClearAll, () => setIsOpen(false), toggleOption, handleSelectAll, searchInputRef, showSearch, showSelectAll, false);
+	useEffect(() => {
+		if (isOpen) setFocusedIndex(0);
+		else setFocusedIndex(-1);
+	}, [isOpen, setFocusedIndex]);
+	const handleSearchChange = useCallback((e) => {
+		setSearchValue(e.target.value);
+	}, []);
+	const renderSelectedItems = () => {
+		if (value.length === 0) return /* @__PURE__ */ jsx("span", {
 			className: "min-h-8 flex items-center text-input-text-placeholder",
-			children: xe
+			children: placeholder
 		});
-		let e = B.slice(0, w), t = B.length - w;
-		return /* @__PURE__ */ v("div", {
+		const displayedValues = value.slice(0, maxCount);
+		const remainingCount = value.length - maxCount;
+		return /* @__PURE__ */ jsxs("div", {
 			className: "gap-1 flex flex-wrap items-center overflow-hidden",
-			children: [e.map((e) => {
-				let t = E.find((t) => t.value === e);
-				return t ? /* @__PURE__ */ v("span", {
+			children: [displayedValues.map((val) => {
+				const option = options.find((o) => o.value === val);
+				if (!option) return null;
+				return /* @__PURE__ */ jsxs("span", {
 					className: "gap-1 px-2 py-1 rounded-md text-xs max-w-48 inline-flex items-center bg-input-bg--selected text-input-text",
-					children: [/* @__PURE__ */ _("span", {
+					children: [/* @__PURE__ */ jsx("span", {
 						className: "truncate",
-						children: t.label
-					}), /* @__PURE__ */ _("span", {
+						children: option.label
+					}), /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						className: "hover:text-danger rounded-sm cursor-pointer",
 						"data-testid": "spectral-multiselect-remove-item-button",
-						onClick: (t) => {
-							t.preventDefault(), t.stopPropagation(), q(e);
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							toggleOption(val);
 						},
 						onPointerDown: (e) => {
 							e.stopPropagation();
 						},
-						children: /* @__PURE__ */ _(n, { size: 12 })
+						children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
 					})]
-				}, e) : null;
-			}), t > 0 && /* @__PURE__ */ v("span", {
+				}, val);
+			}), remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
 				className: "text-input-text-secondary text-xs py-1 flex items-center tabular-nums",
 				children: [
 					"+",
-					t,
+					remainingCount,
 					" more"
 				]
 			})]
 		});
-	}, $ = (t, n) => {
-		let r = B.includes(t.value), a = ze(n), o = `${P}-option-${t.value}`;
-		return /* @__PURE__ */ v("button", {
-			"aria-selected": r,
-			className: i("my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", a && "bg-input-bg--hover", r && "font-medium text-input-text"),
-			disabled: t.disabled,
-			id: o,
-			onClick: () => q(t.value),
+	};
+	const renderOption = (option, index) => {
+		const isSelected = value.includes(option.value);
+		const isFocused = getOptionFocusIndex(index);
+		const optionId = `${listboxId}-option-${option.value}`;
+		return /* @__PURE__ */ jsxs("button", {
+			"aria-selected": isSelected,
+			className: cn("my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm flex w-full items-center text-left hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", isFocused && "bg-input-bg--hover", isSelected && "font-medium text-input-text"),
+			disabled: option.disabled,
+			id: optionId,
+			onClick: () => toggleOption(option.value),
 			role: "option",
 			type: "button",
-			children: [/* @__PURE__ */ _("div", {
+			children: [/* @__PURE__ */ jsx("div", {
 				"data-testid": "spectral-multiselect-selected-indicator",
-				className: i("w-4 h-4 rounded flex items-center justify-center border border-input-border", r && "bg-primary border-primary"),
-				children: r && /* @__PURE__ */ _(e, { size: 12 })
-			}), /* @__PURE__ */ _("span", { children: t.label })]
-		}, t.value);
+				className: cn("w-4 h-4 rounded flex items-center justify-center border border-input-border", isSelected && "bg-primary border-primary"),
+				children: isSelected && /* @__PURE__ */ jsx(CheckmarkIcon, { size: 12 })
+			}), /* @__PURE__ */ jsx("span", { children: option.label })]
+		}, option.value);
 	};
-	return /* @__PURE__ */ v("div", {
+	const getCSSCustomProperties = () => ({
+		"--multiselect-border-radius": "0.5rem",
+		"--multiselect-trigger-height": "3rem",
+		"--multiselect-dropdown-max-height": "20rem"
+	});
+	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
 		"data-testid": "spectral-multiselect-root",
 		children: [
-			C && /* @__PURE__ */ _(re, {
-				className: i("mb-2 block text-text-primary", U && "text-text-secondary"),
+			label && /* @__PURE__ */ jsx(Label, {
+				className: cn("mb-2 block text-text-primary", isDisabled && "text-text-secondary"),
 				"data-testid": "spectral-multiselect-label",
-				htmlFor: N,
-				children: C
+				htmlFor: multiSelectId,
+				children: label
 			}),
-			/* @__PURE__ */ _(oe, {
-				open: L,
-				onOpenChange: R,
-				children: /* @__PURE__ */ v("div", {
+			/* @__PURE__ */ jsx(Popover.Root, {
+				open: isOpen,
+				onOpenChange: setIsOpen,
+				children: /* @__PURE__ */ jsxs("div", {
 					className: "relative",
 					"data-testid": "spectral-multiselect-wrapper",
-					onKeyDown: L ? Be : void 0,
+					onKeyDown: isOpen ? handleKeyDown : void 0,
 					role: "none",
 					children: [
-						/* @__PURE__ */ _(ae, {
-							asChild: !0,
-							children: /* @__PURE__ */ v("button", {
-								"aria-activedescendant": L && Z ? `${P}-option-${Z}` : void 0,
-								"aria-controls": L ? P : void 0,
-								"aria-expanded": L,
-								"aria-label": De ?? C,
-								className: i(ee(L, A, u), "max-h-22 py-2 text-sm"),
-								"data-state": A,
+						/* @__PURE__ */ jsx(Popover.Trigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsxs("button", {
+								"aria-activedescendant": isOpen && focusedOptionValue ? `${listboxId}-option-${focusedOptionValue}` : void 0,
+								"aria-controls": isOpen ? listboxId : void 0,
+								"aria-expanded": isOpen,
+								"aria-label": ariaLabel ?? label,
+								className: cn(getTriggerClasses(isOpen, state, className), "max-h-22 py-2 text-sm"),
+								"data-state": state,
 								"data-testid": "spectral-multiselect-trigger",
-								disabled: U,
-								id: N,
-								name: T,
-								ref: Se,
+								disabled: isDisabled,
+								id: multiSelectId,
+								name,
+								ref,
 								role: "combobox",
-								style: {
-									"--multiselect-border-radius": "0.5rem",
-									"--multiselect-trigger-height": "3rem",
-									"--multiselect-dropdown-max-height": "20rem"
-								},
+								style: getCSSCustomProperties(),
 								type: "button",
-								...Fe,
-								...M,
-								children: [/* @__PURE__ */ _("div", {
+								...ariaProps,
+								...props,
+								children: [/* @__PURE__ */ jsx("div", {
 									className: "min-w-0 flex-1 overflow-hidden",
 									"data-testid": "spectral-multiselect-selected-items",
-									children: Ue()
-								}), /* @__PURE__ */ _("div", {
+									children: renderSelectedItems()
+								}), /* @__PURE__ */ jsx("div", {
 									className: "gap-2 ml-2 flex shrink-0 items-center",
-									children: /* @__PURE__ */ _(t, {
-										className: i("text-input-icon transition-transform duration-200", L && "rotate-180"),
+									children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+										className: cn("text-input-icon transition-transform duration-200", isOpen && "rotate-180"),
 										size: 20
 									})
 								})]
 							})
 						}),
-						Te && B.length > 0 && /* @__PURE__ */ _("button", {
+						showClearAll && value.length > 0 && /* @__PURE__ */ jsx("button", {
 							"aria-label": "Clear all selections",
 							className: "right-10 text-input-icon hover:text-input-icon--hover rounded-sm absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50",
 							"data-testid": "spectral-multiselect-clear-all-button",
-							disabled: U,
+							disabled: isDisabled,
 							onClick: (e) => {
-								e.stopPropagation(), Y(), document.getElementById(N)?.focus();
+								e.stopPropagation();
+								handleClearAll();
+								document.getElementById(multiSelectId)?.focus();
 							},
 							type: "button",
-							children: /* @__PURE__ */ _(n, { size: 12 })
+							children: /* @__PURE__ */ jsx(CloseIcon, { size: 12 })
 						}),
-						/* @__PURE__ */ _(ce, { children: /* @__PURE__ */ _(se, {
+						/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
 							align: "start",
-							avoidCollisions: !0,
-							className: pe(),
+							avoidCollisions: true,
+							className: getDropdownClasses(),
 							collisionPadding: 10,
-							"data-dropdown-width-mode": W,
-							"data-dropdown-width-value": W === "custom" ? x : void 0,
+							"data-dropdown-width-mode": dropdownWidthMode,
+							"data-dropdown-width-value": dropdownWidthMode === "custom" ? dropdownWidth : void 0,
 							"data-testid": "spectral-multiselect-dropdown",
 							onOpenAutoFocus: (e) => {
-								e.preventDefault(), D && H.current?.focus();
+								e.preventDefault();
+								if (showSearch) searchInputRef.current?.focus();
 							},
 							side: "bottom",
 							sideOffset: 4,
-							ref: Me,
+							ref: setDropdownElement,
 							style: {
-								width: Le,
-								...x === "trigger" ? {} : Ie,
-								...je
+								width: resolvedDropdownWidth,
+								...dropdownWidth === "trigger" ? {} : dropdownOverflowStyle,
+								...dropdownShiftStyle
 							},
-							children: /* @__PURE__ */ v("div", {
+							children: /* @__PURE__ */ jsxs("div", {
 								className: "p-1",
-								children: [D && /* @__PURE__ */ v("div", {
+								children: [showSearch && /* @__PURE__ */ jsxs("div", {
 									className: "mb-2 relative",
-									children: [/* @__PURE__ */ _(r, { className: i(fe, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ _("input", {
+									children: [/* @__PURE__ */ jsx(SearchIcon, { className: cn(ICON_SIZE, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ jsx("input", {
 										"aria-label": "Search options",
 										className: "pl-9 pr-3 py-2 text-sm rounded-md focus-visible:ring-black w-full border border-input-border bg-input-bg focus-visible:border-input-border--focus focus-visible:ring-1 focus-visible:outline-none",
 										"data-testid": "spectral-multiselect-search-input",
-										onChange: He,
-										placeholder: Ce,
-										ref: H,
+										onChange: handleSearchChange,
+										placeholder: searchPlaceholder,
+										ref: searchInputRef,
 										type: "text",
-										value: z
+										value: searchValue
 									})]
-								}), /* @__PURE__ */ _("div", {
+								}), /* @__PURE__ */ jsx("div", {
 									className: "max-h-64 overflow-y-auto",
-									id: P,
+									id: listboxId,
 									role: "listbox",
 									"aria-multiselectable": "true",
-									children: Pe ? /* @__PURE__ */ _(c, {
+									children: isLoading ? /* @__PURE__ */ jsx(LoadingState, {
 										className: "text-sm",
-										message: ye,
+										message: loadingMessage,
 										"data-testid": "spectral-multiselect-loading"
-									}) : G.length === 0 ? /* @__PURE__ */ _(s, {
+									}) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 										className: "text-sm",
 										"data-testid": "spectral-multiselect-empty-message",
-										message: he
-									}) : /* @__PURE__ */ v(g, { children: [
-										O && /* @__PURE__ */ v("div", {
+										message: emptyMessage
+									}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+										showSelectAll && /* @__PURE__ */ jsxs("div", {
 											className: "mb-1",
-											children: [/* @__PURE__ */ _("button", {
-												className: i("my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none", Ve && "bg-input-bg--hover"),
+											children: [/* @__PURE__ */ jsx("button", {
+												className: cn("my-0.5 first:mt-0 last:mb-0 gap-3 rounded-sm px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus-visible:bg-input-bg--hover focus-visible:outline-none", isSelectAllFocused && "bg-input-bg--hover"),
 												"data-testid": "spectral-multiselect-select-all-button",
-												onClick: J,
+												onClick: handleSelectAll,
 												type: "button",
-												children: Re ? y : we
-											}), /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" })]
+												children: isAllSelected ? clearAllLabel : selectAllLabel
+											}), /* @__PURE__ */ jsx("div", { className: "mx-3 my-1 h-px bg-input-border" })]
 										}),
-										K.ungrouped.length > 0 && /* @__PURE__ */ _("div", {
+										groupedOptions.ungrouped.length > 0 && /* @__PURE__ */ jsx("div", {
 											className: "mb-1",
-											children: K.ungrouped.map((e, t) => $(e, t))
+											children: groupedOptions.ungrouped.map((option, index) => renderOption(option, index))
 										}),
-										Object.entries(K.groups).map(([e, t]) => /* @__PURE__ */ v("div", {
+										Object.entries(groupedOptions.groups).map(([groupName, groupOptions]) => /* @__PURE__ */ jsxs("div", {
 											className: "mb-1",
 											"data-testid": "spectral-multiselect-group",
 											children: [
-												(K.ungrouped.length > 0 || Object.keys(K.groups).indexOf(e) > 0) && /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-												/* @__PURE__ */ _("div", {
+												(groupedOptions.ungrouped.length > 0 || Object.keys(groupedOptions.groups).indexOf(groupName) > 0) && /* @__PURE__ */ jsx("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+												/* @__PURE__ */ jsx("div", {
 													"data-testid": "spectral-multiselect-group-name",
 													className: "px-3 py-1 text-xs font-semibold text-input-text-secondary tracking-wide uppercase",
-													children: e
+													children: groupName
 												}),
-												t.map((e, t) => $(e, G.indexOf(e)))
+												groupOptions.map((option, _index) => renderOption(option, filteredOptions.indexOf(option)))
 											]
-										}, e))
+										}, groupName))
 									] })
 								})]
 							})
@@ -350,19 +427,21 @@ var fe = "h-4 w-4", pe = () => i("max-h-80 z-50 overflow-hidden", u(), "motion-s
 					]
 				})
 			}),
-			/* @__PURE__ */ _(a, {
+			/* @__PURE__ */ jsx(ErrorMessage, {
 				dataTestId: "spectral-multiselect-error-message",
-				id: F,
-				message: A === "error" ? ge : null
+				id: errorMessageId,
+				message: state === "error" ? errorMessage : null
 			}),
-			/* @__PURE__ */ _(o, {
+			/* @__PURE__ */ jsx(WarningMessage, {
 				dataTestId: "spectral-multiselect-warning-message",
-				id: I,
-				message: A === "warning" ? j : null
+				id: warningMessageId,
+				message: state === "warning" ? warningMessage : null
 			})
 		]
 	});
 };
-y.displayName = "MultiSelectBase";
+MultiSelectBase.displayName = "MultiSelectBase";
+
 //#endregion
-export { y as MultiSelectBase };
+export { MultiSelectBase };
+//# sourceMappingURL=MultiSelectBase.js.map