@povio/ui 2.3.1 → 2.3.2-rc.2

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

@@ -3,113 +3,269 @@ import { ArrowDropUpIcon } from "../../../../assets/icons/ArrowDropUp.js";
 import { ChevronLeftIcon } from "../../../../assets/icons/ChevronLeft.js";
 import { ChevronRightIcon } from "../../../../assets/icons/ChevronRight.js";
 import { PillButton } from "../../../buttons/PillButton/PillButton.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
-import { Time } from "@internationalized/date";
+import { CalendarDateTime, Time } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
 var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
-var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity = "day", toggleState, setToggleState }) => {
-	const formatter = useDateFormatter({
-		month: "long",
-		timeZone: calendarState.timeZone
-	});
-	const timeFormatter = useDateFormatter({
-		timeStyle: "short",
-		timeZone: calendarState.timeZone,
-		hourCycle: hourCycle ? HourCycle[hourCycle] : void 0
-	});
-	const year = calendarState.focusedDate.year.toString();
-	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-	const timeValue = datePickerState?.timeValue || new Time();
-	const date = /* @__PURE__ */ new Date();
-	date.setHours(timeValue.hour, timeValue.minute);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
-		children: [
-			/* @__PURE__ */ jsx("div", {
+var getTimeFormatterDate = (timeValue, timeZone) => {
+	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
+};
+var CalendarHeader = (t0) => {
+	const $ = c(66);
+	const { calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity: t1, toggleState, setToggleState } = t0;
+	const granularity = t1 === void 0 ? "day" : t1;
+	let t2;
+	if ($[0] !== calendarState.timeZone) {
+		t2 = {
+			month: "long",
+			timeZone: calendarState.timeZone
+		};
+		$[0] = calendarState.timeZone;
+		$[1] = t2;
+	} else t2 = $[1];
+	const formatter = useDateFormatter(t2);
+	const t3 = hourCycle ? HourCycle[hourCycle] : void 0;
+	let t4;
+	if ($[2] !== calendarState.timeZone || $[3] !== t3) {
+		t4 = {
+			timeStyle: "short",
+			timeZone: calendarState.timeZone,
+			hourCycle: t3
+		};
+		$[2] = calendarState.timeZone;
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	const timeFormatter = useDateFormatter(t4);
+	let t5;
+	if ($[5] !== calendarState.focusedDate.year) {
+		t5 = calendarState.focusedDate.year.toString();
+		$[5] = calendarState.focusedDate.year;
+		$[6] = t5;
+	} else t5 = $[6];
+	const year = t5;
+	let t6;
+	if ($[7] !== calendarState.focusedDate || $[8] !== calendarState.timeZone || $[9] !== formatter) {
+		t6 = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
+		$[7] = calendarState.focusedDate;
+		$[8] = calendarState.timeZone;
+		$[9] = formatter;
+		$[10] = t6;
+	} else t6 = $[10];
+	const month = t6;
+	let T0;
+	let t10;
+	let t11;
+	let t12;
+	let t7;
+	let t8;
+	let t9;
+	if ($[11] !== calendarState.timeZone || $[12] !== datePickerState?.timeValue || $[13] !== granularity || $[14] !== includesTime || $[15] !== month || $[16] !== prevButtonProps || $[17] !== setToggleState || $[18] !== timeFormatter || $[19] !== toggleState || $[20] !== year) {
+		const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
+		t11 = "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1";
+		const t13 = !!toggleState;
+		const t14 = !!toggleState && "opacity-0";
+		let t15;
+		if ($[28] !== t14) {
+			t15 = clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", t14);
+			$[28] = t14;
+			$[29] = t15;
+		} else t15 = $[29];
+		let t16;
+		if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+			t16 = /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" });
+			$[30] = t16;
+		} else t16 = $[30];
+		if ($[31] !== prevButtonProps || $[32] !== t13 || $[33] !== t15) {
+			t12 = /* @__PURE__ */ jsx("div", {
 				className: "inline-flex h-12 items-center p-3",
 				children: /* @__PURE__ */ jsx(Button, {
 					...prevButtonProps,
-					isDisabled: !!toggleState,
-					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
-					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-				})
-			}),
-			/* @__PURE__ */ jsxs(ToggleButtonGroup, {
-				className: "flex gap-2",
-				children: [
-					granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
-						toggle: true,
-						isSelected: toggleState === "month",
-						onChange: (isSelected) => {
-							if (!isSelected) {
-								if (granularity === "day") {
-									setToggleState(null);
-									return;
-								}
-								setToggleState("month");
-								return;
-							}
-							setToggleState("month");
-						},
-						children: month
-					}),
-					/* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon,
-						toggle: true,
-						isSelected: toggleState === "year",
-						onChange: (isSelected) => {
-							if (isSelected) {
-								setToggleState("year");
-								return;
-							}
-							if (granularity === "day") {
-								setToggleState(null);
-								return;
-							}
-							if (granularity === "month") {
-								setToggleState("month");
-								return;
-							}
-							setToggleState("year");
-						},
-						children: year
-					}),
-					includesTime && /* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
-						toggle: true,
-						isSelected: toggleState === "time",
-						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
-						children: timeFormatter.format(date)
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "inline-flex h-12 items-center p-3",
-				children: /* @__PURE__ */ jsx(Button, {
-					...nextButtonProps,
-					isDisabled: !!toggleState,
-					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+					isDisabled: t13,
+					className: t15,
+					children: t16
 				})
+			});
+			$[31] = prevButtonProps;
+			$[32] = t13;
+			$[33] = t15;
+			$[34] = t12;
+		} else t12 = $[34];
+		T0 = ToggleButtonGroup;
+		t7 = "flex gap-2";
+		if ($[35] !== granularity || $[36] !== month || $[37] !== setToggleState || $[38] !== toggleState) {
+			t8 = granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
+				color: "secondary",
+				variant: "subtle",
+				iconPosition: "right",
+				icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
+				toggle: true,
+				isSelected: toggleState === "month",
+				onChange: (isSelected) => {
+					if (!isSelected) {
+						if (granularity === "day") {
+							setToggleState(null);
+							return;
+						}
+						setToggleState("month");
+						return;
+					}
+					setToggleState("month");
+				},
+				children: month
+			});
+			$[35] = granularity;
+			$[36] = month;
+			$[37] = setToggleState;
+			$[38] = toggleState;
+			$[39] = t8;
+		} else t8 = $[39];
+		const t17 = toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon;
+		const t18 = toggleState === "year";
+		let t19;
+		if ($[40] !== granularity || $[41] !== setToggleState) {
+			t19 = (isSelected_0) => {
+				if (isSelected_0) {
+					setToggleState("year");
+					return;
+				}
+				if (granularity === "day") {
+					setToggleState(null);
+					return;
+				}
+				if (granularity === "month") {
+					setToggleState("month");
+					return;
+				}
+				setToggleState("year");
+			};
+			$[40] = granularity;
+			$[41] = setToggleState;
+			$[42] = t19;
+		} else t19 = $[42];
+		if ($[43] !== t17 || $[44] !== t18 || $[45] !== t19 || $[46] !== year) {
+			t9 = /* @__PURE__ */ jsx(PillButton, {
+				color: "secondary",
+				variant: "subtle",
+				iconPosition: "right",
+				icon: t17,
+				toggle: true,
+				isSelected: t18,
+				onChange: t19,
+				children: year
+			});
+			$[43] = t17;
+			$[44] = t18;
+			$[45] = t19;
+			$[46] = year;
+			$[47] = t9;
+		} else t9 = $[47];
+		t10 = includesTime && /* @__PURE__ */ jsx(PillButton, {
+			color: "secondary",
+			variant: "subtle",
+			iconPosition: "right",
+			icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
+			toggle: true,
+			isSelected: toggleState === "time",
+			onChange: (isSelected_1) => setToggleState(isSelected_1 ? "time" : null),
+			children: timeFormatter.format(date)
+		});
+		$[11] = calendarState.timeZone;
+		$[12] = datePickerState?.timeValue;
+		$[13] = granularity;
+		$[14] = includesTime;
+		$[15] = month;
+		$[16] = prevButtonProps;
+		$[17] = setToggleState;
+		$[18] = timeFormatter;
+		$[19] = toggleState;
+		$[20] = year;
+		$[21] = T0;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+	} else {
+		T0 = $[21];
+		t10 = $[22];
+		t11 = $[23];
+		t12 = $[24];
+		t7 = $[25];
+		t8 = $[26];
+		t9 = $[27];
+	}
+	let t13;
+	if ($[48] !== T0 || $[49] !== t10 || $[50] !== t7 || $[51] !== t8 || $[52] !== t9) {
+		t13 = /* @__PURE__ */ jsxs(T0, {
+			className: t7,
+			children: [
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[48] = T0;
+		$[49] = t10;
+		$[50] = t7;
+		$[51] = t8;
+		$[52] = t9;
+		$[53] = t13;
+	} else t13 = $[53];
+	const t14 = !!toggleState;
+	const t15 = !!toggleState && "opacity-0";
+	let t16;
+	if ($[54] !== t15) {
+		t16 = clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", t15);
+		$[54] = t15;
+		$[55] = t16;
+	} else t16 = $[55];
+	let t17;
+	if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+		t17 = /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" });
+		$[56] = t17;
+	} else t17 = $[56];
+	let t18;
+	if ($[57] !== nextButtonProps || $[58] !== t14 || $[59] !== t16) {
+		t18 = /* @__PURE__ */ jsx("div", {
+			className: "inline-flex h-12 items-center p-3",
+			children: /* @__PURE__ */ jsx(Button, {
+				...nextButtonProps,
+				isDisabled: t14,
+				className: t16,
+				children: t17
 			})
-		]
-	});
+		});
+		$[57] = nextButtonProps;
+		$[58] = t14;
+		$[59] = t16;
+		$[60] = t18;
+	} else t18 = $[60];
+	let t19;
+	if ($[61] !== t11 || $[62] !== t12 || $[63] !== t13 || $[64] !== t18) {
+		t19 = /* @__PURE__ */ jsxs("div", {
+			className: t11,
+			children: [
+				t12,
+				t13,
+				t18
+			]
+		});
+		$[61] = t11;
+		$[62] = t12;
+		$[63] = t13;
+		$[64] = t18;
+		$[65] = t19;
+	} else t19 = $[65];
+	return t19;
 };
 //#endregion
 export { CalendarHeader };