@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
274 lines (273 loc) • 6.93 kB
JavaScript
"use client";
import { c as _c } from "react-compiler-runtime";
import { forwardRef } from "react";
import classNames from "classnames";
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
import Icon from "../Icon/Icon.js";
import useUniqueId from "../../hooks/useUniqueId.js";
import Label from "../Label/Label.js";
import Description from "../Description/Description.js";
import Feedback from "../Feedback/Feedback.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* TextArea - resizable multiline text input field
*
* @see https://bifrost.intility.com/react/textArea
*/
const TextArea = /*#__PURE__*/forwardRef((t0, ref) => {
const $ = _c(70);
let className;
let description;
let feedback;
let id;
let label;
let props;
let style;
let t1;
let t2;
let t3;
let t4;
let t5;
let t6;
let t7;
let textAreaClassName;
let textAreaStyle;
if ($[0] !== t0) {
({
label,
className,
style,
id,
disabled: t1,
readOnly: t2,
state: t3,
feedback,
required: t4,
hideLabel: t5,
description,
requiredNoLabel: t6,
optional: t7,
textAreaStyle,
textAreaClassName,
...props
} = t0);
$[0] = t0;
$[1] = className;
$[2] = description;
$[3] = feedback;
$[4] = id;
$[5] = label;
$[6] = props;
$[7] = style;
$[8] = t1;
$[9] = t2;
$[10] = t3;
$[11] = t4;
$[12] = t5;
$[13] = t6;
$[14] = t7;
$[15] = textAreaClassName;
$[16] = textAreaStyle;
} else {
className = $[1];
description = $[2];
feedback = $[3];
id = $[4];
label = $[5];
props = $[6];
style = $[7];
t1 = $[8];
t2 = $[9];
t3 = $[10];
t4 = $[11];
t5 = $[12];
t6 = $[13];
t7 = $[14];
textAreaClassName = $[15];
textAreaStyle = $[16];
}
const disabled = t1 === undefined ? false : t1;
const readOnly = t2 === undefined ? false : t2;
const state = t3 === undefined ? "default" : t3;
const required = t4 === undefined ? false : t4;
const hideLabel = t5 === undefined ? false : t5;
const requiredNoLabel = t6 === undefined ? false : t6;
const optional = t7 === undefined ? false : t7;
const textareaId = useUniqueId(id);
const feedbackId = textareaId + "-bf-feedback-id";
const descriptionId = textareaId + "-bf-description-id";
const t8 = props["aria-describedby"];
const t9 = feedback && feedbackId;
const t10 = description && descriptionId;
let t11;
if ($[17] !== t10 || $[18] !== t8 || $[19] !== t9) {
t11 = [t8, t9, t10].filter(Boolean);
$[17] = t10;
$[18] = t8;
$[19] = t9;
$[20] = t11;
} else {
t11 = $[20];
}
const describedby = t11.join(" ");
const t12 = state === "warning";
const t13 = state === "alert";
let t14;
if ($[21] !== className || $[22] !== disabled || $[23] !== t12 || $[24] !== t13) {
t14 = classNames(className, "bf-textarea-container", {
"bf-textarea-disabled": disabled,
"bf-textarea-warning": t12,
"bf-textarea-alert": t13
});
$[21] = className;
$[22] = disabled;
$[23] = t12;
$[24] = t13;
$[25] = t14;
} else {
t14 = $[25];
}
let t15;
if ($[26] !== disabled || $[27] !== hideLabel || $[28] !== label || $[29] !== optional || $[30] !== readOnly || $[31] !== required || $[32] !== requiredNoLabel || $[33] !== textareaId) {
t15 = !hideLabel && /*#__PURE__*/_jsx(Label, {
htmlFor: textareaId,
required: required && !requiredNoLabel,
optional: optional,
disabled: disabled,
readOnly: readOnly,
children: label
});
$[26] = disabled;
$[27] = hideLabel;
$[28] = label;
$[29] = optional;
$[30] = readOnly;
$[31] = required;
$[32] = requiredNoLabel;
$[33] = textareaId;
$[34] = t15;
} else {
t15 = $[34];
}
let t16;
if ($[35] !== description || $[36] !== descriptionId) {
t16 = /*#__PURE__*/_jsx(Description, {
id: descriptionId,
children: description
});
$[35] = description;
$[36] = descriptionId;
$[37] = t16;
} else {
t16 = $[37];
}
let t17;
if ($[38] !== hideLabel || $[39] !== label) {
t17 = hideLabel && typeof label === "string" && {
"aria-label": label
};
$[38] = hideLabel;
$[39] = label;
$[40] = t17;
} else {
t17 = $[40];
}
const t18 = !disabled && (required || requiredNoLabel);
const t19 = describedby || undefined;
let t20;
if ($[41] !== textAreaClassName) {
t20 = classNames(textAreaClassName, "bf-textarea", "bf-scrollbar-small");
$[41] = textAreaClassName;
$[42] = t20;
} else {
t20 = $[42];
}
let t21;
if ($[43] !== disabled || $[44] !== props || $[45] !== readOnly || $[46] !== ref || $[47] !== t17 || $[48] !== t18 || $[49] !== t19 || $[50] !== t20 || $[51] !== textAreaStyle || $[52] !== textareaId) {
t21 = /*#__PURE__*/_jsx("textarea", {
id: textareaId,
"data-testid": "bf-textarea",
disabled: disabled,
readOnly: readOnly,
...t17,
required: t18,
...props,
"aria-describedby": t19,
style: textAreaStyle,
className: t20,
ref: ref
});
$[43] = disabled;
$[44] = props;
$[45] = readOnly;
$[46] = ref;
$[47] = t17;
$[48] = t18;
$[49] = t19;
$[50] = t20;
$[51] = textAreaStyle;
$[52] = textareaId;
$[53] = t21;
} else {
t21 = $[53];
}
let t22;
if ($[54] !== disabled || $[55] !== state) {
t22 = !disabled && state && (state === "warning" || state === "alert") && /*#__PURE__*/_jsx(Icon, {
widthAuto: true,
className: "bf-textarea-icon",
icon: faTriangleExclamation
});
$[54] = disabled;
$[55] = state;
$[56] = t22;
} else {
t22 = $[56];
}
let t23;
if ($[57] !== t21 || $[58] !== t22) {
t23 = /*#__PURE__*/_jsxs("div", {
"data-testid": "bf-textarea-icon-container",
className: "bf-textarea-icon-container",
children: [t21, t22]
});
$[57] = t21;
$[58] = t22;
$[59] = t23;
} else {
t23 = $[59];
}
let t24;
if ($[60] !== feedback || $[61] !== feedbackId) {
t24 = /*#__PURE__*/_jsx(Feedback, {
id: feedbackId,
children: feedback
});
$[60] = feedback;
$[61] = feedbackId;
$[62] = t24;
} else {
t24 = $[62];
}
let t25;
if ($[63] !== style || $[64] !== t14 || $[65] !== t15 || $[66] !== t16 || $[67] !== t23 || $[68] !== t24) {
t25 = /*#__PURE__*/_jsxs("div", {
"data-testid": "bf-textarea-container",
className: t14,
style: style,
children: [t15, t16, t23, t24]
});
$[63] = style;
$[64] = t14;
$[65] = t15;
$[66] = t16;
$[67] = t23;
$[68] = t24;
$[69] = t25;
} else {
t25 = $[69];
}
return t25;
});
TextArea.displayName = "TextArea";
export default TextArea;