@povio/ui 2.3.0-rc.36 → 2.3.0-rc.37

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

@@ -122,15 +122,6 @@ var DatePickerBase = (props) => {
 		locale,
 		createCalendar
 	});
-	useEffect(() => {
-		if (normalizedValue !== null) return;
-		if (state.value !== null) state.setValue(null);
-		if (dialogState.value !== null) dialogState.setValue(null);
-	}, [
-		normalizedValue,
-		state,
-		dialogState
-	]);
 	const headerProps = {
 		label,
 		tooltipText,
@@ -167,10 +158,6 @@ var DatePickerBase = (props) => {
 	};
 	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;
@@ -472,7 +459,7 @@ var DatePicker = (t0) => {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
 					value: field.value ?? null,
-					onChange: (value) => field.onChange(value ?? null),
+					onChange: field.onChange,
 					onBlur: field.onBlur,
 					isDirty,
 					isDisabled: field.disabled || props.isDisabled,

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

@@ -18,7 +18,7 @@ import { RangeCalendar } from "../shared/RangeCalendar.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, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -183,27 +183,6 @@ var DateRangePickerBase = (props) => {
 			setActivePreset(null);
 		}
 	};
-	useEffect(() => {
-		if (normalizedValue !== null) return;
-		if (state.value !== null) state.setValue(null);
-		setValidationRangeError(void 0);
-		dialogState.setValue(null);
-		leftCalendarState.setValue(null);
-		rightCalendarState.setValue(null);
-		setRangeSelection({
-			start: null,
-			end: null,
-			isSelecting: false
-		});
-		setHoverDate(null);
-		setActivePreset(null);
-	}, [
-		normalizedValue,
-		state,
-		dialogState,
-		leftCalendarState,
-		rightCalendarState
-	]);
 	const throttledSetHoverDate = useCallback((date) => {
 		requestAnimationFrame(() => {
 			setHoverDate(date);
@@ -389,9 +368,6 @@ var DateRangePickerBase = (props) => {
 	};
 	const onInputClear = () => {
 		onChange?.(null);
-		state.setValue(null);
-		handleCalendarStatesChange(null);
-		if (fireBlurOnChange) handleBlur(null);
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
@@ -820,7 +796,7 @@ var DateRangePicker = (t0) => {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
 					value: field.value ?? null,
-					onChange: (value) => field.onChange(value ?? null),
+					onChange: field.onChange,
 					onBlur: field.onBlur,
 					isDirty,
 					isDisabled: field.disabled || props.isDisabled,

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

@@ -55,7 +55,6 @@ var DateTimePickerBase = (props) => {
 		errorClassName
 	};
 	const datePickerInputRef = useRef(null);
-	const isClearingInputRef = useRef(false);
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
@@ -113,15 +112,6 @@ var DateTimePickerBase = (props) => {
 		locale,
 		createCalendar
 	});
-	useEffect(() => {
-		if (normalizedValue !== null) return;
-		if (state.value !== null) state.setValue(null);
-		if (dialogState.value !== null) dialogState.setValue(null);
-	}, [
-		normalizedValue,
-		state,
-		dialogState
-	]);
 	const headerProps = {
 		label,
 		tooltipText,
@@ -160,15 +150,7 @@ var DateTimePickerBase = (props) => {
 		calendarState.setFocusedDate(toCalendarDate(currentValue));
 	};
 	const onInputClear = () => {
-		isClearingInputRef.current = true;
 		onChange?.(null);
-		state.setValue(null);
-		dialogState.setValue(null);
-		calendarState.setFocusedDate(today(effectiveTimeZone));
-		if (fireBlurOnChange) handleBlur(null);
-		window.setTimeout(() => {
-			isClearingInputRef.current = false;
-		}, 0);
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
@@ -177,7 +159,6 @@ var DateTimePickerBase = (props) => {
 	};
 	const onInputBlur = (e) => {
 		if (!isTimeOptional) return;
-		if (isClearingInputRef.current) return;
 		if (state.value) {
 			dialogState.setValue(state.value);
 			return;
@@ -398,7 +379,7 @@ var DateTimePicker = (t0) => {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
 					value: field.value ?? null,
-					onChange: (value) => field.onChange(value ?? null),
+					onChange: field.onChange,
 					onBlur: field.onBlur,
 					isDirty,
 					isDisabled: field.disabled || props.isDisabled,

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

@@ -22,7 +22,7 @@ import { DateTime } from "luxon";
 import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
-	const $ = c(142);
+	const $ = c(136);
 	const ui = UIConfig.useConfig();
 	let asProp;
 	let className;
@@ -209,156 +209,131 @@ var TimePickerBase = (props) => {
 	} else t7 = $[56];
 	const state = useTimeFieldState(t7);
 	let t8;
-	let t9;
-	if ($[57] !== dialogState || $[58] !== normalizedValue || $[59] !== state) {
+	if ($[57] !== onChange || $[58] !== state.timeValue) {
 		t8 = () => {
-			if (normalizedValue !== null) return;
-			if (state.value !== null) state.setValue(null);
-			if (dialogState.value !== null) dialogState.setValue(null);
-		};
-		t9 = [
-			normalizedValue,
-			state,
-			dialogState
-		];
-		$[57] = dialogState;
-		$[58] = normalizedValue;
-		$[59] = state;
-		$[60] = t8;
-		$[61] = t9;
-	} else {
-		t8 = $[60];
-		t9 = $[61];
-	}
-	useEffect(t8, t9);
-	let t10;
-	if ($[62] !== onChange || $[63] !== state.timeValue) {
-		t10 = () => {
 			if (initialDateEmitRef.current) {
 				initialDateEmitRef.current = false;
 				return;
 			}
 			if (state.timeValue) onChange?.(state.timeValue);
 		};
-		$[62] = onChange;
-		$[63] = state.timeValue;
-		$[64] = t10;
-	} else t10 = $[64];
-	let t11;
-	if ($[65] !== rest.date) {
-		t11 = [rest.date];
-		$[65] = rest.date;
-		$[66] = t11;
-	} else t11 = $[66];
-	useEffect(t10, t11);
+		$[57] = onChange;
+		$[58] = state.timeValue;
+		$[59] = t8;
+	} else t8 = $[59];
+	let t9;
+	if ($[60] !== rest.date) {
+		t9 = [rest.date];
+		$[60] = rest.date;
+		$[61] = t9;
+	} else t9 = $[61];
+	useEffect(t8, t9);
 	const timeFieldRef = useRef(null);
-	let t12;
-	if ($[67] !== disableManualEntry || $[68] !== label || $[69] !== rest) {
-		t12 = {
+	let t10;
+	if ($[62] !== disableManualEntry || $[63] !== label || $[64] !== rest) {
+		t10 = {
 			...rest,
 			label,
 			isReadOnly: disableManualEntry
 		};
-		$[67] = disableManualEntry;
-		$[68] = label;
-		$[69] = rest;
-		$[70] = t12;
-	} else t12 = $[70];
-	const { labelProps, fieldProps } = useTimeField(t12, state, timeFieldRef);
-	const t13 = hideLabel || isHeaderHidden;
-	let t14;
-	if ($[71] !== headerClassName || $[72] !== helperText || $[73] !== isDisabled || $[74] !== isRequired || $[75] !== label || $[76] !== labelProps || $[77] !== rightContent || $[78] !== t13 || $[79] !== tooltipText) {
-		t14 = {
+		$[62] = disableManualEntry;
+		$[63] = label;
+		$[64] = rest;
+		$[65] = t10;
+	} else t10 = $[65];
+	const { labelProps, fieldProps } = useTimeField(t10, state, timeFieldRef);
+	const t11 = hideLabel || isHeaderHidden;
+	let t12;
+	if ($[66] !== headerClassName || $[67] !== helperText || $[68] !== isDisabled || $[69] !== isRequired || $[70] !== label || $[71] !== labelProps || $[72] !== rightContent || $[73] !== t11 || $[74] !== tooltipText) {
+		t12 = {
 			label,
 			tooltipText,
 			helperText,
 			isRequired,
 			rightContent,
-			isHeaderHidden: t13,
+			isHeaderHidden: t11,
 			isDisabled,
 			className: headerClassName,
 			labelProps
 		};
-		$[71] = headerClassName;
-		$[72] = helperText;
-		$[73] = isDisabled;
-		$[74] = isRequired;
-		$[75] = label;
-		$[76] = labelProps;
-		$[77] = rightContent;
-		$[78] = t13;
-		$[79] = tooltipText;
-		$[80] = t14;
-	} else t14 = $[80];
-	const headerProps = t14;
-	let t15;
-	if ($[81] !== dialogState.value || $[82] !== fireBlurOnChange || $[83] !== handleBlur || $[84] !== state) {
-		t15 = () => {
+		$[66] = headerClassName;
+		$[67] = helperText;
+		$[68] = isDisabled;
+		$[69] = isRequired;
+		$[70] = label;
+		$[71] = labelProps;
+		$[72] = rightContent;
+		$[73] = t11;
+		$[74] = tooltipText;
+		$[75] = t12;
+	} else t12 = $[75];
+	const headerProps = t12;
+	let t13;
+	if ($[76] !== dialogState.value || $[77] !== fireBlurOnChange || $[78] !== handleBlur || $[79] !== state) {
+		t13 = () => {
 			const newValue = dialogState.value;
 			state.setValue(newValue);
 			setIsOpen(false);
 			if (fireBlurOnChange) handleBlur(newValue);
 		};
-		$[81] = dialogState.value;
-		$[82] = fireBlurOnChange;
-		$[83] = handleBlur;
-		$[84] = state;
-		$[85] = t15;
-	} else t15 = $[85];
-	const onApply = t15;
-	let t16;
-	if ($[86] !== dialogState || $[87] !== isOpen || $[88] !== state.value) {
-		t16 = (open) => {
+		$[76] = dialogState.value;
+		$[77] = fireBlurOnChange;
+		$[78] = handleBlur;
+		$[79] = state;
+		$[80] = t13;
+	} else t13 = $[80];
+	const onApply = t13;
+	let t14;
+	if ($[81] !== dialogState || $[82] !== isOpen || $[83] !== state.value) {
+		t14 = (open) => {
 			setIsOpen(open);
 			if (!isOpen) dialogState.setValue(state.value);
 		};
-		$[86] = dialogState;
-		$[87] = isOpen;
-		$[88] = state.value;
-		$[89] = t16;
-	} else t16 = $[89];
-	const onOpenChange = t16;
-	let t17;
-	if ($[90] !== dialogState || $[91] !== state.value) {
-		t17 = () => {
+		$[81] = dialogState;
+		$[82] = isOpen;
+		$[83] = state.value;
+		$[84] = t14;
+	} else t14 = $[84];
+	const onOpenChange = t14;
+	let t15;
+	if ($[85] !== dialogState || $[86] !== state.value) {
+		t15 = () => {
 			dialogState.setValue(state.value);
 			setIsOpen(true);
 		};
-		$[90] = dialogState;
-		$[91] = state.value;
-		$[92] = t17;
-	} else t17 = $[92];
-	const onOpen = t17;
-	let t18;
-	if ($[93] !== dialogState || $[94] !== onChange) {
-		t18 = () => {
+		$[85] = dialogState;
+		$[86] = state.value;
+		$[87] = t15;
+	} else t15 = $[87];
+	const onOpen = t15;
+	let t16;
+	if ($[88] !== onChange) {
+		t16 = () => {
 			onChange?.(null);
-			dialogState.setValue(null);
 		};
-		$[93] = dialogState;
-		$[94] = onChange;
-		$[95] = t18;
-	} else t18 = $[95];
-	const onInputClear = t18;
+		$[88] = onChange;
+		$[89] = t16;
+	} else t16 = $[89];
+	const onInputClear = t16;
+	const t17 = as === "inline" ? -1 : void 0;
+	let t18;
+	if ($[90] !== className) {
+		t18 = clsx("relative inline-flex w-full flex-col text-left", className);
+		$[90] = className;
+		$[91] = t18;
+	} else t18 = $[91];
 	const t19 = as === "inline" ? -1 : void 0;
 	let t20;
-	if ($[96] !== className) {
-		t20 = clsx("relative inline-flex w-full flex-col text-left", className);
-		$[96] = className;
-		$[97] = t20;
-	} else t20 = $[97];
-	const t21 = as === "inline" ? -1 : void 0;
+	if ($[92] !== ref) {
+		t20 = mergeRefs(ref, timeFieldRef);
+		$[92] = ref;
+		$[93] = t20;
+	} else t20 = $[93];
+	const t21 = !!error;
 	let t22;
-	if ($[98] !== ref) {
-		t22 = mergeRefs(ref, timeFieldRef);
-		$[98] = ref;
-		$[99] = t22;
-	} else t22 = $[99];
-	const t23 = !!error;
-	let t24;
-	if ($[100] !== as || $[101] !== disableDropdown || $[102] !== disableManualEntry || $[103] !== fieldProps || $[104] !== fireBlurOnChange || $[105] !== headerProps || $[106] !== inputClassName || $[107] !== isClearable || $[108] !== isDirty || $[109] !== isDisabled || $[110] !== isRequired || $[111] !== onInputClear || $[112] !== onOpen || $[113] !== placeholder || $[114] !== size || $[115] !== state || $[116] !== t22 || $[117] !== t23 || $[118] !== variant) {
-		t24 = /* @__PURE__ */ jsx(TimePickerInput, {
-			ref: t22,
+	if ($[94] !== as || $[95] !== disableDropdown || $[96] !== disableManualEntry || $[97] !== fieldProps || $[98] !== fireBlurOnChange || $[99] !== headerProps || $[100] !== inputClassName || $[101] !== isClearable || $[102] !== isDirty || $[103] !== isDisabled || $[104] !== isRequired || $[105] !== onInputClear || $[106] !== onOpen || $[107] !== placeholder || $[108] !== size || $[109] !== state || $[110] !== t20 || $[111] !== t21 || $[112] !== variant) {
+		t22 = /* @__PURE__ */ jsx(TimePickerInput, {
+			ref: t20,
 			as,
 			fieldProps,
 			state,
@@ -366,7 +341,7 @@ var TimePickerBase = (props) => {
 			isDisabled,
 			isDirty,
 			isRequired,
-			isInvalid: t23,
+			isInvalid: t21,
 			disableDropdown,
 			variant,
 			size,
@@ -378,30 +353,30 @@ var TimePickerBase = (props) => {
 			onClear: onInputClear,
 			fireBlurOnChange
 		});
-		$[100] = as;
-		$[101] = disableDropdown;
-		$[102] = disableManualEntry;
-		$[103] = fieldProps;
-		$[104] = fireBlurOnChange;
-		$[105] = headerProps;
-		$[106] = inputClassName;
-		$[107] = isClearable;
-		$[108] = isDirty;
-		$[109] = isDisabled;
-		$[110] = isRequired;
-		$[111] = onInputClear;
-		$[112] = onOpen;
-		$[113] = placeholder;
-		$[114] = size;
-		$[115] = state;
-		$[116] = t22;
-		$[117] = t23;
-		$[118] = variant;
-		$[119] = t24;
-	} else t24 = $[119];
-	let t25;
-	if ($[120] !== dialogState || $[121] !== disableDropdown || $[122] !== disableManualEntry || $[123] !== isDisabled || $[124] !== isOpen || $[125] !== label || $[126] !== onApply || $[127] !== onOpenChange) {
-		t25 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+		$[94] = as;
+		$[95] = disableDropdown;
+		$[96] = disableManualEntry;
+		$[97] = fieldProps;
+		$[98] = fireBlurOnChange;
+		$[99] = headerProps;
+		$[100] = inputClassName;
+		$[101] = isClearable;
+		$[102] = isDirty;
+		$[103] = isDisabled;
+		$[104] = isRequired;
+		$[105] = onInputClear;
+		$[106] = onOpen;
+		$[107] = placeholder;
+		$[108] = size;
+		$[109] = state;
+		$[110] = t20;
+		$[111] = t21;
+		$[112] = variant;
+		$[113] = t22;
+	} else t22 = $[113];
+	let t23;
+	if ($[114] !== dialogState || $[115] !== disableDropdown || $[116] !== disableManualEntry || $[117] !== isDisabled || $[118] !== isOpen || $[119] !== label || $[120] !== onApply || $[121] !== onOpenChange) {
+		t23 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 			footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 				isDisabled,
 				onApply,
@@ -413,50 +388,50 @@ var TimePickerBase = (props) => {
 			onOpenChange,
 			children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
 		});
-		$[120] = dialogState;
-		$[121] = disableDropdown;
-		$[122] = disableManualEntry;
-		$[123] = isDisabled;
-		$[124] = isOpen;
-		$[125] = label;
-		$[126] = onApply;
-		$[127] = onOpenChange;
-		$[128] = t25;
-	} else t25 = $[128];
-	let t26;
-	if ($[129] !== as || $[130] !== formFieldProps || $[131] !== labelProps || $[132] !== t20 || $[133] !== t21 || $[134] !== t24 || $[135] !== t25) {
-		t26 = /* @__PURE__ */ jsxs(FormField, {
+		$[114] = dialogState;
+		$[115] = disableDropdown;
+		$[116] = disableManualEntry;
+		$[117] = isDisabled;
+		$[118] = isOpen;
+		$[119] = label;
+		$[120] = onApply;
+		$[121] = onOpenChange;
+		$[122] = t23;
+	} else t23 = $[122];
+	let t24;
+	if ($[123] !== as || $[124] !== formFieldProps || $[125] !== labelProps || $[126] !== t18 || $[127] !== t19 || $[128] !== t22 || $[129] !== t23) {
+		t24 = /* @__PURE__ */ jsxs(FormField, {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: t20,
-			tabIndex: t21,
-			children: [t24, t25]
+			className: t18,
+			tabIndex: t19,
+			children: [t22, t23]
 		});
-		$[129] = as;
-		$[130] = formFieldProps;
-		$[131] = labelProps;
-		$[132] = t20;
-		$[133] = t21;
-		$[134] = t24;
-		$[135] = t25;
-		$[136] = t26;
-	} else t26 = $[136];
-	let t27;
-	if ($[137] !== as || $[138] !== error || $[139] !== t19 || $[140] !== t26) {
-		t27 = /* @__PURE__ */ jsx(TooltipWrapper, {
+		$[123] = as;
+		$[124] = formFieldProps;
+		$[125] = labelProps;
+		$[126] = t18;
+		$[127] = t19;
+		$[128] = t22;
+		$[129] = t23;
+		$[130] = t24;
+	} else t24 = $[130];
+	let t25;
+	if ($[131] !== as || $[132] !== error || $[133] !== t17 || $[134] !== t24) {
+		t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
-			triggerTabIndex: t19,
-			children: t26
+			triggerTabIndex: t17,
+			children: t24
 		});
-		$[137] = as;
-		$[138] = error;
-		$[139] = t19;
-		$[140] = t26;
-		$[141] = t27;
-	} else t27 = $[141];
-	return t27;
+		$[131] = as;
+		$[132] = error;
+		$[133] = t17;
+		$[134] = t24;
+		$[135] = t25;
+	} else t25 = $[135];
+	return t25;
 };
 var TimePickerInner = (t0) => {
 	const $ = c(9);
@@ -584,7 +559,7 @@ var TimePicker = (t0) => {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
 					value: field.value ?? null,
-					onChange: (value) => field.onChange(value ?? null),
+					onChange: field.onChange,
 					onBlur: field.onBlur,
 					isDirty,
 					isDisabled: field.disabled || props.isDisabled,

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -85,12 +85,14 @@ var DatePickerInput = (t0) => {
 		t11 = () => {
 			dateFieldRef.current?.clearField();
 			endDateFieldRef.current?.clearField();
-			fieldProps.onChange?.(null);
-			endFieldProps?.onChange?.(null);
 			if (onClearProp) onClearProp();
-			else if (fireBlurOnChange) {
-				fieldProps.onBlur?.(null);
-				endFieldProps?.onBlur?.(null);
+			else {
+				fieldProps.onChange?.(null);
+				endFieldProps?.onChange?.(null);
+				if (fireBlurOnChange) {
+					fieldProps.onBlur?.(null);
+					endFieldProps?.onBlur?.(null);
+				}
 			}
 			setCanClear(false);
 		};

package/dist/components/inputs/shared/InputClear.js

@@ -47,7 +47,7 @@ var InputClear = (t0) => {
 	return t1;
 };
 var InputClearButton = (t0) => {
-	const $ = c(13);
+	const $ = c(10);
 	const { onClear, className, style, show } = t0;
 	const { t } = useTranslation("ui");
 	const t1 = !show && "invisible!";
@@ -65,35 +65,23 @@ var InputClearButton = (t0) => {
 		$[4] = t3;
 	} else t3 = $[4];
 	let t4;
-	if ($[5] !== onClear) {
-		t4 = (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			onClear();
-		};
-		$[5] = onClear;
-		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== onClear || $[8] !== style || $[9] !== t2 || $[10] !== t3 || $[11] !== t4) {
-		t5 = /* @__PURE__ */ jsx(InlineIconButton, {
+	if ($[5] !== onClear || $[6] !== style || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(InlineIconButton, {
 			color: "secondary",
 			className: t2,
 			label: t3,
 			icon: CloseIcon,
 			onPress: onClear,
-			onPointerDown: t4,
 			excludeFromTabOrder: true,
 			style
 		});
-		$[7] = onClear;
-		$[8] = style;
-		$[9] = t2;
-		$[10] = t3;
-		$[11] = t4;
-		$[12] = t5;
-	} else t5 = $[12];
-	return t5;
+		$[5] = onClear;
+		$[6] = style;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 };
 function _temp($) {
 	return $.ui.clearAlt;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.3.0-rc.36",
+  "version": "2.3.0-rc.37",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",