@frontify/fondue
Version:
Design system of Frontify
100 lines (99 loc) • 3.27 kB
JavaScript
import { jsxs as w, jsx as r } from "react/jsx-runtime";
import { VisuallyHidden as g } from "@react-aria/visually-hidden";
import { cloneElement as y } from "react";
import { Tooltip as v } from "../Tooltip/Tooltip.es.js";
import { generateRandomId as F } from "../../utilities/generateRandomId.es.js";
import { HelperText as u } from "../../utilities/input.es.js";
import { merge as x } from "../../utilities/merge.es.js";
import { Validation as h } from "../../utilities/validation.es.js";
const $ = ({ tooltips: n }) => n.map((t) => /* @__PURE__ */ r(
v,
{
content: t.content,
size: t.size,
"data-test-id": t["data-test-id"],
children: t.children
},
`form-field-tooltip-${F()}`
)), L = ({ label: n, disabled: t, readOnly: f, dataTestId: d }) => {
const { text: m, required: a, secondaryLabel: i, hugWidth: s, tooltips: e } = n, o = [], c = "tw-w-full tw-flex tw-flex-nowrap tw-justify-between", l = !s && i;
let p = m;
return a && (p += " *"), e != null && e.length ? o.push(
/* @__PURE__ */ w("span", { className: "tw-flex tw-gap-2", children: [
p,
/* @__PURE__ */ r($, { tooltips: e })
] })
) : o.push(/* @__PURE__ */ r("span", { children: p })), l && o.push(/* @__PURE__ */ r("span", { children: i })), /* @__PURE__ */ w(
"span",
{
className: x([
"tw-whitespace-nowrap",
s && "tw-pt-2",
l && c,
t || f ? "tw-text-black-60" : "tw-text-black-80"
]),
"data-test-id": `${d}-label-text`,
children: [
...o
]
}
);
}, S = ({
children: n,
disabled: t = !1,
error: f = !1,
errorText: d,
errorTextColor: m = h.Error,
helperText: a,
helperTextColor: i = h.Default,
hiddenLabel: s = !1,
label: e,
readOnly: o = !1,
status: c = h.Default,
"data-test-id": l = "fondue-form-field"
}) => /* @__PURE__ */ w(
"label",
{
className: x([
"tw-flex tw-text-text-weak tw-gap-2 tw-select-none tw-max-w-full",
e.hugWidth ? "tw-w-fit tw-items-start tw-justify-start" : "tw-w-full tw-flex-col",
t || o ? "hover:tw-cursor-not-allowed tw-pointer-events-none" : "hover:tw-cursor-pointer hover:tw-text-text group-hover:tw-text-text"
]),
"data-test-id": `${l}-label`,
children: [
s ? /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r("span", { children: e.text }) }) : /* @__PURE__ */ r(L, { label: e, dataTestId: l, disabled: t, readOnly: o }),
/* @__PURE__ */ w("div", { className: "tw-w-full tw-flex tw-flex-col tw-gap-2", "data-test-id": `${l}-input`, children: [
y(n, {
hugWidth: e.hugWidth,
required: e.required,
status: c,
disabled: t,
readOnly: o
}),
f && /* @__PURE__ */ r(
u,
{
text: d ?? "Something went wrong",
validationStyle: m,
disabled: t,
"data-test-id": `${l}-error-text`
}
),
a && /* @__PURE__ */ r(
u,
{
text: a,
validationStyle: i,
disabled: t,
"data-test-id": `${l}-helper-text`
}
)
] })
]
}
);
S.displayname = "FondueFormField";
export {
S as FormField
};
//# sourceMappingURL=FormField.es.js.map