@povio/ui 2.2.10 → 2.2.12

package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts

@@ -20,6 +20,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
     shouldUpdateDateOnMonthYearChange?: boolean;
     granularity?: DatePickerGranularity;
     autoFixYear?: boolean;
+    format?: string;
 }
 export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: string | null;

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

@@ -1,14 +1,14 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useImperativeHandle, useMemo, useRef } from "react";
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
@@ -18,15 +18,15 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
-	const normalizeByGranularity = (date) => {
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
+	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
 			day: 1
 		});
 		if (granularity === "month") return date.set({ day: 1 });
 		return date;
-	};
+	}, [granularity]);
 	const formFieldProps = {
 		error,
 		label,
@@ -115,11 +115,29 @@ var DatePickerBase = (props) => {
 		dialogState.setValue(updatedDate);
 		calendarState.setFocusedDate(updatedDate);
 	};
+	const onMonthYearCommit = () => {
+		onApply();
+	};
 	const onTodayPress = () => {
 		const todayValue = normalizeByGranularity(today(getLocalTimeZone()));
 		dialogState.setValue(todayValue);
 		calendarState.setFocusedDate(todayValue);
 	};
+	useEffect(() => {
+		if (!state.isOpen) return;
+		if (granularity !== "year") return;
+		if (dialogState.value) return;
+		const defaultYearValue = normalizeByGranularity(today(getLocalTimeZone()));
+		dialogState.setValue(defaultYearValue);
+		calendarState.setFocusedDate(defaultYearValue);
+	}, [
+		state.isOpen,
+		granularity,
+		dialogState.value,
+		dialogState,
+		calendarState,
+		normalizeByGranularity
+	]);
 	const onOpenChange = (isOpen) => {
 		state.toggle();
 		if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
@@ -156,7 +174,8 @@ var DatePickerBase = (props) => {
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,
-				autoFixYear
+				autoFixYear,
+				format
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -174,6 +193,8 @@ var DatePickerBase = (props) => {
 					calendarProps,
 					onApply,
 					onMonthYearChange,
+					onMonthYearCommit,
+					selectedDate: dialogState.value ?? null,
 					granularity
 				})
 			})]

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

@@ -1,12 +1,12 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import "../../../../config/i18n.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts

@@ -19,6 +19,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     shouldUpdateDateOnMonthYearChange?: boolean;
     timeZone?: string;
     autoFixYear?: boolean;
+    format?: string;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

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

@@ -1,11 +1,11 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
@@ -16,7 +16,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {
@@ -173,7 +173,8 @@ var DateTimePickerBase = (props) => {
 				className: inputClassName,
 				timeZone: effectiveTimeZone,
 				autoFixYear,
-				isTimeOptional
+				isTimeOptional,
+				format
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

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

@@ -1,10 +1,10 @@
 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 { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
-import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

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

@@ -16,8 +16,10 @@ type CalendarProps = DateTimeCalendarProps & {
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
     onApply: () => void;
     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, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,7 +8,7 @@ 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, granularity = "day", ...props }) => {
+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";
@@ -52,6 +52,30 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 		}
 		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 handleDateChange = () => {
 		if (includesTime && !datePickerState.value) setToggleState("time");
 		else onApply();
@@ -61,12 +85,16 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			if (granularity === "month") return /* @__PURE__ */ jsx(MonthPicker, {
 				state: props.state,
 				onSelectionChange: onMonthSelectionChange,
-				onDateChange: onMonthYearChange
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
 			});
 			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
 				state: props.state,
 				onSelectionChange: onYearSelectionChange,
-				onDateChange: onMonthYearChange
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
 			});
 			return /* @__PURE__ */ jsx(CalendarGrid, {
 				state: props.state,
@@ -77,18 +105,24 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
 				state: props.state,
 				onSelectionChange: onYearSelectionChange,
-				onDateChange: onMonthYearChange
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
 			});
 			return /* @__PURE__ */ jsx(MonthPicker, {
 				state: props.state,
 				onSelectionChange: onMonthSelectionChange,
-				onDateChange: onMonthYearChange
+				onDateChange: onMonthYearChange,
+				onCommit: onMonthYearCommit,
+				selectedDate
 			});
 		}
 		if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
 			state: props.state,
 			onSelectionChange: onYearSelectionChange,
