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

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

@@ -64,9 +64,12 @@ 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 } });
 	};
@@ -241,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({

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({

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({

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,9 +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";
@@ -51,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;
@@ -67,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;
@@ -102,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",

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/Skeleton/InputFrame.d.ts

@@ -71,6 +71,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     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, contentAndTrailingClassName, 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,45 +96,46 @@ 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: clsx("flex w-full items-center gap-input-gap-input-text-to-elements", contentAndTrailingClassName),
 		children: [contentRow, trailingRow]

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/package.json

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