@adyen/adyen-platform-experience-web
Version:
86 lines (85 loc) • 3.69 kB
JavaScript
import { jsx as s } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import n from "classnames";
import { useState as T, useMemo as x, useCallback as b, useRef as i, useLayoutEffect as z, useEffect as g } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { useClickOutside as U } from "../../../hooks/element/useClickOutside.js";
import V from "../../../hooks/useUniqueId.js";
/* empty css */
import { CARD_HEIGHT_PROPERTY as y, BASE_CLASS as Y, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as H, CHEVRON_CLASS as k, CONTAINER_CLASS as E, CONTAINER_BUTTON_CLASS as B, CONTAINER_FILLED_CLASS as A, CONTAINER_OVERLAY_CLASS as $, CONTAINER_IN_FLOW_CLASS as j, CONTAINER_HIDDEN_CLASS as G } from "./constants.js";
import { Fragment as D } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
import F from "../BaseButton/BaseButton.js";
import { Icon as P } from "../Icon/Icon.js";
import { isFunction as M } from "../../../utils/value/is.js";
const ae = ({ renderContent: a, children: O, filled: c, fullWidth: S, inFlow: _, ...d }) => {
const [e, R] = T(!1), [v, h] = T(0), t = x(() => _ === !0, [_]), o = b(() => R((r) => !r), [R]), L = i(null), l = i(null), u = `elem-${V()}`, f = i(!1), I = i(e), m = U(
void 0,
b(() => {
e && (o(), f.current = !0);
}, [e, o])
), p = x(
() => M(a) ? a : ({ collapsibleContent: r }) => /* @__PURE__ */ s(D, { children: [
a,
r && /* @__PURE__ */ s("div", { children: r })
] }),
[a]
);
return z(() => {
const r = L.current;
r && (t ? r.style.setProperty(y, `${v}px`) : e || r.style.removeProperty(y));
}, [v, t, e]), g(() => {
if (!t) return void h(0);
const r = l.current;
if (!r) return;
const N = new ResizeObserver((q) => {
for (const w of q)
w.target === r && h(r.offsetHeight || 0);
});
return N.observe(r), () => {
N.unobserve(r), N.disconnect();
};
}, [t]), g(() => {
e ? m.current?.focus() : (I.current !== e && !f.current && l.current?.focus(), f.current = !1), I.current = e;
}, [e, m]), /* @__PURE__ */ s("div", { ref: L, className: Y, children: O ? /* @__PURE__ */ s(D, { children: [
/* @__PURE__ */ s(
F,
{
className: n(E, B, { [A]: c }),
disabled: e,
fullWidth: S,
onClick: o,
ref: l,
"data-testid": "expand-button",
...e ? { "aria-hidden": !0 } : { "aria-controls": u, "aria-expanded": !1 },
...d,
children: [
/* @__PURE__ */ s("div", { className: n(C, H), children: p({ isExpanded: e }) }),
/* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-down" }) })
]
}
),
/* @__PURE__ */ s(
F,
{
id: u,
className: n(E, B, $, {
[A]: c,
[G]: !e,
[j]: t
}),
disabled: !e,
fullWidth: S,
onClick: o,
ref: m,
"data-testid": "collapse-button",
...e ? { "aria-controls": u, "aria-expanded": !0 } : { role: "presentation" },
...d,
children: [
/* @__PURE__ */ s("div", { className: n(C, H), children: p({ isExpanded: e, collapsibleContent: O }) }),
/* @__PURE__ */ s("div", { className: k, children: /* @__PURE__ */ s(P, { name: "chevron-up" }) })
]
}
)
] }) : /* @__PURE__ */ s("div", { className: n(E, { [A]: c }), ...d, children: /* @__PURE__ */ s("div", { className: C, children: p({ isExpanded: !1 }) }) }) });
};
export {
ae as default
};