@dxc-technology/halstack-react 0.0.0-2d619b4 → 0.0.0-2f08981

package/dist/textarea/Textarea.js

@@ -21,22 +21,70 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+var _utils = require("../common/utils.js");
+
+var _useTheme = _interopRequireDefault(require("../useTheme.js"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _variables = require("../common/variables.js");
 
-var _utils = require("../common/utils.js");
+var _uuid = require("uuid");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
 
-var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
+function _templateObject6() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  min-height: 1.5em;\n  line-height: 1.5em;\n"]);
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+  _templateObject6 = function _templateObject6() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject5() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  ", "\n\n  margin: calc(1rem * 0.25) 0;\n  padding: calc(1rem * 0.5) calc(1rem * 1);\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: calc(1rem * 0.25);\n  border: 1px solid\n    ", ";\n  ", "\n\n  ", ";\n  ", ";\n\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5em;\n\n  ::placeholder {\n    color: ", ";\n  }\n"]);
+
+  _templateObject5 = function _templateObject5() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject4() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"]);
+
+  _templateObject4 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
 
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: ", ";\n\n  .MuiTextField-root {\n    width: 100%;\n\n    .MuiFormHelperText-root {\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      margin-top: 6px;\n    }\n    .MuiFormLabel-root {\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      letter-spacing: ", ";\n      color: ", ";\n      padding-left: \"inherit\";\n\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n\n      &.Mui-focused {\n        color: ", ";\n        &.MuiInputLabel-shrink {\n          transform: \"translate(0, 1.5px) scale(0.75);\";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        font-family: ", ";\n        transform: \"translate(0, 1.5px) scale(0.75)\";\n      }\n\n      &.Mui-error {\n        color: ", ";\n      }\n\n      &:not(.MuiInputLabel-shrink) {\n        font-family: ", ";\n        color: ", ";\n        & + div,\n        & + div + p {\n          color: ", ";\n        }\n      }\n\n      &.MuiInputLabel-shrink {\n        & + div::before {\n          border-color: ", ";\n        }\n        & + div + p {\n          color: ", ";\n        }\n      }\n    }\n    .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n      &::before {\n        border-bottom: ", ";\n      }\n\n      &:not(.Mui-error)::before,\n      &:not(&.Mui-focused)::before {\n        border-bottom: ", ";\n      }\n\n      &::after {\n        border-bottom: ", ";\n      }\n\n      .MuiInputBase-inputMultiline {\n        overflow: auto !important;\n\n        ::-webkit-scrollbar {\n          width: 3px;\n        }\n\n        ::-webkit-scrollbar-track {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n          border-radius: 3px;\n        }\n      }\n\n      &.Mui-error {\n        &::before {\n          border-width: ", ";\n          border-color: ", ";\n        }\n        &::after {\n          transform: scaleX(0);\n        }\n      }\n\n      &.Mui-focused {\n        &::after {\n          border-width: calc(", " + 1px);\n          border-color: ", ";\n        }\n        &.Mui-error::after {\n          border-color: ", ";\n        }\n      }\n\n      &.Mui-disabled {\n        cursor: not-allowed;\n\n        &::before {\n          border-bottom: ", ";\n          border-bottom-style: solid;\n        }\n      }\n\n      .MuiInputBase-input {\n        font-family: ", ";\n        font-size: ", ";\n        font-style: ", ";\n        font-weight: ", ";\n        letter-spacing: ", ";\n        color: ", ";\n        line-height: ", ";\n        padding-left: \"inherit\";\n        text-overflow: ellipsis;\n\n        &.Mui-disabled {\n          cursor: not-allowed;\n          color: ", ";\n        }\n      }\n\n      &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n        border-bottom-color: ", ";\n      }\n    }\n\n    & > p {\n      &.Mui-error {\n        color: ", ";\n      }\n      &.Mui-disabled {\n        color: ", " !important;\n        cursor: not-allowed;\n      }\n    }\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -45,28 +93,48 @@ function _templateObject() {
   return data;
 }
 
-var DxcTextarea = function DxcTextarea(_ref) {
+var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
+  return "This field is required. Please, enter a value.";
+};
+
+var getLengthErrorMessage = function getLengthErrorMessage(length) {
+  return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
+};
+
+var getPatternErrorMessage = function getPatternErrorMessage() {
+  return "Please match the format requested.";
+};
+
+var patternMatch = function patternMatch(pattern, value) {
+  return new RegExp(pattern).test(value);
+};
+
+var DxcTextarea = _react["default"].forwardRef(function (_ref, ref) {
   var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? " " : _ref$label,
+      label = _ref$label === void 0 ? "" : _ref$label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$assistiveText = _ref.assistiveText,
-      assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
-      _ref$onBlur = _ref.onBlur,
-      onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
-      _ref$numRows = _ref.numRows,
-      numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
-      _ref$invalid = _ref.invalid,
-      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
-      _ref$required = _ref.required,
-      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$helperText = _ref.helperText,
+      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$optional = _ref.optional,
+      optional = _ref$optional === void 0 ? false : _ref$optional,
+      _ref$verticalGrow = _ref.verticalGrow,
+      verticalGrow = _ref$verticalGrow === void 0 ? "auto" : _ref$verticalGrow,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 4 : _ref$rows,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      _ref$error = _ref.error,
+      error = _ref$error === void 0 ? "" : _ref$error,
+      pattern = _ref.pattern,
+      length = _ref.length,
+      _ref$autocomplete = _ref.autocomplete,
+      autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
@@ -78,63 +146,111 @@ var DxcTextarea = function DxcTextarea(_ref) {
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
 
+  var _useState3 = (0, _react.useState)("textarea-".concat((0, _uuid.v4)())),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
+      textareaId = _useState4[0];
+
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+  var textareaRef = (0, _react.useRef)(null);
+  var errorId = "error-message-".concat(textareaId);
 
-  var handlerTextareaChange = function handlerTextareaChange(event) {
-    if (value === null || value === undefined) {
-      if (typeof onChange === "function") {
-        setInnerValue(event.target.value);
-        onChange(event.target.value);
-      } else {
-        setInnerValue(event.target.value);
-      }
-    } else if (onChange !== "") {
-      if (typeof onChange === "function") {
-        onChange(event.target.value);
-      } else {
-        setInnerValue(event.target.value);
-      }
-    }
+  var isNotOptional = function isNotOptional(value) {
+    return value === "" && !optional;
   };
 
-  var handlerTextareaBlur = function handlerTextareaBlur(event) {
-    setInnerValue(event.target.value);
+  var isLengthIncorrect = function isLengthIncorrect(value) {
+    return value !== "" && length && length.min && length.max && (value.length < length.min || value.length > length.max);
+  };
 
-    if (onBlur) {
-      onBlur(event.target.value);
-    }
+  var changeValue = function changeValue(newValue) {
+    value !== null && value !== void 0 ? value : setInnerValue(newValue);
+    if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue,
+      error: getNotOptionalErrorMessage()
+    });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue,
+      error: getLengthErrorMessage(length)
+    });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue,
+      error: getPatternErrorMessage()
+    });else onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: newValue,
+      error: null
+    });
+  };
+
+  var handleTOnBlur = function handleTOnBlur(event) {
+    if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      value: event.target.value,
+      error: getNotOptionalErrorMessage()
+    });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      value: event.target.value,
+      error: getLengthErrorMessage(length)
+    });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      value: event.target.value,
+      error: getPatternErrorMessage()
+    });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      value: event.target.value,
+      error: null
+    });
   };
 
