@adyen/kyc-components/dist/InputText-C30dZxS4.js

This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.

try {
	let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
	n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "4b1037c4-db75-4760-9355-e7537ac1359c", e._sentryDebugIdIdentifier = "sentry-dbid-4b1037c4-db75-4760-9355-e7537ac1359c");
} catch (e) {}
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { t as debouncedInputEvent } from "./debouncedInputEvent-Dxv4-RAv.js";
import { forwardRef } from "preact/compat";
import { useCallback as useCallback$1, useLayoutEffect, useRef as useRef$1, useState as useState$1 } from "preact/hooks";
import cx from "classnames";
import { jsx } from "preact/jsx-runtime";
//#region src/components/ui/atoms/InputBase/InputBase.tsx
var InputBase = forwardRef((props, ref) => {
	const userEvents = useAnalyticsContext();
	const { enableTracking = false, ...passedProps } = props;
	const { isInvalid, isValid, type = "text", disabled, name } = props;
	const handleInput = (e) => {
		if (enableTracking) debouncedInputEvent(userEvents, {
			actionType: "input",
			field: name
		});
		props.onInput?.(e);
	};
	const handleBlur = (e) => {
		if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
			actionType: "blur",
			field: name
		});
		props.onBlurHandler?.(e);
		if (props.trimOnBlur) e.currentTarget.value = e.currentTarget.value.trim();
		props.onBlur?.(e);
	};
	const handleFocus = (e) => {
		if (enableTracking) userEvents.addFieldEvent("Interacted with form field", {
			actionType: "focus",
			field: name
		});
		props.onFocusHandler?.(e);
	};
	const inputClassNames = cx("adyen-kyc-input", [`adyen-kyc-input--${type}`], props.className, {
		"adyen-kyc-input--invalid": isInvalid,
		"adyen-kyc-field--valid": isValid,
		"adyen-kyc-input--disabled": disabled
	});
	return /* @__PURE__ */ jsx("input", {
		...passedProps,
		name,
		"aria-disabled": disabled,
		"aria-invalid": !isValid,
		"aria-required": passedProps.required || passedProps["aria-required"],
		className: inputClassNames,
		onBlur: handleBlur,
		onFocus: handleFocus,
		onInput: handleInput,
		ref,
		type
	});
});
InputBase.displayName = "InputBase";
//#endregion
//#region src/utils/useForwardRef.ts
var useForwardedRef = (forwardedRef) => {
	const backupRef = useRef$1();
	return forwardedRef ?? backupRef;
};
//#endregion
//#region src/components/ui/molecules/InputText/InputText.tsx
var InputText = forwardRef(({ onInput, onBlur, transformInput, transformMode, ...props }, ref) => {
	const [cursorPosition, setCursorPosition] = useState$1(null);
	const localRef = useForwardedRef(ref);
	const inputHandler = useCallback$1((event) => {
		const inputEl = event.currentTarget;
		if (transformInput && (!transformMode || transformMode === "input")) {
			setCursorPosition(inputEl.selectionStart);
			const transformedInput = transformInput(inputEl.value);
			onInput({
				...event,
				target: {
					...event.target,
					value: transformedInput
				}
			});
		} else onInput(event);
	}, [
		transformInput,
		transformMode,
		onInput
	]);
	const blurHandler = useCallback$1((event) => {
		const inputEl = event.currentTarget;
		if (transformInput && transformMode === "blur") {
			setCursorPosition(inputEl.selectionStart);
			const transformedInput = transformInput(inputEl.value);
			const eventWithTransformedValue = {
				...event,
				target: {
					...event.target,
					value: transformedInput
				}
			};
			onBlur?.(eventWithTransformedValue);
		} else onBlur?.(event);
	}, [
		transformInput,
		transformMode,
		onBlur
	]);
	useLayoutEffect(() => {
		if (cursorPosition && localRef.current?.selectionStart !== cursorPosition) localRef?.current?.setSelectionRange(cursorPosition, cursorPosition, "none");
	}, [cursorPosition, localRef]);
	return /* @__PURE__ */ jsx(InputBase, {
		...props,
		onInput: inputHandler,
		onBlur: blurHandler,
		ref: localRef,
		type: "text"
	});
});
//#endregion
export { useForwardedRef as n, InputBase as r, InputText as t };