@povio/ui 2.2.9-rc.41 → 2.2.9-rc.44

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -1,8 +1,8 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { TimePickerForm } from "../shared/TimePickerForm.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { getStaticTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
@@ -141,6 +141,8 @@ var TimePickerBase = (props) => {
 };
 var TimePicker = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
+	let effectiveTimeZone = getLocalTimeZone();
+	if (props.timeZone) effectiveTimeZone = props.timeZone;
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
 	const inputRef = useRef(null);
@@ -159,13 +161,16 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 	const rawValue = watchedValue ?? props.value ?? null;
 	const formatTimeValue = (timeValue) => {
 		if (timeValue === null) return null;
-		const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
-		const dateTimeValue = (parsedDate ? DateTimeUtils.fromLocalToZonedDateTime(parsedDate) : now(getLocalTimeZone())).set(timeValue);
-		return DateTimeUtils.fromDateValueToISO(dateTimeValue);
+		let parsedDate;
+		if (props.date) parsedDate = DateTime.fromISO(props.date, { zone: effectiveTimeZone }).toJSDate();
+		let dateValue = now(effectiveTimeZone);
+		if (parsedDate) dateValue = DateTimeUtils.fromLocalToZonedDateTime(parsedDate, effectiveTimeZone);
+		const dateTimeValue = dateValue.set(timeValue);
+		return DateTimeUtils.fromDateValueToISO(dateTimeValue, effectiveTimeZone);
 	};
 	const parseTimeValue = (isoString) => {
 		if (isoString == null) return isoString;
-		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
+		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString, effectiveTimeZone));
 	};
 	if (!renderInput) {
 		const timeValue = rawValue ? parseTimeValue(rawValue) : null;
@@ -185,6 +190,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			contentClassName: "pr-0!",
 			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: timeValue === null,
@@ -198,6 +204,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			},
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
+			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
 			children: staticSegments
 		});

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

@@ -1,3 +1,4 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
 import { DateValue } from 'react-aria';
 import { DatePickerState } from 'react-stately';