-			onDateChange: onMonthYearChange
+			onDateChange: onMonthYearChange,
+			onCommit: onMonthYearCommit,
+			selectedDate
 		});
 		if (toggleState === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
 			className: "flex h-72 w-80 items-center justify-center",
@@ -102,8 +136,8 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 		children: [/* @__PURE__ */ jsx(CalendarHeader, {
 			calendarState: props.state,
 			datePickerState,
-			prevButtonProps,
-			nextButtonProps,
+			prevButtonProps: headerPrevButtonProps,
+			nextButtonProps: headerNextButtonProps,
 			includesTime,
 			hourCycle,
 			granularity,

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

@@ -11,6 +11,8 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     disableManualEntry?: boolean;
     dateGranularity?: "day" | "month" | "year";
     isTimeOptional?: boolean;
+    format?: string;
+    timeZone?: string;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, ...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,12 +1,14 @@
 import { DateSegmentItem } from "./DateSegmentItem.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, dateGranularity = "day", isTimeOptional = false, ...props }) => {
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, ...props }) => {
 	const { locale } = useLocale();
 	const state = useDateFieldState({
 		...props,
@@ -21,31 +23,20 @@ var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManua
 		isDisabled,
 		isReadOnly: disableManualEntry
 	}, state, dataFieldRef);
-	const isSegmentVisible = (segmentType) => {
+	const isSegmentVisible = useCallback((segmentType) => {
 		if (dateGranularity === "day") return true;
 		if (dateGranularity === "month") return segmentType !== "day";
 		if (dateGranularity === "year") return segmentType === "year";
 		return true;
-	};
-	const segmentsToRender = state.segments.filter((segment, index, segments) => {
-		if (segment.type !== "literal") return isSegmentVisible(segment.type);
-		let hasVisiblePrevious = false;
-		for (let i = index - 1; i >= 0; i--) {
-			const previousSegment = segments[i];
-			if (previousSegment.type === "literal") continue;
-			hasVisiblePrevious = isSegmentVisible(previousSegment.type);
-			break;
-		}
-		if (!hasVisiblePrevious) return false;
-		let hasVisibleNext = false;
-		for (let i = index + 1; i < segments.length; i++) {
-			const nextSegment = segments[i];
-			if (nextSegment.type === "literal") continue;
-			hasVisibleNext = isSegmentVisible(nextSegment.type);
-			break;
-		}
-		return hasVisibleNext;
-	});
+	}, [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");
@@ -105,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,
@@ -112,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: segmentsToRender.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,7 @@ interface DatePickerInputProps extends InputVariantProps {
     timeZone?: string;
     autoFixYear?: boolean;
     isTimeOptional?: boolean;
+    format?: string;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity, timeZone, autoFixYear, isTimeOptional, ...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, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity, timeZone, autoFixYear, isTimeOptional, format, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -16,7 +16,7 @@ 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, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, autoFixYear, isTimeOptional = false, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, autoFixYear, isTimeOptional = false, format, ...props }) => {
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
@@ -123,7 +123,9 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						hidePlaceholder,
 						disableManualEntry,
 						dateGranularity,
-						isTimeOptional
+						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: "–"
@@ -135,7 +137,9 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						onClearChange,
 						hidePlaceholder,
 						disableManualEntry,
-						isTimeOptional
+						isTimeOptional,
+						format,
+						timeZone: effectiveTimeZone
 					})] })] })
 				]
 			})]

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

@@ -5,5 +5,7 @@ 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, onDateChange }: 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, onDateChange }) => {
+var MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: state.timeZone
@@ -23,35 +24,65 @@ var MonthPicker = ({ state, onSelectionChange, onDateChange }) => {
 		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 selectedDate = state.focusedDate.set({ month: [...key][0] });
-				state.setFocusedDate(selectedDate);
-				onDateChange?.(selectedDate);
+			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

@@ -5,6 +5,8 @@ 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, onDateChange }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const YearPicker: ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,12 +2,12 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/YearPicker.tsx
-var YearPicker = ({ state, onSelectionChange, onDateChange }) => {
+var YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
 	const formatter = useDateFormatter({
 		year: "numeric",
 		timeZone: state.timeZone
@@ -28,21 +28,42 @@ var YearPicker = ({ state, onSelectionChange, onDateChange }) => {
 		if (state.maxValue && year > state.maxValue.year) return true;
 		return false;
 	};
-	const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
+	const getSelectedYearIndex = () => {
+		if (selectedDate) {
+			const selectedIndexFromValue = years.findIndex((year) => year.value === selectedDate.year);
+			if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
+		}
+		const focusedYearIndex = years.findIndex((year) => year.value === state.focusedDate.year);
+		if (focusedYearIndex < 0) return null;
+		return focusedYearIndex;
+	};
+	const selectedYearIndex = getSelectedYearIndex();
+	const lastPressedYearIndexRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
+	const parseYearIndexFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedIndex = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedIndex)) return parsedIndex;
+		}
+		return null;
+	};
 	const { ref } = useScrollableListBox();
 	return /* @__PURE__ */ jsx(ListBox, {
 		ref,
 		autoFocus: true,
 		"aria-label": "Year",
 		selectionMode: "single",
-		selectedKeys: [selectedYear],
+		...listBoxSelectionProps,
 		onSelectionChange: (key) => {
 			if (key === "all") return;
-			const index = [...key][0];
-			if (typeof index === "number") {
-				const selectedDate = state.focusedDate.set({ year: years[index].value });
-				state.setFocusedDate(selectedDate);
-				onDateChange?.(selectedDate);
+			const selectedKey = [...key][0];
+			const selectedYearIndexValue = parseYearIndexFromKey(selectedKey);
+			if (selectedYearIndexValue !== null && years[selectedYearIndexValue]) {
+				const nextSelectedDate = state.focusedDate.set({ year: years[selectedYearIndexValue].value });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
 			}
 			onSelectionChange(key);
 		},
@@ -53,6 +74,18 @@ var YearPicker = ({ state, onSelectionChange, onDateChange }) => {
 				id: index,
 				textValue: year.formatted,
 				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
+					lastPressedYearIndexRef.current = index;
+					const nextSelectedDate = state.focusedDate.set({ year: year.value });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (!selectedDate) return;
+					if (selectedYearIndex === null) return;
+					if (index !== selectedYearIndex) return;
+					onCommit?.();
+				},
 				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -188,7 +188,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
 						children: footer
 					})
 				] })

