@povio/ui 3.3.0-rc.4 → 3.3.0

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

@@ -3,7 +3,6 @@ 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";
@@ -17,239 +16,106 @@ var HourCycle = {
 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;
+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));
 	const hasTimeValue = !!datePickerState?.timeValue;
 	let timeLabel = "--:--";
 	if (isTimeOptional || hasTimeValue) {
-		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;
+		const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
+		timeLabel = timeFormatter.format(date);
 	}
-	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
+	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_0) => {
+							if (isSelected_0) {
+								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_1) => setToggleState(isSelected_1 ? "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" })
+				})
 			})
-		});
-		$[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 };