@dxc-technology/halstack-react 0.0.0-3b81157 → 0.0.0-3ce9060

package/text-input/TextInput.js

@@ -29,7 +29,7 @@ var _utils = require("../common/utils");
 
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
-var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
+var _NumberInput = require("../number-input/NumberInput");
 
 var _Suggestions = _interopRequireDefault(require("./Suggestions"));
 
@@ -88,20 +88,20 @@ var hasSuggestions = function hasSuggestions(suggestions) {
   return typeof suggestions === "function" || (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) > 0;
 };
 
-var isNotOptional = function isNotOptional(value, optional) {
+var isRequired = function isRequired(value, optional) {
   return value === "" && !optional;
 };
 
 var isLengthIncorrect = function isLengthIncorrect(value, minLength, maxLength) {
-  return value && minLength && maxLength && (value.length < minLength || value.length > maxLength);
+  return value != null && (value.length < minLength || value.length > maxLength);
 };
 
 var isNumberIncorrect = function isNumberIncorrect(value, minNumber, maxNumber) {
-  return minNumber && parseInt(value) < minNumber || maxNumber && parseInt(value) > maxNumber;
+  return value < minNumber || value > maxNumber;
 };
 
-var patternMissmatch = function patternMissmatch(pattern, value) {
-  return pattern && !new RegExp(pattern).test(value);
+var patternMismatch = function patternMismatch(pattern, value) {
+  return pattern != null && !new RegExp(pattern).test(value);
 };
 
 var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
@@ -182,10 +182,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
-  var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
+  var numberInputContext = (0, _react.useContext)(_NumberInput.NumberInputContext);
 
   var getNumberErrorMessage = function getNumberErrorMessage(value) {
-    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage(numberInputContext.minNumber);else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage(numberInputContext.maxNumber);
+    if (value < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage(numberInputContext.minNumber);else if (value > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage(numberInputContext.maxNumber);
   };
 
   var getTextInputWidth = (0, _react.useCallback)(function () {
@@ -207,22 +207,22 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
   };
 
   var changeValue = function changeValue(newValue) {
-    value !== null && value !== void 0 ? value : setInnerValue(newValue);
-    var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
-    if (isNotOptional(newValue, optional)) onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
+    var formattedValue = typeof newValue === "number" ? newValue.toString() : newValue;
+    value !== null && value !== void 0 ? value : setInnerValue(formattedValue);
+    if (isRequired(formattedValue, optional)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: formattedValue,
       error: translatedLabels.formFields.requiredValueErrorMessage
-    });else if (isLengthIncorrect(newValue, minLength, maxLength)) onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
+    });else if (isLengthIncorrect(formattedValue, minLength, maxLength)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: formattedValue,
       error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
-    });else if (patternMissmatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
+    });else if (patternMismatch(pattern, formattedValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: formattedValue,
       error: translatedLabels.formFields.formatRequestedErrorMessage
-    });else if (isNumberIncorrect(newValue, numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
-      error: getNumberErrorMessage(newValue)
+    });else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && isNumberIncorrect(Number(newValue), numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) onChange === null || onChange === void 0 ? void 0 : onChange({
+      value: formattedValue,
+      error: getNumberErrorMessage(Number(newValue))
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue
+      value: formattedValue
     });
   };
 
@@ -242,18 +242,18 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
 
   var handleInputOnBlur = function handleInputOnBlur(event) {
     closeSuggestions();
-    if (isNotOptional(event.target.value, optional)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+    if (isRequired(event.target.value, optional)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value, minLength, maxLength)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
-    });else if (patternMissmatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+    });else if (patternMismatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: translatedLabels.formFields.formatRequestedErrorMessage
-    });else if (isNumberIncorrect(event.target.value, numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+    });else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && isNumberIncorrect(Number(event.target.value), numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getNumberErrorMessage(event.target.value)
+      error: getNumberErrorMessage(Number(event.target.value))
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value
     });
