@povio/ui 2.2.9-rc.9 → 2.2.11

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

@@ -1,12 +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 { useDebounceCallback } from "../../../../hooks/useDebounceCallback.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";
@@ -17,7 +16,9 @@ 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, onBlur, 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, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, 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 = {
 		error,
 		label,
@@ -38,10 +39,6 @@ var DateTimePickerBase = (props) => {
 	useImperativeHandle(ref, () => ({ clear: () => {
 		datePickerInputRef.current?.clear();
 	} }));
-	const handleBlur = (val) => {
-		onBlur?.({ target: { value: val } });
-	};
-	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -60,8 +57,7 @@ var DateTimePickerBase = (props) => {
 		onChange: (val) => {
 			onChange?.(val);
 			dialogState.setValue(val);
-			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
-			debouncedBlur(val);
+			calendarState.setFocusedDate(val || today(effectiveTimeZone));
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -97,24 +93,41 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value;
-		state.setValue(newValue);
+		state.setValue(dialogState.value);
 		state.toggle();
-		handleBlur(newValue);
+	};
+	const onMonthYearChange = (selectedDate) => {
+		if (!shouldUpdateDateOnMonthYearChange) return;
+		const baseDate = dialogState.value || state.value;
+		if (baseDate) {
+			const updatedDate = baseDate.set({
+				year: selectedDate.year,
+				month: selectedDate.month
+			});
+			dialogState.setValue(updatedDate);
+			calendarState.setFocusedDate(updatedDate);
+			return;
+		}
+		dialogState.setValue(toCalendarDateTime(selectedDate));
+		calendarState.setFocusedDate(selectedDate);
 	};
 	const onTodayPress = () => {
-		dialogState.setValue(toCalendarDateTime(now(getLocalTimeZone())));
-		calendarState.setFocusedDate(today(getLocalTimeZone()));
+		dialogState.setValue(toCalendarDateTime(now(effectiveTimeZone)));
+		calendarState.setFocusedDate(today(effectiveTimeZone));
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
-		calendarState.setFocusedDate(state.value || today(getLocalTimeZone()));
+		calendarState.setFocusedDate(state.value || today(effectiveTimeZone));
 		if (!isOpen) dialogState.setValue(state.value);
 	};
 	const onInputBlur = (e) => {
 		if (!isTimeOptional) return;
+		if (state.value) {
+			dialogState.setValue(state.value);
+			return;
+		}
 		const textValue = e.currentTarget.textContent;
-		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue);
+		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue, effectiveTimeZone, locale);
 		if (dateTimeValue) {
 			state.setValue(dateTimeValue);
 			dialogState.setValue(dateTimeValue);
@@ -153,13 +166,15 @@ var DateTimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
-				todayIconButtonSize,
 				isRequired,
 				disableManualEntry,
-				autoFixYear,
 				placeholder,
 				onOpenDropdown: () => state.toggle(),
-				className: inputClassName
+				className: inputClassName,
+				timeZone: effectiveTimeZone,
+				autoFixYear,
+				isTimeOptional,
+				format
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -177,21 +192,25 @@ var DateTimePickerBase = (props) => {
 					calendarProps,
 					includesTime: true,
 					datePickerState: dialogState,
-					onApply
+					onApply,
+					onMonthYearChange,
+					granularity: "day"
 				})
 			})]
 		})
 	});
 };
 var DateTimePicker = ({ fullIso = true, ...props }) => {
+	let effectiveTimeZone = getLocalTimeZone();
+	if (props.timeZone) effectiveTimeZone = props.timeZone;
 	const formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
-		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
-		return DateTimeUtils.fromDateValueToISO(dateValue);
+		if (fullIso) return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
+		return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
 	};
 	const parseDateValue = (isoString) => {
 		if (isoString == null) return isoString;
-		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
+		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, effectiveTimeZone);
 	};
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;

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

