@povio/ui 2.3.3 → 3.0.0-rc.1

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,12 +15,14 @@ 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;
     granularity?: "day" | "month" | "year";
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, 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,313 @@ 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, 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(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);
 	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 ($[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");
-			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) => {
+		};
+		$[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;
+			}
+			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) => {
 			prevButtonProps.onPress?.(event);
 			handleHeaderMonthNavigation(-1);
-		}
-	};
-	const headerNextButtonProps = {
-		...nextButtonProps,
-		onPress: (event) => {
-			nextButtonProps.onPress?.(event);
+		};
+		$[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);
 			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, {
+		};
+		$[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, {
 				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;
+		};
+		$[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, {
 			calendarState: props.state,
 			datePickerState,
 			prevButtonProps: headerPrevButtonProps,
@@ -143,11 +319,54 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			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()
-		})]
-	});
+		});
+		$[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;
 };
 //#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 {};