@frontify/fondue
Version:
Design system of Frontify
105 lines (104 loc) • 3.48 kB
JavaScript
import { jsxs as I, jsx as o } from "react/jsx-runtime";
import { useFocusRing as S } from "@react-aria/focus";
import { useRef as j, useEffect as v } from "react";
import D from "react-textarea-autosize";
import H from "../../foundation/Icon/Generated/IconExclamationMarkTriangle.es.js";
import { useMemoizedId as M } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as V } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
import { validationClassMap as W, Validation as r } from "../../utilities/validation.es.js";
import { LoadingCircle as A, LoadingCircleSize as B } from "../LoadingCircle/LoadingCircle.es.js";
const K = ({
id: x,
value: d,
required: g = !1,
decorator: a,
placeholder: b,
disabled: s = !1,
onInput: n,
onBlur: w,
validation: e = r.Default,
minRows: c,
maxRows: h,
autosize: m = !1,
resizeable: k = !0,
onFocus: u,
selectable: z = !1,
focusOnMount: f,
onEnterPressed: i,
...C
}) => {
const L = m ? D : "textarea", l = j(null);
v(() => {
var t;
f && ((t = l.current) == null || t.focus());
}, [f]);
const N = (t) => {
t.key === "Enter" && (i == null || i(t));
}, T = (t) => {
w && w(t.target.value);
}, y = (t) => {
n && n(t.target.value);
}, { isFocusVisible: E, focusProps: F } = S({ isTextInput: !0, within: !0 });
return /* @__PURE__ */ I("div", { className: "tw-relative", ...F, children: [
a && /* @__PURE__ */ o(
"div",
{
className: "tw-absolute tw-top-2 tw-left-2 tw-inline-flex tw-items-end tw-text-black-80",
"data-test-id": "decorator",
children: a
}
),
/* @__PURE__ */ o(
L,
{
...m ? { maxRows: h, minRows: c } : { rows: c },
onClick: () => {
var t;
return (t = l.current) == null ? void 0 : t.focus();
},
id: M(x),
ref: l,
value: d,
placeholder: b,
required: g,
className: p([
"tw-w-full tw-p-2 tw-border tw-rounded tw-text-s tw-outline-none tw-transition tw-placeholder-black-60",
!!a && "tw-pl-7 ",
s ? "tw-border-black-5 tw-bg-black-5 tw-text-black-40" : "tw-text-black tw-border-black-20 hover:tw-border-line-x-strong focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong",
E && V,
W[e],
!k && "tw-resize-none",
e === r.Error && "tw-pr-8"
]),
disabled: s,
onBlur: T,
onFocus: (t) => {
z && t.target.select(), u && u(t);
},
onInput: y,
onKeyDown: N,
"data-test-id": "textarea",
...C
}
),
e === r.Loading && /* @__PURE__ */ o("span", { className: "tw-absolute tw-top-[-0.55rem] tw-right-[-0.55rem] tw-bg-white tw-rounded-full tw-p-[2px] tw-border tw-border-black-10", children: /* @__PURE__ */ o(A, { size: B.ExtraSmall }) }),
(e === r.Error || e === r.Warning) && /* @__PURE__ */ o(
"span",
{
className: p([
"tw-absolute tw-top-[0.6rem] tw-right-[0.6rem]",
e === r.Error && "tw-text-text-negative",
e === r.Warning && "tw-text-text-warning"
]),
"data-test-id": "error-state-exclamation-mark-icon",
children: /* @__PURE__ */ o(H, {})
}
)
] });
};
K.displayName = "FondueLegacyTextarea";
export {
K as LegacyTextarea
};
//# sourceMappingURL=LegacyTextarea.es.js.map