@adyen/kyc-components
Version:
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.
156 lines (155 loc) • 6.08 kB
JavaScript
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] = "c4cb2f53-ad1b-43c6-9a48-74e06d9ae870", e._sentryDebugIdIdentifier = "sentry-dbid-c4cb2f53-ad1b-43c6-9a48-74e06d9ae870");
} catch (e) {}
import { a as Icon, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as useAnalyticsContext } from "./useAnalyticsContext-BVFDMrVE.js";
import { a as translateTranslatable } from "./utils-B807QaDx.js";
import { t as useId } from "./useId-eJSYfA6i.js";
import { useEffect } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
//#region src/components/ui/molecules/ErrorPanel/constants.ts
var ARIA_ERROR_SUFFIX = "-ariaError";
//#endregion
//#region src/components/ui/atoms/Field/Field.tsx
/**
* Internal component to render either a wrapping `<div>` for a single input field,
* or a `<fieldset>` for a group of related inputs (like RadioGroupCard or RadioGroup).
*/
var MaybeFieldset = ({ children, className, name, disabled, el, dataTestId }) => el === "fieldset" ? /* @__PURE__ */ jsx("fieldset", {
name,
disabled,
className,
"data-testid": dataTestId,
children
}) : /* @__PURE__ */ jsx("div", {
className,
"data-testid": dataTestId,
children
});
/**
* A wrapper component for form inputs that provides consistent layout and handling for labels,
* descriptions (ex. helper text, error text), validation, styling, etc.
* For use with various input components like `InputText`, `InputDate`, `Select`, etc.
*
* FieldChildProps are props passed to children which include a unique identifier (id) and other validation/a11y related props
*
* @example
* ```tsx
* <Field name="lastName" label="Last name" isValid={valid?.lastName} helper="This is helper text" >
{(childProps) => (
<InputText
{...childProps}
name="lastName"
value={data?.lastName}
/>
)}
</Field>
* ```
*/
var Field = ({ className, classNameModifiers = [], children, disabled, optional, errorMessage, formatGuidance, helper, helperPosition = "above", isValid, label, name, showErrorIconBottom = false, showErrorIcon = true, el = "div", dataTestId, onBlur, onFieldBlur, onFocus }) => {
const uniqueId = useId("field");
const { t } = useTranslation("common");
const userEvents = useAnalyticsContext();
const Label = el === "fieldset" ? "legend" : "label";
useEffect(() => {
if (!errorMessage) return;
const returnValue = typeof errorMessage === "string" && errorMessage || typeof errorMessage === "object" && errorMessage.key || "invalid";
userEvents.addFieldEvent("Encountered error", {
actionType: "input",
field: name,
returnType: "validation",
returnValue
});
}, [
name,
errorMessage,
userEvents
]);
const elementIds = {
label: `${uniqueId}-label`,
helper: `${uniqueId}-helper`,
error: `${uniqueId}${ARIA_ERROR_SUFFIX}`,
guidanceText: `${uniqueId}-guidanceText`
};
const inputDescribedBy = `${errorMessage ? elementIds.error : ""} ${helper ? elementIds.helper : ""} ${formatGuidance ? elementIds.guidanceText : ""}`.trim();
return /* @__PURE__ */ jsxs(MaybeFieldset, {
className: cx("adyen-kyc-field", className, classNameModifiers.map((m) => `adyen-kyc-field--${m}`), {
"adyen-kyc-field--error": !!errorMessage,
"adyen-kyc-field--valid": isValid,
"adyen-kyc-field--disabled": disabled
}),
name,
disabled,
el,
dataTestId,
children: [
label && /* @__PURE__ */ jsxs(Label, {
id: elementIds.label,
htmlFor: el === "fieldset" ? void 0 : uniqueId,
className: cx("adyen-kyc-label__text", { "adyen-kyc-label__text--error": !!errorMessage }),
children: [label, optional && /* @__PURE__ */ jsxs("span", {
className: "adyen-kyc-optional-label",
children: [" ", t(($) => $["optional"])]
})]
}),
helper && helperPosition === "above" && /* @__PURE__ */ jsx("span", {
id: elementIds.helper,
className: "adyen-kyc-helper-text adyen-kyc-helper-text__above",
children: helper
}),
/* @__PURE__ */ jsxs("div", {
className: "adyen-kyc-input-wrapper",
children: [
children({
id: uniqueId,
"aria-labelledby": elementIds.label,
"aria-describedby": inputDescribedBy,
isInvalid: !!errorMessage,
isValid: !!isValid,
onBlurHandler: (e) => {
if (typeof onBlur === "function") onBlur(e);
if (typeof onFieldBlur === "function") onFieldBlur(e);
},
onFocusHandler: (e) => {
if (typeof onFocus === "function") onFocus(e);
}
}),
helper && helperPosition === "below" && /* @__PURE__ */ jsx("span", {
id: elementIds.helper,
className: "adyen-kyc-helper-text adyen-kyc-helper-text__below",
children: helper
}),
!!errorMessage && !showErrorIconBottom && showErrorIcon && /* @__PURE__ */ jsx("span", {
className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--invalid",
children: /* @__PURE__ */ jsx(Icon, { name: "field-error" })
})
]
}),
/* @__PURE__ */ jsxs("div", {
"aria-live": "polite",
"aria-atomic": true,
className: "adyen-kyc-error-text",
children: [/* @__PURE__ */ jsx("span", {
className: "adyen-kyc-u-screen-reader-only",
children: `${label}:`
}), !!errorMessage && typeof errorMessage !== "boolean" && /* @__PURE__ */ jsxs("span", {
id: elementIds.error,
children: [translateTranslatable(t, errorMessage), showErrorIconBottom && /* @__PURE__ */ jsx("span", {
className: "adyen-kyc-input__inline-validation adyen-kyc-input__inline-validation--invalid-bottom",
children: /* @__PURE__ */ jsx(Icon, { name: "field-error" })
})]
})]
}),
!errorMessage && formatGuidance && /* @__PURE__ */ jsx("span", {
id: elementIds.guidanceText,
"aria-live": "polite",
className: "adyen-kyc-guidance-text",
children: formatGuidance
})
]
});
};
//#endregion
export { Field as t };