@adyen/kyc-components 4.9.2 → 4.10.0-beta.0

package/dist/MaybeModal-BAH1s4oi.js

@@ -0,0 +1,24 @@
+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] = "85829a2d-a54a-4cac-9a66-3f051969888e", e._sentryDebugIdIdentifier = "sentry-dbid-85829a2d-a54a-4cac-9a66-3f051969888e");
+} catch (e) {}
+import { t as ToastContextProvider } from "./ToastContextProvider-BACK2Fdv.js";
+import { t as Modal } from "./Modal-TA-i9JLs.js";
+import { Fragment, jsx } from "preact/jsx-runtime";
+//#region src/components/ui/atoms/Modal/MaybeModal.tsx
+/**
+* Renders a modal or an inline div
+* @returns {Modal|HTMLDivElement}
+*/
+var MaybeModal = ({ ariaLabel, children, inline = false, inset, onClose, showCloseButton, size }) => {
+	return inline ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Modal, {
+		onClose,
+		ariaLabel,
+		size,
+		inset,
+		showCloseButton,
+		children: /* @__PURE__ */ jsx(ToastContextProvider, { children })
+	});
+};
+//#endregion
+export { MaybeModal as t };

package/dist/Modal-TA-i9JLs.js

@@ -0,0 +1,129 @@
+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] = "e0330c9c-d146-4566-ab76-a5596e3bc1a5", e._sentryDebugIdIdentifier = "sentry-dbid-e0330c9c-d146-4566-ab76-a5596e3bc1a5");
+} catch (e) {}
+import { n as IconButton } from "./Button-BrEOD5gK.js";
+import { t as KEYBOARD_KEYS } from "./keys-C4gD4IDn.js";
+import { useLayoutEffect, useRef } from "preact/hooks";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+var Modal_module_default = {
+	modal: "adyen-kyc-modal",
+	"modal-small": "adyen-kyc-modal-small",
+	modalSmall: "adyen-kyc-modal-small",
+	"modal-medium": "adyen-kyc-modal-medium",
+	modalMedium: "adyen-kyc-modal-medium",
+	"modal-large": "adyen-kyc-modal-large",
+	modalLarge: "adyen-kyc-modal-large",
+	"modal-body": "adyen-kyc-modal-body",
+	modalBody: "adyen-kyc-modal-body",
+	"modal-body-height": "adyen-kyc-modal-body-height",
+	modalBodyHeight: "adyen-kyc-modal-body-height",
+	"modal-accessable-title": "adyen-kyc-modal-accessable-title",
+	modalAccessableTitle: "adyen-kyc-modal-accessable-title",
+	"modal-transition-slide-in": "adyen-kyc-modal-transition-slide-in",
+	modalTransitionSlideIn: "adyen-kyc-modal-transition-slide-in",
+	"slide-in": "adyen-kyc-slide-in",
+	slideIn: "adyen-kyc-slide-in",
+	"modal-transition-drop-in": "adyen-kyc-modal-transition-drop-in",
+	modalTransitionDropIn: "adyen-kyc-modal-transition-drop-in",
+	"drop-in": "adyen-kyc-drop-in",
+	dropIn: "adyen-kyc-drop-in",
+	"modal-inset": "adyen-kyc-modal-inset",
+	modalInset: "adyen-kyc-modal-inset",
+	"backdrop-dissolve": "adyen-kyc-backdrop-dissolve",
+	backdropDissolve: "adyen-kyc-backdrop-dissolve",
+	"modal-button": "adyen-kyc-modal-button",
+	modalButton: "adyen-kyc-modal-button",
+	"modal-header": "adyen-kyc-modal-header",
+	modalHeader: "adyen-kyc-modal-header",
+	"modal-content": "adyen-kyc-modal-content",
+	modalContent: "adyen-kyc-modal-content",
+	"modal-footer": "adyen-kyc-modal-footer",
+	modalFooter: "adyen-kyc-modal-footer"
+};
+//#endregion
+//#region src/components/ui/atoms/Modal/Modal.tsx
+var Modal = ({ ariaLabel, children, inset = false, onClose, showCloseButton = true, size = "medium", transition = "slideIn" }) => {
+	const dialogRef = useRef(null);
+	const shouldShowCloseButton = onClose !== void 0 && showCloseButton;
+	useLayoutEffect(() => {
+		const dialogElement = dialogRef.current;
+		if (!dialogElement) return;
+		const handleCancel = (event) => {
+			event.preventDefault();
+			onClose?.();
+		};
+		const handleKeydown = (event) => {
+			if (event.key !== KEYBOARD_KEYS.escape) return;
+			event.preventDefault();
+			onClose?.();
+		};
+		try {
+			dialogElement.addEventListener("keydown", handleKeydown);
+			dialogElement.addEventListener("cancel", handleCancel);
+			dialogElement.showModal();
+		} catch {
+			console.warn("Could not call `showModal()` on the <dialog>; likely it was already removed from the document.");
+			return;
+		}
+		dialogElement.focus();
+		dialogElement.blur();
+		return () => {
+			dialogElement.removeEventListener("cancel", handleCancel);
+			dialogElement.removeEventListener("keydown", handleKeydown);
+			dialogElement.close();
+		};
+	}, []);
+	const transitionStyle = {
+		slideIn: Modal_module_default.modalTransitionSlideIn,
+		dropIn: Modal_module_default.modalTransitionDropIn
+	};
+	const sizeStyle = {
+		small: Modal_module_default.modalSmall,
+		medium: Modal_module_default.modalMedium,
+		large: Modal_module_default.modalLarge,
+		fullscreen: null
+	};
+	const rootClassname = cx(Modal_module_default.modal, transitionStyle[transition], sizeStyle[size]);
+	const bodyClassname = cx(Modal_module_default.modalBody, {
+		[Modal_module_default.modalInset]: inset,
+		[Modal_module_default.modalBodyHeight]: size !== "small"
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `html,body { overflow: hidden !important; }` }), /* @__PURE__ */ jsxs("dialog", {
+		"aria-label": ariaLabel,
+		className: rootClassname,
+		ref: dialogRef,
+		children: [shouldShowCloseButton && /* @__PURE__ */ jsx("div", {
+			className: Modal_module_default.modalButton,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				ariaLabel: "Close",
+				circle: true,
+				icon: "cross",
+				onClick: onClose,
+				variant: "surface"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: bodyClassname,
+			"data-testid": "modal-body",
+			children
+		})]
+	})] });
+};
+/** @deprecated do not use in new UI */
+var ModalHeader = ({ children }) => /* @__PURE__ */ jsx("header", {
+	className: Modal_module_default.modalHeader,
+	children
+});
+/** @deprecated do not use in new UI. If you need inset styling, use the `inset` prop on the Modal component. */
+var ModalContent = ({ children }) => /* @__PURE__ */ jsx("section", {
+	className: Modal_module_default.modalContent,
+	children
+});
+/** @deprecated do not use in new UI */
+var ModalFooter = ({ children }) => /* @__PURE__ */ jsx("footer", {
+	className: Modal_module_default.modalFooter,
+	children
+});
+//#endregion
+export { ModalHeader as i, ModalContent as n, ModalFooter as r, Modal as t };

