@povio/ui 3.3.0-rc.3 → 3.3.0

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

@@ -3,316 +3,160 @@ import { CalendarHeader } from "./CalendarHeader.js";
 import { MonthPicker } from "./MonthPicker.js";
 import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useCalendar } from "@react-aria/calendar";
 //#region src/components/inputs/DateTime/shared/Calendar.tsx
-var Calendar = (t0) => {
-	const $ = c(92);
-	let className;
-	let datePickerState;
-	let hourCycle;
-	let includesTime;
-	let isTimeOptional;
-	let onApply;
-	let onDateSelectionChange;
-	let onMonthYearChange;
-	let onMonthYearCommit;
-	let props;
-	let selectedDate;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity: t1, setDateValueOnDateSelection: t2, onDateSelectionChange, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = datePickerState;
-		$[3] = hourCycle;
-		$[4] = includesTime;
-		$[5] = isTimeOptional;
-		$[6] = onApply;
-		$[7] = onDateSelectionChange;
-		$[8] = onMonthYearChange;
-		$[9] = onMonthYearCommit;
-		$[10] = props;
-		$[11] = selectedDate;
-		$[12] = t1;
-		$[13] = t2;
-	} else {
-		className = $[1];
-		datePickerState = $[2];
-		hourCycle = $[3];
-		includesTime = $[4];
-		isTimeOptional = $[5];
-		onApply = $[6];
-		onDateSelectionChange = $[7];
-		onMonthYearChange = $[8];
-		onMonthYearCommit = $[9];
-		props = $[10];
-		selectedDate = $[11];
-		t1 = $[12];
-		t2 = $[13];
-	}
-	const granularity = t1 === void 0 ? "day" : t1;
-	const setDateValueOnDateSelection = t2 === void 0 ? false : t2;
-	let t3;
-	if ($[14] !== granularity) {
-		t3 = () => {
-			if (granularity === "year") return "year";
-			if (granularity === "month") return "month";
-			return null;
-		};
-		$[14] = granularity;
-		$[15] = t3;
-	} else t3 = $[15];
-	const [toggleState, setToggleState] = useState(t3);
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", setDateValueOnDateSelection = false, onDateSelectionChange, ...props }) => {
+	const [toggleState, setToggleState] = useState(() => {
+		if (granularity === "year") return "year";
+		if (granularity === "month") return "month";
+		return null;
+	});
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-	let t4;
-	let t5;
-	if ($[16] !== granularity || $[17] !== includesTime || $[18] !== toggleState) {
-		t4 = () => {
-			if (granularity === "year" && toggleState !== "year") {
-				setToggleState("year");
-				return;
-			}
-			if (granularity === "month" && toggleState === null) {
-				setToggleState("month");
-				return;
-			}
-			if (granularity === "month" && toggleState === "time") {
-				setToggleState("month");
-				return;
-			}
-			if (granularity === "day" && toggleState === "time" && !includesTime) setToggleState(null);
-		};
-		t5 = [
-			granularity,
-			toggleState,
-			includesTime
-		];
-		$[16] = granularity;
-		$[17] = includesTime;
-		$[18] = toggleState;
-		$[19] = t4;
-		$[20] = t5;
-	} else {
-		t4 = $[19];
-		t5 = $[20];
-	}
-	useEffect(t4, t5);
-	let t6;
-	if ($[21] !== granularity) {
-		t6 = () => {
-			if (granularity === "day") {
-				setToggleState(null);
-				return;
-			}
-			setToggleState("month");
-		};
-		$[21] = granularity;
-		$[22] = t6;
-	} else t6 = $[22];
-	const onMonthSelectionChange = t6;
-	let t7;
-	if ($[23] !== granularity) {
-		t7 = () => {
-			if (granularity === "day") {
-				setToggleState(null);
-				return;
-			}
-			if (granularity === "month") {
-				setToggleState("month");
-				return;
-			}
+	useEffect(() => {
+		if (granularity === "year" && toggleState !== "year") {
 			setToggleState("year");
-		};
-		$[23] = granularity;
-		$[24] = t7;
-	} else t7 = $[24];
-	const onYearSelectionChange = t7;
-	let t8;
-	if ($[25] !== onMonthYearChange || $[26] !== props.state || $[27] !== toggleState) {
-		t8 = (months) => {
-			if (toggleState) return;
-			if (!onMonthYearChange) return;
-			const focusedDate = props.state.focusedDate;
-			if (months === -1) {
-				onMonthYearChange(focusedDate.subtract({ months: 1 }));
-				return;
-			}
-			onMonthYearChange(focusedDate.add({ months: 1 }));
-		};
-		$[25] = onMonthYearChange;
-		$[26] = props.state;
-		$[27] = toggleState;
-		$[28] = t8;
-	} else t8 = $[28];
-	const handleHeaderMonthNavigation = t8;
-	let t9;
-	if ($[29] !== handleHeaderMonthNavigation || $[30] !== prevButtonProps) {
-		t9 = (event) => {
+			return;
+		}
+		if (granularity === "month" && toggleState === null) {
+			setToggleState("month");
+			return;
+		}
+		if (granularity === "month" && toggleState === "time") {
+			setToggleState("month");
+			return;
+		}
+		if (granularity === "day" && toggleState === "time" && !includesTime) setToggleState(null);
+	}, [
+		granularity,
+		toggleState,
+		includesTime
+	]);
+	const onMonthSelectionChange = () => {
+		if (granularity === "day") {
+			setToggleState(null);
+			return;
+		}
+		setToggleState("month");
+	};
+	const onYearSelectionChange = () => {
+		if (granularity === "day") {
+			setToggleState(null);
+			return;
+		}
+		if (granularity === "month") {
+			setToggleState("month");
+			return;
+		}
+		setToggleState("year");
+	};
+	const handleHeaderMonthNavigation = (months) => {
+		if (toggleState) return;
+		if (!onMonthYearChange) return;
+		const focusedDate = props.state.focusedDate;
+		if (months === -1) {
+			onMonthYearChange(focusedDate.subtract({ months: 1 }));
+			return;
+		}
+		onMonthYearChange(focusedDate.add({ months: 1 }));
+	};
+	const headerPrevButtonProps = {
+		...prevButtonProps,
+		onPress: (event) => {
 			prevButtonProps.onPress?.(event);
 			handleHeaderMonthNavigation(-1);
-		};
-		$[29] = handleHeaderMonthNavigation;
-		$[30] = prevButtonProps;
-		$[31] = t9;
-	} else t9 = $[31];
-	let t10;
-	if ($[32] !== prevButtonProps || $[33] !== t9) {
-		t10 = {
-			...prevButtonProps,
-			onPress: t9
-		};
-		$[32] = prevButtonProps;
-		$[33] = t9;
-		$[34] = t10;
-	} else t10 = $[34];
-	const headerPrevButtonProps = t10;
-	let t11;
-	if ($[35] !== handleHeaderMonthNavigation || $[36] !== nextButtonProps) {
-		t11 = (event_0) => {
+		}
+	};
+	const headerNextButtonProps = {
+		...nextButtonProps,
+		onPress: (event_0) => {
 			nextButtonProps.onPress?.(event_0);
 			handleHeaderMonthNavigation(1);
-		};
-		$[35] = handleHeaderMonthNavigation;
-		$[36] = nextButtonProps;
-		$[37] = t11;
-	} else t11 = $[37];
-	let t12;
-	if ($[38] !== nextButtonProps || $[39] !== t11) {
-		t12 = {
-			...nextButtonProps,
-			onPress: t11
-		};
-		$[38] = nextButtonProps;
-		$[39] = t11;
-		$[40] = t12;
-	} else t12 = $[40];
-	const headerNextButtonProps = t12;
-	let t13;
-	if ($[41] !== datePickerState || $[42] !== includesTime || $[43] !== setDateValueOnDateSelection) {
-		t13 = (date) => {
-			if (!includesTime || !setDateValueOnDateSelection) return;
-			datePickerState.setDateValue(date);
-		};
-		$[41] = datePickerState;
-		$[42] = includesTime;
-		$[43] = setDateValueOnDateSelection;
-		$[44] = t13;
-	} else t13 = $[44];
-	const onDateSelection = t13;
-	let t14;
-	if ($[45] !== datePickerState || $[46] !== includesTime || $[47] !== onApply || $[48] !== onDateSelectionChange || $[49] !== props.state || $[50] !== setDateValueOnDateSelection || $[51] !== toggleState) {
-		t14 = (selectedDate_0) => {
-			const resolvedDate = selectedDate_0 ?? props.state.focusedDate;
-			if (includesTime && resolvedDate && setDateValueOnDateSelection) {
+		}
+	};
+	const onDateSelection = useCallback((date) => {
+		if (!includesTime || !setDateValueOnDateSelection) return;
+		datePickerState.setDateValue(date);
+	}, [
+		includesTime,
+		datePickerState,
+		setDateValueOnDateSelection
+	]);
+	const handleDateChange = (selectedDate_0) => {
+		const resolvedDate = selectedDate_0 ?? props.state.focusedDate;
+		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
+			datePickerState.setDateValue(resolvedDate);
+			onDateSelectionChange?.(resolvedDate);
+		}
+		if (includesTime && toggleState !== "time") {
+			if (!setDateValueOnDateSelection && resolvedDate) {
 				datePickerState.setDateValue(resolvedDate);
 				onDateSelectionChange?.(resolvedDate);
 			}
-			if (includesTime && toggleState !== "time") {
-				if (!setDateValueOnDateSelection && resolvedDate) {
-					datePickerState.setDateValue(resolvedDate);
-					onDateSelectionChange?.(resolvedDate);
-				}
-				setToggleState("time");
-				return;
-			}
-			if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
-		};
-		$[45] = datePickerState;
-		$[46] = includesTime;
-		$[47] = onApply;
-		$[48] = onDateSelectionChange;
-		$[49] = props.state;
-		$[50] = setDateValueOnDateSelection;
-		$[51] = toggleState;
-		$[52] = t14;
-	} else t14 = $[52];
-	const handleDateChange = t14;
-	let t15;
-	if ($[53] !== datePickerState || $[54] !== granularity || $[55] !== handleDateChange || $[56] !== includesTime || $[57] !== onApply || $[58] !== onDateSelection || $[59] !== onMonthSelectionChange || $[60] !== onMonthYearChange || $[61] !== onMonthYearCommit || $[62] !== onYearSelectionChange || $[63] !== props.state || $[64] !== selectedDate || $[65] !== setDateValueOnDateSelection || $[66] !== toggleState) {
-		t15 = () => {
-			if (!toggleState) {
-				if (granularity === "month") return /* @__PURE__ */ jsx(MonthPicker, {
-					state: props.state,
-					onSelectionChange: onMonthSelectionChange,
-					onDateChange: onMonthYearChange,
-					onCommit: onMonthYearCommit,
-					selectedDate
-				});
-				if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
-					state: props.state,
-					onSelectionChange: onYearSelectionChange,
-					onDateChange: onMonthYearChange,
-					onCommit: onMonthYearCommit,
-					selectedDate
-				});
-				return /* @__PURE__ */ jsx(CalendarGrid, {
-					state: props.state,
-					onApply: handleDateChange,
-					onDoubleClickApply: !includesTime ? onApply : void 0,
-					onDateSelection,
-					shouldApplyOnDateSelection: !includesTime || setDateValueOnDateSelection
-				});
-			}
-			if (toggleState === "month") {
-				if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
-					state: props.state,
-					onSelectionChange: onYearSelectionChange,
-					onDateChange: onMonthYearChange,
-					onCommit: onMonthYearCommit,
-					selectedDate
-				});
-				return /* @__PURE__ */ jsx(MonthPicker, {
-					state: props.state,
-					onSelectionChange: onMonthSelectionChange,
-					onDateChange: onMonthYearChange,
-					onCommit: onMonthYearCommit,
-					selectedDate
-				});
-			}
-			if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
+			setToggleState("time");
+			return;
+		}
+		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
+	};
+	const getContent = () => {
+		if (!toggleState) {
+			if (granularity === "month") return /* @__PURE__ */ jsx(MonthPicker, {
+				state: props.state,
+				onSelectionChange: onMonthSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
+			});
+			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
 				state: props.state,
 				onSelectionChange: onYearSelectionChange,
 				onDateChange: onMonthYearChange,
 				onCommit: onMonthYearCommit,
 				selectedDate
 			});
