@povio/ui 2.3.0-rc.4 → 2.3.0-rc.6

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

@@ -12,6 +12,7 @@ import { FormField } from "../../FormField/FormField.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
+import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -63,12 +64,16 @@ var DatePickerBase = (props) => {
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
 	const handleBlur = (val) => {
 		onBlur?.({ target: { value: val } });
 	};
+	const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
 	const dialogState = useDatePickerState({
 		...rest,
 		defaultValue: value || rest.defaultValue,
@@ -88,6 +93,7 @@ var DatePickerBase = (props) => {
 			}
 			onChange?.(normalizedValue);
 			dialogState.setValue(normalizedValue);
+			debouncedBlur(normalizedValue);
 			if (normalizedValue) {
 				calendarState.setFocusedDate(normalizedValue);
 				return;
@@ -238,7 +244,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 		renderInput,
 		setRenderInput,
 		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 		}
 	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
@@ -313,6 +320,8 @@ var DatePicker = ({ fullIso = true, granularity = "day", minValue, maxValue, ren
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments

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

@@ -76,9 +76,12 @@ var DateRangePickerBase = (props) => {
 		shouldForceLeadingZeros
 	}, dialogState, dateRangePickerRef);
 	const { locale } = useLocale$1();
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
 	const handleBlur = (newValue) => {
 		onBlur?.({ target: { value: newValue } });
 	};
@@ -570,7 +573,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		renderInput,
 		setRenderInput,
 		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 		}
 	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
@@ -661,6 +665,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments

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

@@ -57,9 +57,12 @@ var DateTimePickerBase = (props) => {
 	const datePickerRef = useMemo(() => ({ get current() {
 		return datePickerInputRef.current?.getContainer?.() || null;
 	} }), []);
-	useImperativeHandle(ref, () => ({ clear: () => {
-		datePickerInputRef.current?.clear();
-	} }));
+	useImperativeHandle(ref, () => ({
+		clear: () => {
+			datePickerInputRef.current?.clear();
+		},
+		getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
+	}));
 	const handleBlur = (val) => {
 		onBlur?.({ target: { value: val } });
 	};
@@ -243,7 +246,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		renderInput,
 		setRenderInput,
 		getFocusTarget: (input) => {
-			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+			const container = input.getContainer?.() ?? input;
+			return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 		}
 	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
@@ -304,6 +308,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			wrapContentAndTrailing: true,
+			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
 			children: staticSegments

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

@@ -209,6 +209,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			},
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
+			wrapContentAndTrailing: true,
 			trailingClassName: "py-0! pl-0!",
 			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
 			children: staticSegments

package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js

@@ -120,6 +120,7 @@ var NumberRangeInputBase = (props) => {
 	});
 };
 var NumberRangeInput = ({ renderStaticInput, ...props }) => {
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
@@ -144,6 +145,7 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 		const rangeError = staticValue.min !== null && staticValue.max !== null && staticValue.min > staticValue.max ? props.invalidRangeError ?? "Minimum cannot be greater than maximum" : void 0;
 		const effectiveError = props.error || rangeError;
 		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const isClearable = props.isClearable ?? ui.input.isClearable;
@@ -165,12 +167,15 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 			inputClassName: props.inputClassName,
 			contentClassName: "pr-0!",
 			trailingClassName: "py-0! pl-0!",
-			contentWrapperClassName: "flex w-full items-center gap-input-gap-input-text-to-elements",
+			contentWrapperClassName: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0! py-0! px-0!", inputSizeCva({
+				size,
+				as
+			})),
 			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
 			isClearable: false,
-			labelPlacement: "content-row",
+			labelPlacement: "content-wrapper",
 			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("input", {
 					id,

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

@@ -1,8 +1,8 @@
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { SelectBase } from "../shared/SelectBase.js";
+import { StaticSelectTrailingContent } from "../shared/StaticSelectTrailingContent.js";
 import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -54,6 +54,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 	if (!renderInput && !!props.customTrigger) setRenderInput(true);
 	if (!renderInput) {
 		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const mode = props.selectionMode ?? ui.select.selectionMode;
@@ -69,7 +70,12 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
 		});
 		const isMultiple = mode === "multiple";
-		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: "size-6 shrink-0 text-interactive-text-secondary-idle" }) : void 0] }) : void 0;
+		const trailingContent = /* @__PURE__ */ jsx(StaticSelectTrailingContent, {
+			trailingContent: props.trailingContent,
+			hideDropdownIcon: props.hideDropdownIcon,
+			isDisabled,
+			size
+		});
 		const placeholder = as === "floating" ? null : props.placeholder;
 		const shouldRenderPlaceholderAfterValue = mode !== "single" && props.placeholder && !isEmpty;
 		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
