@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/select/MultiSelect.esm.js

@@ -1,277 +1,279 @@
-import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
-import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
-import { CircleX as n } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
-import { Search as r } from "../../node_modules/lucide-react/dist/esm/icons/search.esm.js";
-import { CHEVRON_SIZE_CLASS as i, SLOT_BADGE_TEXT_CLASS as a, SLOT_CHILD_ICON_CLASS as ee, SLOT_GAP_CLASS as te, SLOT_ICON_SIZE_CLASS as ne } from "../_shared/form-size-tokens.esm.js";
-import { getInputContainerClasses as re, getInputHelpClasses as ie, getInputLabelClasses as ae, getInputTrailingIconColor as oe, getInputVariantClasses as se } from "../input/utils.esm.js";
-import { LoadingDots as ce } from "./loading-dots.esm.js";
-import { forwardRef as o, useEffect as s, useId as le, useLayoutEffect as ue, useMemo as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { FloatingFocusManager as de, FloatingPortal as fe, autoUpdate as pe, flip as me, offset as he, shift as ge, size as _e, useClick as ve, useDismiss as ye, useFloating as be, useInteractions as xe, useListNavigation as Se, useRole as Ce } from "@floating-ui/react";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Check as t } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { ChevronDown as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { CircleX as r } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
+import { Search as i } from "../../node_modules/lucide-react/dist/esm/icons/search.esm.js";
+import { CHEVRON_SIZE_CLASS as a, CONTROL_TEXT_CLASS as o, SLOT_BADGE_TEXT_CLASS as ee, SLOT_CHILD_ICON_CLASS as te, SLOT_GAP_CLASS as ne, SLOT_ICON_SIZE_CLASS as re } from "../_shared/form-size-tokens.esm.js";
+import { getInputContainerClasses as ie, getInputHelpClasses as ae, getInputLabelClasses as oe, getInputTrailingIconColor as se, getInputVariantClasses as ce } from "../input/utils.esm.js";
+import { LoadingDots as le } from "./loading-dots.esm.js";
+import { computeSelectPanelMaxWidth as ue } from "./panel-width.esm.js";
+import { forwardRef as s, useEffect as c, useId as l, useLayoutEffect as de, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { FloatingFocusManager as fe, FloatingPortal as pe, autoUpdate as me, flip as he, offset as ge, shift as _e, size as ve, useClick as ye, useDismiss as be, useFloating as xe, useInteractions as Se, useListNavigation as Ce, useRole as we } from "@floating-ui/react";
 //#region src/components/select/MultiSelect.tsx
-var we = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), Te = (e) => e.length === 0 ? "" : `${e.length}개 선택`, p = o(function({ options: o, value: p, onChange: m, variant: Ee, selectSize: h = "medium", label: g, labelOption: _ = "appear", help: v, placeholder: De = "선택해주세요", hasError: y = !1, disabled: b = !1, suffix: x, trailingIcon: S, clearable: C = !1, badge: w, searchable: T = !1, searchPlaceholder: Oe = "검색...", onSearchChange: E, isSearchLoading: D = !1, containerProps: ke, containerRef: Ae, className: je = "", panelClassName: Me = "", formatTrigger: Ne = we, formatCollapsed: Pe = Te, disableAutoCollapse: O = !1, showSelectAll: Fe = !1, id: k, name: A, "data-testid": Ie }, j) {
-	let [M, Le] = u(!1), [N, P] = u(null), [F, I] = u(""), [Re, L] = u(!1), R = l([]), z = l(null), B = l(null), V = l(null), H = le(), ze = (e) => `${H}-opt-${e}`, Be = N === null ? void 0 : ze(N), U = typeof E == "function", W = c(() => {
-		if (!T || U || F.length === 0) return o;
-		let e = F.toLowerCase();
-		return o.filter((t) => t.label.toLowerCase().includes(e));
+var Te = (e) => e.length === 0 ? "" : e.map((e) => e.label).join(", "), Ee = (e) => e.length === 0 ? "" : `${e.length}개 선택`, h = s(function({ options: s, value: h, onChange: g, variant: De, selectSize: _ = "medium", label: v, labelOption: y = "appear", help: b, placeholder: Oe = "선택해주세요", hasError: x = !1, disabled: S = !1, suffix: C, trailingIcon: w, clearable: T = !1, badge: E, searchable: D = !1, searchPlaceholder: ke = "검색...", onSearchChange: O, isSearchLoading: k = !1, containerProps: Ae, containerRef: je, className: Me = "", panelClassName: Ne = "", formatTrigger: Pe = Te, formatCollapsed: Fe = Ee, disableAutoCollapse: A = !1, showSelectAll: Ie = !1, id: Le, name: j, "data-testid": Re }, M) {
+	let [N, ze] = f(!1), [P, F] = f(null), [I, L] = f(""), [Be, R] = f(!1), Ve = d([]), z = d(null), B = d(null), He = d(null), Ue = d(null), V = l(), We = l(), Ge = Le ?? We, Ke = (e) => `${V}-opt-${e}`, qe = P === null ? void 0 : Ke(P), Je = typeof O == "function", H = d(O);
+	H.current = O;
+	let U = u(() => {
+		if (!D || Je || I.length === 0) return s;
+		let e = I.toLowerCase();
+		return s.filter((t) => t.label.toLowerCase().includes(e));
 	}, [
-		o,
-		T,
-		U,
-		F
-	]), G = c(() => new Set(p), [p]), K = c(() => o.filter((e) => G.has(String(e.value))), [o, G]), { refs: Ve, floatingStyles: He, context: q } = be({
-		open: M,
-		onOpenChange: Le,
+		s,
+		D,
+		Je,
+		I
+	]), W = u(() => new Set(h), [h]), G = u(() => s.filter((e) => W.has(String(e.value))), [s, W]), { refs: Ye, floatingStyles: Xe, context: K } = xe({
+		open: N,
+		onOpenChange: ze,
 		placement: "bottom-start",
-		whileElementsMounted: pe,
+		whileElementsMounted: me,
 		middleware: [
-			he(4),
-			me({ padding: 8 }),
-			ge({ padding: 8 }),
-			_e({
-				apply({ rects: e, elements: t, availableHeight: n }) {
+			ge(4),
+			he({ padding: 8 }),
+			_e({ padding: 8 }),
+			ve({
+				apply({ rects: e, elements: t, availableHeight: n, availableWidth: r }) {
 					Object.assign(t.floating.style, {
 						minWidth: `${e.reference.width}px`,
+						maxWidth: `${ue(e.reference.width, r)}px`,
 						maxHeight: `${Math.min(n, 320)}px`
 					});
 				},
 				padding: 8
 			})
 		]
-	}), { getReferenceProps: Ue, getFloatingProps: We, getItemProps: Ge } = xe([
-		ve(q, { enabled: !b }),
-		ye(q),
-		Ce(q, { role: "listbox" }),
-		Se(q, {
-			listRef: R,
-			activeIndex: N,
-			onNavigate: P,
-			virtual: T,
+	}), { getReferenceProps: Ze, getFloatingProps: Qe, getItemProps: $e } = Se([
+		ye(K, { enabled: !S }),
+		be(K),
+		we(K, { role: "listbox" }),
+		Ce(K, {
+			listRef: Ve,
+			activeIndex: P,
+			onNavigate: F,
+			virtual: D,
 			loop: !0
 		})
-	]);
-	s(() => {
-		M || (I(""), P(null), U && E(""));
-	}, [
-		M,
-		U,
-		E
-	]), s(() => {
-		M && T && z.current && z.current.focus();
-	}, [M, T]), ue(() => {
-		if (O) {
-			L(!1);
+	]), et = d(!1);
+	c(() => {
+		N ? et.current = !0 : (L(""), F(null), et.current && H.current?.(""));
+	}, [N]), c(() => {
+		N && D && z.current && z.current.focus();
+	}, [N, D]), de(() => {
+		if (A) {
+			R(!1);
 			return;
 		}
-		let e = B.current, t = V.current;
+		let e = He.current, t = Ue.current;
 		if (!e || !t) return;
 		let n = () => {
 			let n = t.scrollWidth, r = e.clientWidth;
-			L(n > r - 1);
+			R(n > r - 1);
 		};
 		n();
 		let r = new ResizeObserver(() => {
 			requestAnimationFrame(n);
 		});
 		return r.observe(e), () => r.disconnect();
-	}, [O, p.join(",")]);
-	let J = (e) => {
-		let t = new Set(G);
-		t.has(e) ? t.delete(e) : t.add(e), m(o.filter((e) => t.has(String(e.value))).map((e) => String(e.value)));
-	}, Ke = (e) => {
-		e.stopPropagation(), m([]);
-	}, Y = W.filter((e) => !e.disabled).map((e) => String(e.value)), qe = Y.length > 0 && Y.every((e) => G.has(e)), Je = () => {
-		if (qe) {
-			let e = new Set(Y);
-			m(p.filter((t) => !e.has(t)));
+	}, [A, h.join(",")]);
+	let q = (e) => {
+		let t = new Set(W);
+		t.has(e) ? t.delete(e) : t.add(e), g(s.filter((e) => t.has(String(e.value))).map((e) => String(e.value)));
+	}, tt = (e) => {
+		e.stopPropagation(), g([]);
+	}, J = U.filter((e) => !e.disabled).map((e) => String(e.value)), Y = J.length > 0 && J.every((e) => W.has(e)), nt = () => {
+		if (Y) {
+			let e = new Set(J);
+			g(h.filter((t) => !e.has(t)));
 		} else {
-			let e = new Set([...p, ...Y]);
-			m(o.filter((t) => e.has(String(t.value))).map((e) => String(e.value)));
+			let e = new Set([...h, ...J]);
+			g(s.filter((t) => e.has(String(t.value))).map((e) => String(e.value)));
 		}
-	}, Ye = (e) => {
-		!C || b || p.length === 0 || M || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), m([]));
-	}, Xe = (e) => {
+	}, rt = (e) => {
+		!T || S || h.length === 0 || N || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), g([]));
+	}, it = (e) => {
 		let t = e.target.value;
-		I(t), U && E(t);
-	}, Ze = (e) => {
-		if (!e.nativeEvent.isComposing && e.key === "Enter" && N !== null) {
+		t !== I && (B.current && (B.current.scrollTop = 0), F(null)), L(t), H.current?.(t);
+	}, at = (e) => {
+		if (!e.nativeEvent.isComposing && e.key === "Enter" && P !== null) {
 			e.preventDefault();
-			let t = W[N];
-			t && !t.disabled && J(String(t.value));
+			let t = U[P];
+			t && !t.disabled && q(String(t.value));
 		}
-	}, X = K.length > 0, Qe = _ === "sustain" || _ === "appear" && X, $e = X ? Ne(K) : "", et = X ? Pe(K) : "", tt = X ? Re ? et : $e : De, nt = te[h], Z = ee[h], rt = a[h], it = ne[h], at = i[h], ot = se(Ee, y, b, h), Q = oe(y, b, X || M), $ = h === "mini" ? "text-xs" : h === "large" ? "text-base" : "text-sm", st = b ? "text-text-disabled" : y ? "text-text-danger" : X ? "text-text-primary" : "text-text-tertiary";
-	return /* @__PURE__ */ f("div", {
-		ref: Ae,
-		className: re(),
-		...ke,
+	}, X = G.length > 0, ot = y === "sustain" || y === "appear" && X, st = X ? Pe(G) : "", ct = X ? Fe(G) : "", lt = X ? Be ? ct : st : Oe, ut = ne[_], Z = te[_], dt = ee[_], ft = re[_], pt = a[_], mt = ce(De, x, S, _), Q = se(x, S, X || N), $ = o[_], ht = S ? "text-fg-disabled" : x ? "text-fg-danger" : X ? "text-fg-default" : "text-fg-subtle";
+	return /* @__PURE__ */ m("div", {
+		ref: je,
+		className: e(ie(), "min-w-0"),
+		...Ae,
 		children: [
-			!O && X && /* @__PURE__ */ d("span", {
-				ref: V,
+			!A && X && /* @__PURE__ */ p("span", {
+				ref: Ue,
 				"aria-hidden": !0,
-				className: `pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap ${$}`,
-				children: $e
+				className: e("pointer-events-none fixed left-0 -top-[9999px] whitespace-nowrap", $),
+				children: st
 			}),
-			Qe && g && /* @__PURE__ */ d("label", {
-				className: ae(Ee, y),
-				htmlFor: k,
-				children: g
+			ot && v && /* @__PURE__ */ p("label", {
+				className: oe(De, x),
+				htmlFor: Ge,
+				children: v
 			}),
-			/* @__PURE__ */ f("button", {
+			/* @__PURE__ */ m("button", {
 				ref: (e) => {
-					Ve.setReference(e), typeof j == "function" ? j(e) : j && (j.current = e);
+					Ye.setReference(e), typeof M == "function" ? M(e) : M && (M.current = e);
 				},
-				id: k,
+				id: Ge,
 				type: "button",
-				disabled: b,
+				disabled: S,
 				"aria-haspopup": "listbox",
-				"aria-expanded": M,
-				"aria-controls": M ? H : void 0,
-				"aria-activedescendant": Be,
-				"data-testid": Ie,
-				...Ue({ onKeyDown: Ye }),
-				className: `${ot} flex w-full items-center ${nt} ${b ? "cursor-not-allowed" : "cursor-pointer"} ${je}`.trim().replace(/\s+/g, " "),
+				"aria-expanded": N,
+				"aria-controls": N ? V : void 0,
+				"aria-activedescendant": qe,
+				"data-testid": Re,
+				...Ze({ onKeyDown: rt }),
+				className: e(mt, "flex w-full min-w-0 items-center", ut, S ? "cursor-not-allowed" : "cursor-pointer", Me),
 				children: [
-					/* @__PURE__ */ d("span", {
-						ref: B,
-						className: `flex-1 truncate text-left ${$} ${st}`,
-						children: tt
+					/* @__PURE__ */ p("span", {
+						ref: He,
+						className: e("min-w-0 flex-1 truncate text-left", $, ht),
+						children: lt
 					}),
-					x && /* @__PURE__ */ d("span", {
-						className: `shrink-0 whitespace-nowrap ${$} ${Q}`,
-						children: x
+					C && /* @__PURE__ */ p("span", {
+						className: e("shrink-0 whitespace-nowrap", $, Q),
+						children: C
 					}),
-					S && /* @__PURE__ */ d("span", {
-						className: `flex shrink-0 items-center ${Q} ${Z}`,
-						children: S
+					w && /* @__PURE__ */ p("span", {
+						className: e("flex shrink-0 items-center", Q, Z),
+						children: w
 					}),
-					C && !b && X && /* @__PURE__ */ d("span", {
+					T && !S && X && /* @__PURE__ */ p("span", {
 						role: "button",
 						tabIndex: -1,
-						onClick: Ke,
+						onClick: tt,
 						"aria-label": "선택 모두 지우기",
-						className: `flex shrink-0 cursor-pointer items-center ${Q} hover:text-text-primary`,
-						children: /* @__PURE__ */ d(n, {
-							className: it,
+						className: e("flex shrink-0 cursor-pointer items-center", Q, "hover:text-fg-default"),
+						children: /* @__PURE__ */ p(r, {
+							className: ft,
 							strokeWidth: 1.5,
 							"aria-hidden": !0
 						})
 					}),
-					w && /* @__PURE__ */ d("span", {
-						className: `flex shrink-0 items-center ${Z} ${rt}`,
-						children: w
+					E && /* @__PURE__ */ p("span", {
+						className: e("flex shrink-0 items-center", Z, dt),
+						children: E
 					}),
-					/* @__PURE__ */ d(t, {
-						className: `shrink-0 transition-transform ${at} ${Q} ${M ? "rotate-180" : ""}`,
+					/* @__PURE__ */ p(n, {
+						className: e("shrink-0 transition-transform", pt, Q, N && "rotate-180"),
 						strokeWidth: 1.5,
 						"aria-hidden": !0
 					})
 				]
 			}),
-			A && /* @__PURE__ */ d("input", {
+			j && /* @__PURE__ */ p("input", {
 				type: "hidden",
-				name: A,
-				value: p.join(",")
+				name: j,
+				value: h.join(",")
 			}),
-			M && /* @__PURE__ */ d(fe, { children: /* @__PURE__ */ d(de, {
-				context: q,
+			N && /* @__PURE__ */ p(pe, { children: /* @__PURE__ */ p(fe, {
+				context: K,
 				modal: !1,
-				initialFocus: T ? -1 : 0,
-				children: /* @__PURE__ */ f("div", {
-					ref: Ve.setFloating,
-					id: H,
-					style: He,
-					...We(),
-					className: `z-9999 overflow-hidden rounded-lg border border-border-tertiary bg-bg-white shadow-lg dark:border-border-secondary dark:bg-neutral-800 ${Me}`,
+				initialFocus: D ? -1 : 0,
+				children: /* @__PURE__ */ m("div", {
+					ref: Ye.setFloating,
+					id: V,
+					style: Xe,
+					...Qe(),
+					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface text-fg-default shadow-overlay", Ne),
 					children: [
-						T && /* @__PURE__ */ f("div", {
-							className: "flex items-center gap-2 border-b border-border-tertiary px-3 py-2 dark:border-border-secondary",
+						D && /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-2 border-b border-border-subtle px-3 py-2",
 							children: [
-								/* @__PURE__ */ d(r, {
-									className: "h-4 w-4 shrink-0 text-icon-tertiary",
+								/* @__PURE__ */ p(i, {
+									className: "h-4 w-4 shrink-0 text-fg-subtle",
 									"aria-hidden": !0
 								}),
-								/* @__PURE__ */ d("input", {
+								/* @__PURE__ */ p("input", {
 									ref: z,
 									type: "text",
-									value: F,
-									onChange: Xe,
-									onKeyDown: Ze,
-									placeholder: Oe,
-									className: "flex-1 bg-transparent text-sm outline-hidden placeholder:text-text-tertiary"
+									value: I,
+									onChange: it,
+									onKeyDown: at,
+									placeholder: ke,
+									className: "flex-1 bg-transparent text-sm outline-hidden placeholder:text-fg-subtle"
 								}),
-								D && /* @__PURE__ */ d(ce, { className: "h-4 w-4 shrink-0 text-icon-tertiary" })
+								k && /* @__PURE__ */ p(le, { className: "h-4 w-4 shrink-0 text-fg-subtle" })
 							]
 						}),
-						Fe && W.length > 0 && /* @__PURE__ */ f("button", {
+						Ie && U.length > 0 && /* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: Je,
-							className: "flex w-full items-center justify-between border-b border-border-tertiary px-3 py-2 text-xs text-text-secondary transition-colors hover:bg-neutral-50 dark:border-border-secondary dark:hover:bg-neutral-700",
-							children: [/* @__PURE__ */ d("span", { children: qe ? "전체 해제" : "전체 선택" }), /* @__PURE__ */ f("span", {
-								className: "text-text-tertiary",
-								children: [Y.length, "개"]
+							onClick: nt,
+							className: "flex w-full items-center justify-between border-b border-border-subtle px-3 py-2 text-xs text-fg-muted transition-colors hover:bg-bg-subtle",
+							children: [/* @__PURE__ */ p("span", { children: Y ? "전체 해제" : "전체 선택" }), /* @__PURE__ */ m("span", {
+								className: "text-fg-subtle",
+								children: [J.length, "개"]
 							})]
 						}),
-						/* @__PURE__ */ d("div", {
+						/* @__PURE__ */ p("div", {
+							ref: B,
 							className: "max-h-72 overflow-y-auto py-1",
-							children: W.length === 0 ? /* @__PURE__ */ d("div", {
-								className: "px-3 py-4 text-center text-sm text-text-tertiary",
-								children: D ? "검색 중..." : "옵션이 없어요"
-							}) : W.map((t, n) => {
-								let r = String(t.value), i = G.has(r), a = N === n;
-								return /* @__PURE__ */ f("div", {
-									id: ze(n),
+							children: U.length === 0 ? /* @__PURE__ */ p("div", {
+								className: "px-3 py-4 text-center text-sm text-fg-subtle",
+								children: k ? "검색 중..." : "옵션이 없어요"
+							}) : U.map((n, r) => {
+								let i = String(n.value), a = W.has(i), o = P === r;
+								return /* @__PURE__ */ m("div", {
+									id: Ke(r),
 									ref: (e) => {
-										R.current[n] = e;
+										Ve.current[r] = e;
 									},
 									role: "option",
-									"aria-selected": i,
-									"aria-disabled": t.disabled || void 0,
-									tabIndex: a ? 0 : -1,
-									...Ge({
+									"aria-selected": a,
+									"aria-disabled": n.disabled || void 0,
+									tabIndex: o ? 0 : -1,
+									...$e({
 										onClick: () => {
-											t.disabled || J(r);
+											n.disabled || q(i);
 										},
 										onKeyDown: (e) => {
-											t.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), J(r));
+											n.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q(i));
 										}
 									}),
-									className: `flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors ${t.disabled ? "cursor-not-allowed text-text-disabled" : a ? "bg-neutral-100 text-text-primary dark:bg-neutral-700" : "text-text-primary hover:bg-neutral-50 dark:hover:bg-neutral-700"}`,
+									className: e("flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors", n.disabled ? "cursor-not-allowed text-fg-disabled" : o ? "bg-bg-subtle text-fg-default" : "text-fg-default hover:bg-bg-subtle"),
 									children: [
-										/* @__PURE__ */ d("span", {
-											className: `mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border ${i ? "border-primary-500 bg-primary-500 text-white" : "border-border-tertiary dark:border-border-secondary"}`,
+										/* @__PURE__ */ p("span", {
+											className: e("mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-checkbox border", a ? "border-primary bg-primary text-fg-inverse" : "border-border-subtle"),
 											"aria-hidden": !0,
-											children: i && /* @__PURE__ */ d(e, {
+											children: a && /* @__PURE__ */ p(t, {
 												className: "h-3 w-3",
 												strokeWidth: 3
 											})
 										}),
-										/* @__PURE__ */ f("div", {
+										/* @__PURE__ */ m("div", {
 											className: "min-w-0 flex-1",
-											children: [/* @__PURE__ */ d("div", {
-												className: `truncate ${i ? "font-medium" : ""}`,
-												children: t.label
-											}), t.description && /* @__PURE__ */ d("div", {
-												className: "mt-0.5 truncate text-xs text-text-tertiary",
-												children: t.description
+											children: [/* @__PURE__ */ p("div", {
+												className: e("truncate", a && "font-medium"),
+												children: n.label
+											}), n.description && /* @__PURE__ */ p("div", {
+												className: "mt-0.5 truncate text-xs text-fg-subtle",
+												children: n.description
 											})]
 										}),
-										t.trailing && /* @__PURE__ */ d("span", {
-											className: "shrink-0 text-xs text-text-tertiary",
-											children: t.trailing
+										n.trailing && /* @__PURE__ */ p("span", {
+											className: "shrink-0 text-xs text-fg-subtle",
+											children: n.trailing
 										})
 									]
-								}, r);
+								}, i);
 							})
 						})
 					]
 				})
 			}) }),
-			v && /* @__PURE__ */ d("div", {
-				className: ie(y),
-				children: v
+			b && /* @__PURE__ */ p("div", {
+				className: ae(x),
+				children: b
 			})
 		]
 	});
 });
 //#endregion
-export { p as MultiSelect };
+export { h as MultiSelect };

package/dist/components/select/Select.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),r=require("../_shared/form-size-tokens.cjs"),i=require("../input/utils.cjs"),ee=require("../../node_modules/use-debounce/dist/index.module.cjs"),te=require("./loading-dots.cjs"),ne=require("./panel-width.cjs");let a=require("react"),o=require("react/jsx-runtime"),s=require("@floating-ui/react");var c=(0,a.forwardRef)(function({options:c,value:l,onChange:u,variant:d,selectSize:f=`medium`,label:re,labelOption:ie=`appear`,help:ae,placeholder:oe=`선택해주세요`,hasError:p=!1,disabled:m=!1,suffix:h,trailingIcon:g,clearable:_=!1,badge:v,searchable:y=!1,searchPlaceholder:se=`검색...`,onSearchChange:b,isSearchLoading:x=!1,containerProps:ce,containerRef:le,className:ue=``,panelClassName:de=``,id:fe,name:S,onLoadMore:C,hasMore:w=!1,searchDebounceMs:T=300,openOnFocus:pe=!1,validateSearchQuery:me,open:he,onOpenChange:ge,"data-testid":_e},E){let[ve,ye]=(0,a.useState)(!1),D=he??ve,O=e=>{he===void 0&&ye(e),ge?.(e)},[k,A]=(0,a.useState)(null),[j,M]=(0,a.useState)(``),N=(0,a.useRef)([]),P=(0,a.useRef)(null),[F,be]=(0,a.useState)(null),[I,xe]=(0,a.useState)(null),L=(0,a.useId)(),Se=(0,a.useId)(),R=fe??Se,Ce=e=>`${L}-opt-${e}`,we=k===null?void 0:Ce(k),z=typeof b==`function`,B=(0,a.useRef)(b);B.current=b;let V=T===!1||T<=0?0:T,Te=ee.c(e=>{B.current?.(e)},V),H=(e,t)=>{z&&(t||V===0?(Te.cancel(),B.current?.(e)):Te(e))},U=c.find(e=>String(e.value)===l),Ee=(0,a.useRef)(U?.label??``);Ee.current=U?.label??``;let De=(0,a.useRef)(H);De.current=H;let Oe=y&&(U!==void 0&&j===U.label||U===void 0&&l!==``&&j!==``),W=(0,a.useMemo)(()=>{if(!y||z||j.length===0||Oe)return c;let e=j.toLowerCase();return c.filter(t=>t.label.toLowerCase().includes(e))},[c,y,z,j,Oe]),{refs:G,floatingStyles:ke,context:K}=(0,s.useFloating)({open:D,onOpenChange:O,placement:`bottom-start`,whileElementsMounted:s.autoUpdate,middleware:[(0,s.offset)(4),(0,s.flip)({padding:8}),(0,s.shift)({padding:8}),(0,s.size)({apply({rects:e,elements:t,availableHeight:n,availableWidth:r}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`,maxWidth:`${ne.computeSelectPanelMaxWidth(e.reference.width,r)}px`,maxHeight:`${Math.min(n,320)}px`})},padding:8})]}),{getReferenceProps:Ae,getFloatingProps:je,getItemProps:Me}=(0,s.useInteractions)([(0,s.useClick)(K,{enabled:!m&&!y}),(0,s.useDismiss)(K),(0,s.useRole)(K,{role:`listbox`}),(0,s.useListNavigation)(K,{listRef:N,activeIndex:k,onNavigate:A,virtual:y,loop:!0}),(0,s.useTypeahead)(K,{listRef:{current:W.map(e=>e.label)},activeIndex:k,onMatch:A,enabled:!y})]),Ne=(0,a.useRef)(!1);(0,a.useEffect)(()=>{if(D){if(Ne.current=!0,y){let e=Ee.current;M(e),e!==``&&requestAnimationFrame(()=>{P.current?.select()})}}else M(``),A(null),Ne.current&&De.current(``,!0)},[D,y,z]),(0,a.useEffect)(()=>{if(!D||!C||!w||!F||!I)return;let e=new IntersectionObserver(e=>{for(let t of e)t.isIntersecting&&!x&&C()},{root:I,rootMargin:`0px 0px 80px 0px`});return e.observe(F),()=>e.disconnect()},[D,C,w,x,F,I]);let q=e=>{u(e),O(!1)},Pe=e=>{e.stopPropagation(),u(``),M(``)},Fe=e=>{y||!_||m||!J||D||(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),u(``))},Ie=e=>{let t=e.target.value;me&&!me(t)||(t!==j&&(I&&(I.scrollTop=0),A(null)),M(t),H(t,!1),D||O(!0))},Le=e=>{if(!e.nativeEvent.isComposing){if(e.key===`Enter`&&k!==null){e.preventDefault();let t=W[k];t&&!t.disabled&&q(String(t.value));return}(e.key===`Backspace`||e.key===`Delete`)&&U&&(!D||j===``)&&(e.preventDefault(),u(``))}},Re=ie===`sustain`||ie===`appear`&&!!U,J=!!U,ze=U?U.label:oe,Be=D?j:U?.label??``,Ve=r.SLOT_GAP_CLASS[f],Y=r.SLOT_CHILD_ICON_CLASS[f],He=r.SLOT_BADGE_TEXT_CLASS[f],X=r.SLOT_ICON_SIZE_CLASS[f],Ue=r.CHEVRON_SIZE_CLASS[f],We=i.getInputVariantClasses(d,p,m,f),Z=i.getInputTrailingIconColor(p,m,J||D),Q=r.CONTROL_TEXT_CLASS[f],$=m?`text-fg-disabled`:p?`text-fg-danger`:J?`text-fg-default`:`text-fg-subtle`;return(0,o.jsxs)(`div`,{ref:le,className:e.cn(i.getInputContainerClasses(),`min-w-0`),...ce,children:[Re&&re&&(0,o.jsx)(`label`,{className:i.getInputLabelClasses(d,p),htmlFor:R,children:re}),y?(0,o.jsxs)(`div`,{ref:e=>{G.setReference(e)},...Ae({onClick:()=>{m||(P.current?.focus(),D||O(!0))}}),className:e.cn(We,`flex w-full min-w-0 items-center`,Ve,d!==`box`&&`focus-within:border-primary`,d!==`box`&&d!==`line`&&`focus-within:ring-control focus-within:ring-primary`,m?`cursor-not-allowed`:`cursor-text`,ue),children:[(0,o.jsx)(`input`,{ref:e=>{P.current=e,typeof E==`function`?E(e):E&&(E.current=e)},id:R,type:`text`,role:`combobox`,readOnly:!D,disabled:m,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-controls":D?L:void 0,"aria-activedescendant":we,"aria-autocomplete":`list`,"data-testid":_e,value:Be,placeholder:U?se:oe,onChange:Ie,onKeyDown:Le,onFocus:()=>{pe&&!m&&!D&&O(!0)},className:e.cn(`min-w-0 flex-1 truncate bg-transparent text-left outline-hidden placeholder:text-fg-subtle`,Q,$,m&&`cursor-not-allowed`)}),h&&(0,o.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,Q,Z),children:h}),g&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Y),children:g}),x&&(0,o.jsx)(te.LoadingDots,{className:e.cn(`shrink-0 text-fg-subtle`,X)}),_&&!m&&J&&(0,o.jsx)(`button`,{type:`button`,tabIndex:-1,onClick:Pe,"aria-label":`선택 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center rounded`,Z,`hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring`),children:(0,o.jsx)(n.CircleX,{className:X,strokeWidth:1.5,"aria-hidden":!0})}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Y,He),children:v}),(0,o.jsx)(t.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Ue,Z,D&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}):(0,o.jsxs)(`button`,{ref:e=>{G.setReference(e),typeof E==`function`?E(e):E&&(E.current=e)},id:R,type:`button`,disabled:m,"aria-haspopup":`listbox`,"aria-expanded":D,"aria-controls":D?L:void 0,"aria-activedescendant":we,"data-testid":_e,...Ae({onKeyDown:Fe}),className:e.cn(We,`flex w-full min-w-0 items-center`,Ve,m?`cursor-not-allowed`:`cursor-pointer`,ue),children:[(0,o.jsx)(`span`,{className:e.cn(`min-w-0 flex-1 truncate text-left`,Q,$),children:ze}),h&&(0,o.jsx)(`span`,{className:e.cn(`shrink-0 whitespace-nowrap`,Q,Z),children:h}),g&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Z,Y),children:g}),_&&!m&&J&&(0,o.jsx)(`span`,{role:`button`,tabIndex:-1,onClick:Pe,"aria-label":`선택 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center`,Z,`hover:text-fg-default`),children:(0,o.jsx)(n.CircleX,{className:X,strokeWidth:1.5,"aria-hidden":!0})}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,Y,He),children:v}),(0,o.jsx)(t.ChevronDown,{className:e.cn(`shrink-0 transition-transform`,Ue,Z,D&&`rotate-180`),strokeWidth:1.5,"aria-hidden":!0})]}),S&&(0,o.jsx)(`input`,{type:`hidden`,name:S,value:l}),D&&(0,o.jsx)(s.FloatingPortal,{children:(0,o.jsx)(s.FloatingFocusManager,{context:K,modal:!1,initialFocus:y?-1:0,children:(0,o.jsx)(`div`,{ref:G.setFloating,id:L,style:ke,...je(),className:e.cn(`z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface shadow-overlay`,de),children:(0,o.jsxs)(`div`,{ref:xe,className:`max-h-72 overflow-y-auto py-1`,children:[W.length===0?(0,o.jsx)(`div`,{className:`px-3 py-4 text-center text-sm text-fg-subtle`,children:x?`검색 중...`:`옵션이 없어요`}):W.map((t,n)=>{let r=String(t.value)===l,i=k===n;return(0,o.jsxs)(`div`,{id:Ce(n),ref:e=>{N.current[n]=e},role:`option`,"aria-selected":r,"aria-disabled":t.disabled||void 0,tabIndex:i?0:-1,...Me({onClick:()=>{t.disabled||q(String(t.value))},onKeyDown:e=>{t.disabled||(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),q(String(t.value)))}}),className:e.cn(`flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors`,t.disabled?`cursor-not-allowed text-fg-disabled`:r?e.cn(`font-medium text-primary-fg`,i?`bg-primary-subtle`:`bg-primary-subtle/60 hover:bg-primary-subtle/80`):i?`bg-bg-subtle text-fg-default`:`text-fg-default hover:bg-bg-subtle`),children:[(0,o.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,o.jsx)(`div`,{className:`truncate`,children:t.label}),t.description&&(0,o.jsx)(`div`,{className:`mt-0.5 truncate text-xs text-fg-subtle`,children:t.description})]}),t.trailing&&(0,o.jsx)(`span`,{className:`shrink-0 text-xs text-fg-subtle`,children:t.trailing})]},String(t.value))}),C&&w&&(0,o.jsx)(`div`,{ref:be,"aria-hidden":!0,className:`flex items-center justify-center px-3 py-3 text-fg-subtle`,children:x&&(0,o.jsx)(te.LoadingDots,{})})]})})})}),ae&&(0,o.jsx)(`div`,{className:i.getInputHelpClasses(p),children:ae})]})});exports.Select=c;

package/dist/{src/components → components}/select/Select.d.ts

@@ -1,4 +1,4 @@
-import { SelectCommonProps, SelectOption } from './types';
+import { SelectCommonProps, SelectOption } from './types.js';
 /**
  * Select의 search 관련 props discriminated union.
  * `searchable=true`일 때만 onSearchChange/isSearchLoading/onLoadMore/hasMore/searchDebounceMs/searchPlaceholder가 의미가 있다.
@@ -12,6 +12,8 @@ type SelectSearchProps = {
     onLoadMore?: never;
     hasMore?: never;
     searchDebounceMs?: never;
+    openOnFocus?: never;
+    validateSearchQuery?: never;
 } | {
     searchable: true;
     /** 트리거 input의 검색 placeholder. selected 있을 때 fallback으로 노출. */
@@ -33,6 +35,10 @@ type SelectSearchProps = {
      * @default 300
      */
     searchDebounceMs?: number | false;
+    /** searchable 입력에 포커스만 해도 패널을 연다. @default false */
+    openOnFocus?: boolean;
+    /** searchable 입력의 다음 검색어를 검사한다. false면 검색어와 검색 콜백에 반영하지 않는다. */
+    validateSearchQuery?: (query: string) => boolean;
 };
 /** Select의 search 외 base props (SelectCommonProps에서 search 관련 제외). */
 type SelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceholder" | "onSearchChange" | "isSearchLoading"> & {
@@ -42,7 +48,11 @@ type SelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceholder
     value: string;
     /** 값 변경 콜백. clearable로 비울 때도 빈 문자열로 호출. */
     onChange: (value: string) => void;
-    /** 드롭다운 패널 추가 className. */
+    /**
+     * 드롭다운 패널 추가 className. 긴 라벨이 패널을 뷰포트 밖으로 밀어내지 않도록 인라인 maxWidth가
+     * 패널 폭을 `max(트리거 폭, min(가용 폭, 420px))`로 제한하므로 `max-w-*`/`min-w-*`로
+     * 이 범위를 넘길 수 없다. 범위 안에서는 `w-*`로 지정하고, 더 큰 폭이 필요하면 트리거 폭을 조정한다.
+     */
     panelClassName?: string;
     /** 트리거 추가 className. */
     className?: string;
@@ -50,6 +60,10 @@ type SelectBaseProps = Omit<SelectCommonProps, "searchable" | "searchPlaceholder
     id?: string;
     /** name (form 제출용 hidden input). */
     name?: string;
+    /** 지정하면 드롭다운 열림 상태를 제어한다. 생략하면 내부 상태를 사용한다. */
+    open?: boolean;
+    /** 드롭다운 열기·닫기 요청을 전달한다. open을 제어할 때는 이 값으로 상태를 갱신한다. */
+    onOpenChange?: (open: boolean) => void;
 };
 type SelectProps = SelectBaseProps & SelectSearchProps;
 /**