@povio/ui 2.2.9-rc.31 → 2.2.9-rc.33

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

@@ -11,10 +11,11 @@ import { getStaticCalendarDateSegments } from "../shared/staticDateTimeSegments.
 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 { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller, useWatch } from "react-hook-form";
@@ -176,8 +177,15 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 	const { locale } = useLocale();
 	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => {
+			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+		}
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -201,13 +209,6 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const dateValue = rawValue ? parseCalendarDate(rawValue) : null;
 		const as = props.as ?? ui.input.as;
@@ -215,6 +216,8 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateSegments({
@@ -243,11 +246,9 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 				dataHasSelection: dateValue !== null
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			onStaticInteract: renderRealInput,
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
 		});

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

@@ -12,11 +12,12 @@ import { getStaticDateRangeSegments } from "../shared/staticDateTimeSegments.js"
 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 { RangeCalendar } from "../shared/RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
@@ -552,8 +553,15 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 	const { locale } = useLocale$1();
 	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => {
+			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+		}
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -599,13 +607,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const startDateValue = parseCalendarDate(rawValue?.start ?? null);
 		const endDateValue = parseCalendarDate(rawValue?.end ?? null);
@@ -615,6 +616,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticDateRangeSegments({
@@ -644,11 +647,9 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				dataHasSelection: hasProvidedRangeValue
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			onStaticInteract: renderRealInput,
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
 			children: staticSegments
 		});

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

@@ -11,6 +11,7 @@ import { getStaticCalendarDateTimeSegments } from "../shared/staticDateTimeSegme
 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";
@@ -197,8 +198,15 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 	const { locale } = useLocale();
 	const shouldForceLeadingZeros = props.shouldForceLeadingZeros ?? ui.dateInput.shouldForceLeadingZeros;
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => {
+			return (input.getContainer?.() ?? input).querySelector("input, button, [tabindex]:not([tabindex='-1'])");
+		}
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -215,13 +223,6 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		if (isoString == null) return isoString;
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const dateTimeValue = rawValue ? parseDateValue(rawValue) : null;
 		const as = props.as ?? ui.input.as;
@@ -229,6 +230,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 		const isDisabled = isFormControlDisabled || !!props.isDisabled;
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
+		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateTimeSegments({
@@ -257,11 +260,9 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 				dataHasSelection: dateTimeValue !== null
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			actionContent: renderDatePickerTodayIcon(todayIcon, todayIconButtonSize),
+			onStaticInteract: renderRealInput,
+			actionContent: staticTodayIcon,
+			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
 			children: staticSegments
 		});

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

@@ -7,6 +7,7 @@ import { getStaticTimeSegments } from "../shared/staticDateTimeSegments.js";
 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 { TimePickerInput } from "../shared/TimePickerInput.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -142,8 +143,13 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
+	const { renderRealInput } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (input) => input.querySelector("input, button, [tabindex]:not([tabindex='-1'])")
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -161,13 +167,6 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 		if (isoString == null) return isoString;
 		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(inputRef.current?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const timeValue = rawValue ? parseTimeValue(rawValue) : null;
 		const as = props.as ?? ui.input.as;
@@ -198,10 +197,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 				dataHasSelection: timeValue !== null
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
 			children: staticSegments
 		});

package/dist/components/inputs/FormField/FormFieldHeader.d.ts

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { ReactNode } from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldHeaderProps {
     label: string;
     tooltipText?: string;
@@ -9,6 +9,6 @@ export interface FormFieldHeaderProps {
     isHeaderHidden?: boolean;
     isDisabled?: boolean;
     className?: string;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
 }
 export declare const FormFieldHeader: ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps, }: FormFieldHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/FormFieldLabel.d.ts

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { RefCallback } from 'react';
+import { LabelHTMLAttributes, RefCallback } from 'react';
 import { InputSizeProps } from '../shared/input.cva';
 import { LabelBaseProps } from '../shared/label.cva';
 export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
