@spear-ai/spectral 1.11.1 → 1.11.3

package/dist/MultiSelect/MultiSelectBase.js

@@ -6,18 +6,20 @@ 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 } from "../utils/formFieldUtils.js";
-import { a as s, i as c, n as l, r as u } from "../dist-BtdmHAzK.js";
-import { useCallback as d, useEffect as f, useId as p, useMemo as m, useRef as ee, useState as h } from "react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { ErrorMessage as o, getDropdownSurfaceClasses as s } from "../utils/formFieldUtils.js";
+import { useUncontrolledState as c } from "../hooks/useUncontrolledState.js";
+import { useAutoDropdownHorizontalShift as l } from "../utils/dropdownPositioning.js";
+import { a as u, i as d, n as f, r as ee } from "../dist-BtdmHAzK.js";
+import { useCallback as p, useEffect as te, useId as ne, useMemo as m, useRef as re, useState as h } from "react";
+import { Fragment as ie, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/MultiSelect/MultiSelectBase.tsx
-var te = "h-4 w-4", y = (e) => ({
+var v = "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], b = (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), x = () => a("max-h-80 rounded-lg shadow-lg z-50 overflow-hidden border border-input-border bg-input-bg", "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)"), S = (e, t, n, r, i, a, o, s, c) => {
-	let [l, u] = h(-1), f = m(() => {
+})[e], b = (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] = 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({
@@ -31,49 +33,49 @@ var te = "h-4 w-4", y = (e) => ({
 		o,
 		s,
 		c
-	]), p = d((e) => {
-		e < 0 || e >= f.length || f[e].type === "search" && a.current?.focus();
-	}, [f, a]);
+	]), f = p((e) => {
+		e < 0 || e >= d.length || d[e].type === "search" && a.current?.focus();
+	}, [d, a]);
 	return {
 		focusedIndex: l,
 		setFocusedIndex: u,
-		handleKeyDown: d((e) => {
-			let a = l >= 0 && l < f.length ? f[l] : null;
+		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 = {
 				ArrowDown: () => {
 					e.preventDefault();
-					let t = Math.min(l + 1, f.length - 1);
-					u(t), p(t);
+					let t = Math.min(l + 1, d.length - 1);
+					u(t), f(t);
 				},
 				ArrowUp: () => {
 					e.preventDefault();
 					let t = Math.max(l - 1, 0);
-					u(t), p(t);
+					u(t), f(t);
 				},
 				Tab: () => {
 					if (e.shiftKey) if (l <= 0) n();
 					else {
 						e.preventDefault();
 						let t = l - 1;
-						u(t), p(t);
+						u(t), f(t);
 					}
-					else if (l >= f.length - 1) n();
+					else if (l >= d.length - 1) n();
 					else {
 						e.preventDefault();
 						let t = l + 1;
-						u(t), p(t);
+						u(t), f(t);
 					}
 				},
 				Enter: () => {
-					if (e.preventDefault(), l >= 0 && l < f.length) {
-						let e = f[l];
+					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);
 					}
 				},
 				" ": () => {
-					if (e.preventDefault(), l >= 0 && l < f.length) {
-						let e = f[l];
+					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);
 					}
 				},
@@ -83,92 +85,96 @@ var te = "h-4 w-4", y = (e) => ({
 			}[e.key];
 			o && o();
 		}, [
-			f,
+			d,
 			l,
 			r,
 			i,
 			t,
 			n,
-			p
+			f
 		]),
-		getOptionFocusIndex: d((e) => {
-			if (l < 0 || l >= f.length) return !1;
-			let t = f[l];
+		getOptionFocusIndex: p((e) => {
+			if (l < 0 || l >= d.length) return !1;
+			let t = d[l];
 			return t.type === "option" && t.index === e;
-		}, [l, f]),
-		isSearchFocused: m(() => l < 0 || l >= f.length ? !1 : f[l].type === "search", [l, f]),
-		isSelectAllFocused: m(() => l < 0 || l >= f.length ? !1 : f[l].type === "select-all", [l, f]),
-		isClearAllFocused: m(() => l < 0 || l >= f.length ? !1 : f[l].type === "clear-all", [l, f])
+		}, [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])
 	};
-}, C = ({ className: y, clearAllLabel: C = "Clear all", closeOnSelect: w = !1, emptyMessage: ne = "No options found", errorMessage: T, id: re, label: ie, loadingMessage: ae = "Loading options…", maxCount: E = 3, name: D, onChange: O, options: k = [], placeholder: oe = "Select options", ref: se, searchPlaceholder: ce = "Search options…", selectAllLabel: le = "Select all", showClearAll: ue = !0, showSearch: A = !0, showSelectAll: j = !0, sortAlphabetically: M = !1, state: N = "default", value: P = [], "aria-label": de, "aria-describedby": fe, ...F }) => {
-	let I = p(), L = re ?? `${D}-${I}`, R = `${L}-listbox`, z = `${L}-error`, [B, V] = h(!1), [H, pe] = h(""), U = ee(null), W = F.disabled ?? N === "disabled", me = N === "loading", he = N === "error", G = m(() => {
-		let e = k.filter((e) => e.label.toLowerCase().includes(H.toLowerCase()));
-		return M && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
+}, x = ({ className: s, clearAllLabel: y = "Clear all", closeOnSelect: x = !1, dropdownWidth: S = "trigger", emptyMessage: se = "No options found", errorMessage: C, defaultValue: ce = [], id: le, label: ue, loadingMessage: de = "Loading options…", maxCount: w = 3, name: T, onChange: fe, options: E = [], placeholder: D = "Select options", ref: pe, searchPlaceholder: me = "Search options…", selectAllLabel: he = "Select all", showClearAll: ge = !0, showSearch: O = !0, showSelectAll: k = !0, sortAlphabetically: A = !1, state: j = "default", value: _e, "aria-label": ve, "aria-describedby": M, ...N }) => {
+	let P = ne(), F = le ?? `${T}-${P}`, I = `${F}-listbox`, L = `${F}-error`, [R, z] = h(!1), { dropdownShiftStyle: ye, setDropdownElement: be } = l(R), [B, xe] = h(""), [V, H] = c({
+		value: _e,
+		defaultValue: ce,
+		onChange: fe
+	}), U = re(null), W = N.disabled ?? j === "disabled", Se = j === "loading", Ce = j === "error", we = S === "trigger" ? "var(--radix-popover-trigger-width)" : S === "content" ? "max-content" : S, G = S === "trigger" || S === "content" ? S : "custom", K = m(() => {
+		let e = E.filter((e) => e.label.toLowerCase().includes(B.toLowerCase()));
+		return A && (e = [...e].sort((e, t) => e.label.localeCompare(t.label))), e;
 	}, [
-		k,
-		H,
-		M
-	]), K = m(() => {
+		E,
+		B,
+		A
+	]), q = m(() => {
 		let e = {}, t = [];
-		return G.forEach((n) => {
+		return K.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
 		};
-	}, [G]), q = d((e) => {
-		k.find((t) => t.value === e)?.disabled || (O(P.includes(e) ? P.filter((t) => t !== e) : [...P, e]), w && V(!1));
+	}, [K]), J = p((e) => {
+		E.find((t) => t.value === e)?.disabled || (H(V.includes(e) ? V.filter((t) => t !== e) : [...V, e]), x && z(!1));
 	}, [
-		k,
-		P,
-		O,
-		w
-	]), J = d(() => {
-		let e = k.filter((e) => !e.disabled).map((e) => e.value);
-		e.every((e) => P.includes(e)) ? O([]) : O(e);
+		x,
+		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);
 	}, [
-		k,
-		P,
-		O
-	]), Y = d(() => {
-		O([]);
-	}, [O]), X = m(() => k.filter((e) => !e.disabled).map((e) => e.value), [k]), ge = X.length > 0 && X.every((e) => P.includes(e)), { getOptionFocusIndex: _e, handleKeyDown: ve, isSelectAllFocused: Z, setFocusedIndex: Q } = S(G, Y, () => V(!1), q, J, U, A, j, !1);
-	f(() => {
-		Q(B ? 0 : -1);
-	}, [B, Q]);
-	let ye = d((e) => {
-		pe(e.target.value);
-	}, []), be = () => {
-		if (P.length === 0) return /* @__PURE__ */ _("span", {
+		E,
+		H,
+		V
+	]), X = p(() => {
+		H([]);
+	}, [H]), Z = m(() => E.filter((e) => !e.disabled).map((e) => e.value), [E]), Te = Z.length > 0 && Z.every((e) => V.includes(e)), { getOptionFocusIndex: Ee, handleKeyDown: De, isSelectAllFocused: Oe, setFocusedIndex: Q } = oe(K, X, () => z(!1), J, Y, U, O, k, !1);
+	te(() => {
+		Q(R ? 0 : -1);
+	}, [R, Q]);
+	let ke = p((e) => {
+		xe(e.target.value);
+	}, []), Ae = () => {
+		if (V.length === 0) return /* @__PURE__ */ g("span", {
 			className: "min-h-8 flex items-center text-input-text-placeholder",
-			children: oe
+			children: D
 		});
-		let e = P.slice(0, E), t = P.length - E;
-		return /* @__PURE__ */ v("div", {
+		let e = V.slice(0, w), t = V.length - w;
+		return /* @__PURE__ */ _("div", {
 			className: "gap-1 flex flex-wrap items-center overflow-hidden",
 			children: [e.map((e) => {
-				let t = k.find((t) => t.value === e);
-				return t ? /* @__PURE__ */ v("span", {
+				let t = E.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", {
+					}), /* @__PURE__ */ g("button", {
 						"aria-label": `Remove ${t.label}`,
 						className: "hover:text-danger rounded-sm cursor-pointer",
 						"data-testid": "spectral-multiselect-remove-item-button",
 						onClick: (t) => {
-							t.preventDefault(), t.stopPropagation(), q(e);
+							t.preventDefault(), t.stopPropagation(), J(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: [
 					"+",
@@ -178,142 +184,148 @@ var te = "h-4 w-4", y = (e) => ({
 			})]
 		});
 	}, $ = (t, n) => {
-		let r = P.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", _e(n) && "bg-input-bg--hover", r && "font-medium text-input-text"),
+		let r = V.includes(t.value);
+		return /* @__PURE__ */ _("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", Ee(n) && "bg-input-bg--hover", r && "font-medium text-input-text"),
 			disabled: t.disabled,
-			onClick: () => q(t.value),
+			onClick: () => J(t.value),
 			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 })]
+				children: r && /* @__PURE__ */ g(e, { size: 12 })
+			}), /* @__PURE__ */ g("span", { children: t.label })]
 		}, t.value);
-	}, xe = () => ({
+	}, je = () => ({
 		"--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__ */ _(c, {
-			open: B,
-			onOpenChange: V,
-			children: /* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ g(d, {
+			open: R,
+			onOpenChange: z,
+			children: /* @__PURE__ */ _("div", {
 				className: "relative",
 				"data-testid": "spectral-multiselect-wrapper",
-				onKeyDown: B ? ve : void 0,
+				onKeyDown: R ? De : void 0,
 				role: "none",
 				children: [
-					/* @__PURE__ */ _(s, {
+					/* @__PURE__ */ g(u, {
 						asChild: !0,
-						children: /* @__PURE__ */ v("button", {
-							"aria-controls": B ? R : void 0,
-							"aria-describedby": [he ? z : null, fe].filter(Boolean).join(" ") || void 0,
-							"aria-expanded": B,
-							"aria-label": de ?? ie,
-							className: b(N, B, y),
-							"data-state": N,
+						children: /* @__PURE__ */ _("button", {
+							"aria-controls": R ? I : void 0,
+							"aria-describedby": [Ce ? L : null, M].filter(Boolean).join(" ") || void 0,
+							"aria-expanded": R,
+							"aria-label": ve ?? ue,
+							className: b(j, R, s),
+							"data-state": j,
 							"data-testid": "spectral-multiselect-trigger",
 							disabled: W,
-							id: L,
-							name: D,
-							ref: se,
+							id: F,
+							name: T,
+							ref: pe,
 							role: "combobox",
-							style: xe(),
+							style: je(),
 							type: "button",
-							...F,
-							children: [/* @__PURE__ */ _("div", {
+							...N,
+							children: [/* @__PURE__ */ g("div", {
 								className: "min-w-0 flex-1 overflow-hidden",
 								"data-testid": "spectral-multiselect-selected-items",
-								children: be()
-							}), /* @__PURE__ */ _("div", {
+								children: Ae()
+							}), /* @__PURE__ */ g("div", {
 								className: "gap-2 ml-2 flex shrink-0 items-center",
-								children: /* @__PURE__ */ _(t, {
-									className: a("text-input-icon transition-transform duration-200", B && "rotate-180"),
+								children: /* @__PURE__ */ g(t, {
+									className: a("text-input-icon transition-transform duration-200", R && "rotate-180"),
 									size: 20
 								})
 							})]
 						})
 					}),
-					ue && P.length > 0 && /* @__PURE__ */ _("button", {
+					ge && V.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: W,
 						onClick: (e) => {
-							e.stopPropagation(), Y(), document.getElementById(L)?.focus();
+							e.stopPropagation(), X(), document.getElementById(F)?.focus();
 						},
 						type: "button",
-						children: /* @__PURE__ */ _(n, { size: 12 })
+						children: /* @__PURE__ */ g(n, { size: 12 })
 					}),
-					/* @__PURE__ */ _(u, { children: /* @__PURE__ */ _(l, {
+					/* @__PURE__ */ g(ee, { children: /* @__PURE__ */ g(f, {
 						align: "start",
 						avoidCollisions: !0,
-						className: x(),
+						className: ae(),
 						collisionPadding: 10,
+						"data-dropdown-width-mode": G,
+						"data-dropdown-width-value": G === "custom" ? S : void 0,
 						"data-testid": "spectral-multiselect-dropdown",
 						onOpenAutoFocus: (e) => {
-							e.preventDefault(), A && U.current?.focus();
+							e.preventDefault(), O && U.current?.focus();
 						},
 						side: "bottom",
 						sideOffset: 4,
-						style: { width: "var(--radix-popover-trigger-width)" },
-						children: /* @__PURE__ */ v("div", {
+						ref: be,
+						style: {
+							width: we,
+							...ye
+						},
+						children: /* @__PURE__ */ _("div", {
 							className: "p-1",
-							children: [A && /* @__PURE__ */ v("div", {
+							children: [O && /* @__PURE__ */ _("div", {
 								className: "mb-2 relative",
-								children: [/* @__PURE__ */ _(i, { className: a(te, "left-3 text-input-icon absolute top-1/2 -translate-y-1/2") }), /* @__PURE__ */ _("input", {
+								children: [/* @__PURE__ */ g(i, { className: a(v, "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: ye,
-									placeholder: ce,
+									onChange: ke,
+									placeholder: me,
 									ref: U,
 									type: "text",
-									value: H
+									value: B
 								})]
-							}), /* @__PURE__ */ _("div", {
+							}), /* @__PURE__ */ g("div", {
 								className: "max-h-64 overflow-y-auto",
-								id: R,
+								id: I,
 								role: "listbox",
 								"aria-multiselectable": "true",
-								children: me ? /* @__PURE__ */ v("div", {
+								children: Se ? /* @__PURE__ */ _("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, {}), ae]
-								}) : G.length === 0 ? /* @__PURE__ */ _("div", {
+									children: [/* @__PURE__ */ g(r, {}), de]
+								}) : K.length === 0 ? /* @__PURE__ */ g("div", {
 									"data-testid": "spectral-multiselect-empty-message",
 									className: "py-6 text-sm text-input-text-secondary text-center",
-									children: ne
-								}) : /* @__PURE__ */ v(g, { children: [
-									j && /* @__PURE__ */ v("div", {
+									children: se
+								}) : /* @__PURE__ */ _(ie, { children: [
+									k && /* @__PURE__ */ _("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", Z && "bg-input-bg--hover"),
+										children: [/* @__PURE__ */ g("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", Oe && "bg-input-bg--hover"),
 											"data-testid": "spectral-multiselect-select-all-button",
-											onClick: J,
+											onClick: Y,
 											type: "button",
-											children: ge ? C : le
-										}), /* @__PURE__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" })]
+											children: Te ? y : he
+										}), /* @__PURE__ */ g("div", { className: "mx-3 my-1 h-px bg-input-border" })]
 									}),
-									K.ungrouped.length > 0 && /* @__PURE__ */ _("div", {
+									q.ungrouped.length > 0 && /* @__PURE__ */ g("div", {
 										className: "mb-1",
-										children: K.ungrouped.map((e, t) => $(e, t))
+										children: q.ungrouped.map((e, t) => $(e, t))
 									}),
-									Object.entries(K.groups).map(([e, t]) => /* @__PURE__ */ v("div", {
+									Object.entries(q.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__ */ _("div", { className: "mx-3 my-1 h-px bg-input-border" }),
-											/* @__PURE__ */ _("div", {
+											(q.ungrouped.length > 0 || Object.keys(q.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)))
+											t.map((e, t) => $(e, K.indexOf(e)))
 										]
 									}, e))
 								] })
@@ -322,13 +334,13 @@ var te = "h-4 w-4", y = (e) => ({
 					}) })
 				]
 			})
-		}), N === "error" && T && /* @__PURE__ */ _(o, {
+		}), j === "error" && C && /* @__PURE__ */ g(o, {
 			dataTestId: "spectral-multiselect-error-message",
-			id: z,
-			message: T
+			id: L,
+			message: C
 		})]
 	});
 };
-C.displayName = "MultiSelectBase";
+x.displayName = "MultiSelectBase";
 //#endregion
-export { C as MultiSelectBase };
+export { x as MultiSelectBase };

package/dist/MultiSelect.d.ts

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

package/dist/MultiSelect.js

@@ -3,23 +3,24 @@ 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, ref: o, state: s, value: c = [], ...l }) => {
-	let u = a.map((e) => ({
+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) => ({
 		disabled: e.disabled ?? !1,
 		group: e.group,
 		label: e.label,
 		value: e.value
-	})), d = r ? "loading" : s;
+	})), f = r ? "loading" : c;
 	return /* @__PURE__ */ t(e, {
-		"data-disabled": l.disabled,
-		disabled: l.disabled,
+		"data-disabled": u.disabled,
+		defaultValue: o,
+		disabled: u.disabled,
 		emptyMessage: n,
-		onChange: i ?? (() => {}),
-		options: u,
-		ref: o,
-		state: d,
-		value: c,
-		...l
+		onChange: i,
+		options: d,
+		ref: s,
+		state: f,
+		value: l,
+		...u
 	});
 };
 n.displayName = "MultiSelect";

package/dist/Select.d.ts

@@ -1,10 +1,11 @@
-import { BaseFormFieldProps, BaseOption } from './utils/formFieldUtils';
+import { BaseFormFieldProps, BaseOption, DropdownWidth } from './utils/formFieldUtils';
 import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
 type SelectOption = BaseOption;
 type Align = 'start' | 'center' | 'end';
 type Side = 'top' | 'bottom' | 'left' | 'right';
 export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, BaseFormFieldProps {
     defaultValue?: string;
+    dropdownWidth?: DropdownWidth;
     emptyMessage?: ReactNode;
     id?: string;
     label?: string;