@adyen/adyen-platform-experience-web
Version:
139 lines (138 loc) • 5.49 kB
JavaScript
import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import oo from "../Button/ButtonActions/ButtonActions.js";
import { ButtonActionsLayoutBasic as ro } from "../Button/ButtonActions/types.js";
import { DEFAULT_POPOVER_CLASSNAME as c, POPOVER_HEADER_TITLE_CLASSNAME as eo, TOOLTIP_CONTENT_CLASSNAME as U, POPOVER_CONTENT_CLASSNAME as N, POPOVER_FOOTER_CLASSNAME as no, DEFAULT_TOOLTIP_CLASSNAME as to, POPOVER_CONTAINER_CLASSNAME as co, POPOVER_HEADER_CLASSNAME as B } from "./constants.js";
import io from "./PopoverDismissButton/PopoverDismissButton.js";
import so from "./PopoverTitle/PopoverTitle.js";
import { PopoverContainerVariant as i, PopoverContainerSize as k } from "./types.js";
import { InteractionKeyCode as uo } from "../../types.js";
import { useClickOutside as mo, ClickOutsideVariant as po, CONTROL_ELEMENT_PROPERTY as O } from "../../../hooks/element/useClickOutside.js";
import ao from "../../../hooks/element/useFocusTrap.js";
import fo from "../../../hooks/element/usePopoverPositioner.js";
import w from "../../../hooks/element/useUniqueIdentifier.js";
import lo from "../../../hooks/useReflex.js";
import { SELECTORS as Oo, isFocusable as Eo } from "../../../primitives/dom/tabbableRoot/tabbable.js";
import b from "classnames";
import { createPortal as To } from "../../../external/preact/compat/dist/compat.module.js";
import { useMemo as q, useRef as L, useCallback as C, useEffect as x } from "../../../external/preact/hooks/dist/hooks.module.js";
/* empty css */
import { Fragment as _ } from "../../../external/preact/dist/preact.module.js";
import { isFunction as Po } from "../../../utils/value/is.js";
import { boolOrTrue as Ao } from "../../../utils/value/bool.js";
import { getModifierClasses as No } from "../../../utils/preact/className.js";
const Lo = (s) => {
var e;
let p;
const l = (e = s.querySelector(`.${U}`)) == null ? void 0 : e.querySelectorAll(Oo);
return l ? (Array.prototype.some.call(l, (u) => {
if (Eo(u)) return p = u;
}), p) : null;
}, Co = (s) => s === i.TOOLTIP ? [10, 3, 5, 5] : [15, 15, 15, 15];
function jo({
actions: s,
disableFocusTrap: p = !1,
actionsLayout: l = ro.SPACE_BETWEEN,
variant: e = i.TOOLTIP,
title: u,
open: a,
dismissible: y,
modifiers: K,
divider: S,
fitContent: R,
withoutSpace: v,
containerSize: d,
position: W,
targetElement: o,
setToTargetWidth: H,
dismiss: n,
children: I,
withContentPadding: j,
classNameModifiers: G,
showOverlay: f = !1,
fitPosition: Y,
...F
}) {
const M = q(() => Po(n) && Ao(y), [n, y]), V = w(), $ = L(), J = C(
(t) => {
var m;
n && n(), t && ((m = o == null ? void 0 : o.current) == null || m.focus());
},
[n, o]
), E = C(
(t) => {
t.code === uo.ESCAPE && (n && n(), (o == null ? void 0 : o.current).focus());
},
[n, o]
), T = L(E), h = L(), D = mo(
fo(Co(e), o, e, W, V, H, f, Y),
n,
e === i.TOOLTIP && !a,
po.POPOVER
), Q = ao(p ? null : D, J), P = lo(
C(
(t, m) => {
m instanceof Element && (m[O] = void 0, delete m[O]), t instanceof Element && (t[O] = o.current, cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
if ($.current === a || !($.current = a)) return;
const A = Lo(t);
A == null || A.focus();
}));
},
[a, o]
),
p ? D : Q
), X = w(P), Z = q(
() => ({
[`${c}--medium`]: d === k.MEDIUM,
[`${c}--with-divider`]: !!S,
[`${c}--wide`]: d === k.WIDE,
[`${c}--fit-content`]: R,
[`${c}--without-space`]: v,
[`${c}--auto-width`]: f
}),
[d, S, v, R, f]
);
x(() => {
P.current && (P.current[O] = o.current);
}, [o]), x(() => (document.removeEventListener("keydown", T.current), document.addEventListener("keydown", T.current = E), () => document.removeEventListener("keydown", T.current)), [E]);
const z = e === i.TOOLTIP ? to : `${c} ${co}`, g = e === i.TOOLTIP ? U : `${N}`;
return To(
/* @__PURE__ */ r(_, { children: a ? /* @__PURE__ */ r(_, { children: [
f && /* @__PURE__ */ r("div", { className: "adyen-pe-popover__overlay" }),
/* @__PURE__ */ r(
"div",
{
id: "popover",
ref: X,
...F,
className: b(z, Z, G),
style: { visibility: "hidden" },
role: F.role ?? (e === i.POPOVER ? "dialog" : "tooltip"),
children: [
(u || M) && /* @__PURE__ */ r("div", { className: No(B, K, [B]), children: [
u && /* @__PURE__ */ r("div", { className: eo, children: /* @__PURE__ */ r(so, { title: u }) }),
M && /* @__PURE__ */ r(io, { onClick: n })
] }),
I && /* @__PURE__ */ r(_, { children: [
/* @__PURE__ */ r(
"div",
{
className: b(g, {
[`${N}--with-padding`]: j,
[`${N}--overlay`]: f
}),
children: I
}
),
e === i.TOOLTIP && /* @__PURE__ */ r("span", { "data-popover-placement": "hidden", ref: V, className: "adyen-pe-tooltip__arrow" })
] }),
s && /* @__PURE__ */ r("div", { className: no, children: /* @__PURE__ */ r(oo, { actions: s, layout: l }) })
]
}
)
] }) : null }),
document.getElementsByTagName("body")[0]
);
}
export {
jo as default
};