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