@povio/ui 2.3.0-rc.9 → 2.3.1

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

@@ -3,269 +3,113 @@ 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 { CalendarDateTime, Time } from "@internationalized/date";
+import { 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 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", {
+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", {
 				className: "inline-flex h-12 items-center p-3",
 				children: /* @__PURE__ */ jsx(Button, {
 					...prevButtonProps,
-					isDisabled: t13,
-					className: t15,
-					children: t16
+					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" })
 				})
-			});
-			$[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 };