@jfrader/ui 0.5.0 → 0.5.1

package/dist/{combobox-Bhzvu9ma.js → combobox-DFFqOBCi.js}

@@ -3,12 +3,12 @@ import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { t as n } from "./use-latest-callback-cj1OOQL6.js";
 import { t as r } from "./use-controlled-state-DpeVQZNR.js";
 import { t as i } from "./renderable-DzcIj1Lo.js";
-import { t as a } from "./overlay-layer-SeUyyEPD.js";
+import { t as a } from "./overlay-layer-qEbpEtb8.js";
 import { a as o, i as s, n as c, o as l, r as u, s as d, t as f } from "./listbox-style-WX-RASp1.js";
 import { a as p, r as m, t as h } from "./collection-registry-k6JcD3Jr.js";
 import { t as g } from "./overlay-portal-C4JZFq2M.js";
-import { t as _ } from "./use-overlay-floating-DvJifLpF.js";
-import { t as v } from "./text-field-C8TWG-tY.js";
+import { t as _ } from "./use-overlay-floating-Bx2jBKAA.js";
+import { t as v } from "./text-field-hU72iSVS.js";
 import { createContext as y, useCallback as b, useContext as x, useId as S, useLayoutEffect as C, useMemo as w, useRef as T, useState as E } from "react";
 import { vars as D } from "@jfrader/tokens/vars";
 import { jsx as O, jsxs as ee } from "@emotion/react/jsx-runtime";
@@ -25,19 +25,19 @@ function B(e) {
 	if (!x(R)) throw Error(`Combobox.${e} must be rendered inside <Combobox.List>.`);
 	return t;
 }
