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