@@ -17,7 +18,11 @@ type CalendarProps = DateTimeCalendarProps & {
     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, onDateSelectionChange, setDateValueOnDateSelection, ...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

@@ -5,12 +5,77 @@ import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, 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 = ({ className, includesTime, datePickerState, hourCycle, onApply, onDateSelectionChange, setDateValueOnDateSelection = false, ...props }) => {
-	const [toggleState, setToggleState] = useState(null);
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, 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);
+	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") {
+			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);
+		}
+	};
+	const headerNextButtonProps = {
+		...nextButtonProps,
+		onPress: (event) => {
+			nextButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(1);
+		}
+	};
 	const onDateSelection = useCallback((date) => {
 		if (!includesTime || !setDateValueOnDateSelection) return;
 		datePickerState.setDateValue(date);
@@ -32,18 +97,49 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
 	};
 	const getContent = () => {
-		if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {
-			state: props.state,
-			onApply: handleDateChange,
-			onDateSelection
-		});
-		if (toggleState === "month") return /* @__PURE__ */ jsx(MonthPicker, {
-			state: props.state,
-			onSelectionChange: () => setToggleState(null)
-		});
+		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,
+				onDateSelection
+			});
+		}
+		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: () => setToggleState(null)
+			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",
@@ -57,10 +153,11 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 		children: [/* @__PURE__ */ jsx(CalendarHeader, {
 			calendarState: props.state,
 			datePickerState,
-			prevButtonProps,
-			nextButtonProps,
+			prevButtonProps: headerPrevButtonProps,
+			nextButtonProps: headerNextButtonProps,
 			includesTime,
 			hourCycle,
+			granularity,
 			toggleState,
 			setToggleState
 		}), /* @__PURE__ */ jsx("div", {

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

@@ -9,8 +9,9 @@ interface CalendarProps {
     nextButtonProps: AriaButtonProps;
     includesTime?: boolean;
     hourCycle?: 12 | 24;
+    granularity?: "day" | "month" | "year";
     toggleState: ToggleState | null;
     setToggleState: (state: ToggleState | null) => void;
 }
-export declare const CalendarHeader: ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, toggleState, setToggleState, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalendarHeader: ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity, toggleState, setToggleState, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -13,7 +13,7 @@ var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
-var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, toggleState, setToggleState }) => {
+var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity = "day", toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: calendarState.timeZone
@@ -43,14 +43,24 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 			/* @__PURE__ */ jsxs(ToggleButtonGroup, {
 				className: "flex gap-2",
 				children: [
-					/* @__PURE__ */ jsx(PillButton, {
+					granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
 						color: "secondary",
 						variant: "subtle",
 						iconPosition: "right",
 						icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "month",
-						onChange: (isSelected) => setToggleState(isSelected ? "month" : null),
+						onChange: (isSelected) => {
+							if (!isSelected) {
+								if (granularity === "day") {
+									setToggleState(null);
+									return;
+								}
+								setToggleState("month");
+								return;
+							}
+							setToggleState("month");
+						},
 						children: month
 					}),
 					/* @__PURE__ */ jsx(PillButton, {
@@ -60,7 +70,21 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 						icon: toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "year",
-						onChange: (isSelected) => setToggleState(isSelected ? "year" : null),
+						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, {

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

@@ -9,6 +9,10 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     onClearChange?: (canClear: boolean) => void;
     hidePlaceholder?: boolean;
     disableManualEntry?: boolean;
+    dateGranularity?: "day" | "month" | "year";
+    isTimeOptional?: boolean;
+    format?: string;
+    timeZone?: string;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,14 @@
 import { DateSegmentItem } from "./DateSegmentItem.js";
-import { getTimeSegmentValue } from "./dateSegment.utils.js";
-import { jsx } from "react/jsx-runtime";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, useImperativeHandle, useRef } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDateField, useLocale } from "react-aria";
 import { createCalendar } from "@internationalized/date";
+import { DateTime } from "luxon";
 import { useDateFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/shared/DateField.tsx
-var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, ...props }) => {
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, ...props }) => {
 	const { locale } = useLocale();
 	const state = useDateFieldState({
 		...props,
@@ -22,6 +23,20 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		isDisabled,
 		isReadOnly: disableManualEntry
 	}, state, dataFieldRef);
+	const isSegmentVisible = useCallback((segmentType) => {
+		if (dateGranularity === "day") return true;
+		if (dateGranularity === "month") return segmentType !== "day";
+		if (dateGranularity === "year") return segmentType === "year";
+		return true;
+	}, [dateGranularity]);
+	const getSegmentsToRender = useCallback(() => {
+		const segments = [];
+		for (const segment of state.segments) if (segment.type !== "literal") {
+			if (isSegmentVisible(segment.type)) segments.push(segment);
+		} else if (segments.length > 0 && segments.at(-1)?.type !== "literal") segments.push(segment);
+		return segments;
+	}, [state.segments, isSegmentVisible]);
+	const segmentsToRender = useMemo(() => getSegmentsToRender(), [getSegmentsToRender]);
 	const autoFixYear = () => {
 		const monthSegment = state.segments.find((segment) => segment.type === "month");
 		const daySegment = state.segments.find((segment) => segment.type === "day");
@@ -30,10 +45,27 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		const minuteSegment = state.segments.find((segment) => segment.type === "minute");
 		const isMonthFilled = monthSegment && !monthSegment.isPlaceholder;
 		const isDayFilled = daySegment && !daySegment.isPlaceholder;
+		const isYearFilled = yearSegment && !yearSegment.isPlaceholder && yearSegment.text?.length > 0;
 		const isYearEmpty = yearSegment && !(parseInt(yearSegment.text) && yearSegment.text?.length === 4);
-		const isHourEmpty = hourSegment && !parseInt(hourSegment.text);
-		if (minuteSegment && !parseInt(minuteSegment.text)) state.setSegment("minute", getTimeSegmentValue(minuteSegment));
-		if (isHourEmpty) state.setSegment("hour", getTimeSegmentValue(hourSegment));
+		const isDateFilled = isMonthFilled && isDayFilled && isYearFilled;
+		const isHourEmpty = hourSegment && (hourSegment.isPlaceholder || Number.isNaN(parseInt(hourSegment.text ?? "", 10)));
+		const isMinuteEmpty = minuteSegment && (minuteSegment.isPlaceholder || Number.isNaN(parseInt(minuteSegment.text ?? "", 10)));
+		if (!isTimeOptional && isDateFilled && minuteSegment && isMinuteEmpty) {
+			let minute = minuteSegment?.value || 0;
+			if (minuteSegment?.text?.length && minuteSegment?.text?.length > 0) {
+				minute = parseInt(minuteSegment?.text ?? "00");
+				if (isNaN(minute)) minute = 0;
+			}
+			state.setSegment("minute", minute);
+		}
+		if (!isTimeOptional && isDateFilled && hourSegment && isHourEmpty) {
+			let hour = hourSegment?.value || 0;
+			if (hourSegment?.text?.length && hourSegment?.text?.length > 0) {
+				hour = parseInt(hourSegment?.text ?? "00");
+				if (isNaN(hour)) hour = 0;
+			}
+			state.setSegment("hour", hour);
+		}
 		if (isMonthFilled && isDayFilled && isYearEmpty) {
 			let year = (/* @__PURE__ */ new Date()).getFullYear();
 			if (yearSegment?.text?.length && yearSegment?.text?.length === 2) year = parseInt(`20${yearSegment?.text}`);
@@ -64,6 +96,26 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 	useEffect(() => {
 		onClearChange?.(state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false));
 	}, [state.segments, onClearChange]);
+	const getFormattedDisplayValue = () => {
+		if (!disableManualEntry) return null;
+		if (!format) return null;
+		if (!state.value) return null;
+		const jsDate = DateTimeUtils.fromDateValueToLocal(state.value, timeZone);
+		const formattedDate = DateTime.fromJSDate(jsDate);
+		if (!formattedDate.isValid) return null;
+		return formattedDate.toFormat(format);
+	};
+	const formattedDisplayValue = getFormattedDisplayValue();
+	let fieldContent = /* @__PURE__ */ jsx(Fragment, { children: segmentsToRender.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
+		segment,
+		state,
+		isDisabled,
+		hidePlaceholder
+	}, i)) });
+	if (formattedDisplayValue) fieldContent = /* @__PURE__ */ jsx("span", {
+		className: clsx("select-none", isDisabled && "text-interactive-text-secondary-disabled"),
+		children: formattedDisplayValue
+	});
 	return /* @__PURE__ */ jsx("div", {
 		...fieldProps,
 		ref: dataFieldRef,
@@ -71,12 +123,7 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		className: clsx("relative w-full", disableManualEntry && "pointer-events-none"),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex",
-			children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
-				segment,
-				state,
-				isDisabled,
-				hidePlaceholder
-			}, i))
+			children: fieldContent
 		})
 	});
 };

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

