@povio/ui 3.4.0-rc.1 → 3.4.0-rc.2

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

@@ -340,6 +340,7 @@ var DatePickerInner = ({ fullIso = true, granularity = "day", minValue, maxValue
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
+			onClear: () => props.onChange?.(null),
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -394,7 +395,7 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 				...innerProps,
 				ref: mergeRefs(ref, field_0.ref),
 				value: field_0.value ?? null,
-				onChange: field_0.onChange,
+				onChange: (value) => field_0.onChange(value ?? null),
 				onBlur: field_0.onBlur,
 				isDirty,
 				isDisabled: field_0.disabled || props.isDisabled,

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

@@ -804,6 +804,7 @@ var DateRangePickerInner = ({ fullIso = true, minValue, maxValue, renderStaticIn
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
+			onClear: () => props.onChange?.(null),
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -857,7 +858,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				...innerProps,
 				ref: mergeRefs(ref, field_0.ref),
 				value: field_0.value ?? null,
-				onChange: field_0.onChange,
+				onChange: (value) => field_0.onChange(value ?? null),
 				onBlur: field_0.onBlur,
 				isDirty,
 				isDisabled: field_0.disabled || props.isDisabled,

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

@@ -122,9 +122,10 @@ var DateTimePickerBase = (props) => {
 		labelProps
 	};
 	const onApply = () => {
-		const newValue = dialogState.value;
-		state.setValue(newValue);
-		state.toggle();
+		const newValue = dialogState.value ?? null;
+		onChange?.(newValue);
+		dialogState.setValue(newValue);
+		state.close();
 	};
 	const onMonthYearChange = (selectedDate) => {
 		if (!shouldUpdateDateOnMonthYearChange) return;
@@ -307,6 +308,7 @@ var DateTimePickerInner = ({ fullIso: _fullIso = true, renderStaticInput, isForm
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
+			onClear: () => props.onChange?.(null),
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx(props.shouldShrinkInput ? "min-w-0" : "min-w-input-width-min-width", props.inputClassName),
@@ -359,7 +361,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 				...innerProps,
 				ref: mergeRefs(ref, field_0.ref),
 				value: field_0.value ?? null,
-				onChange: field_0.onChange,
+				onChange: (value) => field_0.onChange(value ?? null),
 				onBlur: field_0.onBlur,
 				isDirty,
 				isDisabled: field_0.disabled || props.isDisabled,

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

@@ -494,6 +494,7 @@ var TimePickerInner = (t0) => {
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
+			onClear: () => props.onChange?.(null),
 			isDisabled,
 			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
@@ -589,7 +590,7 @@ var TimePicker = (t0) => {
 					...innerProps,
 					ref: mergeRefs(ref, field_0.ref),
 					value: field_0.value ?? null,
-					onChange: field_0.onChange,
+					onChange: (value) => field_0.onChange(value ?? null),
 					onBlur: field_0.onBlur,
 					isDirty,
 					isDisabled: field_0.disabled || props.isDisabled,

package/dist/components/inputs/DateTime/shared/DateField.d.ts

@@ -15,6 +15,7 @@ interface DateFieldProps extends Omit<DateFieldStateOptions, "locale" | "createC
     timeZone?: string;
     segmentGroup?: string;
     shouldAutoFixYear?: boolean;
+    preserveNullValue?: boolean;
 }
-export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, shouldAutoFixYear, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateField: ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity, isTimeOptional, format, timeZone, segmentGroup, shouldAutoFixYear, preserveNullValue, ...props }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -9,10 +9,10 @@ import { DateTime } from "luxon";
 import { useDateFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/shared/DateField.tsx
 var omitNullValue = ({ value: _value, ...props }) => props;
-var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, ...props }) => {
+var DateField = ({ ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity = "day", isTimeOptional = false, format, timeZone, segmentGroup, shouldAutoFixYear = false, preserveNullValue = false, ...props }) => {
 	const { locale } = useLocale();
 	const previousValueRef = useRef(props.value);
-	const dateFieldProps = props.value == null ? omitNullValue(props) : props;
+	const dateFieldProps = props.value == null && !preserveNullValue ? omitNullValue(props) : props;
 	const state = useDateFieldState({
 		...dateFieldProps,
 		isDisabled,

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

@@ -51,10 +51,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 		shouldAutoFixYear: autoFixYear
 	} : void 0;
 	const clearInput = useCallback(() => {
-		dateFieldRef.current?.clearField();
-		endDateFieldRef.current?.clearField();
 		if (onClearProp) onClearProp();
 		else {
+			dateFieldRef.current?.clearField();
+			endDateFieldRef.current?.clearField();
 			fieldProps.onChange?.(null);
 			endFieldProps?.onChange?.(null);
 		}
@@ -150,6 +150,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldVa
 							disableManualEntry,
 							dateGranularity,
 							isTimeOptional,
+							preserveNullValue: isValueControlled && !endFieldProps,
 							format,
 							timeZone: effectiveTimeZone,
 							segmentGroup: normalizedEndFieldProps ? "start" : void 0

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

@@ -150,8 +150,8 @@ var TimePickerInput = (t0) => {
 	if ($[33] !== canClear || $[34] !== isClearable || $[35] !== onClear || $[36] !== state) {
 		t23 = isClearable && /* @__PURE__ */ jsx(InputClear, {
 			onClear: () => {
-				state.setValue(null);
-				onClear?.();
+				if (onClear) onClear();
+				else state.setValue(null);
 			},
 			show: canClear
 		});

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -152,6 +152,7 @@ var InputFrame = (props) => {
 	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
 	const shouldReplayStaticPress = (target) => staticPressTarget === "frame" || target instanceof Element && !!target.closest("[data-static-press-action]");
 	const isStaticPressActionTarget = (target_0) => target_0 instanceof Element && !!target_0.closest("[data-static-press-action]");
+	const isStaticClearActionTarget = (target_1) => target_1 instanceof Element && !!target_1.closest("[data-static-clear-action]");
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
 		error,
@@ -170,7 +171,7 @@ var InputFrame = (props) => {
 			},
 			onFocusCapture: (event_0) => {
 				onFocusCapture?.(event_0);
-				if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_0.target);
+				if (pendingStaticPressPointerIdRef.current == null && !isStaticClearActionTarget(event_0.target)) onStaticInteract?.(true, event_0.target);
 			},
 			children: /* @__PURE__ */ jsx("div", {
 				ref,
@@ -181,9 +182,10 @@ var InputFrame = (props) => {
 				}), inputClassName),
 				tabIndex: isDisabled ? -1 : 0,
 				onFocus: (event_1) => {
-					if (pendingStaticPressPointerIdRef.current == null) onStaticInteract?.(true, event_1.target);
+					if (pendingStaticPressPointerIdRef.current == null && !isStaticClearActionTarget(event_1.target)) onStaticInteract?.(true, event_1.target);
 				},
 				onClick: (event_2) => {
+					if (isStaticClearActionTarget(event_2.target)) return;
 					if (onStaticPress && shouldReplayStaticPress(event_2.target)) {
 						onStaticPress();
 						return;
@@ -194,6 +196,7 @@ var InputFrame = (props) => {
 					if (onStaticPress && shouldReplayStaticPress(event_3.target) || isStaticPressActionTarget(event_3.target)) pendingStaticPressPointerIdRef.current = event_3.pointerId;
 				},
 				onPointerDown: (event_4) => {
+					if (isStaticClearActionTarget(event_4.target)) return;
 					if (pendingStaticPressPointerIdRef.current === event_4.pointerId) return;
 					if (onStaticPress && shouldReplayStaticPress(event_4.target)) {
 						pendingStaticPressPointerIdRef.current = event_4.pointerId;

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

@@ -8,56 +8,68 @@ import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = (t0) => {
-	const $ = c(12);
+	const $ = c(16);
 	const { onClear, className, style, show, renderStatic } = t0;
-	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
+	const ui = UIConfig.useConfig();
+	const { t } = useTranslation("ui");
+	const alwaysShowClear = ui.input.alwaysShowClear;
 	let clearClassName;
 	let t1;
-	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
+	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== onClear || $[3] !== renderStatic || $[4] !== show || $[5] !== style || $[6] !== t) {
 		t1 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			clearClassName = clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className);
 			if (renderStatic) {
 				let t2;
-				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
-					$[7] = t2;
-				} else t2 = $[7];
+				if ($[9] !== t) {
+					t2 = t(_temp);
+					$[9] = t;
+					$[10] = t2;
+				} else t2 = $[10];
+				let t3;
+				if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+					t3 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
+					$[11] = t3;
+				} else t3 = $[11];
 				t1 = /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-hidden": "true",
+					"aria-label": t2,
+					"data-static-clear-action": true,
 					tabIndex: -1,
+					onClick: onClear,
 					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
 					style,
-					children: t2
+					children: t3
 				});
 				break bb0;
 			}
 		}
 		$[0] = alwaysShowClear;
 		$[1] = className;
-		$[2] = renderStatic;
-		$[3] = show;
-		$[4] = style;
-		$[5] = clearClassName;
-		$[6] = t1;
+		$[2] = onClear;
+		$[3] = renderStatic;
+		$[4] = show;
+		$[5] = style;
+		$[6] = t;
+		$[7] = clearClassName;
+		$[8] = t1;
 	} else {
-		clearClassName = $[5];
-		t1 = $[6];
+		clearClassName = $[7];
+		t1 = $[8];
 	}
 	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
 	let t2;
-	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
+	if ($[12] !== clearClassName || $[13] !== onClear || $[14] !== style) {
 		t2 = /* @__PURE__ */ jsx(InputClearButton, {
 			onClear,
 			className: clearClassName,
 			style
 		});
-		$[8] = clearClassName;
-		$[9] = onClear;
-		$[10] = style;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[12] = clearClassName;
+		$[13] = onClear;
+		$[14] = style;
+		$[15] = t2;
+	} else t2 = $[15];
 	return t2;
 };
 var InputClearButton = (t0) => {
@@ -66,7 +78,7 @@ var InputClearButton = (t0) => {
 	const { t } = useTranslation("ui");
 	let t1;
 	if ($[0] !== t) {
-		t1 = t(_temp);
+		t1 = t(_temp2);
 		$[0] = t;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -78,7 +90,7 @@ var InputClearButton = (t0) => {
 			label: t1,
 			icon: CloseIcon,
 			onPress: onClear,
-			onMouseDown: _temp2,
+			onMouseDown: _temp3,
 			excludeFromTabOrder: true,
 			style
 		});
@@ -93,7 +105,10 @@ var InputClearButton = (t0) => {
 function _temp($) {
 	return $.ui.clearAlt;
 }
-function _temp2(e) {
+function _temp2($) {
+	return $.ui.clearAlt;
+}
+function _temp3(e) {
 	return e.preventDefault();
 }
 //#endregion

package/package.json

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