@frontify/fondue
Version:
Design system of Frontify
243 lines (242 loc) • 9.36 kB
JavaScript
import { jsxs as S, jsx as e } from "react/jsx-runtime";
import { IconCross as et, IconEye as ot, IconEyeOff as rt, IconExclamationMarkTriangle as st, IconCrossCircle as it, IconClipboard as nt, IconCheckMark as ct } from "@frontify/fondue-icons";
import { useFocusRing as f } from "@react-aria/focus";
import { forwardRef as z, useRef as lt, useImperativeHandle as at, useState as wt, useEffect as O } from "react";
import { LoadingCircle as ut, LoadingCircleSize as dt } from "../LoadingCircle/LoadingCircle.es.js";
import { useCopy as pt } from "../../hooks/useCopy.es.js";
import { useMemoizedId as ft } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as b } from "../../utilities/focusStyle.es.js";
import { merge as s } from "../../utilities/merge.es.js";
import { Validation as u, validationClassMap as bt } from "../../utilities/validation.es.js";
import { LegacyTooltip as xt } from "../LegacyTooltip/LegacyTooltip.es.js";
const mt = ({ extraAction: n, disabled: a }, x) => {
const { isFocusVisible: i, focusProps: k } = f();
if (!n)
return null;
const d = a || n.disabled;
return /* @__PURE__ */ e(
"button",
{
className: s([
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-p-1",
d ? "tw-cursor-default tw-text-text-disabled" : "tw-text-text-weak hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
i && b
]),
onClick: n.onClick,
"data-test-id": "fondue-extra-action-icon",
"aria-label": n.title.toLowerCase(),
disabled: d,
"aria-disabled": d,
type: "button",
ref: x,
...k,
children: n.icon
}
);
}, R = z(mt), kt = z(
({
id: n,
type: a = "text",
decorator: x,
validation: i = u.Default,
clearable: k = !1,
placeholder: d,
required: D,
obfuscated: p,
disabled: o = !1,
autocomplete: M = !1,
dotted: W = !1,
value: h = "",
copyable: $ = !1,
onChange: w,
onEnterPressed: E,
onBlur: g,
onClear: y,
onFocus: N,
size: H,
spellcheck: T,
readonly: I,
focusOnMount: V,
selectable: K = !1,
extraActions: v,
maxLength: U,
...Y
}, _) => {
const c = lt(null);
at(_, () => c.current, []);
const { isFocusVisible: q, focusProps: l } = f({
isTextInput: !0
}), { isFocusVisible: C, focusProps: G } = f(), { isFocusVisible: j, focusProps: J } = f(), { isFocusVisible: B, focusProps: Q } = f(), { copy: X, status: F } = pt(), [m, L] = wt(
typeof p == "boolean" ? p : a === "password"
/* Password */
);
O(() => {
const t = setTimeout(() => {
V && c.current && c.current.focus();
}, 0);
return () => {
clearTimeout(t);
};
}, [V]), O(() => {
typeof p == "boolean" && L(p);
}, [p]);
const Z = (t) => {
t.key === "Enter" && E && E(t);
}, A = () => a === "password" ? m ? "password" : "text" : a, tt = typeof T == "boolean" ? { spellCheck: T } : null;
return /* @__PURE__ */ S(
"div",
{
...Y,
className: s([
"tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-3 tw-border tw-transition tw-rounded tw-text-body-small tw-font-sans tw-relative tw-bg-base dark:tw-bg-transparent",
W ? "tw-border-dashed" : "tw-border-solid",
o || I ? "tw-bg-box-disabled dark:tw-bg-box-disabled hover:tw-cursor-not-allowed tw-border-line-weak dark:tw-border-line-weak" : s([
"focus-within:tw-border-line-xx-strong focus-within:hover:tw-border-line-xx-strong hover:tw-border-line-x-strong",
bt[i],
q && !C && !j && !B && b
])
]),
"data-test-id": "fondue-text-input-component",
children: [
x ? /* @__PURE__ */ e(
"div",
{
className: s([
"tw-flex tw-items-center tw-justify-center tw-pl-1",
o ? "tw-text-black-60" : "tw-text-black-80"
]),
"data-test-id": "decorator",
children: x
}
) : null,
/* @__PURE__ */ e(
"input",
{
...l,
id: ft(n),
ref: c,
className: s([
"tw-w-full tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows",
o || I ? "tw-text-text-disabled tw-placeholder-text-disabled dark:tw-text-black-30 dark:tw-placeholder-black-40 hover:tw-cursor-not-allowed" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
]),
onClick: () => {
var t;
return (t = c.current) == null ? void 0 : t.focus();
},
onChange: (t) => w == null ? void 0 : w(t.currentTarget.value),
onBlur: (t) => {
var r;
(r = l.onBlur) == null || r.call(l, t), g == null || g(t);
},
onKeyDown: Z,
placeholder: d,
value: h,
type: A(),
required: D,
readOnly: I,
disabled: o,
onFocus: (t) => {
var r;
(r = l.onFocus) == null || r.call(l, t), K && t.target.select(), N && N(t);
},
autoComplete: M ? "on" : "off",
maxLength: U,
size: H,
"data-test-id": "text-input",
...tt
}
),
v && v.length > 0 && v.map((t, r) => {
const P = `text-input-extra-action-${r}`;
return t.tooltip ? /* @__PURE__ */ e(
xt,
{
...t.tooltip,
triggerElement: /* @__PURE__ */ e(R, { extraAction: t, disabled: o })
},
P
) : /* @__PURE__ */ e(R, { extraAction: t, disabled: o }, P);
}),
`${h}`.length > 0 && k && /* @__PURE__ */ e(
"button",
{
className: s([
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
C && b
]),
onClick: () => {
var t, r;
(t = c.current) == null || t.focus(), (r = c.current) == null || r.setAttribute("value", ""), w == null || w(""), y == null || y();
},
"data-test-id": "clear-icon",
title: "Clear text input",
"aria-label": "clear text input",
disabled: o,
type: "button",
...G,
children: /* @__PURE__ */ e(et, {})
}
),
a === "password" && /* @__PURE__ */ e(
"button",
{
className: s([
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
j && b
]),
onClick: () => L(!m),
"data-test-id": "visibility-icon",
title: "Toggle text visibility",
type: "button",
"aria-label": `${m ? "unveil" : "obfuscate"} text input`,
disabled: o,
...J,
children: m ? /* @__PURE__ */ e(ot, {}) : /* @__PURE__ */ e(rt, {})
}
),
i === u.Loading && /* @__PURE__ */ e("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__ */ e(ut, { size: dt.ExtraSmall }) }),
(i === u.Error || i === u.Warning) && /* @__PURE__ */ e(
"span",
{
className: s([
"tw-flex tw-items-center tw-justify-center",
i === u.Error && "tw-text-text-negative",
i === u.Warning && "tw-text-text-warning"
]),
"data-test-id": "error-state-exclamation-mark-icon",
children: /* @__PURE__ */ e(st, {})
}
),
$ && /* @__PURE__ */ S(
"button",
{
className: s([
"tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded",
o ? "tw-cursor-default tw-text-black-40" : "tw-text-black-60 hover:tw-text-black-100",
B && b
]),
onClick: () => X(h),
"data-test-id": "copy-icon",
title: "Copy input text",
disabled: o,
type: "button",
...Q,
children: [
F === "error" && /* @__PURE__ */ e("span", { className: "tw-text-box-negative-strong", children: /* @__PURE__ */ e(it, {}) }),
F === "idle" && /* @__PURE__ */ e(nt, {}),
F === "success" && /* @__PURE__ */ e("span", { className: "tw-text-box-positive-strong", children: /* @__PURE__ */ e(ct, {}) })
]
}
)
]
}
);
}
);
kt.displayName = "FondueTextInput";
export {
kt as TextInput
};
//# sourceMappingURL=TextInput.es.js.map