@@ -94,7 +100,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
-			trailingClassName: "pl-1-5 gap-0!",
+			wrapTrailingContent: false,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent

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

@@ -1,8 +1,9 @@
-import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
 import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { SelectBase } from "../shared/SelectBase.js";
+import { StaticSelectTrailingContent } from "../shared/StaticSelectTrailingContent.js";
 import { getStaticSelectValue } from "../shared/staticSelect.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -50,6 +51,7 @@ function Select({ renderStaticInput, ...props }) {
 	if (!renderInput && !!props.customTrigger) setRenderInput(true);
 	if (!renderInput) {
 		const as = props.as ?? ui.input.as;
+		const size = props.size ?? ui.input.size;
 		let isDisabled = !!props.isDisabled;
 		if (isFormControlDisabled) isDisabled = true;
 		const mode = props.selectionMode ?? ui.select.selectionMode;
@@ -66,7 +68,12 @@ function Select({ renderStaticInput, ...props }) {
 			selectedTagsType: props.selectedTagsType ?? ui.select.selectedTagsType
 		});
 		const isSearchable = props.isSearchable ?? ui.select.isSearchable;
-		const trailingContent = props.trailingContent || !props.hideDropdownIcon ? /* @__PURE__ */ jsxs(Fragment, { children: [props.trailingContent, !props.hideDropdownIcon ? /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: `size-6 shrink-0 ${isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"}` }) : void 0] }) : void 0;
+		const trailingContent = /* @__PURE__ */ jsx(StaticSelectTrailingContent, {
+			trailingContent: props.trailingContent,
+			hideDropdownIcon: props.hideDropdownIcon,
+			isDisabled,
+			size
+		});
 		const placeholder = as === "floating" ? null : props.placeholder;
 		const inputValue = !isMultiple && selectedItem ? selectedItem.label : "";
 		const shouldRenderPlaceholderAfterValue = isMultiple && props.placeholder && !isEmpty;
@@ -81,10 +88,17 @@ function Select({ renderStaticInput, ...props }) {
 			dataHasSelection: !isEmpty,
 			dataHasSearch: false
 		};
