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

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

@@ -294,7 +294,7 @@ var DatePickerInner = (t0) => {
 	let t5;
 	if ($[5] !== fullIso || $[6] !== normalizeByGranularity) {
 		t5 = (formattedDate) => {
-			if (formattedDate == null) return formattedDate;
+			if (formattedDate == null) return null;
 			if (fullIso) return normalizeByGranularity(DateTimeUtils.fromUTCISOToCalendarDate(formattedDate));
 			const date_1 = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
 			return normalizeByGranularity(toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date_1, "UTC")));

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

@@ -614,7 +614,7 @@ var DateRangePickerInner = (t0) => {
 	let t3;
 	if ($[2] !== fullIso) {
 		t3 = (formattedRange) => {
-			if (!formattedRange?.start || !formattedRange?.end) return formattedRange;
+			if (!formattedRange?.start || !formattedRange?.end) return null;
 			if (fullIso) return {
 				start: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start),
 				end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end)
@@ -635,7 +635,7 @@ var DateRangePickerInner = (t0) => {
 	let t4;
 	if ($[4] !== fullIso) {
 		t4 = (formattedDate) => {
-			if (formattedDate == null) return formattedDate;
+			if (formattedDate == null) return null;
 			if (fullIso) return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
 			const date = DateTime.fromISO(formattedDate, { zone: "UTC" }).toJSDate();
 			return toCalendarDate(DateTimeUtils.fromLocalToZonedDateTime(date, "UTC"));

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

@@ -149,9 +149,6 @@ var DateTimePickerBase = (props) => {
 		dialogState.setValue(currentValue);
 		calendarState.setFocusedDate(toCalendarDate(currentValue));
 	};
-	const onInputClear = () => {
-		onChange?.(null);
-	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
 		calendarState.setFocusedDate(state.value || today(effectiveTimeZone));
@@ -163,7 +160,7 @@ var DateTimePickerBase = (props) => {
 			dialogState.setValue(state.value);
 			return;
 		}
-		const textValue = e?.currentTarget.textContent ?? null;
+		const textValue = e?.currentTarget?.textContent ?? null;
 		const dateTimeValue = DateTimeUtils.formatTextDateToCalendarDateTime(textValue, effectiveTimeZone, locale);
 		if (dateTimeValue) {
 			state.setValue(dateTimeValue);
@@ -217,8 +214,7 @@ var DateTimePickerBase = (props) => {
 				timeZone: effectiveTimeZone,
 				isTimeOptional,
 				format,
-				fireBlurOnChange,
-				onClear: onInputClear
+				fireBlurOnChange
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,
@@ -435,7 +431,7 @@ function _temp2(dateValue) {
 	return DateTimeUtils.fromDateValueFieldsToUTCISO(dateValue);
 }
 function _temp3(isoString) {
-	if (isoString == null) return isoString;
+	if (isoString == null) return null;
 	return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, "UTC");
 }
 //#endregion

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

@@ -606,7 +606,7 @@ function _temp(input) {
 	return input.querySelector("input, button, [tabindex]:not([tabindex='-1'])");
 }
 function _temp2(isoString) {
-	if (isoString == null) return isoString;
+	if (isoString == null) return null;
 	return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString, "UTC"));
 }
 //#endregion

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

@@ -12,6 +12,7 @@ export declare const DateSegmentItem: ({ segment, state, isDisabled, timePickerO
 interface DateSegmentItemViewProps {
     ref?: Ref<HTMLDivElement>;
     segmentProps?: HTMLAttributes<HTMLDivElement>;
+    role?: HTMLAttributes<HTMLDivElement>["role"];
     type?: DateSegment["type"];
     text: ReactNode;
     placeholder?: ReactNode;
@@ -21,5 +22,5 @@ interface DateSegmentItemViewProps {
     timePickerOnly?: boolean;
     hidePlaceholder?: boolean;
 }
-export declare const DateSegmentItemView: ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder, }: DateSegmentItemViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateSegmentItemView: ({ ref, segmentProps, role, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder, }: DateSegmentItemViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -55,63 +55,60 @@ var DateSegmentItem = (t0) => {
 	return t5;
 };
 var DateSegmentItemView = (t0) => {
-	const $ = c(20);
-	const { ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder } = t0;
-	const t1 = isDisabled && "text-interactive-text-secondary-disabled";
-	const t2 = !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1";
-	const t3 = !isDisabled && !isInputEmpty && "text-text-default-1";
-	let t4;
-	if ($[0] !== timePickerOnly || $[1] !== type) {
-		t4 = type && ["hour", "dayPeriod"].includes(type) && !timePickerOnly && "ml-1";
-		$[0] = timePickerOnly;
-		$[1] = type;
-		$[2] = t4;
-	} else t4 = $[2];
-	const t5 = hidePlaceholder && "opacity-0";
-	let t6;
-	if ($[3] !== t1 || $[4] !== t2 || $[5] !== t3 || $[6] !== t4 || $[7] !== t5) {
-		t6 = clsx("box-content rounded-input-rounding-default", t1, t2, t3, "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", t4, t5);
-		$[3] = t1;
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = t4;
-		$[7] = t5;
-		$[8] = t6;
-	} else t6 = $[8];
+	const $ = c(18);
+	const { ref, segmentProps, role, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder } = t0;
+	const t1 = role ?? segmentProps?.role;
+	const t2 = isDisabled && "text-interactive-text-secondary-disabled";
+	const t3 = !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1";
+	const t4 = !isDisabled && !isInputEmpty && "text-text-default-1";
+	const t5 = type && (type === "hour" && !timePickerOnly || type === "dayPeriod") && "ml-1";
+	const t6 = hidePlaceholder && "opacity-0";
 	let t7;
-	if ($[9] !== isPlaceholder || $[10] !== placeholder) {
-		t7 = isPlaceholder && /* @__PURE__ */ jsx("span", {
+	if ($[0] !== t2 || $[1] !== t3 || $[2] !== t4 || $[3] !== t5 || $[4] !== t6) {
+		t7 = clsx("box-content rounded-input-rounding-default", t2, t3, t4, "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", t5, t6);
+		$[0] = t2;
+		$[1] = t3;
+		$[2] = t4;
+		$[3] = t5;
+		$[4] = t6;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] !== isPlaceholder || $[7] !== placeholder) {
+		t8 = isPlaceholder && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none",
 			children: placeholder
 		});
-		$[9] = isPlaceholder;
-		$[10] = placeholder;
-		$[11] = t7;
-	} else t7 = $[11];
-	const t8 = isPlaceholder ? "" : text;
-	let t9;
-	if ($[12] !== t7 || $[13] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [t7, t8] });
-		$[12] = t7;
-		$[13] = t8;
-		$[14] = t9;
-	} else t9 = $[14];
+		$[6] = isPlaceholder;
+		$[7] = placeholder;
+		$[8] = t8;
+	} else t8 = $[8];
+	const t9 = isPlaceholder ? "" : text;
 	let t10;
-	if ($[15] !== ref || $[16] !== segmentProps || $[17] !== t6 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ jsx("div", {
+	if ($[9] !== t8 || $[10] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment, { children: [t8, t9] });
+		$[9] = t8;
+		$[10] = t9;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== ref || $[13] !== segmentProps || $[14] !== t1 || $[15] !== t10 || $[16] !== t7) {
+		t11 = /* @__PURE__ */ jsx("div", {
 			...segmentProps,
+			role: t1,
 			ref,
-			className: t6,
-			children: t9
+			className: t7,
+			children: t10
 		});
-		$[15] = ref;
-		$[16] = segmentProps;
-		$[17] = t6;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	return t10;
+		$[12] = ref;
+		$[13] = segmentProps;
+		$[14] = t1;
+		$[15] = t10;
+		$[16] = t7;
+		$[17] = t11;
+	} else t11 = $[17];
+	return t11;
 };
 //#endregion
 export { DateSegmentItem, DateSegmentItemView, getPlaceholder };

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

@@ -17,7 +17,8 @@ var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZero
 		isPlaceholder: !hasValue,
 		isInputEmpty: !hasValue,
 		isDisabled,
-		hidePlaceholder
+		hidePlaceholder,
+		segmentRole: "spinbutton"
 	});
 };
 var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
@@ -62,7 +63,8 @@ var renderStaticSegments = (value, options) => {
 			isInputEmpty: options.isInputEmpty,
 			isDisabled: options.isDisabled,
 			timePickerOnly: options.timePickerOnly,
-			hidePlaceholder: options.hidePlaceholder
+			hidePlaceholder: options.hidePlaceholder,
+			role: token.type === "literal" ? void 0 : options.segmentRole
 		}, index))
 	});
 };

