@veracity/vui 1.8.0-redesign.0 → 1.8.1

package/dist/cjs/textarea/textarea.js

@@ -42,9 +42,10 @@ const react_1 = __importStar(require("react"));
 const core_1 = require("../core");
 const t_1 = __importDefault(require("../t"));
 const utils_1 = require("../utils");
+const consts_1 = require("./consts");
 const helpers_1 = require("./helpers");
 const TextareaTextarea = core_1.styled.textareaBox `
-  border-radius: none;
+  border-radius: md;
   border-width: 1px;
   outline: none;
   padding: 1;
@@ -75,13 +76,15 @@ exports.TextareaBase = core_1.styled.divBox `
  * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
  */
 exports.Textarea = (0, core_1.vui)((props, ref) => {
-    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
     const _a = (0, core_1.omitThemingProps)(props), { autoFocus, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, id, isInvalid, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = 'none', rows, showCount, textareaProps = {}, textareaRef, value } = _a, rest = __rest(_a, ["autoFocus", "className", "colorScheme", "cols", "defaultValue", "disabled", "id", "isInvalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "placeholder", "readOnly", "required", "resize", "rows", "showCount", "textareaProps", "textareaRef", "value"]);
+    const [count, setCount] = (0, react_1.useState)((0, helpers_1.getInitialCount)(props));
+    const [valueInternal, setValueInternal] = (0, react_1.useState)(defaultValue);
     const colorProps = (0, utils_1.filterUndefined)({
         colorScheme: colorSchemeProp !== null && colorSchemeProp !== void 0 ? colorSchemeProp : (isInvalid ? 'red' : undefined)
     });
     const styles = (0, core_1.useStyleConfig)('Textarea', Object.assign(Object.assign({}, colorProps), props));
     function onChange(e) {
+        setValueInternal(e.target.value);
         setCount(e.target.value.length);
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(e);
     }
@@ -90,10 +93,15 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
     });
     const textareaAliasedProps = (0, utils_1.filterUndefined)({
         'aria-disabled': disabled,
-        bg: readOnly ? 'grey.20' : undefined,
+        bg: readOnly ? consts_1.greyLightColor : undefined,
         focusBorderColor: !readOnly ? 'transparent' : undefined,
         focusRing: readOnly ? 0 : undefined
     });
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setValueInternal(value);
+        setCount(((_a = `${value}`) === null || _a === void 0 ? void 0 : _a.length) ? `${value}`.length : 0);
+    }, [value]);
     return (react_1.default.createElement(exports.TextareaBase, Object.assign({ className: (0, utils_1.cs)('vui-textarea', className), ref: ref }, styles.container, aliasedProps, rest),
         react_1.default.createElement(TextareaTextarea, Object.assign({ className: "vui-textareaTextarea", ref: textareaRef }, {
             autoFocus,
@@ -110,12 +118,11 @@ exports.Textarea = (0, core_1.vui)((props, ref) => {
             readOnly,
             required,
             resize,
-            rows,
-            value
-        }, styles.textarea, textareaAliasedProps, textareaProps)),
-        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: "grey.80", position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
+            rows
+        }, { value: valueInternal }, styles.textarea, textareaAliasedProps, textareaProps)),
+        showCount && (react_1.default.createElement(t_1.default, { className: "vui-textareaCount", color: maxLength && count > maxLength ? consts_1.redColor : consts_1.greyColor, position: "absolute", right: 0, size: "sm", top: "calc(100% + 1px)" },
             count,
-            " / ",
-            maxLength))));
+            " ",
+            maxLength ? `/ ${maxLength}` : null))));
 });
 exports.default = exports.Textarea;