haze-ui 1.32.0 → 1.34.0

package/dist/components/Cascader/Cascader.js

@@ -9,80 +9,87 @@ import { FloatingPanel as a, useFloating as o } from "../../utils/floating.js";
 import ee from "../VirtualList/VirtualList.js";
 import { useFocusScope as te } from "../../utils/focus-scope.js";
 /* empty css                   */
-import { Fragment as ne, useCallback as s, useEffect as c, useId as re, useRef as l, useState as u } from "react";
-import { Fragment as ie, jsx as d, jsxs as f } from "react/jsx-runtime";
-import { isControl as ae, useControl as p, useThru as oe, watch as se } from "react-use-control";
+import { c as s } from "react/compiler-runtime";
+import { Fragment as ne, useCallback as c, useEffect as l, useId as re, useRef as u, useState as d } from "react";
+import { Fragment as ie, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { isControl as ae, useControl as m, useThru as oe, watch as se } from "react-use-control";
 //#region src/lib/components/Cascader/Cascader.tsx
-var ce = "haze-Cascader__wrapper", le = "haze-Cascader__trigger", ue = "haze-Cascader__triggerValue", de = "haze-Cascader__triggerPlaceholder", fe = "haze-Cascader__triggerCaret", pe = "haze-Cascader__separator", me = "haze-Cascader__panel", he = "haze-Cascader__panelSearch", ge = "haze-Cascader__columnsStrip", _e = "haze-Cascader__searchInput", ve = "haze-Cascader__loadingBlock", ye = "haze-Cascader__emptyBlock", be = "haze-Cascader__column", xe = "haze-Cascader__columnVirtual", Se = 220, Ce = 37, we = "haze-Cascader__virtualRow", Te = "haze-Cascader__item", Ee = "haze-Cascader__itemInPath", De = "haze-Cascader__itemLabel", Oe = "haze-Cascader__chevron", ke = () => /* @__PURE__ */ d("svg", {
-	viewBox: "0 0 12 12",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: d("path", { d: "M4 2l4 4-4 4" })
-}), Ae = () => /* @__PURE__ */ d("svg", {
-	viewBox: "0 0 12 12",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: "2",
-	strokeLinecap: "round",
-	strokeLinejoin: "round",
-	"aria-hidden": "true",
-	focusable: "false",
-	children: d("path", { d: "M2 4l4 4 4-4" })
-}), m = "[role=\"menuitem\"]";
-function h(e) {
+var ce = "haze-Cascader__wrapper", le = "haze-Cascader__trigger", ue = "haze-Cascader__triggerValue", de = "haze-Cascader__triggerPlaceholder", fe = "haze-Cascader__triggerCaret", pe = "haze-Cascader__separator", me = "haze-Cascader__panel", he = "haze-Cascader__panelSearch", ge = "haze-Cascader__columnsStrip", _e = "haze-Cascader__searchInput", ve = "haze-Cascader__loadingBlock", ye = "haze-Cascader__emptyBlock", be = "haze-Cascader__column", xe = "haze-Cascader__columnVirtual", Se = 220, Ce = 37, we = "haze-Cascader__virtualRow", Te = "haze-Cascader__item", Ee = "haze-Cascader__itemInPath", De = "haze-Cascader__itemLabel", Oe = "haze-Cascader__chevron", ke = () => {
+	let e = s(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ f("svg", {
+		viewBox: "0 0 12 12",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: f("path", { d: "M4 2l4 4-4 4" })
+	}), e[0] = t) : t = e[0], t;
+}, Ae = () => {
+	let e = s(1), t;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ f("svg", {
+		viewBox: "0 0 12 12",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: f("path", { d: "M2 4l4 4 4-4" })
+	}), e[0] = t) : t = e[0], t;
+}, h = "[role=\"menuitem\"]";
+function g(e) {
 	return e ? Array.from(e.querySelectorAll("[data-haze-cascader-column]")) : [];
 }
-function g(e) {
-	return e ? Array.from(e.querySelectorAll(m)) : [];
+function _(e) {
+	return e ? Array.from(e.querySelectorAll(h)) : [];
 }
-function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect: Ne = !1, expandTrigger: Pe = "click", onSearch: y, loading: b = !1, virtualized: x, className: Fe, ref: S, ...Ie }) {
-	let Le = n("cascader"), C = n("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = u([]), [j, M] = u(null), N = y !== void 0, [P, Re] = u(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = re(), z = l(null), Be = s((e) => i(z, S)(e), [z, S]), B = l(null), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(!1), W = o({
-		open: w,
-		setOpen: T,
-		triggerRef: z,
-		panelRef: B,
+function v({ options: s, value: v, onChange: je, placeholder: Me, changeOnSelect: Ne = !1, expandTrigger: Pe = "click", onSearch: y, loading: b = !1, virtualized: x, className: Fe, classNames: S, ref: C, ...Ie }) {
+	let Le = n("cascader"), w = n("select"), [T, E] = m(!1, !1), D = ae(v), [O, k] = m(oe(D ? v : void 0, se((e) => je?.(e))), D ? [] : v ?? []), [A, j] = d([]), [M, N] = d(null), P = y !== void 0, [F, Re] = d(""), I = x !== void 0 && x !== !1, L = typeof x == "object" ? x : void 0, R = L?.itemHeight ?? Ce, ze = L?.overscan, z = re(), B = u(null), Be = c((e) => i(B, C)(e), [B, C]), V = u(null), H = u(null), U = u(/* @__PURE__ */ new Map()), W = u(!1), G = o({
+		open: T,
+		setOpen: E,
+		triggerRef: B,
+		panelRef: V,
 		animated: !0
-	}), G = te({
-		enabled: w,
+	}), K = te({
+		enabled: T,
 		autoFocus: !1,
 		returnFocus: !0
-	}), K = l(!1);
-	c(() => {
-		let e = w && !K.current;
-		K.current = w, e && A(D);
-	}, [w, D]), c(() => {
-		if (!w) {
-			U.current = !1, M(null);
+	}), q = u(!1);
+	l(() => {
+		let e = T && !q.current;
+		q.current = T, e && j(O);
+	}, [T, O]), l(() => {
+		if (!T) {
+			W.current = !1, N(null);
 			return;
 		}
-		if (!W.shown) return;
-		let e = j;
+		if (!G.shown) return;
+		let e = M;
 		if (e) {
-			M(null);
-			let t = g(h(B.current)[e.level]), n = e.value === void 0 ? e.index : t.findIndex((t) => t.dataset.value === e.value);
+			N(null);
+			let t = _(g(V.current)[e.level]), n = e.value === void 0 ? e.index : t.findIndex((t) => t.dataset.value === e.value);
 			(n >= 0 ? t[n] : t[0])?.focus();
 			return;
 		}
-		if (U.current) return;
-		let t = B.current;
+		if (W.current) return;
+		let t = V.current;
 		if (!t) return;
-		if (N) {
-			U.current = !0, V.current?.focus();
+		if (P) {
+			W.current = !0, H.current?.focus();
 			return;
 		}
-		let n = Array.from(t.querySelectorAll(m)), r = D.length - 1, i = D[r], a;
+		let n = Array.from(t.querySelectorAll(h)), r = O.length - 1, i = O[r], a;
 		if (i !== void 0) {
-			if (F && H.current.has(r)) {
-				let e = _;
-				for (let t = 0; t < r; t++) e = e.find((e) => e.value === D[t])?.children ?? [];
+			if (I && U.current.has(r)) {
+				let e = s;
+				for (let t = 0; t < r; t++) e = e.find((e) => e.value === O[t])?.children ?? [];
 				let t = e.findIndex((e) => e.value === i);
 				if (t >= 0) {
-					H.current.get(r)?.scrollToIndex(t, "auto"), U.current = !0, M({
+					U.current.get(r)?.scrollToIndex(t, "auto"), W.current = !0, N({
 						level: r,
 						index: t,
 						value: i
@@ -92,88 +99,88 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 			}
 			if (a = n.find((e) => e.dataset.level === String(r) && e.dataset.value === i), !a) return;
 		} else a = n.find((e) => e.dataset.level === "0");
-		a && (U.current = !0, a.focus());
+		a && (W.current = !0, a.focus());
 	}, [
-		w,
-		W.shown,
-		k,
-		D,
-		j,
-		F,
-		_,
-		N
+		T,
+		G.shown,
+		A,
+		O,
+		M,
+		I,
+		s,
+		P
 	]);
-	let q = l(y);
-	c(() => {
-		q.current = y;
+	let J = u(y);
+	l(() => {
+		J.current = y;
 	}, [y]);
-	let J = l(P);
-	c(() => {
-		J.current !== P && (J.current = P, q.current?.(P));
-	}, [P]), !w && P !== "" && Re("");
-	let Ve = s((e) => {
-		B.current = e, G(e);
-	}, [B, G]), He = s((e) => (t) => {
-		t ? H.current.set(e, t) : H.current.delete(e);
-	}, []), Y = [_];
-	for (let e of k) {
-		let t = Y.at(-1).find((t) => t.value === e)?.children;
+	let Y = u(F);
+	l(() => {
+		Y.current !== F && (Y.current = F, J.current?.(F));
+	}, [F]), !T && F !== "" && Re("");
+	let Ve = c((e) => {
+		V.current = e, K(e);
+	}, [V, K]), He = c((e) => (t) => {
+		t ? U.current.set(e, t) : U.current.delete(e);
+	}, []), X = [s];
+	for (let e of A) {
+		let t = X.at(-1).find((t) => t.value === e)?.children;
 		if (!t?.length) break;
-		Y.push(t);
+		X.push(t);
 	}
-	let X = (e, t) => {
-		let n = Y[e]?.[t];
+	let Z = (e, t) => {
+		let n = X[e]?.[t];
 		if (n) {
-			if (F) {
-				H.current.get(e)?.scrollToIndex(t, "auto"), M({
+			if (I) {
+				U.current.get(e)?.scrollToIndex(t, "auto"), N({
 					level: e,
 					index: t,
 					value: n.value
 				});
 				return;
 			}
-			g(h(B.current)[e])[t]?.focus();
+			_(g(V.current)[e])[t]?.focus();
 		}
-	}, Z = [], Q = _;
-	for (let e of D) {
-		let t = Q.find((t) => t.value === e);
+	}, Q = [], Ue = s;
+	for (let e of O) {
+		let t = Ue.find((t) => t.value === e);
 		if (!t) break;
-		Z.push(t), Q = t.children ?? [];
+		Q.push(t), Ue = t.children ?? [];
 	}
-	let Ue = (e, t) => {
-		let n = [...k.slice(0, t), e.value];
-		e.children?.length ? (A(n), Ne && O(n)) : (O(n), T(!1), z.current?.focus());
-	}, We = (e, t) => {
-		Pe === "hover" && A([...k.slice(0, t), e.value]);
-	}, Ge = (e) => {
-		!w && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), T(!0));
+	let We = (e, t) => {
+		let n = [...A.slice(0, t), e.value];
+		e.children?.length ? (j(n), Ne && k(n)) : (k(n), E(!1), B.current?.focus());
+	}, Ge = (e, t) => {
+		Pe === "hover" && j([...A.slice(0, t), e.value]);
 	}, Ke = (e) => {
-		let n = B.current;
+		!T && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), E(!0));
+	}, qe = (e) => {
+		let n = V.current;
 		if (!n) return;
-		let r = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(m) ?? void 0, i = r ? Number(r.dataset.level) : 0, a = t(n) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		let r = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(h) ?? void 0, i = r ? Number(r.dataset.level) : 0, a = t(n) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
 		switch (e.key) {
 			case "ArrowDown":
 			case "ArrowUp": {
 				e.preventDefault();
-				let t = Y[i] ?? [];
+				let t = X[i] ?? [];
 				if (t.length === 0) return;
 				let n = r ? t.findIndex((e) => e.value === r.dataset.value) : -1, a = n < 0 ? e.key === "ArrowDown" ? 0 : t.length - 1 : (n + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length;
-				X(i, a);
+				Z(i, a);
 				return;
 			}
 			case a:
 				if (r?.getAttribute("aria-haspopup") !== "true") return;
-				e.preventDefault(), A([...k.slice(0, i), r.dataset.value]), M({
+				e.preventDefault(), j([...A.slice(0, i), r.dataset.value]), N({
 					level: i + 1,
 					index: 0
 				});
 				return;
 			case o: {
-				if (!r || k.length === 0) return;
+				if (!r || A.length === 0) return;
 				e.preventDefault();
-				let t = k[k.length - 1];
-				A(k.slice(0, -1)), M({
-					level: k.length - 1,
+				let t = A[A.length - 1];
+				j(A.slice(0, -1)), N({
+					level: A.length - 1,
 					index: 0,
 					value: t
 				});
@@ -182,30 +189,30 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 			case "Home":
 			case "End": {
 				e.preventDefault();
-				let t = Y[i] ?? [];
+				let t = X[i] ?? [];
 				if (t.length === 0) return;
-				X(i, e.key === "Home" ? 0 : t.length - 1);
+				Z(i, e.key === "Home" ? 0 : t.length - 1);
 				return;
 			}
 			case "Enter": {
 				if (!r) return;
 				e.preventDefault();
-				let t = Y[i]?.find((e) => e.value === r.dataset.value);
+				let t = X[i]?.find((e) => e.value === r.dataset.value);
 				if (!t) return;
-				t.children?.length ? (A([...k.slice(0, i), t.value]), M({
+				t.children?.length ? (j([...A.slice(0, i), t.value]), N({
 					level: i + 1,
 					index: 0
-				})) : Ue(t, i);
+				})) : We(t, i);
 				return;
 			}
 			case "Escape":
 			case "Tab":
-				e.preventDefault(), T(!1);
+				e.preventDefault(), E(!1);
 				return;
 		}
-	}, qe = (t, n, r) => {
-		let i = !!t.children?.length, a = k[n] === t.value;
-		return /* @__PURE__ */ f("button", {
+	}, Je = (t, n, r) => {
+		let i = !!t.children?.length, a = A[n] === t.value;
+		return /* @__PURE__ */ p("button", {
 			"data-slot": "option",
 			type: "button",
 			role: "menuitem",
@@ -214,110 +221,120 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 			"data-value": t.value,
 			"aria-haspopup": i ? "true" : void 0,
 			"aria-expanded": i ? a : void 0,
-			"aria-setsize": F ? Y[n]?.length : void 0,
-			"aria-posinset": F ? r + 1 : void 0,
-			onClick: () => Ue(t, n),
-			onMouseEnter: () => We(t, n),
+			"aria-setsize": I ? X[n]?.length : void 0,
+			"aria-posinset": I ? r + 1 : void 0,
+			onClick: () => We(t, n),
+			onMouseEnter: () => Ge(t, n),
 			className: e([
 				Te,
 				a && Ee,
-				F && we
+				I && we,
+				S?.option
 			]),
-			children: [/* @__PURE__ */ d("span", {
+			children: [/* @__PURE__ */ f("span", {
 				"data-slot": "label",
-				className: e(De),
+				className: e([De, S?.label]),
 				children: t.label
-			}), i && /* @__PURE__ */ d("span", {
+			}), i && /* @__PURE__ */ f("span", {
 				role: "img",
 				"data-slot": "icon",
 				"aria-label": Le.expand,
-				className: e(Oe),
-				children: /* @__PURE__ */ d(ke, {})
+				className: e([Oe, S?.icon]),
+				children: /* @__PURE__ */ f(ke, {})
 			})]
 		}, t.value);
-	}, Je = Y.map((t, n) => /* @__PURE__ */ d("div", {
+	}, Ye = X.map((t, n) => /* @__PURE__ */ f("div", {
 		"data-slot": "column",
 		role: "menu",
 		"data-haze-cascader-column": n,
-		className: e([be, F && xe]),
-		children: F ? /* @__PURE__ */ d(ee, {
+		className: e([
+			be,
+			I && xe,
+			S?.column
+		]),
+		children: I ? /* @__PURE__ */ f(ee, {
 			ref: He(n),
 			"data-virtualized": !0,
 			items: t,
-			height: Math.min(Se, t.length * L),
-			itemHeight: L,
+			height: Math.min(Se, t.length * R),
+			itemHeight: R,
 			overscan: ze,
-			renderItem: (e, t) => qe(e, n, t)
-		}) : t.map((e, t) => qe(e, n, t))
-	}, n)), $ = b ? /* @__PURE__ */ f("div", {
+			renderItem: (e, t) => Je(e, n, t)
+		}) : t.map((e, t) => Je(e, n, t))
+	}, n)), $ = b ? /* @__PURE__ */ p("div", {
 		"data-slot": "loading",
-		className: e(ve),
-		children: [/* @__PURE__ */ d(r, { size: "sm" }), /* @__PURE__ */ d("span", { children: C.loading })]
-	}) : N && _.length === 0 ? /* @__PURE__ */ d("div", {
+		className: e([ve, S?.loading]),
+		children: [/* @__PURE__ */ f(r, { size: "sm" }), /* @__PURE__ */ f("span", { children: w.loading })]
+	}) : P && s.length === 0 ? /* @__PURE__ */ f("div", {
 		"data-slot": "empty",
-		className: e(ye),
-		children: C.noMatch
-	}) : Je;
-	return /* @__PURE__ */ f("div", {
+		className: e([ye, S?.empty]),
+		children: w.noMatch
+	}) : Ye;
+	return /* @__PURE__ */ p("div", {
 		...Ie,
-		className: e([ce, Fe]),
-		children: [/* @__PURE__ */ f("button", {
+		className: e([
+			ce,
+			Fe,
+			S?.root
+		]),
+		children: [/* @__PURE__ */ p("button", {
 			ref: Be,
 			"data-slot": "trigger",
 			type: "button",
-			style: W.triggerStyle,
+			style: G.triggerStyle,
 			"aria-haspopup": "menu",
-			"aria-expanded": w,
-			"aria-controls": R,
-			onPointerDown: W.onTriggerPointerDown,
-			onClick: W.onTriggerClick,
-			onKeyDown: Ge,
-			className: e(le),
-			children: [/* @__PURE__ */ d("span", {
+			"aria-expanded": T,
+			"aria-controls": z,
+			onPointerDown: G.onTriggerPointerDown,
+			onClick: G.onTriggerClick,
+			onKeyDown: Ke,
+			className: e([le, S?.trigger]),
+			children: [/* @__PURE__ */ f("span", {
 				"data-slot": "value",
-				className: e(ue),
-				children: Z.length === 0 ? /* @__PURE__ */ d("span", {
+				className: e([ue, S?.value]),
+				children: Q.length === 0 ? /* @__PURE__ */ f("span", {
 					"data-slot": "placeholder",
-					className: e(de),
+					className: e([de, S?.placeholder]),
 					children: Me
-				}) : Z.map((t, n) => /* @__PURE__ */ f(ne, { children: [n > 0 && /* @__PURE__ */ d("span", {
+				}) : Q.map((t, n) => /* @__PURE__ */ p(ne, { children: [n > 0 && /* @__PURE__ */ f("span", {
 					"data-slot": "separator",
-					className: e(pe),
+					className: e([pe, S?.separator]),
 					children: " / "
 				}), t.label] }, t.value))
-			}), /* @__PURE__ */ d("span", {
+			}), /* @__PURE__ */ f("span", {
 				"data-slot": "icon",
 				"aria-hidden": "true",
-				className: e(fe),
-				children: /* @__PURE__ */ d(Ae, {})
+				className: e([fe, S?.icon]),
+				children: /* @__PURE__ */ f(Ae, {})
 			})]
-		}), /* @__PURE__ */ d(a, {
+		}), /* @__PURE__ */ f(a, {
 			ref: Ve,
-			behavior: W,
+			behavior: G,
 			placement: "bottom",
-			id: N ? void 0 : R,
-			role: N || b ? void 0 : "menu",
+			className: S?.content,
+			id: P ? void 0 : z,
+			role: P || b ? void 0 : "menu",
 			"aria-busy": b || void 0,
-			visualClass: N ? he : me,
-			onKeyDown: Ke,
-			children: N ? /* @__PURE__ */ f(ie, { children: [/* @__PURE__ */ d("input", {
-				ref: V,
+			visualClass: P ? he : me,
+			onKeyDown: qe,
+			children: P ? /* @__PURE__ */ p(ie, { children: [/* @__PURE__ */ f("input", {
+				ref: H,
 				"data-slot": "input",
 				type: "text",
-				"aria-label": C.searchLabel,
-				placeholder: C.searchPlaceholder,
-				value: P,
+				"aria-label": w.searchLabel,
+				placeholder: w.searchPlaceholder,
+				value: F,
 				onChange: (e) => Re(e.target.value),
-				className: e(_e)
-			}), /* @__PURE__ */ d("div", {
-				id: R,
+				className: e([_e, S?.input])
+			}), /* @__PURE__ */ f("div", {
+				id: z,
 				"data-slot": "columns",
-				role: !b && _.length > 0 ? "menu" : void 0,
-				className: e(ge),
+				role: !b && s.length > 0 ? "menu" : void 0,
+				className: e([ge, S?.columns]),
 				children: $
 			})] }) : $
 		})]
 	});
 }
 //#endregion
-export { _ as default };
+export { v as default };