@adyen/adyen-platform-experience-web
Version:
61 lines (60 loc) • 2.04 kB
JavaScript
import { jsx as a } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { TypographyVariant as y, TypographyElement as b } from "../Typography/types.js";
import u from "../../../hooks/useTabbedControl.js";
import $ from "../Typography/Typography.js";
/* empty css */
import h from "../../../core/Context/preact/useCoreContext.js";
function _({
["aria-label"]: i,
activeItem: l,
items: r,
onChange: s
}) {
const { activeIndex: d, onClick: c, onKeyDown: m, refs: p, uniqueId: n } = u({ onChange: s, options: r, activeOption: l }), { i18n: g } = h();
return /* @__PURE__ */ a("div", { children: [
/* @__PURE__ */ a("div", { role: "radiogroup", className: "adyen-pe-segmented-control", "aria-label": i, children: r.map((e, o) => {
const t = d === o;
return /* @__PURE__ */ a(
"button",
{
role: "radio",
name: e.id,
ref: p[o],
id: `item:${n}-${e.id}`,
className: "adyen-pe-segmented-control__item",
"aria-checked": t,
"aria-controls": `segment:${n}-${e.id}`,
onClick: t ? void 0 : c,
onKeyDown: m,
disabled: e.disabled,
tabIndex: t ? 0 : -1,
children: /* @__PURE__ */ a(
$,
{
el: b.SPAN,
variant: y.BODY,
className: "adyen-pe-segmented-control__item-label",
stronger: !0,
children: g.get(e.label)
}
)
},
`item:${n}-${e.id}`
);
}) }),
/* @__PURE__ */ a("div", { className: "adyen-pe-segmented-content-container", children: r.map((e, o) => /* @__PURE__ */ a(
"div",
{
id: `segment:${n}-${e.id}`,
className: "adyen-pe-segmented-content",
"aria-labelledby": `item:${n}-${e.id}`,
hidden: d !== o,
children: e.content
},
`segment:${n}-${e.id}`
)) })
] });
}
export {
_ as default
};