@povio/ui 2.2.9-rc.2 → 2.2.9-rc.20

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

@@ -1,22 +1,27 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.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 { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.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 { 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, ...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, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
 	const formFieldProps = {
 		error,
 		label,
@@ -37,6 +42,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,
@@ -56,6 +65,7 @@ var DateTimePickerBase = (props) => {
 			onChange?.(val);
 			dialogState.setValue(val);
 			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+			debouncedBlur(val);
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -91,8 +101,10 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		state.setValue(dialogState.value);
+		const newValue = dialogState.value;
+		state.setValue(newValue);
 		state.toggle();
+		handleBlur(newValue);
 	};
 	const onTodayPress = () => {
 		dialogState.setValue(toCalendarDateTime(now(getLocalTimeZone())));
@@ -145,8 +157,10 @@ var DateTimePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
+				todayIconButtonSize,
 				isRequired,
 				disableManualEntry,
+				autoFixYear,
 				placeholder,
 				onOpenDropdown: () => state.toggle(),
 				className: inputClassName
@@ -167,13 +181,27 @@ var DateTimePickerBase = (props) => {
 					calendarProps,
 					includesTime: true,
 					datePickerState: dialogState,
-					onApply
+					onApply,
+					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 [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const inputRef = useRef(null);
+	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 formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
@@ -183,6 +211,61 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 		if (isoString == null) return isoString;
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
 	};
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const variant = props.variant ?? ui.input.variant;
+		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
+		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
+		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticDateTimeValue = rawValue ? parseDateValue(rawValue) : null;
+		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale) : "";
+		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			className: props.className ? `relative inline-flex w-full flex-col text-left ${props.className}` : "relative inline-flex w-full flex-col text-left",
+			as,
+			size,
+			variant,
+			applyMinInputWidth: true,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !displayValue,
+			dataAttributes: {
+				dataIsEmpty: staticDateTimeValue === null,
+				dataIsFilled: staticDateTimeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: staticDateTimeValue !== null
+			},
+			contentRowClassName: datePickerInputContentRowCva({ size }),
+			leadingContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			leadingContentClassName: "ml-0!",
+			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -190,7 +273,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,
@@ -202,6 +285,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,12 +13,14 @@ 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;
+    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,7 +3,9 @@ import { TimePickerForm } from "../shared/TimePickerForm.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
+import { StaticInput } from "../../shared/StaticInput.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";
@@ -11,14 +13,14 @@ 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 +42,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 +81,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);
@@ -126,7 +137,19 @@ var TimePickerBase = (props) => {
 		})
 	});
 };
