@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
68 lines (67 loc) • 2.98 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-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";
/**
* TextArea field
*/ const TextArea = /*#__PURE__*/ forwardRef(({ label, className, style, id, disabled = false, readOnly = false, state = "default", feedback, required = false, hideLabel = false, description, requiredNoLabel = false, optional = false, textAreaStyle, textAreaClassName, ...props }, ref)=>{
const textareaId = useUniqueId(id);
return /*#__PURE__*/ _jsxs("div", {
"data-testid": "bf-textarea-container",
className: classNames(className, "bf-textarea-container", {
"bf-textarea-disabled": disabled,
"bf-textarea-warning": state === "warning",
"bf-textarea-alert": state === "alert"
}),
style: style,
children: [
!hideLabel && /*#__PURE__*/ _jsx(Label, {
htmlFor: textareaId,
required: required && !requiredNoLabel,
optional: optional,
disabled: disabled,
readOnly: readOnly,
children: label
}),
/*#__PURE__*/ _jsx(Description, {
children: description
}),
/*#__PURE__*/ _jsxs("div", {
"data-testid": "bf-textarea-icon-container",
className: "bf-textarea-icon-container",
children: [
/*#__PURE__*/ _jsx("textarea", {
id: textareaId,
"data-testid": "bf-textarea",
disabled: disabled,
readOnly: readOnly,
...hideLabel && typeof label === "string" && {
"aria-label": label
},
required: !disabled && (required || requiredNoLabel),
...props,
style: textAreaStyle,
className: classNames(textAreaClassName, "bf-textarea", "bf-scrollbar-small"),
ref: ref
}),
!disabled && state && (state === "warning" || state === "alert") && /*#__PURE__*/ _jsx(Icon, {
widthAuto: true,
className: "bf-textarea-icon",
icon: faTriangleExclamation
})
]
}),
/*#__PURE__*/ _jsx(Feedback, {
children: feedback
})
]
});
});
TextArea.displayName = "TextArea";
export default TextArea;