@povio/ui 2.2.12 → 2.3.0-rc.2

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

@@ -1,22 +1,30 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { datePickerInputContentRow } from "../shared/datePickerInput.cva.js";
+import { renderDatePickerTodayIcon } from "../shared/datePickerTodayIcon.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { getStaticCalendarDateTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import { clsx } from "clsx";
+import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 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, format, ...rest } = props;
+	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, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {
@@ -39,6 +47,10 @@ 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,
@@ -57,7 +69,8 @@ var DateTimePickerBase = (props) => {
 		onChange: (val) => {
 			onChange?.(val);
 			dialogState.setValue(val);
-			calendarState.setFocusedDate(val || today(effectiveTimeZone));
+			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+			debouncedBlur(val);
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -93,8 +106,10 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		state.toggle();
+		handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!shouldUpdateDateOnMonthYearChange) return;
@@ -166,13 +181,15 @@ var DateTimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
+				todayIconPlacement,
 				isRequired,
 				disableManualEntry,
+				autoFixYear,
 				placeholder,
 				onOpenDropdown: () => state.toggle(),
 				className: inputClassName,
 				timeZone: effectiveTimeZone,
-				autoFixYear,
 				isTimeOptional,
 				format
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
@@ -194,13 +211,35 @@ var DateTimePickerBase = (props) => {
 					datePickerState: dialogState,
 					onApply,
 					onMonthYearChange,
-					granularity: "day"
+					granularity: "day",
+					setDateValueOnDateSelection
 				})
 			})]
 		})
 	});
 };
-var DateTimePicker = ({ fullIso = true, ...props }) => {
+var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
+	const { locale } = useLocale();
+	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => {
+			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+		}
+	});
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	const rawValue = watchedValue ?? props.value ?? null;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (props.timeZone) effectiveTimeZone = props.timeZone;
 	const formatDateValue = (dateValue) => {
@@ -212,6 +251,51 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 		if (isoString == null) return isoString;
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, effectiveTimeZone);
 	};
+	if (!renderInput) {
+		const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
+		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticSegments = getStaticCalendarDateTimeSegments({
+			value: dateTimeValue,
+			locale,
+			shouldForceLeadingZeros,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !dateTimeValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...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!",
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
+			dataAttributes: {
+				dataIsEmpty: dateTimeValue === null,
+				dataIsFilled: dateTimeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: dateTimeValue !== null
+			},
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			trailingClassName: "py-0! pl-0!",
+			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
+			children: staticSegments
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -219,7 +303,7 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseDateValue(field.value),
 				onChange: (value) => field.onChange(formatDateValue(value)),
 				onBlur: field.onBlur,
@@ -231,6 +315,7 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 	}
 	return /* @__PURE__ */ jsx(DateTimePickerBase, {
 		...props,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateValue(props.value),
 		onChange: (value) => props.onChange?.(formatDateValue(value))
 	});

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

@@ -1,10 +1,10 @@
-import { Ref } from 'react';
+import { Ref, FocusEvent } 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"> {
+interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTimeFieldProps<TimeValue>, "label" | "onBlur"> {
     ref?: Ref<HTMLDivElement>;
     disableDropdown?: boolean;
     date?: string | null;
@@ -13,13 +13,15 @@ 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;
+    renderStaticInput?: boolean;
 }
 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;
+export declare const TimePicker: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,22 +3,26 @@ 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 { getStaticTimeSegments } from "../shared/staticDateTimeSegments.js";
 import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useLocale, useTimeField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 import { getLocalTimeZone, now, toTime } from "@internationalized/date";
 import { DateTime } from "luxon";
 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, 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, 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 formFieldProps = {
 		error,
 		label,
@@ -40,11 +44,18 @@ 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,
+		onChange: (val) => {
+			onChange?.(val);
+			debouncedBlur(val);
+		},
 		locale
 	});
 	useEffect(() => {
@@ -72,8 +83,10 @@ var TimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		setIsOpen(false);
+		handleBlur(newValue);
 	};
 	const onOpenChange = (open) => {
 		setIsOpen(open);
@@ -101,6 +114,7 @@ var TimePickerBase = (props) => {
 				onPress: onOpen,
 				isDisabled,
 				isDirty,
+				isRequired,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -125,9 +139,26 @@ var TimePickerBase = (props) => {
 		})
 	});
 };
-var TimePicker = (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);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => input.querySelector("input, button, [tabindex]:not([tabindex='-1'])")
+	});
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	const rawValue = watchedValue ?? props.value ?? null;
 	const formatTimeValue = (timeValue) => {
 		if (timeValue === null) return null;
 		let parsedDate;
@@ -141,17 +172,54 @@ var TimePicker = (props) => {
 		if (isoString == null) return isoString;
 		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString, effectiveTimeZone));
 	};
