@adyen/adyen-platform-experience-web
Version:
90 lines (89 loc) • 3.72 kB
JavaScript
import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import n from "classnames";
import { useState as x, useMemo as F, useCallback as I, useRef as i, useLayoutEffect as V, useEffect as b } from "../../../external/preact/hooks/dist/hooks.module.js";
import { useClickOutside as Y } from "../../../hooks/element/useClickOutside.js";
import w from "../../../core/Context/useCoreContext.js";
import z from "../SVGIcons/ChevronUp.js";
import U from "../SVGIcons/ChevronDown.js";
/* empty css */
import { CARD_HEIGHT_PROPERTY as y, BASE_CLASS as j, CONTAINER_CLASS as p, CONTAINER_BUTTON_CLASS as g, CONTAINER_FILLED_CLASS as C, CONTAINER_OVERLAY_ID as N, CONTENT_CLASS as A, CONTENT_EXPANDABLE_CLASS as D, CHEVRON_CLASS as k, CONTAINER_OVERLAY_CLASS as q, CONTAINER_HIDDEN_CLASS as G, CONTAINER_IN_FLOW_CLASS as M } from "./constants.js";
import { Fragment as X } from "../../../external/preact/dist/preact.module.js";
import B from "../BaseButton/BaseButton.js";
const ne = ({ renderHeader: c, children: O, filled: d, fullWidth: E, inFlow: S, ...l }) => {
const { i18n: _ } = w(), [e, h] = x(!1), [R, v] = x(0), a = F(() => S === !0, [S]), o = I(() => h((s) => !s), [h]), u = i(null), L = i(null), f = i(!1), T = i(e), m = Y(
void 0,
I(() => {
e && (o(), f.current = !0);
}, [e, o])
);
return V(() => {
const s = L.current;
s && (a ? s.style.setProperty(y, `${R}px`) : e || s.style.removeProperty(y));
}, [R, a, e]), b(() => {
if (!a) return void v(0);
const s = u.current;
if (!s) return;
const t = new ResizeObserver((H) => {
for (const P of H)
P.target === s && v(s.offsetHeight || 0);
});
return t.observe(s), () => {
t.unobserve(s), t.disconnect();
};
}, [a]), b(() => {
var s, t;
e ? (s = m.current) == null || s.focus() : (T.current !== e && !f.current && ((t = u.current) == null || t.focus()), f.current = !1), T.current = e;
}, [e, m]), /* @__PURE__ */ r("div", { ref: L, className: j, children: O ? /* @__PURE__ */ r(X, { children: [
/* @__PURE__ */ r(
B,
{
className: n(p, g, { [C]: d }),
disabled: e,
fullWidth: E,
"aria-controls": N,
"aria-expanded": e,
"aria-hidden": e,
onClick: o,
ref: u,
"data-testid": "expand-button",
...l,
children: [
/* @__PURE__ */ r("span", { className: "adyen-pe-visually-hidden", children: _.get("expandableCard.expand") }),
/* @__PURE__ */ r("div", { className: n(A, D), children: c }),
/* @__PURE__ */ r("div", { className: k, children: /* @__PURE__ */ r(U, { role: "presentation" }) })
]
}
),
/* @__PURE__ */ r(
B,
{
id: N,
className: n(p, g, q, {
[C]: d,
[G]: !e,
[M]: a
}),
disabled: !e,
fullWidth: E,
"aria-controls": N,
"aria-expanded": e,
"aria-hidden": !e,
onClick: o,
ref: m,
"data-testid": "collapse-button",
...l,
children: [
/* @__PURE__ */ r("span", { className: "adyen-pe-visually-hidden", children: _.get("expandableCard.collapse") }),
/* @__PURE__ */ r("div", { className: n(A, D), children: [
c,
/* @__PURE__ */ r("div", { children: O })
] }),
/* @__PURE__ */ r("div", { className: k, children: /* @__PURE__ */ r(z, { role: "presentation" }) })
]
}
)
] }) : /* @__PURE__ */ r("div", { className: n(p, { [C]: d }), ...l, children: /* @__PURE__ */ r("div", { className: A, children: c }) }) });
};
export {
ne as default
};