@povio/ui 3.3.0-rc.3 → 3.3.0

package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js

@@ -7,65 +7,59 @@ import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconBu
 import { PillButton } from "../../../buttons/PillButton/PillButton.js";
 import "../../../../config/i18n.js";
 import { Select } from "../../Selection/Select/Select.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
-var CalendarSelectHeader = (t0) => {
-	const $ = c(67);
-	const { state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset: t1, onNavigate, maxDate, minDate } = t0;
-	const offset = t1 === void 0 ? { months: 0 } : t1;
+var CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
 	const { t } = useTranslation("ui");
 	const displayDate = state.visibleRange.start.add(offset);
 	const currentMonth = displayDate.month - 1;
 	const currentYear = displayDate.year;
-	let t2;
-	if ($[0] !== state.timeZone) {
-		t2 = {
-			month: "long",
-			timeZone: state.timeZone
-		};
-		$[0] = state.timeZone;
-		$[1] = t2;
-	} else t2 = $[1];
-	const formatter = useDateFormatter(t2);
+	const formatter = useDateFormatter({
+		month: "long",
+		timeZone: state.timeZone
+	});
 	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-	let months;
-	if ($[2] !== formatter || $[3] !== numMonths || $[4] !== state.focusedDate || $[5] !== state.timeZone) {
-		months = [];
+	const MONTHS = useMemo(() => {
+		const months = [];
 		for (let i = 1; i <= numMonths; i++) {
 			const date = state.focusedDate.set({ month: i });
 			months.push(formatter.format(date.toDate(state.timeZone)));
 		}
-		$[2] = formatter;
-		$[3] = numMonths;
-		$[4] = state.focusedDate;
-		$[5] = state.timeZone;
-		$[6] = months;
-	} else months = $[6];
-	const MONTHS = months;
+		return months;
+	}, [
+		formatter,
+		numMonths,
+		state.focusedDate,
+		state.timeZone
+	]);
 	const years = Array.from({ length: 201 }, (_, i_0) => currentYear - 100 + i_0);
-	const getAvailableMonths = () => MONTHS.map((month, i_1) => {
-		const monthDate = displayDate.set({ month: i_1 + 1 });
-		let isDisabled = false;
-		if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
-		if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
-		return {
-			month,
-			value: i_1,
-			isDisabled
-		};
-	});
-	const getAvailableYears = () => years.map((year) => {
-		let isDisabled_0 = false;
-		if (maxDate) isDisabled_0 = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
-		if (minDate && !isDisabled_0) isDisabled_0 = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
-		return {
-			year,
-			isDisabled: isDisabled_0
-		};
-	});
+	const getAvailableMonths = () => {
+		return MONTHS.map((month, i_1) => {
+			const monthDate = displayDate.set({ month: i_1 + 1 });
+			let isDisabled = false;
+			if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
+			if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
+			return {
+				month,
+				value: i_1,
+				isDisabled
+			};
+		});
+	};
+	const getAvailableYears = () => {
+		return years.map((year) => {
+			let isDisabled_0 = false;
+			if (maxDate) isDisabled_0 = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
+			if (minDate && !isDisabled_0) isDisabled_0 = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+			return {
+				year,
+				isDisabled: isDisabled_0
+			};
+		});
+	};
 	const availableMonths = getAvailableMonths();
 	const availableYears = getAvailableYears();
 	const handleMonthChange = (value) => {
@@ -102,257 +96,82 @@ var CalendarSelectHeader = (t0) => {
 		const newDate_4 = displayDate.add({ years: 1 });
 		onNavigate?.(newDate_4);
 	};
-	const t3 = "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5";
-	let t4;
-	if ($[7] !== t) {
-		t4 = t(_temp);
-		$[7] = t;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== handlePrevYear || $[10] !== isPrevYearDisabled || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			isDisabled: isPrevYearDisabled,
-			onClick: handlePrevYear,
-			icon: ChevronsLeftIcon,
-			label: t4
-		});
-		$[9] = handlePrevYear;
-		$[10] = isPrevYearDisabled;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	let t6;
-	if ($[13] !== t) {
-		t6 = t(_temp2);
-		$[13] = t;
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] !== handlePrevMonth || $[16] !== isPrevMonthDisabled || $[17] !== t6) {
-		t7 = /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			isDisabled: isPrevMonthDisabled,
-			onClick: handlePrevMonth,
-			icon: ChevronLeftIcon,
-			label: t6
-		});
-		$[15] = handlePrevMonth;
-		$[16] = isPrevMonthDisabled;
-		$[17] = t6;
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] !== t5 || $[20] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center",
-			children: [t5, t7]
-		});
-		$[19] = t5;
-		$[20] = t7;
-		$[21] = t8;
-	} else t8 = $[21];
-	const t9 = "flex gap-2";
-	const t10 = MONTHS[currentMonth];
-	let t11;
-	if ($[22] !== t10) {
-		t11 = t10.slice(0, 3);
-		$[22] = t10;
-		$[23] = t11;
-	} else t11 = $[23];
-	let t12;
-	if ($[24] !== t11) {
-		t12 = /* @__PURE__ */ jsx(PillButton, {
-			color: "secondary",
-			variant: "subtle",
-			iconPosition: "right",
-			icon: ArrowDropDownIcon,
-			children: t11
-		});
-		$[24] = t11;
-		$[25] = t12;
-	} else t12 = $[25];
-	let t13;
-	if ($[26] !== availableMonths) {
-		t13 = availableMonths.map(_temp3).filter(_temp4);
-		$[26] = availableMonths;
-		$[27] = t13;
-	} else t13 = $[27];
-	let t14;
-	if ($[28] !== currentMonth || $[29] !== handleMonthChange || $[30] !== t12 || $[31] !== t13) {
-		t14 = /* @__PURE__ */ jsx(Select, {
-			label: "Month",
-			hideLabel: true,
-			customTrigger: t12,
-			ignoreTriggerWidth: true,
-			items: t13,
-			value: currentMonth,
-			onChange: handleMonthChange
-		});
-		$[28] = currentMonth;
-		$[29] = handleMonthChange;
-		$[30] = t12;
-		$[31] = t13;
-		$[32] = t14;
-	} else t14 = $[32];
-	const T0 = Select;
-	const t15 = "Year";
-	const t16 = true;
-	let t17;
-	if ($[33] !== currentYear) {
-		t17 = currentYear.toString();
-		$[33] = currentYear;
-		$[34] = t17;
-	} else t17 = $[34];
-	let t18;
-	if ($[35] !== t17) {
-		t18 = /* @__PURE__ */ jsx(PillButton, {
-			color: "secondary",
-			variant: "subtle",
-			iconPosition: "right",
-			icon: ArrowDropDownIcon,
-			children: t17
-		});
-		$[35] = t17;
-		$[36] = t18;
-	} else t18 = $[36];
-	const t19 = availableYears.map(_temp5);
-	let t20;
-	if ($[37] !== t19) {
-		t20 = t19.filter(_temp6);
-		$[37] = t19;
-		$[38] = t20;
-	} else t20 = $[38];
-	let t21;
-	if ($[39] !== T0 || $[40] !== currentYear || $[41] !== handleYearChange || $[42] !== t18 || $[43] !== t20) {
-		t21 = /* @__PURE__ */ jsx(T0, {
-			label: t15,
-			hideLabel: t16,
-			customTrigger: t18,
-			items: t20,
-			value: currentYear,
-			onChange: handleYearChange
-		});
-		$[39] = T0;
-		$[40] = currentYear;
-		$[41] = handleYearChange;
-		$[42] = t18;
-		$[43] = t20;
-		$[44] = t21;
-	} else t21 = $[44];
-	let t22;
-	if ($[45] !== t14 || $[46] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
-			className: t9,
-			children: [t14, t21]
-		});
-		$[45] = t14;
-		$[46] = t21;
-		$[47] = t22;
-	} else t22 = $[47];
-	let t23;
-	if ($[48] !== t) {
-		t23 = t(_temp7);
-		$[48] = t;
-		$[49] = t23;
-	} else t23 = $[49];
-	let t24;
-	if ($[50] !== handleNextMonth || $[51] !== isNextMonthDisabled || $[52] !== t23) {
-		t24 = /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			isDisabled: isNextMonthDisabled,
-			onClick: handleNextMonth,
-			icon: ChevronRightIcon,
-			label: t23
-		});
-		$[50] = handleNextMonth;
-		$[51] = isNextMonthDisabled;
-		$[52] = t23;
-		$[53] = t24;
-	} else t24 = $[53];
-	let t25;
-	if ($[54] !== t) {
-		t25 = t(_temp8);
-		$[54] = t;
-		$[55] = t25;
-	} else t25 = $[55];
-	let t26;
-	if ($[56] !== handleNextYear || $[57] !== isNextYearDisabled || $[58] !== t25) {
-		t26 = /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			isDisabled: isNextYearDisabled,
-			onClick: handleNextYear,
-			icon: ChevronsRightIcon,
-			label: t25
-		});
-		$[56] = handleNextYear;
-		$[57] = isNextYearDisabled;
-		$[58] = t25;
-		$[59] = t26;
-	} else t26 = $[59];
-	let t27;
-	if ($[60] !== t24 || $[61] !== t26) {
-		t27 = /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center",
-			children: [t24, t26]
-		});
-		$[60] = t24;
-		$[61] = t26;
-		$[62] = t27;
-	} else t27 = $[62];
-	let t28;
-	if ($[63] !== t22 || $[64] !== t27 || $[65] !== t8) {
-		t28 = /* @__PURE__ */ jsxs("div", {
-			className: t3,
-			children: [
-				t8,
-				t22,
-				t27
-			]
-		});
-		$[63] = t22;
-		$[64] = t27;
-		$[65] = t8;
-		$[66] = t28;
-	} else t28 = $[66];
-	return t28;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between gap-3 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevYearDisabled,
+					onClick: handlePrevYear,
+					icon: ChevronsLeftIcon,
+					label: t(($) => $.ui.datePicker.navigation.previousYear)
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevMonthDisabled,
+					onClick: handlePrevMonth,
+					icon: ChevronLeftIcon,
+					label: t(($_0) => $_0.ui.datePicker.navigation.previousMonth)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Select, {
+					label: "Month",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ArrowDropDownIcon,
+						children: MONTHS[currentMonth].slice(0, 3)
+					}),
+					ignoreTriggerWidth: true,
+					items: availableMonths.map(({ month: month_0, value: value_1, isDisabled: isDisabled_1 }) => ({
+						label: month_0,
+						id: value_1,
+						isDisabled: isDisabled_1
+					})).filter(({ isDisabled: isDisabled_2 }) => !isDisabled_2),
+					value: currentMonth,
+					onChange: handleMonthChange
+				}), /* @__PURE__ */ jsx(Select, {
+					label: "Year",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ArrowDropDownIcon,
+						children: currentYear.toString()
+					}),
+					items: availableYears.map(({ year: year_0, isDisabled: isDisabled_3 }) => ({
+						label: year_0.toString(),
+						id: year_0,
+						isDisabled: isDisabled_3
+					})).filter(({ isDisabled: isDisabled_4 }) => !isDisabled_4),
+					value: currentYear,
+					onChange: handleYearChange
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextMonthDisabled,
+					onClick: handleNextMonth,
+					icon: ChevronRightIcon,
+					label: t(($_1) => $_1.ui.datePicker.navigation.nextMonth)
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextYearDisabled,
+					onClick: handleNextYear,
+					icon: ChevronsRightIcon,
+					label: t(($_2) => $_2.ui.datePicker.navigation.nextYear)
+				})]
+			})
+		]
+	});
 };
-function _temp($) {
-	return $.ui.datePicker.navigation.previousYear;
-}
-function _temp2($_0) {
-	return $_0.ui.datePicker.navigation.previousMonth;
-}
-function _temp3(t0) {
-	const { month: month_0, value: value_1, isDisabled: isDisabled_1 } = t0;
-	return {
-		label: month_0,
-		id: value_1,
-		isDisabled: isDisabled_1
-	};
-}
-function _temp4(t0) {
-	const { isDisabled: isDisabled_2 } = t0;
-	return !isDisabled_2;
-}
-function _temp5(t0) {
-	const { year: year_0, isDisabled: isDisabled_3 } = t0;
-	return {
-		label: year_0.toString(),
-		id: year_0,
-		isDisabled: isDisabled_3
-	};
-}
-function _temp6(t0) {
-	const { isDisabled: isDisabled_4 } = t0;
-	return !isDisabled_4;
-}
-function _temp7($_1) {
-	return $_1.ui.datePicker.navigation.nextMonth;
-}
-function _temp8($_2) {
-	return $_2.ui.datePicker.navigation.nextYear;
-}
 //#endregion
 export { CalendarSelectHeader };