@primer/react
Version:
An implementation of GitHub's Primer Design System using React
235 lines (234 loc) • 7.72 kB
JavaScript
import { AriaStatus } from "../live-region/AriaStatus.js";
import Text_default from "../Text/Text.js";
import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
import VisuallyHidden from "../_VisuallyHidden.js";
import { TextInputBaseWrapper } from "../internal/components/TextInputWrapper.js";
import { getCharacterCountState } from "../utils/character-counter.js";
import TextArea_module_css_default from "./TextArea.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React, { useId, useState } from "react";
import { AlertFillIcon } from "@primer/octicons-react";
const DEFAULT_TEXTAREA_RESIZE = "both";
/**
* An accessible, native textarea component that supports validation states.
* This component accepts all native HTML <textarea> attributes as props.
*/
const Textarea = /*#__PURE__*/ React.forwardRef((t0, ref) => {
const $ = c(76);
let block;
let characterLimit;
let className;
let contrast;
let defaultValue;
let disabled;
let maxHeight;
let minHeight;
let onChange;
let required;
let rest;
let style;
let t1;
let t2;
let t3;
let validationStatus;
let value;
if ($[0] !== t0) {
({value, disabled, required, validationStatus, rows: t1, cols: t2, resize: t3, block, contrast, className, minHeight, maxHeight, style, characterLimit, onChange, defaultValue, ...rest} = t0);
$[0] = t0;
$[1] = block;
$[2] = characterLimit;
$[3] = className;
$[4] = contrast;
$[5] = defaultValue;
$[6] = disabled;
$[7] = maxHeight;
$[8] = minHeight;
$[9] = onChange;
$[10] = required;
$[11] = rest;
$[12] = style;
$[13] = t1;
$[14] = t2;
$[15] = t3;
$[16] = validationStatus;
$[17] = value;
} else {
block = $[1];
characterLimit = $[2];
className = $[3];
contrast = $[4];
defaultValue = $[5];
disabled = $[6];
maxHeight = $[7];
minHeight = $[8];
onChange = $[9];
required = $[10];
rest = $[11];
style = $[12];
t1 = $[13];
t2 = $[14];
t3 = $[15];
validationStatus = $[16];
value = $[17];
}
const rows = t1 === void 0 ? 7 : t1;
const cols = t2 === void 0 ? 30 : t2;
const resize = t3 === void 0 ? DEFAULT_TEXTAREA_RESIZE : t3;
const characterCountId = useId();
const characterCountStaticMessageId = useId();
const isControlled = value !== void 0;
let t4;
if ($[18] !== defaultValue) {
t4 = () => defaultValue !== void 0 ? String(defaultValue).length : 0;
$[18] = defaultValue;
$[19] = t4;
} else t4 = $[19];
const [uncontrolledLength, setUncontrolledLength] = useState(t4);
const currentLength = isControlled ? String(value).length : uncontrolledLength;
let t5;
if ($[20] !== block || $[21] !== characterCountId || $[22] !== characterCountStaticMessageId || $[23] !== characterLimit || $[24] !== className || $[25] !== cols || $[26] !== contrast || $[27] !== currentLength || $[28] !== defaultValue || $[29] !== disabled || $[30] !== isControlled || $[31] !== maxHeight || $[32] !== minHeight || $[33] !== onChange || $[34] !== ref || $[35] !== required || $[36] !== resize || $[37] !== rest || $[38] !== rows || $[39] !== style || $[40] !== validationStatus || $[41] !== value) {
var _counter$isOverLimit;
const counter = characterLimit ? getCharacterCountState(currentLength, characterLimit) : void 0;
const isOverLimit = (_counter$isOverLimit = counter === null || counter === void 0 ? void 0 : counter.isOverLimit) !== null && _counter$isOverLimit !== void 0 ? _counter$isOverLimit : false;
let t6;
if ($[43] !== characterLimit || $[44] !== isControlled || $[45] !== onChange) {
t6 = (e) => {
var _onChange;
if (characterLimit && !isControlled) setUncontrolledLength(e.target.value.length);
(_onChange = onChange) === null || _onChange === void 0 || _onChange(e);
};
$[43] = characterLimit;
$[44] = isControlled;
$[45] = onChange;
$[46] = t6;
} else t6 = $[46];
const handleTextareaChange = t6;
const isValid = isOverLimit ? "error" : validationStatus;
const t7 = isValid === "error" ? "true" : "false";
let t8;
if ($[47] !== maxHeight || $[48] !== minHeight || $[49] !== style) {
t8 = {
minHeight,
maxHeight,
...style
};
$[47] = maxHeight;
$[48] = minHeight;
$[49] = style;
$[50] = t8;
} else t8 = $[50];
let t9;
if ($[51] !== characterCountStaticMessageId || $[52] !== characterLimit || $[53] !== rest) {
t9 = characterLimit ? [characterCountStaticMessageId, rest["aria-describedby"]].filter(Boolean).join(" ") || void 0 : rest["aria-describedby"];
$[51] = characterCountStaticMessageId;
$[52] = characterLimit;
$[53] = rest;
$[54] = t9;
} else t9 = $[54];
let t10;
if ($[55] !== cols || $[56] !== defaultValue || $[57] !== disabled || $[58] !== handleTextareaChange || $[59] !== ref || $[60] !== required || $[61] !== resize || $[62] !== rest || $[63] !== rows || $[64] !== t7 || $[65] !== t8 || $[66] !== t9 || $[67] !== value) {
t10 = /*#__PURE__*/ jsx("textarea", {
value,
defaultValue,
"data-resize": resize,
"aria-required": required,
"aria-invalid": t7,
ref,
disabled,
rows,
cols,
className: TextArea_module_css_default.TextArea,
onChange: handleTextareaChange,
style: t8,
...rest,
"aria-describedby": t9
});
$[55] = cols;
$[56] = defaultValue;
$[57] = disabled;
$[58] = handleTextareaChange;
$[59] = ref;
$[60] = required;
$[61] = resize;
$[62] = rest;
$[63] = rows;
$[64] = t7;
$[65] = t8;
$[66] = t9;
$[67] = value;
$[68] = t10;
} else t10 = $[68];
let t11;
if ($[69] !== block || $[70] !== className || $[71] !== contrast || $[72] !== disabled || $[73] !== isValid || $[74] !== t10) {
t11 = /*#__PURE__*/ jsx(TextInputBaseWrapper, {
validationStatus: isValid,
disabled,
block,
contrast,
className,
children: t10
});
$[69] = block;
$[70] = className;
$[71] = contrast;
$[72] = disabled;
$[73] = isValid;
$[74] = t10;
$[75] = t11;
} else t11 = $[75];
t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t11, characterLimit && /*#__PURE__*/ jsxs(Fragment, { children: [
/*#__PURE__*/ jsx(AriaStatus, {
announceOnShow: false,
delayMs: 500,
className: _VisuallyHidden_module_css_default.InternalVisuallyHidden,
children: counter === null || counter === void 0 ? void 0 : counter.message
}),
/*#__PURE__*/ jsxs(VisuallyHidden, {
id: characterCountStaticMessageId,
children: [
"You can enter up to ",
characterLimit,
" ",
characterLimit === 1 ? "character" : "characters"
]
}),
/*#__PURE__*/ jsxs(Text_default, {
"aria-hidden": "true",
id: characterCountId,
size: "small",
className: clsx(TextArea_module_css_default.CharacterCounter, isOverLimit && TextArea_module_css_default["CharacterCounter--error"]),
children: [isOverLimit && /*#__PURE__*/ jsx(AlertFillIcon, { size: 16 }), counter === null || counter === void 0 ? void 0 : counter.message]
})
] })] });
$[20] = block;
$[21] = characterCountId;
$[22] = characterCountStaticMessageId;
$[23] = characterLimit;
$[24] = className;
$[25] = cols;
$[26] = contrast;
$[27] = currentLength;
$[28] = defaultValue;
$[29] = disabled;
$[30] = isControlled;
$[31] = maxHeight;
$[32] = minHeight;
$[33] = onChange;
$[34] = ref;
$[35] = required;
$[36] = resize;
$[37] = rest;
$[38] = rows;
$[39] = style;
$[40] = validationStatus;
$[41] = value;
$[42] = t5;
} else t5 = $[42];
return t5;
});
Textarea.displayName = "Textarea";
Textarea.__SLOT__ = Symbol("Textarea");
//#endregion
export { DEFAULT_TEXTAREA_RESIZE, Textarea as default };