@@ -338,49 +338,33 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
   var setNumberProps = function setNumberProps(type, min, max, step) {
     var _inputRef$current2, _inputRef$current3, _inputRef$current4, _inputRef$current5;
 
-    type && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setAttribute("type", type));
-    min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("min", min));
-    max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("max", max));
-    step && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.setAttribute("step", step));
+    min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setAttribute("min", min));
+    max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("max", max));
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("step", step);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.setAttribute("type", type);
   };
 
   var decrementNumber = function decrementNumber() {
-    var numberValue = value !== null && value !== void 0 ? value : innerValue;
-
-    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(numberValue) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) {
-      changeValue(parseInt(numberValue));
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) {
-      changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && (parseInt(numberValue) === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberValue === "" || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber))) {
-      changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) >= (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue !== "") {
-      changeValue(parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue == "") {
-      changeValue(-(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
-    } else if (numberValue === "") {
-      changeValue(-1);
+    var currentValue = value !== null && value !== void 0 ? value : innerValue;
+    var numberValue = Number(currentValue);
+    var steppedValue = Math.round((numberValue - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) + Number.EPSILON) * 100) / 100;
+
+    if (currentValue !== "") {
+      if (numberValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || steppedValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberValue);else if (numberValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else if (numberValue === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else changeValue(steppedValue);
     } else {
-      changeValue(parseInt(numberValue) - 1);
+      if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) >= 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) < 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(-numberInputContext.stepNumber);
     }
   };
 
   var incrementNumber = function incrementNumber() {
-    var numberValue = value !== null && value !== void 0 ? value : innerValue;
-
-    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) {
-      changeValue(parseInt(numberValue));
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && (parseInt(numberValue) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberValue === "")) {
-      changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && (parseInt(numberValue) === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber))) {
-      changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) <= (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue !== "") {
-      changeValue(parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
-    } else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue == "") {
-      changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber);
-    } else if (numberValue === "") {
-      changeValue(1);
+    var currentValue = value !== null && value !== void 0 ? value : innerValue;
+    var numberValue = Number(currentValue);
+    var steppedValue = Math.round((numberValue + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) + Number.EPSILON) * 100) / 100;
+
+    if (currentValue !== "") {
+      if (numberValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || steppedValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberValue);else if (numberValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if (numberValue === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(steppedValue);
     } else {
-      changeValue(parseInt(numberValue) + 1);
+      if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) > 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) <= 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(numberInputContext.stepNumber);
     }
   };
 
@@ -410,7 +394,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
       changeVisualFocusIndex(-1);
     }
 
-    (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
+    numberInputContext != null && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
   }, [value, innerValue, suggestions, numberInputContext]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textInput
@@ -502,51 +486,51 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     backgroundType: backgroundType,
     "aria-label": "Error"
   }, _Icons["default"].error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
+    "aria-label": translatedLabels.textInput.clearFieldActionTitle,
     onClick: handleClearActionOnClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
-    backgroundType: backgroundType,
     tabIndex: tabIndex,
     title: translatedLabels.textInput.clearFieldActionTitle,
-    "aria-label": translatedLabels.textInput.clearFieldActionTitle,
-    type: "button"
+    type: "button",
+    backgroundType: backgroundType
   }, _Icons["default"].clear), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Action, {
-    ref: actionRef,
+    "aria-label": translatedLabels.numberInput.decrementValueTitle,
     disabled: disabled,
     onClick: handleDecrementActionOnClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
-    backgroundType: backgroundType,
+    ref: actionRef,
     tabIndex: tabIndex,
     title: translatedLabels.numberInput.decrementValueTitle,
-    "aria-label": translatedLabels.numberInput.decrementValueTitle,
-    type: "button"
+    type: "button",
+    backgroundType: backgroundType
   }, _Icons["default"].decrement), /*#__PURE__*/_react["default"].createElement(Action, {
-    ref: actionRef,
+    "aria-label": translatedLabels.numberInput.incrementValueTitle,
     disabled: disabled,
     onClick: handleIncrementActionOnClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
-    backgroundType: backgroundType,
+    ref: actionRef,
     tabIndex: tabIndex,
     title: translatedLabels.numberInput.incrementValueTitle,
-    "aria-label": translatedLabels.numberInput.incrementValueTitle,
-    type: "button"
+    type: "button",
+    backgroundType: backgroundType
   }, _Icons["default"].increment)), action && /*#__PURE__*/_react["default"].createElement(Action, {
-    ref: actionRef,
+    "aria-label": action.title,
     disabled: disabled,
     onClick: action.onClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
-    title: action.title,
-    "aria-label": action.title,
-    backgroundType: backgroundType,
+    ref: actionRef,
     tabIndex: tabIndex,
-    type: "button"
+    title: action.title,
+    type: "button",
+    backgroundType: backgroundType
   }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
     src: action.icon
   }) : action.icon), suffix && /*#__PURE__*/_react["default"].createElement(Suffix, {
@@ -559,7 +543,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
   }, error)));
 });
 
