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

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

@@ -12,19 +12,35 @@ 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 { 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 { 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 = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, 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, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, 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;
+	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 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 normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,
@@ -50,12 +66,16 @@ 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 dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -66,20 +86,21 @@ var DatePickerBase = (props) => {
 		...rest,
 		shouldForceLeadingZeros,
 		value,
-		onChange: (val) => {
-			let normalizedValue = val;
-			if (val) normalizedValue = normalizeByGranularity(val);
+		onChange: (val_0) => {
+			let normalizedValue = val_0;
+			if (val_0) normalizedValue = normalizeByGranularity(val_0);
 			if (normalizedValue && (rest.minValue && normalizedValue < rest?.minValue || rest?.maxValue && normalizedValue > rest?.maxValue)) {
 				state.setValue(state.value);
 				return;
 			}
 			onChange?.(normalizedValue);
 			dialogState.setValue(normalizedValue);
+			if (fireBlurOnChange) debouncedBlur(normalizedValue);
 			if (normalizedValue) {
 				calendarState.setFocusedDate(normalizedValue);
 				return;
 			}
-			calendarState.setFocusedDate(today(getLocalTimeZone()));
+			calendarState.setFocusedDate(today(DATE_PICKER_TIME_ZONE));
 		},
 		shouldCloseOnSelect: false
 	});
@@ -114,11 +135,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
 		}));
@@ -129,7 +150,7 @@ 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);
 	};
@@ -137,7 +158,7 @@ var DatePickerBase = (props) => {
 		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);
 	}, [
@@ -151,7 +172,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, {
@@ -187,7 +208,9 @@ var DatePickerBase = (props) => {
 				placeholder,
 				className: inputClassName,
 				dateGranularity: granularity,
-				format
+				format,
+				timeZone: DATE_PICKER_TIME_ZONE,
+				fireBlurOnChange
 			}), (!disableDropdown || disableManualEntry) && state.isOpen && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -225,7 +248,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		renderInput,
 		setRenderInput,
 		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 		}
 	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
@@ -247,14 +271,14 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		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 date_0 = DateTimeUtils.fromDateValueToLocal(normalizedDate, "UTC");
+		return DateTime.fromJSDate(date_0, { zone: "UTC" }).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 date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
+		return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));
 	};
 	const dateLimits = {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
@@ -300,6 +324,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 			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
@@ -329,7 +355,7 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		ref: mergeRefs(props.ref, inputRef),
 		granularity,
 		value: parseCalendarDate(props.value),
-		onChange: (value) => props.onChange?.(formatCalendarDate(value))
+		onChange: (value_0) => props.onChange?.(formatCalendarDate(value_0))
 	});
 };
 //#endregion

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?: {