@@ -7,7 +7,7 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isRequired?: boolean;
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
     className?: string;
 }
 export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,6 +4,7 @@ import { inputBase } from "../../shared/input.cva.js";
 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 { InputContent } from "../shared/InputContent.js";
 import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
 import { jsx } from "react/jsx-runtime";
@@ -124,19 +125,18 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
 	}) : props.value;
 	let isFormControlDisabled = false;
 	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const staticValue = watchedValue ?? props.value ?? props.defaultValue;
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
@@ -161,19 +161,16 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			dataAttributes,
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
-				readOnly: true,
 				disabled: isDisabled,
 				tabIndex: -1,
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,
 				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true
 			})

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

@@ -3,11 +3,12 @@ import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { getStaticNumberDisplayValue } from "../shared/numberStatic.utils.js";
 import { NumberRangeField } from "./NumberRangeField.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, useState } from "react";
+import { useRef, useState } from "react";
 import { useLocale } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { Controller, useWatch } from "react-hook-form";
@@ -122,17 +123,17 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const { locale } = useLocale();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
+	const { shouldFocus, renderRealInput } = useStaticInputHandoff({
+		inputRef: useRef(null),
+		renderInput,
+		setRenderInput
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
 	}) : props.value;
 	let isFormControlDisabled = false;
 	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const staticValue = normalizeRangeValue(watchedValue, props.minValue, props.maxValue);
 		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
@@ -165,13 +166,12 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 			contentWrapperClassName: "flex w-full items-center gap-input-gap-input-text-to-elements",
 			dataAttributes,
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			isClearable: false,
-			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
+			labelPlacement: "content-row",
+			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx("input", {
+					id,
 					readOnly: true,
 					disabled: isDisabled,
 					tabIndex: -1,
@@ -190,6 +190,7 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
 					children: "-"
 				}),
 				/* @__PURE__ */ jsx("input", {
+					id: `${id}-max`,
 					readOnly: true,
 					disabled: isDisabled,
 					tabIndex: -1,

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

@@ -4,6 +4,7 @@ import { inputBase } from "../../shared/input.cva.js";
 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 { InputContent } from "../shared/InputContent.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -119,8 +120,12 @@ var TextInputBase = (props) => {
 var TextInput = ({ renderStaticInput, ...props }) => {
 	const ui = UIConfig.useConfig();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
 	const watchedValue = "formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -130,11 +135,6 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 	const staticValue = watchedValue ?? props.value ?? props.defaultValue ?? "";
 	const inputType = props.type;
 	if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => inputRef.current?.focus());
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
@@ -158,20 +158,17 @@ var TextInput = ({ renderStaticInput, ...props }) => {
 			className: clsx("group w-full", as === "inline" && "h-full", props.className),
 			dataAttributes,
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			inputClassName: props.inputClassName,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: inputType === "hidden" ? "password" : inputType,
-				readOnly: true,
 				disabled: isDisabled,
 				tabIndex: -1,
 				value: displayValue,
 				placeholder: as === "floating" ? "" : props.placeholder,
 				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true
 			})

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

@@ -1,11 +1,12 @@
 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 { getStaticSelectValue } from "../shared/staticSelect.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
@@ -37,8 +38,13 @@ function _Autocomplete(props) {
 function Autocomplete({ renderStaticInput, ...props }) {
 	const ui = UIConfig.useConfig();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const rootRef = useRef(null);
+	const { renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef: rootRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (root) => root.querySelector("input, [data-type='select-trigger'], button, [tabindex]")
+	});
 	const currentValue = ("formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -46,13 +52,6 @@ function Autocomplete({ renderStaticInput, ...props }) {
 	let isFormControlDisabled = false;
 	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
 	if (!renderInput && !!props.customTrigger) setRenderInput(true);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(rootRef.current?.querySelector("input, [data-type='select-trigger'], button, [tabindex]"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
@@ -94,22 +93,19 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent
 			}),
 			trailingContent,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && !isEmpty && displayValue, /* @__PURE__ */ jsx("input", {
-				readOnly: true,
 				disabled: isDisabled,
 				tabIndex: -1,
 				value: inputValue,
 				placeholder: isMultiple && 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),
+				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true
 			})] })

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

