@adyen/adyen-platform-experience-web
Version:
89 lines (88 loc) • 3.32 kB
JavaScript
import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { useClickOutside as w } from "../../../hooks/element/useClickOutside.js";
import { useResponsiveContainer as v, containerQueries as _ } from "../../../hooks/useResponsiveContainer.js";
import { ButtonVariant as x } from "../Button/types.js";
import g from "../../../core/Context/useCoreContext.js";
import { useContext as k, useCallback as C, useEffect as E } from "../../../external/preact/hooks/dist/hooks.module.js";
import { createContext as N, Fragment as M } from "../../../external/preact/dist/preact.module.js";
import m from "classnames";
/* empty css */
import B from "../Button/Button.js";
import { Icon as L } from "../Icon/Icon.js";
const i = N({ withinModal: !1 }), S = () => k(i);
function V({
title: t,
children: c,
classNameModifiers: s = [],
isOpen: a,
onClose: o,
isDismissible: d = !0,
headerWithBorder: p = !0,
size: r = "fluid",
...u
}) {
const f = v(_.down.xs), { i18n: y } = g(), h = w(null, o), n = C(
(l) => {
l.key === "Escape" && a && d && o();
},
[a, d, o]
);
return E(() => (a ? window.addEventListener("keydown", n) : window.removeEventListener("keydown", n), () => window.removeEventListener("keydown", n)), [a, n]), /* @__PURE__ */ e(M, { children: a && /* @__PURE__ */ e(
"div",
{
className: m(
"adyen-pe-modal-wrapper",
s.map((l) => `adyen-pe-modal-wrapper--${l}`),
{ "adyen-pe-modal-wrapper--open": a, "adyen-pe-modal-wrapper--dismissible": d }
),
role: "dialog",
"aria-modal": "true",
"aria-hidden": !open,
...u,
children: /* @__PURE__ */ e(i.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
"div",
{
className: m("adyen-pe-modal", {
"adyen-pe-modal--fluid": r === "fluid",
"adyen-pe-modal--small": r === "small",
"adyen-pe-modal--large": r === "large",
"adyen-pe-modal--extra-large": r === "extra-large",
"adyen-pe-modal--full-screen": r === "full-screen" || f
}),
ref: h,
children: [
/* @__PURE__ */ e(
"div",
{
className: m("adyen-pe-modal__header", {
"adyen-pe-modal__header--with-title": t,
"adyen-pe-modal__header--with-border-bottom": p
}),
children: [
t && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header__title", children: t }),
d && /* @__PURE__ */ e(
B,
{
onClick: o,
variant: x.TERTIARY,
iconButton: !0,
classNameModifiers: ["circle"],
className: "adyen-pe-modal__header-icon",
"aria-label": y.get("dismiss"),
children: /* @__PURE__ */ e(L, { name: "cross" })
}
)
]
}
),
/* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: c })
]
}
) })
}
) });
}
export {
V as default,
S as useModalContext
};