-var ne = e({ "&[hidden]": { display: "none" } }), V = e({
+var V = e({ "&[hidden]": { display: "none" } }), H = e({
 	paddingBlock: D.space[1],
 	paddingInline: D.space[2],
 	fontSize: D.textSize.sm,
 	color: D.color.textMuted
 });
-function H({ value: e, defaultValue: t, onValueChange: i, open: a, defaultOpen: o = !1, onOpenChange: s, name: c, filter: l = I, onInputChange: u, children: d }) {
-	let f = S(), [m, h] = E(`${f}-listbox`), [g, v] = E(!1), [y = null, x] = r(e, t ?? null, i), [C = !1, D] = r(a, o, s), [k, M] = E(null), [P, F] = E(""), [R, z] = p(), [B, ne] = E(null), V = T([]), H = T(null), U = n(u), W = b((e, t) => t === "" || l(e, t), [l]), { valuesByIndex: G, skippedIndices: K, matchCount: q } = w(() => {
+function U({ value: e, defaultValue: t, onValueChange: i, open: a, defaultOpen: o = !1, onOpenChange: s, name: c, filter: l = I, onInputChange: u, children: d }) {
+	let f = S(), [m, h] = E(`${f}-listbox`), [g, v] = E(!1), [y, x] = E(), [C = null, D] = r(e, t ?? null, i), [k = !1, M] = r(a, o, s), [P, F] = E(null), [R, z] = E(""), [B, V] = p(), [H, U] = E(null), W = T([]), G = T(null), K = n(u), q = b((e, t) => t === "" || l(e, t), [l]), { valuesByIndex: J, skippedIndices: Y, matchCount: X } = w(() => {
 		let e = [], t = /* @__PURE__ */ new Set(), n = 0;
-		return R.forEach((r, i) => {
+		return B.forEach((r, i) => {
 			if (r.index === -1) return;
 			e[r.index] = i;
-			let a = W(r.label, P);
+			let a = q(r.label, R);
 			a && (n += 1), (r.disabled || !a) && t.add(r.index);
 		}), {
 			valuesByIndex: e,
@@ -45,130 +45,132 @@ function H({ value: e, defaultValue: t, onValueChange: i, open: a, defaultOpen:
 			matchCount: n
 		};
 	}, [
+		B,
 		R,
-		P,
-		W
-	]), { refs: J, floatingStyles: Y, context: X } = _({
-		open: C,
+		q
+	]), { refs: ne, floatingStyles: Z, context: Q } = _({
+		open: k,
 		placement: N,
-		onOpenChange: (e) => D(e)
-	}), Z = te(X, {
+		onOpenChange: (e) => M(e)
+	}), re = te(Q, {
 		escapeKey: !0,
 		outsidePress: !0
-	}), re = j(X, {
-		listRef: V,
-		activeIndex: k,
-		onNavigate: M,
+	}), ie = j(Q, {
+		listRef: W,
+		activeIndex: P,
+		onNavigate: F,
 		virtual: !0,
 		loop: !0,
-		disabledIndices: (e) => K.has(e)
-	}), { getReferenceProps: Q, getFloatingProps: $, getItemProps: ie } = A([Z, re]), ae = w(() => {
+		disabledIndices: (e) => Y.has(e)
+	}), { getReferenceProps: $, getFloatingProps: ae, getItemProps: oe } = A([re, ie]), se = w(() => {
 		let e = (e) => {
-			x(e), D(!1), H.current?.commitLabel(R.get(e)?.label ?? "");
+			D(e), M(!1), G.current?.commitLabel(B.get(e)?.label ?? "");
 		};
 		return {
 			baseId: f,
 			listId: m,
 			setListId: h,
 			setInputDisabled: v,
-			open: C,
-			selectedValue: y,
-			activeIndex: k,
-			options: R,
-			matchCount: q,
-			inputLabelling: B,
-			inputHandleRef: H,
-			refs: J,
-			floatingStyles: Y,
-			elementsRef: V,
-			getReferenceProps: Q,
-			getFloatingProps: $,
-			getItemProps: ie,
-			onInputChange: U,
-			isVisible: (e) => W(e, P),
+			setInputForm: x,
+			open: k,
+			selectedValue: C,
+			activeIndex: P,
+			options: B,
+			matchCount: X,
+			inputLabelling: H,
+			inputHandleRef: G,
+			refs: ne,
+			floatingStyles: Z,
+			elementsRef: W,
+			getReferenceProps: $,
+			getFloatingProps: ae,
+			getItemProps: oe,
+			onInputChange: K,
+			isVisible: (e) => q(e, R),
 			findMatches: (e) => {
 				let t = 0, n = null, r = null;
-				return R.forEach((i) => {
-					i.index !== -1 && W(i.label, e) && (t += 1, !i.disabled && ((n === null || i.index < n) && (n = i.index), (r === null || i.index > r) && (r = i.index)));
+				return B.forEach((i) => {
+					i.index !== -1 && q(i.label, e) && (t += 1, !i.disabled && ((n === null || i.index < n) && (n = i.index), (r === null || i.index > r) && (r = i.index)));
 				}), {
 					count: t,
 					first: n,
 					last: r
 				};
 			},
-			setQuery: F,
-			setActiveIndex: M,
+			setQuery: z,
+			setActiveIndex: F,
 			selectValue: e,
 			selectIndex: (t) => {
-				let n = G[t];
-				n === void 0 || K.has(t) || e(n);
+				let n = J[t];
+				n === void 0 || Y.has(t) || e(n);
 			},
-			clearValue: () => x(null),
-			requestOpenChange: D,
-			registration: z,
-			setInputLabelling: ne
+			clearValue: () => D(null),
+			requestOpenChange: M,
+			registration: V,
+			setInputLabelling: U
 		};
 	}, [
 		f,
 		m,
-		C,
-		y,
 		k,
-		R,
+		C,
 		P,
-		q,
 		B,
-		J,
-		Y,
-		Q,
+		R,
+		X,
+		H,
+		ne,
+		Z,
 		$,
-		ie,
-		U,
-		W,
-		G,
+		ae,
+		oe,
 		K,
-		x,
+		q,
+		J,
+		Y,
 		D,
-		z
+		M,
+		V
 	]);
 	return /* @__PURE__ */ ee(L.Provider, {
-		value: ae,
+		value: se,
 		children: [d, c !== void 0 && /* @__PURE__ */ O("input", {
 			type: "hidden",
 			name: c,
-			value: y ?? "",
+			form: y,
+			value: C ?? "",
 			disabled: g
 		})]
 	});
 }
-function U(e) {
-	return /* @__PURE__ */ O(a, { children: /* @__PURE__ */ O(H, { ...e }) });
+function W(e) {
+	return /* @__PURE__ */ O(a, { children: /* @__PURE__ */ O(U, { ...e }) });
 }
-U.displayName = "Combobox";
-function W({ ref: e, inputValue: t, defaultInputValue: n, label: a, description: o, error: s, size: c, slotProps: l, className: u, sx: d, id: f, onChange: p, onKeyDown: m, onBlur: h, disabled: g = !1, ..._ }) {
-	let { listId: y, open: b, selectedValue: x, activeIndex: w, options: T, inputHandleRef: D, refs: ee, getReferenceProps: k, onInputChange: te, findMatches: A, setQuery: j, setActiveIndex: N, selectIndex: P, clearValue: F, requestOpenChange: I, setInputLabelling: L, setInputDisabled: R } = z("Input"), B = M([ee.setReference, e]), ne = S(), V = f ?? ne, H = `${V}-label`, U = i(a), W = _["aria-labelledby"], G = _["aria-label"], [K, q] = E(n), [J, Y] = E(() => (t ?? n) !== void 0), X = x === null ? void 0 : T.get(x)?.label, Z = t ?? (J ? K ?? "" : X ?? K ?? ""), [, re] = r(Z, void 0, te), Q = (e) => {
-		re(e), t === void 0 && q(e);
-	}, $ = t !== void 0 || J ? Z : "", ie = (e) => {
-		Y(!1), Q(e);
+W.displayName = "Combobox";
+function G({ ref: e, inputValue: t, defaultInputValue: n, label: a, description: o, error: s, size: c, slotProps: l, className: u, sx: d, id: f, onChange: p, onKeyDown: m, onBlur: h, disabled: g = !1, ..._ }) {
+	let { listId: y, open: b, selectedValue: x, activeIndex: w, options: T, inputHandleRef: D, refs: ee, getReferenceProps: k, onInputChange: te, findMatches: A, setQuery: j, setActiveIndex: N, selectIndex: P, clearValue: F, requestOpenChange: I, setInputLabelling: L, setInputDisabled: R, setInputForm: B } = z("Input"), V = M([ee.setReference, e]), H = S(), U = f ?? H, W = `${U}-label`, G = i(a), K = _["aria-labelledby"], q = _["aria-label"], [J, Y] = E(n), [X, ne] = E(() => (t ?? n) !== void 0), Z = x === null ? void 0 : T.get(x)?.label, Q = t ?? (X ? J ?? "" : Z ?? J ?? ""), [, re] = r(Q, void 0, te), ie = (e) => {
+		re(e), t === void 0 && Y(e);
+	}, $ = t !== void 0 || X ? Q : "", ae = (e) => {
+		ne(!1), ie(e);
 	};
 	C(() => {
 		j($);
-	}, [$, j]), C(() => (R(g), () => R(!1)), [g, R]), C(() => (D.current = { commitLabel: ie }, () => {
+	}, [$, j]), C(() => (R(g), () => R(!1)), [g, R]), C(() => (B(_.form), () => B(void 0)), [_.form, B]), C(() => (D.current = { commitLabel: ae }, () => {
 		D.current = null;
-	})), C(() => (L(W !== void 0 || !U ? {
-		labelledBy: W,
-		label: G
-	} : { labelledBy: H }), () => L(null)), [
-		W,
+	})), C(() => (L(K !== void 0 || !G ? {
+		labelledBy: K,
+		label: q
+	} : { labelledBy: W }), () => L(null)), [
+		K,
+		q,
 		G,
-		U,
-		H,
+		W,
 		L
 	]);
-	let ae = (e) => {
+	let oe = (e) => {
 		p?.(e);
 		let n = e.currentTarget.value;
-		Y(!0), Q(n), n === "" && F();
+		ne(!0), ie(n), n === "" && F();
 		let r = t ?? n;
 		if (r === "") {
 			N(null), I(!1);
@@ -176,9 +178,9 @@ function W({ ref: e, inputValue: t, defaultInputValue: n, label: a, description:
 		}
 		let i = A(r);
 		N(i.first), i.count > 0 && I(!0);
-	}, oe = (e) => {
+	}, se = (e) => {
 		if (m?.(e), !e.defaultPrevented) {
-			if (e.key === "Escape") J && X !== void 0 && ie(X);
+			if (e.key === "Escape") X && Z !== void 0 && ae(Z);
 			else if (b) {
 				if (e.key === "Enter" && w !== null) e.preventDefault(), P(w);
 				else if (e.key === "Home" || e.key === "End") {
@@ -188,19 +190,22 @@ function W({ ref: e, inputValue: t, defaultInputValue: n, label: a, description:
 				}
 			}
 		}
-	}, se = (e) => {
+	}, ce = (e) => {
 		h?.(e), b && I(!1);
-	};
+	}, le = k({
+		..._,
+		onKeyDown: se,
+		onBlur: ce
+	});
 	return /* @__PURE__ */ O(v, {
-		...k({
-			..._,
-			onKeyDown: oe,
-			onBlur: se
-		}),
-		ref: B,
-		id: V,
-		label: U ? /* @__PURE__ */ O("span", {
-			id: H,
+		...le,
+		onKeyDown: (e) => {
+			e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 ? m?.(e) : le.onKeyDown?.(e);
+		},
+		ref: V,
+		id: U,
+		label: G ? /* @__PURE__ */ O("span", {
+			id: W,
 			children: a
 		}) : a,
 		description: o,
@@ -209,9 +214,9 @@ function W({ ref: e, inputValue: t, defaultInputValue: n, label: a, description:
 		slotProps: l,
 		className: u,
 		sx: d,
-		value: Z,
+		value: Q,
 		disabled: g,
-		onChange: ae,
+		onChange: oe,
 		role: "combobox",
 		autoComplete: "off",
 		"aria-autocomplete": "list",
@@ -221,8 +226,8 @@ function W({ ref: e, inputValue: t, defaultInputValue: n, label: a, description:
 		"data-ui": "combobox-input"
 	});
 }
-W.displayName = "Combobox.Input";
-function G({ ref: e, id: n, style: r, onMouseDown: i, children: a, className: o, sx: s, ...c }) {
+G.displayName = "Combobox.Input";
+function K({ ref: e, id: n, style: r, onMouseDown: i, children: a, className: o, sx: s, ...c }) {
 	let { baseId: u, setListId: f, open: p, inputLabelling: m, refs: h, floatingStyles: _, elementsRef: v, getFloatingProps: y } = z("List"), b = n ?? `${u}-listbox`;
 	C(() => (f(b), () => f(`${u}-listbox`)), [
 		u,
@@ -263,8 +268,8 @@ function G({ ref: e, id: n, style: r, onMouseDown: i, children: a, className: o,
 		})
 	}) });
 }
-G.displayName = "Combobox.List";
-function K({ ref: e, value: n, disabled: r = !1, onClick: i, children: a, className: l, sx: d, ...p }) {
+K.displayName = "Combobox.List";
+function q({ ref: e, value: n, disabled: r = !1, onClick: i, children: a, className: l, sx: d, ...p }) {
 	let { baseId: g, selectedValue: _, activeIndex: v, options: y, isVisible: b, getItemProps: x, selectValue: S, registration: C } = B("Item"), w = T(null), { ref: E, index: D } = m(n, C, w, (e, t) => ({
 		index: e,
 		label: t,
@@ -278,7 +283,7 @@ function K({ ref: e, value: n, disabled: r = !1, onClick: i, children: a, classN
 			c,
 			f,
 			s,
-			ne
+			V
 		],
 		sx: d,
 		children: (e) => /* @__PURE__ */ ee("div", {
@@ -307,12 +312,12 @@ function K({ ref: e, value: n, disabled: r = !1, onClick: i, children: a, classN
 		})
 	});
 }
-K.displayName = "Combobox.Item";
-function q({ ref: e, children: n, className: r, sx: a, ...o }) {
+q.displayName = "Combobox.Item";
+function J({ ref: e, children: n, className: r, sx: a, ...o }) {
 	let { matchCount: s } = B("Empty");
 	return s > 0 ? null : /* @__PURE__ */ O(t, {
 		className: r,
-		styles: V,
+		styles: H,
 		sx: a,
 		children: (t) => /* @__PURE__ */ O("div", {
 			...o,
@@ -323,12 +328,12 @@ function q({ ref: e, children: n, className: r, sx: a, ...o }) {
 		})
 	});
 }
-q.displayName = "Combobox.Empty";
-var J = Object.assign(U, {
-	Input: W,
-	List: G,
-	Item: K,
-	Empty: q
+J.displayName = "Combobox.Empty";
+var Y = Object.assign(W, {
+	Input: G,
+	List: K,
+	Item: q,
+	Empty: J
 });
 //#endregion
-export { J as t };
+export { Y as t };

package/dist/combobox.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Combobox } from "./combobox-Bhzvu9ma.js";
+export { t as Combobox } from "./combobox-DFFqOBCi.js";