@adyen/kyc-components 4.0.0-beta.5 → 4.0.0-compact.0

package/dist/MaybeModal-CE9kYOrU.js

@@ -0,0 +1,25 @@
+;
+{
+  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] = "41909994-0d34-498c-9ec3-b1067bbdf914", e._sentryDebugIdIdentifier = "sentry-dbid-41909994-0d34-498c-9ec3-b1067bbdf914");
+  } catch (e) {
+  }
+}
+;
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { T as ToastContextProvider } from "./StoreProvider-BlaJzXSZ.js";
+import { M as Modal } from "./Modal-nMRQDTF7.js";
+const MaybeModal = ({
+  ariaLabel,
+  children,
+  inline = false,
+  inset,
+  onClose,
+  size
+}) => {
+  return inline ? /* @__PURE__ */ jsx(Fragment, { children }) : /* @__PURE__ */ jsx(Modal, { onClose, ariaLabel, size, inset, children: /* @__PURE__ */ jsx(ToastContextProvider, { children }) });
+};
+export {
+  MaybeModal as M
+};

package/dist/Modal-nMRQDTF7.js

@@ -0,0 +1,136 @@
+;
+{
+  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] = "6bfad05a-9544-484a-9535-da83f45aaf13", e._sentryDebugIdIdentifier = "sentry-dbid-6bfad05a-9544-484a-9535-da83f45aaf13");
+  } catch (e) {
+  }
+}
+;
+import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import cx from "classnames";
+import { useRef, useLayoutEffect } from "preact/hooks";
+import { K as KEYBOARD_KEYS } from "./keys-BpNgnAsD.js";
+import { P as IconButton } from "./StoreProvider-BlaJzXSZ.js";
+const modal = "adyen-kyc-modal";
+const modalBody = "adyen-kyc-modal-body";
+const modalBodyHeight = "adyen-kyc-modal-body-height";
+const modalTransitionSlideIn = "adyen-kyc-modal-transition-slide-in";
+const modalTransitionDropIn = "adyen-kyc-modal-transition-drop-in";
+const modalInset = "adyen-kyc-modal-inset";
+const modalSmall = "adyen-kyc-modal-small";
+const modalMedium = "adyen-kyc-modal-medium";
+const modalLarge = "adyen-kyc-modal-large";
+const modalFullscreen = "adyen-kyc-modal-fullscreen";
+const modalButton = "adyen-kyc-modal-button";
+const modalHeader = "adyen-kyc-modal-header";
+const modalContent = "adyen-kyc-modal-content";
+const modalFooter = "adyen-kyc-modal-footer";
+const styles = {
+  modal,
+  modalBody,
+  modalBodyHeight,
+  modalTransitionSlideIn,
+  modalTransitionDropIn,
+  modalInset,
+  modalSmall,
+  modalMedium,
+  modalLarge,
+  modalFullscreen,
+  modalButton,
+  modalHeader,
+  modalContent,
+  modalFooter
+};
+const 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 {
+      document.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);
+      document.removeEventListener("keydown", handleKeydown);
+      dialogElement.close();
+    };
+  }, []);
+  const transitionStyle = {
+    slideIn: styles.modalTransitionSlideIn,
+    dropIn: styles.modalTransitionDropIn
+  };
+  const sizeStyle = {
+    small: styles.modalSmall,
+    medium: styles.modalMedium,
+    large: styles.modalLarge,
+    fullscreen: styles.modalFullscreen
+  };
+  const rootClassname = cx(styles.modal, transitionStyle[transition], sizeStyle[size]);
+  const bodyClassname = cx(styles.modalBody, {
+    [styles.modalInset]: inset === true,
+    [styles.modalBodyHeight]: size !== "small"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `html,body { overflow: hidden !important; }` }),
+    /* @__PURE__ */ jsxs(
+      "dialog",
+      {
+        "aria-label": ariaLabel,
+        "aria-modal": "true",
+        className: rootClassname,
+        onClose,
+        ref: dialogRef,
+        children: [
+          shouldShowCloseButton && /* @__PURE__ */ jsx("div", { className: styles.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 })
+        ]
+      }
+    )
+  ] });
+};
+const ModalHeader = ({ children }) => /* @__PURE__ */ jsx("header", { className: styles.modalHeader, children });
+const ModalContent = ({ children }) => /* @__PURE__ */ jsx("section", { className: styles.modalContent, children });
+const ModalFooter = ({ children }) => /* @__PURE__ */ jsx("footer", { className: styles.modalFooter, children });
+export {
+  Modal as M,
+  ModalContent as a,
+  ModalFooter as b,
+  ModalHeader as c
+};