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

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

@@ -161,6 +161,8 @@ var DatePickerBase = (props) => {
 	};
 	const onInputClear = () => {
 		onChange?.(null);
+		dialogState.setValue(null);
+		if (fireBlurOnChange) handleBlur(null);
 	};
 	useEffect(() => {
 		if (!state.isOpen) return;

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

@@ -431,6 +431,16 @@ var DateRangePickerBase = (props) => {
 	};
 	const onInputClear = () => {
 		onChange?.(null);
+		dialogState.setValue(null);
+		leftCalendarState.setValue(null);
+		rightCalendarState.setValue(null);
+		setRangeSelection({
+			start: null,
+			end: null,
+			isSelecting: false
+		});
+		setHoverDate(null);
+		if (fireBlurOnChange) handleBlur(null);
 	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();

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

@@ -152,6 +152,11 @@ var DateTimePickerBase = (props) => {
 		dialogState.setValue(currentValue);
 		calendarState.setFocusedDate(toCalendarDate(currentValue));
 	};
+	const onInputClear = () => {
+		onChange?.(null);
+		dialogState.setValue(null);
+		if (fireBlurOnChange) handleBlur(null);
+	};
 	const onOpenChange = (isOpen) => {
 		state.toggle();
 		calendarState.setFocusedDate(state.value || today(effectiveTimeZone));
@@ -219,7 +224,8 @@ var DateTimePickerBase = (props) => {
 				timeZone: effectiveTimeZone,
 				isTimeOptional,
 				format,
-				fireBlurOnChange
+				fireBlurOnChange,
+				onClear: onInputClear
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 					isDisabled,

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

@@ -41,5 +41,5 @@ interface DatePickerInputProps extends InputVariantProps {
     fireBlurOnChange?: boolean;
     onClear?: () => void;
 }
-export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone, isTimeOptional, format, fireBlurOnChange, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, todayIconButtonComponent, todayIconPlacement, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, dateGranularity, timeZone: timeZoneProp, isTimeOptional, format, fireBlurOnChange, onClear: onClearProp, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,18 +15,20 @@ import { clsx } from "clsx";
 import { useImperativeHandle, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import { today } from "@internationalized/date";
+import { getLocalTimeZone, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
 var DatePickerInput = (t0) => {
-	const $ = c(108);
-	const { ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize: t1, todayIconButtonComponent, todayIconPlacement: t2, isDirty, isRequired, disableManualEntry, autoFixYear: t3, placeholder, className, onOpenDropdown, dateGranularity: t4, timeZone, isTimeOptional: t5, format, fireBlurOnChange, onClear: onClearProp, ...props } = t0;
+	const $ = c(95);
+	const { ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize: t1, todayIconButtonComponent, todayIconPlacement: t2, isDirty, isRequired, disableManualEntry, autoFixYear: t3, placeholder, className, onOpenDropdown, dateGranularity: t4, timeZone: timeZoneProp, isTimeOptional: t5, format, fireBlurOnChange, onClear: onClearProp, ...props } = t0;
 	const todayIconButtonSize = t1 === void 0 ? "none" : t1;
 	const todayIconPlacement = t2 === void 0 ? "content" : t2;
 	const autoFixYear = t3 === void 0 ? false : t3;
 	const dateGranularity = t4 === void 0 ? "day" : t4;
 	const isTimeOptional = t5 === void 0 ? false : t5;
 	const uiConfig = UIConfig.useConfig();
-	const effectiveTimeZone = timeZone ?? "UTC";
+	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone !== "clientLocal") effectiveTimeZone = timeZone;
 	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
@@ -129,112 +131,91 @@ var DatePickerInput = (t0) => {
 	const onClearChange = t14;
 	const showClear = canClear || hasValue || normalizedFieldProps.value != null || normalizedEndFieldProps?.value != null;
 	const isTodayIconDisabled = isDisabled || buttonProps.isDisabled;
-	let t15;
-	if ($[20] !== effectiveTimeZone || $[21] !== endFieldProps || $[22] !== fieldProps || $[23] !== fireBlurOnChange || $[24] !== isDateTime || $[25] !== isTodayIconDisabled) {
-		t15 = () => {
-			if (isTodayIconDisabled) return;
-			if (isDateTime) {
-				const calendarDateTime = DateTimeUtils.getCurrentWallClockCalendarDateTime();
-				fieldProps.onChange?.(calendarDateTime);
-				if (endFieldProps) endFieldProps.onChange?.(calendarDateTime);
-			} else {
-				fieldProps.onChange?.(today(effectiveTimeZone));
-				if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
-			}
-			if (fireBlurOnChange) {
-				fieldProps.onBlur?.(null);
-				endFieldProps?.onBlur?.(null);
-			}
-		};
-		$[20] = effectiveTimeZone;
-		$[21] = endFieldProps;
-		$[22] = fieldProps;
-		$[23] = fireBlurOnChange;
-		$[24] = isDateTime;
-		$[25] = isTodayIconDisabled;
-		$[26] = t15;
-	} else t15 = $[26];
-	const onToday = t15;
+	const onToday = () => {
+		if (isTodayIconDisabled) return;
+		if (isDateTime) {
+			const calendarDateTime = DateTimeUtils.getCurrentWallClockCalendarDateTime();
+			fieldProps.onChange?.(calendarDateTime);
+			if (endFieldProps) endFieldProps.onChange?.(calendarDateTime);
+		} else {
+			fieldProps.onChange?.(today(effectiveTimeZone));
+			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
+		}
+		if (fireBlurOnChange) {
+			fieldProps.onBlur?.(null);
+			endFieldProps?.onBlur?.(null);
+		}
+	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
-	let t16;
-	if ($[27] !== isTodayIconDisabled || $[28] !== onToday || $[29] !== todayIcon || $[30] !== todayIconButtonComponent || $[31] !== todayIconButtonSize) {
-		t16 = renderDatePickerTodayIcon(todayIcon, {
-			isDisabled: isTodayIconDisabled,
-			onPress: onToday,
-			size: todayIconButtonSize,
-			todayIconButtonComponent
-		});
-		$[27] = isTodayIconDisabled;
-		$[28] = onToday;
-		$[29] = todayIcon;
-		$[30] = todayIconButtonComponent;
-		$[31] = todayIconButtonSize;
-		$[32] = t16;
-	} else t16 = $[32];
-	const todayIconButton = t16;
+	const todayIconButton = renderDatePickerTodayIcon(todayIcon, {
+		isDisabled: isTodayIconDisabled,
+		onPress: onToday,
+		size: todayIconButtonSize,
+		todayIconButtonComponent
+	});
 	const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
 	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
-	const t17 = clsx("group group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", groupProps.className, inputBaseCva({
+	const t15 = clsx("group group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", groupProps.className, inputBaseCva({
 		variant,
 		as,
 		...props
 	}), className);
-	const t18 = isHovered || void 0;
-	const t19 = isDisabled || void 0;
-	const t20 = isDisabled || void 0;
-	const t21 = isInvalid || void 0;
-	const t22 = normalizedFieldProps.value == null || void 0;
-	const t23 = isFocused || void 0;
-	const t24 = isFocused && isFocusVisible || void 0;
-	const t25 = normalizedFieldProps.value != null || void 0;
-	const t26 = isDirty || void 0;
-	const t27 = isRequired || void 0;
-	const t28 = normalizedFieldProps.value != null || void 0;
-	let t29;
-	if ($[33] !== as || $[34] !== inputSizeCva || $[35] !== size) {
-		t29 = clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
+	const t16 = isHovered || void 0;
+	const t17 = isDisabled || void 0;
+	const t18 = isDisabled || void 0;
+	const t19 = isInvalid || void 0;
+	const t20 = normalizedFieldProps.value == null || void 0;
+	const t21 = isFocused || void 0;
+	const t22 = isFocused && isFocusVisible || void 0;
+	const t23 = normalizedFieldProps.value != null || void 0;
+	const t24 = isDirty || void 0;
+	const t25 = isRequired || void 0;
+	const t26 = normalizedFieldProps.value != null || void 0;
+	let t27;
+	if ($[20] !== as || $[21] !== inputSizeCva || $[22] !== size) {
+		t27 = clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
 			size,
 			as
 		}));
-		$[33] = as;
-		$[34] = inputSizeCva;
-		$[35] = size;
-		$[36] = t29;
-	} else t29 = $[36];
-	let t30;
-	if ($[37] !== as || $[38] !== headerProps) {
-		t30 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+		$[20] = as;
+		$[21] = inputSizeCva;
+		$[22] = size;
+		$[23] = t27;
+	} else t27 = $[23];
+	let t28;
+	if ($[24] !== as || $[25] !== headerProps) {
+		t28 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 			as,
 			...headerProps
 		});
-		$[37] = as;
-		$[38] = headerProps;
-		$[39] = t30;
-	} else t30 = $[39];
-	const t31 = shouldRenderTodayIconWithFieldLabel && todayIconButton;
-	let t32;
-	if ($[40] !== datePickerInputContentRowCva || $[41] !== size) {
-		t32 = datePickerInputContentRowCva({ size });
-		$[40] = datePickerInputContentRowCva;
-		$[41] = size;
-		$[42] = t32;
-	} else t32 = $[42];
-	let t33;
-	if ($[43] !== disableManualEntry || $[44] !== isDisabled || $[45] !== onOpenDropdown) {
-		t33 = disableManualEntry && /* @__PURE__ */ jsx(Button, {
+		$[24] = as;
+		$[25] = headerProps;
+		$[26] = t28;
+	} else t28 = $[26];
+	const t29 = shouldRenderTodayIconWithFieldLabel && todayIconButton;
+	let t30;
+	if ($[27] !== datePickerInputContentRowCva || $[28] !== size) {
+		t30 = datePickerInputContentRowCva({ size });
+		$[27] = datePickerInputContentRowCva;
+		$[28] = size;
+		$[29] = t30;
+	} else t30 = $[29];
+	let t31;
+	if ($[30] !== disableManualEntry || $[31] !== isDisabled || $[32] !== onOpenDropdown) {
+		t31 = disableManualEntry && /* @__PURE__ */ jsx(Button, {
 			onPress: onOpenDropdown,
 			className: "absolute inset-0 z-0",
 			isDisabled
 		});
-		$[43] = disableManualEntry;
-		$[44] = isDisabled;
-		$[45] = onOpenDropdown;
-		$[46] = t33;
-	} else t33 = $[46];
-	const t34 = !shouldRenderTodayIconWithFieldLabel && todayIconButton;
-	let t35;
-	if ($[47] !== as || $[48] !== dateGranularity || $[49] !== disableManualEntry || $[50] !== effectiveTimeZone || $[51] !== fieldProps || $[52] !== format || $[53] !== hidePlaceholder || $[54] !== isDisabled || $[55] !== isInvalid || $[56] !== isTimeOptional || $[57] !== normalizedEndFieldProps || $[58] !== normalizedFieldProps || $[59] !== onClearChange || $[60] !== placeholder) {
-		t35 = disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+		$[30] = disableManualEntry;
+		$[31] = isDisabled;
+		$[32] = onOpenDropdown;
+		$[33] = t31;
+	} else t31 = $[33];
+	const t32 = !shouldRenderTodayIconWithFieldLabel && todayIconButton;
+	let t33;
+	if ($[34] !== as || $[35] !== dateGranularity || $[36] !== disableManualEntry || $[37] !== effectiveTimeZone || $[38] !== fieldProps || $[39] !== format || $[40] !== hidePlaceholder || $[41] !== isDisabled || $[42] !== isInvalid || $[43] !== isTimeOptional || $[44] !== normalizedEndFieldProps || $[45] !== normalizedFieldProps || $[46] !== onClearChange || $[47] !== placeholder) {
+		t33 = disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 			size: "label-1",
 			className: "text-text-default-3",
 			children: placeholder
@@ -265,79 +246,79 @@ var DatePickerInput = (t0) => {
 			format,
 			timeZone: effectiveTimeZone
 		})] })] });
-		$[47] = as;
-		$[48] = dateGranularity;
-		$[49] = disableManualEntry;
-		$[50] = effectiveTimeZone;
-		$[51] = fieldProps;
-		$[52] = format;
-		$[53] = hidePlaceholder;
-		$[54] = isDisabled;
-		$[55] = isInvalid;
-		$[56] = isTimeOptional;
-		$[57] = normalizedEndFieldProps;
-		$[58] = normalizedFieldProps;
-		$[59] = onClearChange;
-		$[60] = placeholder;
-		$[61] = t35;
-	} else t35 = $[61];
-	let t36;
-	if ($[62] !== t32 || $[63] !== t33 || $[64] !== t34 || $[65] !== t35) {
-		t36 = /* @__PURE__ */ jsxs("div", {
-			className: t32,
+		$[34] = as;
+		$[35] = dateGranularity;
+		$[36] = disableManualEntry;
+		$[37] = effectiveTimeZone;
+		$[38] = fieldProps;
+		$[39] = format;
+		$[40] = hidePlaceholder;
+		$[41] = isDisabled;
+		$[42] = isInvalid;
+		$[43] = isTimeOptional;
+		$[44] = normalizedEndFieldProps;
+		$[45] = normalizedFieldProps;
+		$[46] = onClearChange;
+		$[47] = placeholder;
+		$[48] = t33;
+	} else t33 = $[48];
+	let t34;
+	if ($[49] !== t30 || $[50] !== t31 || $[51] !== t32 || $[52] !== t33) {
+		t34 = /* @__PURE__ */ jsxs("div", {
+			className: t30,
 			children: [
-				t33,
-				t34,
-				t35
+				t31,
+				t32,
+				t33
 			]
 		});
-		$[62] = t32;
-		$[63] = t33;
-		$[64] = t34;
-		$[65] = t35;
-		$[66] = t36;
-	} else t36 = $[66];
-	let t37;
-	if ($[67] !== t29 || $[68] !== t30 || $[69] !== t31 || $[70] !== t36) {
-		t37 = /* @__PURE__ */ jsxs("div", {
-			className: t29,
+		$[49] = t30;
+		$[50] = t31;
+		$[51] = t32;
+		$[52] = t33;
+		$[53] = t34;
+	} else t34 = $[53];
+	let t35;
+	if ($[54] !== t27 || $[55] !== t28 || $[56] !== t29 || $[57] !== t34) {
+		t35 = /* @__PURE__ */ jsxs("div", {
+			className: t27,
 			children: [
-				t30,
-				t31,
-				t36
+				t28,
+				t29,
+				t34
 			]
 		});
-		$[67] = t29;
-		$[68] = t30;
-		$[69] = t31;
-		$[70] = t36;
-		$[71] = t37;
-	} else t37 = $[71];
-	let t38;
-	if ($[72] !== as || $[73] !== inputSizeCva || $[74] !== size) {
-		t38 = clsx(inputSizeCva({
+		$[54] = t27;
+		$[55] = t28;
+		$[56] = t29;
+		$[57] = t34;
+		$[58] = t35;
+	} else t35 = $[58];
+	let t36;
+	if ($[59] !== as || $[60] !== inputSizeCva || $[61] !== size) {
+		t36 = clsx(inputSizeCva({
 			size,
 			as
 		}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!");
-		$[72] = as;
-		$[73] = inputSizeCva;
-		$[74] = size;
-		$[75] = t38;
-	} else t38 = $[75];
-	let t39;
-	if ($[76] !== clearInput || $[77] !== isClearable || $[78] !== showClear) {
-		t39 = isClearable && /* @__PURE__ */ jsx(InputClear, {
+		$[59] = as;
+		$[60] = inputSizeCva;
+		$[61] = size;
+		$[62] = t36;
+	} else t36 = $[62];
+	let t37;
+	if ($[63] !== clearInput || $[64] !== isClearable || $[65] !== showClear) {
+		t37 = isClearable && /* @__PURE__ */ jsx(InputClear, {
 			onClear: clearInput,
 			show: showClear
 		});
-		$[76] = clearInput;
-		$[77] = isClearable;
-		$[78] = showClear;
-		$[79] = t39;
-	} else t39 = $[79];
-	let t40;
-	if ($[80] !== buttonProps || $[81] !== disableDropdown || $[82] !== disableManualEntry || $[83] !== isDisabled || $[84] !== pickerIcon) {
-		t40 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+		$[63] = clearInput;
+		$[64] = isClearable;
+		$[65] = showClear;
+		$[66] = t37;
+	} else t37 = $[66];
+	let t38;
+	if ($[67] !== buttonProps || $[68] !== disableDropdown || $[69] !== disableManualEntry || $[70] !== isDisabled || $[71] !== pickerIcon) {
+		t38 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 			label: "",
 			color: "secondary",
 			...buttonProps,
@@ -345,67 +326,67 @@ var DatePickerInput = (t0) => {
 			isDisabled,
 			className: "border-0!"
 		});
-		$[80] = buttonProps;
-		$[81] = disableDropdown;
-		$[82] = disableManualEntry;
-		$[83] = isDisabled;
-		$[84] = pickerIcon;
-		$[85] = t40;
-	} else t40 = $[85];
-	let t41;
-	if ($[86] !== t38 || $[87] !== t39 || $[88] !== t40) {
-		t41 = /* @__PURE__ */ jsxs("div", {
-			className: t38,
-			children: [t39, t40]
+		$[67] = buttonProps;
+		$[68] = disableDropdown;
+		$[69] = disableManualEntry;
+		$[70] = isDisabled;
+		$[71] = pickerIcon;
+		$[72] = t38;
+	} else t38 = $[72];
+	let t39;
+	if ($[73] !== t36 || $[74] !== t37 || $[75] !== t38) {
+		t39 = /* @__PURE__ */ jsxs("div", {
+			className: t36,
+			children: [t37, t38]
 		});
-		$[86] = t38;
-		$[87] = t39;
-		$[88] = t40;
-		$[89] = t41;
-	} else t41 = $[89];
-	let t42;
-	if ($[90] !== focusWithinProps || $[91] !== groupProps || $[92] !== hoverProps || $[93] !== t17 || $[94] !== t18 || $[95] !== t19 || $[96] !== t20 || $[97] !== t21 || $[98] !== t22 || $[99] !== t23 || $[100] !== t24 || $[101] !== t25 || $[102] !== t26 || $[103] !== t27 || $[104] !== t28 || $[105] !== t37 || $[106] !== t41) {
-		t42 = /* @__PURE__ */ jsxs("div", {
+		$[73] = t36;
+		$[74] = t37;
+		$[75] = t38;
+		$[76] = t39;
+	} else t39 = $[76];
+	let t40;
+	if ($[77] !== focusWithinProps || $[78] !== groupProps || $[79] !== hoverProps || $[80] !== t15 || $[81] !== t16 || $[82] !== t17 || $[83] !== t18 || $[84] !== t19 || $[85] !== t20 || $[86] !== t21 || $[87] !== t22 || $[88] !== t23 || $[89] !== t24 || $[90] !== t25 || $[91] !== t26 || $[92] !== t35 || $[93] !== t39) {
+		t40 = /* @__PURE__ */ jsxs("div", {
 			ref: containerRef,
 			...groupProps,
 			...focusWithinProps,
 			...hoverProps,
-			className: t17,
+			className: t15,
 			"data-rac": "",
 			"data-datetime-input": "",
-			"data-hovered": t18,
-			"data-disabled": t19,
-			"data-is-disabled": t20,
-			"data-invalid": t21,
-			"data-is-empty": t22,
-			"data-focus-within": t23,
-			"data-focus-visible": t24,
-			"data-has-selection": t25,
-			"data-is-dirty": t26,
-			"data-is-required": t27,
-			"data-is-filled": t28,
-			children: [t37, t41]
+			"data-hovered": t16,
+			"data-disabled": t17,
+			"data-is-disabled": t18,
+			"data-invalid": t19,
+			"data-is-empty": t20,
+			"data-focus-within": t21,
+			"data-focus-visible": t22,
+			"data-has-selection": t23,
+			"data-is-dirty": t24,
+			"data-is-required": t25,
+			"data-is-filled": t26,
+			children: [t35, t39]
 		});
-		$[90] = focusWithinProps;
-		$[91] = groupProps;
-		$[92] = hoverProps;
-		$[93] = t17;
-		$[94] = t18;
-		$[95] = t19;
-		$[96] = t20;
-		$[97] = t21;
-		$[98] = t22;
-		$[99] = t23;
-		$[100] = t24;
-		$[101] = t25;
-		$[102] = t26;
-		$[103] = t27;
-		$[104] = t28;
-		$[105] = t37;
-		$[106] = t41;
-		$[107] = t42;
-	} else t42 = $[107];
-	return t42;
+		$[77] = focusWithinProps;
+		$[78] = groupProps;
+		$[79] = hoverProps;
+		$[80] = t15;
+		$[81] = t16;
+		$[82] = t17;
+		$[83] = t18;
+		$[84] = t19;
+		$[85] = t20;
+		$[86] = t21;
+		$[87] = t22;
+		$[88] = t23;
+		$[89] = t24;
+		$[90] = t25;
+		$[91] = t26;
+		$[92] = t35;
+		$[93] = t39;
+		$[94] = t40;
+	} else t40 = $[94];
+	return t40;
 };
 //#endregion
 export { DatePickerInput };

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -1,6 +1,6 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.js";
-import { getQueryItems, shouldEnableQueryForSelection } from "../shared/querySelect.utils.js";
+import { getQueryItems, getSelectionIdsToResolve } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -13,25 +13,28 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, le
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const { onChange, ...restProps } = props;
+	const value = "value" in props ? props.value : void 0;
+	const selectedIdsToResolve = getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	});
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
 		query,
 		queryParams,
 		queryOptions,
 		mapItems: (data) => getQueryItems(data, queryMap),
 		search,
-		initialQueryState: shouldEnableQueryForSelection({
-			initialSelection: props.initialSelection,
-			value: "value" in props ? props.value : void 0,
-			mapInitialToSelectItem: props.mapInitialToSelectItem
-		}) ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
+		initialQueryState: selectedIdsToResolve.count > 0 ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled,
+		selectedIdsToResolve: selectedIdsToResolve.items
 	});
-	const handleChange = (value) => {
-		onChange?.(value);
+	const handleChange = (value_0) => {
+		onChange?.(value_0);
 		props.onBlur?.({ target: { value: null } });
 	};
 	const { isInitialQueryDisabled: _, ...autocompleteProps } = restProps;
-	const onSearchChange = (value_0) => {
-		setSearch(value_0);
+	const onSearchChange = (value_1) => {
+		setSearch(value_1);
 		handleEnableQuery();
 	};
 	return /* @__PURE__ */ jsx(Autocomplete, {

package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts

@@ -33,4 +33,5 @@ export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey exte
     mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
     initialQueryState?: boolean;
     search?: string;
+    selectedIdsToResolve?: TKey[];
 }

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -1,6 +1,6 @@
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Select } from "./Select.js";
-import { getQueryItems, shouldEnableQueryForSelection } from "../shared/querySelect.utils.js";
+import { getQueryItems, getSelectionIdsToResolve } from "../shared/querySelect.utils.js";
 import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -9,11 +9,18 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
 var QuerySelectContent = (t0) => {
-	const $ = c(28);
+	const $ = c(29);
 	const { query, queryParams, queryOptions, queryMap, ...props } = t0;
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
+	const value = "value" in props ? props.value : void 0;
+	const selectedIdsToResolve = getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	});
+	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
 	let t1;
 	if ($[0] !== queryMap) {
 		t1 = (data) => getQueryItems(data, queryMap);
@@ -21,68 +28,66 @@ var QuerySelectContent = (t0) => {
 		$[1] = t1;
 	} else t1 = $[1];
 	const t2 = isSearchable ? search : void 0;
-	const t3 = shouldEnableQueryForSelection({
-		initialSelection: props.initialSelection,
-		value: "value" in props ? props.value : void 0,
-		mapInitialToSelectItem: props.mapInitialToSelectItem
-	}) ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
+	const t3 = shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
 	let t4;
-	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
 		t4 = {
 			query,
 			queryParams,
 			queryOptions,
 			mapItems: t1,
 			search: t2,
-			initialQueryState: t3
+			initialQueryState: t3,
+			selectedIdsToResolve: selectedIdsToResolve.items
 		};
 		$[2] = query;
 		$[3] = queryOptions;
 		$[4] = queryParams;
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[5] = selectedIdsToResolve.items;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t4);
 	let onSearchChange;
 	let selectProps;
-	if ($[9] !== props) {
+	if ($[10] !== props) {
 		const { isInitialQueryDisabled: _, onSearchChange: t5, ...t6 } = props;
 		onSearchChange = t5;
 		selectProps = t6;
-		$[9] = props;
-		$[10] = onSearchChange;
-		$[11] = selectProps;
+		$[10] = props;
+		$[11] = onSearchChange;
+		$[12] = selectProps;
 	} else {
-		onSearchChange = $[10];
-		selectProps = $[11];
+		onSearchChange = $[11];
+		selectProps = $[12];
 	}
 	let t5;
-	if ($[12] !== handleEnableQuery || $[13] !== onSearchChange || $[14] !== setSearch) {
-		t5 = (value) => {
-			setSearch(value);
+	if ($[13] !== handleEnableQuery || $[14] !== onSearchChange || $[15] !== setSearch) {
+		t5 = (value_0) => {
+			setSearch(value_0);
 			handleEnableQuery();
-			onSearchChange?.(value);
+			onSearchChange?.(value_0);
 		};
-		$[12] = handleEnableQuery;
-		$[13] = onSearchChange;
-		$[14] = setSearch;
-		$[15] = t5;
-	} else t5 = $[15];
+		$[13] = handleEnableQuery;
+		$[14] = onSearchChange;
+		$[15] = setSearch;
+		$[16] = t5;
+	} else t5 = $[16];
 	const handleSearchChange = t5;
 	let t6;
-	if ($[16] !== handleSearchChange || $[17] !== isSearchable) {
+	if ($[17] !== handleSearchChange || $[18] !== isSearchable) {
 		t6 = isSearchable && {
 			isClientSearchDisabled: true,
 			onSearchChange: handleSearchChange
 		};
-		$[16] = handleSearchChange;
-		$[17] = isSearchable;
-		$[18] = t6;
-	} else t6 = $[18];
+		$[17] = handleSearchChange;
+		$[18] = isSearchable;
+		$[19] = t6;
+	} else t6 = $[19];
 	let t7;
-	if ($[19] !== fetchNextPage || $[20] !== handleEnableQuery || $[21] !== hasNextPage || $[22] !== isLoading || $[23] !== items || $[24] !== selectProps || $[25] !== t6 || $[26] !== totalItems) {
+	if ($[20] !== fetchNextPage || $[21] !== handleEnableQuery || $[22] !== hasNextPage || $[23] !== isLoading || $[24] !== items || $[25] !== selectProps || $[26] !== t6 || $[27] !== totalItems) {
 		t7 = /* @__PURE__ */ jsx(Select, {
 			...selectProps,
 			items,
@@ -94,16 +99,16 @@ var QuerySelectContent = (t0) => {
 			onFocusCapture: handleEnableQuery,
 			...t6
 		});
-		$[19] = fetchNextPage;
-		$[20] = handleEnableQuery;
-		$[21] = hasNextPage;
-		$[22] = isLoading;
-		$[23] = items;
-		$[24] = selectProps;
-		$[25] = t6;
-		$[26] = totalItems;
-		$[27] = t7;
-	} else t7 = $[27];
+		$[20] = fetchNextPage;
+		$[21] = handleEnableQuery;
+		$[22] = hasNextPage;
+		$[23] = isLoading;
+		$[24] = items;
+		$[25] = selectProps;
+		$[26] = t6;
+		$[27] = totalItems;
+		$[28] = t7;
+	} else t7 = $[28];
 	return t7;
 };
 var QuerySelect = (props) => {

package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts

@@ -3,10 +3,12 @@ import { Key } from 'react-aria-components';
 import { SelectItem } from './select.types';
 export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
 export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
-export declare const isInitialSelectionLabelMissing: <TInitialSelectItem>(initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined, mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem) => boolean;
-export declare const shouldEnableQueryForSelection: <TInitialSelectItem, TKey extends Key = Key>({ initialSelection, value, mapInitialToSelectItem, }: {
+export declare const getSelectionIdsToResolve: <TInitialSelectItem, TKey extends Key = Key>({ initialSelection, value, mapInitialToSelectItem, }: {
     initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined;
     value: TKey | TKey[] | null | undefined;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
-}) => boolean;
+}) => {
+    count: number;
+    items: TKey[];
+};
 export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];

package/dist/components/inputs/Selection/shared/querySelect.utils.js

@@ -9,18 +9,25 @@ var getInitialSelectionItems = (initialSelection) => {
 	return Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : [];
 };
 var getInitialSelectionLabel = (initialSelection, mapInitialToSelectItem) => mapInitialToSelectItem?.(initialSelection).label ?? getDefaultInitialSelectionLabel(initialSelection);
-var isInitialSelectionLabelMissing = (initialSelection, mapInitialToSelectItem) => {
-	return getInitialSelectionItems(initialSelection).some((item) => {
-		return getInitialSelectionLabel(item, mapInitialToSelectItem) === "";
-	});
-};
-var shouldEnableQueryForSelection = ({ initialSelection, value, mapInitialToSelectItem }) => {
-	if (isInitialSelectionLabelMissing(initialSelection, mapInitialToSelectItem)) return true;
+var getSelectionIdsToResolve = ({ initialSelection, value, mapInitialToSelectItem }) => {
 	const values = Array.isArray(value) ? value : value != null ? [value] : [];
-	if (values.length === 0) return false;
 	const initialSelections = getInitialSelectionItems(initialSelection);
-	const labeledInitialSelectionIds = new Set(initialSelections.filter((item) => getInitialSelectionLabel(item, mapInitialToSelectItem) !== "").map((item) => mapInitialToSelectItem?.(item).id ?? item.id));
-	return values.some((id) => !labeledInitialSelectionIds.has(id));
+	const labeledInitialSelectionIds = /* @__PURE__ */ new Set();
+	const missingLabelInitialSelectionIds = [];
+	initialSelections.forEach((item) => {
+		const id = (mapInitialToSelectItem?.(item))?.id ?? item.id;
+		if (id == null) return;
+		if (getInitialSelectionLabel(item, mapInitialToSelectItem) === "") {
+			missingLabelInitialSelectionIds.push(id);
+			return;
+		}
+		labeledInitialSelectionIds.add(id);
+	});
+	const items = Array.from(new Set([...missingLabelInitialSelectionIds, ...values.filter((id) => !labeledInitialSelectionIds.has(id))]));
+	return {
+		count: items.length,
+		items
+	};
 };
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
@@ -33,4 +40,4 @@ var getQueryItems = (data, queryMap) => {
 	return [];
 };
 //#endregion
-export { getQueryItems, shouldEnableQueryForSelection };
+export { getQueryItems, getSelectionIdsToResolve };

package/dist/config/uiConfig.context.d.ts

@@ -41,7 +41,7 @@ export declare namespace UIConfig {
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;
             setDateValueOnDateSelection?: boolean;
-            timeZone: string;
+            timeZone?: string;
             todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
         };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import { InfiniteData } from '@tanstack/react-query';
 import { Key } from 'react-aria-components';
 import { InfiniteQueryPage, QueryFn, UseQueryAutocompleteOptions } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
-export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
+export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, selectedIdsToResolve, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
     data: any;
     isLoading: boolean;
     isQueryEnabled: boolean;

package/dist/hooks/useQueryAutocomplete.js

@@ -1,10 +1,10 @@
 import { ApiQueryUtils } from "../utils/query.utils.js";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 //#region src/hooks/useQueryAutocomplete.ts
 var isFilterSearchParams = (params) => {
 	return typeof params === "object" && params !== null && "filter" in params;
 };
-var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
+var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search, selectedIdsToResolve = [] }) => {
 	"use no memo";
 	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
 	const queryResult = query(search === void 0 ? queryParams : {
@@ -41,6 +41,21 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		isInfiniteQuery,
 		mapItems
 	]);
+	const selectedIdsToResolveSet = useMemo(() => new Set(selectedIdsToResolve), [selectedIdsToResolve]);
+	useEffect(() => {
+		if (!isQueryEnabled || !isInfiniteQuery || !fetchNextPage || !hasNextPage || isFetchingNextPage || selectedIdsToResolveSet.size === 0) return;
+		const loadedItemIds = new Set(items.map((item) => item.id));
+		if (selectedIdsToResolve.some((id) => !loadedItemIds.has(id))) fetchNextPage();
+	}, [
+		fetchNextPage,
+		hasNextPage,
+		isFetchingNextPage,
+		isInfiniteQuery,
+		isQueryEnabled,
+		items,
+		selectedIdsToResolve,
+		selectedIdsToResolveSet
+	]);
 	return {
 		data,
 		isLoading: isLoading || isFetchingNextPage,

package/package.json

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