@@ -1,10 +1,10 @@
-import { Ref, FocusEvent } from 'react';
+import { Ref } from 'react';
 import { AriaTimeFieldProps, TimeValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label" | "onBlur"> {
+interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label"> {
     ref?: Ref<HTMLDivElement>;
     disableDropdown?: boolean;
     date?: string | null;
@@ -13,12 +13,12 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     disableManualEntry?: boolean;
     placeholder?: string;
     inputClassName?: string;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;
     onChange?: (value: string | null) => void;
     fullIso?: boolean;
+    timeZone?: string;
 }
 export type ControlledTimePickerProps<TFieldValues extends FieldValues> = ControlProps<TimePickerProps, TFieldValues>;
 export declare const TimePicker: <TFieldValues extends FieldValues>(props: ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +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 { useDebounceCallback } from "../../../../hooks/useDebounceCallback.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";
@@ -19,7 +18,7 @@ import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -41,18 +40,11 @@ var TimePickerBase = (props) => {
 		defaultValue: value || rest.defaultValue,
 		locale
 	});
-	const handleBlur = (val) => {
-		onBlur?.({ target: { value: val } });
-	};
-	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const state = useTimeFieldState({
 		...rest,
 		isDisabled,
 		value,
-		onChange: (val) => {
-			onChange?.(val);
-			debouncedBlur(val);
-		},
+		onChange,
 		locale
 	});
 	useEffect(() => {
@@ -80,10 +72,8 @@ var TimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value;
-		state.setValue(newValue);
+		state.setValue(dialogState.value);
 		setIsOpen(false);
-		handleBlur(newValue);
 	};
 	const onOpenChange = (open) => {
 		setIsOpen(open);
@@ -111,7 +101,6 @@ var TimePickerBase = (props) => {
 				onPress: onOpen,
 				isDisabled,
 				isDirty,
-				isRequired,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -137,28 +126,32 @@ var TimePickerBase = (props) => {
 	});
 };
 var TimePicker = (props) => {
+	let effectiveTimeZone = getLocalTimeZone();
+	if (props.timeZone) effectiveTimeZone = props.timeZone;
 	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 ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TimePickerBase, {
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(TimePickerBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: parseTimeValue(field.value),
 				onChange: (value) => field.onChange(formatTimeValue(value)),
 				onBlur: field.onBlur,
-				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})

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 { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
@@ -14,7 +15,11 @@ type CalendarProps = DateTimeCalendarProps & {
     state: CalendarState;
     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, ...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

@@ -5,28 +5,100 @@ import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useState } from "react";
+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, ...props }) => {
-	const [toggleState, setToggleState] = useState(null);
+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;
+	});
 	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 handleDateChange = () => {
 		if (includesTime && !datePickerState.value) setToggleState("time");
 		else onApply();
 	};
 	const getContent = () => {
-		if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {
-			state: props.state,
-			onApply: handleDateChange
-		});
-		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
+			});
+		}
+		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",
@@ -44,6 +116,7 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			nextButtonProps,
 			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,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, ...props }) => {
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, ...props }) => {
 	const { locale } = useLocale();
 	const state = useDateFieldState({
 		...props,
@@ -21,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");
@@ -29,16 +45,25 @@ 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)) {
+		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 (minuteSegment?.text?.length && minuteSegment?.text?.length > 0) {
+				minute = parseInt(minuteSegment?.text ?? "00");
+				if (isNaN(minute)) minute = 0;
+			}
 			state.setSegment("minute", minute);
 		}
-		if (isHourEmpty) {
+		if (!isTimeOptional && isDateFilled && hourSegment && isHourEmpty) {
 			let hour = hourSegment?.value || 0;
-			if (hourSegment?.text?.length && hourSegment?.text?.length > 0) hour = parseInt(hourSegment?.text ?? "00");
+			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) {
@@ -71,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,
@@ -78,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

@@ -1,6 +1,5 @@
 import { Ref } from 'react';
 import { DatePickerAria } from 'react-aria';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
 export interface DatePickerInputHandle {
@@ -19,15 +18,18 @@ interface DatePickerInputProps extends InputVariantProps {
     isDateTime?: boolean;
     isClearable?: boolean;
     headerProps?: FormFieldHeaderProps;
-    todayIcon?: DatePickerTodayIcon;
-    todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIcon?: boolean;
     isDirty?: boolean;
     isRequired?: boolean;
     disableManualEntry?: boolean;
-    autoFixYear?: boolean;
     placeholder?: string;
     className?: string;
     onOpenDropdown?: () => void;
+    dateGranularity?: "day" | "month" | "year";
+    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, todayIconButtonSize, 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, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity, timeZone, autoFixYear, isTimeOptional, format, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};