@box-kite/react 2.3.1 → 2.4.1

package/components/combobox.mjs

@@ -83,7 +83,7 @@ var S;
 var C = S;
 //#endregion
 //#region src/components/combobox/comboboxChips.tsx
-function ee(e) {
+function w(e) {
 	let { selection: t, def: n, display: r, removeLabel: i, onRemove: a, disabled: o, variant: s } = e;
 	return /* @__PURE__ */ b(y, { children: t.map((e) => {
 		let t = C.labelOf(n, e);
@@ -124,7 +124,7 @@ function ee(e) {
 }
 //#endregion
 //#region src/utils/virtual/virtualUtils.ts
-var w;
+var T;
 (function(e) {
 	let t = e.DEFAULT_OVERSCAN = 4, n = e.DEFAULT_THRESHOLD = 100;
 	e.DEFAULT_ITEM_HEIGHT = 36, e.DEFAULT_VIEW_HEIGHT = 248;
@@ -152,11 +152,11 @@ var w;
 		};
 	}
 	e.windowFor = a;
-})(w ||= {});
-var T = w;
+})(T ||= {});
+var E = T;
 //#endregion
 //#region src/react/hooks/useVirtualization.ts
-function te(e) {
+function ee(e) {
 	let { count: n, scrollerRef: i, itemHeight: a, viewHeight: o, overscan: s, threshold: c, enabled: l, activeIndex: u } = e, [d, f] = v({
 		top: 0,
 		at: -1
@@ -165,7 +165,7 @@ function te(e) {
 		viewHeight: 0
 	}), g = _(null), y = h((e) => {
 		g.current = e;
-	}, []), b = T.shouldVirtualize(n, l, c), x = r(() => {
+	}, []), b = E.shouldVirtualize(n, l, c), x = r(() => {
 		let e = i.current, t = g.current;
 		if (!e || !t) return;
 		let n = t.children, r = n[0], a = n[1], o = a ? a.offsetTop - r.offsetTop : r?.offsetHeight ?? 0, s = e.clientHeight;
@@ -191,10 +191,10 @@ function te(e) {
 			top: e.currentTarget.scrollTop,
 			at: u ?? -1
 		});
-	}), C = T.windowFor({
+	}), C = E.windowFor({
 		count: n,
-		itemHeight: a ?? (p.itemHeight > 0 ? p.itemHeight : T.DEFAULT_ITEM_HEIGHT),
-		viewHeight: o ?? (p.viewHeight > 0 ? p.viewHeight : T.DEFAULT_VIEW_HEIGHT),
+		itemHeight: a ?? (p.itemHeight > 0 ? p.itemHeight : E.DEFAULT_ITEM_HEIGHT),
+		viewHeight: o ?? (p.viewHeight > 0 ? p.viewHeight : E.DEFAULT_VIEW_HEIGHT),
 		scrollTop: d.top,
 		overscan: s,
 		activeIndex: u === d.at ? -1 : u
@@ -216,29 +216,29 @@ function te(e) {
 }
 //#endregion
 //#region src/components/combobox/comboboxListbox.tsx
-function ne(e, t, n, r) {
+function te(e, t, n, r) {
 	return e ? {
 		role: "listbox",
-		"aria-labelledby": r,
+		...r,
 		...t ? { "aria-multiselectable": !0 } : {},
 		...n ? { "aria-busy": !0 } : {}
 	} : { role: "status" };
 }
-function re(e) {
-	let { presence: t, rows: r, def: i, display: a, selection: o, multiple: s, activeIndex: c, optionId: l, rowRef: u, onSelect: p } = e, { anchorRef: m, popupRef: g, listboxId: y, labelledBy: S, loading: ee, loadingText: w, emptyText: T, createLabel: re, variant: E, itemsProps: D } = e, { virtualize: O } = e, { present: k, ref: ie, props: ae } = t, A = (e) => C.keyOf(i, e), [j, oe] = v(!1), M = h((e) => oe(e === "top"), []), N = _(null), se = h((e) => {
-		N.current = e, ie(e);
-	}, [ie]), ce = typeof O == "object" ? O : {}, { virtualized: P, startIndex: F, endIndex: le, offsetY: ue, totalHeight: de, contentRef: fe, onScroll: pe } = te({
+function ne(e) {
+	let { presence: t, rows: r, def: i, display: a, selection: o, multiple: s, activeIndex: c, optionId: l, rowRef: u, onSelect: p } = e, { anchorRef: m, popupRef: g, listboxId: y, name: S, loading: w, loadingText: T, emptyText: E, createLabel: ne, variant: D, itemsProps: O } = e, { virtualize: k } = e, { present: A, ref: re, props: ie } = t, j = (e) => C.keyOf(i, e), [M, ae] = v(!1), N = h((e) => ae(e === "top"), []), P = _(null), oe = h((e) => {
+		P.current = e, re(e);
+	}, [re]), se = typeof k == "object" ? k : {}, { virtualized: F, startIndex: I, endIndex: ce, offsetY: le, totalHeight: ue, contentRef: de, onScroll: fe } = ee({
 		count: r.length,
-		scrollerRef: N,
-		enabled: typeof O == "boolean" ? O : void 0,
+		scrollerRef: P,
+		enabled: typeof k == "boolean" ? k : void 0,
 		activeIndex: c,
-		...ce
-	}), I = P ? r.slice(F, le) : r, L = (e, t) => {
-		let n = P ? F + t : t, s = e.kind === "option" && C.isSelected(o, e.row, A), f = C.isRowDisabled(i, e);
+		...se
+	}), L = F ? r.slice(I, ce) : r, R = (e, t) => {
+		let n = F ? I + t : t, s = e.kind === "option" && C.isSelected(o, e.row, j), f = C.isRowDisabled(i, e);
 		return /* @__PURE__ */ b(d, {
 			ref: u(n),
 			component: "combobox.item",
-			variant: [E, {
+			variant: [D, {
 				create: e.kind === "create",
 				highlighted: n === c
 			}],
@@ -248,7 +248,7 @@ function re(e) {
 			id: l(n),
 			props: {
 				role: "option",
-				...P ? {
+				...F ? {
 					"aria-setsize": r.length,
 					"aria-posinset": n + 1
 				} : {},
@@ -256,8 +256,8 @@ function re(e) {
 				onMouseDown: (e) => e.preventDefault(),
 				onClick: (e) => !f && p(n, e)
 			},
-			children: e.kind === "create" ? re(e.query) : a?.(e.row) ?? C.labelOf(i, e.row)
-		}, e.kind === "option" ? A(e.row) : "create");
+			children: e.kind === "create" ? ne(e.query) : a?.(e.row) ?? C.labelOf(i, e.row)
+		}, e.kind === "option" ? j(e.row) : "create");
 	};
 	return /* @__PURE__ */ b(f, {
 		ref: g,
@@ -266,222 +266,233 @@ function re(e) {
 		align: "start",
 		offset: .5,
 		matchWidth: !0,
-		onSideChange: M,
+		onSideChange: N,
 		children: /* @__PURE__ */ x(n, {
-			ref: se,
+			ref: oe,
 			component: "combobox.items",
-			...D,
-			variant: [E, {
-				closed: !k && !j,
-				closedUp: !k && j
+			...O,
+			variant: [D, {
+				closed: !A && !M,
+				closedUp: !A && M
 			}],
 			id: y,
 			props: {
-				...ne(r.length > 0, s, ee === !0, S),
-				...ae,
-				...P ? { onScroll: pe } : {}
+				...te(r.length > 0, s, w === !0, S),
+				...ie,
+				...F ? { onScroll: fe } : {}
 			},
-			children: [P ? /* @__PURE__ */ b(n, {
-				ref: fe,
+			children: [F ? /* @__PURE__ */ b(n, {
+				ref: de,
 				component: "combobox.window",
-				variant: E,
+				variant: D,
 				style: {
-					height: de,
-					paddingTop: ue
+					height: ue,
+					paddingTop: le
 				},
-				children: I.map(L)
-			}) : I.map(L), r.length === 0 && /* @__PURE__ */ b(n, {
+				children: L.map(R)
+			}) : L.map(R), r.length === 0 && /* @__PURE__ */ b(n, {
 				component: "combobox.message",
-				variant: E,
-				children: ee ? w : T
+				variant: D,
+				children: w ? T : E
 			})]
 		})
 	});
 }
 //#endregion
 //#region src/components/combobox.tsx
-var E = /* @__PURE__ */ new Set([
+var D = /* @__PURE__ */ new Set([
 	" ",
 	"Home",
 	"End",
 	"ArrowLeft",
 	"ArrowRight"
 ]);
-function D(f, m) {
-	let { data: S, def: w, label: T, labelProps: te, placeholder: ne, name: D, disabled: O, props: k, itemsProps: ie, hideIcon: ae, filter: A = C.filterRows, loading: j, loadingText: oe = "Loading...", emptyText: M = "No results", createRow: N, createLabel: se = (e) => `Create "${e}"`, removeLabel: ce = (e) => `Remove ${e}`, virtualize: P, query: F, defaultQuery: le, onQueryChange: ue, open: de, defaultOpen: fe, onOpenChange: pe, multiple: I = !1, value: L, defaultValue: me, onValueChange: he, ...R } = f, z = s("combobox"), B = R.id ?? `${z}-field`, ge = `${z}-listbox`, V = `${z}-label`, H = T != null && T !== !1, _e = h((e) => `${z}-option-${e}`, [z]), U = _(null), ve = _(null), ye = _(null), be = h((t) => {
-		ye.current = t, e(m, t);
-	}, [m]), xe = r((e, t) => {
-		he?.(I ? e : e[0] ?? null, t);
-	}), Se = g(() => L === void 0 ? void 0 : C.toArray(L), [L]), [W, Ce] = c({
-		value: Se,
-		defaultValue: () => C.toArray(me),
-		onChange: xe,
+function O(f, m) {
+	let { data: S, def: T, label: E, labelProps: ee, placeholder: te, name: O, disabled: k, props: A, itemsProps: re, hideIcon: ie, filter: j = C.filterRows, loading: M, loadingText: ae = "Loading...", emptyText: N = "No results", createRow: P, createLabel: oe = (e) => `Create "${e}"`, removeLabel: se = (e) => `Remove ${e}`, virtualize: F, query: I, defaultQuery: ce, onQueryChange: le, open: ue, defaultOpen: de, onOpenChange: fe, multiple: L = !1, value: R, defaultValue: pe, onValueChange: me, id: he, ...z } = f, B = s("combobox"), ge = he ?? A?.id ?? `${B}-field`, _e = `${B}-listbox`, ve = `${B}-label`, ye = E != null && E !== !1, be = h((e) => `${B}-option-${e}`, [B]), V = _(null), xe = _(null), H = _(null), Se = h((t) => {
+		H.current = t, e(m, t);
+	}, [m]), Ce = r((e, t) => {
+		me?.(L ? e : e[0] ?? null, t);
+	}), we = g(() => R === void 0 ? void 0 : C.toArray(R), [R]), [U, Te] = c({
+		value: we,
+		defaultValue: () => C.toArray(pe),
+		onChange: Ce,
 		interaction: {
 			component: "combobox",
 			type: "valueChange",
 			content: ["value"]
 		}
-	}), [G, K] = c({
-		value: de,
-		defaultValue: fe ?? !1,
-		onChange: pe,
+	}), [W, G] = c({
+		value: ue,
+		defaultValue: de ?? !1,
+		onChange: fe,
 		interaction: {
 			component: "combobox",
 			type: "openChange"
 		}
-	}), [we, q] = i({
-		value: F,
-		defaultValue: le ?? "",
-		onChange: ue
-	}), [Te, J] = v(!1), Y = h((e) => C.keyOf(w, e), [w]), Ee = I || W[0] === void 0 ? "" : C.labelOf(w, W[0]), X = Te || we !== "" ? we : Ee, Z = g(() => C.rowsFor({
+	}), [Ee, K] = i({
+		value: I,
+		defaultValue: ce ?? "",
+		onChange: le
+	}), [De, q] = v(!1), J = h((e) => C.keyOf(T, e), [T]), Oe = L || U[0] === void 0 ? "" : C.labelOf(T, U[0]), Y = De || Ee !== "" ? Ee : Oe, X = g(() => C.rowsFor({
 		data: S,
-		def: w,
-		query: X,
-		filter: A,
-		typed: Te,
-		createRow: N
+		def: T,
+		query: Y,
+		filter: j,
+		typed: De,
+		createRow: P
 	}), [
 		S,
-		w,
-		X,
-		A,
-		Te,
-		N
-	]), De = h((e) => Z[e] ? C.isRowDisabled(w, Z[e]) : !1, [Z, w]), Oe = r((e, t) => {
-		K(!1, {
+		T,
+		Y,
+		j,
+		De,
+		P
+	]), ke = h((e) => X[e] ? C.isRowDisabled(T, X[e]) : !1, [X, T]), Ae = r((e, t) => {
+		G(!1, {
 			reason: e,
 			event: t
-		}), e !== "escape" && (J(!1), q("", {
+		}), e !== "escape" && (q(!1), K("", {
 			reason: "close",
 			event: t
 		}));
-	}), Q = r((e, t) => {
-		let n = Z[e];
-		if (!n || De(e)) return;
-		let r = n.kind === "create" ? N?.(n.query) : n.row;
+	}), Z = r((e, t) => {
+		let n = X[e];
+		if (!n || ke(e)) return;
+		let r = n.kind === "create" ? P?.(n.query) : n.row;
 		if (r == null) return;
-		let i = C.isSelected(W, r, Y), a = n.kind === "create" ? "create" : i && I ? "deselect" : "select";
-		Ce(C.toggle(W, r, I, Y), {
+		let i = C.isSelected(U, r, J), a = n.kind === "create" ? "create" : i && L ? "deselect" : "select";
+		Te(C.toggle(U, r, L, J), {
 			reason: a,
 			event: t
-		}), J(!1), q("", {
+		}), q(!1), K("", {
 			reason: "select",
 			event: t
-		}), I || K(!1, {
+		}), L || G(!1, {
 			reason: "select",
 			event: t
 		});
-	}), ke = o({
-		count: Z.length,
+	}), je = o({
+		count: X.length,
 		focusItems: !1,
 		defaultActiveIndex: -1,
-		isDisabled: De,
-		onSelect: Q
-	}), { activeIndex: $, setActiveIndex: Ae, activeItem: je } = ke;
+		isDisabled: ke,
+		onSelect: Z
+	}), { activeIndex: Q, setActiveIndex: Me, activeItem: Ne } = je;
 	a({
-		enabled: G,
-		inside: [U, ve],
-		onDismiss: (e, t) => Oe(e === "escape" ? "escape" : "outside-pointer", t)
+		enabled: W,
+		inside: [V, xe],
+		onDismiss: (e, t) => Ae(e === "escape" ? "escape" : "outside-pointer", t)
 	}), t(() => {
-		!G || $ === -1 || je()?.scrollIntoView?.({ block: "nearest" });
+		!W || Q === -1 || Ne()?.scrollIntoView?.({ block: "nearest" });
+	}, [
+		W,
+		Q,
+		Ne
+	]);
+	let $ = ye ? ve : A?.["aria-labelledby"], Pe = A?.["aria-label"], [Fe, Ie] = v();
+	t(() => {
+		if (!W || $ || Pe) return;
+		let e = Array.from(H.current?.labels ?? [], (e) => e.textContent?.trim() ?? "").filter(Boolean).join(" ") || void 0;
+		e !== Fe && Ie(e);
 	}, [
-		G,
+		W,
 		$,
-		je
+		Pe,
+		Fe
 	]);
-	let Me = (e, t, n) => {
-		K(!0, {
+	let Le = $ ? { "aria-labelledby": $ } : { "aria-label": Pe ?? Fe }, Re = (e, t, n) => {
+		G(!0, {
 			reason: n,
 			event: t
 		});
-		let r = e === "none" ? -1 : C.activeIndexFor(Z, W, w, e);
-		Ae(r, {
+		let r = e === "none" ? -1 : C.activeIndexFor(X, U, T, e);
+		Me(r, {
 			reason: "programmatic",
 			event: t
 		});
-	}, Ne = r((e) => {
-		J(!0), q(e.target.value, {
+	}, ze = r((e) => {
+		q(!0), K(e.target.value, {
 			reason: "input",
 			event: e
-		}), G || K(!0, {
+		}), W || G(!0, {
 			reason: "input",
 			event: e
-		}), Ae(-1, {
+		}), Me(-1, {
 			reason: "programmatic",
 			event: e
 		});
-	}), Pe = r((e, t) => {
-		Ce(W.filter((t) => Y(t) !== Y(e)), {
+	}), Be = r((e, t) => {
+		Te(U.filter((t) => J(t) !== J(e)), {
 			reason: "remove",
 			event: t
 		});
-	}), Fe = (e) => {
+	}), Ve = (e) => {
 		let { key: t } = e;
 		if (t === "ArrowDown" || t === "ArrowUp") {
-			e.preventDefault(), Me(t === "ArrowUp" ? "last" : e.altKey ? "none" : "first", e, "trigger");
+			e.preventDefault(), Re(t === "ArrowUp" ? "last" : e.altKey ? "none" : "first", e, "trigger");
 			return;
 		}
-		t === "Escape" && X !== "" && (J(!0), q("", {
+		t === "Escape" && Y !== "" && (q(!0), K("", {
 			reason: "clear",
 			event: e
 		}));
-	}, Ie = r((e) => {
-		if (k?.onKeyDown?.(e), !(e.defaultPrevented || O)) {
-			if (e.key === "Backspace" && I && X === "" && W.length > 0) {
-				Pe(W[W.length - 1], e);
+	}, He = r((e) => {
+		if (A?.onKeyDown?.(e), !(e.defaultPrevented || k)) {
+			if (e.key === "Backspace" && L && Y === "" && U.length > 0) {
+				Be(U[U.length - 1], e);
 				return;
 			}
-			if (!G) {
-				Fe(e);
+			if (!W) {
+				Ve(e);
 				return;
 			}
 			if (e.key === "Tab") {
-				$ !== -1 && Q($, e), Oe("tab", e);
+				Q !== -1 && Z(Q, e), Ae("tab", e);
 				return;
 			}
 			if (e.altKey && e.key === "ArrowUp") {
-				e.preventDefault(), $ === -1 ? Oe("trigger", e) : Q($, e);
+				e.preventDefault(), Q === -1 ? Ae("trigger", e) : Z(Q, e);
 				return;
 			}
-			if (E.has(e.key)) {
-				Ae(-1, {
+			if (D.has(e.key)) {
+				Me(-1, {
 					reason: "programmatic",
 					event: e
 				});
 				return;
 			}
-			ke.onKeyDown(e);
+			je.onKeyDown(e);
 		}
-	}), Le = r((e) => {
-		!O && !G && Me("first", e, "trigger");
-	}), Re = r((e) => {
-		O || e.target === ye.current || (e.preventDefault(), ye.current?.focus(), G || Me("first", e, "trigger"));
-	}), ze = Z.length > 0 || j === !0 || M !== null, Be = G && $ !== -1 && Z.length > 0 ? _e($) : void 0, Ve = /* @__PURE__ */ b(n, {
+	}), Ue = r((e) => {
+		!k && !W && Re("first", e, "trigger");
+	}), We = r((e) => {
+		k || e.target === H.current || (e.preventDefault(), H.current?.focus(), W || Re("first", e, "trigger"));
+	}), Ge = X.length > 0 || M === !0 || N !== null, Ke = W && Q !== -1 && X.length > 0 ? be(Q) : void 0, qe = /* @__PURE__ */ b(n, {
 		tag: "input",
 		component: "combobox.field",
-		ref: be,
-		id: B,
-		disabled: O,
+		ref: Se,
+		id: ge,
+		disabled: k,
 		props: {
-			...k,
+			...A,
 			role: "combobox",
 			"aria-autocomplete": "list",
-			"aria-expanded": G,
-			"aria-controls": G && ze ? ge : void 0,
-			"aria-activedescendant": Be,
-			"aria-labelledby": H ? V : k?.["aria-labelledby"],
+			"aria-expanded": W,
+			"aria-controls": W && Ge ? _e : void 0,
+			"aria-activedescendant": Ke,
+			"aria-labelledby": $,
 			autoComplete: "off",
 			spellCheck: !1,
 			type: "text",
-			value: X,
-			placeholder: ne,
-			onChange: Ne,
-			onKeyDown: Ie,
-			onClick: Le
+			value: Y,
+			placeholder: te,
+			onChange: ze,
+			onKeyDown: He,
+			onClick: Ue
 		}
-	}), He = !ae && /* @__PURE__ */ b(d, {
+	}), Je = !ie && /* @__PURE__ */ b(d, {
 		component: "combobox.icon",
-		rotate: G ? 180 : 0,
+		rotate: W ? 180 : 0,
 		props: { "aria-hidden": !0 },
 		children: /* @__PURE__ */ b(u, {
 			viewBox: "0 0 10 6",
@@ -495,62 +506,62 @@ function D(f, m) {
 				strokeLinejoin: "round"
 			})
 		})
-	}), Ue = D === void 0 ? null : W.map((e) => /* @__PURE__ */ b(n, {
+	}), Ye = O === void 0 ? null : U.map((e) => /* @__PURE__ */ b(n, {
 		tag: "input",
 		props: {
 			type: "hidden",
-			name: D,
-			value: String(Y(e))
+			name: O,
+			value: String(J(e))
 		}
-	}, Y(e))), We = ze && /* @__PURE__ */ b(p, {
-		present: G,
-		children: (e) => /* @__PURE__ */ b(re, {
+	}, J(e))), Xe = Ge && /* @__PURE__ */ b(p, {
+		present: W,
+		children: (e) => /* @__PURE__ */ b(ne, {
 			presence: e,
-			rows: Z,
-			def: w,
-			display: w.display,
-			selection: W,
-			multiple: I,
-			activeIndex: $,
-			optionId: _e,
-			rowRef: (e) => ke.itemProps(e).ref,
-			onSelect: Q,
-			anchorRef: U,
-			popupRef: ve,
-			listboxId: ge,
-			labelledBy: H ? V : B,
-			loading: j,
-			loadingText: oe,
-			emptyText: M,
-			createLabel: se,
-			virtualize: P,
-			variant: R.variant,
-			itemsProps: ie
+			rows: X,
+			def: T,
+			display: T.display,
+			selection: U,
+			multiple: L,
+			activeIndex: Q,
+			optionId: be,
+			rowRef: (e) => je.itemProps(e).ref,
+			onSelect: Z,
+			anchorRef: V,
+			popupRef: xe,
+			listboxId: _e,
+			name: Le,
+			loading: M,
+			loadingText: ae,
+			emptyText: N,
+			createLabel: oe,
+			virtualize: F,
+			variant: z.variant,
+			itemsProps: re
 		})
-	}), Ge = /* @__PURE__ */ x(d, {
-		ref: U,
+	}), Ze = /* @__PURE__ */ x(d, {
+		ref: V,
 		component: "combobox",
 		ai: "center",
 		gap: 1,
 		flexWrap: "wrap",
-		...R,
-		props: { onPointerDown: Re },
+		...z,
+		props: { onPointerDown: We },
 		children: [
-			Ue,
-			I && /* @__PURE__ */ b(ee, {
-				selection: W,
-				def: w,
-				display: w.display,
-				removeLabel: ce,
-				onRemove: Pe,
-				disabled: O,
-				variant: R.variant
+			Ye,
+			L && /* @__PURE__ */ b(w, {
+				selection: U,
+				def: T,
+				display: T.display,
+				removeLabel: se,
+				onRemove: Be,
+				disabled: k,
+				variant: z.variant
 			}),
-			Ve,
-			He
+			qe,
+			Je
 		]
 	});
-	return H ? /* @__PURE__ */ x(d, {
+	return ye ? /* @__PURE__ */ x(d, {
 		d: "column",
 		gap: 1,
 		width: "fit-content",
@@ -558,17 +569,17 @@ function D(f, m) {
 			/* @__PURE__ */ b(n, {
 				tag: "label",
 				component: "combobox.label",
-				id: V,
-				...te,
-				props: { htmlFor: B },
-				children: T
+				id: ve,
+				...ee,
+				props: { htmlFor: ge },
+				children: E
 			}),
-			Ge,
-			We
+			Ze,
+			Xe
 		]
-	}) : /* @__PURE__ */ x(y, { children: [Ge, We] });
+	}) : /* @__PURE__ */ x(y, { children: [Ze, Xe] });
 }
-var O = m(D);
-O.displayName = "Combobox";
+var k = m(O);
+k.displayName = "Combobox";
 //#endregion
-export { C as ComboboxUtils, O as default };
+export { C as ComboboxUtils, k as default };