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

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

@@ -19,14 +19,27 @@ import { 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 { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
+import { Time, createCalendar, toCalendarDate, 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, 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 { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone: _timeZone, autoFixYear: autoFixYearProp, fireBlurOnChange: fireBlurOnChangeProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	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 autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const fireBlurOnChange = fireBlurOnChangeProp ?? ui.dateInput.fireBlurOnChange;
+	const setDateValueOnDateSelection = setDateValueOnDateSelectionProp ?? ui.dateInput.setDateValueOnDateSelection;
+	const effectiveTimeZone = "UTC";
 	const formFieldProps = {
 		error,
 		label,
@@ -44,9 +57,12 @@ var DateTimePickerBase = (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 } });
 	};
@@ -66,11 +82,11 @@ var DateTimePickerBase = (props) => {
 		...rest,
 		shouldForceLeadingZeros,
 		value,
-		onChange: (val) => {
-			onChange?.(val);
-			dialogState.setValue(val);
-			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
-			debouncedBlur(val);
+		onChange: (val_0) => {
+			onChange?.(val_0);
+			dialogState.setValue(val_0);
+			calendarState.setFocusedDate(val_0 || today(effectiveTimeZone));
+			if (fireBlurOnChange) debouncedBlur(val_0);
 		},
 		shouldCloseOnSelect: false,
 		granularity: "minute",
@@ -109,7 +125,7 @@ var DateTimePickerBase = (props) => {
 		const newValue = dialogState.value;
 		state.setValue(newValue);
 		state.toggle();
-		handleBlur(newValue);
+		if (fireBlurOnChange) handleBlur(newValue);
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!shouldUpdateDateOnMonthYearChange) return;
@@ -127,8 +143,9 @@ var DateTimePickerBase = (props) => {
 		calendarState.setFocusedDate(selectedDate);
 	};
 	const onTodayPress = () => {
-		dialogState.setValue(toCalendarDateTime(now(effectiveTimeZone)));
-		calendarState.setFocusedDate(today(effectiveTimeZone));
+		const currentValue = DateTimeUtils.getCurrentWallClockCalendarDateTime();
+		dialogState.setValue(currentValue);
+		calendarState.setFocusedDate(toCalendarDate(currentValue));
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
@@ -165,9 +182,9 @@ var DateTimePickerBase = (props) => {
 				groupProps,
 				fieldProps: {
 					...fieldProps,
-					onBlur: (e) => {
-						fieldProps.onBlur?.(e);
-						onInputBlur(e);
+					onBlur: (e_0) => {
+						fieldProps.onBlur?.(e_0);
+						onInputBlur(e_0);
 					}
 				},
 				buttonProps,
@@ -191,7 +208,8 @@ var DateTimePickerBase = (props) => {
 				className: inputClassName,
 				timeZone: effectiveTimeZone,
 				isTimeOptional,
-				format
+				format,
+				fireBlurOnChange
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -218,7 +236,7 @@ var DateTimePickerBase = (props) => {
 		})
 	});
 };
-var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
+var DateTimePicker = ({ fullIso: _fullIso = true, renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
@@ -230,7 +248,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		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({
@@ -240,12 +259,10 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 	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 effectiveTimeZone = "UTC";
 	const formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
-		if (fullIso) return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
-		return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
+		return DateTimeUtils.fromDateValueFieldsToUTCISO(dateValue);
 	};
 	const parseDateValue = (isoString) => {
 		if (isoString == null) return isoString;
@@ -291,6 +308,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			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.dateTimeIcon : void 0,
 			children: staticSegments
@@ -317,7 +336,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		...props,
 		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateValue(props.value),
-		onChange: (value) => props.onChange?.(formatDateValue(value))
+		onChange: (value_0) => props.onChange?.(formatDateValue(value_0))
 	});
 };
 //#endregion

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

@@ -14,6 +14,7 @@ interface TimePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Ar
     placeholder?: string;
     inputClassName?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    fireBlurOnChange?: boolean;
 }
 export interface TimePickerProps extends Omit<TimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;