@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/Combobox/Combobox.mjs

@@ -0,0 +1,364 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useOverlayLayer as t } from "../../../hooks/useOverlayLayer.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { assignRef as r } from "../../../utils/refs.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { VisuallyHidden as ee } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ChevronDownIcon as te, CloseIcon as ne } from "../../primitives/Icon/icons.mjs";
+import { Chip as re, ChipGroup as ie } from "../../data-display/Chip/Chip.mjs";
+import { useFieldContext as ae, useFieldControl as oe } from "../Field/FieldContext.mjs";
+import { CREATE_KEY as se, defaultComboboxFilter as ce, findEnabled as a, isEnabled as le, normalizeText as o, orderItems as ue } from "./comboboxUtils.mjs";
+import s from "./Combobox.module.css.mjs";
+import { ComboboxPopup as de } from "./ComboboxPopup.mjs";
+import { useCallback as fe, useEffect as c, useId as pe, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as me } from "react/jsx-runtime";
+import { flushSync as he } from "react-dom";
+//#region src/components/forms/Combobox/Combobox.tsx
+var ge = {
+	sm: s.sm,
+	md: s.md,
+	lg: s.lg
+}, _e = {
+	sm: "sm",
+	md: "sm",
+	lg: "md"
+};
+function f(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : "";
+}
+var ve = 500, ye = (ye) => {
+	let p = n().combobox, { options: m, renderOption: be, multiple: h = !1, value: xe, defaultValue: Se, onValueChange: Ce, inputValue: we, defaultInputValue: Te, onInputValueChange: Ee, open: De, defaultOpen: Oe = !1, onOpenChange: ke, filter: Ae, loading: g = !1, loadingMessage: je = p.loading, emptyMessage: _ = p.empty, resultsMessage: Me = p.results, allowCustomValue: v = !1, onCreate: Ne, createLabel: Pe = p.create, clearable: Fe = !1, clearLabel: Ie = p.clear, requiredMessage: Le = p.required, clearOnEscape: Re = !1, showSuggestionsLabel: ze = p.showSuggestions, hideSuggestionsLabel: Be = p.hideSuggestions, selectedLabel: Ve = p.selected, autoHighlight: He = !1, loop: Ue = !0, size: We, invalid: Ge, required: Ke, disabled: qe, readOnly: Je, name: y, placement: Ye = "bottom-start", maxHeight: Xe, fullWidth: Ze = !0, container: Qe, inputClassName: $e, className: et, style: tt, id: nt, ref: rt, placeholder: it, onChange: at, onKeyDown: ot, onBlur: st, "aria-describedby": ct, "aria-label": b, "aria-labelledby": lt, ...ut } = ye, x = ae(), S = oe({
+		id: nt,
+		invalid: Ge,
+		required: Ke,
+		disabled: qe,
+		readOnly: Je,
+		size: We,
+		"aria-describedby": ct
+	}, { nativeRequired: !1 }), C = S.size ?? "md", w = !S.disabled && !S.readOnly, dt = pe(), ft = S.id ?? `${dt}-input`, T = `${dt}-listbox`, E = l(null), D = l(null), pt = l(null), mt = fe((e) => {
+		E.current = e, r(rt, e);
+	}, [rt]), O = l(/* @__PURE__ */ new Map());
+	for (let e of m) O.current.set(e.value, e);
+	let k = (e) => m.find((t) => t.value === e) ?? O.current.get(e), [A, j] = e({
+		value: xe,
+		defaultValue: Se ?? (h ? [] : null),
+		onChange: Ce
+	}), M = h ? Array.isArray(A) ? A : [] : typeof A == "string" ? [A] : [], N = !h && typeof A == "string" ? A : null, P = N === null ? "" : k(N)?.label ?? N, [F, I] = e({
+		value: we,
+		defaultValue: Te ?? (h ? "" : P),
+		onChange: Ee
+	}), ht = M.length > 0 || v && !h && F.trim() !== "";
+	c(() => {
+		E.current?.setCustomValidity(S.required && !ht ? Le : "");
+	}, [
+		S.required,
+		ht,
+		Le
+	]);
+	let [L, R] = e({
+		value: De,
+		defaultValue: Oe,
+		onChange: ke
+	}), gt = L && w, [z, B] = u(!1), [V, H] = u(null), _t = Ae === !1 ? null : Ae ?? ce, vt = (e, t) => {
+		let n = [];
+		m.forEach((t, r) => {
+			(!_t || _t(t, e)) && n.push({
+				kind: "option",
+				key: t.value,
+				option: t,
+				id: `${T}-option-${r}`
+			});
+		});
+		let r = F.trim();
+		return Ne && t && r !== "" && !m.some((e) => o(e.label) === o(r)) && n.push({
+			kind: "create",
+			key: se,
+			text: r,
+			id: `${T}-create`
+		}), ue(n);
+	}, U = h || z, W = vt(U ? F : "", U), G = V === null ? -1 : W.findIndex((e) => e.key === V);
+	G >= 0 && !le(W[G]) && (G = -1), G === -1 && He && U && F.trim() !== "" && (G = a(W, -1, 1, !0));
+	let yt = _ != null && _ !== !1 && _ !== "", K = gt && (W.length > 0 || g || yt), bt = K && G >= 0 ? W[G].id : void 0, [xt, q] = u(""), St = W.filter((e) => e.kind === "option").length, Ct = W.find((e) => e.kind === "create"), J = K ? g ? f(je) : St > 0 ? Me(St) : Ct?.kind === "create" ? f(Pe(Ct.text)) : f(_) : "";
+	c(() => {
+		if (!J) return;
+		let e = window.setTimeout(() => q(J), ve);
+		return () => window.clearTimeout(e);
+	}, [J]), c(() => {
+		K || q("");
+	}, [K]);
+	let Y = l(we !== void 0 && !h && P !== "" ? null : P);
+	c(() => {
+		h || Y.current === P || (Y.current = P, !(v && P === "") && (z || I(P)));
+	}, [
+		h,
+		P,
+		z,
+		v,
+		I
+	]);
+	let X = (e) => {
+		(!e || w) && (R(e), e || H(null));
+	}, wt = t({
+		active: K,
+		elements: () => [D, pt],
+		onEscape: () => X(!1),
+		onOutsidePress: () => X(!1)
+	}), Z = (e) => {
+		if (!w) return;
+		let t = !h && F === P, n = h || z && !t;
+		t && B(!1);
+		let r = vt(n ? F : "", n), i = -1;
+		e === "first" ? i = a(r, -1, 1, !0) : e === "last" ? i = a(r, -1, -1, !0) : e === "selected" && (i = r.findIndex((e) => e.kind === "option" && !e.option.disabled && M.includes(e.option.value)), i < 0 && (i = a(r, -1, 1, !0))), H(i >= 0 ? r[i].key : null), R(!0);
+	}, Tt = (e) => {
+		let t = a(W, G, e, Ue);
+		H(t >= 0 ? W[t].key : null);
+	}, Q = (e, t) => {
+		if (h) {
+			let n = M.includes(e);
+			j(n ? M.filter((t) => t !== e) : [...M, e]), I(""), B(!1), H(e), q(n ? p.optionRemoved(t) : p.optionSelected(t));
+			return;
+		}
+		j(e), Y.current = t, I(t), B(!1), X(!1);
+	}, Et = (e) => {
+		if (!le(e)) return;
+		if (e.kind === "option") {
+			Q(e.option.value, e.option.label);
+			return;
+		}
+		let t = Ne?.(e.text);
+		if (typeof t == "string") {
+			O.current.set(t, {
+				value: t,
+				label: e.text
+			}), Q(t, e.text);
+			return;
+		}
+		B(!1), h ? I("") : X(!1);
+	}, Dt = (e) => {
+		w && (j(M.filter((t) => t !== e)), q(p.optionRemoved(k(e)?.label ?? e)));
+	}, $ = () => {
+		j(h ? [] : null), Y.current = "", I(""), B(!1), H(null);
+	}, Ot = (e) => {
+		at?.(e), I(e.target.value), B(!0), H(null), L || X(!0);
+	}, kt = (e) => {
+		if (ot?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing || S.disabled)) switch (e.key) {
+			case "ArrowDown":
+				if (!w) return;
+				e.preventDefault(), e.altKey ? K || Z("none") : K ? Tt(1) : Z(h ? "first" : "selected");
+				return;
+			case "ArrowUp":
+				if (!w) return;
+				e.preventDefault(), e.altKey ? X(!1) : K ? Tt(-1) : Z("last");
+				return;
+			case "Enter":
+				if (!K) {
+					h && v && F.trim() && w && (e.preventDefault(), e.repeat || At()), !h && w && he(jt);
+					return;
+				}
+				if (e.preventDefault(), e.repeat) return;
+				G >= 0 ? Et(W[G]) : h && v && F.trim() ? At() : (!h && v && F !== P && N !== null && j(null), X(!1));
+				return;
+			case "Escape":
+				if (K) return;
+				if (L) {
+					e.preventDefault(), R(!1);
+					return;
+				}
+				if (!w) return;
+				{
+					let t = h ? "" : P;
+					if (F !== t) {
+						e.preventDefault(), I(t), B(!1);
+						return;
+					}
+					Re && (N !== null || M.length > 0) && (e.preventDefault(), $());
+				}
+				return;
+			case "Home":
+			case "End":
+			case "ArrowLeft":
+			case "ArrowRight":
+				V !== null && H(null);
+				return;
+			case "Backspace":
+				h && w && !e.repeat && F === "" && M.length > 0 && Dt(M[M.length - 1]);
+				return;
+			default: return;
+		}
+	}, At = () => {
+		let e = F.trim(), t = m.find((t) => o(t.label) === o(e));
+		if (M.includes(t?.value ?? e)) {
+			I("");
+			return;
+		}
+		if (t) {
+			t.disabled || Q(t.value, t.label);
+			return;
+		}
+		O.current.set(e, {
+			value: e,
+			label: e
+		}), Q(e, e);
+	}, jt = () => {
+		if (!(h || F === P)) {
+			if (F.trim() === "") {
+				N === null ? F !== "" && I("") : $();
+				return;
+			}
+			if (v) {
+				N !== null && j(null);
+				return;
+			}
+			I(P);
+		}
+	}, Mt = (e) => {
+		st?.(e), X(!1), B(!1), jt();
+	}, Nt = l(() => {});
+	Nt.current = () => {
+		if (xe !== void 0) return;
+		let e = Se ?? (h ? [] : null);
+		j(e);
+		let t = typeof e == "string" ? k(e)?.label ?? e : "";
+		I(Te ?? (h ? "" : t)), X(!1), B(!1);
+	}, c(() => {
+		let e = E.current?.form;
+		if (!e) return;
+		let t = () => Nt.current();
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, []);
+	let Pt = (e) => {
+		let t = E.current;
+		if (!t || S.disabled) return;
+		let n = e.target;
+		D.current?.contains(n) && (n === t || n.closest("button, a") || (e.preventDefault(), t.focus()));
+	}, Ft = (e) => {
+		let t = e.target;
+		D.current?.contains(t) && !t.closest("button, a") && (L || Z("none"));
+	}, It = () => {
+		E.current?.focus(), K || L ? X(!1) : Z("none");
+	}, Lt = () => {
+		$(), q(p.cleared), E.current?.focus();
+	}, Rt = (e) => e.preventDefault(), zt = Fe && w && (M.length > 0 || F !== ""), Bt = h && M.length > 0, Vt = lt ?? (b ? void 0 : x && !x.isGroup ? x.labelId : void 0), Ht = y === void 0 ? null : h ? M.map((e) => /* @__PURE__ */ d("input", {
+		type: "hidden",
+		name: y,
+		value: e,
+		disabled: S.disabled
+	}, e)) : /* @__PURE__ */ d("input", {
+		type: "hidden",
+		name: y,
+		value: N ?? (v ? F : ""),
+		disabled: S.disabled
+	});
+	return /* @__PURE__ */ me("div", {
+		ref: D,
+		className: i(s.root, ge[C], Ze && s.fullWidth, h && s.multiple, Bt && s.hasChips, S.invalid && s.invalid, S.disabled && s.disabled, S.readOnly && !S.disabled && s.readOnly, et),
+		style: tt,
+		"data-size": C,
+		"data-state": K ? "open" : "closed",
+		onMouseDown: Pt,
+		onClick: Ft,
+		children: [
+			Bt && /* @__PURE__ */ d(ie, {
+				"aria-label": Ve,
+				size: _e[C],
+				tone: "primary",
+				variant: "soft",
+				disabled: S.disabled,
+				focusFallback: E,
+				className: s.chips,
+				children: M.map((e) => {
+					let t = k(e);
+					return /* @__PURE__ */ d(re, {
+						startIcon: t?.icon,
+						onRemove: w ? () => Dt(e) : void 0,
+						children: t?.label ?? e
+					}, e);
+				})
+			}),
+			/* @__PURE__ */ d("input", {
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "none",
+				spellCheck: !1,
+				...ut,
+				ref: mt,
+				id: ft,
+				type: "text",
+				role: "combobox",
+				"aria-label": b,
+				"aria-labelledby": lt,
+				"aria-expanded": K,
+				"aria-controls": T,
+				"aria-autocomplete": "list",
+				"aria-activedescendant": bt,
+				...S.ariaProps,
+				placeholder: Bt ? void 0 : it,
+				value: F,
+				disabled: S.disabled,
+				readOnly: S.readOnly,
+				className: i(s.input, $e),
+				onChange: Ot,
+				onKeyDown: kt,
+				onBlur: Mt
+			}),
+			/* @__PURE__ */ me("span", {
+				className: s.actions,
+				children: [zt && /* @__PURE__ */ d("button", {
+					type: "button",
+					className: s.iconButton,
+					"aria-label": Ie,
+					onMouseDown: Rt,
+					onClick: Lt,
+					children: /* @__PURE__ */ d(ne, {
+						size: C === "lg" ? "sm" : "xs",
+						strokeWidth: 2.5
+					})
+				}), /* @__PURE__ */ d("button", {
+					type: "button",
+					tabIndex: -1,
+					className: i(s.iconButton, s.toggle),
+					"aria-label": K ? Be : ze,
+					disabled: !w,
+					onMouseDown: Rt,
+					onClick: It,
+					children: /* @__PURE__ */ d(te, {
+						size: C === "sm" ? "sm" : "md",
+						className: s.chevron
+					})
+				})]
+			}),
+			Ht,
+			/* @__PURE__ */ d(ee, {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: xt
+			}),
+			K && /* @__PURE__ */ d(de, {
+				anchorRef: D,
+				positionerRef: pt,
+				layer: wt,
+				listboxId: T,
+				labelledBy: Vt,
+				label: b,
+				multiple: h,
+				size: C,
+				placement: Ye,
+				maxHeight: Xe,
+				items: W,
+				highlightedIndex: G,
+				isSelected: (e) => M.includes(e),
+				onHighlight: (e) => H(W[e]?.key ?? null),
+				onChoose: Et,
+				renderOption: be,
+				createLabel: Pe,
+				loading: g,
+				loadingMessage: je,
+				emptyMessage: _,
+				container: Qe
+			})
+		]
+	});
+};
+//#endregion
+export { ye as Combobox, ce as defaultComboboxFilter };