+  var handleTOnChange = function handleTOnChange(event) {
+    changeValue(event.target.value);
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    if (verticalGrow === "auto") {
+      var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
+      var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
+      textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
+      var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
+      textareaRef.current.style.height = "".concat(newHeight, "px");
+    }
+  }, [value, verticalGrow, rows, innerValue]);
   return _react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textarea
-  }, _react["default"].createElement(TextContainer, {
-    required: required,
-    assistiveText: assistiveText,
+  }, _react["default"].createElement(TextareaContainer, {
     margin: margin,
     size: size,
+    ref: ref
+  }, _react["default"].createElement(Label, {
+    htmlFor: textareaId,
+    disabled: disabled,
     backgroundType: backgroundType
-  }, _react["default"].createElement(_TextField["default"], {
-    error: invalid,
-    value: value !== null ? value : innerValue,
-    name: name,
-    multiline: true,
+  }, label, " ", optional && _react["default"].createElement(OptionalLabel, null, "(Optional)")), _react["default"].createElement(HelperText, {
     disabled: disabled,
-    label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
-    helperText: assistiveText,
-    onChange: handlerTextareaChange,
-    onBlur: onBlur && handlerTextareaBlur || null,
-    rows: numRows,
+    backgroundType: backgroundType
+  }, helperText), _react["default"].createElement(Textarea, {
+    id: textareaId,
+    name: name,
+    value: value !== null && value !== void 0 ? value : innerValue,
     placeholder: placeholder,
-    inputProps: {
-      tabIndex: tabIndex
-    }
-  })));
-};
+    verticalGrow: verticalGrow,
+    rows: rows,
+    onChange: handleTOnChange,
+    onBlur: handleTOnBlur,
+    disabled: disabled,
+    error: error,
+    minLength: length === null || length === void 0 ? void 0 : length.min,
+    maxLength: length === null || length === void 0 ? void 0 : length.max,
+    autoComplete: autocomplete,
+    backgroundType: backgroundType,
+    ref: textareaRef,
+    tabIndex: tabIndex,
+    "aria-invalid": error ? "true" : "false",
+    "aria-describedby": error ? errorId : undefined,
+    "aria-required": optional ? "false" : "true"
+  }), !disabled && _react["default"].createElement(Error, {
+    id: errorId,
+    backgroundType: backgroundType
+  }, error)));
+});
 
 var sizes = {
-  small: "42px",
-  medium: "240px",
+  small: "240px",
+  medium: "360px",
   large: "480px",
   fillParent: "100%"
 };
