@povio/ui 2.3.0-rc.3 → 2.3.0-rc.33

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

@@ -12,19 +12,22 @@ 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 { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
-import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { Controller } from "react-hook-form";
+import { createCalendar, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
+var DATE_PICKER_TIME_ZONE = "UTC";
 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, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
+	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, 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;
@@ -38,6 +41,7 @@ var DatePickerBase = (props) => {
 	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 normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -63,36 +67,42 @@ var DatePickerBase = (props) => {
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
+	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;
 	const dialogState = useDatePickerState({
 		...rest,
-		defaultValue: value || rest.defaultValue,
+		defaultValue: normalizedValue ?? rest.defaultValue ?? null,
 		shouldCloseOnSelect: false,
 		shouldForceLeadingZeros
 	});
 	const state = useDatePickerState({
 		...rest,
 		shouldForceLeadingZeros,
-		value,
-		onChange: (val) => {
-			let normalizedValue = val;
-			if (val) normalizedValue = normalizeByGranularity(val);
-			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
+		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)) {
 				state.setValue(state.value);
 				return;
 			}
-			onChange?.(normalizedValue);
-			dialogState.setValue(normalizedValue);
-			if (normalizedValue) {
-				calendarState.setFocusedDate(normalizedValue);
+			onChange?.(normalizedValue_0);
+			dialogState.setValue(normalizedValue_0);
+			if (fireBlurOnChange) debouncedBlur(normalizedValue_0);
+			if (normalizedValue_0) {
+				calendarState.setFocusedDate(normalizedValue_0);
 				return;
 			}
-			calendarState.setFocusedDate(today(getLocalTimeZone()));
+			calendarState.setFocusedDate(today(DATE_PICKER_TIME_ZONE));
 		},
 		shouldCloseOnSelect: false
 	});
@@ -127,11 +137,11 @@ var DatePickerBase = (props) => {
 		const newValue = dialogState.value ? normalizeByGranularity(dialogState.value) : dialogState.value;
 		state.setValue(newValue);
 		state.toggle();
-		handleBlur(newValue);
+		if (fireBlurOnChange) handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!(shouldUpdateDateOnMonthYearChange || granularity !== "day")) return;
-		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(getLocalTimeZone())).set({
+		const updatedDate = normalizeByGranularity((dialogState.value || state.value || today(DATE_PICKER_TIME_ZONE)).set({
 			year: selectedDate.year,
 			month: selectedDate.month
 		}));
@@ -142,15 +152,22 @@ var DatePickerBase = (props) => {
 		onApply();
 	};
 	const onTodayPress = () => {
-		const todayValue = normalizeByGranularity(today(getLocalTimeZone()));
+		const todayValue = normalizeByGranularity(today(DATE_PICKER_TIME_ZONE));
 		dialogState.setValue(todayValue);
 		calendarState.setFocusedDate(todayValue);
 	};
+	const onInputClear = () => {
+		onChange?.(null);
+		state.setValue(null);
+		dialogState.setValue(null);
+		calendarState.setFocusedDate(today(DATE_PICKER_TIME_ZONE));
+		if (fireBlurOnChange) handleBlur(null);
+	};
 	useEffect(() => {
 		if (!state.isOpen) return;
 		if (granularity !== "year") return;
 		if (dialogState.value) return;
-		const defaultYearValue = normalizeByGranularity(today(getLocalTimeZone()));
+		const defaultYearValue = normalizeByGranularity(today(DATE_PICKER_TIME_ZONE));
 		dialogState.setValue(defaultYearValue);
 		calendarState.setFocusedDate(defaultYearValue);
 	}, [
@@ -164,7 +181,7 @@ var DatePickerBase = (props) => {
 	const onOpenChange = (isOpen) => {
 		state.toggle();
 		if (state.value) calendarState.setFocusedDate(normalizeByGranularity(state.value));
-		if (!state.value) calendarState.setFocusedDate(today(getLocalTimeZone()));
+		if (!state.value) calendarState.setFocusedDate(today(DATE_PICKER_TIME_ZONE));
 		if (!isOpen) dialogState.setValue(state.value);
 	};
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
@@ -182,6 +199,9 @@ var DatePickerBase = (props) => {
 				as,
 				groupProps,
 				fieldProps,
+				fieldValue: normalizedValue,
+				isValueControlled: true,
+				hasValue: normalizedValue != null,
 				buttonProps,
 				isDirty,
 				isDisabled,
@@ -200,7 +220,10 @@ var DatePickerBase = (props) => {
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,
-				format
+				format,
+				timeZone: DATE_PICKER_TIME_ZONE,
+				fireBlurOnChange,
+				onClear: onInputClear
 			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -226,7 +249,11 @@ var DatePickerBase = (props) => {
 		})
 	});
 };
-var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, renderStaticInput, ...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 = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
@@ -237,44 +264,77 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		inputRef,
 		renderInput,
 		setRenderInput,
-		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
-		}
+		getFocusTarget: _temp
 	});
-	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 normalizeByGranularity = (date) => {
-		if (granularity === "year") return date.set({
-			month: 1,
-			day: 1
-		});
-		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
-	};
+	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 formattedDate;
+			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 = rawValue ? parseCalendarDate(rawValue) : null;
+		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;
@@ -300,50 +360,171 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
 			labelPlacement: "content-row",
 			dataAttributes: {
-				dataIsEmpty: dateValue === null,
-				dataIsFilled: dateValue !== null,
+				dataIsEmpty: dateValue == null,
+				dataIsFilled: dateValue != null,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
 				dataIsDisabled: isDisabled,
 				dataDisabled: isDisabled,
 				dataInvalid: !!props.error,
-				dataHasSelection: dateValue !== null
+				dataHasSelection: dateValue != null
 			},
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : 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, isDirty } }) => /* @__PURE__ */ jsx(DatePickerBase, {
-				...innerProps,
-				...dateLimits,
-				ref: mergeRefs(ref, field.ref, inputRef),
-				value: parseCalendarDate(field.value),
-				onChange: (value) => field.onChange(formatCalendarDate(value)),
-				onBlur: field.onBlur,
-				isDirty,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
+	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
 		});
+		$[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];
 	}
-	return /* @__PURE__ */ jsx(DatePickerBase, {
-		...props,
-		...dateLimits,
-		ref: mergeRefs(props.ref, inputRef),
-		granularity,
-		value: parseCalendarDate(props.value),
-		onChange: (value) => props.onChange?.(formatCalendarDate(value))
-	});
+	const fullIso = t1 === void 0 ? true : t1;
+	const granularity = t2 === void 0 ? "day" : t2;
+	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,
+					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
+		});
+		$[26] = fullIso;
+		$[27] = granularity;
+		$[28] = maxValue;
+		$[29] = minValue;
+		$[30] = props;
+		$[31] = renderStaticInput;
+		$[32] = t3;
+	} else t3 = $[32];
+	return t3;
 };
+function _temp(input) {
+	const container = input.getContainer?.() ?? input;
+	return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
+}
 //#endregion
 export { DatePicker };

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

@@ -23,6 +23,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    fireBlurOnChange?: boolean;
 }
 export interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
     value?: {