@cascivo/react 0.13.0 → 0.14.0

package/dist/combobox/combobox.js

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