@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
42 lines • 4.84 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextAreaStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const labelStandAlone_1 = require("../../components/label/labelStandAlone");
const textCount_1 = require("../../components/textCount/textCount");
const useId_1 = require("../../hooks/useId/useId");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
// internal components
const errorStandAlone_1 = require("./components/errorStandAlone");
const helpMessageStandAlone_1 = require("./components/helpMessageStandAlone");
const titleStandAlone_1 = require("./components/titleStandAlone");
// styles
const textArea_styled_1 = require("./textArea.styled");
const state_1 = require("./types/state");
const aria_utils_1 = require("./utils/aria.utils");
const TextAreaStandAloneComponent = ({ dataTestId = 'text-area', errorAriaLiveType = ariaLiveOption_1.AriaLiveOptionType.ASSERTIVE, ...props }, ref) => {
const uniqueId = (0, useId_1.useId)('textArea');
const textAreaId = props.id ?? uniqueId;
const textAreaHelpTextId = `${textAreaId}HelpText`;
const textAreaErrorId = `${textAreaId}Error`;
const textAreaTextCountId = `${textAreaId}TextCount`;
const stateStyles = props.styles?.[props.state];
const disabled = [state_1.TextAreaStateType.DISABLED_EMPTY, state_1.TextAreaStateType.DISABLED_FILLED].includes(props.state);
return ((0, jsx_runtime_1.jsxs)(textArea_styled_1.TextAreaContainerStyled, { ref: ref, "data-testid": dataTestId, styles: stateStyles, children: [(0, jsx_runtime_1.jsx)(titleStandAlone_1.TitleStandAlone, { styles: stateStyles, title: props.title }), (0, jsx_runtime_1.jsxs)(textArea_styled_1.TextAreaBoxStyled, { height: props.styles?.labelInsideTextArea ? props.height : undefined, styles: stateStyles, onClick: () => {
if (props.styles?.labelInsideTextArea) {
document.getElementById(textAreaId)?.focus();
}
}, children: [(0, jsx_runtime_1.jsxs)(textArea_styled_1.LabelAndAdditionalInfoContainer, { styles: stateStyles, children: [(0, jsx_runtime_1.jsx)(labelStandAlone_1.LabelStandAlone, { asteriskColor: stateStyles?.required?.color, asteriskVariant: stateStyles?.required?.font_variant, asteriskWeight: stateStyles?.required?.font_weight, color: stateStyles?.label?.color, inputId: textAreaId, required: props.required, textVariant: stateStyles?.label?.font_variant, weight: stateStyles?.label?.font_weight, ...props.label, children: props.label.content }), props.additionalInfo] }), (0, jsx_runtime_1.jsx)(textArea_styled_1.TextAreaStyled, { "aria-describedby": (0, aria_utils_1.buildAriaDescribedBy)({
helpMessage: props.helpMessage?.content,
textAreaHelpTextId,
errorMessage: props.errorMessage?.content,
state: props.state,
textAreaErrorId,
}), disabled: disabled, height: !props.styles?.labelInsideTextArea ? props.height : undefined, id: textAreaId, maxLength: props.maxLength, placeholder: props.placeholder, required: props.required, spellCheck: props.spellCheck, styles: stateStyles, value: props.value, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus, children: props.value })] }), (0, jsx_runtime_1.jsxs)(textArea_styled_1.TextAreaBottomStyled, { styles: stateStyles, children: [(0, jsx_runtime_1.jsxs)(textArea_styled_1.HelperTextAndErrorWrapperStyled, { styles: stateStyles, children: [(0, jsx_runtime_1.jsx)(errorStandAlone_1.ErrorStandAlone, { errorAriaLiveType: errorAriaLiveType, errorIcon: props.errorIcon, errorMessage: props.errorMessage, id: textAreaErrorId, state: props.state, styles: stateStyles }), (0, jsx_runtime_1.jsx)(helpMessageStandAlone_1.HelpMessageStandAlone, { helpMessage: props.helpMessage, id: textAreaHelpTextId, styles: stateStyles })] }), stateStyles?.counterVariant && ((0, jsx_runtime_1.jsx)(textCount_1.TextCount, { currentCharacters: props.value?.length ?? 0, id: textAreaTextCountId, leftColor: stateStyles?.counterLeft?.color, leftWeight: stateStyles?.counterLeft?.font_weight, maxLength: props.maxLength, rightColor: stateStyles?.counterRight?.color, rightWeight: stateStyles?.counterRight?.font_weight, screenReaderText: props.screenReaderTextCount, textVariant: stateStyles?.counter?.font_variant, variant: stateStyles?.counterVariant }))] })] }));
};
exports.TextAreaStandAlone = react_1.default.forwardRef(TextAreaStandAloneComponent);
//# sourceMappingURL=textAreaStandAlone.js.map