@payfit/unity-components
Version:
122 lines (121 loc) • 4.47 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { Spinner as t } from "../spinner/Spinner.js";
import { useResizable as n } from "../../hooks/use-resizable.js";
import { forwardRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useIntl as s } from "react-intl";
import { TextArea as c } from "react-aria-components/TextArea";
//#region src/components/text-area/TextArea.tsx
var l = i({
slots: {
base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75",
input: "uy:flex-grow uy:flex-shrink uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:resize-none",
state: "uy:flex uy:gap-50 uy:flex-shrink-0 uy:basis-250",
resizeHandle: "uy:absolute uy:bottom-25 uy:right-25 uy:w-100 uy:h-100 uy:cursor-se-resize uy:flex uy:items-center uy:justify-center"
},
variants: {
isInvalid: { true: {
base: "uy:border-border-form-error uy:bg-surface-form-error",
inputWrapper: "uy:bg-surface-form-error",
input: "uy:bg-surface-form-error",
state: "uy:text-content-form-error"
} },
isReadOnly: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
input: "uy:bg-surface-form-disabled uy:text-content-form-readonly"
} },
isDisabled: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
input: "uy:bg-surface-form-disabled uy:text-content-form-disabled"
} }
},
compoundVariants: [{
isInvalid: !1,
isDisabled: !1,
isReadOnly: !1,
className: {
base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
state: "uy:text-content-form-disabled"
}
}],
defaultVariants: {
isInvalid: !1,
isDisabled: !1,
isReadOnly: !1
}
}), u = r(({ isInvalid: r, isLoading: i, isDisabled: u, isReadOnly: d, isResizable: f = !1, ...p }, m) => {
let h = s(), { containerRef: g, handleResizeStart: _ } = n({ isDisabled: !f || u || d }), { base: v, inputWrapper: y, input: b, state: x, resizeHandle: S } = l({
isInvalid: r,
isDisabled: u,
isReadOnly: d
});
return /* @__PURE__ */ o("div", {
ref: g,
className: v(),
children: [/* @__PURE__ */ o("div", {
className: y(),
children: [/* @__PURE__ */ a(c, {
"data-dd-privacy": "mask",
...p,
ref: m,
className: b(),
"aria-busy": i,
"aria-invalid": r,
readOnly: d,
disabled: u
}), /* @__PURE__ */ o("div", {
className: x(),
children: [i && /* @__PURE__ */ a(t, {
color: "inherit",
size: "small",
label: h.formatMessage({
id: "unity:component:form-field:form-input:spinner:label",
defaultMessage: "Loading"
})
}), r && /* @__PURE__ */ a(e, {
src: "WarningCircleOutlined",
color: "content.form.invalid",
alt: h.formatMessage({
id: "unity:component:form-field:form-input:error:alt",
defaultMessage: "Error"
})
})]
})]
}), f && !u && !d && /* @__PURE__ */ a("div", {
className: S(),
onMouseDown: _,
role: "button",
tabIndex: 0,
"aria-label": h.formatMessage({
id: "unity:component:form-field:textarea:resize-handle:label",
defaultMessage: "Resize textarea"
}),
onKeyDown: (e) => {
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), g.current?.querySelector("textarea")?.focus());
},
children: /* @__PURE__ */ o("svg", {
role: "presentation",
width: "8",
height: "8",
viewBox: "0 0 8 8",
fill: "none",
children: [/* @__PURE__ */ a("path", {
d: "M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",
fill: "#8B8D98"
}), /* @__PURE__ */ a("path", {
d: "M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",
fill: "#8B8D98"
})]
})
})]
});
});
u.displayName = "TextArea";
//#endregion
export { u as TextArea, l as textArea };