@@ -29,6 +29,10 @@ interface DatePickerInputProps extends InputVariantProps {
     placeholder?: string;
     className?: string;
     onOpenDropdown?: () => void;
+    dateGranularity?: "day" | "month" | "year";
+    timeZone?: string;
+    isTimeOptional?: boolean;
+    format?: string;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone, isTimeOptional, format, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,8 +15,10 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, isTimeOptional = false, format, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone) effectiveTimeZone = timeZone;
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
@@ -60,12 +62,12 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 	};
 	const onToday = () => {
 		if (isDateTime) {
-			const calendarDateTime = toCalendarDateTime(now(getLocalTimeZone()));
+			const calendarDateTime = toCalendarDateTime(now(effectiveTimeZone));
 			fieldProps.onChange?.(calendarDateTime);
 			if (endFieldProps) endFieldProps.onChange?.(calendarDateTime);
 		} else {
-			fieldProps.onChange?.(today(getLocalTimeZone()));
-			if (endFieldProps) endFieldProps.onChange?.(today(getLocalTimeZone()));
+			fieldProps.onChange?.(today(effectiveTimeZone));
+			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
 		}
 		fieldProps.onBlur?.(null);
 		endFieldProps?.onBlur?.(null);
@@ -135,7 +137,11 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 							isInvalid,
 							onClearChange,
 							hidePlaceholder,
-							disableManualEntry
+							disableManualEntry,
+							dateGranularity,
+							isTimeOptional,
+							format,
+							timeZone: effectiveTimeZone
 						}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
 							className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
 							children: "–"