-var TimePicker = (props) => {
+var TimePicker = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const { locale } = useLocale();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const inputRef = useRef(null);
+	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;
 		const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
@@ -137,6 +160,56 @@ var TimePicker = (props) => {
 		if (isoString == null) return isoString;
 		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
 	};
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		requestAnimationFrame(() => {
+			(inputRef.current?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
+		});
+		setShouldFocus(false);
+	}, [renderInput, shouldFocus]);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
+		const variant = props.variant ?? ui.input.variant;
+		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
+		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
+		const showDropdown = !props.disableDropdown || disableManualEntry;
+		const staticTimeValue = rawValue ? parseTimeValue(rawValue) : null;
+		const displayValue = staticTimeValue ? DateTimeUtils.formatTimeLocalized(staticTimeValue, locale) : "";
+		const staticPlaceholder = rawValue ? "" : props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
+		return /* @__PURE__ */ jsx(StaticInput, {
+			...props,
+			onInteract: (focus) => {
+				setShouldFocus(focus);
+				setRenderInput(true);
+			},
+			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			as,
+			size,
+			variant,
+			applyMinInputWidth: true,
+			hideLabel,
+			isHeaderHidden,
+			isDisabled,
+			placeholder: staticPlaceholder,
+			displayValue,
+			isEmpty: !displayValue,
+			dataAttributes: {
+				dataIsEmpty: staticTimeValue === null,
+				dataIsFilled: staticTimeValue !== null,
+				dataIsDirty: props.isDirty,
+				dataIsRequired: props.isRequired,
+				dataIsDisabled: isDisabled,
+				dataDisabled: isDisabled,
+				dataInvalid: !!props.error,
+				dataHasSelection: staticTimeValue !== null
+			},
+			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -144,7 +217,7 @@ var TimePicker = (props) => {
 			name: formControl.name,
 			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,
@@ -156,6 +229,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,4 +1,5 @@
 import { CalendarState, CalendarStateOptions } from '@react-stately/calendar';
+import { DateValue } from 'react-aria';
 import { DatePickerState } from 'react-stately';
 type DateTimeCalendarProps = {
     includesTime?: false;
@@ -13,8 +14,10 @@ type CalendarProps = DateTimeCalendarProps & {
     className?: string;
     state: CalendarState;
     calendarProps: Omit<CalendarStateOptions, "locale" | "createCalendar">;
-    onApply: () => void;
+    onApply: (selectedDate?: DateValue) => void;
+    onDateSelectionChange?: (selectedDate: DateValue) => void;
+    setDateValueOnDateSelection?: boolean;
 };
 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, onDateSelectionChange, setDateValueOnDateSelection, ...props }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -5,20 +5,37 @@ 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 { useCallback, 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 }) => {
+var Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onDateSelectionChange, setDateValueOnDateSelection = false, ...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-	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) return /* @__PURE__ */ jsx(CalendarGrid, {
 			state: props.state,
-			onApply: handleDateChange
+			onApply: handleDateChange,
+			onDateSelection
 		});
 		if (toggleState === "month") return /* @__PURE__ */ jsx(MonthPicker, {
 			state: props.state,

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

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

@@ -1,11 +1,10 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
-import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
+import { datePickerInputContentRow } from "./datePickerInput.cva.js";
+import { getDatePickerTodayIcon } from "./datePickerTodayIcon.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
@@ -16,15 +15,17 @@ 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, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin) => {
 		setIsFocused(isFocusWithin);
-		if (!isFocusWithin) {
+		if (!isFocusWithin && autoFixYear) {
 			dateFieldRef.current?.autoFixYear();
 			endDateFieldRef.current?.autoFixYear();
 		}
@@ -41,6 +42,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			if (endFieldProps) endFieldProps.onChange?.(null);
 			setCanClear(false);
 			fieldProps.onBlur?.(null);
+			endFieldProps?.onBlur?.(null);
 		},
 		getContainer: () => containerRef.current
 	}));
@@ -51,7 +53,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		dateFieldRef.current?.clearField();
 		fieldProps.onChange?.(null);
 		endDateFieldRef.current?.clearField();
+		endFieldProps?.onChange?.(null);
 		setCanClear(false);
+		fieldProps.onBlur?.(null);
+		endFieldProps?.onBlur?.(null);
 	};
 	const onToday = () => {
 		if (isDateTime) {
@@ -62,8 +67,12 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			fieldProps.onChange?.(today(getLocalTimeZone()));
 			if (endFieldProps) endFieldProps.onChange?.(today(getLocalTimeZone()));
 		}
+		fieldProps.onBlur?.(null);
+		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+	const todayIconComponent = getDatePickerTodayIcon(todayIcon);
+	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
 		className: clsx(inputBaseCva({
@@ -95,19 +104,19 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				as,
 				...headerProps
 			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-input-gap-input-text-to-elements",
+				className: datePickerInputContentRowCva({ size }),
 				children: [
 					disableManualEntry && /* @__PURE__ */ jsx(Button, {
 						onPress: onOpenDropdown,
 						className: "absolute inset-0 z-0",
 						isDisabled
 					}),
-					todayIcon && /* @__PURE__ */ jsx(IconButton, {
+					todayIconComponent && /* @__PURE__ */ jsx(InlineIconButton, {
 						label: "",
-						icon: TodayIcon,
-						size: "none",
+						icon: todayIconComponent,
+						size: todayIconButtonSize,
 						onPress: onToday,
-						className: "relative z-1"
+						className: "relative z-1 !border-none"
 					}),
 					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 						size: "label-1",
@@ -147,7 +156,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				label: "",
 				color: "secondary",
 				...buttonProps,
-				icon: isDateTime ? DateTimeIcon : CalendarIcon,
+				icon: pickerIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

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

@@ -1,6 +1,6 @@
-import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
@@ -13,6 +13,7 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
 var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -74,13 +75,16 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 				as
 			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
 			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => state.setValue(null),
+				onClear: () => {
+					state.setValue(null);
+					fieldProps.onBlur?.(null);
+				},
 				show: canClear
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",
 				onPress,
-				icon: ClockIcon,
+				icon: uiConfig.dateInput.timeIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps } from '../../../buttons/IconButton/IconButton';
+export type DatePickerTodayIcon = boolean | IconButtonProps["icon"];
+export type DatePickerTodayIconButtonSize = IconButtonProps["size"];

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputSizeProps } from '../../shared/input.cva';
+export declare const datePickerInputContentRow: (props?: ({
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DatePickerInputContentRowProps extends VariantProps<typeof datePickerInputContentRow>, InputSizeProps {
+}

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/DateTime/shared/datePickerInput.cva.ts
+var datePickerInputContentRow = cva("flex items-center gap-input-gap-input-text-to-elements", {
+	variants: { size: {
+		"extra-small": "",
+		small: "",
+		default: "",
+		large: ""
+	} },
+	defaultVariants: { size: "default" }
+});
+//#endregion
+export { datePickerInputContentRow };