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

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

@@ -122,6 +122,15 @@ 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,
@@ -462,8 +471,8 @@ var DatePicker = (t0) => {
 				return /* @__PURE__ */ jsx(DatePickerInner, {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
+					value: field.value ?? null,
+					onChange: (value) => field.onChange(value ?? null),
 					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, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, 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,6 +183,27 @@ 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);
@@ -798,8 +819,8 @@ var DateRangePicker = (t0) => {
 				return /* @__PURE__ */ jsx(DateRangePickerInner, {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
+					value: field.value ?? null,
+					onChange: (value) => field.onChange(value ?? null),
 					onBlur: field.onBlur,
 					isDirty,
 					isDisabled: field.disabled || props.isDisabled,

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

@@ -113,6 +113,15 @@ 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,
@@ -388,8 +397,8 @@ var DateTimePicker = (t0) => {
 				return /* @__PURE__ */ jsx(DateTimePickerInner, {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
+					value: field.value ?? null,
+					onChange: (value) => field.onChange(value ?? null),
 					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(142);
 	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,163 +180,185 @@ 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);
+		$[53] = normalizedValue;
+		$[54] = rest;
+		$[55] = t6;
+		$[56] = t7;
+	} else t7 = $[56];
+	const state = useTimeFieldState(t7);
+	let t8;
 	let t9;
-	if ($[57] !== onChange || $[58] !== state.timeValue) {
-		t9 = () => {
+	if ($[57] !== dialogState || $[58] !== normalizedValue || $[59] !== state) {
+		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);
 		};
-		$[57] = onChange;
-		$[58] = state.timeValue;
-		$[59] = t9;
-	} else t9 = $[59];
-	let t10;
-	if ($[60] !== rest.date) {
-		t10 = [rest.date];
-		$[60] = rest.date;
-		$[61] = t10;
-	} else t10 = $[61];
-	useEffect(t9, t10);
-	const timeFieldRef = useRef(null);
+		$[62] = onChange;
+		$[63] = state.timeValue;
+		$[64] = t10;
+	} else t10 = $[64];
 	let t11;
-	if ($[62] !== disableManualEntry || $[63] !== label || $[64] !== rest) {
-		t11 = {
+	if ($[65] !== rest.date) {
+		t11 = [rest.date];
+		$[65] = rest.date;
+		$[66] = t11;
+	} else t11 = $[66];
+	useEffect(t10, t11);
+	const timeFieldRef = useRef(null);
+	let t12;
+	if ($[67] !== disableManualEntry || $[68] !== label || $[69] !== rest) {
+		t12 = {
 			...rest,
 			label,
 			isReadOnly: disableManualEntry
 		};
-		$[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 = {
+		$[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 = {
 			label,
 			tooltipText,
 			helperText,
 			isRequired,
 			rightContent,
-			isHeaderHidden: t12,
+			isHeaderHidden: t13,
 			isDisabled,
 			className: headerClassName,
 			labelProps
 		};
-		$[66] = headerClassName;
-		$[67] = helperText;
-		$[68] = isDisabled;
-		$[69] = isRequired;
-		$[70] = label;
-		$[71] = labelProps;
-		$[72] = rightContent;
-		$[73] = t12;
-		$[74] = tooltipText;
-		$[75] = t13;
-	} else t13 = $[75];
-	const headerProps = t13;
-	let t14;
-	if ($[76] !== dialogState.value || $[77] !== fireBlurOnChange || $[78] !== handleBlur || $[79] !== state) {
-		t14 = () => {
+		$[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 = () => {
 			const newValue = dialogState.value;
 			state.setValue(newValue);
 			setIsOpen(false);
 			if (fireBlurOnChange) handleBlur(newValue);
 		};
-		$[76] = dialogState.value;
-		$[77] = fireBlurOnChange;
-		$[78] = handleBlur;
-		$[79] = state;
-		$[80] = t14;
-	} else t14 = $[80];
-	const onApply = t14;
-	let t15;
-	if ($[81] !== dialogState || $[82] !== isOpen || $[83] !== state.value) {
-		t15 = (open) => {
+		$[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) => {
 			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;
-	if ($[85] !== dialogState || $[86] !== state.value) {
-		t16 = () => {
+		$[86] = dialogState;
+		$[87] = isOpen;
+		$[88] = state.value;
+		$[89] = t16;
+	} else t16 = $[89];
+	const onOpenChange = t16;
+	let t17;
+	if ($[90] !== dialogState || $[91] !== state.value) {
+		t17 = () => {
 			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 = () => {
+		$[90] = dialogState;
+		$[91] = state.value;
+		$[92] = t17;
+	} else t17 = $[92];
+	const onOpen = t17;
+	let t18;
+	if ($[93] !== dialogState || $[94] !== onChange) {
+		t18 = () => {
 			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,
+		$[93] = dialogState;
+		$[94] = onChange;
+		$[95] = t18;
+	} else t18 = $[95];
+	const onInputClear = t18;
+	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;
+	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,
 			as,
 			fieldProps,
 			state,
@@ -343,7 +366,7 @@ var TimePickerBase = (props) => {
 			isDisabled,
 			isDirty,
 			isRequired,
-			isInvalid: t22,
+			isInvalid: t23,
 			disableDropdown,
 			variant,
 			size,
@@ -355,30 +378,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;
-		$[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, {
+		$[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, {
 			footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 				isDisabled,
 				onApply,
@@ -390,50 +413,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, {
+		$[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, {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: t19,
-			tabIndex: t20,
-			children: [t23, t24]
+			className: t20,
+			tabIndex: t21,
+			children: [t24, t25]
 		});
-		$[124] = as;
-		$[125] = formFieldProps;
-		$[126] = labelProps;
-		$[127] = t19;
-		$[128] = t20;
-		$[129] = t23;
-		$[130] = t24;
-		$[131] = t25;
-	} else t25 = $[131];
-	let t26;
-	if ($[132] !== as || $[133] !== error || $[134] !== t18 || $[135] !== t25) {
-		t26 = /* @__PURE__ */ jsx(TooltipWrapper, {
-			as,
-			error,
-			triggerTabIndex: t18,
-			children: t25
-		});
-		$[132] = as;
-		$[133] = error;
-		$[134] = t18;
+		$[129] = as;
+		$[130] = formFieldProps;
+		$[131] = labelProps;
+		$[132] = t20;
+		$[133] = t21;
+		$[134] = t24;
 		$[135] = t25;
 		$[136] = t26;
 	} else t26 = $[136];
-	return t26;
+	let t27;
+	if ($[137] !== as || $[138] !== error || $[139] !== t19 || $[140] !== t26) {
+		t27 = /* @__PURE__ */ jsx(TooltipWrapper, {
+			as,
+			error,
+			triggerTabIndex: t19,
+			children: t26
+		});
+		$[137] = as;
+		$[138] = error;
+		$[139] = t19;
+		$[140] = t26;
+		$[141] = t27;
+	} else t27 = $[141];
+	return t27;
 };
 var TimePickerInner = (t0) => {
 	const $ = c(9);
@@ -560,8 +583,8 @@ var TimePicker = (t0) => {
 				return /* @__PURE__ */ jsx(TimePickerInner, {
 					...innerProps,
 					ref: mergeRefs(ref, field.ref),
-					value: field.value,
-					onChange: field.onChange,
+					value: field.value ?? null,
+					onChange: (value) => field.onChange(value ?? null),
 					onBlur: field.onBlur,
 					isDirty,
 					isDisabled: field.disabled || props.isDisabled,

package/package.json

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