@frontify/fondue
Version:
Design system of Frontify
96 lines (95 loc) • 3.77 kB
JavaScript
import { jsx as l, jsxs as m } from "react/jsx-runtime";
import { useRef as b, useState as v, Children as x, isValidElement as h, useEffect as p } from "react";
import g from "../../foundation/Icon/Generated/IconQuestionMarkCircle.es.js";
import { IconSize as k } from "../../foundation/Icon/IconSize.es.js";
import { generateRandomId as z } from "../../utilities/generateRandomId.es.js";
import { merge as n } from "../../utilities/merge.es.js";
import { RadioButtonEmphasis as T } from "./RadioButton.es.js";
import { LegacyTooltip as y, TooltipPosition as N, TooltipAlignment as L } from "../LegacyTooltip/LegacyTooltip.es.js";
var R = /* @__PURE__ */ ((o) => (o.Horizontal = "Horizontal", o.Vertical = "Vertical", o))(R || {});
const V = ({
children: o,
defaultValue: a,
direction: u = "Horizontal",
onChange: s,
name: d = "default-radio",
ariaLabel: f
}) => {
const i = b(null), [r, c] = v(a), w = x.map(o, (e) => h(e) ? e == null ? void 0 : e.props : null) ?? [];
return p(() => {
c(a);
}, [a]), p(() => {
if (i.current) {
const e = i.current.querySelector(`input[value="${r}"]`);
e && e.focus();
}
}, [r]), /* @__PURE__ */ l(
"div",
{
"data-test-id": "radio-list-wrapper",
role: "radiogroup",
"aria-label": f ?? "Choose an option",
ref: i,
className: n(["tw-flex", u === "Horizontal" ? "tw-gap-4" : "tw-flex-col"]),
children: w.map((e) => {
const t = z();
return /* @__PURE__ */ m("div", { className: "tw-flex tw-items-center tw-mb-2", children: [
/* @__PURE__ */ l(
"input",
{
"data-test-id": "radio-input",
disabled: e.disabled,
id: t,
type: "radio",
name: d,
value: e.value,
"aria-label": e.hideLabel ? e.value : void 0,
"aria-labelledby": e.hideLabel ? void 0 : `${t}-label`,
"aria-describedby": !e.hideLabel && e.helperText ? `${t}-description` : void 0,
"aria-checked": e.value === r,
defaultChecked: e.value === r,
className: n([
"tw-peer tw-form-radio w-w-4 tw-h-4 tw-border-black-60 disabled:tw-border-black-10 focus:tw-ring-0 focus:tw-ring-offset-0 focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2",
e.emphasis === T.Weak ? "tw-text-black-80" : "tw-text-box-selected-strong"
]),
onChange: () => {
c(e.value), s && s(e.value);
}
}
),
!e.hideLabel && /* @__PURE__ */ m(
"label",
{
id: `${t}-label`,
htmlFor: t,
className: n([
"tw-flex tw-flex-col tw-pl-2 tw-text-sm tw-font-normal peer-checked:tw-font-medium tw-text-black-80 peer-disabled:tw-text-black-40"
]),
"data-test-id": "radio-label",
children: [
e.value,
e.helperText && /* @__PURE__ */ l("span", { id: `${t}-description`, className: "tw-text-black-80 tw-font-normal", children: e.helperText })
]
}
),
e.tooltip && /* @__PURE__ */ l(
y,
{
alignment: L.Middle,
content: e.tooltip,
hoverDelay: 75,
position: N.Top,
triggerElement: /* @__PURE__ */ l("button", { className: "tw-flex tw-text-black-80 tw-mx-2 tw-self-center", children: /* @__PURE__ */ l(g, { size: k.Size16 }) }),
withArrow: !0
}
)
] }, t);
})
}
);
};
export {
V as RadioList,
R as RadioListDirection
};
//# sourceMappingURL=RadioList.es.js.map