+	if (!renderInput) {
+		const timeValue = rawValue ? parseTimeValue(rawValue) : null;
+		const as = props.as ?? ui.input.as;
+		const isDisabled = isFormControlDisabled || !!props.isDisabled;
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticSegments = getStaticTimeSegments({
+			value: timeValue,
+			locale,
+			isDisabled,
+			hidePlaceholder: as === "floating" && !timeValue
+		});
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...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,
+				dataIsFilled: timeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: timeValue !== null
+			},
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			trailingClassName: "py-0! pl-0!",
+			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
+			children: staticSegments
+		});
+	}
 	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 } }) => /* @__PURE__ */ jsx(TimePickerBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: parseTimeValue(field.value),
 				onChange: (value) => field.onChange(formatTimeValue(value)),
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})
@@ -159,6 +227,7 @@ var TimePicker = (props) => {
 	}
 	return /* @__PURE__ */ jsx(TimePickerBase, {
 		...props,
+		ref: mergeRefs(props.ref, inputRef),
 		value: parseTimeValue(props.value),
 		onChange: (value) => props.onChange?.(formatTimeValue(value))
 	});

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

@@ -1,5 +1,6 @@
 import { CalendarDate } from '@internationalized/date';
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
+import { DateValue } from 'react-aria';
 import { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
     includesTime?: false;
@@ -14,12 +15,14 @@ type CalendarProps = DateTimeCalendarProps & {
     className?: string;
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
-    onApply: () => void;
+    onApply: (selectedDate?: DateValue) => void;
+    onDateSelectionChange?: (selectedDate: DateValue) => void;
+    setDateValueOnDateSelection?: boolean;
     onMonthYearChange?: (selectedDate: CalendarDate) => void;
     onMonthYearCommit?: () => void;
     selectedDate?: CalendarDate | null;
     granularity?: "day" | "month" | "year";
 };
 export type ToggleState = "month" | "year" | "time";
-export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Calendar: ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity, setDateValueOnDateSelection, onDateSelectionChange, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,10 +5,10 @@ import { TimePickerForm } from "./TimePickerForm.js";
 import { YearPicker } from "./YearPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, 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, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", ...props }) => {
+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";
@@ -76,9 +76,25 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			handleHeaderMonthNavigation(1);
 		}
 	};
-	const handleDateChange = () => {
-		if (includesTime && !datePickerState.value) setToggleState("time");
-		else onApply();
+	const onDateSelection = useCallback((date) => {
+		if (!includesTime || !setDateValueOnDateSelection) return;
+		datePickerState.setDateValue(date);
+	}, [
+		includesTime,
+		datePickerState,
+		setDateValueOnDateSelection
+	]);
+	const handleDateChange = (selectedDate) => {
+		const resolvedDate = selectedDate ?? props.state.focusedDate;
+		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
+			datePickerState.setDateValue(resolvedDate);
+			onDateSelectionChange?.(resolvedDate);
+		}
+		if (includesTime && toggleState !== "time") {
+			setToggleState("time");
+			return;
+		}
+		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
 	};
 	const getContent = () => {
 		if (!toggleState) {
@@ -98,7 +114,8 @@ var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,
 			});
 			return /* @__PURE__ */ jsx(CalendarGrid, {
 				state: props.state,
-				onApply: handleDateChange
+				onApply: handleDateChange,
+				onDateSelection
 			});
 		}
 		if (toggleState === "month") {

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

@@ -4,7 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarCellProps extends AriaCalendarCellProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: () => void;
+    onApply?: (selectedDate?: DateValue) => void;
     shouldCloseOnSelect?: boolean;
     onDateSelection?: (date: DateValue) => void;
     onDateHover?: (date: DateValue | null) => void;

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

@@ -17,12 +17,12 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 	const onClick = useCallback((event) => {
 		buttonProps.onClick?.(event);
 		if (onDateSelection) onDateSelection(props.date);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (shouldCloseOnSelect && !isDisabled) onApply?.(props.date);
 	}, [
 		buttonProps,
 		onDateSelection,
 		props.date,
-		isSelected,
+		isDisabled,
 		shouldCloseOnSelect,
 		onApply
 	]);
@@ -87,7 +87,7 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
 			state.setFocusedDate(props.date);
 		}
 		eventHandler?.(event);
-		if (isSelected && shouldCloseOnSelect) onApply?.();
+		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
 	};
 	const onMouseEnter = useCallback(() => {
 		if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);

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

@@ -4,7 +4,7 @@ import { KeyboardEvent } from 'react';
 import { DateValue } from 'react-aria';
 interface CalendarGridProps extends AriaCalendarGridProps {
     state: CalendarState | RangeCalendarState;
-    onApply?: () => void;
+    onApply?: (selectedDate?: DateValue) => void;
     offset?: {
         months?: number;
     };

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

@@ -1,5 +1,6 @@
 import { Ref } from 'react';
 import { DatePickerAria } from 'react-aria';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from './datePicker.types';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
 export interface DatePickerInputHandle {
@@ -18,18 +19,20 @@ interface DatePickerInputProps extends InputVariantProps {
     isDateTime?: boolean;
     isClearable?: boolean;
     headerProps?: FormFieldHeaderProps;
-    todayIcon?: boolean;
+    todayIcon?: DatePickerTodayIcon;
+    todayIconButtonSize?: DatePickerTodayIconButtonSize;
+    todayIconPlacement?: DatePickerTodayIconPlacement;
     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, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity, timeZone, autoFixYear, isTimeOptional, format, ...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 {};