@povio/ui 2.3.0-rc.4 → 2.3.0-rc.40

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

@@ -25,6 +25,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
     timeZone?: string;
     format?: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    fireBlurOnChange?: boolean;
 }
 export interface DateTimePickerProps extends Omit<DateTimePickerBaseProps, "value" | "onChange"> {
     value?: string | null;

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

@@ -13,18 +13,19 @@ 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 { 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 { Controller } from "react-hook-form";
+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: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	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;
@@ -37,9 +38,9 @@ var DateTimePickerBase = (props) => {
 	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;
-	let effectiveTimeZone = getLocalTimeZone();
-	if (timeZone) effectiveTimeZone = timeZone;
+	const effectiveTimeZone = "UTC";
 	const formFieldProps = {
 		error,
 		label,
@@ -57,16 +58,20 @@ 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 } });
 	};
 	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,
 		granularity: "minute",
 		hideTimeZone: true,
@@ -78,12 +83,12 @@ var DateTimePickerBase = (props) => {
 	const state = useDatePickerState({
 		...rest,
 		shouldForceLeadingZeros,
-		value,
-		onChange: (val) => {
-			onChange?.(val);
-			dialogState.setValue(val);
-			calendarState.setFocusedDate(val || today(getLocalTimeZone()));
-			debouncedBlur(val);
+		value: normalizedValue,
+		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",
@@ -122,7 +127,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;
@@ -140,8 +145,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();
@@ -154,7 +160,7 @@ var DateTimePickerBase = (props) => {
 			dialogState.setValue(state.value);
 			return;
 		}
-		const textValue = e.currentTarget.textContent;
+		const textValue = e?.currentTarget?.textContent ?? null;
 		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue, effectiveTimeZone, locale);
 		if (dateTimeValue) {
 			state.setValue(dateTimeValue);
@@ -170,7 +176,7 @@ var DateTimePickerBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: "relative inline-flex w-full flex-col text-left",
+			className: "group relative inline-flex w-full flex-col text-left",
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
 				ref: mergeRefs(ref, datePickerInputRef),
@@ -178,11 +184,15 @@ var DateTimePickerBase = (props) => {
 				groupProps,
 				fieldProps: {
 					...fieldProps,
-					onBlur: (e) => {
-						fieldProps.onBlur?.(e);
-						onInputBlur(e);
+					onBlur: (e_0) => {
+						fieldProps.onBlur?.(e_0);
+						handleBlur(state.value);
+						onInputBlur(e_0);
 					}
 				},
+				fieldValue: normalizedValue,
+				isValueControlled: true,
+				hasValue: normalizedValue != null,
 				buttonProps,
 				isDirty,
 				isDisabled,
@@ -204,7 +214,8 @@ var DateTimePickerBase = (props) => {
 				className: inputClassName,
 				timeZone: effectiveTimeZone,
 				isTimeOptional,
-				format
+				format,
+				fireBlurOnChange
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -231,7 +242,9 @@ var DateTimePickerBase = (props) => {
 		})
 	});
 };
-var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
+var DateTimePickerInner = (t0) => {
+	const $ = c(9);
+	const { fullIso: t1, renderStaticInput, isFormControlDisabled, ...props } = t0;
 	const ui = UIConfig.useConfig();
 	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const { locale } = useLocale();
@@ -242,37 +255,24 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		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;
-	let effectiveTimeZone = getLocalTimeZone();
-	if (props.timeZone) effectiveTimeZone = props.timeZone;
-	const formatDateValue = (dateValue) => {
-		if (dateValue === null) return null;
-		if (fullIso) return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
-		return DateTimeUtils.fromDateValueToISO(dateValue, effectiveTimeZone);
-	};
-	const parseDateValue = (isoString) => {
-		if (isoString == null) return isoString;
-		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, effectiveTimeZone);
-	};
+	const normalizedValue = props.value ?? null;
+	const formatDateValue = _temp2;
+	const parseDateValue = _temp3;
 	if (!renderInput) {
-		const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
+		const dateTimeValue = normalizedValue ? parseDateValue(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 todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
-		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
+			isDisabled,
+			renderStatic: true,
+			size: todayIconButtonSize
+		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateTimeSegments({
@@ -280,58 +280,172 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			locale,
 			shouldForceLeadingZeros,
 			isDisabled,
-			hidePlaceholder: as === "floating" && !dateTimeValue
+			hidePlaceholder: as === "floating" && !dateTimeValue,
+			disableManualEntry,
+			placeholder: props.placeholder
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			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 }),
 			labelPlacement: "content-row",
 			dataAttributes: {
-				dataIsEmpty: dateTimeValue === null,
-				dataIsFilled: dateTimeValue !== null,
+				dataIsEmpty: dateTimeValue == null,
+				dataIsFilled: dateTimeValue != null,
 				dataIsDirty: props.isDirty,
 				dataIsRequired: props.isRequired,
 				dataIsDisabled: isDisabled,
 				dataDisabled: isDisabled,
 				dataInvalid: !!props.error,
-				dataHasSelection: dateTimeValue !== null
+				dataHasSelection: dateTimeValue != null
 			},
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			showClear: dateTimeValue != null,
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
-			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
+			action: showDropdown ? {
+				icon: ui.dateInput.dateTimeIcon,
+				onClick: _temp4,
+				altText: ""
+			} : 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(DateTimePickerBase, {
-				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
-				value: parseDateValue(field.value),
-				onChange: (value) => field.onChange(formatDateValue(value)),
-				onBlur: field.onBlur,
-				isDirty,
-				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
-			})
+	const T0 = DateTimePickerBase;
+	const t2 = mergeRefs(props.ref, inputRef);
+	const t3 = parseDateValue(normalizedValue);
+	let t4;
+	if ($[0] !== formatDateValue || $[1] !== props) {
+		t4 = (value) => props.onChange?.(formatDateValue(value));
+		$[0] = formatDateValue;
+		$[1] = props;
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== T0 || $[4] !== props || $[5] !== t2 || $[6] !== t3 || $[7] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			ref: t2,
+			value: t3,
+			onChange: t4
 		});
+		$[3] = T0;
+		$[4] = props;
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
+	} else t5 = $[8];
+	return t5;
+};
+var DateTimePicker = (t0) => {
+	const $ = c(24);
+	let props;
+	let renderStaticInput;
+	let t1;
+	if ($[0] !== t0) {
+		({fullIso: t1, renderStaticInput, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = renderStaticInput;
+		$[3] = t1;
+	} else {
+		props = $[1];
+		renderStaticInput = $[2];
+		t1 = $[3];
 	}
-	return /* @__PURE__ */ jsx(DateTimePickerBase, {
-		...props,
-		ref: mergeRefs(props.ref, inputRef),
-		value: parseDateValue(props.value),
-		onChange: (value) => props.onChange?.(formatDateValue(value))
-	});
+	const fullIso = t1 === void 0 ? true : t1;
+	if ("formControl" in props && props.formControl) {
+		let formControl;
+		let innerProps;
+		let ref;
+		if ($[4] !== props) {
+			({formControl, ref, ...innerProps} = props);
+			$[4] = props;
+			$[5] = formControl;
+			$[6] = innerProps;
+			$[7] = ref;
+		} else {
+			formControl = $[5];
+			innerProps = $[6];
+			ref = $[7];
+		}
+		const controlWithOptions = formControl.control;
+		let t2;
+		if ($[8] !== controlWithOptions._options?.disabled || $[9] !== fullIso || $[10] !== innerProps || $[11] !== props.error || $[12] !== props.isDisabled || $[13] !== ref || $[14] !== renderStaticInput) {
+			t2 = (t3) => {
+				const { field, fieldState: t4 } = t3;
+				const { error, isDirty } = t4;
+				return /* @__PURE__ */ jsx(DateTimePickerInner, {
+					...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,
+					renderStaticInput
+				});
+			};
+			$[8] = controlWithOptions._options?.disabled;
+			$[9] = fullIso;
+			$[10] = innerProps;
+			$[11] = props.error;
+			$[12] = props.isDisabled;
+			$[13] = ref;
+			$[14] = renderStaticInput;
+			$[15] = t2;
+		} else t2 = $[15];
+		let t3;
+		if ($[16] !== formControl.control || $[17] !== formControl.name || $[18] !== t2) {
+			t3 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
+				render: t2
+			});
+			$[16] = formControl.control;
+			$[17] = formControl.name;
+			$[18] = t2;
+			$[19] = t3;
+		} else t3 = $[19];
+		return t3;
+	}
+	let t2;
+	if ($[20] !== fullIso || $[21] !== props || $[22] !== renderStaticInput) {
+		t2 = /* @__PURE__ */ jsx(DateTimePickerInner, {
+			...props,
+			fullIso,
+			renderStaticInput
+		});
+		$[20] = fullIso;
+		$[21] = props;
+		$[22] = renderStaticInput;
+		$[23] = t2;
+	} else t2 = $[23];
+	return t2;
 };
+function _temp(input) {
+	const container = input.getContainer?.() ?? input;
+	return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
+}
+function _temp2(dateValue) {
+	if (dateValue === null) return null;
+	return DateTimeUtils.fromDateValueFieldsToUTCISO(dateValue);
+}
+function _temp3(isoString) {
+	if (isoString == null) return null;
+	return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, "UTC");
+}
+function _temp4() {}
 //#endregion
 export { DateTimePicker };

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;