@cascivo/react 0.16.1 → 0.17.1

package/dist/node/combobox/combobox.js

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