@povio/ui 2.2.9-rc.32 → 2.2.9-rc.34

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;
@@ -245,10 +246,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 				dataHasSelection: dateValue !== null
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,

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);
@@ -646,10 +647,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 				dataHasSelection: hasProvidedRangeValue
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,

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;
@@ -259,10 +260,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 				dataHasSelection: dateTimeValue !== null
 			},
 			renderStatic: true,
-			onStaticInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
+			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
 			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,

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/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,10 +166,7 @@ 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,
 			labelPlacement: "content-row",
 			children: ({ id, ...dataAttributeProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [

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/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,47 @@
+import { useLayoutEffect, 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);
+	useLayoutEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		const focusRealInput = (replayPendingChange) => {
+			const input = inputRef.current;
+			const pendingValue = pendingStaticChangeRef.current;
+			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
+			if (replayPendingChange && 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();
+		};
+		focusRealInput(true);
+		const frame = requestAnimationFrame(() => {
+			focusRealInput(false);
+			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.32",
+  "version": "2.2.9-rc.34",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",