package/dist/utils/date-time.utils.js

@@ -4,7 +4,7 @@ import { DateTime } from "luxon";
 var DateTimeUtils;
 (function(_DateTimeUtils) {
 	const DATE_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22));
-	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 13, 45));
+	const TIME_SAMPLE_DATE_UTC = new Date(Date.UTC(2e3, 10, 22, 6, 45));
 	const getDayMonthFormat = (shouldForceLeadingZeros = false) => shouldForceLeadingZeros ? "2-digit" : "numeric";
 	const getDatePlaceholderFormatter = (locale, options) => new Intl.DateTimeFormat(locale, {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
@@ -13,8 +13,7 @@ var DateTimeUtils;
 	});
 	const getTimePlaceholderFormatter = (locale) => new Intl.DateTimeFormat(locale, {
 		hour: "2-digit",
-		minute: "2-digit",
-		hourCycle: "h23"
+		minute: "2-digit"
 	});
 	const getResolvedLocale = (locale) => {
 		if (locale) return locale;
@@ -27,18 +26,16 @@ var DateTimeUtils;
 		timeZone: "UTC"
 	});
 	const getTimeFormatter = (locale) => new DateFormatter(getResolvedLocale(locale), {
-		hour: "2-digit",
+		hour: "numeric",
 		minute: "2-digit",
-		hourCycle: "h23",
 		timeZone: "UTC"
 	});
 	const getDateTimeFormatter = (locale, options) => new Intl.DateTimeFormat(getResolvedLocale(locale), {
 		day: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		month: getDayMonthFormat(options?.shouldForceLeadingZeros),
 		year: "numeric",
-		hour: "2-digit",
+		hour: "numeric",
 		minute: "2-digit",
-		hourCycle: "h23",
 		timeZone: "UTC"
 	});
 	const getLocaleDateFormat = (locale) => {
@@ -71,9 +68,9 @@ var DateTimeUtils;
 		}
 	};
 	const formatPlaceholder = (formatter, sampleDate) => {
-		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value.replace(/\s+/gu, "")).join("");
+		return formatter.formatToParts(sampleDate).map((part) => mapTypeToPlaceholder(part.type, formatter.resolvedOptions().locale) ?? part.value).join("");
 	};
-	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=\d)/gu, "$1");
+	const removeDateSeparatorSpacing = (value) => value.replace(/([./-])\s+(?=[\p{Letter}\p{Number}])/gu, "$1");
 	const formatLocalizedDateParts = (formatter, date) => {
 		return removeDateSeparatorSpacing(formatter.format(date));
 	};
@@ -89,7 +86,7 @@ var DateTimeUtils;
 		});
 	};
 	function getDatePlaceholder(locale, options) {
-		return formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC);
+		return removeDateSeparatorSpacing(formatPlaceholder(getDatePlaceholderFormatter(locale, options), DATE_SAMPLE_DATE_UTC));
 	}
 	_DateTimeUtils.getDatePlaceholder = getDatePlaceholder;
 	function getTimePlaceholder(locale) {

package/package.json

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