-		const buttonContent = isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx("span", {
-			className: "text-text-default-3",
+		const buttonContent = isMultiple && !isEmpty ? /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }) : isEmpty ? /* @__PURE__ */ jsx(Typography, {
+			size: "label-1",
+			as: "span",
+			className: "block truncate text-text-default-3",
 			children: placeholder
-		}) : displayValue;
+		}) : /* @__PURE__ */ jsx(Typography, {
+			size: "label-1",
+			as: "span",
+			className: "block truncate",
+			children: displayValue
+		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
@@ -94,7 +108,7 @@ function Select({ renderStaticInput, ...props }) {
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
-			trailingClassName: "pl-1-5 gap-0!",
+			wrapTrailingContent: false,
 			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
@@ -111,7 +125,7 @@ function Select({ renderStaticInput, ...props }) {
 				"aria-expanded": false,
 				value: inputValue,
 				placeholder: shouldRenderPlaceholderAfterValue ? props.placeholder : placeholder ?? void 0,
-				className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.inputClassName),
+				className: clsx("w-full flex-1 bg-transparent text-label-1 outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", props.inputClassName),
 				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true

package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { InputVariantProps } from '../../shared/input.cva';
+interface StaticSelectTrailingContentProps extends Pick<InputVariantProps, "size"> {
+    trailingContent?: ReactNode;
+    hideDropdownIcon?: boolean;
+    isDisabled?: boolean;
+}
+export declare const StaticSelectTrailingContent: ({ trailingContent, hideDropdownIcon, isDisabled, size, }: StaticSelectTrailingContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.js

@@ -0,0 +1,22 @@
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+//#region src/components/inputs/Selection/shared/StaticSelectTrailingContent.tsx
+var StaticSelectTrailingContent = ({ trailingContent, hideDropdownIcon, isDisabled, size }) => {
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	if (!trailingContent && hideDropdownIcon) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [trailingContent && /* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 items-center",
+		children: trailingContent
+	}), !hideDropdownIcon ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		tabIndex: -1,
+		className: clsx("self-stretch border-0! pl-1-5 outline-none", inputSizeCva({ size })),
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx(ArrowDropDownIcon, { className: clsx("size-6 shrink-0", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle") })
+	}) : void 0] });
+};
+//#endregion
+export { StaticSelectTrailingContent };

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

@@ -3,4 +3,4 @@ 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 getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];
+export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => any;

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

@@ -1,8 +1,14 @@
 //#region src/components/inputs/Selection/shared/querySelect.utils.ts
+var isQueryItemsPage = (page) => {
+	return !!page && typeof page === "object" && "items" in page && Array.isArray(page.items);
+};
 var getQueryItems = (data, queryMap) => {
 	if (!data) return [];
 	if (queryMap) return queryMap(data);
-	if (Array.isArray(data)) return data;
+	if (Array.isArray(data)) {
+		if (data.every(isQueryItemsPage)) return data.flatMap((page) => page.items);
+		return data;
+	}
 	if (typeof data === "object" && data !== null) {
 		if ("items" in data && Array.isArray(data.items)) return data.items;
 		if ("pages" in data && Array.isArray(data.pages)) return data.pages.flatMap((page) => page && typeof page === "object" && "items" in page && Array.isArray(page.items) ? page.items : []);

package/dist/components/inputs/Selection/shared/select.context.js

@@ -1,5 +1,5 @@
-import { useSelectItems } from "./useSelectItems.js";
 import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
+import { useSelectItems } from "./useSelectItems.js";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
 //#region src/components/inputs/Selection/shared/select.context.tsx

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -69,7 +69,9 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    contentAndTrailingClassName?: string;
     wrapContentAndTrailing?: boolean;
+    wrapTrailingContent?: boolean;
     labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }

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

@@ -19,7 +19,7 @@ var InputFrame = (props) => {
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	const generatedInputId = useId();
-	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, wrapContentAndTrailing, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
+	const { ref, children, formFieldRef, labelProps: labelPropsProp, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, actionContentPlacement = "content-wrapper", trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, id: idProp, inputClassName, contentClassName, contentWrapperClassName, contentAndTrailingClassName, wrapContentAndTrailing, wrapTrailingContent = true, labelPlacement = "content-wrapper", trailingClassName, onMouseEnter, onFocusCapture, variant: variantProp, as: asProp, size: sizeProp } = props;
 	const as = asProp ?? ui.input.as;
 	const size = sizeProp ?? ui.input.size;
 	const variant = variantProp ?? ui.input.variant;
@@ -96,47 +96,48 @@ var InputFrame = (props) => {
 			})
 		]
 	});
-	const trailingRow = hasTrailingContent ? /* @__PURE__ */ jsxs("div", {
+	const trailingContentNodes = hasTrailingContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		hasClear && /* @__PURE__ */ jsx(InputClear, {
+			onClear: () => onClear?.(),
+			className: clearClassName,
+			show: !!showClear,
+			renderStatic
+		}),
+		trailingContent,
+		unit && /* @__PURE__ */ jsx("span", {
+			className: typographyCva({
+				size: "label-2",
+				sizeMobile: "label-2",
+				variant: "prominent-1",
+				className: "text-text-default-3"
+			}),
+			children: unit
+		}),
+		isLoading && /* @__PURE__ */ jsx("div", {
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		}),
+		!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			icon: action.icon,
+			isDisabled,
+			onPress: action.onClick,
+			excludeFromTabOrder: true,
+			label: action.altText,
+			className: clsx("border-0!", action.className)
+		}),
+		!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
+		trailingAction
+	] }) : null;
+	const trailingRow = wrapTrailingContent && trailingContentNodes ? /* @__PURE__ */ jsx("div", {
 		className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
 			size,
 			as
 		}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
-		children: [
-			hasClear && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => onClear?.(),
-				className: clearClassName,
-				show: !!showClear,
-				renderStatic
-			}),
-			trailingContent,
-			unit && /* @__PURE__ */ jsx("span", {
-				className: typographyCva({
-					size: "label-2",
-					sizeMobile: "label-2",
-					variant: "prominent-1",
-					className: "text-text-default-3"
-				}),
-				children: unit
-			}),
-			isLoading && /* @__PURE__ */ jsx("div", {
-				className: "inline-flex",
-				children: /* @__PURE__ */ jsx(Loader, {})
-			}),
-			!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
-				color: "secondary",
-				icon: action.icon,
-				isDisabled,
-				onPress: action.onClick,
-				excludeFromTabOrder: true,
-				label: action.altText,
-				className: clsx("border-0!", action.className)
-			}),
-			!isLoading && !action && trailingIcon && renderIconVisual(trailingIcon),
-			trailingAction
-		]
-	}) : null;
+		children: trailingContentNodes
+	}) : trailingContentNodes;
 	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
 		children: [contentRow, trailingRow]
 	}) : /* @__PURE__ */ jsxs(Fragment, { children: [contentRow, trailingRow] });
 	return /* @__PURE__ */ jsx(TooltipWrapper, {

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

@@ -4,12 +4,24 @@ var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTa
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const pendingStaticChangeRef = useRef(null);
 	const shouldReplayStaticPressRef = useRef(false);
+	const shouldReplayStaticHoverRef = useRef(false);
 	useLayoutEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		const focusRealInput = (replayPendingInteraction) => {
+		if (!renderInput) return;
+		const getInteractionTarget = () => {
 			const input = inputRef.current;
+			return input ? getFocusTarget?.(input) ?? input : null;
+		};
+		if (shouldReplayStaticHoverRef.current) {
+			shouldReplayStaticHoverRef.current = false;
+			const target = getInteractionTarget();
+			target?.dispatchEvent(new PointerEvent("pointerover", { bubbles: true }));
+			target?.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
+			target?.dispatchEvent(new MouseEvent("mouseenter"));
+		}
+		if (!shouldFocus) return;
+		const focusRealInput = (replayPendingInteraction) => {
 			const pendingValue = pendingStaticChangeRef.current;
-			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
+			const focusTarget = getInteractionTarget();
 			if (replayPendingInteraction && focusTarget instanceof HTMLInputElement && pendingValue != null) {
 				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
 				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
@@ -39,14 +51,17 @@ var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTa
 		shouldFocus,
 		renderRealInput: (focus) => {
 			setShouldFocus(focus);
+			shouldReplayStaticHoverRef.current = !focus;
 			setRenderInput(true);
 		},
 		replayStaticInputChange: (value) => {
+			shouldReplayStaticHoverRef.current = false;
 			pendingStaticChangeRef.current = value;
 			setShouldFocus(true);
 			setRenderInput(true);
 		},
 		replayStaticInputPress: () => {
+			shouldReplayStaticHoverRef.current = false;
 			shouldReplayStaticPressRef.current = true;
 			setShouldFocus(true);
 			setRenderInput(true);

package/dist/hooks/useQueryAutocomplete.js

@@ -5,6 +5,7 @@ var isFilterSearchParams = (params) => {
 	return typeof params === "object" && params !== null && "filter" in params;
 };
 var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
+	"use no memo";
 	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
 	const queryResult = query(search === void 0 ? queryParams : {
 		...queryParams,
@@ -34,7 +35,7 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
 	const items = useMemo(() => {
 		if (!data) return [];
-		return mapItems(isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data);
+		return mapItems(isInfiniteQuery ? data.pages : data);
 	}, [
 		data,
 		isInfiniteQuery,

package/dist/index.js

@@ -69,9 +69,9 @@ import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
 import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
 import { DateTimeUtils } from "./utils/date-time.utils.js";
 import { FormField } from "./components/inputs/FormField/FormField.js";
+import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
 import { Tag } from "./components/text/Tag/Tag.js";
-import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
 import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
 import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
 import { Select } from "./components/inputs/Selection/Select/Select.js";

package/package.json

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