-			if (toggleState === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
-				className: "flex h-72 w-80 items-center justify-center",
-				children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState })
+			return /* @__PURE__ */ jsx(CalendarGrid, {
+				state: props.state,
+				onApply: handleDateChange,
+				onDoubleClickApply: !includesTime ? onApply : void 0,
+				onDateSelection,
+				shouldApplyOnDateSelection: !includesTime || setDateValueOnDateSelection
+			});
+		}
+		if (toggleState === "month") {
+			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
+				state: props.state,
+				onSelectionChange: onYearSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
 			});
-			return null;
-		};
-		$[53] = datePickerState;
-		$[54] = granularity;
-		$[55] = handleDateChange;
-		$[56] = includesTime;
-		$[57] = onApply;
-		$[58] = onDateSelection;
-		$[59] = onMonthSelectionChange;
-		$[60] = onMonthYearChange;
-		$[61] = onMonthYearCommit;
-		$[62] = onYearSelectionChange;
-		$[63] = props.state;
-		$[64] = selectedDate;
-		$[65] = setDateValueOnDateSelection;
-		$[66] = toggleState;
-		$[67] = t15;
-	} else t15 = $[67];
-	const getContent = t15;
-	let t16;
-	if ($[68] !== className) {
-		t16 = clsx("flex min-h-0 w-full flex-col items-center", className);
-		$[68] = className;
-		$[69] = t16;
-	} else t16 = $[69];
-	let t17;
-	if ($[70] !== datePickerState || $[71] !== granularity || $[72] !== headerNextButtonProps || $[73] !== headerPrevButtonProps || $[74] !== hourCycle || $[75] !== includesTime || $[76] !== isTimeOptional || $[77] !== props.state || $[78] !== toggleState) {
-		t17 = /* @__PURE__ */ jsx(CalendarHeader, {
+			return /* @__PURE__ */ jsx(MonthPicker, {
+				state: props.state,
+				onSelectionChange: onMonthSelectionChange,
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
+			});
+		}
+		if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
+			state: props.state,
+			onSelectionChange: onYearSelectionChange,
+			onDateChange: onMonthYearChange,
+			onCommit: onMonthYearCommit,
+			selectedDate
+		});
+		if (toggleState === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
+			className: "flex h-72 w-80 items-center justify-center",
+			children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState })
+		});
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...calendarProps,
+		className: clsx("flex min-h-0 w-full flex-col items-center", className),
+		children: [/* @__PURE__ */ jsx(CalendarHeader, {
 			calendarState: props.state,
 			datePickerState,
 			prevButtonProps: headerPrevButtonProps,
@@ -323,55 +167,11 @@ var Calendar = (t0) => {
 			granularity,
 			toggleState,
 			setToggleState
-		});
-		$[70] = datePickerState;
-		$[71] = granularity;
-		$[72] = headerNextButtonProps;
-		$[73] = headerPrevButtonProps;
-		$[74] = hourCycle;
-		$[75] = includesTime;
-		$[76] = isTimeOptional;
-		$[77] = props.state;
-		$[78] = toggleState;
-		$[79] = t17;
-	} else t17 = $[79];
-	const t18 = toggleState !== "year" && "pb-8 md:pb-0";
-	let t19;
-	if ($[80] !== t18) {
-		t19 = clsx("flex min-h-0 w-full flex-1 flex-col items-center", t18);
-		$[80] = t18;
-		$[81] = t19;
-	} else t19 = $[81];
-	let t20;
-	if ($[82] !== getContent) {
-		t20 = getContent();
-		$[82] = getContent;
-		$[83] = t20;
-	} else t20 = $[83];
-	let t21;
-	if ($[84] !== t19 || $[85] !== t20) {
-		t21 = /* @__PURE__ */ jsx("div", {
-			className: t19,
-			children: t20
-		});
-		$[84] = t19;
-		$[85] = t20;
-		$[86] = t21;
-	} else t21 = $[86];
-	let t22;
-	if ($[87] !== calendarProps || $[88] !== t16 || $[89] !== t17 || $[90] !== t21) {
-		t22 = /* @__PURE__ */ jsxs("div", {
-			...calendarProps,
-			className: t16,
-			children: [t17, t21]
-		});
-		$[87] = calendarProps;
-		$[88] = t16;
-		$[89] = t17;
-		$[90] = t21;
-		$[91] = t22;
-	} else t22 = $[91];
-	return t22;
+		}), /* @__PURE__ */ jsx("div", {
+			className: clsx("flex min-h-0 w-full flex-1 flex-col items-center", toggleState !== "year" && "pb-8 md:pb-0"),
+			children: getContent()
+		})]
+	});
 };
 //#endregion
 export { Calendar };