@adyen/adyen-platform-experience-web
Version:
53 lines (52 loc) • 1.89 kB
JavaScript
import { jsx as i } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { TypographyVariant as y, TypographyElement as $ } from "../Typography/types.js";
import h from "../../../hooks/useTabbedControl.js";
import u from "../Typography/Typography.js";
/* empty css */
import f from "../../../core/Context/preact/useCoreContext.js";
function x({
["aria-label"]: t,
activeTab: d,
tabs: r,
onChange: s
}) {
const { activeIndex: o, onClick: p, onKeyDown: c, refs: m, uniqueId: a } = h({ onChange: s, options: r, activeOption: d }), { i18n: b } = f();
return /* @__PURE__ */ i("div", { children: [
/* @__PURE__ */ i("div", { className: "adyen-pe-tabs", role: "tablist", "aria-orientation": "horizontal", "aria-label": t, children: r.map((e, n) => {
const l = o === n;
return /* @__PURE__ */ i(
"button",
{
role: "tab",
name: e.id,
ref: m[n],
id: `tab:${a}-${e.id}`,
className: "adyen-pe-tabs__tab",
"aria-controls": `panel:${a}-${e.id}`,
"aria-selected": l,
onClick: l ? void 0 : p,
onKeyDown: c,
disabled: e.disabled,
tabIndex: l ? 0 : -1,
children: /* @__PURE__ */ i(u, { el: $.SPAN, variant: y.BODY, className: "adyen-pe-tabs__tab-label", stronger: !0, children: b.get(e.label) })
},
`tab:${a}-${e.id}`
);
}) }),
/* @__PURE__ */ i("div", { className: "adyen-pe-tabpanels", children: r.map((e, n) => /* @__PURE__ */ i(
"div",
{
role: "tabpanel",
id: `panel:${a}-${e.id}`,
className: "adyen-pe-tabpanels__panel",
"aria-labelledby": `tab:${a}-${e.id}`,
hidden: o !== n,
children: e.content
},
`panel:${a}-${e.id}`
)) })
] });
}
export {
x as default
};