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

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

@@ -158,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;
@@ -463,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

@@ -368,9 +368,6 @@ var DateRangePickerBase = (props) => {
 	};
 	const onInputClear = () => {
 		onChange?.(null);
-		state.setValue(null);
-		handleCalendarStatesChange(null);
-		if (fireBlurOnChange) handleBlur(null);
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
@@ -799,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;
 	} }), []);
@@ -151,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();
@@ -168,7 +159,6 @@ var DateTimePickerBase = (props) => {
 	};
 	const onInputBlur = (e) => {
 		if (!isTimeOptional) return;
-		if (isClearingInputRef.current) return;
 		if (state.value) {
 			dialogState.setValue(state.value);
 			return;
@@ -389,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(137);
+	const $ = c(136);
 	const ui = UIConfig.useConfig();
 	let asProp;
 	let className;
@@ -150,7 +150,8 @@ var TimePickerBase = (props) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const initialDateEmitRef = useRef(true);
 	const { locale } = useLocale();
-	const t2 = value ?? rest.defaultValue ?? null;
+	const normalizedValue = value ?? null;
+	const t2 = normalizedValue ?? rest.defaultValue ?? null;
 	let t3;
 	if ($[40] !== locale || $[41] !== rest || $[42] !== t2) {
 		t3 = {
@@ -179,38 +180,37 @@ var TimePickerBase = (props) => {
 		$[46] = t5;
 	} else t5 = $[46];
 	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, t5);
-	const t6 = value ?? null;
-	let t7;
+	let t6;
 	if ($[47] !== debouncedBlur || $[48] !== fireBlurOnChange || $[49] !== onChange) {
-		t7 = (val_0) => {
+		t6 = (val_0) => {
 			onChange?.(val_0);
 			if (fireBlurOnChange) debouncedBlur(val_0);
 		};
 		$[47] = debouncedBlur;
 		$[48] = fireBlurOnChange;
 		$[49] = onChange;
-		$[50] = t7;
-	} else t7 = $[50];
-	let t8;
-	if ($[51] !== isDisabled || $[52] !== locale || $[53] !== rest || $[54] !== t6 || $[55] !== t7) {
-		t8 = {
+		$[50] = t6;
+	} else t6 = $[50];
+	let t7;
+	if ($[51] !== isDisabled || $[52] !== locale || $[53] !== normalizedValue || $[54] !== rest || $[55] !== t6) {
+		t7 = {
 			...rest,
 			isDisabled,
-			value: t6,
-			onChange: t7,
+			value: normalizedValue,
+			onChange: t6,
 			locale
 		};
 		$[51] = isDisabled;
 		$[52] = locale;
-		$[53] = rest;
-		$[54] = t6;
-		$[55] = t7;
-		$[56] = t8;
-	} else t8 = $[56];
-	const state = useTimeFieldState(t8);
-	let t9;
+		$[53] = normalizedValue;
+		$[54] = rest;
+		$[55] = t6;
+		$[56] = t7;
+	} else t7 = $[56];
+	const state = useTimeFieldState(t7);
+	let t8;
 	if ($[57] !== onChange || $[58] !== state.timeValue) {
-		t9 = () => {
+		t8 = () => {
 			if (initialDateEmitRef.current) {
 				initialDateEmitRef.current = false;
 				return;
@@ -219,19 +219,19 @@ var TimePickerBase = (props) => {
 		};
 		$[57] = onChange;
 		$[58] = state.timeValue;
-		$[59] = t9;
-	} else t9 = $[59];
-	let t10;
+		$[59] = t8;
+	} else t8 = $[59];
+	let t9;
 	if ($[60] !== rest.date) {
-		t10 = [rest.date];
+		t9 = [rest.date];
 		$[60] = rest.date;
-		$[61] = t10;
-	} else t10 = $[61];
-	useEffect(t9, t10);
+		$[61] = t9;
+	} else t9 = $[61];
+	useEffect(t8, t9);
 	const timeFieldRef = useRef(null);
-	let t11;
+	let t10;
 	if ($[62] !== disableManualEntry || $[63] !== label || $[64] !== rest) {
-		t11 = {
+		t10 = {
 			...rest,
 			label,
 			isReadOnly: disableManualEntry
@@ -239,19 +239,19 @@ var TimePickerBase = (props) => {
 		$[62] = disableManualEntry;
 		$[63] = label;
 		$[64] = rest;
-		$[65] = t11;
-	} else t11 = $[65];
-	const { labelProps, fieldProps } = useTimeField(t11, state, timeFieldRef);
-	const t12 = hideLabel || isHeaderHidden;
-	let t13;
-	if ($[66] !== headerClassName || $[67] !== helperText || $[68] !== isDisabled || $[69] !== isRequired || $[70] !== label || $[71] !== labelProps || $[72] !== rightContent || $[73] !== t12 || $[74] !== tooltipText) {
-		t13 = {
+		$[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: t12,
+			isHeaderHidden: t11,
 			isDisabled,
 			className: headerClassName,
 			labelProps
@@ -263,14 +263,14 @@ var TimePickerBase = (props) => {
 		$[70] = label;
 		$[71] = labelProps;
 		$[72] = rightContent;
-		$[73] = t12;
+		$[73] = t11;
 		$[74] = tooltipText;
-		$[75] = t13;
-	} else t13 = $[75];
-	const headerProps = t13;
-	let t14;
+		$[75] = t12;
+	} else t12 = $[75];
+	const headerProps = t12;
+	let t13;
 	if ($[76] !== dialogState.value || $[77] !== fireBlurOnChange || $[78] !== handleBlur || $[79] !== state) {
-		t14 = () => {
+		t13 = () => {
 			const newValue = dialogState.value;
 			state.setValue(newValue);
 			setIsOpen(false);
@@ -280,62 +280,60 @@ var TimePickerBase = (props) => {
 		$[77] = fireBlurOnChange;
 		$[78] = handleBlur;
 		$[79] = state;
-		$[80] = t14;
-	} else t14 = $[80];
-	const onApply = t14;
-	let t15;
+		$[80] = t13;
+	} else t13 = $[80];
+	const onApply = t13;
+	let t14;
 	if ($[81] !== dialogState || $[82] !== isOpen || $[83] !== state.value) {
-		t15 = (open) => {
+		t14 = (open) => {
 			setIsOpen(open);
 			if (!isOpen) dialogState.setValue(state.value);
 		};
 		$[81] = dialogState;
 		$[82] = isOpen;
 		$[83] = state.value;
-		$[84] = t15;
-	} else t15 = $[84];
-	const onOpenChange = t15;
-	let t16;
+		$[84] = t14;
+	} else t14 = $[84];
+	const onOpenChange = t14;
+	let t15;
 	if ($[85] !== dialogState || $[86] !== state.value) {
-		t16 = () => {
+		t15 = () => {
 			dialogState.setValue(state.value);
 			setIsOpen(true);
 		};
 		$[85] = dialogState;
 		$[86] = state.value;
-		$[87] = t16;
-	} else t16 = $[87];
-	const onOpen = t16;
-	let t17;
-	if ($[88] !== dialogState || $[89] !== onChange) {
-		t17 = () => {
+		$[87] = t15;
+	} else t15 = $[87];
+	const onOpen = t15;
+	let t16;
+	if ($[88] !== onChange) {
+		t16 = () => {
 			onChange?.(null);
-			dialogState.setValue(null);
 		};
-		$[88] = dialogState;
-		$[89] = onChange;
-		$[90] = t17;
-	} else t17 = $[90];
-	const onInputClear = t17;
-	const t18 = as === "inline" ? -1 : void 0;
-	let t19;
-	if ($[91] !== className) {
-		t19 = clsx("relative inline-flex w-full flex-col text-left", className);
-		$[91] = className;
-		$[92] = t19;
-	} else t19 = $[92];
-	const t20 = as === "inline" ? -1 : void 0;
-	let t21;
-	if ($[93] !== ref) {
-		t21 = mergeRefs(ref, timeFieldRef);
-		$[93] = ref;
-		$[94] = t21;
-	} else t21 = $[94];
-	const t22 = !!error;
-	let t23;
-	if ($[95] !== as || $[96] !== disableDropdown || $[97] !== disableManualEntry || $[98] !== fieldProps || $[99] !== fireBlurOnChange || $[100] !== headerProps || $[101] !== inputClassName || $[102] !== isClearable || $[103] !== isDirty || $[104] !== isDisabled || $[105] !== isRequired || $[106] !== onInputClear || $[107] !== onOpen || $[108] !== placeholder || $[109] !== size || $[110] !== state || $[111] !== t21 || $[112] !== t22 || $[113] !== variant) {
-		t23 = /* @__PURE__ */ jsx(TimePickerInput, {
-			ref: t21,
+		$[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 ($[92] !== ref) {
+		t20 = mergeRefs(ref, timeFieldRef);
+		$[92] = ref;
+		$[93] = t20;
+	} else t20 = $[93];
+	const t21 = !!error;
+	let 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,
@@ -343,7 +341,7 @@ var TimePickerBase = (props) => {
 			isDisabled,
 			isDirty,
 			isRequired,
-			isInvalid: t22,
+			isInvalid: t21,
 			disableDropdown,
 			variant,
 			size,
@@ -355,30 +353,30 @@ var TimePickerBase = (props) => {
 			onClear: onInputClear,
 			fireBlurOnChange
 		});
-		$[95] = as;
-		$[96] = disableDropdown;
-		$[97] = disableManualEntry;
-		$[98] = fieldProps;
-		$[99] = fireBlurOnChange;
-		$[100] = headerProps;
-		$[101] = inputClassName;
-		$[102] = isClearable;
-		$[103] = isDirty;
-		$[104] = isDisabled;
-		$[105] = isRequired;
-		$[106] = onInputClear;
-		$[107] = onOpen;
-		$[108] = placeholder;
-		$[109] = size;
-		$[110] = state;
+		$[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] = t22;
-		$[113] = variant;
-		$[114] = t23;
-	} else t23 = $[114];
-	let t24;
-	if ($[115] !== dialogState || $[116] !== disableDropdown || $[117] !== disableManualEntry || $[118] !== isDisabled || $[119] !== isOpen || $[120] !== label || $[121] !== onApply || $[122] !== onOpenChange) {
-		t24 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+		$[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,
@@ -390,50 +388,50 @@ var TimePickerBase = (props) => {
 			onOpenChange,
 			children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
 		});
-		$[115] = dialogState;
-		$[116] = disableDropdown;
-		$[117] = disableManualEntry;
-		$[118] = isDisabled;
-		$[119] = isOpen;
-		$[120] = label;
-		$[121] = onApply;
-		$[122] = onOpenChange;
-		$[123] = t24;
-	} else t24 = $[123];
-	let t25;
-	if ($[124] !== as || $[125] !== formFieldProps || $[126] !== labelProps || $[127] !== t19 || $[128] !== t20 || $[129] !== t23 || $[130] !== t24) {
-		t25 = /* @__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: t19,
-			tabIndex: t20,
-			children: [t23, t24]
+			className: t18,
+			tabIndex: t19,
+			children: [t22, t23]
 		});
-		$[124] = as;
-		$[125] = formFieldProps;
-		$[126] = labelProps;
+		$[123] = as;
+		$[124] = formFieldProps;
+		$[125] = labelProps;
+		$[126] = t18;
 		$[127] = t19;
-		$[128] = t20;
+		$[128] = t22;
 		$[129] = t23;
 		$[130] = t24;
-		$[131] = t25;
-	} else t25 = $[131];
-	let t26;
-	if ($[132] !== as || $[133] !== error || $[134] !== t18 || $[135] !== t25) {
-		t26 = /* @__PURE__ */ jsx(TooltipWrapper, {
+	} else t24 = $[130];
+	let t25;
+	if ($[131] !== as || $[132] !== error || $[133] !== t17 || $[134] !== t24) {
+		t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
-			triggerTabIndex: t18,
-			children: t25
+			triggerTabIndex: t17,
+			children: t24
 		});
-		$[132] = as;
-		$[133] = error;
-		$[134] = t18;
+		$[131] = as;
+		$[132] = error;
+		$[133] = t17;
+		$[134] = t24;
 		$[135] = t25;
-		$[136] = t26;
-	} else t26 = $[136];
-	return t26;
+	} else t25 = $[135];
+	return t25;
 };
 var TimePickerInner = (t0) => {
 	const $ = c(9);
@@ -561,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.35",
+  "version": "2.3.0-rc.37",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",