@povio/ui 3.1.0 → 3.2.0

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

@@ -3,118 +3,253 @@ 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, isTimeOptional, 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));
+var getTimeFormatterDate = (timeValue, timeZone) => {
+	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
+};
+var CalendarHeader = (t0) => {
+	const $ = c(55);
+	const { calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, 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;
 	const hasTimeValue = !!datePickerState?.timeValue;
 	let timeLabel = "--:--";
 	if (isTimeOptional || hasTimeValue) {
-		const timeValue = datePickerState?.timeValue || new Time();
-		const date = /* @__PURE__ */ new Date();
-		date.setHours(timeValue.hour, timeValue.minute);
-		timeLabel = timeFormatter.format(date);
+		let t7;
+		if ($[11] !== calendarState.timeZone || $[12] !== datePickerState?.timeValue || $[13] !== timeFormatter) {
+			const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
+			t7 = timeFormatter.format(date);
+			$[11] = calendarState.timeZone;
+			$[12] = datePickerState?.timeValue;
+			$[13] = timeFormatter;
+			$[14] = t7;
+		} else t7 = $[14];
+		timeLabel = t7;
 	}
-	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", {
-				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: timeLabel
-					})
-				]
-			}),
-			/* @__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" })
-				})
+	const t7 = !!toggleState;
+	const t8 = !!toggleState && "opacity-0";
+	let t9;
+	if ($[15] !== t8) {
+		t9 = clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", t8);
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" });
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== prevButtonProps || $[19] !== t7 || $[20] !== t9) {
+		t11 = /* @__PURE__ */ jsx("div", {
+			className: "inline-flex h-12 items-center p-3",
+			children: /* @__PURE__ */ jsx(Button, {
+				...prevButtonProps,
+				isDisabled: t7,
+				className: t9,
+				children: t10
+			})
+		});
+		$[18] = prevButtonProps;
+		$[19] = t7;
+		$[20] = t9;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== granularity || $[23] !== month || $[24] !== setToggleState || $[25] !== toggleState) {
+		t12 = 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
+		});
+		$[22] = granularity;
+		$[23] = month;
+		$[24] = setToggleState;
+		$[25] = toggleState;
+		$[26] = t12;
+	} else t12 = $[26];
+	const t13 = toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon;
+	const t14 = toggleState === "year";
+	let t15;
+	if ($[27] !== granularity || $[28] !== setToggleState) {
+		t15 = (isSelected_0) => {
+			if (isSelected_0) {
+				setToggleState("year");
+				return;
+			}
+			if (granularity === "day") {
+				setToggleState(null);
+				return;
+			}
+			if (granularity === "month") {
+				setToggleState("month");
+				return;
+			}
+			setToggleState("year");
+		};
+		$[27] = granularity;
+		$[28] = setToggleState;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== year) {
+		t16 = /* @__PURE__ */ jsx(PillButton, {
+			color: "secondary",
+			variant: "subtle",
+			iconPosition: "right",
+			icon: t13,
+			toggle: true,
+			isSelected: t14,
+			onChange: t15,
+			children: year
+		});
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = year;
+		$[34] = t16;
+	} else t16 = $[34];
+	let t17;
+	if ($[35] !== includesTime || $[36] !== setToggleState || $[37] !== timeLabel || $[38] !== toggleState) {
+		t17 = 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: timeLabel
+		});
+		$[35] = includesTime;
+		$[36] = setToggleState;
+		$[37] = timeLabel;
+		$[38] = toggleState;
+		$[39] = t17;
+	} else t17 = $[39];
+	let t18;
+	if ($[40] !== t12 || $[41] !== t16 || $[42] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(ToggleButtonGroup, {
+			className: "flex gap-2",
+			children: [
+				t12,
+				t16,
+				t17
+			]
+		});
+		$[40] = t12;
+		$[41] = t16;
+		$[42] = t17;
+		$[43] = t18;
+	} else t18 = $[43];
+	const t19 = !!toggleState;
+	const t20 = !!toggleState && "opacity-0";
+	let t21;
+	if ($[44] !== t20) {
+		t21 = clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", t20);
+		$[44] = t20;
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+		t22 = /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" });
+		$[46] = t22;
+	} else t22 = $[46];
+	let t23;
+	if ($[47] !== nextButtonProps || $[48] !== t19 || $[49] !== t21) {
+		t23 = /* @__PURE__ */ jsx("div", {
+			className: "inline-flex h-12 items-center p-3",
+			children: /* @__PURE__ */ jsx(Button, {
+				...nextButtonProps,
+				isDisabled: t19,
+				className: t21,
+				children: t22
 			})
-		]
-	});
+		});
+		$[47] = nextButtonProps;
+		$[48] = t19;
+		$[49] = t21;
+		$[50] = t23;
+	} else t23 = $[50];
+	let t24;
+	if ($[51] !== t11 || $[52] !== t18 || $[53] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
+			className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
+			children: [
+				t11,
+				t18,
+				t23
+			]
+		});
+		$[51] = t11;
+		$[52] = t18;
+		$[53] = t23;
+		$[54] = t24;
+	} else t24 = $[54];
+	return t24;
 };
 //#endregion
 export { CalendarHeader };