@@ -1,11 +1,12 @@
 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 { getStaticSelectValue } from "../shared/staticSelect.utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/Select.tsx
@@ -32,8 +33,13 @@ function _Select(props) {
 function Select({ renderStaticInput, ...props }) {
 	const ui = UIConfig.useConfig();
 	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
-	const [shouldFocus, setShouldFocus] = useState(false);
 	const rootRef = useRef(null);
+	const { renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef: rootRef,
+		renderInput,
+		setRenderInput,
+		getFocusTarget: (root) => root.querySelector("[data-type='select-trigger'], input, button, [tabindex]")
+	});
 	const currentValue = ("formControl" in props && props.formControl ? useWatch({
 		control: props.formControl.control,
 		name: props.formControl.name
@@ -42,13 +48,6 @@ function Select({ renderStaticInput, ...props }) {
 	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
 	if (!renderInput && props.selectionMode !== "multiple" && !!props.showSelectionContent && currentValue != null) setRenderInput(true);
 	if (!renderInput && !!props.customTrigger) setRenderInput(true);
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(rootRef.current?.querySelector("[data-type='select-trigger'], input, button, [tabindex]"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
 	if (!renderInput) {
 		const as = props.as ?? ui.input.as;
 		let isDisabled = !!props.isDisabled;
@@ -95,10 +94,7 @@ function Select({ renderStaticInput, ...props }) {
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent
@@ -106,12 +102,12 @@ function Select({ renderStaticInput, ...props }) {
 			showClear: false,
 			trailingContent,
 			children: (dataAttributeProps) => /* @__PURE__ */ jsxs(Fragment, { children: [isMultiple && !isEmpty && displayValue, isSearchable ? /* @__PURE__ */ jsx("input", {
-				readOnly: true,
 				disabled: isDisabled,
 				tabIndex: -1,
 				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),
+				onChange: (event) => replayStaticInputChange(event.target.value),
 				...dataAttributeProps,
 				"data-rac": true
 			}) : /* @__PURE__ */ jsx("button", {

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

@@ -33,8 +33,12 @@ type InputFrameDataAttributeProps = {
     "data-is-filled"?: boolean;
     "data-is-required"?: boolean;
 };
-type InputFrameChildren = ReactNode | ((dataAttributeProps: InputFrameDataAttributeProps) => ReactNode);
+type InputFrameChildProps = InputFrameDataAttributeProps & {
+    id: string;
+};
+type InputFrameChildren = ReactNode | ((childProps: InputFrameChildProps) => ReactNode);
 type InputFrameLabelPlacement = "content-wrapper" | "content-row";
+type InputFrameActionContentPlacement = "content-wrapper" | "content-row";
 export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
     ref?: Ref<HTMLDivElement>;
     children: InputFrameChildren;
@@ -44,6 +48,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     leadingContent?: ReactNode;
     leadingIcon?: InputFrameIcon;
     actionContent?: ReactNode;
+    actionContentPlacement?: InputFrameActionContentPlacement;
     trailingContent?: ReactNode;
     trailingIcon?: InputFrameIcon;
     trailingAction?: ReactNode;
@@ -58,6 +63,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     onClear?: () => void;
     dataAttributes?: InputFrameDataAttributes;
     typographySize?: TypographyVariantProps["size"];
+    id?: string;
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;

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

@@ -10,7 +10,7 @@ import { FormField } from "../FormField/FormField.js";
 import { TooltipWrapper } from "../shared/TooltipWrapper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isValidElement } from "react";
+import { isValidElement, useId } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
 var InputFrame = (props) => {
 	const ui = UIConfig.useConfig();
@@ -18,7 +18,8 @@ var InputFrame = (props) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	const typographyCva = UIStyle.useCva("typography.cva", typography);
-	const { ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel: hideLabelProp, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable: isClearableProp, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant: variantProp, as: asProp, size: sizeProp } = props;
+	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, labelPlacement = "content-wrapper", trailingClassName, 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;
@@ -29,6 +30,12 @@ var InputFrame = (props) => {
 	const hasTrailingContent = hasClear || !!trailingContent || !!unit || !!isLoading || !!action || !!trailingIcon || !!trailingAction;
 	const isTrailingInteractive = !!action || !!trailingAction || !!isTrailingIconElement || hasClear && !!showClear || !!trailingContent;
 	const dataAttributeProps = getInputFrameDataAttributeProps(dataAttributes);
+	const baseLabelProps = headerProps?.labelProps ?? labelPropsProp;
+	const inputId = idProp ?? baseLabelProps?.htmlFor ?? `input-frame_${generatedInputId}`;
+	const labelProps = {
+		...baseLabelProps,
+		htmlFor: inputId
+	};
 	const formFieldProps = {
 		error,
 		label: label ?? "",
@@ -43,7 +50,10 @@ var InputFrame = (props) => {
 		errorClassName,
 		className
 	};
-	const resolvedHeaderProps = headerProps ?? {
+	const resolvedHeaderProps = headerProps ? {
+		...headerProps,
+		labelProps
+	} : {
 		label: label ?? "",
 		tooltipText,
 		helperText,
@@ -107,12 +117,16 @@ var InputFrame = (props) => {
 							children: renderIconVisual(leadingIcon)
 						}),
 						labelPlacement === "content-row" && labelContent,
+						actionContentPlacement === "content-row" && actionContent,
 						/* @__PURE__ */ jsxs("div", {
 							className: resolvedContentWrapperClassName,
 							children: [
 								labelPlacement === "content-wrapper" && labelContent,
-								actionContent,
-								typeof children === "function" ? children(dataAttributeProps) : children
+								actionContentPlacement === "content-wrapper" && actionContent,
+								typeof children === "function" ? children({
+									...dataAttributeProps,
+									id: inputId
+								}) : children
 							]
 						})
 					]

package/dist/components/inputs/shared/useStaticInputHandoff.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+interface StaticInputHandoffOptions<TElement extends HTMLElement> {
+    inputRef: RefObject<TElement | null>;
+    renderInput: boolean;
+    setRenderInput: Dispatch<SetStateAction<boolean>>;
+    getFocusTarget?: (element: TElement) => HTMLElement | null | undefined;
+}
+export declare const useStaticInputHandoff: <TElement extends HTMLElement = HTMLInputElement>({ inputRef, renderInput, setRenderInput, getFocusTarget, }: StaticInputHandoffOptions<TElement>) => {
+    shouldFocus: boolean;
+    renderRealInput: (focus: boolean) => void;
+    replayStaticInputChange: (value: string) => void;
+};
+export {};

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

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/components/inputs/shared/useStaticInputHandoff.ts
+var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget }) => {
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const pendingStaticChangeRef = useRef(null);
+	useEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		const frame = requestAnimationFrame(() => {
+			const input = inputRef.current;
+			const pendingValue = pendingStaticChangeRef.current;
+			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
+			if (focusTarget instanceof HTMLInputElement && pendingValue != null) {
+				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
+				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
+				pendingStaticChangeRef.current = null;
+			}
+			focusTarget?.focus();
+			setShouldFocus(false);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		getFocusTarget,
+		inputRef,
+		renderInput,
+		shouldFocus
+	]);
+	return {
+		shouldFocus,
+		renderRealInput: (focus) => {
+			setShouldFocus(focus);
+			setRenderInput(true);
+		},
+		replayStaticInputChange: (value) => {
+			pendingStaticChangeRef.current = value;
+			setShouldFocus(true);
+			setRenderInput(true);
+		}
+	};
+};
+//#endregion
+export { useStaticInputHandoff };

package/package.json

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