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