@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_OVERLAY_ID as f, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as g, CHEVRON_CLASS as D, CONTAINER_CLASS as N, CONTAINER_BUTTON_CLASS as k, CONTAINER_FILLED_CLASS as A, CONTAINER_OVERLAY_CLASS as q, CONTAINER_IN_FLOW_CLASS as G, CONTAINER_HIDDEN_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), [v, R] = x(0), a = F(() => S === !0, [S]), o = I(() => h((s) => !s), [h]), u = i(null), L = i(null), m = i(!1), T = i(e), p = Y(
void 0,
I(() => {
e && (o(), m.current = !0);
}, [e, o])
);
return V(() => {
const s = L.current;
s && (a ? s.style.setProperty(y, `${v}px`) : e || s.style.removeProperty(y));
}, [v, a, e]), b(() => {
if (!a) return void R(0);
const s = u.current;
if (!s) return;
const t = new ResizeObserver((H) => {
for (const P of H)
P.target === s && R(s.offsetHeight || 0);
});
return t.observe(s), () => {
t.unobserve(s), t.disconnect();
};
}, [a]), b(() => {
var s, t;
e ? (s = p.current) == null || s.focus() : (T.current !== e && !m.current && ((t = u.current) == null || t.focus()), m.current = !1), T.current = e;
}, [e, p]), /* @__PURE__ */ r("div", { ref: L, className: j, children: O ? /* @__PURE__ */ r(X, { children: [
/* @__PURE__ */ r(
B,
{
className: n(N, k, { [A]: d }),
disabled: e,
fullWidth: E,
"aria-controls": f,
"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(C, g), children: c }),
/* @__PURE__ */ r("div", { className: D, children: /* @__PURE__ */ r(U, { role: "presentation" }) })
]
}
),
/* @__PURE__ */ r(
B,
{
id: f,
className: n(N, k, q, {
[A]: d,
[M]: !e,
[G]: a
}),
disabled: !e,
fullWidth: E,
"aria-controls": f,
"aria-expanded": e,
"aria-hidden": !e,
onClick: o,
ref: p,
"data-testid": "collapse-button",
...l,
children: [
/* @__PURE__ */ r("span", { className: "adyen-pe-visually-hidden", children: _.get("expandableCard.collapse") }),
/* @__PURE__ */ r("div", { className: n(C, g), children: [
c,
/* @__PURE__ */ r("div", { children: O })
] }),
/* @__PURE__ */ r("div", { className: D, children: /* @__PURE__ */ r(z, { role: "presentation" }) })
]
}
)
] }) : /* @__PURE__ */ r("div", { className: n(N, { [A]: d }), ...l, children: /* @__PURE__ */ r("div", { className: C, children: c }) }) });
};
export {
ne as default
};