-var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -607,7 +591,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  padding: 0 0.5rem;\n\n  ", "\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
+var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  padding: 0 0.5rem;\n\n  ", "\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");
 }, function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
@@ -642,7 +626,7 @@ var Action = _styledComponents["default"].button(_templateObject7 || (_templateO
 }, function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionIconColorOnDark : props.theme.disabledActionIconColor : props.backgroundType === "dark" ? props.theme.actionIconColorOnDark : props.theme.actionIconColor;
 }, function (props) {
-  return !props.disabled && "\n      &:focus {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n      }\n    ");
+  return !props.disabled && "\n      &:focus, \n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n      }\n    ");
 });
 
 var Prefix = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin-left: 0.25rem;\n  padding: 0 0.5rem 0 0;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {

package/textarea/Textarea.js

@@ -53,6 +53,8 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$optional = _ref.optional,
       optional = _ref$optional === void 0 ? false : _ref$optional,
       _ref$verticalGrow = _ref.verticalGrow,
@@ -112,7 +114,15 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     });
   };
 
-  var handleTOnBlur = function handleTOnBlur(event) {
+  var autoVerticalGrow = function autoVerticalGrow() {
+    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");
+  };
+
+  var handleOnBlur = function handleOnBlur(event) {
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: translatedLabels.formFields.requiredValueErrorMessage
@@ -127,19 +137,11 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     });
   };
 
