@adyen/adyen-platform-experience-web
Version:
180 lines (179 loc) • 6.43 kB
JavaScript
import { useState as P, useCallback as Y, useRef as y, useEffect as D } from "../../external/preact/hooks/dist/hooks.module.js";
import d from "../../components/internal/Popover/utils/utils.js";
import { PopoverContainerPosition as t, PopoverContainerVariant as v } from "../../components/internal/Popover/types.js";
import { isRefObject as W } from "../../primitives/reactive/reflex/helpers.js";
import V from "../useReflex.js";
const w = [
t.BOTTOM_RIGHT,
t.BOTTOM_LEFT,
t.TOP_RIGHT,
t.TOP_LEFT
], q = 5, A = 4, U = 10, Z = ({
position: M,
variant: _,
offset: O,
additionalStyle: i,
fixedPositioning: T,
fullWidth: F,
popover: a,
targetElement: r
}) => {
let n = 0, c = 0;
const B = _ === v.TOOLTIP, u = a.clientHeight, C = a.clientWidth, p = a.firstChild, k = p.offsetHeight, E = p.offsetWidth, h = document.body.getBoundingClientRect(), e = r.getBoundingClientRect(), L = h.x + (h.width - E) / 2, l = e.x + (e.width - E) / 2, m = e.y + (e.height - k) / 2, b = window.scrollX, s = window.scrollY;
switch (M) {
case t.BOTTOM:
n = F ? L : B ? l : e.x, c = e.y + e.height + O[1], T || (F || (n += b), c += s);
break;
case t.TOP:
n = B ? l : e.x, c = e.y - (u + O[0]), T || (n += b, c += s - p.clientHeight + u);
break;
case t.RIGHT:
n = e.x + e.width + O[2], c = B ? m : e.y - e.height / 2, T || (n += b, c += s);
break;
case t.LEFT:
n = e.x - (C + O[3]), c = B ? m : e.y - e.height / 2, T || (n += b, c += s);
break;
case t.BOTTOM_LEFT:
n = 5, c = e.y + e.height + O[1], T || (n += b, c += s);
break;
case t.BOTTOM_RIGHT:
n = -5, c = e.y + e.height + O[1], T || (n += b, c += s);
break;
case t.TOP_LEFT:
n = q, c = e.y - u, T || (n += b, c += s - p.clientHeight + u);
break;
case t.TOP_RIGHT:
n = -5, c = e.y - u, T || (n += b, c += s - p.clientHeight + u);
break;
}
const R = {};
if (i) {
const G = !!i.maxY && c + (a == null ? void 0 : a.clientHeight) > i.maxY, o = !!i.minY && c < i.minY;
if (G && i.maxY) {
const g = e.y + e.height + 8, H = Math.max(0, i.maxY - g);
H > 20 && (R.height = `${H}px`), R["overflow-y"] = "scroll";
}
if (o && i.minY && c) {
const g = a.offsetHeight ?? a.clientHeight, H = Math.max(0, g - (i.minY - c));
R.height = `${H}px`, H && (R["overflow-y"] = "scroll");
}
o && (c = i.minY ?? 0);
}
const I = M === t.TOP_RIGHT || M === t.BOTTOM_RIGHT;
return {
inset: I ? "0 0 auto auto" : "0 auto auto 0",
margin: "0",
position: T ? "fixed" : "absolute",
transform: `translate3d(${n}px, ${c}px, 0)`,
visibility: "hidden",
right: I ? 0 : "auto",
...R
};
}, tt = (M, _, O, i, T, F, a, r, n, c, B, u) => {
const [C, p] = P(!0), [k, E] = P(r ? !r : !!i), [h, e] = P(i || t.TOP), [L, l] = P([]), m = Y(
(s) => {
var G;
const R = document.documentElement.clientWidth, I = (G = _.current) == null ? void 0 : G.getBoundingClientRect();
if (s.intersectionRatio === 1) return E(!0);
if (!C && s.intersectionRatio !== 1) {
if (L && L.length === (r ? 8 : 4)) {
const o = L.reduce((g, H) => H[1] > g[1] ? H : g, L[0]);
return e(o[0]), E(!0);
}
switch (E(!1), h) {
case t.TOP:
l((o) => [...o, [t.TOP, s.intersectionRatio]]), e(t.BOTTOM);
break;
case t.BOTTOM:
l((o) => [...o, [t.BOTTOM, s.intersectionRatio]]), e(
r ? ((I == null ? void 0 : I.x) || 0) > R / 2 ? t.BOTTOM_RIGHT : t.BOTTOM_LEFT : t.RIGHT
);
break;
case t.BOTTOM_LEFT:
l((o) => [...o, [t.BOTTOM_LEFT, s.intersectionRatio]]), e(r ? t.TOP_LEFT : t.RIGHT);
break;
case t.BOTTOM_RIGHT:
l((o) => [...o, [t.BOTTOM_RIGHT, s.intersectionRatio]]), e(r ? t.TOP_RIGHT : t.RIGHT);
break;
case t.TOP_LEFT:
l((o) => [...o, [t.TOP_LEFT, s.intersectionRatio]]), e(r ? t.BOTTOM_LEFT : t.RIGHT);
break;
case t.TOP_RIGHT:
l((o) => [...o, [t.TOP_RIGHT, s.intersectionRatio]]), e(r ? t.BOTTOM_RIGHT : t.RIGHT);
break;
case t.RIGHT:
l((o) => [...o, [t.RIGHT, s.intersectionRatio]]), e(t.LEFT);
break;
case t.LEFT:
l((o) => [...o, [t.LEFT, s.intersectionRatio]]), e(t.TOP);
break;
}
}
},
[_, C, L, r, h]
), b = y(m);
return D(() => {
d(b.current).remove(), b.current = m;
}, [m]), V(
Y(
(s, R) => {
var I, G, o;
if (R && (!i || r) && d(m).observer.unobserve(R), s && _.current) {
if ((!i || r) && d(m).observer.observe(s), !(s instanceof Element)) return;
const H = {
...Z({
variant: O,
offset: M,
additionalStyle: c,
fixedPositioning: n,
fullWidth: a,
popover: s,
position: h,
targetElement: _.current
}),
...k && { visibility: "visible" },
...F && {
"min-width": "fit-content",
width: `${_.current.clientWidth}px`
}
};
if (s.setAttribute(
"style",
Object.entries(H).map((f) => f.join(":")).join(";")
), C && p(!1), O && O === v.TOOLTIP && T && W(T) && ((I = T.current) == null || I.setAttribute("data-popover-placement", h), w.includes(h))) {
const f = _.current.getBoundingClientRect(), x = s.firstChild, $ = x.offsetWidth, N = f.x + (f.width - $) / 2, X = x.offsetHeight, j = h === t.BOTTOM_RIGHT || h === t.BOTTOM_LEFT ? X + A : A;
(G = T.current) == null || G.setAttribute(
"style",
`transform: translate3d(${N}px, -${j}px, 0) rotate(45deg); inset: 0 0 auto auto`
);
}
if (O && O === v.TOOLTIP && u && W(u) && w.includes(h)) {
const f = document.documentElement.clientWidth;
(o = u.current) == null || o.setAttribute("style", `max-width: ${f - U}px`);
}
}
},
[
i,
r,
_,
m,
O,
M,
c,
n,
a,
h,
k,
F,
C,
T,
u
]
),
B
);
};
export {
tt as default
};