haze-ui 1.27.0 → 1.28.0

package/dist/components/Cascader/Cascader.js

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

package/dist/components/Chart/Chart.js

@@ -7,23 +7,26 @@ import { jsx as r } from "react/jsx-runtime";
 import { useMemo as i } from "react";
 //#region src/lib/components/Chart/Chart.tsx
 var a = "haze-Chart__root";
-function o({ type: o, data: s, series: c, xKey: l, height: u = 300, showLegend: d = !1, showGrid: f = !0, showTooltip: p = !0, className: m, style: h, ...g }) {
-	let _ = i(() => n(c), [c]);
+function o({ type: o, data: s, series: c, xKey: l, height: u = 300, innerRadius: d = 0, layout: f = "horizontal", renderTooltip: p, showLegend: m = !1, showGrid: h = !0, showTooltip: g = !0, className: _, style: v, ...y }) {
+	let b = i(() => n(c), [c]);
 	return /* @__PURE__ */ r("div", {
 		style: {
 			height: u,
-			...h
+			...v
 		},
-		...g,
-		className: e([a, m]),
+		...y,
+		className: e([a, _]),
 		children: t({
 			type: o,
 			data: s,
 			xKey: l,
-			showGrid: f,
-			showTooltip: p,
-			showLegend: d,
-			series: _
+			showGrid: h,
+			showTooltip: g,
+			showLegend: m,
+			series: b,
+			layout: f,
+			innerRadius: d,
+			renderTooltip: p ? (e) => p(e) : void 0
 		})
 	});
 }