haze-ui 1.26.0 → 1.27.0

package/dist/components/Carousel/Carousel.js

@@ -1,71 +1,94 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { formatString as t } from "../LocaleProvider/locale.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { formatString as n } from "../LocaleProvider/locale.js";
+import { useStrings as r } from "../LocaleProvider/useStrings.js";
 /* empty css                   */
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Children as o, useEffect as s, useRef as c } from "react";
-import { useControl as l } from "react-use-control";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Children as s, useEffect as c, useRef as l } from "react";
+import { useControl as u } from "react-use-control";
 //#region src/lib/components/Carousel/Carousel.tsx
-var u = "haze-Carousel__wrapper", d = "haze-Carousel__track", f = "haze-Carousel__navBtn", p = "haze-Carousel__prevBtn", m = "haze-Carousel__nextBtn", h = "haze-Carousel__indicators", g = "haze-Carousel__dot", _ = "haze-Carousel__dotActive";
-function v({ value: v, autoPlay: y = !1, interval: b = 5e3, className: x, children: S }) {
-	let [C, w] = l(v, 0), T = c(null), E = o.count(S), D = n("carousel");
-	return s(() => {
-		let e = T.current;
+var d = "haze-Carousel__wrapper", f = "haze-Carousel__track", p = "haze-Carousel__navBtn", m = "haze-Carousel__prevBtn", h = "haze-Carousel__nextBtn", g = "haze-Carousel__indicators", _ = "haze-Carousel__dot", v = "haze-Carousel__dotActive";
+function y({ value: y, autoPlay: b = !1, interval: x = 5e3, className: S, children: C }) {
+	let [w, T] = u(y, 0), E = l(null), D = l(null), O = s.count(C), k = r("carousel");
+	c(() => {
+		let e = E.current;
 		if (!e) return;
-		let t = e.children[C];
+		let t = e.children[w];
 		t && t.scrollIntoView({
 			behavior: "smooth",
 			block: "nearest",
 			inline: "start"
 		});
-	}, [C]), s(() => {
-		if (!y || E <= 1) return;
+	}, [w]), c(() => {
+		if (!b || O <= 1) return;
 		let e = setInterval(() => {
-			w((e) => (e + 1) % E);
-		}, b);
+			T((e) => (e + 1) % O);
+		}, x);
 		return () => clearInterval(e);
 	}, [
-		y,
 		b,
-		E,
-		w
-	]), /* @__PURE__ */ a("div", {
+		x,
+		O,
+		T
+	]);
+	let A = () => T((e) => (e - 1 + O) % O), j = () => T((e) => (e + 1) % O);
+	return /* @__PURE__ */ o("div", {
+		ref: D,
 		role: "region",
 		"aria-roledescription": "carousel",
-		"aria-label": D.label,
-		className: e([u, x]),
-		children: [/* @__PURE__ */ i("div", {
-			ref: T,
-			className: d,
-			children: S
-		}), E > 1 && /* @__PURE__ */ a(r, { children: [
-			/* @__PURE__ */ i("button", {
+		"aria-label": k.label,
+		tabIndex: 0,
+		onKeyDown: (e) => {
+			if (O <= 1) return;
+			let n = t(D.current) === "rtl" ? "ArrowLeft" : "ArrowRight", r = n === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+			switch (e.key) {
+				case n:
+					e.preventDefault(), j();
+					return;
+				case r:
+					e.preventDefault(), A();
+					return;
+				case "Home":
+					e.preventDefault(), T(0);
+					return;
+				case "End":
+					e.preventDefault(), T(O - 1);
+					return;
+			}
+		},
+		className: e([d, S]),
+		children: [/* @__PURE__ */ a("div", {
+			ref: E,
+			className: f,
+			children: C
+		}), O > 1 && /* @__PURE__ */ o(i, { children: [
+			/* @__PURE__ */ a("button", {
 				type: "button",
-				onClick: () => w((e) => (e - 1 + E) % E),
-				"aria-label": D.previousSlide,
-				className: e([f, p]),
+				onClick: A,
+				"aria-label": k.previousSlide,
+				className: e([p, m]),
 				children: "‹"
 			}),
-			/* @__PURE__ */ i("button", {
+			/* @__PURE__ */ a("button", {
 				type: "button",
-				onClick: () => w((e) => (e + 1) % E),
-				"aria-label": D.nextSlide,
-				className: e([f, m]),
+				onClick: j,
+				"aria-label": k.nextSlide,
+				className: e([p, h]),
 				children: "›"
 			}),
-			/* @__PURE__ */ i("div", {
-				className: h,
-				children: Array.from({ length: E }, (n, r) => /* @__PURE__ */ i("button", {
+			/* @__PURE__ */ a("div", {
+				className: g,
+				children: Array.from({ length: O }, (t, r) => /* @__PURE__ */ a("button", {
 					type: "button",
-					onClick: () => w(r),
-					"aria-label": t(D.goToSlide, { index: r + 1 }),
-					className: e([g, r === C && _])
+					onClick: () => T(r),
+					"aria-label": n(k.goToSlide, { index: r + 1 }),
+					className: e([_, r === w && v])
 				}, r))
 			})
 		] })]
 	});
 }
 //#endregion
-export { v as default };
+export { y as default };

package/dist/components/Cascader/Cascader.js

@@ -1,15 +1,18 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useFocusScope as t } from "../../utils/focus-scope.js";
-import { FloatingPanel as n, useFloating as r } from "../../utils/floating.js";
-import { useStrings as i } from "../LocaleProvider/useStrings.js";
+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";
 /* empty css                   */
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Fragment as ee, useCallback as s, useEffect as c, useId as te, useRef as l, useState as ne } from "react";
-import { isControl as u, useControl as d, useThru as f, watch as p } from "react-use-control";
+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";
 //#region src/lib/components/Cascader/Cascader.tsx
-var m = "haze-Cascader__wrapper", h = "haze-Cascader__trigger", g = "haze-Cascader__triggerValue", _ = "haze-Cascader__triggerPlaceholder", re = "haze-Cascader__triggerCaret", ie = "haze-Cascader__separator", ae = "haze-Cascader__panel", oe = "haze-Cascader__column", se = "haze-Cascader__item", v = "haze-Cascader__itemInPath", y = "haze-Cascader__itemLabel", b = "haze-Cascader__chevron", x = () => /* @__PURE__ */ a("svg", {
+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", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
@@ -18,8 +21,8 @@ var m = "haze-Cascader__wrapper", h = "haze-Cascader__trigger", g = "haze-Cascad
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: a("path", { d: "M4 2l4 4-4 4" })
-}), S = () => /* @__PURE__ */ a("svg", {
+	children: c("path", { d: "M4 2l4 4-4 4" })
+}), v = () => /* @__PURE__ */ c("svg", {
 	viewBox: "0 0 12 12",
 	fill: "none",
 	stroke: "currentColor",
@@ -28,201 +31,246 @@ var m = "haze-Cascader__wrapper", h = "haze-Cascader__trigger", g = "haze-Cascad
 	strokeLinejoin: "round",
 	"aria-hidden": "true",
 	focusable: "false",
-	children: a("path", { d: "M2 4l4 4 4-4" })
-}), C = "[role=\"menuitem\"]";
-function w(e) {
+	children: c("path", { d: "M2 4l4 4 4-4" })
+}), y = "[role=\"menuitem\"]";
+function b(e) {
 	return e ? Array.from(e.querySelectorAll("[data-haze-cascader-column]")) : [];
 }
-function T(e) {
-	return e ? Array.from(e.querySelectorAll(C)) : [];
+function x(e) {
+	return e ? Array.from(e.querySelectorAll(y)) : [];
 }
-function E({ options: E, value: D, onChange: O, placeholder: k, changeOnSelect: A = !1, expandTrigger: j = "click", className: M, ...N }) {
-	let P = i("cascader"), [F, I] = d(!1, !1), L = u(D), [R, z] = d(f(L ? D : void 0, p((e) => O?.(e))), L ? [] : D ?? []), [B, V] = ne([]), H = te(), U = l(null), W = l(null), G = l(null), K = l(!1), q = r({
-		open: F,
-		setOpen: I,
-		triggerRef: U,
-		panelRef: W,
+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,
 		animated: !0
-	}), J = t({
-		enabled: F,
+	}), K = s({
+		enabled: O,
 		autoFocus: !1,
 		returnFocus: !0
-	}), Y = l(!1);
-	c(() => {
-		let e = F && !Y.current;
-		Y.current = F, e && V(R);
-	}, [F, R]), c(() => {
-		if (!F) {
-			K.current = !1, G.current = null;
+	}), 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);
 			return;
 		}
-		if (!q.shown) return;
-		let e = G.current;
+		if (!G.shown) return;
+		let e = F;
 		if (e) {
-			G.current = null;
-			let t = T(w(W.current)[e.level]), n = e.value === void 0 ? e.index : t.findIndex((t) => t.dataset.value === e.value);
+			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);
 			(n >= 0 ? t[n] : t[0])?.focus();
 			return;
 		}
-		if (K.current) return;
-		let t = W.current;
+		if (W.current) return;
+		let t = H.current;
 		if (!t) return;
-		let n = Array.from(t.querySelectorAll(C)), r = R.length - 1, i = R[r], a;
+		let n = Array.from(t.querySelectorAll(y)), r = j.length - 1, i = j[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 ?? [];
+				let t = e.findIndex((e) => e.value === i);
+				if (t >= 0) {
+					U.current.get(r)?.scrollToIndex(t, "auto"), W.current = !0, I({
+						level: r,
+						index: t,
+						value: i
+					});
+					return;
+				}
+			}
 			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 && (K.current = !0, a.focus());
+		a && (W.current = !0, a.focus());
 	}, [
+		O,
+		G.shown,
+		N,
+		j,
 		F,
-		q.shown,
-		B,
-		R
+		L,
+		S
 	]);
-	let ce = s((e) => {
-		W.current = e, J(e);
-	}, [W, J]), X = [E];
-	for (let e of B) {
-		let t = X.at(-1).find((t) => t.value === e)?.children;
+	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;
 		if (!t?.length) break;
-		X.push(t);
+		J.push(t);
 	}
-	let Z = [], Q = E;
-	for (let e of R) {
-		let t = Q.find((t) => t.value === e);
+	let Y = (e, t) => {
+		let n = J[e]?.[t];
+		if (n) {
+			if (L) {
+				U.current.get(e)?.scrollToIndex(t, "auto"), I({
+					level: e,
+					index: t,
+					value: n.value
+				});
+				return;
+			}
+			x(b(H.current)[e])[t]?.focus();
+		}
+	}, X = [], Z = S;
+	for (let e of j) {
+		let t = Z.find((t) => t.value === e);
 		if (!t) break;
-		Z.push(t), Q = t.children ?? [];
+		X.push(t), Z = t.children ?? [];
 	}
-	let $ = (e, t) => {
-		let n = [...B.slice(0, t), e.value];
-		e.children?.length ? (V(n), A && z(n)) : (z(n), I(!1), U.current?.focus());
-	}, le = (e, t) => {
-		j === "hover" && V([...B.slice(0, t), e.value]);
-	}, ue = (e) => {
-		!F && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), I(!0));
-	}, de = (e) => {
-		let t = W.current;
+	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;
 		if (!t) return;
-		let n = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(C) ?? void 0, r = n?.closest("[data-haze-cascader-column]"), i = n ? Number(n.dataset.level) : 0;
+		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";
 		switch (e.key) {
 			case "ArrowDown":
 			case "ArrowUp": {
 				e.preventDefault();
-				let i = T(r ?? w(t)[0]);
-				if (i.length === 0) return;
-				let a = n ? i.indexOf(n) : -1;
-				i[a < 0 ? e.key === "ArrowDown" ? 0 : i.length - 1 : (a + (e.key === "ArrowDown" ? 1 : -1) + i.length) % i.length]?.focus();
+				let t = J[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);
 				return;
 			}
-			case "ArrowRight":
-				if (n?.getAttribute("aria-haspopup") !== "true") return;
-				e.preventDefault(), V([...B.slice(0, i), n.dataset.value]), G.current = {
+			case a:
+				if (r?.getAttribute("aria-haspopup") !== "true") return;
+				e.preventDefault(), P([...N.slice(0, i), r.dataset.value]), I({
 					level: i + 1,
 					index: 0
-				};
+				});
 				return;
-			case "ArrowLeft": {
-				if (!n || B.length === 0) return;
+			case o: {
+				if (!r || N.length === 0) return;
 				e.preventDefault();
-				let t = B[B.length - 1];
-				V(B.slice(0, -1)), G.current = {
-					level: B.length - 1,
+				let t = N[N.length - 1];
+				P(N.slice(0, -1)), I({
+					level: N.length - 1,
 					index: 0,
 					value: t
-				};
+				});
 				return;
 			}
 			case "Home":
 			case "End": {
 				e.preventDefault();
-				let n = T(r ?? w(t)[0]);
-				if (n.length === 0) return;
-				(e.key === "Home" ? n[0] : n[n.length - 1])?.focus();
+				let t = J[i] ?? [];
+				if (t.length === 0) return;
+				Y(i, e.key === "Home" ? 0 : t.length - 1);
 				return;
 			}
 			case "Enter": {
-				if (!n) return;
+				if (!r) return;
 				e.preventDefault();
-				let t = X[i]?.find((e) => e.value === n.dataset.value);
+				let t = J[i]?.find((e) => e.value === r.dataset.value);
 				if (!t) return;
-				t.children?.length ? (V([...B.slice(0, i), t.value]), G.current = {
+				t.children?.length ? (P([...N.slice(0, i), t.value]), I({
 					level: i + 1,
 					index: 0
-				}) : $(t, i);
+				})) : Q(t, i);
 				return;
 			}
 			case "Escape":
 			case "Tab":
-				e.preventDefault(), I(!1);
+				e.preventDefault(), k(!1);
 				return;
 		}
+	}, $ = (t, n, r) => {
+		let i = !!t.children?.length, a = N[n] === t.value;
+		return /* @__PURE__ */ l("button", {
+			type: "button",
+			role: "menuitem",
+			tabIndex: -1,
+			"data-level": n,
+			"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),
+			className: e([
+				ge,
+				a && _e,
+				L && he
+			]),
+			children: [/* @__PURE__ */ c("span", {
+				className: e(ve),
+				children: t.label
+			}), i && /* @__PURE__ */ c("span", {
+				role: "img",
+				"aria-label": D.expand,
+				className: e(g),
+				children: /* @__PURE__ */ c(_, {})
+			})]
+		}, t.value);
 	};
-	return /* @__PURE__ */ o("div", {
-		...N,
-		className: e([m, M]),
-		children: [/* @__PURE__ */ o("button", {
-			ref: U,
+	return /* @__PURE__ */ l("div", {
+		...E,
+		className: e([ae, Ce]),
+		children: [/* @__PURE__ */ l("button", {
+			ref: Te,
 			type: "button",
-			style: q.triggerStyle,
+			style: G.triggerStyle,
 			"aria-haspopup": "menu",
-			"aria-expanded": F,
-			"aria-controls": H,
-			onPointerDown: q.onTriggerPointerDown,
-			onClick: q.onTriggerClick,
-			onKeyDown: ue,
-			className: e(h),
-			children: [/* @__PURE__ */ a("span", {
-				className: e(g),
-				children: Z.length === 0 ? /* @__PURE__ */ a("span", {
-					className: e(_),
-					children: k
-				}) : Z.map((t, n) => /* @__PURE__ */ o(ee, { children: [n > 0 && /* @__PURE__ */ a("span", {
-					className: e(ie),
+			"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),
 					children: " / "
 				}), t.label] }, t.value))
-			}), /* @__PURE__ */ a("span", {
+			}), /* @__PURE__ */ c("span", {
 				"aria-hidden": "true",
-				className: e(re),
-				children: /* @__PURE__ */ a(S, {})
+				className: e(le),
+				children: /* @__PURE__ */ c(v, {})
 			})]
-		}), /* @__PURE__ */ a(n, {
-			ref: ce,
-			behavior: q,
+		}), /* @__PURE__ */ c(i, {
+			ref: Ee,
+			behavior: G,
 			placement: "bottom",
-			id: H,
+			id: B,
 			role: "menu",
-			visualClass: ae,
-			onKeyDown: de,
-			children: X.map((t, n) => /* @__PURE__ */ a("div", {
+			visualClass: de,
+			onKeyDown: Ae,
+			children: J.map((t, n) => /* @__PURE__ */ c("div", {
 				role: "menu",
 				"data-haze-cascader-column": n,
-				className: e(oe),
-				children: t.map((t) => {
-					let r = !!t.children?.length, i = B[n] === t.value;
-					return /* @__PURE__ */ o("button", {
-						type: "button",
-						role: "menuitem",
-						tabIndex: -1,
-						"data-level": n,
-						"data-value": t.value,
-						"aria-haspopup": r ? "true" : void 0,
-						"aria-expanded": r ? i : void 0,
-						onClick: () => $(t, n),
-						onMouseEnter: () => le(t, n),
-						className: e([se, i && v]),
-						children: [/* @__PURE__ */ a("span", {
-							className: e(y),
-							children: t.label
-						}), r && /* @__PURE__ */ a("span", {
-							role: "img",
-							"aria-label": P.expand,
-							className: e(b),
-							children: /* @__PURE__ */ a(x, {})
-						})]
-					}, t.value);
-				})
+				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))
 		})]
 	});
 }
 //#endregion
-export { E as default };
+export { S as default };

package/dist/components/Chart/Chart.js

@@ -0,0 +1,31 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { chartTree as t, resolveChartSeries as n } from "./chart-elements.js";
+/* empty css                */
+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]);
+	return /* @__PURE__ */ r("div", {
+		style: {
+			height: u,
+			...h
+		},
+		...g,
+		className: e([a, m]),
+		children: t({
+			type: o,
+			data: s,
+			xKey: l,
+			showGrid: f,
+			showTooltip: p,
+			showLegend: d,
+			series: _
+		})
+	});
+}
+//#endregion
+export { o as default };