@cascivo/react 0.17.1 → 1.0.0

package/dist/node/combobox/combobox.js

@@ -2,164 +2,169 @@
 
 import e from "./combobox.module.js";
 import { useId as t, useRef as n } from "react";
-import { cn as r, createMachine as i, focusElement as a, useControllableSignal as o, useMachine as s, useSignal as c, useSignalEffect as l, useSignals as u } from "@cascivo/core";
-import { builtin as d, t as f } from "@cascivo/i18n";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { cn as r, createMachine as i, focusElement as ee, useControllableSignal as a, useMachine as o, useSignal as s, useSignalEffect as c, useSignals as te } from "@cascivo/core";
+import { builtin as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/combobox/combobox.tsx
-var h = i({
+var p = i({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function g({ options: i, value: g, defaultValue: _, onValueChange: v, onChange: y, clearable: b = !1, searchable: x = !0, label: S, hint: C, error: w, size: T = "md", disabled: E = !1, labels: D, className: O, id: k }) {
-	u();
-	let [A, j] = s(h), M = t(), N = k ?? `cascade-combobox-${M}`, P = `${M}-listbox`, F = n(null), ee = D?.placeholder ?? f(d.combobox.placeholder), I = D?.empty ?? f(d.combobox.empty), L = D?.clear ?? f(d.combobox.clear), R = D?.search ?? f(d.combobox.search), [z] = o({
-		value: g,
-		defaultValue: _
-	}), B = c(""), V = c(0), H = A.value === "open", U = i.filter((e) => !x || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = i.find((e) => e.value === z.value);
-	l(() => {
-		if (!H) return;
+function m(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function h({ options: i, value: h, defaultValue: g, onValueChange: ne, clearable: _ = !1, searchable: v = !0, label: y, ariaLabel: b, hint: x, error: S, size: re = "md", disabled: C = !1, labels: w, className: T, id: E, "aria-labelledby": D, "aria-describedby": O, "aria-invalid": k }) {
+	te();
+	let [A, j] = o(p), M = t(), N = E ?? `cascade-combobox-${M}`, P = `${M}-listbox`, F = n(null), I = w?.placeholder ?? u(l.combobox.placeholder), L = w?.empty ?? u(l.combobox.empty), R = w?.clear ?? u(l.combobox.clear), z = w?.search ?? u(l.combobox.search), [B] = a({
+		value: h,
+		defaultValue: g
+	}), V = s(""), H = s(0), U = A.value === "open", W = i.filter((e) => !v || !V.value ? !0 : e.label.toLowerCase().includes(V.value.toLowerCase())), G = i.find((e) => e.value === B.value);
+	c(() => {
+		if (!U) return;
 		let e = (e) => {
 			let t = document.getElementById(`${M}-root`);
 			t && !t.contains(e.target) && j("CLOSE");
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	});
-	let G = () => {
-		E || (B.value = "", V.value = 0, j("OPEN"), setTimeout(() => a(F.current), 0));
-	}, K = () => {
-		j("CLOSE"), B.value = "";
-	}, q = v ?? y, J = (e) => {
-		g === void 0 && (z.value = e), q?.(e), K();
-	}, Y = () => {
-		g === void 0 && (z.value = void 0), q?.(void 0);
-	}, X = U.flatMap((e, t) => e.disabled ? [] : [t]), Z = (e) => {
-		if (X.length === 0) return;
-		let t = X[(X.indexOf(V.value) + e + X.length) % X.length];
-		t !== void 0 && (V.value = t);
-	}, Q = (e) => {
-		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), G());
-	}, te = (e) => {
+	let K = () => {
+		C || (V.value = "", H.value = 0, j("OPEN"), setTimeout(() => ee(F.current), 0));
+	}, q = () => {
+		j("CLOSE"), V.value = "";
+	}, J = ne, Y = (e) => {
+		h === void 0 && (B.value = e), J?.(e), q();
+	}, X = () => {
+		h === void 0 && (B.value = void 0), J?.(void 0);
+	}, Z = W.flatMap((e, t) => e.disabled ? [] : [t]), Q = (e) => {
+		if (Z.length === 0) return;
+		let t = Z[(Z.indexOf(H.value) + e + Z.length) % Z.length];
+		t !== void 0 && (H.value = t);
+	}, ie = (e) => {
+		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), K());
+	}, ae = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), Z(1);
+				e.preventDefault(), Q(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), Z(-1);
+				e.preventDefault(), Q(-1);
 				break;
 			case "Enter": {
 				e.preventDefault();
-				let t = U[V.value];
-				t && !t.disabled && J(t.value);
+				let t = W[H.value];
+				t && !t.disabled && Y(t.value);
 				break;
 			}
 			case "Escape":
-				e.preventDefault(), K();
+				e.preventDefault(), q();
 				break;
 			case "Tab":
-				K();
+				q();
 				break;
 		}
 	}, $ = (e) => `${M}-option-${e}`;
-	return /* @__PURE__ */ m("div", {
+	return /* @__PURE__ */ f("div", {
 		id: `${M}-root`,
-		className: r(e.wrapper, O),
-		"data-state": w ? "error" : A.value,
-		"data-size": T,
+		className: r(e.wrapper, T),
+		"data-state": S ? "error" : A.value,
+		"data-size": re,
 		children: [
-			S && /* @__PURE__ */ p("label", {
+			y && /* @__PURE__ */ d("label", {
 				className: e.label,
 				htmlFor: N,
-				children: S
+				children: y
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ m("button", {
+				children: [/* @__PURE__ */ f("button", {
 					id: N,
 					type: "button",
 					role: "combobox",
-					"aria-expanded": H,
+					"aria-expanded": U,
 					"aria-controls": P,
 					"aria-haspopup": "listbox",
-					"aria-activedescendant": H && V.value >= 0 ? $(V.value) : void 0,
-					"aria-invalid": w ? !0 : void 0,
-					"aria-describedby": w ? `${M}-error` : C ? `${M}-hint` : void 0,
+					"aria-labelledby": D,
+					"aria-label": b,
+					"aria-activedescendant": U && H.value >= 0 ? $(H.value) : void 0,
+					"aria-invalid": S ? !0 : k,
+					"aria-describedby": m(S ? `${M}-error` : x ? `${M}-hint` : void 0, O),
 					className: e.trigger,
-					disabled: E,
-					onKeyDown: Q,
-					onClick: H ? K : G,
-					children: [/* @__PURE__ */ p("span", {
-						className: r(e.value, W ? void 0 : e.placeholder),
-						children: W?.label ?? ee
-					}), /* @__PURE__ */ p("span", {
+					disabled: C,
+					onKeyDown: ie,
+					onClick: U ? q : K,
+					children: [/* @__PURE__ */ d("span", {
+						className: r(e.value, G ? void 0 : e.placeholder),
+						children: G?.label ?? I
+					}), /* @__PURE__ */ d("span", {
 						className: e.chevron,
 						"aria-hidden": "true"
 					})]
-				}), b && z.value !== void 0 && /* @__PURE__ */ p("button", {
+				}), _ && B.value !== void 0 && /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.clear,
-					"aria-label": L,
+					"aria-label": R,
 					onClick: (e) => {
-						e.stopPropagation(), Y();
+						e.stopPropagation(), X();
 					},
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ m("div", {
+			/* @__PURE__ */ f("div", {
 				role: "listbox",
 				id: P,
 				className: e.listbox,
-				"data-state": H ? "open" : "closed",
-				"aria-label": S,
-				children: [x && H && /* @__PURE__ */ p("div", {
+				"data-state": U ? "open" : "closed",
+				"aria-label": y,
+				children: [v && U && /* @__PURE__ */ d("div", {
 					className: e.searchWrapper,
-					children: /* @__PURE__ */ p("input", {
+					children: /* @__PURE__ */ d("input", {
 						ref: F,
 						type: "text",
 						className: e.search,
-						value: B.value,
+						value: V.value,
 						onChange: (e) => {
-							B.value = e.target.value, V.value = 0;
+							V.value = e.target.value, H.value = 0;
 						},
-						onKeyDown: te,
-						"aria-label": R,
+						onKeyDown: ae,
+						"aria-label": z,
 						autoComplete: "off"
 					})
-				}), U.length === 0 ? /* @__PURE__ */ p("div", {
+				}), W.length === 0 ? /* @__PURE__ */ d("div", {
 					className: e.empty,
-					children: I
-				}) : U.map((t, n) => /* @__PURE__ */ p("div", {
+					children: L
+				}) : W.map((t, n) => /* @__PURE__ */ d("div", {
 					id: $(n),
 					role: "option",
-					"aria-selected": t.value === z.value,
+					"aria-selected": t.value === B.value,
 					"aria-disabled": t.disabled || void 0,
-					"data-state": n === V.value ? "active" : void 0,
+					"data-state": n === H.value ? "active" : void 0,
 					"data-disabled": t.disabled || void 0,
 					className: e.option,
 					onMouseEnter: () => {
-						t.disabled || (V.value = n);
+						t.disabled || (H.value = n);
 					},
 					onClick: () => {
-						t.disabled || J(t.value);
+						t.disabled || Y(t.value);
 					},
 					children: t.label
 				}, t.value))]
 			}),
-			w && /* @__PURE__ */ p("span", {
+			S && /* @__PURE__ */ d("span", {
 				id: `${M}-error`,
 				className: e.error,
 				role: "alert",
-				children: w
+				children: S
 			}),
-			!w && C && /* @__PURE__ */ p("span", {
+			!S && x && /* @__PURE__ */ d("span", {
 				id: `${M}-hint`,
 				className: e.hint,
-				children: C
+				children: x
 			})
 		]
 	});
 }
 //#endregion
-export { g as Combobox };
+export { h as Combobox };