@cube-dev/ui-kit 0.182.0 → 0.183.0

package/dist/components/other/Calendar/PeriodCalendar.js

@@ -1,11 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.182.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.183.0 | Cube Dev Team */
 import { useProviderProps } from "../../../provider.js";
 import { useI18n } from "../../../i18n/useI18n.js";
 import { getQuarter } from "../../fields/DatePicker/period.js";
 import { CalendarElement } from "./styled.js";
 import { CalendarHeader } from "./CalendarHeader.js";
 import { PeriodGrid } from "./PeriodGrid.js";
-import { useMemo, useState } from "react";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useDateFormatter } from "react-aria";
 import { CalendarDate, endOfMonth, endOfYear, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
@@ -27,60 +28,112 @@ const COLUMNS = {
 * never means clicking the arrow a dozen times.
 */
 function PeriodCalendar(props) {
+	const $ = c(121);
 	const { t } = useI18n();
 	props = useProviderProps(props);
-	let { picker, value, onChange, minValue, maxValue, isDateUnavailable, isDisabled, autoFocus } = props;
-	let monthFormatter = useDateFormatter({
-		month: "short",
-		timeZone: "UTC"
-	});
-	let selected = value ? toCalendarDate(value) : null;
-	let todayDate = useMemo(() => today(getLocalTimeZone()), []);
-	let [anchor, setAnchor] = useState(() => selected ?? todayDate);
-	let [isYearView, setIsYearView] = useState(false);
-	let [autoFocusGrid, setAutoFocusGrid] = useState(!!autoFocus);
-	let showYearView = (next) => {
-		setAutoFocusGrid(true);
-		setIsYearView(next);
-	};
-	let view = picker === "year" || isYearView ? "year" : picker;
-	let yearStart = (year) => new CalendarDate(year, 1, 1);
-	let isPeriodDisabled = (start, end) => {
-		if (isDisabled) return true;
-		if (minValue && end.compare(minValue) < 0) return true;
-		if (maxValue && start.compare(maxValue) > 0) return true;
-		return isDateUnavailable?.(start) ?? false;
-	};
-	/** Header for the month and quarter panels — the year drills up to a list. */
-	let renderYearHeader = () => {
-		let prevYear = anchor.year - 1;
-		let nextYear = anchor.year + 1;
-		return /* @__PURE__ */ jsx(CalendarHeader, {
-			segments: [{
-				key: "year",
-				label: String(anchor.year),
-				isDisabled,
-				onPress: () => showYearView(true)
-			}],
-			prevButtonProps: {
-				"aria-label": t("calendar.previousYear", "Previous year"),
-				isDisabled: isPeriodDisabled(yearStart(prevYear), endOfYear(yearStart(prevYear))),
-				onPress: () => setAnchor(anchor.subtract({ years: 1 }))
-			},
-			nextButtonProps: {
-				"aria-label": t("calendar.nextYear", "Next year"),
-				isDisabled: isPeriodDisabled(yearStart(nextYear), endOfYear(yearStart(nextYear))),
-				onPress: () => setAnchor(anchor.add({ years: 1 }))
+	const { picker, value, onChange, minValue, maxValue, isDateUnavailable, isDisabled, autoFocus } = props;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			month: "short",
+			timeZone: "UTC"
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const monthFormatter = useDateFormatter(t0);
+	let t1;
+	if ($[1] !== value) {
+		t1 = value ? toCalendarDate(value) : null;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const selected = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = today(getLocalTimeZone());
+		$[3] = t2;
+	} else t2 = $[3];
+	const todayDate = t2;
+	let t3;
+	if ($[4] !== selected) {
+		t3 = () => selected ?? todayDate;
+		$[4] = selected;
+		$[5] = t3;
+	} else t3 = $[5];
+	const [anchor, setAnchor] = useState(t3);
+	const [isYearView, setIsYearView] = useState(false);
+	const [autoFocusGrid, setAutoFocusGrid] = useState(!!autoFocus);
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (next) => {
+			setAutoFocusGrid(true);
+			setIsYearView(next);
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	const showYearView = t4;
+	const view = picker === "year" || isYearView ? "year" : picker;
+	const yearStart = _temp;
+	let t5;
+	if ($[7] !== isDateUnavailable || $[8] !== isDisabled || $[9] !== maxValue || $[10] !== minValue) {
+		t5 = (start, end) => {
+			if (isDisabled) return true;
+			if (minValue && end.compare(minValue) < 0) return true;
+			if (maxValue && start.compare(maxValue) > 0) return true;
+			return isDateUnavailable?.(start) ?? false;
+		};
+		$[7] = isDateUnavailable;
+		$[8] = isDisabled;
+		$[9] = maxValue;
+		$[10] = minValue;
+		$[11] = t5;
+	} else t5 = $[11];
+	const isPeriodDisabled = t5;
+	let t6;
+	if ($[12] !== anchor || $[13] !== isDisabled || $[14] !== isPeriodDisabled || $[15] !== t) {
+		t6 = () => {
+			const prevYear = anchor.year - 1;
+			const nextYear = anchor.year + 1;
+			return /* @__PURE__ */ jsx(CalendarHeader, {
+				segments: [{
+					key: "year",
+					label: String(anchor.year),
+					isDisabled,
+					onPress: () => showYearView(true)
+				}],
+				prevButtonProps: {
+					"aria-label": t("calendar.previousYear", "Previous year"),
+					isDisabled: isPeriodDisabled(yearStart(prevYear), endOfYear(yearStart(prevYear))),
+					onPress: () => setAnchor(anchor.subtract({ years: 1 }))
+				},
+				nextButtonProps: {
+					"aria-label": t("calendar.nextYear", "Next year"),
+					isDisabled: isPeriodDisabled(yearStart(nextYear), endOfYear(yearStart(nextYear))),
+					onPress: () => setAnchor(anchor.add({ years: 1 }))
+				}
+			});
+		};
+		$[12] = anchor;
+		$[13] = isDisabled;
+		$[14] = isPeriodDisabled;
+		$[15] = t;
+		$[16] = t6;
+	} else t6 = $[16];
+	const renderYearHeader = t6;
+	let t7;
+	if ($[17] !== isYearView || $[18] !== picker) {
+		t7 = (e) => {
+			if (isYearView && picker !== "year" && e.key === "Escape") {
+				e.preventDefault();
+				e.stopPropagation();
+				showYearView(false);
 			}
-		});
-	};
-	let onKeyDown = (e) => {
-		if (isYearView && picker !== "year" && e.key === "Escape") {
-			e.preventDefault();
-			e.stopPropagation();
-			showYearView(false);
-		}
-	};
+		};
+		$[17] = isYearView;
+		$[18] = picker;
+		$[19] = t7;
+	} else t7 = $[19];
+	const onKeyDown = t7;
 	let cells;
 	let focusedIndex;
 	let gridLabel;
@@ -90,102 +143,340 @@ function PeriodCalendar(props) {
 	let onMoveFocus;
 	let onMovePage;
 	if (view === "year") {
-		let decadeStart = Math.floor(anchor.year / 10) * 10;
-		let firstYear = decadeStart - 1;
-		cells = Array.from({ length: YEAR_CELLS }, (_, index) => {
-			let year = firstYear + index;
-			let date = yearStart(year);
-			return {
-				key: `year-${year}`,
-				label: String(year),
-				isSelected: selected?.year === year,
-				isCurrent: todayDate.year === year,
-				isOutside: year < decadeStart || year > decadeStart + 9,
-				isDisabled: isPeriodDisabled(date, endOfYear(date))
-			};
-		});
+		const decadeStart = Math.floor(anchor.year / 10) * 10;
+		const firstYear = decadeStart - 1;
+		let t8;
+		if ($[20] !== decadeStart || $[21] !== firstYear || $[22] !== isPeriodDisabled || $[23] !== selected?.year) {
+			t8 = Array.from({ length: YEAR_CELLS }, (_, index) => {
+				const year_0 = firstYear + index;
+				const date = yearStart(year_0);
+				return {
+					key: `year-${year_0}`,
+					label: String(year_0),
+					isSelected: selected?.year === year_0,
+					isCurrent: todayDate.year === year_0,
+					isOutside: year_0 < decadeStart || year_0 > decadeStart + 9,
+					isDisabled: isPeriodDisabled(date, endOfYear(date))
+				};
+			});
+			$[20] = decadeStart;
+			$[21] = firstYear;
+			$[22] = isPeriodDisabled;
+			$[23] = selected?.year;
+			$[24] = t8;
+		} else t8 = $[24];
+		cells = t8;
 		focusedIndex = anchor.year - firstYear;
-		gridLabel = t("calendar.years", "Years");
-		header = /* @__PURE__ */ jsx(CalendarHeader, {
-			title: `${decadeStart} – ${decadeStart + 9}`,
-			prevButtonProps: {
-				"aria-label": t("calendar.previousYears", "Previous years"),
-				isDisabled: isPeriodDisabled(yearStart(decadeStart - 10), endOfYear(yearStart(decadeStart - 1))),
-				onPress: () => setAnchor(anchor.subtract({ years: 10 }))
-			},
-			nextButtonProps: {
-				"aria-label": t("calendar.nextYears", "Next years"),
-				isDisabled: isPeriodDisabled(yearStart(decadeStart + 10), endOfYear(yearStart(decadeStart + 19))),
-				onPress: () => setAnchor(anchor.add({ years: 10 }))
-			}
-		});
-		onCellPress = (index) => {
-			let year = firstYear + index;
-			if (picker === "year") onChange?.(yearStart(year));
-			else {
-				setAnchor(anchor.set({ year }));
-				showYearView(false);
-			}
-		};
-		onCellFocus = (index) => setAnchor(anchor.set({ year: firstYear + index }));
-		onMoveFocus = (delta) => setAnchor(anchor.add({ years: delta }));
-		onMovePage = (delta) => setAnchor(anchor.add({ years: delta * 10 }));
-	} else if (view === "quarter") {
-		let quarterDate = (quarter) => new CalendarDate(anchor.year, (quarter - 1) * 3 + 1, 1);
-		cells = Array.from({ length: 4 }, (_, index) => {
-			let quarter = index + 1;
-			let date = quarterDate(quarter);
-			return {
-				key: `quarter-${quarter}`,
-				label: `Q${quarter}`,
-				isSelected: selected != null && selected.year === anchor.year && getQuarter(selected.month) === quarter,
-				isCurrent: todayDate.year === anchor.year && getQuarter(todayDate.month) === quarter,
-				isDisabled: isPeriodDisabled(date, endOfMonth(date.add({ months: 2 })))
+		let t9;
+		if ($[25] !== t) {
+			t9 = t("calendar.years", "Years");
+			$[25] = t;
+			$[26] = t9;
+		} else t9 = $[26];
+		gridLabel = t9;
+		const t10 = `${decadeStart} – ${decadeStart + 9}`;
+		let t11;
+		if ($[27] !== t) {
+			t11 = t("calendar.previousYears", "Previous years");
+			$[27] = t;
+			$[28] = t11;
+		} else t11 = $[28];
+		let t12;
+		if ($[29] !== decadeStart || $[30] !== isPeriodDisabled) {
+			t12 = isPeriodDisabled(yearStart(decadeStart - 10), endOfYear(yearStart(decadeStart - 1)));
+			$[29] = decadeStart;
+			$[30] = isPeriodDisabled;
+			$[31] = t12;
+		} else t12 = $[31];
+		let t13;
+		if ($[32] !== anchor) {
+			t13 = () => setAnchor(anchor.subtract({ years: 10 }));
+			$[32] = anchor;
+			$[33] = t13;
+		} else t13 = $[33];
+		let t14;
+		if ($[34] !== t11 || $[35] !== t12 || $[36] !== t13) {
+			t14 = {
+				"aria-label": t11,
+				isDisabled: t12,
+				onPress: t13
 			};
-		});
+			$[34] = t11;
+			$[35] = t12;
+			$[36] = t13;
+			$[37] = t14;
+		} else t14 = $[37];
+		let t15;
+		if ($[38] !== t) {
+			t15 = t("calendar.nextYears", "Next years");
+			$[38] = t;
+			$[39] = t15;
+		} else t15 = $[39];
+		let t16;
+		if ($[40] !== decadeStart || $[41] !== isPeriodDisabled) {
+			t16 = isPeriodDisabled(yearStart(decadeStart + 10), endOfYear(yearStart(decadeStart + 19)));
+			$[40] = decadeStart;
+			$[41] = isPeriodDisabled;
+			$[42] = t16;
+		} else t16 = $[42];
+		let t17;
+		if ($[43] !== anchor) {
+			t17 = () => setAnchor(anchor.add({ years: 10 }));
+			$[43] = anchor;
+			$[44] = t17;
+		} else t17 = $[44];
+		let t18;
+		if ($[45] !== t15 || $[46] !== t16 || $[47] !== t17) {
+			t18 = {
+				"aria-label": t15,
+				isDisabled: t16,
+				onPress: t17
+			};
+			$[45] = t15;
+			$[46] = t16;
+			$[47] = t17;
+			$[48] = t18;
+		} else t18 = $[48];
+		let t19;
+		if ($[49] !== t10 || $[50] !== t14 || $[51] !== t18) {
+			t19 = /* @__PURE__ */ jsx(CalendarHeader, {
+				title: t10,
+				prevButtonProps: t14,
+				nextButtonProps: t18
+			});
+			$[49] = t10;
+			$[50] = t14;
+			$[51] = t18;
+			$[52] = t19;
+		} else t19 = $[52];
+		header = t19;
+		let t20;
+		if ($[53] !== anchor || $[54] !== firstYear || $[55] !== onChange || $[56] !== picker) {
+			t20 = (index_0) => {
+				const year_1 = firstYear + index_0;
+				if (picker === "year") onChange?.(yearStart(year_1));
+				else {
+					setAnchor(anchor.set({ year: year_1 }));
+					showYearView(false);
+				}
+			};
+			$[53] = anchor;
+			$[54] = firstYear;
+			$[55] = onChange;
+			$[56] = picker;
+			$[57] = t20;
+		} else t20 = $[57];
+		onCellPress = t20;
+		let t21;
+		if ($[58] !== anchor || $[59] !== firstYear) {
+			t21 = (index_1) => setAnchor(anchor.set({ year: firstYear + index_1 }));
+			$[58] = anchor;
+			$[59] = firstYear;
+			$[60] = t21;
+		} else t21 = $[60];
+		onCellFocus = t21;
+		let t22;
+		if ($[61] !== anchor) {
+			t22 = (delta) => setAnchor(anchor.add({ years: delta }));
+			$[61] = anchor;
+			$[62] = t22;
+		} else t22 = $[62];
+		onMoveFocus = t22;
+		let t23;
+		if ($[63] !== anchor) {
+			t23 = (delta_0) => setAnchor(anchor.add({ years: delta_0 * 10 }));
+			$[63] = anchor;
+			$[64] = t23;
+		} else t23 = $[64];
+		onMovePage = t23;
+	} else if (view === "quarter") {
+		let t8;
+		if ($[65] !== anchor.year) {
+			t8 = (quarter) => new CalendarDate(anchor.year, (quarter - 1) * 3 + 1, 1);
+			$[65] = anchor.year;
+			$[66] = t8;
+		} else t8 = $[66];
+		const quarterDate = t8;
+		let t9;
+		if ($[67] !== anchor.year || $[68] !== isPeriodDisabled || $[69] !== quarterDate || $[70] !== selected) {
+			t9 = Array.from({ length: 4 }, (__0, index_2) => {
+				const quarter_0 = index_2 + 1;
+				const date_0 = quarterDate(quarter_0);
+				return {
+					key: `quarter-${quarter_0}`,
+					label: `Q${quarter_0}`,
+					isSelected: selected != null && selected.year === anchor.year && getQuarter(selected.month) === quarter_0,
+					isCurrent: todayDate.year === anchor.year && getQuarter(todayDate.month) === quarter_0,
+					isDisabled: isPeriodDisabled(date_0, endOfMonth(date_0.add({ months: 2 })))
+				};
+			});
+			$[67] = anchor.year;
+			$[68] = isPeriodDisabled;
+			$[69] = quarterDate;
+			$[70] = selected;
+			$[71] = t9;
+		} else t9 = $[71];
+		cells = t9;
 		focusedIndex = getQuarter(anchor.month) - 1;
-		gridLabel = t("calendar.quarters", "Quarters");
-		header = renderYearHeader();
-		onCellPress = (index) => onChange?.(quarterDate(index + 1));
-		onCellFocus = (index) => setAnchor(quarterDate(index + 1));
-		onMoveFocus = (delta) => setAnchor(anchor.add({ months: delta * 3 }));
-		onMovePage = (delta) => setAnchor(anchor.add({ years: delta }));
+		let t10;
+		if ($[72] !== t) {
+			t10 = t("calendar.quarters", "Quarters");
+			$[72] = t;
+			$[73] = t10;
+		} else t10 = $[73];
+		gridLabel = t10;
+		let t11;
+		if ($[74] !== renderYearHeader) {
+			t11 = renderYearHeader();
+			$[74] = renderYearHeader;
+			$[75] = t11;
+		} else t11 = $[75];
+		header = t11;
+		let t12;
+		if ($[76] !== onChange || $[77] !== quarterDate) {
+			t12 = (index_3) => onChange?.(quarterDate(index_3 + 1));
+			$[76] = onChange;
+			$[77] = quarterDate;
+			$[78] = t12;
+		} else t12 = $[78];
+		onCellPress = t12;
+		let t13;
+		if ($[79] !== quarterDate) {
+			t13 = (index_4) => setAnchor(quarterDate(index_4 + 1));
+			$[79] = quarterDate;
+			$[80] = t13;
+		} else t13 = $[80];
+		onCellFocus = t13;
+		let t14;
+		if ($[81] !== anchor) {
+			t14 = (delta_1) => setAnchor(anchor.add({ months: delta_1 * 3 }));
+			$[81] = anchor;
+			$[82] = t14;
+		} else t14 = $[82];
+		onMoveFocus = t14;
+		let t15;
+		if ($[83] !== anchor) {
+			t15 = (delta_2) => setAnchor(anchor.add({ years: delta_2 }));
+			$[83] = anchor;
+			$[84] = t15;
+		} else t15 = $[84];
+		onMovePage = t15;
 	} else {
-		let monthDate = (month) => new CalendarDate(anchor.year, month, 1);
-		cells = Array.from({ length: 12 }, (_, index) => {
-			let month = index + 1;
-			let date = monthDate(month);
-			return {
-				key: `month-${month}`,
-				label: monthFormatter.format(date.toDate("UTC")),
-				isSelected: selected != null && selected.year === anchor.year && selected.month === month,
-				isCurrent: todayDate.year === anchor.year && todayDate.month === month,
-				isDisabled: isPeriodDisabled(date, endOfMonth(date))
-			};
-		});
+		let t8;
+		if ($[85] !== anchor.year) {
+			t8 = (month) => new CalendarDate(anchor.year, month, 1);
+			$[85] = anchor.year;
+			$[86] = t8;
+		} else t8 = $[86];
+		const monthDate = t8;
+		let t9;
+		if ($[87] !== anchor.year || $[88] !== isPeriodDisabled || $[89] !== monthDate || $[90] !== monthFormatter || $[91] !== selected) {
+			t9 = Array.from({ length: 12 }, (__1, index_5) => {
+				const month_0 = index_5 + 1;
+				const date_1 = monthDate(month_0);
+				return {
+					key: `month-${month_0}`,
+					label: monthFormatter.format(date_1.toDate("UTC")),
+					isSelected: selected != null && selected.year === anchor.year && selected.month === month_0,
+					isCurrent: todayDate.year === anchor.year && todayDate.month === month_0,
+					isDisabled: isPeriodDisabled(date_1, endOfMonth(date_1))
+				};
+			});
+			$[87] = anchor.year;
+			$[88] = isPeriodDisabled;
+			$[89] = monthDate;
+			$[90] = monthFormatter;
+			$[91] = selected;
+			$[92] = t9;
+		} else t9 = $[92];
+		cells = t9;
 		focusedIndex = anchor.month - 1;
-		gridLabel = t("calendar.months", "Months");
-		header = renderYearHeader();
-		onCellPress = (index) => onChange?.(monthDate(index + 1));
-		onCellFocus = (index) => setAnchor(monthDate(index + 1));
-		onMoveFocus = (delta) => setAnchor(anchor.add({ months: delta }));
-		onMovePage = (delta) => setAnchor(anchor.add({ years: delta }));
+		let t10;
+		if ($[93] !== t) {
+			t10 = t("calendar.months", "Months");
+			$[93] = t;
+			$[94] = t10;
+		} else t10 = $[94];
+		gridLabel = t10;
+		let t11;
+		if ($[95] !== renderYearHeader) {
+			t11 = renderYearHeader();
+			$[95] = renderYearHeader;
+			$[96] = t11;
+		} else t11 = $[96];
+		header = t11;
+		let t12;
+		if ($[97] !== monthDate || $[98] !== onChange) {
+			t12 = (index_6) => onChange?.(monthDate(index_6 + 1));
+			$[97] = monthDate;
+			$[98] = onChange;
+			$[99] = t12;
+		} else t12 = $[99];
+		onCellPress = t12;
+		let t13;
+		if ($[100] !== monthDate) {
+			t13 = (index_7) => setAnchor(monthDate(index_7 + 1));
+			$[100] = monthDate;
+			$[101] = t13;
+		} else t13 = $[101];
+		onCellFocus = t13;
+		let t14;
+		if ($[102] !== anchor) {
+			t14 = (delta_3) => setAnchor(anchor.add({ months: delta_3 }));
+			$[102] = anchor;
+			$[103] = t14;
+		} else t14 = $[103];
+		onMoveFocus = t14;
+		let t15;
+		if ($[104] !== anchor) {
+			t15 = (delta_4) => setAnchor(anchor.add({ years: delta_4 }));
+			$[104] = anchor;
+			$[105] = t15;
+		} else t15 = $[105];
+		onMovePage = t15;
 	}
-	return /* @__PURE__ */ jsxs(CalendarElement, {
-		onKeyDown,
-		children: [header, /* @__PURE__ */ jsx(PeriodGrid, {
+	const t8 = COLUMNS[view];
+	let t9;
+	if ($[106] !== autoFocusGrid || $[107] !== cells || $[108] !== focusedIndex || $[109] !== gridLabel || $[110] !== onCellFocus || $[111] !== onCellPress || $[112] !== onMoveFocus || $[113] !== onMovePage || $[114] !== t8 || $[115] !== view) {
+		t9 = /* @__PURE__ */ jsx(PeriodGrid, {
 			autoFocus: autoFocusGrid,
 			"aria-label": gridLabel,
 			cells,
 			styles: PERIOD_GRID_STYLES,
-			columns: COLUMNS[view],
+			columns: t8,
 			focusedIndex,
 			onCellPress,
 			onCellFocus,
 			onMoveFocus,
 			onMovePage
-		}, view)]
-	});
+		}, view);
+		$[106] = autoFocusGrid;
+		$[107] = cells;
+		$[108] = focusedIndex;
+		$[109] = gridLabel;
+		$[110] = onCellFocus;
+		$[111] = onCellPress;
+		$[112] = onMoveFocus;
+		$[113] = onMovePage;
+		$[114] = t8;
+		$[115] = view;
+		$[116] = t9;
+	} else t9 = $[116];
+	let t10;
+	if ($[117] !== header || $[118] !== onKeyDown || $[119] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(CalendarElement, {
+			onKeyDown,
+			children: [header, t9]
+		});
+		$[117] = header;
+		$[118] = onKeyDown;
+		$[119] = t9;
+		$[120] = t10;
+	} else t10 = $[120];
+	return t10;
+}
+function _temp(year) {
+	return new CalendarDate(year, 1, 1);
 }
 
 //#endregion