package/dist/Name-CaEi9FTW.js

@@ -0,0 +1,61 @@
+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] = "a9b12570-e564-4797-8bbb-98efc32125fd", e._sentryDebugIdIdentifier = "sentry-dbid-a9b12570-e564-4797-8bbb-98efc32125fd");
+} catch (e) {}
+import { r as useTranslation } from "./translation-HjimzbDK.js";
+import { t as createFormUtils } from "./formUtils-C0FUvDnF.js";
+import { t as Field } from "./Field-DH3pDFxY.js";
+import { t as InputText } from "./InputText--skSkkLS.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+//#region src/components/Shared/fields/Name/Name.tsx
+var nameFields = ["firstName", "lastName"];
+function Name(props) {
+	const { data, handleFieldChange, errors, valid, fieldValidationErrors } = props;
+	const { t } = useTranslation("common");
+	if (!handleFieldChange) return;
+	const formUtils = createFormUtils(props, t);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "adyen-kyc-field-wrapper",
+		children: [formUtils.isRequiredField("firstName") && /* @__PURE__ */ jsx(Field, {
+			name: "firstName",
+			label: formUtils.getLabel("firstName"),
+			className: "adyen-kyc-u-width-half",
+			errorMessage: formUtils.getErrorMessage("firstName", errors, fieldValidationErrors),
+			isValid: valid?.firstName,
+			helper: formUtils.getLabel("enterNameExactlyAsAppearInID"),
+			children: (childProps) => /* @__PURE__ */ jsx(InputText, {
+				...childProps,
+				name: "firstName",
+				value: data?.firstName,
+				readonly: formUtils.isReadOnly("firstName"),
+				onInput: handleFieldChange("firstName", "input"),
+				onBlur: handleFieldChange("firstName", "blur"),
+				trimOnBlur: true,
+				spellCheck: false,
+				"aria-required": true,
+				"aria-invalid": !valid?.firstName
+			})
+		}), formUtils.isRequiredField("lastName") && /* @__PURE__ */ jsx(Field, {
+			name: "lastName",
+			label: formUtils.getLabel("lastName"),
+			className: "adyen-kyc-u-width-half",
+			errorMessage: formUtils.getErrorMessage("lastName", errors, fieldValidationErrors),
+			isValid: valid?.lastName,
+			helper: formUtils.getLabel("enterLastNameExactlyAsAppearInID"),
+			children: (childProps) => /* @__PURE__ */ jsx(InputText, {
+				...childProps,
+				name: "lastName",
+				value: data?.lastName,
+				readonly: formUtils.isReadOnly("lastName"),
+				onInput: handleFieldChange("lastName", "input"),
+				onBlur: handleFieldChange("lastName", "blur"),
+				trimOnBlur: true,
+				spellCheck: false,
+				"aria-required": true,
+				"aria-invalid": !valid?.lastName
+			})
+		})]
+	});
+}
+//#endregion
+export { nameFields as n, Name as t };