@@ -143,7 +259,9 @@ var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
 
-var TextContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+var TextareaContainer = _styledComponents["default"].div(_templateObject(), function (props) {
+  return calculateWidth(props.margin, props.size);
+}, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -153,18 +271,12 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-}, function (props) {
-  return calculateWidth(props.margin, props.size);
+});
+
+var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
+  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.assistiveTextFontSize;
-}, function (props) {
-  return props.theme.assistiveTextFontStyle;
-}, function (props) {
-  return props.theme.assistiveTextFontWeight;
-}, function (props) {
-  return props.theme.assistiveTextLetterSpacing;
 }, function (props) {
   return props.theme.labelFontSize;
 }, function (props) {
@@ -172,49 +284,41 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.theme.labelFontWeight;
 }, function (props) {
-  return props.theme.labelLetterSpacing;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
-}, function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
+  return props.theme.labelLineHeight;
+});
+
+var OptionalLabel = _styledComponents["default"].span(_templateObject3(), function (props) {
+  return props.theme.optionalLabelFontWeight;
+});
+
+var HelperText = _styledComponents["default"].span(_templateObject4(), function (props) {
+  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
-}, function (props) {
-  return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
+  return props.theme.helperTextFontSize;
 }, function (props) {
-  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
+  return props.theme.helperTextFontStyle;
 }, function (props) {
-  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
+  return props.theme.helperTextFontWeight;
 }, function (props) {
-  return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.scrollBarTrackColorOnDark : props.theme.scrollBarTrackColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.scrollBarThumbColorOnDark : props.theme.scrollBarThumbColor;
+  return props.theme.helperTextLineHeight;
+});
+
+var Textarea = _styledComponents["default"].textarea(_templateObject5(), function (props) {
+  if (props.verticalGrow === "none") return "resize: none;";else if (props.verticalGrow === "auto") return "resize: none; overflow: hidden;";else if (props.verticalGrow === "manual") return "resize: vertical;";else return "resize: none;";
 }, function (props) {
-  return props.theme.underlineThickness;
+  if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");else return "background-color: transparent;";
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
+  if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
 }, function (props) {
-  return props.theme.underlineThickness;
+  return props.error && !props.disabled && "border-color: transparent;\n     box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorBorderColor, ";\n  ");
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
+  return props.disabled && "cursor: not-allowed;";
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
+  return !props.disabled && "\n      &:hover {\n        border-color: ".concat(props.error ? "transparent" : props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor, ";\n        ").concat(props.error && "box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.hoverErrorBorderColorOnDark : props.theme.hoverErrorBorderColor, ";"), "\n      }\n      &:focus {\n        outline: none;\n        border-color: transparent;\n        box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n      }\n      &:focus-within {\n        outline: none;\n        border-color: transparent;\n        box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n      }\n    ");
 }, function (props) {
-  return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
+  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
 }, function (props) {
   return props.theme.fontFamily;
 }, function (props) {
@@ -224,40 +328,41 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
 }, function (props) {
   return props.theme.valueFontWeight;
 }, function (props) {
-  return props.theme.valueLetterSpacing;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
-}, function (props) {
-  return props.theme.valueLineHeight;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
-}, function (props) {
-  return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
-}, function (props) {
-  return "".concat(props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor, " !important");
+  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
+});
+
+var Error = _styledComponents["default"].span(_templateObject6(), function (props) {
+  return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
+  return props.theme.fontFamily;
 });
 
 DxcTextarea.propTypes = {
   label: _propTypes["default"].string,
   name: _propTypes["default"].string,
   value: _propTypes["default"].string,
-  assistiveText: _propTypes["default"].string,
-  disabled: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  invalid: _propTypes["default"].bool,
+  helperText: _propTypes["default"].string,
   placeholder: _propTypes["default"].string,
+  verticalGrow: _propTypes["default"].oneOf(["auto", "none", "manual"]),
+  rows: _propTypes["default"].number,
+  length: _propTypes["default"].shape({
+    min: _propTypes["default"].number,
+    max: _propTypes["default"].number
+  }),
+  pattern: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  optional: _propTypes["default"].bool,
   onChange: _propTypes["default"].func,
   onBlur: _propTypes["default"].func,
-  numRows: _propTypes["default"].number,
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
+  error: _propTypes["default"].string,
+  autocomplete: _propTypes["default"].string,
   margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
     top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
     right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
   }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