package/dist/components/forms/Combobox/Combobox.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1tvvc_31`,t=`_fullWidth_1tvvc_103`,n=`_hasChips_1tvvc_115`,r=`_sm_1tvvc_125`,i=`_md_1tvvc_143`,a=`_lg_1tvvc_161`,o=`_disabled_1tvvc_181`,s=`_readOnly_1tvvc_181`,c=`_invalid_1tvvc_181`,l=`_chips_1tvvc_247`,u=`_input_1tvvc_261`,d=`_multiple_1tvvc_303`,f=`_actions_1tvvc_359`,p=`_iconButton_1tvvc_375`,m=`_chevron_1tvvc_471`,h=`_positioner_1tvvc_499`,g=`_popup_1tvvc_511`,_=`_listSm_1tvvc_617`,v=`_listMd_1tvvc_631`,y=`_listLg_1tvvc_645`,b=`_listbox_1tvvc_659`,x=`_option_1tvvc_673`,S=`_optionLabel_1tvvc_731`,C=`_indicator_1tvvc_749`,w=`_optionIcon_1tvvc_751`,T=`_optionDescription_1tvvc_789`,E=`_optionText_1tvvc_797`,D=`_createOption_1tvvc_833`,O=`_group_1tvvc_845`,k=`_groupLabel_1tvvc_871`,A=`_statusRow_1tvvc_901`,j={root:e,fullWidth:t,hasChips:n,sm:r,md:i,lg:a,disabled:o,readOnly:s,invalid:c,chips:l,input:u,multiple:d,actions:f,iconButton:p,chevron:m,positioner:h,popup:g,"combobox-in":`_combobox-in_1tvvc_1`,listSm:_,listMd:v,listLg:y,listbox:b,option:x,optionLabel:S,indicator:C,optionIcon:w,optionDescription:T,optionText:E,createOption:D,group:O,groupLabel:k,statusRow:A};exports.actions=f,exports.chevron=m,exports.chips=l,exports.createOption=D,exports.default=j,exports.disabled=o,exports.fullWidth=t,exports.group=O,exports.groupLabel=k,exports.hasChips=n,exports.iconButton=p,exports.indicator=C,exports.input=u,exports.invalid=c,exports.lg=a,exports.listLg=y,exports.listMd=v,exports.listSm=_,exports.listbox=b,exports.md=i,exports.multiple=d,exports.option=x,exports.optionDescription=T,exports.optionIcon=w,exports.optionLabel=S,exports.optionText=E,exports.popup=g,exports.positioner=h,exports.readOnly=s,exports.root=e,exports.sm=r,exports.statusRow=A;

package/dist/components/forms/Combobox/Combobox.module.css.mjs

@@ -0,0 +1,37 @@
+//#region src/components/forms/Combobox/Combobox.module.css
+var e = "_root_1tvvc_31", t = "_fullWidth_1tvvc_103", n = "_hasChips_1tvvc_115", r = "_sm_1tvvc_125", i = "_md_1tvvc_143", a = "_lg_1tvvc_161", o = "_disabled_1tvvc_181", s = "_readOnly_1tvvc_181", c = "_invalid_1tvvc_181", l = "_chips_1tvvc_247", u = "_input_1tvvc_261", d = "_multiple_1tvvc_303", f = "_actions_1tvvc_359", p = "_iconButton_1tvvc_375", m = "_chevron_1tvvc_471", h = "_positioner_1tvvc_499", g = "_popup_1tvvc_511", _ = "_listSm_1tvvc_617", v = "_listMd_1tvvc_631", y = "_listLg_1tvvc_645", b = "_listbox_1tvvc_659", x = "_option_1tvvc_673", S = "_optionLabel_1tvvc_731", C = "_indicator_1tvvc_749", w = "_optionIcon_1tvvc_751", T = "_optionDescription_1tvvc_789", E = "_optionText_1tvvc_797", D = "_createOption_1tvvc_833", O = "_group_1tvvc_845", k = "_groupLabel_1tvvc_871", A = "_statusRow_1tvvc_901", j = {
+	root: e,
+	fullWidth: t,
+	hasChips: n,
+	sm: r,
+	md: i,
+	lg: a,
+	disabled: o,
+	readOnly: s,
+	invalid: c,
+	chips: l,
+	input: u,
+	multiple: d,
+	actions: f,
+	iconButton: p,
+	chevron: m,
+	positioner: h,
+	popup: g,
+	"combobox-in": "_combobox-in_1tvvc_1",
+	listSm: _,
+	listMd: v,
+	listLg: y,
+	listbox: b,
+	option: x,
+	optionLabel: S,
+	indicator: C,
+	optionIcon: w,
+	optionDescription: T,
+	optionText: E,
+	createOption: D,
+	group: O,
+	groupLabel: k,
+	statusRow: A
+};
+//#endregion
+export { f as actions, m as chevron, l as chips, D as createOption, j as default, o as disabled, t as fullWidth, O as group, k as groupLabel, n as hasChips, p as iconButton, C as indicator, u as input, c as invalid, a as lg, y as listLg, v as listMd, _ as listSm, b as listbox, i as md, d as multiple, x as option, T as optionDescription, w as optionIcon, S as optionLabel, E as optionText, g as popup, h as positioner, s as readOnly, e as root, r as sm, A as statusRow };

package/dist/components/forms/Combobox/ComboboxPopup.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useOverlayLayer.cjs.js"),t=require("../../../hooks/useFloatingPosition.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/Portal/Portal.cjs.js"),i=require("../../feedback/Spinner/Spinner.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("./comboboxUtils.cjs.js"),s=require("./Combobox.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={sm:s.default.listSm,md:s.default.listMd,lg:s.default.listLg},d={x:NaN,y:NaN};function f(e){return(0,l.jsx)(r.Portal,{container:e.container,children:(0,l.jsx)(p,{...e})})}function p({anchorRef:r,positionerRef:f,layer:p,listboxId:m,labelledBy:h,label:g,multiple:_,size:v,placement:y,maxHeight:b,items:x,highlightedIndex:S,isSelected:C,onHighlight:w,onChoose:T,renderOption:E,createLabel:D,loading:O,loadingMessage:k,emptyMessage:A}){let j=(0,c.useRef)(null),[M,N]=(0,c.useState)(`ltr`),[P,F]=(0,c.useState)(void 0);(0,c.useLayoutEffect)(()=>{let e=r.current;if(!e)return;N(getComputedStyle(e).direction===`rtl`?`rtl`:`ltr`);let t=()=>F(e.getBoundingClientRect().width);if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[r]);let I=t.useFloatingPosition(r,f,{open:!0,placement:y,offset:6}),L=I.placement.split(`-`)[0],R=S>=0?x[S]?.id:void 0;(0,c.useLayoutEffect)(()=>{let e=j.current;if(!e||!R)return;let t=document.getElementById(R);if(!t||!e.contains(t))return;let n=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=parseFloat(getComputedStyle(e).paddingTop)||0;r.top<n.top+i?e.scrollTop-=n.top+i-r.top:r.bottom>n.bottom-i&&(e.scrollTop+=r.bottom-(n.bottom-i))},[R,I.isPositioned]);let z=o.groupItems(x),B=new Map(x.map((e,t)=>[e.key,t])),V=!O&&x.length===0&&A!=null&&A!==!1,H=(e,t,n)=>{if(e.pointerType===`touch`)return;let r=d.x!==e.clientX||d.y!==e.clientY;d.x=e.clientX,d.y=e.clientY,r&&n&&t!==S&&w(t)},U=e=>{let t=B.get(e.key)??-1,r=t===S;if(e.kind===`create`)return(0,l.jsxs)(`div`,{id:e.id,role:`option`,"aria-selected":!1,"data-highlighted":r||void 0,className:n.cx(s.default.option,s.default.createOption),onPointerMove:e=>H(e,t,!0),onClick:()=>T(e),children:[(0,l.jsx)(`span`,{className:s.default.indicator,"aria-hidden":`true`,children:(0,l.jsx)(a.PlusIcon,{size:`sm`,strokeWidth:2.5})}),(0,l.jsx)(`span`,{className:s.default.optionText,children:(0,l.jsx)(`span`,{className:s.default.optionLabel,children:D(e.text)})})]},e.key);let{option:i}=e,o=C(i.value),c=!!i.disabled,u=`${e.id}-label`,d=`${e.id}-description`,f=E?.(i,{selected:o,highlighted:r,disabled:c});return(0,l.jsxs)(`div`,{id:e.id,role:`option`,"aria-selected":o,"aria-disabled":c||void 0,"aria-labelledby":f===void 0?u:void 0,"aria-describedby":f===void 0&&i.description?d:void 0,"data-highlighted":r||void 0,"data-selected":o||void 0,"data-disabled":c||void 0,className:s.default.option,onPointerMove:e=>H(e,t,!c),onClick:()=>{c||T(e)},children:[(0,l.jsx)(`span`,{className:s.default.indicator,"aria-hidden":`true`,children:o&&(0,l.jsx)(a.CheckIcon,{size:`sm`,strokeWidth:3})}),f===void 0?(0,l.jsxs)(l.Fragment,{children:[i.icon!=null&&(0,l.jsx)(`span`,{className:s.default.optionIcon,"aria-hidden":`true`,children:i.icon}),(0,l.jsxs)(`span`,{className:s.default.optionText,children:[(0,l.jsx)(`span`,{id:u,className:s.default.optionLabel,children:i.label}),i.description&&(0,l.jsx)(`span`,{id:d,className:s.default.optionDescription,children:i.description})]})]}):(0,l.jsx)(`span`,{className:s.default.optionText,children:f})]},e.key)},W=b===void 0?void 0:{"--_max-h":typeof b==`number`?`${b}px`:b},G=e=>e.preventDefault();return(0,l.jsx)(e.OverlayLayerProvider,{layer:p,children:(0,l.jsx)(`div`,{ref:f,className:s.default.positioner,style:{...I.style,minInlineSize:P},dir:M,children:(0,l.jsxs)(`div`,{ref:j,className:n.cx(s.default.popup,u[v]),style:W,"data-side":L,"data-state":`open`,onMouseDown:G,children:[(0,l.jsx)(`div`,{id:m,role:`listbox`,"aria-labelledby":h,"aria-label":h?void 0:g,"aria-multiselectable":_||void 0,"aria-busy":O||void 0,className:s.default.listbox,children:z.map((e,t)=>e.group===void 0?(0,l.jsx)(c.Fragment,{children:e.items.map(U)},`section-${t}`):(0,l.jsxs)(`div`,{role:`group`,"aria-labelledby":`${m}-group-${t}`,className:s.default.group,children:[(0,l.jsx)(`div`,{id:`${m}-group-${t}`,role:`presentation`,className:s.default.groupLabel,children:e.group}),e.items.map(U)]},`group-${e.group}`))}),O&&(0,l.jsxs)(`div`,{className:s.default.statusRow,children:[(0,l.jsx)(i.Spinner,{decorative:!0,size:v===`lg`?`md`:`sm`,tone:`primary`}),(0,l.jsx)(`span`,{children:k})]}),V&&(0,l.jsx)(`div`,{className:s.default.statusRow,children:A})]})})})}exports.ComboboxPopup=f;

package/dist/components/forms/Combobox/ComboboxPopup.d.ts

@@ -0,0 +1,40 @@
+import { CSSProperties, ReactNode, RefObject } from 'react';
+import { OverlayLayer } from '../../../hooks/useOverlayLayer';
+import { Placement, Size } from '../../../types/common';
+import { ComboboxItem, ComboboxOption } from './comboboxUtils';
+/** State passed to `renderOption`. */
+export interface ComboboxOptionState {
+    /** The option is selected (shows the check mark). */
+    selected: boolean;
+    /** The option has visual focus (`aria-activedescendant` points at it). */
+    highlighted: boolean;
+    /** The option can't be chosen. */
+    disabled: boolean;
+}
+/** @internal Props of the floating listbox surface. */
+export interface ComboboxPopupProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    positionerRef: RefObject<HTMLDivElement | null>;
+    layer: OverlayLayer;
+    listboxId: string;
+    /** Accessible name of the listbox (an id list or a string). */
+    labelledBy?: string;
+    label?: string;
+    multiple: boolean;
+    size: Size;
+    placement: Placement;
+    maxHeight?: CSSProperties["maxHeight"];
+    items: ComboboxItem[];
+    highlightedIndex: number;
+    isSelected: (value: string) => boolean;
+    onHighlight: (index: number) => void;
+    onChoose: (item: ComboboxItem) => void;
+    renderOption?: (option: ComboboxOption, state: ComboboxOptionState) => ReactNode;
+    createLabel: (text: string) => ReactNode;
+    loading: boolean;
+    loadingMessage: ReactNode;
+    emptyMessage: ReactNode;
+    container?: HTMLElement | null;
+}
+/** @internal The floating listbox: portal, positioning, layer, options. */
+export declare function ComboboxPopup(props: ComboboxPopupProps): import("react").JSX.Element;

package/dist/components/forms/Combobox/ComboboxPopup.mjs

@@ -0,0 +1,183 @@
+import { OverlayLayerProvider as e } from "../../../hooks/useOverlayLayer.mjs";
+import { useFloatingPosition as t } from "../../../hooks/useFloatingPosition.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { Portal as r } from "../../utilities/Portal/Portal.mjs";
+import { Spinner as i } from "../../feedback/Spinner/Spinner.mjs";
+import { CheckIcon as a, PlusIcon as o } from "../../primitives/Icon/icons.mjs";
+import { groupItems as s } from "./comboboxUtils.mjs";
+import c from "./Combobox.module.css.mjs";
+import { Fragment as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/forms/Combobox/ComboboxPopup.tsx
+var g = {
+	sm: c.listSm,
+	md: c.listMd,
+	lg: c.listLg
+}, _ = {
+	x: NaN,
+	y: NaN
+};
+function v(e) {
+	return /* @__PURE__ */ m(r, {
+		container: e.container,
+		children: /* @__PURE__ */ m(y, { ...e })
+	});
+}
+function y({ anchorRef: r, positionerRef: v, layer: y, listboxId: b, labelledBy: x, label: S, multiple: C, size: w, placement: T, maxHeight: E, items: D, highlightedIndex: O, isSelected: k, onHighlight: A, onChoose: j, renderOption: M, createLabel: N, loading: P, loadingMessage: F, emptyMessage: I }) {
+	let L = d(null), [R, z] = f("ltr"), [B, V] = f(void 0);
+	u(() => {
+		let e = r.current;
+		if (!e) return;
+		z(getComputedStyle(e).direction === "rtl" ? "rtl" : "ltr");
+		let t = () => V(e.getBoundingClientRect().width);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [r]);
+	let H = t(r, v, {
+		open: !0,
+		placement: T,
+		offset: 6
+	}), U = H.placement.split("-")[0], W = O >= 0 ? D[O]?.id : void 0;
+	u(() => {
+		let e = L.current;
+		if (!e || !W) return;
+		let t = document.getElementById(W);
+		if (!t || !e.contains(t)) return;
+		let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = parseFloat(getComputedStyle(e).paddingTop) || 0;
+		r.top < n.top + i ? e.scrollTop -= n.top + i - r.top : r.bottom > n.bottom - i && (e.scrollTop += r.bottom - (n.bottom - i));
+	}, [W, H.isPositioned]);
+	let G = s(D), K = new Map(D.map((e, t) => [e.key, t])), q = !P && D.length === 0 && I != null && I !== !1, J = (e, t, n) => {
+		if (e.pointerType === "touch") return;
+		let r = _.x !== e.clientX || _.y !== e.clientY;
+		_.x = e.clientX, _.y = e.clientY, r && n && t !== O && A(t);
+	}, Y = (e) => {
+		let t = K.get(e.key) ?? -1, r = t === O;
+		if (e.kind === "create") return /* @__PURE__ */ h("div", {
+			id: e.id,
+			role: "option",
+			"aria-selected": !1,
+			"data-highlighted": r || void 0,
+			className: n(c.option, c.createOption),
+			onPointerMove: (e) => J(e, t, !0),
+			onClick: () => j(e),
+			children: [/* @__PURE__ */ m("span", {
+				className: c.indicator,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ m(o, {
+					size: "sm",
+					strokeWidth: 2.5
+				})
+			}), /* @__PURE__ */ m("span", {
+				className: c.optionText,
+				children: /* @__PURE__ */ m("span", {
+					className: c.optionLabel,
+					children: N(e.text)
+				})
+			})]
+		}, e.key);
+		let { option: i } = e, s = k(i.value), l = !!i.disabled, u = `${e.id}-label`, d = `${e.id}-description`, f = M?.(i, {
+			selected: s,
+			highlighted: r,
+			disabled: l
+		});
+		return /* @__PURE__ */ h("div", {
+			id: e.id,
+			role: "option",
+			"aria-selected": s,
+			"aria-disabled": l || void 0,
+			"aria-labelledby": f === void 0 ? u : void 0,
+			"aria-describedby": f === void 0 && i.description ? d : void 0,
+			"data-highlighted": r || void 0,
+			"data-selected": s || void 0,
+			"data-disabled": l || void 0,
+			className: c.option,
+			onPointerMove: (e) => J(e, t, !l),
+			onClick: () => {
+				l || j(e);
+			},
+			children: [/* @__PURE__ */ m("span", {
+				className: c.indicator,
+				"aria-hidden": "true",
+				children: s && /* @__PURE__ */ m(a, {
+					size: "sm",
+					strokeWidth: 3
+				})
+			}), f === void 0 ? /* @__PURE__ */ h(p, { children: [i.icon != null && /* @__PURE__ */ m("span", {
+				className: c.optionIcon,
+				"aria-hidden": "true",
+				children: i.icon
+			}), /* @__PURE__ */ h("span", {
+				className: c.optionText,
+				children: [/* @__PURE__ */ m("span", {
+					id: u,
+					className: c.optionLabel,
+					children: i.label
+				}), i.description && /* @__PURE__ */ m("span", {
+					id: d,
+					className: c.optionDescription,
+					children: i.description
+				})]
+			})] }) : /* @__PURE__ */ m("span", {
+				className: c.optionText,
+				children: f
+			})]
+		}, e.key);
+	}, X = E === void 0 ? void 0 : { "--_max-h": typeof E == "number" ? `${E}px` : E }, Z = (e) => e.preventDefault();
+	return /* @__PURE__ */ m(e, {
+		layer: y,
+		children: /* @__PURE__ */ m("div", {
+			ref: v,
+			className: c.positioner,
+			style: {
+				...H.style,
+				minInlineSize: B
+			},
+			dir: R,
+			children: /* @__PURE__ */ h("div", {
+				ref: L,
+				className: n(c.popup, g[w]),
+				style: X,
+				"data-side": U,
+				"data-state": "open",
+				onMouseDown: Z,
+				children: [
+					/* @__PURE__ */ m("div", {
+						id: b,
+						role: "listbox",
+						"aria-labelledby": x,
+						"aria-label": x ? void 0 : S,
+						"aria-multiselectable": C || void 0,
+						"aria-busy": P || void 0,
+						className: c.listbox,
+						children: G.map((e, t) => e.group === void 0 ? /* @__PURE__ */ m(l, { children: e.items.map(Y) }, `section-${t}`) : /* @__PURE__ */ h("div", {
+							role: "group",
+							"aria-labelledby": `${b}-group-${t}`,
+							className: c.group,
+							children: [/* @__PURE__ */ m("div", {
+								id: `${b}-group-${t}`,
+								role: "presentation",
+								className: c.groupLabel,
+								children: e.group
+							}), e.items.map(Y)]
+						}, `group-${e.group}`))
+					}),
+					P && /* @__PURE__ */ h("div", {
+						className: c.statusRow,
+						children: [/* @__PURE__ */ m(i, {
+							decorative: !0,
+							size: w === "lg" ? "md" : "sm",
+							tone: "primary"
+						}), /* @__PURE__ */ m("span", { children: F })]
+					}),
+					q && /* @__PURE__ */ m("div", {
+						className: c.statusRow,
+						children: I
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { v as ComboboxPopup };

package/dist/components/forms/Combobox/comboboxUtils.cjs.js

@@ -0,0 +1 @@
+function e(e){return e.normalize(`NFD`).replace(/[̀-ͯ]/g,``).toLowerCase().trim()}var t=(t,n)=>{let r=e(n);return!r||e(t.label).includes(r)},n=`\0create`;function r(e){let t=[],n=[],r=new Map;for(let i of e){if(i.kind===`create`){n.push(i);continue}let e=i.option.group;if(e===void 0||e===``)t.push(i);else{let t=r.get(e);t?t.push(i):r.set(e,[i])}}let i=[];return t.length&&i.push({group:void 0,items:t}),r.forEach((e,t)=>i.push({group:t,items:e})),n.length&&i.push({group:void 0,items:n}),i}function i(e){return r(e).flatMap(e=>e.items)}function a(e){return!!e&&(e.kind===`create`||!e.option.disabled)}function o(e,t,n,r){let i=e.length;if(i===0)return-1;let o=t;for(let s=0;s<i;s+=1){let c=o+n;if(t===-1&&s===0&&(c=n===1?0:i-1),c<0||c>=i){if(!r)return t;c=(c+i)%i}if(a(e[c]))return c;o=c}return t}exports.CREATE_KEY=n,exports.defaultComboboxFilter=t,exports.findEnabled=o,exports.groupItems=r,exports.isEnabled=a,exports.normalizeText=e,exports.orderItems=i;