@povio/ui 3.0.0-rc.3 → 3.1.0

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

@@ -1,22 +1,14 @@
-import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Calendar } from "../shared/Calendar.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
-import { datePickerInputContentRowDefinition } 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 { getStaticCalendarDateSegments } 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 { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } 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";
@@ -26,25 +18,7 @@ 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, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconButtonComponent: todayIconButtonComponentProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, ...rest } = props;
-	const as = asProp ?? ui.input.as;
-	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
-	const variant = variantProp ?? ui.input.variant;
-	const size = sizeProp ?? ui.input.size;
-	const isClearable = isClearableProp ?? ui.input.isClearable;
-	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
-	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
-	const todayIconButtonComponent = todayIconButtonComponentProp ?? ui.dateInput.todayIconButtonComponent;
-	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
-	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
-	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
-	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
-	const granularity = granularityProp ?? ui.dateInput.granularity;
-	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
-	const fireBlurOnChange = fireBlurOnChangeProp ?? ui.dateInput.fireBlurOnChange;
-	const timeZone = ui.dateInput.timeZone;
-	let effectiveTimeZone = getLocalTimeZone();
-	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
+	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,
@@ -70,42 +44,33 @@ var DatePickerBase = (props) => {
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
-	useImperativeHandle(ref, () => ({
-		clear: () => {
-			datePickerInputRef.current?.clear();
-		},
-		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
-	}));
-	const handleBlur = (val) => {
-		onBlur?.({ target: { value: val } });
-	};
-	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
-	const normalizedValue = value ?? null;
+	useImperativeHandle(ref, () => ({ clear: () => {
+		datePickerInputRef.current?.clear();
+	} }));
 	const dialogState = useDatePickerState({
 		...rest,
-		defaultValue: normalizedValue ?? rest.defaultValue ?? null,
+		defaultValue: value || rest.defaultValue,
 		shouldCloseOnSelect: false,
 		shouldForceLeadingZeros
 	});
 	const state = useDatePickerState({
 		...rest,
 		shouldForceLeadingZeros,
-		value: normalizedValue,
-		onChange: (val_0) => {
-			let normalizedValue_0 = val_0;
-			if (val_0) normalizedValue_0 = normalizeByGranularity(val_0);
-			if (normalizedValue_0 && (rest.minValue && normalizedValue_0 < rest?.minValue || rest?.maxValue && normalizedValue_0 > rest?.maxValue)) {
+		value,
+		onChange: (val) => {
+			let normalizedValue = val;
+			if (val) normalizedValue = normalizeByGranularity(val);
+			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
 				state.setValue(state.value);
 				return;
 			}
-			onChange?.(normalizedValue_0);
-			dialogState.setValue(normalizedValue_0);
-			if (fireBlurOnChange) debouncedBlur(normalizedValue_0);
-			if (normalizedValue_0) {
-				calendarState.setFocusedDate(normalizedValue_0);
+			onChange?.(normalizedValue);
+			dialogState.setValue(normalizedValue);
+			if (normalizedValue) {
+				calendarState.setFocusedDate(normalizedValue);
 				return;
 			}
-			calendarState.setFocusedDate(today(effectiveTimeZone));
+			calendarState.setFocusedDate(today(getLocalTimeZone()));
 		},
 		shouldCloseOnSelect: false
 	});
@@ -137,14 +102,13 @@ var DatePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
-		state.setValue(newValue);
+		if (dialogState.value) state.setValue(normalizeByGranularity(dialogState.value));
+		if (!dialogState.value) state.setValue(dialogState.value);
 		state.toggle();
-		if (fireBlurOnChange) handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
-		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(effectiveTimeZone)).set({
+		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(getLocalTimeZone())).set({
 			year: selectedDate.year,
 			month: selectedDate.month
 		}));
@@ -155,20 +119,15 @@ var DatePickerBase = (props) => {
 		onApply();
 	};
 	const onTodayPress = () => {
-		const todayValue = normalizeByGranularity(today(effectiveTimeZone));
+		const todayValue = normalizeByGranularity(today(getLocalTimeZone()));
 		dialogState.setValue(todayValue);
 		calendarState.setFocusedDate(todayValue);
 	};
-	const onInputClear = () => {
-		onChange?.(null);
-		dialogState.setValue(null);
-		if (fireBlurOnChange) handleBlur(null);
-	};
 	useEffect(() => {
 		if (!state.isOpen) return;
 		if (granularity !== "year") return;
 		if (dialogState.value) return;
-		const defaultYearValue = normalizeByGranularity(today(effectiveTimeZone));
+		const defaultYearValue = normalizeByGranularity(today(getLocalTimeZone()));
 		dialogState.setValue(defaultYearValue);
 		calendarState.setFocusedDate(defaultYearValue);
 	}, [
@@ -177,13 +136,12 @@ var DatePickerBase = (props) => {
 		dialogState.value,
 		dialogState,
 		calendarState,
-		normalizeByGranularity,
-		effectiveTimeZone
+		normalizeByGranularity
 	]);
 	const onOpenChange = (isOpen) => {
 		state.toggle();
 		if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
-		if (!state.value) calendarState.setFocusedDate(today(effectiveTimeZone));
+		if (!state.value) calendarState.setFocusedDate(today(getLocalTimeZone()));
 		if (!isOpen) dialogState.setValue(state.value);
 	};
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
@@ -200,21 +158,11 @@ var DatePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: {
-					...fieldProps,
-					onBlur: (event) => {
-						fieldProps.onBlur?.(event);
-						handleBlur(state.value);
-					}
-				},
-				fieldValue: normalizedValue,
-				isValueControlled: true,
-				hasValue: normalizedValue != null,
+				fieldProps,
 				buttonProps,
 				isDirty,
 				isDisabled,
 				disableManualEntry,
-				autoFixYear,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -222,18 +170,13 @@ var DatePickerBase = (props) => {
 				isClearable,
 				headerProps,
 				todayIcon,
-				todayIconButtonSize,
-				todayIconButtonComponent,
-				todayIconPlacement,
 				onOpenDropdown: () => state.toggle(),
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,
-				format,
-				timeZone: effectiveTimeZone,
-				fireBlurOnChange,
-				onClear: onInputClear
-			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
+				autoFixYear,
+				format
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
 					isValid: !dialogState.isInvalid && !!dialogState.value,
@@ -258,298 +201,57 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-var DatePickerInner = (t0) => {
-	const $ = c(28);
-	const { fullIso: t1, granularity: t2, minValue, maxValue, renderStaticInput, isFormControlDisabled, ...props } = t0;
-	const fullIso = t1 === void 0 ? true : t1;
-	const granularity = t2 === void 0 ? "day" : t2;
-	const ui = UIConfig.useConfig();
-	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
-	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: _temp
-	});
-	const normalizedValue = props.value ?? null;
-	let t3;
-	if ($[0] !== granularity) {
-		t3 = (date) => {
-			if (granularity === "year") return date.set({
-				month: 1,
-				day: 1
-			});
-			if (granularity === "month") return date.set({ day: 1 });
-			return date;
-		};
-		$[0] = granularity;
-		$[1] = t3;
-	} else t3 = $[1];
-	const normalizeByGranularity = t3;
-	let t4;
-	if ($[2] !== fullIso || $[3] !== normalizeByGranularity) {
-		t4 = (calendarDate) => {
-			if (calendarDate === null) return null;
-			const normalizedDate = normalizeByGranularity(calendarDate);
-			if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
-			const date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
-			return DateTime.fromJSDate(date_0, { zone: "UTC" }).toISODate();
-		};
-		$[2] = fullIso;
-		$[3] = normalizeByGranularity;
-		$[4] = t4;
-	} else t4 = $[4];
-	const formatCalendarDate = t4;
-	let t5;
-	if ($[5] !== fullIso || $[6] !== normalizeByGranularity) {
-		t5 = (formattedDate) => {
-			if (formattedDate == null) return null;
-			if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
-			const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
-			return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
-		};
-		$[5] = fullIso;
-		$[6] = normalizeByGranularity;
-		$[7] = t5;
-	} else t5 = $[7];
-	const parseCalendarDate = t5;
-	let t6;
-	if ($[8] !== minValue || $[9] !== parseCalendarDate) {
-		t6 = typeof minValue === "string" ? parseCalendarDate(minValue) : minValue;
-		$[8] = minValue;
-		$[9] = parseCalendarDate;
-		$[10] = t6;
-	} else t6 = $[10];
-	let t7;
-	if ($[11] !== maxValue || $[12] !== parseCalendarDate) {
-		t7 = typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue;
-		$[11] = maxValue;
-		$[12] = parseCalendarDate;
-		$[13] = t7;
-	} else t7 = $[13];
-	let t8;
-	if ($[14] !== t6 || $[15] !== t7) {
-		t8 = {
-			minValue: t6,
-			maxValue: t7
-		};
-		$[14] = t6;
-		$[15] = t7;
-		$[16] = t8;
-	} else t8 = $[16];
-	const dateLimits = t8;
-	if (!renderInput) {
-		const dateValue = normalizedValue ? parseCalendarDate(normalizedValue) : 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 todayIconButtonComponent = props.todayIconButtonComponent ?? ui.dateInput.todayIconButtonComponent;
-		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
-		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
-			isDisabled,
-			renderStatic: true,
-			size: todayIconButtonSize,
-			todayIconButtonComponent
-		});
-		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
-		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticSegments = getStaticCalendarDateSegments({
-			value: dateValue,
-			locale,
-			shouldForceLeadingZeros,
-			isDisabled,
-			hidePlaceholder: as === "floating" && !dateValue,
-			disableManualEntry,
-			placeholder: props.placeholder,
-			dateGranularity: granularity
-		});
-		return /* @__PURE__ */ jsx(InputFrame, {
-			...props,
-			isDisabled,
-			className: clsx("group 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 }),
-			contentGroup: "date-picker",
-			labelPlacement: "content-row",
-			dataAttributes: {
-				dataIsEmpty: dateValue == null,
-				dataIsFilled: dateValue != null,
-				dataIsDirty: props.isDirty,
-				dataIsRequired: props.isRequired,
-				dataIsDisabled: isDisabled,
-				dataDisabled: isDisabled,
-				dataInvalid: !!props.error,
-				dataHasSelection: dateValue != null
-			},
-			renderStatic: true,
-			onStaticInteract: renderRealInput,
-			actionContent: staticTodayIcon,
-			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
-			showClear: dateValue != null,
-			wrapContentAndTrailing: true,
-			contentAndTrailingClassName: "gap-2!",
-			trailingClassName: "py-0! pl-0!",
-			action: showDropdown ? {
-				icon: ui.dateInput.calendarIcon,
-				onClick: _temp2,
-				altText: ""
-			} : void 0,
-			children: staticSegments
-		});
-	}
-	const T0 = DatePickerBase;
-	const t9 = mergeRefs(props.ref, inputRef);
-	const t10 = parseCalendarDate(normalizedValue);
-	let t11;
-	if ($[17] !== formatCalendarDate || $[18] !== props) {
-		t11 = (value) => props.onChange?.(formatCalendarDate(value));
-		$[17] = formatCalendarDate;
-		$[18] = props;
-		$[19] = t11;
-	} else t11 = $[19];
-	let t12;
-	if ($[20] !== T0 || $[21] !== dateLimits || $[22] !== granularity || $[23] !== props || $[24] !== t10 || $[25] !== t11 || $[26] !== t9) {
-		t12 = /* @__PURE__ */ jsx(T0, {
-			...props,
-			...dateLimits,
-			ref: t9,
-			granularity,
-			value: t10,
-			onChange: t11
+var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ...props }) => {
+	const normalizeByGranularity = (date) => {
+		if (granularity === "year") return date.set({
+			month: 1,
+			day: 1
 		});
-		$[20] = T0;
-		$[21] = dateLimits;
-		$[22] = granularity;
-		$[23] = props;
-		$[24] = t10;
-		$[25] = t11;
-		$[26] = t9;
-		$[27] = t12;
-	} else t12 = $[27];
-	return t12;
-};
-var DatePicker = (t0) => {
-	const $ = c(33);
-	let maxValue;
-	let minValue;
-	let props;
-	let renderStaticInput;
-	let t1;
-	let t2;
-	if ($[0] !== t0) {
-		({fullIso: t1, granularity: t2, minValue, maxValue, renderStaticInput, ...props} = t0);
-		$[0] = t0;
-		$[1] = maxValue;
-		$[2] = minValue;
-		$[3] = props;
-		$[4] = renderStaticInput;
-		$[5] = t1;
-		$[6] = t2;
-	} else {
-		maxValue = $[1];
-		minValue = $[2];
-		props = $[3];
-		renderStaticInput = $[4];
-		t1 = $[5];
-		t2 = $[6];
-	}
-	const fullIso = t1 === void 0 ? true : t1;
-	const granularity = t2 === void 0 ? "day" : t2;
+		if (granularity === "month") return date.set({ day: 1 });
+		return date;
+	};
+	const formatCalendarDate = (calendarDate) => {
+		if (calendarDate === null) return null;
+		const normalizedDate = normalizeByGranularity(calendarDate);
+		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(normalizedDate);
+		const date = DateTimeUtils.fromDateValueToLocal(normalizedDate);
+		return DateTime.fromJSDate(date).toISODate();
+	};
+	const parseCalendarDate = (formattedDate) => {
+		if (formattedDate == null) return formattedDate;
+		if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
+		const date = DateTime.fromISO(formattedDate).toJSDate();
+		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date)));
+	};
+	const dateLimits = {
+		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
+	};
 	if ("formControl" in props && props.formControl) {
-		let formControl;
-		let innerProps;
-		let ref;
-		if ($[7] !== props) {
-			({formControl, ref, ...innerProps} = props);
-			$[7] = props;
-			$[8] = formControl;
-			$[9] = innerProps;
-			$[10] = ref;
-		} else {
-			formControl = $[8];
-			innerProps = $[9];
-			ref = $[10];
-		}
-		const controlWithOptions = formControl.control;
-		let t3;
-		if ($[11] !== controlWithOptions._options?.disabled || $[12] !== fullIso || $[13] !== granularity || $[14] !== innerProps || $[15] !== maxValue || $[16] !== minValue || $[17] !== props.error || $[18] !== props.isDisabled || $[19] !== ref || $[20] !== renderStaticInput) {
-			t3 = (t4) => {
-				const { field, fieldState: t5 } = t4;
-				const { error, isDirty } = t5;
-				return /* @__PURE__ */ jsx(DatePickerInner, {
-					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					value: field.value ?? null,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
-					isDirty,
-					isDisabled: field.disabled || props.isDisabled,
-					isFormControlDisabled: !!controlWithOptions._options?.disabled,
-					error: props.error ?? error?.message,
-					fullIso,
-					granularity,
-					minValue,
-					maxValue,
-					renderStaticInput
-				});
-			};
-			$[11] = controlWithOptions._options?.disabled;
-			$[12] = fullIso;
-			$[13] = granularity;
-			$[14] = innerProps;
-			$[15] = maxValue;
-			$[16] = minValue;
-			$[17] = props.error;
-			$[18] = props.isDisabled;
-			$[19] = ref;
-			$[20] = renderStaticInput;
-			$[21] = t3;
-		} else t3 = $[21];
-		let t4;
-		if ($[22] !== formControl.control || $[23] !== formControl.name || $[24] !== t3) {
-			t4 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
-				render: t3
-			});
-			$[22] = formControl.control;
-			$[23] = formControl.name;
-			$[24] = t3;
-			$[25] = t4;
-		} else t4 = $[25];
-		return t4;
-	}
-	let t3;
-	if ($[26] !== fullIso || $[27] !== granularity || $[28] !== maxValue || $[29] !== minValue || $[30] !== props || $[31] !== renderStaticInput) {
-		t3 = /* @__PURE__ */ jsx(DatePickerInner, {
-			...props,
-			fullIso,
-			granularity,
-			minValue,
-			maxValue,
-			renderStaticInput
+		const { formControl, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerBase, {
+				...innerProps,
+				...dateLimits,
+				ref: mergeRefs(ref, field.ref),
+				value: parseCalendarDate(field.value),
+				onChange: (value) => field.onChange(formatCalendarDate(value)),
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
 		});
-		$[26] = fullIso;
-		$[27] = granularity;
-		$[28] = maxValue;
-		$[29] = minValue;
-		$[30] = props;
-		$[31] = renderStaticInput;
-		$[32] = t3;
-	} else t3 = $[32];
-	return t3;
+	}
+	return /* @__PURE__ */ jsx(DatePickerBase, {
+		...props,
+		...dateLimits,
+		granularity,
+		value: parseCalendarDate(props.value),
+		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+	});
 };