+  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
   tabIndex: _propTypes["default"].number
 };
 var _default = DxcTextarea;

package/dist/{new-textarea → textarea}/index.d.ts

@@ -6,7 +6,6 @@ type Margin = {
   left?: Space;
   right?: Space;
 };
-type VerticalGrow = "auto" | "manual" | "none";
 
 type Props = {
   /**
@@ -34,7 +33,10 @@ type Props = {
    */
   disabled?: boolean;
   /**
-   * If true, the textarea will be marked as optional, showing '(Optional)' next to the label. Otherwise, the field will be considered required and will display an error when not filled in.
+   * If true, the textarea will be optional, showing '(Optional)' 
+   * next to the label. Otherwise, the field will be considered required 
+   * and an error will be passed as a parameter to the OnBlur and onChange functions 
+   * when it has not been filled.
    */
   optional?: boolean;
   /**
@@ -43,44 +45,58 @@ type Props = {
    *    - 'manual': The height of the textarea is enabled to be manually modified.
    *    - 'none': The textarea has a fixed height and can't be modified.
    */
-  verticalGrow?: VerticalGrow;
+  verticalGrow?: "auto" | "manual" | "none";
   /**
    * Number of rows of the textarea.
    */
   rows?: number;
   /**
-   * This function will be called when the user types within the textarea. The new value will be passed as a parameter.
+   * This function will be called when the user types within the textarea.
+   * An object including the current value and the error (if the value
+   * entered is not valid) will be passed to this function. 
+   * If there is no error, error will be null.
    */
-  onChange?: (value: string) => void;
+  onChange?: (val: { value: string; error: string }) => void;
   /**
-   * This function will be called when the textarea loses the focus. An object including the textarea value and the error will be passed to this function. 
-   * If there is no error, error will be null.
+   * This function will be called when the textarea loses the focus. An
+   * object including the textarea value and the error (if the value entered
+   * is not valid) will be passed to this function. If there is no error, 
+   * error will be null.
    */
   onBlur?: (val: { value: string; error: string }) => void;
   /**
-   * If it is defined, the component will change its appearance, showing the error below the textarea component. If it is not defined, the error messages will be created and managed internally.
+   * If it is defined, the component will change its appearance, showing
+   * the error below the textarea. If it is not defined, the error
+   * messages will be managed internally, but never displayed on its own.
    */
   error?: string;
   /**
-   * Regular expression that defines the valid format allowed by the textarea. This will be checked when the textarea loses the focus. 
-   * If the value entered does not match the pattern, the onBlur function will be called with the value entered and the error informing that the value does not match the pattern as parameters. 
-   * If the pattern is accomplished, the error parameter will be null.
+   * Regular expression that defines the valid format allowed by the
+   * textarea. This will be checked both when the textarea loses the focus
+   * and while typing within it. If the string entered does not match the
+   * pattern, the onBlur and onChange functions will be called with the
+   * current value and an internal error informing that this value does not
+   * match the pattern. If the pattern is met, the error parameter of both
+   * events will be null.
    */
   pattern?: string;
   /**
-   * Specifies the minimun and maximum length allowed by the textarea. It follows this structure: { min: minLength, max: maxLength }. 
-   * This will be checked when the textarea loses the focus. If the value entered does not comply the length, 
-   * the onBlur function will be called with the value entered and the error informing that the value does not comply the length as parameters. 
-   * If the length is accomplished, the error parameter will be null.
+   * Specifies the minimun and maximum length allowed by the textarea.
+   * This will be checked both when the textarea loses the
+   * focus and while typing within it. If the string entered does not
+   * comply the length, the onBlur and onChange functions will be called
+   * with the current value and an internal error informing that the value
+   * length does not comply the specified range. If a valid length is
+   * reached, the error parameter of both events will be null.
    */
   length?: { min: number; max: number };
   /**
-   * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value. 
+   * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
    * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
    */
   autocomplete?: string;
   /**
-   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). 
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
    * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
    */
   margin?: Space | Margin;
@@ -98,4 +114,4 @@ type Props = {
   ref?: React.RefObject<HTMLDivElement>;
 };
 
-export default function DxcNewTextarea(props: Props): JSX.Element;
+export default function DxcTextarea(props: Props): JSX.Element;

package/dist/toggle/index.d.ts

@@ -0,0 +1,21 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+type Props = {
+  label?: string;
+  helperText?: string;
+  value?: any;
+  onChange?: void;
+  disabled?: boolean,
+  options?: any;
+  multiple?: boolean;
+  margin?: Space | Margin;
+  tabIndex?: number;
+};
+
+export default function DxcToggle(props: Props): JSX.Element;