package/dist/components/segment/Segment.js

@@ -11,7 +11,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -49,6 +49,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...
 			style: { gridTemplateColumns },
 			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 				...item,
+				className: clsx(item.className, segmentItemClassName),
 				isDisabled: item.isDisabled || props.isDisabled,
 				isSelected: state.selectedKeys.has(item.id),
 				onPress: () => {

package/dist/components/segment/SegmentItem.d.ts

@@ -1,2 +1,2 @@
 import { SegmentItem as SegmentItemProps } from './segment.types';
-export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentItem: ({ label, icon, id, isDisabled, className, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/SegmentItem.js

@@ -4,14 +4,17 @@ import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({ iconOnly }),
+		className: segmentItemCva$1({
+			iconOnly,
+			className
+		}),
 		isDisabled,
 		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",

package/dist/components/segment/segment.types.d.ts

@@ -30,6 +30,7 @@ export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps &
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;
+    segmentItemClassName?: string;
     error?: string;
 } & GroupedSegmentProps<TKey>;
 export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

package/dist/hooks/useIntersectionObserver.d.ts

@@ -3,6 +3,6 @@ type UseIntersectionObserverProps = {
     onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
 } & IntersectionObserverInit;
 export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
-    ref: import('react').RefObject<T | null>;
+    ref: (node: T | null) => void;
 };
 export {};

package/dist/hooks/useIntersectionObserver.js

@@ -1,8 +1,12 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useState } from "react";
 //#region src/hooks/useIntersectionObserver.ts
 var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
-	const ref = useRef(null);
+	const [element, setElement] = useState(null);
+	const ref = useCallback((node) => {
+		setElement(node);
+	}, []);
 	useEffect(() => {
+		if (!element) return;
 		const observer = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
 			onIntersectionChange?.(entries[0]);
@@ -11,13 +15,15 @@ var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, roo
 			rootMargin,
 			threshold
 		});
-		if (ref.current) observer.observe(ref.current);
+		observer.observe(element);
 		return () => observer.disconnect();
 	}, [
-		ref,
+		element,
 		root,
 		onIntersection,
-		onIntersectionChange
+		onIntersectionChange,
+		rootMargin,
+		threshold
 	]);
 	return { ref };
 };

package/dist/index.js

@@ -67,8 +67,8 @@ import { ToggleButton } from "./components/buttons/ToggleButton/ToggleButton.js"
 import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
 import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
-import { FormField } from "./components/inputs/FormField/FormField.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
+import { FormField } from "./components/inputs/FormField/FormField.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { Tag } from "./components/text/Tag/Tag.js";
 import { useDebounceCallback } from "./hooks/useDebounceCallback.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.10",
+  "version": "2.2.12",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -47,9 +47,9 @@
     "react-responsive": "^10.0.1",
     "react-stately": "^3.44.0",
     "react-toastify": "^11.0.5",
-    "tailwindcss": "^4.2.1",
+    "tailwindcss": "^4.2.4",
     "tailwindcss-react-aria-components": "^2.0.1",
-    "zod": "^4.3.5"
+    "zod": "^4.4.3"
   },
   "peerDependencies": {
     "@casl/ability": "^6.7.3",