@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.
130 lines (129 loc) • 5.23 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] = "56ac0197-7da2-48f4-896a-18da29c0d808", e._sentryDebugIdIdentifier = "sentry-dbid-56ac0197-7da2-48f4-896a-18da29c0d808");
} catch (e) {}
import { n as IconButton } from "./Button-oj6H8OrC.js";
import { t as KEYBOARD_KEYS } from "./keys-fzUbt2xF.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 };