@povio/ui 3.1.0 → 3.2.0

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

@@ -1,5 +1,6 @@
 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;
@@ -14,7 +15,9 @@ type CalendarProps = DateTimeCalendarProps & {
     className?: string;
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
-    onApply: () => void;
+    onApply: (selectedDate?: DateValue) => void;
+    onDateSelectionChange?: (selectedDate: DateValue) => void;
+    setDateValueOnDateSelection?: boolean;
     onMonthYearChange?: (selectedDate: CalendarDate) => void;
     onMonthYearCommit?: () => void;
     selectedDate?: CalendarDate | null;
@@ -22,5 +25,5 @@ type CalendarProps = DateTimeCalendarProps & {
     isTimeOptional?: boolean;
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, setDateValueOnDateSelection, onDateSelectionChange, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,137 +3,316 @@ 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 = ({ 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;
-	});
+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);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-	useEffect(() => {
-		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);
-	}, [
-		granularity,
-		toggleState,
-		includesTime
-	]);
-	const onMonthSelectionChange = () => {
-		if (granularity === "day") {
-			setToggleState(null);
-			return;
-		}
-		setToggleState("month");
-	};
-	const onYearSelectionChange = () => {
-		if (granularity === "day") {
-			setToggleState(null);
-			return;
-		}
-		if (granularity === "month") {
+	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");
-			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) => {
+		};
+		$[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;
+			}
+			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) => {
 			prevButtonProps.onPress?.(event);
 			handleHeaderMonthNavigation(-1);
-		}
-	};
-	const headerNextButtonProps = {
-		...nextButtonProps,
-		onPress: (event) => {
-			nextButtonProps.onPress?.(event);
+		};
+		$[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) => {
+			nextButtonProps.onPress?.(event_0);
 			handleHeaderMonthNavigation(1);
-		}
-	};
-	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, {
+		};
+		$[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) {
+				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, {
 				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 === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
+				className: "flex h-72 w-80 items-center justify-center",
+				children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState })
 			});
-		}
-		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, {
+			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, {
 			calendarState: props.state,
 			datePickerState,
 			prevButtonProps: headerPrevButtonProps,
@@ -144,11 +323,55 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOpt
 			granularity,
 			toggleState,
 			setToggleState
-		}), /* @__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()
-		})]
-	});
+		});
+		$[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;
 };
 //#endregion
 export { Calendar };

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

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