haze-ui 1.25.0 → 1.27.0

package/dist/components/Calendar/Calendar.js

@@ -1,12 +1,15 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { addMonths as r, buildMonthCells as i, formatDate as a, formatMonthValue as o, formatQuarterValue as s, formatYearValue as c, getDaysInMonth as l, getISOWeekNumber as u, parseCivilDate as d, parseMonthValue as f, parseQuarterValue as ee, parseYearValue as p } from "./date.js";
 /* empty css                   */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useState as i } from "react";
-import { useControl as a } from "react-use-control";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useEffect as g, useRef as _, useState as v } from "react";
+import { useControl as te } from "react-use-control";
 //#region src/lib/components/Calendar/Calendar.tsx
-var o = "haze-Calendar__calendarWrapper", s = "haze-Calendar__header", c = "haze-Calendar__headerBtn", l = "haze-Calendar__headerTitle", u = "haze-Calendar__headerTrailing", d = "haze-Calendar__grid", f = "haze-Calendar__rowContents", p = "haze-Calendar__cellContents", m = "haze-Calendar__weekday", h = "haze-Calendar__dayBtn", g = "haze-Calendar__daySelected", _ = "haze-Calendar__dayOutside", v = [
+var ne = "haze-Calendar__calendarWrapper", re = "haze-Calendar__header", y = "haze-Calendar__headerBtn", b = "haze-Calendar__headerTitle", ie = "haze-Calendar__titleBtn", ae = "haze-Calendar__headerTrailing", oe = "haze-Calendar__grid", x = "haze-Calendar__rowContents", S = "haze-Calendar__cellContents", se = "haze-Calendar__weekday", ce = "haze-Calendar__weekNumber", C = "haze-Calendar__dayBtn", w = "haze-Calendar__daySelected", le = "haze-Calendar__dayInRange", ue = "haze-Calendar__dayOutside", de = "haze-Calendar__monthPanels", fe = "haze-Calendar__monthPanel", pe = "haze-Calendar__paneHeader", me = "haze-Calendar__quickSelect", he = "haze-Calendar__quickToolbar", T = "haze-Calendar__quickGrid", ge = "haze-Calendar__quarterGrid", _e = [
 	"Su",
 	"Mo",
 	"Tu",
@@ -15,7 +18,7 @@ var o = "haze-Calendar__calendarWrapper", s = "haze-Calendar__header", c = "haze
 	"Fr",
 	"Sa"
 ];
-function y(e, t) {
+function ve(e, t) {
 	if (t !== void 0) return t;
 	if (e === void 0) return 0;
 	try {
@@ -25,128 +28,473 @@ function y(e, t) {
 		return 0;
 	}
 }
-function b(e, t) {
-	if (e === void 0) return Array.from({ length: 7 }, (e, n) => v[(t + n) % 7]);
+function ye(e, t) {
+	if (e === void 0) return Array.from({ length: 7 }, (e, n) => _e[(t + n) % 7]);
 	let n = new Intl.DateTimeFormat(e, { weekday: "short" }), r = Array.from({ length: 7 }, (e, t) => n.format(new Date(2024, 0, 7 + t)));
 	return Array.from({ length: 7 }, (e, n) => r[(t + n) % 7]);
 }
-function x(e, t) {
-	return new Date(e, t + 1, 0).getDate();
+function E(e) {
+	return Array.from(e?.querySelectorAll("button") ?? []);
 }
-function S(e, t, n) {
-	return `${e}-${String(t + 1).padStart(2, "0")}-${String(n).padStart(2, "0")}`;
+function D(e, t, n) {
+	let r = t + n;
+	for (; r >= 0 && r < e.length && e[r].disabled;) r += n;
+	return r < 0 || r >= e.length ? null : r;
 }
-function C({ value: v, min: C, max: w, locale: T, weekStartsOn: E, onSelect: D, className: O, ...k }) {
-	let [A, j] = a(v, ""), M = t("calendar"), N = A ? new Date(A) : /* @__PURE__ */ new Date(), [P, F] = i(N.getFullYear()), [I, L] = i(N.getMonth()), R = y(T, E), z = b(T, R), B = x(P, I), V = new Date(P, I, 1).getDay(), H = x(P, I - 1), U = (V - R + 7) % 7, W = () => {
-		L((e) => e === 0 ? (F((e) => e - 1), 11) : e - 1);
-	}, G = () => {
-		L((e) => e === 11 ? (F((e) => e + 1), 0) : e + 1);
-	}, K = () => {
-		let e = /* @__PURE__ */ new Date();
-		F(e.getFullYear()), L(e.getMonth());
-	}, q = (e) => !!(C && e < C || w && e > w), J = [];
-	for (let e = U - 1; e >= 0; e--) {
-		let t = I === 0 ? 11 : I - 1, n = I === 0 ? P - 1 : P;
-		J.push({
-			day: H - e,
-			month: t,
-			year: n,
-			outside: !0
-		});
-	}
-	for (let e = 1; e <= B; e++) J.push({
-		day: e,
-		month: I,
-		year: P,
-		outside: !1
-	});
-	let Y = 7 - J.length % 7;
-	if (Y < 7) for (let e = 1; e <= Y; e++) {
-		let t = I === 11 ? 0 : I + 1, n = I === 11 ? P + 1 : P;
-		J.push({
-			day: e,
-			month: t,
-			year: n,
-			outside: !0
-		});
-	}
-	let X = new Intl.DateTimeFormat(T ?? "default", {
+function be(e, n, i, o) {
+	return (s) => {
+		let c = e.current;
+		if (!c) return;
+		let u = E(c);
+		if (u.length === 0) return;
+		let d = u.indexOf(s.target.closest("button")), f = t(c) === "rtl" ? "ArrowLeft" : "ArrowRight", ee = f === "ArrowLeft" ? "ArrowRight" : "ArrowLeft", p = (e) => {
+			let t = D(u, d < 0 ? 0 : d, e);
+			t !== null && (s.preventDefault(), u[t].focus());
+		};
+		switch (s.key) {
+			case f:
+				p(1);
+				return;
+			case ee:
+				p(-1);
+				return;
+			case "ArrowDown":
+				p(7);
+				return;
+			case "ArrowUp":
+				p(-7);
+				return;
+			case "Home": {
+				let e = D(u, (d < 0 ? 0 : d - d % 7) - 1, 1);
+				e !== null && (s.preventDefault(), u[e].focus());
+				return;
+			}
+			case "End": {
+				let e = D(u, (d < 0 ? 6 : d - d % 7 + 6) + 1, -1);
+				e !== null && (s.preventDefault(), u[e].focus());
+				return;
+			}
+			case "PageUp":
+			case "PageDown": {
+				s.preventDefault();
+				let e = s.key === "PageDown" ? 1 : -1, t = r(n.year, n.month, e), c = d >= 0 ? Number(u[d].textContent) : 1, f = Math.min(Math.max(c, 1), l(t.year, t.month));
+				i(t), o.current = a(t.year, t.month, f);
+				return;
+			}
+		}
+	};
+}
+function xe(e, n, r, i) {
+	return (a) => {
+		let o = e.current;
+		if (!o) return;
+		let s = E(o);
+		if (s.length === 0) return;
+		let c = s.indexOf(a.target.closest("button")), l = t(o) === "rtl" ? "ArrowLeft" : "ArrowRight", u = l === "ArrowLeft" ? "ArrowRight" : "ArrowLeft", d = (e) => {
+			let t = D(s, c < 0 ? 0 : c, e);
+			t !== null && (a.preventDefault(), s[t].focus());
+		};
+		switch (a.key) {
+			case l:
+				d(1);
+				return;
+			case u:
+				d(-1);
+				return;
+			case "ArrowDown":
+				d(n);
+				return;
+			case "ArrowUp":
+				d(-n);
+				return;
+			case "Home": {
+				let e = D(s, (c < 0 ? 0 : c - c % n) - 1, 1);
+				e !== null && (a.preventDefault(), s[e].focus());
+				return;
+			}
+			case "End": {
+				let e = D(s, (c < 0 ? n - 1 : Math.min(c - c % n + n - 1, s.length - 1)) + 1, -1);
+				e !== null && (a.preventDefault(), s[e].focus());
+				return;
+			}
+			case "PageUp":
+			case "PageDown":
+				a.preventDefault(), i.current = c < 0 ? 0 : c, r(a.key === "PageDown" ? 1 : -1);
+				return;
+		}
+	};
+}
+function O({ picker: t = "date", value: _e, min: D, max: O, disabledDate: k, locale: A, weekStartsOn: Se, showWeekNumbers: j = !1, months: Ce = 1, rangeStart: M, rangeEnd: N, onSelect: we, className: Te, ...Ee }) {
+	let [P, De] = te(_e, ""), F = n("calendar"), I = _(null), Oe = _(null), L = _(null), R = _(null), z = _(null), B = _(null), V = _(null), ke = _(null), H = _(null), [U, W] = v(!1), [G, K] = v(0), Ae = t === "month" ? f(P) : t === "quarter" ? ee(P) : t === "year" ? p(P) : null, je = t === "date" ? P && d(P) || M && d(M) || /* @__PURE__ */ new Date() : Ae ? new Date(Ae.year, 0, 1) : /* @__PURE__ */ new Date(), [q, J] = v(je.getFullYear()), [Y, Me] = v(je.getMonth()), Ne = ve(A, Se), Pe = ye(A, Ne), X = new Intl.DateTimeFormat(A ?? "default", {
 		month: "long",
 		year: "numeric"
-	}).format(new Date(P, I)), Z = [];
-	for (let e = 0; e < J.length; e += 7) Z.push(J.slice(e, e + 7));
-	return /* @__PURE__ */ r("div", {
-		...k,
-		className: e([o, O]),
-		children: [/* @__PURE__ */ r("div", {
-			className: e([s]),
-			children: [
-				/* @__PURE__ */ n("button", {
-					type: "button",
-					onClick: W,
-					"aria-label": M.previousMonth,
-					className: e([c]),
-					children: "‹"
-				}),
-				/* @__PURE__ */ n("span", {
-					className: e([l]),
-					children: X
-				}),
-				/* @__PURE__ */ r("span", {
-					className: e([u]),
-					children: [/* @__PURE__ */ n("button", {
-						type: "button",
-						onClick: K,
-						className: e([c]),
-						children: M.today
-					}), /* @__PURE__ */ n("button", {
-						type: "button",
-						onClick: G,
-						"aria-label": M.nextMonth,
-						className: e([c]),
-						children: "›"
-					})]
-				})
-			]
-		}), /* @__PURE__ */ r("div", {
+	}), Fe = new Intl.DateTimeFormat(A ?? "default", { month: "short" }), Ie = Array.from({ length: 12 }, (e, t) => Fe.format(new Date(2026, t, 15))), Z = (e) => {
+		J(e.year), Me(e.month);
+	};
+	g(() => {
+		if (U) return;
+		let e = R.current;
+		e && (R.current = null, L.current?.querySelector(`[data-haze-day="${e}"]`)?.focus());
+	}, [
+		q,
+		Y,
+		U
+	]), g(() => {
+		if (!U) return;
+		let e = z.current;
+		z.current = null;
+		let t = E(H.current);
+		t.length !== 0 && (t[e ?? 0] ?? t[0]).focus();
+	}, [U, G]), g(() => {
+		if (t === "date") return;
+		let e = B.current;
+		if (B.current = null, e === null) return;
+		let n = E(V.current);
+		(n[e] ?? n[0])?.focus();
+	}, [t, q]);
+	let Le = () => {
+		z.current = Y, K(q), W(!0);
+	}, Re = () => {
+		W(!1), ke.current?.focus();
+	}, ze = (e) => {
+		W(!1), Z({
+			year: G,
+			month: e
+		}), R.current = a(G, e, 1);
+	}, Q = r(q, Y, Ce - 1), Be = be(I, {
+		year: q,
+		month: Y
+	}, Z, R), Ve = be(Oe, Q, Z, R), He = xe(H, 3, (e) => K((t) => t + e), z), Ue = t === "quarter" ? 4 : 3, $ = (e) => J((n) => n + e * (t === "year" ? 10 : 1)), We = xe(V, Ue, $, B), Ge = () => Z(r(q, Y, -1)), Ke = () => Z(r(q, Y, 1)), qe = () => {
+		let e = /* @__PURE__ */ new Date();
+		J(e.getFullYear()), Me(e.getMonth());
+	}, Je = (e, t, n) => {
+		let r = a(e, t, n);
+		return D && r < D || O && r > O ? !0 : k?.(new Date(e, t, n)) ?? !1;
+	}, Ye = (e, t) => D && a(e, t, l(e, t)) < D || O && a(e, t, 1) > O ? !0 : k?.(new Date(e, t, 1)) ?? !1, Xe = (e, t) => {
+		let n = t * 3 - 3, r = t * 3 - 1;
+		return D && a(e, r, l(e, r)) < D || O && a(e, n, 1) > O ? !0 : k?.(new Date(e, n, 1)) ?? !1;
+	}, Ze = (e) => D && a(e, 11, 31) < D || O && a(e, 0, 1) > O ? !0 : k?.(new Date(e, 0, 1)) ?? !1, Qe = (e) => {
+		De(e), we?.(e);
+	}, $e = M !== void 0 && M !== "", et = N !== void 0 && N !== "", tt = (e) => $e && e === M || et && e === N, nt = (e) => $e && et && e > M && e < N, rt = X.format(new Date(q, Y)), it = (t, n, r) => {
+		let o = i(t.year, t.month, Ne), s = [];
+		for (let e = 0; e < o.length; e += 7) s.push(o.slice(e, e + 7));
+		let c = X.format(new Date(t.year, t.month));
+		return /* @__PURE__ */ h("div", {
+			ref: n,
+			style: j ? { gridTemplateColumns: "repeat(8, 1fr)" } : void 0,
 			role: "grid",
-			"aria-label": X,
-			className: e([d]),
-			children: [/* @__PURE__ */ n("div", {
+			"aria-label": c,
+			onKeyDown: r,
+			className: e([oe]),
+			children: [/* @__PURE__ */ h("div", {
 				role: "row",
-				className: e([f]),
-				children: z.map((t, r) => /* @__PURE__ */ n("span", {
+				className: e([x]),
+				children: [j && /* @__PURE__ */ m("span", {
 					role: "columnheader",
-					className: e([m]),
+					className: e([se]),
+					children: F.weekNumber
+				}), Pe.map((t, n) => /* @__PURE__ */ m("span", {
+					role: "columnheader",
+					className: e([se]),
 					children: t
-				}, r))
-			}), Z.map((t, r) => /* @__PURE__ */ n("div", {
+				}, n))]
+			}), s.map((t, n) => /* @__PURE__ */ h("div", {
 				role: "row",
-				className: e([f]),
-				children: t.map((t) => {
-					let r = S(t.year, t.month, t.day);
-					return /* @__PURE__ */ n("span", {
+				className: e([x]),
+				children: [j && /* @__PURE__ */ m("span", {
+					role: "gridcell",
+					className: e([ce]),
+					children: u(t[0].year, t[0].month, t[0].day)
+				}), t.map((t) => {
+					let n = a(t.year, t.month, t.day), r = tt(n), i = n === P || r;
+					return /* @__PURE__ */ m("span", {
 						role: "gridcell",
-						"aria-selected": r === A,
-						className: e([p]),
-						children: /* @__PURE__ */ n("button", {
+						"aria-selected": i || nt(n),
+						className: e([S]),
+						children: /* @__PURE__ */ m("button", {
 							type: "button",
-							disabled: q(r),
+							"data-haze-day": n,
+							disabled: Je(t.year, t.month, t.day),
 							onClick: () => {
-								j(r), D?.(r);
+								De(n), we?.(n);
 							},
 							className: e([
-								h,
-								r === A && g,
-								t.outside && _
+								C,
+								i && w,
+								!i && nt(n) && le,
+								t.outside && ue
 							]),
 							children: t.day
 						})
+					}, n);
+				})]
+			}, n))]
+		});
+	}, at = /* @__PURE__ */ h("div", {
+		onKeyDown: ot,
+		className: e([me]),
+		children: [/* @__PURE__ */ h("div", {
+			className: e([he]),
+			children: [
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => K((e) => e - 1),
+					"aria-label": F.previousYear,
+					className: e([y]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ m("span", {
+					className: e([b]),
+					children: G
+				}),
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => K((e) => e + 1),
+					"aria-label": F.nextYear,
+					className: e([y]),
+					children: "›"
+				})
+			]
+		}), /* @__PURE__ */ m("div", {
+			ref: H,
+			role: "grid",
+			"aria-label": F.selectMonth,
+			onKeyDown: He,
+			className: e([T]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([x]),
+				children: [
+					0,
+					1,
+					2
+				].map((n) => {
+					let r = t * 3 + n, i = G === q && r === Y;
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": i,
+						className: e([S]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-month": r,
+							onClick: () => ze(r),
+							className: e([C, i && w]),
+							children: Ie[r]
+						})
 					}, r);
 				})
-			}, r))]
+			}, t))
 		})]
 	});
+	function ot(e) {
+		e.key === "Escape" && (e.preventDefault(), Re());
+	}
+	if (t !== "date") {
+		let n = Math.floor(q / 10) * 10, r = t === "year" ? F.previousDecade : F.previousYear, i = t === "year" ? F.nextDecade : F.nextYear, a = t === "year" ? `${n} – ${n + 11}` : String(q), l = t === "month" ? /* @__PURE__ */ m("div", {
+			ref: V,
+			role: "grid",
+			"aria-label": F.selectMonth,
+			onKeyDown: We,
+			className: e([T]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([x]),
+				children: [
+					0,
+					1,
+					2
+				].map((n) => {
+					let r = t * 3 + n, i = P === o(q, r);
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": i,
+						className: e([S]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-month": r,
+							disabled: Ye(q, r),
+							onClick: () => Qe(o(q, r)),
+							className: e([C, i && w]),
+							children: Ie[r]
+						})
+					}, r);
+				})
+			}, t))
+		}) : t === "quarter" ? /* @__PURE__ */ m("div", {
+			ref: V,
+			role: "grid",
+			"aria-label": F.selectQuarter,
+			onKeyDown: We,
+			className: e([ge]),
+			children: m("div", {
+				role: "row",
+				className: e([x]),
+				children: [
+					1,
+					2,
+					3,
+					4
+				].map((t) => {
+					let n = P === s(q, t);
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": n,
+						className: e([S]),
+						children: /* @__PURE__ */ h("button", {
+							type: "button",
+							"data-haze-quarter": t,
+							disabled: Xe(q, t),
+							onClick: () => Qe(s(q, t)),
+							className: e([C, n && w]),
+							children: ["Q", t]
+						})
+					}, t);
+				})
+			})
+		}) : /* @__PURE__ */ m("div", {
+			ref: V,
+			role: "grid",
+			"aria-label": F.selectYear,
+			onKeyDown: We,
+			className: e([T]),
+			children: [
+				0,
+				1,
+				2,
+				3
+			].map((t) => /* @__PURE__ */ m("div", {
+				role: "row",
+				className: e([x]),
+				children: [
+					0,
+					1,
+					2
+				].map((r) => {
+					let i = n + t * 3 + r, a = P === c(i);
+					return /* @__PURE__ */ m("span", {
+						role: "gridcell",
+						"aria-selected": a,
+						className: e([S]),
+						children: /* @__PURE__ */ m("button", {
+							type: "button",
+							"data-haze-year": i,
+							disabled: Ze(i),
+							onClick: () => Qe(c(i)),
+							className: e([C, a && w]),
+							children: i
+						})
+					}, i);
+				})
+			}, t))
+		});
+		return /* @__PURE__ */ h("div", {
+			ref: L,
+			...Ee,
+			className: e([ne, Te]),
+			children: [/* @__PURE__ */ h("div", {
+				className: e([re]),
+				children: [
+					/* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: () => $(-1),
+						"aria-label": r,
+						className: e([y]),
+						children: "‹"
+					}),
+					/* @__PURE__ */ m("span", {
+						className: e([b]),
+						children: a
+					}),
+					/* @__PURE__ */ h("span", {
+						className: e([ae]),
+						children: [/* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: qe,
+							className: e([y]),
+							children: F.today
+						}), /* @__PURE__ */ m("button", {
+							type: "button",
+							onClick: () => $(1),
+							"aria-label": i,
+							className: e([y]),
+							children: "›"
+						})]
+					})
+				]
+			}), l]
+		});
+	}
+	return /* @__PURE__ */ h("div", {
+		ref: L,
+		...Ee,
+		className: e([ne, Te]),
+		children: [/* @__PURE__ */ h("div", {
+			className: e([re]),
+			children: [
+				/* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: Ge,
+					"aria-label": F.previousMonth,
+					className: e([y]),
+					children: "‹"
+				}),
+				/* @__PURE__ */ m("button", {
+					ref: ke,
+					type: "button",
+					"aria-expanded": U,
+					onClick: U ? Re : Le,
+					className: e([ie, b]),
+					children: rt
+				}),
+				/* @__PURE__ */ h("span", {
+					className: e([ae]),
+					children: [/* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: qe,
+						className: e([y]),
+						children: F.today
+					}), /* @__PURE__ */ m("button", {
+						type: "button",
+						onClick: Ke,
+						"aria-label": F.nextMonth,
+						className: e([y]),
+						children: "›"
+					})]
+				})
+			]
+		}), U ? at : Ce === 2 ? /* @__PURE__ */ h("div", {
+			className: e([de]),
+			children: [/* @__PURE__ */ m("div", {
+				className: e([fe]),
+				children: it({
+					year: q,
+					month: Y
+				}, I, Be)
+			}), /* @__PURE__ */ h("div", {
+				className: e([fe]),
+				children: [/* @__PURE__ */ m("div", {
+					className: e([pe]),
+					children: /* @__PURE__ */ m("span", {
+						className: e([b]),
+						children: X.format(new Date(Q.year, Q.month))
+					})
+				}), it(Q, Oe, Ve)]
+			})]
+		}) : it({
+			year: q,
+			month: Y
+		}, I, Be)]
+	});
 }
 //#endregion
-export { C as default };
+export { O as default };