@povio/ui 3.0.0-rc.3 → 3.1.0

package/dist/components/inputs/DateTime/shared/Calendar.d.ts

@@ -1,6 +1,5 @@
 import { CalendarDate } from '@internationalized/date';
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
-import { DateValue } from 'react-aria';
 import { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
     includesTime?: false;
@@ -15,14 +14,13 @@ type CalendarProps = DateTimeCalendarProps & {
     className?: string;
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
-    onApply: (selectedDate?: DateValue) => void;
-    onDateSelectionChange?: (selectedDate: DateValue) => void;
-    setDateValueOnDateSelection?: boolean;
+    onApply: () => void;
     onMonthYearChange?: (selectedDate: CalendarDate) => void;
     onMonthYearCommit?: () => void;
     selectedDate?: CalendarDate | null;
     granularity?: "day" | "month" | "year";
+    isTimeOptional?: boolean;
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, setDateValueOnDateSelection, onDateSelectionChange, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

package/dist/components/inputs/DateTime/shared/CalendarCell.d.ts

@@ -4,9 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarCellProps extends AriaCalendarCellProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: (selectedDate?: DateValue) => void;
-    onDoubleClickApply?: (selectedDate?: DateValue) => void;
-    shouldApplyOnDateSelection?: boolean;
+    onApply?: () => void;
     shouldCloseOnSelect?: boolean;
     onDateSelection?: (date: DateValue) => void;
     onDateHover?: (date: DateValue | null) => void;
@@ -18,5 +16,5 @@ interface CalendarCellProps extends AriaCalendarCellProps {
     hoverDate?: DateValue | null;
     onKeyboardNavigation?: (event: KeyboardEvent, date: DateValue) => boolean;
 }
-export declare const CalendarCell: ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }: CalendarCellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarCell: ({ state, onApply, shouldCloseOnSelect, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }: CalendarCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};