@povio/ui 3.4.0-rc.19 → 3.4.0-rc.20

package/dist/{components/inputs/Skeleton/InputFrame.js → useStaticInputHandoff-COJdSrME.js}

@@ -1,15 +1,13 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { typographyDefinition } from "../../text/Typography/typography.cva.js";
-import { Loader } from "../../loader.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
-import { InlineIconButton } from "../../inline-icon-button.js";
-import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
-import { FormField } from "../../form-field.js";
-import { InputClear } from "../shared/InputClear.js";
-import { inputBaseDefinition, inputContentWrapperDefinition, inputSizeDefinition } from "../shared/input.cva.js";
-import { TooltipWrapper } from "../shared/TooltipWrapper.js";
-import { clsx } from "clsx";
-import { isValidElement, useId, useRef } from "react";
+import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { r as FormFieldLabel, t as FormField } from "./FormField-DoGaUqFm.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
+import { t as typographyDefinition } from "./typography.cva-BI0FyIqm.js";
+import { t as Loader } from "./Loader-C6YkWZOO.js";
+import { InlineIconButton } from "./components/inline-icon-button.js";
+import { r as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CLMp_zj4.js";
+import { a as inputSizeDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
+import { isValidElement, useId, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
 const InputFrame = (props) => {
@@ -239,4 +237,85 @@ const getInputFrameDataAttributeProps = (dataAttributes) => ({
 	"data-has-selection": dataAttributes?.dataHasSelection || void 0
 });
 //#endregion
-export { InputFrame };
+//#region src/components/inputs/shared/useStaticInputHandoff.ts
+const useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget, getPressTarget }) => {
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const pendingStaticChangeRef = useRef(null);
+	const pendingStaticFocusTargetRef = useRef(null);
+	const resolvedFocusTargetRef = useRef(null);
+	const shouldReplayStaticPressRef = useRef(false);
+	const hoverHandoffFrameRef = useRef(null);
+	useLayoutEffect(() => () => {
+		if (hoverHandoffFrameRef.current !== null) cancelAnimationFrame(hoverHandoffFrameRef.current);
+	}, []);
+	useLayoutEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		const focusRealInput = (replayPendingInteraction) => {
+			const input = inputRef.current;
+			const pendingValue = pendingStaticChangeRef.current;
+			let focusTarget = null;
+			if (!replayPendingInteraction && resolvedFocusTargetRef.current) focusTarget = resolvedFocusTargetRef.current;
+			else if (input) focusTarget = getFocusTarget?.(input, pendingStaticFocusTargetRef.current) ?? input;
+			if (replayPendingInteraction) resolvedFocusTargetRef.current = focusTarget;
+			if (replayPendingInteraction && 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();
+			if (!replayPendingInteraction) {
+				pendingStaticFocusTargetRef.current = null;
+				resolvedFocusTargetRef.current = null;
+			}
+			if (replayPendingInteraction && shouldReplayStaticPressRef.current) {
+				shouldReplayStaticPressRef.current = false;
+				(input ? getPressTarget?.(input) ?? focusTarget : focusTarget)?.click();
+			}
+		};
+		focusRealInput(true);
+		const frame = requestAnimationFrame(() => {
+			focusRealInput(false);
+			setShouldFocus(false);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		getFocusTarget,
+		getPressTarget,
+		inputRef,
+		renderInput,
+		shouldFocus
+	]);
+	return {
+		shouldFocus,
+		renderRealInput: (focus, target) => {
+			pendingStaticFocusTargetRef.current = target ?? null;
+			setShouldFocus(focus);
+			if (focus) {
+				if (hoverHandoffFrameRef.current !== null) {
+					cancelAnimationFrame(hoverHandoffFrameRef.current);
+					hoverHandoffFrameRef.current = null;
+				}
+				setRenderInput(true);
+				return;
+			}
+			hoverHandoffFrameRef.current = requestAnimationFrame(() => {
+				hoverHandoffFrameRef.current = null;
+				setRenderInput(true);
+			});
+		},
+		replayStaticInputChange: (value) => {
+			pendingStaticChangeRef.current = value;
+			setShouldFocus(true);
+			setRenderInput(true);
+		},
+		replayStaticInputPress: () => {
+			shouldReplayStaticPressRef.current = true;
+			setShouldFocus(true);
+			setRenderInput(true);
+		}
+	};
+};
+//#endregion
+export { InputFrame as n, useStaticInputHandoff as t };