@middag-io/react 0.12.0 → 0.13.0

package/dist-lib/DateRangeField-vXr5VVQz.js

@@ -0,0 +1,663 @@
+import { t as e } from "./button-DY_CinAY.js";
+import { a as t, c as n, i as r, n as i, o as a, r as o, t as s } from "./calendar-Dw-fH9qs.js";
+import { K as c, at as l, dt as u, j as d, t as f, y as p } from "./HugeiconsIcon-C_2Bj2NI.js";
+import { t as m } from "./utils-DS8lnGJS.js";
+import { t as h } from "./scroll-area-CDaBiyoP.js";
+import { a as g, i as _, n as v, t as y } from "./use-mobile-B2E8cMyY.js";
+import { t as b } from "./input-DovH16Rh.js";
+import { createContext as x, useCallback as S, useContext as C, useEffect as w, useMemo as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+//#region node_modules/date-fns/subMonths.js
+function k(e, t, r) {
+	return n(e, -t, r);
+}
+//#endregion
+//#region src/components/reui/date-selector.tsx
+var A = {
+	selectDate: "Select date",
+	apply: "Apply",
+	cancel: "Cancel",
+	clear: "Clear",
+	today: "Today",
+	filterTypes: {
+		is: "is",
+		before: "before",
+		after: "after",
+		between: "between"
+	},
+	periodTypes: {
+		day: "Day",
+		month: "Month",
+		quarter: "Quarter",
+		halfYear: "Half-year",
+		year: "Year"
+	},
+	months: [
+		"January",
+		"February",
+		"March",
+		"April",
+		"May",
+		"June",
+		"July",
+		"August",
+		"September",
+		"October",
+		"November",
+		"December"
+	],
+	monthsShort: [
+		"Jan",
+		"Feb",
+		"Mar",
+		"Apr",
+		"May",
+		"Jun",
+		"Jul",
+		"Aug",
+		"Sep",
+		"Oct",
+		"Nov",
+		"Dec"
+	],
+	quarters: [
+		"Q1",
+		"Q2",
+		"Q3",
+		"Q4"
+	],
+	halfYears: ["H1", "H2"],
+	weekdays: [
+		"Sunday",
+		"Monday",
+		"Tuesday",
+		"Wednesday",
+		"Thursday",
+		"Friday",
+		"Saturday"
+	],
+	weekdaysShort: [
+		"Su",
+		"Mo",
+		"Tu",
+		"We",
+		"Th",
+		"Fr",
+		"Sa"
+	],
+	placeholder: "Select date...",
+	rangePlaceholder: "Select date range..."
+}, j = x({
+	i18n: A,
+	variant: "outline",
+	size: "default"
+}), M = () => C(j);
+function N(e, t = A, n = "MM/dd/yyyy") {
+	let { period: r, startDate: i, endDate: o, year: s, month: c, quarter: l, halfYear: u, rangeStart: d, rangeEnd: f } = e;
+	return r === "day" ? i && o ? `${a(i, n)} - ${a(o, n)}` : i ? a(i, n) : "" : r === "month" ? d && f ? `${t.monthsShort[d.value]} ${d.year} - ${t.monthsShort[f.value]} ${f.year}` : s !== void 0 && c !== void 0 ? `${t.monthsShort[c]} ${s}` : "" : r === "quarter" ? d && f ? `${t.quarters[d.value]} ${d.year} - ${t.quarters[f.value]} ${f.year}` : s !== void 0 && l !== void 0 ? `${t.quarters[l]} ${s}` : "" : r === "half-year" ? d && f ? `${t.halfYears[d.value]} ${d.year} - ${t.halfYears[f.value]} ${f.year}` : s !== void 0 && u !== void 0 ? `${t.halfYears[u]} ${s}` : "" : r === "year" ? d && f ? `${d.year} - ${f.year}` : s === void 0 ? "" : `${s}` : "";
+}
+function P({ value: e, onChange: n, defaultPeriodType: r = "day", defaultFilterType: i = "is", presetMode: a, allowRange: o = !0, yearRange: s = 11, baseYear: c, minYear: l, maxYear: u, periodTypes: d }) {
+	let f = c ?? (/* @__PURE__ */ new Date()).getFullYear(), p = T(() => !d || d.length === 0 || d.includes(r) ? r : d[0], [d, r]), m = a ?? e?.operator ?? i, [h, g] = E(e?.period || p), [_, v] = E(m), [y, b] = E(e?.startDate), [x, C] = E(e?.endDate), [D, O] = E(e?.startDate || /* @__PURE__ */ new Date()), [k, A] = E(e?.year), [j, M] = E(e?.month), [N, P] = E(e?.quarter), [F, I] = E(e?.halfYear), [L, R] = E(e?.rangeStart), [z, B] = E(e?.rangeEnd), [V, H] = E(), U = T(() => l !== void 0 && u !== void 0 ? Array.from({ length: u - l + 1 }, (e, t) => l + t) : Array.from({ length: s }, (e, t) => f - Math.floor(s / 2) + t), [
+		f,
+		s,
+		l,
+		u
+	]), W = T(() => ({
+		period: h,
+		operator: a ?? _,
+		startDate: y,
+		endDate: x,
+		year: k,
+		month: j,
+		quarter: N,
+		halfYear: F,
+		rangeStart: L,
+		rangeEnd: z
+	}), [
+		h,
+		a,
+		_,
+		y,
+		x,
+		k,
+		j,
+		N,
+		F,
+		L,
+		z
+	]), G = S(() => {
+		b(void 0), C(void 0), A(void 0), M(void 0), P(void 0), I(void 0), R(void 0), B(void 0);
+	}, []), K = S((e) => {
+		_ === "between" && o ? !y || y && x ? (b(e), C(void 0)) : t(e, y) ? (C(y), b(e)) : C(e) : (b(e), C(void 0));
+	}, [
+		_,
+		o,
+		y,
+		x
+	]), q = S((e, t) => {
+		if (_ === "between" && o) if (!L || L && z) R({
+			year: e,
+			value: t
+		}), B(void 0), A(e), h === "month" && M(t), h === "quarter" && P(t), h === "half-year" && I(t);
+		else {
+			let n = L.year * 100 + L.value;
+			e * 100 + t < n ? (B(L), R({
+				year: e,
+				value: t
+			})) : B({
+				year: e,
+				value: t
+			});
+		}
+		else A(e), h === "month" && M(t), h === "quarter" && P(t), h === "half-year" && I(t), R(void 0), B(void 0);
+	}, [
+		_,
+		o,
+		L,
+		z,
+		h
+	]), ee = S((e) => {
+		_ === "between" && o ? !L || L && z ? (R({
+			year: e,
+			value: 0
+		}), B(void 0), A(e)) : e < L.year ? (B(L), R({
+			year: e,
+			value: 0
+		})) : B({
+			year: e,
+			value: 0
+		}) : (A(e), R(void 0), B(void 0));
+	}, [
+		_,
+		o,
+		L,
+		z
+	]), te = S((e) => {
+		g(e), G();
+	}, [G]), ne = S((e) => {
+		a === void 0 && (v(e), G());
+	}, [G, a]), J = S((e, t) => {
+		if (!L || !z) return !1;
+		let n = e * 100 + t, r = L.year * 100 + L.value, i = z.year * 100 + z.value;
+		return n >= r && n <= i;
+	}, [L, z]), Y = S((e) => !L || !z ? !1 : e >= L.year && e <= z.year, [L, z]);
+	return w(() => {
+		e && (g(e.period || p), v(a ?? e.operator ?? i), b(e.startDate), C(e.endDate), A(e.year), M(e.month), P(e.quarter), I(e.halfYear), R(e.rangeStart), B(e.rangeEnd));
+	}, [
+		e,
+		p,
+		i,
+		a
+	]), w(() => {
+		a !== void 0 && v(a);
+	}, [a]), w(() => {
+		n?.(W);
+	}, [W, n]), {
+		periodType: h,
+		filterType: _,
+		selectedDate: y,
+		selectedEndDate: x,
+		calendarMonth: D,
+		selectedYear: k,
+		selectedMonth: j,
+		selectedQuarter: N,
+		selectedHalfYear: F,
+		rangeStart: L,
+		rangeEnd: z,
+		hoverDate: V,
+		years: U,
+		currentValue: W,
+		allowRange: o,
+		setPeriodType: te,
+		setFilterType: ne,
+		setSelectedDate: b,
+		setSelectedEndDate: C,
+		setCalendarMonth: O,
+		setHoverDate: H,
+		clearSelection: G,
+		handleDayClick: K,
+		handlePeriodSelect: q,
+		handleYearSelect: ee,
+		isInRange: J,
+		isYearInRange: Y
+	};
+}
+function F({ value: e, onChange: t, showBetween: n = !0, showIs: r = !0, presetMode: i, className: a }) {
+	let { i18n: o } = M(), s = i !== void 0;
+	return /* @__PURE__ */ D(v, {
+		value: e,
+		onValueChange: (e) => {
+			!s && e && t(e);
+		},
+		className: a,
+		children: /* @__PURE__ */ O(_, {
+			className: m("bg-muted/80", s && "pointer-events-none opacity-50", a),
+			children: [
+				r && /* @__PURE__ */ D(g, {
+					value: "is",
+					"aria-label": o.filterTypes.is,
+					className: "py-1 font-normal",
+					children: o.filterTypes.is
+				}),
+				/* @__PURE__ */ D(g, {
+					value: "before",
+					"aria-label": o.filterTypes.before,
+					className: "py-1 font-normal",
+					children: o.filterTypes.before
+				}),
+				/* @__PURE__ */ D(g, {
+					value: "after",
+					"aria-label": o.filterTypes.after,
+					className: "py-1 font-normal",
+					children: o.filterTypes.after
+				}),
+				n && /* @__PURE__ */ D(g, {
+					value: "between",
+					"aria-label": o.filterTypes.between,
+					className: "py-1 font-normal",
+					children: o.filterTypes.between
+				})
+			]
+		})
+	});
+}
+function I({ value: t, onChange: r, periodTypes: i, className: a, calendarMonth: s, onMonthChange: c, showNavigationButtons: h = !1 }) {
+	let { i18n: y } = M(), b = [
+		{
+			value: "day",
+			label: y.periodTypes.day
+		},
+		{
+			value: "month",
+			label: y.periodTypes.month
+		},
+		{
+			value: "quarter",
+			label: y.periodTypes.quarter
+		},
+		{
+			value: "half-year",
+			label: y.periodTypes.halfYear
+		},
+		{
+			value: "year",
+			label: y.periodTypes.year
+		}
+	], x = i ? b.filter((e) => i.includes(e.value)) : b;
+	return /* @__PURE__ */ O("div", {
+		className: m("flex flex-wrap items-center justify-between gap-3", a),
+		children: [/* @__PURE__ */ D(v, {
+			value: t,
+			onValueChange: (e) => {
+				e && r(e);
+			},
+			children: /* @__PURE__ */ D(_, { children: x.map((e) => /* @__PURE__ */ D(g, {
+				value: e.value,
+				"aria-label": e.label,
+				className: "px-1 py-1 font-normal sm:px-2.5",
+				children: e.label
+			}, e.value)) })
+		}), h && t === "day" && s && c && /* @__PURE__ */ O("div", {
+			className: "flex items-center",
+			children: [
+				(() => {
+					let t = /* @__PURE__ */ new Date();
+					if (o(s, t)) return null;
+					let n = s > t;
+					return /* @__PURE__ */ D(e, {
+						variant: "ghost",
+						className: "size-8.5",
+						onClick: () => c(/* @__PURE__ */ new Date()),
+						title: y.today,
+						children: n ? /* @__PURE__ */ D(f, {
+							icon: d,
+							strokeWidth: 2
+						}) : /* @__PURE__ */ D(f, {
+							icon: u,
+							strokeWidth: 2
+						})
+					});
+				})(),
+				/* @__PURE__ */ D(e, {
+					variant: "ghost",
+					className: "size-8.5",
+					onClick: () => c(k(s, 1)),
+					children: /* @__PURE__ */ D(f, {
+						icon: l,
+						strokeWidth: 2,
+						className: "size-4"
+					})
+				}),
+				/* @__PURE__ */ D(e, {
+					variant: "ghost",
+					className: "size-8.5",
+					onClick: () => c(n(s, 1)),
+					children: /* @__PURE__ */ D(f, {
+						icon: p,
+						strokeWidth: 2,
+						className: "size-4"
+					})
+				})
+			]
+		})]
+	});
+}
+function L({ currentMonth: e, selectedDate: t, selectedEndDate: n, onDayClick: r, isRange: a, onDayHover: o, hoverDate: c, showTwoMonths: l = !0, weekStartsOn: u, className: d }) {
+	let { i18n: f } = M(), p = y(), h = a ? t && n ? {
+		from: t,
+		to: n
+	} : t ? {
+		from: t,
+		to: c || t
+	} : void 0 : t, g = (e) => {
+		e && (a && "from" in e ? e.from && !e.to ? r(e.from) : e.from && e.to && r(e.to) : !a && e instanceof Date && r(e));
+	}, _ = S((e) => /* @__PURE__ */ D(i, {
+		...e,
+		onMouseEnter: () => {
+			a && o && e.day && o(e.day.date);
+		},
+		onMouseLeave: () => {
+			a && o && o(void 0);
+		}
+	}), [a, o]), v = {
+		formatWeekdayName: (e) => {
+			let t = e.getDay();
+			return f.weekdaysShort[t] || f.weekdays[t];
+		},
+		formatMonthCaption: (e) => {
+			let t = e.getMonth(), n = e.getFullYear();
+			return `${f.months[t]} ${n}`;
+		}
+	};
+	return /* @__PURE__ */ D("div", {
+		className: m("flex w-full items-center justify-between", d),
+		children: a ? /* @__PURE__ */ D(s, {
+			month: e,
+			mode: "range",
+			selected: h,
+			onSelect: g,
+			numberOfMonths: p ? 1 : l ? 2 : 1,
+			showOutsideDays: !0,
+			weekStartsOn: u,
+			formatters: v,
+			className: "w-full shrink-0 p-0",
+			classNames: {
+				months: "flex flex-wrap items-start justify-between gap-5 w-full",
+				month: "flex flex-col items-center min-w-0 flex-1",
+				nav: "hidden"
+			},
+			components: { DayButton: _ }
+		}) : /* @__PURE__ */ D(s, {
+			month: e,
+			mode: "single",
+			selected: h,
+			onSelect: g,
+			numberOfMonths: p ? 1 : l ? 2 : 1,
+			showOutsideDays: !0,
+			weekStartsOn: u,
+			formatters: v,
+			className: "w-full shrink-0 p-0",
+			classNames: {
+				months: "flex flex-wrap items-start justify-between gap-5 w-full",
+				month: "flex flex-col items-center min-w-0 flex-1",
+				nav: "hidden"
+			},
+			components: { DayButton: _ }
+		})
+	});
+}
+function R({ years: t, items: n, selectedYear: r, selectedValue: i, rangeStart: a, rangeEnd: o, isInRange: s, onSelect: c, columns: l, className: u }) {
+	return /* @__PURE__ */ D("div", {
+		className: m("w-full space-y-6", u),
+		children: t.map((t) => /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("div", {
+			className: "text-muted-foreground mb-3 text-sm font-medium",
+			children: t
+		}), /* @__PURE__ */ D("div", {
+			className: "grid gap-2",
+			style: { gridTemplateColumns: `repeat(${l}, minmax(0, 1fr))` },
+			children: n.map((n, l) => {
+				let u = r === t && i === l, d = a?.year === t && a?.value === l, f = o?.year === t && o?.value === l, p = s(t, l);
+				return /* @__PURE__ */ D(e, {
+					size: "sm",
+					variant: u || d || f ? "default" : "outline",
+					className: m(p && !u && !d && !f && "bg-accent dark:bg-accent/60"),
+					onClick: () => c(t, l),
+					children: n
+				}, n);
+			})
+		})] }, t))
+	});
+}
+function z({ years: t, selectedYear: n, rangeStart: r, rangeEnd: i, isYearInRange: a, onSelect: o, className: s }) {
+	return /* @__PURE__ */ D("div", {
+		className: m("grid grid-cols-2 gap-2", s),
+		children: t.map((t) => {
+			let s = n === t && !r && !i, c = r?.year === t, l = i?.year === t, u = a(t);
+			return /* @__PURE__ */ D(e, {
+				size: "sm",
+				variant: s || c || l ? "default" : "outline",
+				className: m(u && !s && !c && !l && "bg-accent dark:bg-accent/60"),
+				onClick: () => o(t),
+				children: t
+			}, t);
+		})
+	});
+}
+function B({ value: e, onChange: t, allowRange: n = !0, periodTypes: i, defaultPeriodType: a = "day", defaultFilterType: o = "is", presetMode: s, showInput: l = !0, showTwoMonths: u = !0, label: d, className: p, yearRange: g = 10, baseYear: _, minYear: v = 2015, maxYear: y = 2026, i18n: x, inputHint: C, dayDateFormat: k = "MM/dd/yyyy", dayDateFormats: M, weekStartsOn: B }) {
+	let V = T(() => ({
+		...A,
+		...x
+	}), [x]), { periodType: H, filterType: U, selectedDate: W, selectedEndDate: G, calendarMonth: K, selectedYear: q, selectedMonth: ee, selectedQuarter: te, selectedHalfYear: ne, rangeStart: J, rangeEnd: Y, hoverDate: re, years: X, currentValue: ie, setPeriodType: ae, setFilterType: oe, setCalendarMonth: se, setHoverDate: ce, clearSelection: le, handleDayClick: ue, handlePeriodSelect: de, handleYearSelect: fe, isInRange: pe, isYearInRange: me } = P({
+		value: e,
+		onChange: t,
+		defaultPeriodType: a,
+		defaultFilterType: o,
+		presetMode: s,
+		allowRange: n,
+		yearRange: g,
+		baseYear: _,
+		minYear: v,
+		maxYear: y,
+		periodTypes: i
+	}), Z = N(ie, V, k), [Q, he] = E(Z), [ge, _e] = E(!1);
+	w(() => {
+		ge || he(Z);
+	}, [Z, ge]);
+	let ve = T(() => {
+		if (M && M.length > 0) {
+			let e = [...M];
+			return e.includes(k) || e.unshift(k), e;
+		}
+		let e = [
+			k,
+			"dd/MM/yyyy",
+			"yyyy-MM-dd",
+			"MM-dd-yyyy",
+			"dd-MM-yyyy"
+		];
+		return Array.from(new Set(e));
+	}, [k, M]), $ = S((e) => {
+		if (!e.trim()) return null;
+		let t = e.trim(), n = t.match(/^\d{4}$/);
+		if (n) {
+			let e = parseInt(n[0]);
+			if (e >= 1900 && e <= 2100) return {
+				period: "year",
+				operator: s ?? U,
+				year: e
+			};
+		}
+		let i = t.match(/^Q([1-4])(?:\s+(\d{4}))?$/i);
+		if (i) {
+			let e = parseInt(i[1]) - 1, t = i[2] ? parseInt(i[2]) : (/* @__PURE__ */ new Date()).getFullYear();
+			if (t >= 1900 && t <= 2100) return {
+				period: "quarter",
+				operator: s ?? U,
+				year: t,
+				quarter: e
+			};
+		}
+		for (let e of ve) try {
+			let n = r(t, e, /* @__PURE__ */ new Date());
+			if (!isNaN(n.getTime())) return {
+				period: "day",
+				operator: s ?? U,
+				startDate: n
+			};
+		} catch {}
+		return null;
+	}, [
+		U,
+		s,
+		ve
+	]), ye = S((e) => {
+		let n = e.target.value;
+		he(n);
+		let r = $(n);
+		r && t?.(r);
+	}, [t, $]), be = S(() => {
+		_e(!1), $(Q) || he(Z);
+	}, [
+		Q,
+		Z,
+		$
+	]);
+	return /* @__PURE__ */ D(j.Provider, {
+		value: {
+			i18n: V,
+			variant: "outline",
+			size: "default"
+		},
+		children: /* @__PURE__ */ O("div", {
+			className: m("w-full space-y-4 sm:w-[470px]", p),
+			children: [
+				/* @__PURE__ */ O("div", {
+					className: "flex flex-wrap items-center gap-3",
+					children: [d && /* @__PURE__ */ D("h3", {
+						className: "text-sm font-medium",
+						"data-slot": "data-selector-label",
+						children: d
+					}), /* @__PURE__ */ D(F, {
+						value: U,
+						onChange: oe,
+						showBetween: n,
+						presetMode: s
+					})]
+				}),
+				l && /* @__PURE__ */ O("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ D(b, {
+						type: "text",
+						value: C ? Q : Z,
+						readOnly: !C,
+						placeholder: ge && C ? C : V.placeholder,
+						onFocus: () => _e(!0),
+						onBlur: be,
+						onChange: ye
+					}), (C ? Q : Z) && /* @__PURE__ */ D("button", {
+						type: "button",
+						onClick: le,
+						className: m("absolute end-2.5 top-1/2 size-4 -translate-y-1/2 cursor-pointer rounded-xs", "opacity-70 transition-opacity hover:opacity-100", "ring-offset-background focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-none"),
+						children: /* @__PURE__ */ D(f, {
+							icon: c,
+							strokeWidth: 2,
+							className: "size-4"
+						})
+					})]
+				}),
+				/* @__PURE__ */ D(I, {
+					value: H,
+					onChange: ae,
+					periodTypes: i,
+					calendarMonth: K,
+					onMonthChange: se,
+					showNavigationButtons: H === "day"
+				}),
+				H === "day" ? /* @__PURE__ */ D("div", {
+					className: "w-full pb-1",
+					children: /* @__PURE__ */ D(L, {
+						currentMonth: K,
+						selectedDate: W,
+						selectedEndDate: G,
+						onDayClick: ue,
+						isRange: U === "between" && n,
+						onDayHover: ce,
+						hoverDate: re,
+						showTwoMonths: u,
+						weekStartsOn: B
+					})
+				}) : /* @__PURE__ */ D("div", {
+					className: "-mr-3 w-full",
+					children: /* @__PURE__ */ O(h, {
+						className: "h-[200px] w-full pe-3",
+						children: [
+							H === "month" && /* @__PURE__ */ D(R, {
+								years: X,
+								items: V.monthsShort,
+								selectedYear: q,
+								selectedValue: ee,
+								rangeStart: J,
+								rangeEnd: Y,
+								isInRange: pe,
+								onSelect: de,
+								columns: 3
+							}),
+							H === "quarter" && /* @__PURE__ */ D(R, {
+								years: X,
+								items: V.quarters,
+								selectedYear: q,
+								selectedValue: te,
+								rangeStart: J,
+								rangeEnd: Y,
+								isInRange: pe,
+								onSelect: de,
+								columns: 4
+							}),
+							H === "half-year" && /* @__PURE__ */ D(R, {
+								years: X,
+								items: V.halfYears,
+								selectedYear: q,
+								selectedValue: ne,
+								rangeStart: J,
+								rangeEnd: Y,
+								isInRange: pe,
+								onSelect: de,
+								columns: 2
+							}),
+							H === "year" && /* @__PURE__ */ D(z, {
+								years: X,
+								selectedYear: q,
+								rangeStart: J,
+								rangeEnd: Y,
+								isYearInRange: me,
+								onSelect: fe
+							})
+						]
+					}, H)
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/base/form/fields/DateRangeField.tsx
+function V({ id: e, value: t, onChange: n, operator: r, error: i, helpTextId: a, errorId: o }) {
+	let s = [i ? o : void 0, a].filter(Boolean).join(" ") || void 0, c = S((e) => {
+		n(e);
+	}, [n]);
+	return /* @__PURE__ */ D("div", {
+		id: e,
+		"aria-invalid": i ? !0 : void 0,
+		"aria-describedby": s,
+		children: /* @__PURE__ */ D(B, {
+			value: t,
+			onChange: c,
+			allowRange: !0,
+			defaultFilterType: r ?? "is",
+			presetMode: r || void 0,
+			showInput: !0
+		})
+	});
+}
+//#endregion
+export { V as DateRangeField };