package/dist/NewSummary-tGYwyb6d.js

@@ -0,0 +1,72 @@
+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] = "d6237487-0b5d-4da9-8d9c-f05660dc0cc0", e._sentryDebugIdIdentifier = "sentry-dbid-d6237487-0b5d-4da9-8d9c-f05660dc0cc0");
+} catch (e) {}
+import { i as Typography, r as useTranslation } from "./translation-HjimzbDK.js";
+import { n as IconButton } from "./Button-BrEOD5gK.js";
+import { t as StackLayout } from "./StackLayout-D0Kqs-Ti.js";
+import { t as Header } from "./Header-Bc32XYD-.js";
+import { t as useAnalyticsContext } from "./useAnalyticsContext-Msf0gvuf.js";
+import { t as List } from "./List-CV1oIvRM.js";
+import { t as StructuredList } from "./StructuredList-UlwDK_PO.js";
+import { t as trackNavigation } from "./trackNavigation--j_v51FT.js";
+import { jsx, jsxs } from "preact/jsx-runtime";
+import { defineSlots } from "named-slots";
+var SummarySection_module_default = {
+	"summary-header": "adyen-kyc-summary-header",
+	summaryHeader: "adyen-kyc-summary-header"
+};
+//#endregion
+//#region src/components/Shared/SummarySection/SummarySection.tsx
+var SummarySection = ({ formId, label, items, action }) => /* @__PURE__ */ jsxs(List, {
+	variant: "grouped-secondary",
+	children: [/* @__PURE__ */ jsxs("header", {
+		className: SummarySection_module_default.summaryHeader,
+		children: [/* @__PURE__ */ jsx(Typography, {
+			el: "h2",
+			variant: "title",
+			children: label
+		}), action]
+	}), /* @__PURE__ */ jsx(StructuredList, { items: items ?? [] })]
+}, formId);
+//#endregion
+//#region src/components/Shared/NewSummary/NewSummary.tsx
+var NewSummary = ({ children, handleEditForm, sections }) => {
+	const { t } = useTranslation("common");
+	const { Slot } = defineSlots(children, ["errorPanel", "extraContent"]);
+	const userEvents = useAnalyticsContext();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "region",
+		children: [/* @__PURE__ */ jsx(Header, {
+			title: t(($) => $["summary"]),
+			description: t(($) => $["summaryDescription"])
+		}), /* @__PURE__ */ jsxs(StackLayout, { children: [
+			/* @__PURE__ */ jsx(Slot, { name: "errorPanel" }),
+			sections.map(({ formId, label, items }) => {
+				if (formId === "summary") return;
+				return /* @__PURE__ */ jsx(SummarySection, {
+					formId,
+					label,
+					items,
+					action: /* @__PURE__ */ jsx(IconButton, {
+						variant: "tertiary",
+						icon: "edit",
+						onClick: () => {
+							trackNavigation({
+								userEvents,
+								actionType: "edit",
+								toForm: label,
+								label: "Pencil icon"
+							});
+							handleEditForm(formId);
+						},
+						ariaLabel: t(($) => $["editForm"], { formName: label })
+					})
+				}, formId);
+			}),
+			/* @__PURE__ */ jsx(Slot, { name: "extraContent" })
+		] })]
+	});
+};
+//#endregion
+export { SummarySection as n, NewSummary as t };