@frontify/fondue
Version:
Design system of Frontify
110 lines (109 loc) • 3.58 kB
JavaScript
import { jsxs as S, jsx as o } from "react/jsx-runtime";
import { IconExclamationMarkTriangle as j } from "@frontify/fondue-icons";
import { useFocusRing as v } from "@react-aria/focus";
import { useRef as D, useEffect as H } from "react";
import M from "react-textarea-autosize";
import { LoadingCircle as V, LoadingCircleSize as W } from "../LoadingCircle/LoadingCircle.es.js";
import { useMemoizedId as A } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as B } from "../../utilities/focusStyle.es.js";
import { merge as x } from "../../utilities/merge.es.js";
import { validationClassMap as K, Validation as r } from "../../utilities/validation.es.js";
const R = ({
id: d,
value: g,
required: b = !1,
decorator: a,
placeholder: h,
disabled: s = !1,
onInput: n,
onBlur: c,
validation: e = r.Default,
minRows: w,
maxRows: k,
autosize: m = !1,
resizeable: T = !0,
onFocus: u,
selectable: z = !1,
focusOnMount: f,
onEnterPressed: i,
...C
}) => {
const L = m ? M : "textarea", l = D(null);
H(() => {
if (f) {
const t = setTimeout(() => {
var p;
(p = l.current) == null || p.focus();
}, 0);
return () => clearTimeout(t);
}
}, [f]);
const N = (t) => {
t.key === "Enter" && (i == null || i(t));
}, y = (t) => {
c && c(t.target.value);
}, E = (t) => {
n && n(t.target.value);
}, { isFocusVisible: I, focusProps: F } = v({ isTextInput: !0, within: !0 });
return /* @__PURE__ */ S("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
}
) : null,
/* @__PURE__ */ o(
L,
{
...m ? { maxRows: k, minRows: w } : { rows: w },
onClick: () => {
var t;
return (t = l.current) == null ? void 0 : t.focus();
},
id: A(d),
ref: l,
value: g,
placeholder: h,
required: b,
className: x([
"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",
I && B,
K[e],
!T && "tw-resize-none",
e === r.Error && "tw-pr-8"
]),
disabled: s,
onBlur: y,
onFocus: (t) => {
z && t.target.select(), u && u(t);
},
onInput: E,
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(V, { size: W.ExtraSmall }) }),
(e === r.Error || e === r.Warning) && /* @__PURE__ */ o(
"span",
{
className: x([
"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(j, {})
}
)
] });
};
R.displayName = "FondueLegacyTextarea";
export {
R as LegacyTextarea
};
//# sourceMappingURL=LegacyTextarea.es.js.map