@adyen/adyen-platform-experience-web
Version:
97 lines (96 loc) • 3.83 kB
JavaScript
import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { ButtonVariant as b } from "../Button/types.js";
import { useClickOutside as C } from "../../../hooks/element/useClickOutside.js";
import { useResponsiveContainer as w, containerQueries as g } from "../../../hooks/useResponsiveContainer.js";
import N, { getDeepActiveElement as R } from "../../../primitives/dom/tabbableRoot/tabbable.js";
import E from "../../../hooks/element/useFocusTrap.js";
import { useContext as M, useRef as u, useCallback as k, useEffect as T } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { Fragment as A, createContext as B } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import s from "classnames";
/* empty css */
import I from "../../../core/Context/preact/useCoreContext.js";
import F from "../Button/Button.js";
import { Icon as Q } from "../Icon/Icon.js";
const p = B({ withinModal: !1 }), W = () => M(p);
function X({
title: n,
children: f,
classNameModifiers: h = [],
isOpen: a,
onClose: c,
isDismissible: t = !0,
headerWithBorder: y = !0,
size: o = "fluid",
...v
}) {
const { i18n: x } = I(), _ = w(g.down.xs), d = u(null), i = u(null), m = k(() => {
a && t && (i.current?.focus(), c());
}, [a, t, c]), l = E(C(null, m), m);
return T(() => {
if (a && l.current) {
i.current = R();
let r = N();
return d.current?.focus(), r.root = l.current, r.current = 1, d.current?.remove(), () => {
r.root = null, r = null;
};
}
}, [a, l]), /* @__PURE__ */ e(A, { children: a && /* @__PURE__ */ e(
"div",
{
className: s(
"adyen-pe-modal-wrapper",
h.map((r) => `adyen-pe-modal-wrapper--${r}`),
{ "adyen-pe-modal-wrapper--open": a, "adyen-pe-modal-wrapper--dismissible": t }
),
role: "dialog",
"aria-modal": "true",
"aria-hidden": "false",
...v,
children: /* @__PURE__ */ e(p.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
"div",
{
className: s("adyen-pe-modal", {
"adyen-pe-modal--fluid": o === "fluid",
"adyen-pe-modal--small": o === "small",
"adyen-pe-modal--large": o === "large",
"adyen-pe-modal--extra-large": o === "extra-large",
"adyen-pe-modal--full-screen": o === "full-screen" || _
}),
ref: l,
children: [
/* @__PURE__ */ e("div", { className: "adyen-pe-visually-hidden", ref: d, tabIndex: -1 }),
/* @__PURE__ */ e(
"div",
{
className: s("adyen-pe-modal__header", {
"adyen-pe-modal__header--with-title": n,
"adyen-pe-modal__header--with-border-bottom": y
}),
children: [
n && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header-title", children: n }),
t && /* @__PURE__ */ e(
F,
{
onClick: m,
variant: b.TERTIARY,
iconButton: !0,
classNameModifiers: ["circle"],
className: "adyen-pe-modal__dismiss-button",
"aria-label": x.get("common.modal.controls.dismiss.label"),
children: /* @__PURE__ */ e(Q, { name: "cross" })
}
)
]
}
),
/* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: f })
]
}
) })
}
) });
}
export {
X as default,
W as useModalContext
};