-function _temp(input) {
-	const container = input.getContainer?.() ?? input;
-	return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
-}
-function _temp2() {}
 //#endregion
 export { DatePicker };

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

@@ -1,30 +1,24 @@
 import { CalendarDate } from '@internationalized/date';
-import { FocusEvent, Ref } from 'react';
+import { Ref } from 'react';
 import { DateValue } from 'react-aria';
 import { FieldValues } from 'react-hook-form';
 import { DateRangePickerStateOptions } from 'react-stately';
 import { DatePickerInputHandle } from '../shared/DatePickerInput';
-import { DatePickerTodayIcon, DatePickerTodayIconButtonComponent, DatePickerTodayIconButtonSize, DatePickerTodayIconPlacement } from '../shared/datePicker.types';
 import { FormFieldProps } from '../../FormField/FormField';
 import { ControlProps } from '../../shared/form.types';
 import { InputVariantProps } from '../../shared/input.cva';
-interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label" | "onBlur"> {
+interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
     ref?: Ref<DatePickerInputHandle & HTMLDivElement>;
     disableDropdown?: boolean;
     isClearable?: boolean;
     hideSidebar?: boolean;
     className?: string;
-    todayIcon?: DatePickerTodayIcon;
-    todayIconButtonSize?: DatePickerTodayIconButtonSize;
-    todayIconButtonComponent?: DatePickerTodayIconButtonComponent;
-    todayIconPlacement?: DatePickerTodayIconPlacement;
+    todayIcon?: boolean;
     isDirty?: boolean;
     disableManualEntry?: boolean;
-    autoFixYear?: boolean;
     placeholder?: string;
     inputClassName?: string;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    fireBlurOnChange?: boolean;
+    autoFixYear?: boolean;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {
@@ -38,8 +32,7 @@ export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "va
     fullIso?: boolean;
     minValue?: DateValue | string;
     maxValue?: DateValue | string;
-    renderStaticInput?: boolean;
 }
 export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
-export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};