-  var handleTOnChange = function handleTOnChange(event) {
+  var handleOnChange = function handleOnChange(event) {
     changeValue(event.target.value);
+    verticalGrow === "auto" && autoVerticalGrow();
   };
 
-  (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 /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textarea
   }, /*#__PURE__*/_react["default"].createElement(TextareaContainer, {
@@ -161,9 +163,10 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     placeholder: placeholder,
     verticalGrow: verticalGrow,
     rows: rows,
-    onChange: handleTOnChange,
-    onBlur: handleTOnBlur,
+    onChange: handleOnChange,
+    onBlur: handleOnBlur,
     disabled: disabled,
+    readOnly: readOnly,
     error: error,
     minLength: minLength,
     maxLength: maxLength,
@@ -171,9 +174,9 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     backgroundType: backgroundType,
     ref: textareaRef,
     tabIndex: tabIndex,
-    "aria-invalid": error ? "true" : "false",
+    "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
-    "aria-required": optional ? "false" : "true"
+    "aria-required": !disabled && !optional
   }), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     backgroundType: backgroundType,
@@ -240,18 +243,17 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var Textarea = _styledComponents["default"].textarea(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n  ", "\n\n  padding: 0.5rem 1rem;\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 0.25rem;\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"])), 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;";
+var Textarea = _styledComponents["default"].textarea(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", ";\n\n  ", "\n\n  padding: 0.5rem 1rem;\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 0.25rem;\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"])), function (_ref2) {
+  var verticalGrow = _ref2.verticalGrow;
+  if (verticalGrow === "none") return "resize: none;";else if (verticalGrow === "auto") return "resize: none; overflow: hidden;";else if (verticalGrow === "manual") return "resize: vertical;";else return "resize: none;";
 }, function (props) {
   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) {
-  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.error && !props.disabled && "border-color: transparent;\n     box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorBorderColor, ";\n  ");
+  if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else if (props.error) return "transparent";else if (props.readOnly) return props.theme.readOnlyBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
 }, function (props) {
-  return props.disabled && "cursor: not-allowed;";
+  return props.error && !props.disabled && "box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorBorderColor, ";\n  ");
 }, function (props) {
-  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    ");
+  return !props.disabled ? "&:hover {\n        border-color: ".concat(props.error ? "transparent" : props.readOnly ? props.theme.hoverReadOnlyBorderColor : 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, &: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      }") : "cursor: not-allowed;";
 }, function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
 }, function (props) {

package/textarea/Textarea.stories.jsx

@@ -43,6 +43,14 @@ export const Chromatic = () => (
         <Title title="Disabled with value" theme="light" level={4} />
         <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
       </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Read only" theme="light" level={4} />
+        <DxcTextarea label="Label" readOnly defaultValue="Example text" verticalGrow="manual" />
+      </ExampleContainer>
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Hovered read only" theme="light" level={4} />
+        <DxcTextarea label="Label" readOnly defaultValue="Example text" verticalGrow="manual" />
+      </ExampleContainer>
       <ExampleContainer>
         <Title title="With error" theme="light" level={4} />
         <DxcTextarea

package/textarea/Textarea.test.js

@@ -78,7 +78,7 @@ describe("Textarea component tests", function () {
     var textarea = getByLabelText("Example label");
     expect(textarea.rows).toBe(10);
   });
-  test("Renders with correct accesibility attributes", function () {
+  test("Renders with correct accessibility attributes", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label"
     })),
@@ -116,17 +116,61 @@ describe("Textarea component tests", function () {
 
     expect(onChange).not.toHaveBeenCalled();
   });
+  test("Read-only textarea does not trigger onChange function", function () {
+    var onChange = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onChange: onChange,
+      readOnly: true
+    })),
+        getByLabelText = _render10.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _userEvent["default"].type(textarea, "Test");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only textarea sends its value on submit", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      var formProps = Object.fromEntries(formData);
+      expect(formProps).toStrictEqual({
+        data: "Comments"
+      });
+    });
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+      onSubmit: handlerOnSubmit
+    }, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      name: "data",
+      defaultValue: "Comments",
+      readOnly: true
+    }), /*#__PURE__*/_react["default"].createElement("button", {
+      type: "submit"
+    }, "Submit"))),
+        getByText = _render11.getByText;
+
+    var submit = getByText("Submit");
+
+    _userEvent["default"].click(submit);
+
+    expect(handlerOnSubmit).toHaveBeenCalled();
+  });
   test("Not optional constraint (onBlur)", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       placeholder: "Placeholder",
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByLabelText = _render10.getByLabelText;
+        getByLabelText = _render12.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 
@@ -156,12 +200,12 @@ describe("Textarea component tests", function () {
   test("Not optional constraint (onChange)", function () {
     var onChange = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       placeholder: "Placeholder",
       onChange: onChange
     })),
-        getByLabelText = _render11.getByLabelText;
+        getByLabelText = _render13.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 
@@ -190,7 +234,7 @@ describe("Textarea component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       placeholder: "Placeholder",
       onChange: onChange,
@@ -201,7 +245,7 @@ describe("Textarea component tests", function () {
       },
       pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
     })),
-        getByLabelText = _render12.getByLabelText;
+        getByLabelText = _render14.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 
@@ -249,7 +293,7 @@ describe("Textarea component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       placeholder: "Placeholder",
       onChange: onChange,
@@ -261,7 +305,7 @@ describe("Textarea component tests", function () {
       minLength: 5,
       maxLength: 10
     })),
-        getByLabelText = _render13.getByLabelText;
+        getByLabelText = _render15.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 
@@ -309,7 +353,7 @@ describe("Textarea component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       placeholder: "Placeholder",
       onChange: onChange,
@@ -322,7 +366,7 @@ describe("Textarea component tests", function () {
       minLength: 5,
       maxLength: 10
     })),
-        getByLabelText = _render14.getByLabelText;
+        getByLabelText = _render16.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 
@@ -387,11 +431,11 @@ describe("Textarea component tests", function () {
   test("onBlur function is called correctly", function () {
     var onBlur = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       onBlur: onBlur
     })),
-        getByLabelText = _render15.getByLabelText;
+        getByLabelText = _render17.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 
@@ -411,12 +455,12 @@ describe("Textarea component tests", function () {
   test("onChange function is called correctly", function () {
     var onChange = jest.fn();
 
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
       label: "Example label",
       value: "Test value",
       onChange: onChange
     })),
-        getByLabelText = _render16.getByLabelText;
+        getByLabelText = _render18.getByLabelText;
 
     var textarea = getByLabelText("Example label");
 

package/textarea/types.d.ts

@@ -34,6 +34,10 @@ declare type Props = {
      * If true, the component will be disabled.
      */
     disabled?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
     /**
      * If true, the textarea will be optional, showing '(Optional)'
      * next to the label. Otherwise, the field will be considered required