@@ -146,7 +152,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 							isInvalid,
 							onClearChange,
 							hidePlaceholder,
-							disableManualEntry
+							disableManualEntry,
+							isTimeOptional,
+							format,
+							timeZone: effectiveTimeZone
 						})] })] })
 					]
 				})

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

@@ -1,7 +1,11 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Key } from 'react-aria-components';
 export interface MonthPickerProps {
     state: CalendarState | RangeCalendarState;
     onSelectionChange: (key: Set<Key>) => void;
+    onDateChange?: (selectedDate: CalendarDate) => void;
+    onCommit?: () => void;
+    selectedDate?: CalendarDate | null;
 }
-export declare const MonthPicker: ({ state, onSelectionChange }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MonthPicker: ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/MonthPicker.tsx
-var MonthPicker = ({ state, onSelectionChange }) => {
+var MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: state.timeZone
@@ -23,34 +24,65 @@ var MonthPicker = ({ state, onSelectionChange }) => {
 		if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) return true;
 		return false;
 	};
+	const getSelectedMonth = () => {
+		if (!selectedDate) return null;
+		return selectedDate.month;
+	};
+	const selectedMonth = getSelectedMonth();
+	const lastPressedMonthRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedMonth !== null) listBoxSelectionProps.selectedKeys = [selectedMonth];
+	const parseMonthFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedMonth = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedMonth)) return parsedMonth;
+		}
+		return null;
+	};
 	return /* @__PURE__ */ jsx(ListBox, {
 		autoFocus: true,
 		"aria-label": "Month",
 		selectionMode: "single",
 		layout: "grid",
-		selectedKeys: [state.focusedDate.month],
+		...listBoxSelectionProps,
 		onSelectionChange: (key) => {
 			if (key === "all") return;
-			if (typeof [...key][0] === "number") {
-				const date = state.focusedDate.set({ month: [...key][0] });
-				state.setFocusedDate(date);
+			const selectedKey = [...key][0];
+			const selectedMonthValue = parseMonthFromKey(selectedKey);
+			if (selectedMonthValue !== null) {
+				const nextSelectedDate = state.focusedDate.set({ month: selectedMonthValue });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
 			}
 			onSelectionChange(key);
 		},
 		className: "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80",
 		children: getMonths().map((month, index) => {
-			const isDisabled = isMonthDisabled(index + 1);
+			const monthNumber = index + 1;
+			const isDisabled = isMonthDisabled(monthNumber);
 			return /* @__PURE__ */ jsx(ListBoxItem, {
-				id: index + 1,
+				id: monthNumber,
 				textValue: month,
 				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedMonthRef.current === monthNumber;
+					lastPressedMonthRef.current = monthNumber;
+					const nextSelectedDate = state.focusedDate.set({ month: monthNumber });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (selectedMonth === null) return;
+					if (monthNumber !== selectedMonth) return;
+					onCommit?.();
+				},
 				className: clsx("flex items-center justify-center text-interactive-text-secondary-idle", "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1", "hover:text-interactive-text-secondary-hover", "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",
 					size: "label-2",
 					children: month
 				})
-			}, month);
+			}, monthNumber);
 		})
 	});
 };

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

@@ -1,8 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Key } from 'react-aria-components';
 interface YearPickerProps {
     state: CalendarState | RangeCalendarState;
     onSelectionChange: (key: Set<Key>) => void;
+    onDateChange?: (selectedDate: CalendarDate) => void;
+    onCommit?: () => void;
+    selectedDate?: CalendarDate | null;
 }
-export declare const YearPicker: ({ state, onSelectionChange }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const YearPicker: ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};