@spear-ai/spectral 1.11.2 → 1.12.0

package/dist/MultiSelect/MultiSelectBase.js

@@ -3,22 +3,18 @@ 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 { LoaderIcon as r } from "../Icons/LoaderIcon.js";
-import { SearchIcon as i } from "../Icons/SearchIcon.js";
-import { t as a } from "../twUtils-VNWgstKL.js";
-import { ErrorMessage as o, getDropdownSurfaceClasses as s } from "../utils/formFieldUtils.js";
-import { useUncontrolledState as c } from "../hooks/useUncontrolledState.js";
-import { a as l, i as u, n as d, r as f } from "../dist-BtdmHAzK.js";
-import { useCallback as p, useEffect as ee, useId as m, useMemo as h, useRef as te, useState as g } from "react";
-import { Fragment as ne, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { SearchIcon as r } from "../Icons/SearchIcon.js";
+import { t as i } from "../twUtils-D_qzdiwM.js";
+import { EmptyState as a, ErrorMessage as o, LoadingState as s, WarningMessage 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-BtdmHAzK.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 fe, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/MultiSelect/MultiSelectBase.tsx
-var re = "h-4 w-4", y = (e) => ({
-	error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
-	loading: "cursor-wait border-input-border--disabled",
-	disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
-	default: ""
-})[e], ie = (e, t, n) => a("min-h-12 rounded-lg px-4 py-2 text-sm flex max-h-[5.5rem] w-full items-center justify-between border border-input-border bg-input-bg", "hover:border-input-border--hover focus-visible:border-input-border--focus", "focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-accent", "disabled:cursor-not-allowed disabled:border-input-border--disabled disabled:bg-input-bg--disabled disabled:opacity-50", "overflow-hidden text-input-text transition duration-200", t && "border-input-border--focus", y(e), n), ae = () => a("max-h-80 z-50 overflow-hidden", s(), "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)"), oe = (e, t, n, r, i, a, o, s, c) => {
-	let [l, u] = g(-1), d = h(() => {
+var pe = "h-4 w-4", me = () => 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)"), he = (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({
@@ -97,83 +93,90 @@ var re = "h-4 w-4", y = (e) => ({
 			let t = d[l];
 			return t.type === "option" && t.index === e;
 		}, [l, d]),
-		isSearchFocused: h(() => l < 0 || l >= d.length ? !1 : d[l].type === "search", [l, d]),
-		isSelectAllFocused: h(() => l < 0 || l >= d.length ? !1 : d[l].type === "select-all", [l, d]),
-		isClearAllFocused: h(() => l < 0 || l >= d.length ? !1 : d[l].type === "clear-all", [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])
 	};
-}, b = ({ className: s, clearAllLabel: y = "Clear all", closeOnSelect: b = !1, dropdownWidth: x = "trigger", emptyMessage: se = "No options found", errorMessage: S, defaultValue: ce = [], id: C, label: le, loadingMessage: ue = "Loading options…", maxCount: w = 3, name: T, onChange: de, options: E = [], placeholder: D = "Select options", ref: O, searchPlaceholder: fe = "Search options…", selectAllLabel: pe = "Select all", showClearAll: me = !0, showSearch: k = !0, showSelectAll: A = !0, sortAlphabetically: j = !1, state: M = "default", value: he, "aria-label": ge, "aria-describedby": _e, ...N }) => {
-	let P = m(), F = C ?? `${T}-${P}`, I = `${F}-listbox`, L = `${F}-error`, [R, z] = g(!1), [B, ve] = g(""), [V, H] = c({
-		value: he,
-		defaultValue: ce,
-		onChange: de
-	}), U = te(null), W = N.disabled ?? M === "disabled", ye = M === "loading", be = M === "error", xe = x === "trigger" ? "var(--radix-popover-trigger-width)" : x === "content" ? "max-content" : x, G = x === "trigger" || x === "content" ? x : "custom", K = h(() => {
-		let e = E.filter((e) => e.label.toLowerCase().includes(B.toLowerCase()));
-		return j && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
+}, v = ({ className: u, clearAllLabel: v = "Clear all", closeOnSelect: y = !1, dropdownWidth: b = "trigger", emptyMessage: ge = "No options found", errorMessage: x, defaultValue: _e = [], disabled: ve, id: ye, label: S, loadingMessage: be = "Loading options…", maxCount: C = 3, name: w, onChange: xe, options: T = [], placeholder: Se = "Select options", ref: Ce, searchPlaceholder: we = "Search options…", selectAllLabel: Te = "Select all", showClearAll: Ee = !0, showSearch: E = !0, showSelectAll: D = !0, sortAlphabetically: O = !1, state: k = "default", value: De, warningMessage: A, "aria-label": Oe, "aria-describedby": ke, ...j }) => {
+	let Ae = ue(), M = te(ye, w ?? `multiselect-${Ae}`), N = `${M}-listbox`, P = f(M), F = `${M}-warning`, je = k === "error" ? P : k === "warning" && A ? F : void 0, [I, L] = h(!1), { dropdownShiftStyle: Me, setDropdownElement: Ne } = ie(I), [R, z] = h(""), [B, V] = ne({
+		value: De,
+		defaultValue: _e,
+		onChange: xe
+	}), H = de(null), U = !!ve, Pe = k === "loading", Fe = l(k, ke, j.required, je), { dropdownOverflowStyle: Ie, dropdownWidthMode: W, resolvedDropdownWidth: Le } = d({
+		dropdownWidth: b,
+		triggerWidth: "var(--radix-popover-trigger-width)"
+	}), G = m(() => {
+		let e = T.filter((e) => e.label.toLowerCase().includes(R.toLowerCase()));
+		return O && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
 	}, [
-		E,
-		B,
-		j
-	]), q = h(() => {
+		T,
+		R,
+		O
+	]), K = m(() => {
 		let e = {}, t = [];
-		return K.forEach((n) => {
+		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
 		};
-	}, [K]), J = p((e) => {
-		E.find((t) => t.value === e)?.disabled || (H(V.includes(e) ? V.filter((t) => t !== e) : [...V, e]), b && z(!1));
+	}, [G]), q = p((e) => {
+		T.find((t) => t.value === e)?.disabled || (V(B.includes(e) ? B.filter((t) => t !== e) : [...B, e]), y && L(!1));
 	}, [
-		b,
-		E,
-		H,
-		V
-	]), Y = p(() => {
-		let e = E.filter((e) => !e.disabled).map((e) => e.value);
-		e.every((e) => V.includes(e)) ? H([]) : H(e);
+		y,
+		T,
+		V,
+		B
+	]), J = p(() => {
+		let e = T.filter((e) => !e.disabled).map((e) => e.value);
+		e.every((e) => B.includes(e)) ? V([]) : V(e);
 	}, [
-		E,
-		H,
-		V
-	]), X = p(() => {
-		H([]);
-	}, [H]), Z = h(() => E.filter((e) => !e.disabled).map((e) => e.value), [E]), Se = Z.length > 0 && Z.every((e) => V.includes(e)), { getOptionFocusIndex: Ce, handleKeyDown: we, isSelectAllFocused: Te, setFocusedIndex: Q } = oe(K, X, () => z(!1), J, Y, U, k, A, !1);
-	ee(() => {
-		Q(R ? 0 : -1);
-	}, [R, Q]);
-	let Ee = p((e) => {
-		ve(e.target.value);
-	}, []), De = () => {
-		if (V.length === 0) return /* @__PURE__ */ _("span", {
+		T,
+		V,
+		B
+	]), Y = p(() => {
+		V([]);
+	}, [V]), X = m(() => T.filter((e) => !e.disabled).map((e) => e.value), [T]), Re = X.length > 0 && X.every((e) => B.includes(e)), { focusedOptionValue: Z, getOptionFocusIndex: ze, handleKeyDown: Be, isSelectAllFocused: Ve, setFocusedIndex: Q } = he(G, Y, () => L(!1), q, J, H, E, D, !1);
+	le(() => {
+		Q(I ? 0 : -1);
+	}, [I, Q]);
+	let He = p((e) => {
+		z(e.target.value);
+	}, []), Ue = () => {
+		if (B.length === 0) return /* @__PURE__ */ g("span", {
 			className: "min-h-8 flex items-center text-input-text-placeholder",
-			children: D
+			children: Se
 		});
-		let e = V.slice(0, w), t = V.length - w;
-		return /* @__PURE__ */ v("div", {
+		let e = B.slice(0, C), t = B.length - C;
+		return /* @__PURE__ */ _("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", {
+				let t = T.find((t) => t.value === e);
+				return t ? /* @__PURE__ */ _("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__ */ g("span", {
 						className: "truncate",
 						children: t.label
-					}), /* @__PURE__ */ _("button", {
-						"aria-label": `Remove ${t.label}`,
+					}), /* @__PURE__ */ g("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(), J(e);
+							t.preventDefault(), t.stopPropagation(), q(e);
 						},
 						onPointerDown: (e) => {
 							e.stopPropagation();
 						},
-						type: "button",
-						children: /* @__PURE__ */ _(n, { size: 12 })
+						children: /* @__PURE__ */ g(n, { size: 12 })
 					})]
 				}, e) : null;
-			}), t > 0 && /* @__PURE__ */ v("span", {
+			}), t > 0 && /* @__PURE__ */ _("span", {
 				className: "text-input-text-secondary text-xs py-1 flex items-center",
 				children: [
 					"+",
@@ -183,159 +186,182 @@ var re = "h-4 w-4", y = (e) => ({
 			})]
 		});
 	}, $ = (t, n) => {
-		let r = V.includes(t.value);
-		return /* @__PURE__ */ v("button", {
-			className: a("gap-3 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", Ce(n) && "bg-input-bg--hover", r && "font-medium text-input-text"),
+		let r = B.includes(t.value), a = ze(n), o = `${N}-option-${t.value}`;
+		return /* @__PURE__ */ _("button", {
+			"aria-selected": r,
+			className: i("gap-3 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,
-			onClick: () => J(t.value),
+			id: o,
+			onClick: () => q(t.value),
+			role: "option",
 			type: "button",
-			children: [/* @__PURE__ */ _("div", {
+			children: [/* @__PURE__ */ g("div", {
 				"data-testid": "spectral-multiselect-selected-indicator",
-				className: a("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 })]
+				className: i("w-4 h-4 rounded flex items-center justify-center border border-input-border", r && "bg-primary border-primary"),
+				children: r && /* @__PURE__ */ g(e, { size: 12 })
+			}), /* @__PURE__ */ g("span", { children: t.label })]
 		}, t.value);
-	}, Oe = () => ({
-		"--multiselect-border-radius": "0.5rem",
-		"--multiselect-trigger-height": "3rem",
-		"--multiselect-dropdown-max-height": "20rem"
-	});
-	return /* @__PURE__ */ v("div", {
+	};
+	return /* @__PURE__ */ _("div", {
 		className: "w-full",
 		"data-testid": "spectral-multiselect-root",
-		children: [/* @__PURE__ */ _(u, {
-			open: R,
-			onOpenChange: z,
-			children: /* @__PURE__ */ v("div", {
-				className: "relative",
-				"data-testid": "spectral-multiselect-wrapper",
-				onKeyDown: R ? we : void 0,
-				role: "none",
-				children: [
-					/* @__PURE__ */ _(l, {
-						asChild: !0,
-						children: /* @__PURE__ */ v("button", {
-							"aria-controls": R ? I : void 0,
-							"aria-describedby": [be ? L : null, _e].filter(Boolean).join(" ") || void 0,
-							"aria-expanded": R,
-							"aria-label": ge ?? le,
-							className: ie(M, R, s),
-							"data-state": M,
-							"data-testid": "spectral-multiselect-trigger",
-							disabled: W,
-							id: F,
-							name: T,
-							ref: O,
-							role: "combobox",
-							style: Oe(),
+		children: [
+			S && /* @__PURE__ */ g(re, {
+				className: i("mb-2 block text-text-primary", U && "text-text-secondary"),
+				"data-testid": "spectral-multiselect-label",
+				htmlFor: M,
+				children: S
+			}),
+			/* @__PURE__ */ g(oe, {
+				open: I,
+				onOpenChange: L,
+				children: /* @__PURE__ */ _("div", {
+					className: "relative",
+					"data-testid": "spectral-multiselect-wrapper",
+					onKeyDown: I ? Be : void 0,
+					role: "none",
+					children: [
+						/* @__PURE__ */ g(ae, {
+							asChild: !0,
+							children: /* @__PURE__ */ _("button", {
+								"aria-activedescendant": I && Z ? `${N}-option-${Z}` : void 0,
+								"aria-controls": I ? N : void 0,
+								"aria-expanded": I,
+								"aria-label": Oe ?? S,
+								className: i(ee(I, k, u), "max-h-22 py-2 text-sm"),
+								"data-state": k,
+								"data-testid": "spectral-multiselect-trigger",
+								disabled: U,
+								id: M,
+								name: w,
+								ref: Ce,
+								role: "combobox",
+								style: {
+									"--multiselect-border-radius": "0.5rem",
+									"--multiselect-trigger-height": "3rem",
+									"--multiselect-dropdown-max-height": "20rem"
+								},
+								type: "button",
+								...Fe,
+								...j,
+								children: [/* @__PURE__ */ g("div", {
+									className: "min-w-0 flex-1 overflow-hidden",
+									"data-testid": "spectral-multiselect-selected-items",
+									children: Ue()
+								}), /* @__PURE__ */ g("div", {
+									className: "gap-2 ml-2 flex shrink-0 items-center",
+									children: /* @__PURE__ */ g(t, {
+										className: i("text-input-icon transition-transform duration-200", I && "rotate-180"),
+										size: 20
+									})
+								})]
+							})
+						}),
+						Ee && B.length > 0 && /* @__PURE__ */ g("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,
+							onClick: (e) => {
+								e.stopPropagation(), Y(), document.getElementById(M)?.focus();
+							},
 							type: "button",
-							...N,
-							children: [/* @__PURE__ */ _("div", {
-								className: "min-w-0 flex-1 overflow-hidden",
-								"data-testid": "spectral-multiselect-selected-items",
-								children: De()
-							}), /* @__PURE__ */ _("div", {
-								className: "gap-2 ml-2 flex shrink-0 items-center",
-								children: /* @__PURE__ */ _(t, {
-									className: a("text-input-icon transition-transform duration-200", R && "rotate-180"),
-									size: 20
-								})
-							})]
-						})
-					}),
-					me && V.length > 0 && /* @__PURE__ */ _("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: W,
-						onClick: (e) => {
-							e.stopPropagation(), X(), document.getElementById(F)?.focus();
-						},
-						type: "button",
-						children: /* @__PURE__ */ _(n, { size: 12 })
-					}),
-					/* @__PURE__ */ _(f, { children: /* @__PURE__ */ _(d, {
-						align: "start",
-						avoidCollisions: !0,
-						className: ae(),
-						collisionPadding: 10,
-						"data-dropdown-width-mode": G,
-						"data-dropdown-width-value": G === "custom" ? x : void 0,
-						"data-testid": "spectral-multiselect-dropdown",
-						onOpenAutoFocus: (e) => {
-							e.preventDefault(), k && U.current?.focus();
-						},
-						side: "bottom",
-						sideOffset: 4,
-						style: { width: xe },
-						children: /* @__PURE__ */ v("div", {
-							className: "p-1",
-							children: [k && /* @__PURE__ */ v("div", {
-								className: "mb-2 relative",
-								children: [/* @__PURE__ */ _(i, { className: a(re, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ _("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: Ee,
-									placeholder: fe,
-									ref: U,
-									type: "text",
-									value: B
+							children: /* @__PURE__ */ g(n, { size: 12 })
+						}),
+						/* @__PURE__ */ g(ce, { children: /* @__PURE__ */ g(se, {
+							align: "start",
+							avoidCollisions: !0,
+							className: me(),
+							collisionPadding: 10,
+							"data-dropdown-width-mode": W,
+							"data-dropdown-width-value": W === "custom" ? b : void 0,
+							"data-testid": "spectral-multiselect-dropdown",
+							onOpenAutoFocus: (e) => {
+								e.preventDefault(), E && H.current?.focus();
+							},
+							side: "bottom",
+							sideOffset: 4,
+							ref: Ne,
+							style: {
+								width: Le,
+								...b === "trigger" ? {} : Ie,
+								...Me
+							},
+							children: /* @__PURE__ */ _("div", {
+								className: "p-1",
+								children: [E && /* @__PURE__ */ _("div", {
+									className: "mb-2 relative",
+									children: [/* @__PURE__ */ g(r, { className: i(pe, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ g("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: we,
+										ref: H,
+										type: "text",
+										value: R
+									})]
+								}), /* @__PURE__ */ g("div", {
+									className: "max-h-64 overflow-y-auto",
+									id: N,
+									role: "listbox",
+									"aria-multiselectable": "true",
+									children: Pe ? /* @__PURE__ */ g(s, {
+										className: "text-sm",
+										message: be,
+										"data-testid": "spectral-multiselect-loading"
+									}) : G.length === 0 ? /* @__PURE__ */ g(a, {
+										className: "text-sm",
+										"data-testid": "spectral-multiselect-empty-message",
+										message: ge
+									}) : /* @__PURE__ */ _(fe, { children: [
+										D && /* @__PURE__ */ _("div", {
+											className: "mb-1",
+											children: [/* @__PURE__ */ g("button", {
+												className: i("gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus:outline-none", Ve && "bg-input-bg--hover"),
+												"data-testid": "spectral-multiselect-select-all-button",
+												onClick: J,
+												type: "button",
+												children: Re ? v : Te
+											}), /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" })]
+										}),
+										K.ungrouped.length > 0 && /* @__PURE__ */ g("div", {
+											className: "mb-1",
+											children: K.ungrouped.map((e, t) => $(e, t))
+										}),
+										Object.entries(K.groups).map(([e, t]) => /* @__PURE__ */ _("div", {
+											className: "mb-1",
+											"data-testid": "spectral-multiselect-group",
+											children: [
+												(K.ungrouped.length > 0 || Object.keys(K.groups).indexOf(e) > 0) && /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" }),
+												/* @__PURE__ */ g("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
+												}),
+												t.map((e, t) => $(e, G.indexOf(e)))
+											]
+										}, e))
+									] })
 								})]
-							}), /* @__PURE__ */ _("div", {
-								className: "max-h-64 overflow-y-auto",
-								id: I,
-								role: "listbox",
-								"aria-multiselectable": "true",
-								children: ye ? /* @__PURE__ */ v("div", {
-									"data-testid": "spectral-multiselect-loading",
-									className: "gap-2 py-6 text-sm text-input-text-secondary flex items-center justify-center",
-									children: [/* @__PURE__ */ _(r, {}), ue]
-								}) : K.length === 0 ? /* @__PURE__ */ _("div", {
-									"data-testid": "spectral-multiselect-empty-message",
-									className: "py-6 text-sm text-input-text-secondary text-center",
-									children: se
-								}) : /* @__PURE__ */ v(ne, { children: [
-									A && /* @__PURE__ */ v("div", {
-										className: "mb-1",
-										children: [/* @__PURE__ */ _("button", {
-											className: a("gap-3 px-3 py-2 text-sm font-medium text-input-text-secondary flex w-full items-center hover:bg-input-bg--hover focus:outline-none", Te && "bg-input-bg--hover"),
-											"data-testid": "spectral-multiselect-select-all-button",
-											onClick: Y,
-											type: "button",
-											children: Se ? y : pe
-										}), /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" })]
-									}),
-									q.ungrouped.length > 0 && /* @__PURE__ */ _("div", {
-										className: "mb-1",
-										children: q.ungrouped.map((e, t) => $(e, t))
-									}),
-									Object.entries(q.groups).map(([e, t]) => /* @__PURE__ */ v("div", {
-										className: "mb-1",
-										"data-testid": "spectral-multiselect-group",
-										children: [
-											(q.ungrouped.length > 0 || Object.keys(q.groups).indexOf(e) > 0) && /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-											/* @__PURE__ */ _("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
-											}),
-											t.map((e, t) => $(e, K.indexOf(e)))
-										]
-									}, e))
-								] })
-							})]
-						})
-					}) })
-				]
+							})
+						}) })
+					]
+				})
+			}),
+			k === "error" && x && /* @__PURE__ */ g(o, {
+				dataTestId: "spectral-multiselect-error-message",
+				id: P,
+				message: x
+			}),
+			k === "warning" && A && /* @__PURE__ */ g(c, {
+				dataTestId: "spectral-multiselect-warning-message",
+				id: F,
+				message: A
 			})
-		}), M === "error" && S && /* @__PURE__ */ _(o, {
-			dataTestId: "spectral-multiselect-error-message",
-			id: L,
-			message: S
-		})]
+		]
 	});
 };
-b.displayName = "MultiSelectBase";
+v.displayName = "MultiSelectBase";
 //#endregion
-export { b as MultiSelectBase };
+export { v as MultiSelectBase };

package/dist/MultiSelect.d.ts

@@ -4,6 +4,7 @@ export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultVal
     defaultValue?: string[];
     emptyText?: string;
     loading?: boolean;
+    onChange?: (value: string[]) => void;
     onSearchChange?: (search: string) => void;
     onValueChange?: (value: string[]) => void;
     options: {
@@ -16,7 +17,7 @@ export interface MultiSelectProps extends Omit<MultiSelectBaseProps, 'defaultVal
     value?: string[];
 }
 export declare const MultiSelect: {
-    ({ emptyText, loading, onValueChange, options, defaultValue, ref, state, value, ...props }: MultiSelectProps & {
+    ({ emptyText, loading, onChange, onValueChange, options, defaultValue, ref, state, value, ...props }: MultiSelectProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/MultiSelect.js

@@ -3,24 +3,26 @@ import { MultiSelectBase as e } from "./MultiSelect/MultiSelectBase.js";
 import "react";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/MultiSelect/MultiSelect.tsx
-var n = ({ emptyText: n = "No matches found.", loading: r = !1, onValueChange: i, options: a, defaultValue: o, ref: s, state: c, value: l, ...u }) => {
-	let d = a.map((e) => ({
+var n = ({ emptyText: n = "No matches found.", loading: r = !1, onChange: i, onValueChange: a, options: o, defaultValue: s, ref: c, state: l, value: u, ...d }) => {
+	let f = o.map((e) => ({
 		disabled: e.disabled ?? !1,
 		group: e.group,
 		label: e.label,
 		value: e.value
-	})), f = r ? "loading" : c;
+	})), p = r ? "loading" : l;
 	return /* @__PURE__ */ t(e, {
-		"data-disabled": u.disabled,
-		defaultValue: o,
-		disabled: u.disabled,
+		"data-disabled": d.disabled,
+		defaultValue: s,
+		disabled: d.disabled,
 		emptyMessage: n,
-		onChange: i,
-		options: d,
-		ref: s,
-		state: f,
-		value: l,
-		...u
+		onChange: (e) => {
+			a?.(e), i?.(e);
+		},
+		options: f,
+		ref: c,
+		state: p,
+		value: u,
+		...d
 	});
 };
 n.displayName = "MultiSelect";

package/dist/Popover.js

@@ -1,5 +1,5 @@
 import "./styles/main.css";
-import { t as e } from "./twUtils-VNWgstKL.js";
+import { t as e } from "./twUtils-D_qzdiwM.js";
 import { a as t, i as n, n as r, r as i, t as a } from "./dist-BtdmHAzK.js";
 import "react";
 import { jsx as o } from "react/jsx-runtime";

package/dist/RadioButton.js

@@ -1,5 +1,5 @@
 import "./styles/main.css";
-import { t as e } from "./twUtils-VNWgstKL.js";
+import { t as e } from "./twUtils-D_qzdiwM.js";
 import { Slot as t } from "./primitives/slot.js";
 import "react";
 import { jsx as n } from "react/jsx-runtime";

package/dist/RadioButtonGroup/RadioButtonGroupBase.js

@@ -1,6 +1,6 @@
 "use client";
 import "../styles/main.css";
-import { t as e } from "../twUtils-VNWgstKL.js";
+import { t as e } from "../twUtils-D_qzdiwM.js";
 import { Slot as t } from "../primitives/slot.js";
 import { createContext as n, useContext as r } from "react";
 import { jsx as i } from "react/jsx-runtime";

package/dist/RadioButtonGroup.js

@@ -1,5 +1,5 @@
 import "./styles/main.css";
-import { t as e } from "./twUtils-VNWgstKL.js";
+import { t as e } from "./twUtils-D_qzdiwM.js";
 import { RadioButtonGroupBase as t, RadioButtonGroupItem as n } from "./RadioButtonGroup/RadioButtonGroupBase.js";
 import "react";
 import { jsx as r } from "react/jsx-runtime";