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