@dxc-technology/halstack-react 0.0.0-ec7b867 → 0.0.0-ecc45e2

package/tag/Tag.stories.tsx

@@ -39,7 +39,10 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With label and icon" theme="light" level={4} />
-      <DxcTag label="Tag" icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png" />
+      <DxcTag
+        label="Tag"
+        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With right icon" theme="light" level={4} />
@@ -95,32 +98,33 @@ export const Chromatic = () => (
     <Title title="Sizes" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Small size" theme="light" level={4} />
-      <DxcTag label="Small" size="small" />
+      <DxcTag label="Small" size="small" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size" theme="light" level={4} />
-      <DxcTag label="Medium size medium s" size="medium" />
+      <DxcTag label="Medium size medium s" size="medium" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size with ellipsis" theme="light" level={4} />
-      <DxcTag label="Medium size medium si medium" size="medium" />
+      <DxcTag label="Medium size medium si medium" size="medium" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size" theme="light" level={4} />
-      <DxcTag label="Large size large size large size large size large size" size="large" />
+      <DxcTag label="Large size large size large size large size large size" size="large" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size with ellipsis" theme="light" level={4} />
-      <DxcTag label="Large size large size large size large size large size large size" size="large" />
+      <DxcTag label="Large size large size large size large size large size large size" size="large" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="FillParent size" theme="light" level={4} />
-      <DxcTag label="FillParent" size="fillParent" />
+      <DxcTag label="FillParent" size="fillParent" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="FitContent size" theme="light" level={4} />
-      <DxcTag label="FitContent" size="fitContent" />
+      <DxcTag label="FitContent" size="fitContent" icon={icon} />
     </ExampleContainer>
+    <hr />
   </>
 );
 

package/tag/Tag.test.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Tag = _interopRequireDefault(require("./Tag"));
+
+describe("Tag component tests", function () {
+  test("Tag renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct label before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      labelPosition: "before"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct icon", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      icon: "/test-icon.jpg"
+    })),
+        getByRole = _render3.getByRole;
+
+    expect(getByRole("img").getAttribute("src")).toBe("/test-icon.jpg");
+  });
+  test("Tag renders with link href", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      linkHref: "/test/page"
+    })),
+        getByRole = _render4.getByRole;
+
+    expect(getByRole("link").getAttribute("href")).toBe("/test/page");
+  });
+  test("Call correct function on click", function () {
+    var onClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      onClick: onClick
+    })),
+        getByText = _render5.getByText;
+
+    _react2.fireEvent.click(getByText("tag-test"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/tag/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type TagCommonProps = {
     /**
      * If defined, the tag will be displayed as an anchor, using this prop as "href".

package/text-input/Suggestion.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SuggestionProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ id, value, onClick, suggestion, isLast, visuallyFocused, highlighted, }: SuggestionProps) => JSX.Element>;
+export default _default;

package/text-input/Suggestion.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Suggestion = function Suggestion(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      suggestion = _ref.suggestion,
+      isLast = _ref.isLast,
+      visuallyFocused = _ref.visuallyFocused,
+      highlighted = _ref.highlighted;
+  var regEx = new RegExp(value, "i");
+  var matchedWords = suggestion.match(regEx);
+  var noMatchedWords = suggestion.replace(regEx, "");
+  return /*#__PURE__*/_react["default"].createElement(SuggestionContainer, {
+    id: id,
+    onClick: onClick,
+    visuallyFocused: visuallyFocused,
+    role: "option",
+    "aria-selected": visuallyFocused ? "true" : undefined
+  }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
+    last: isLast,
+    visuallyFocused: visuallyFocused
+  }, highlighted ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
+};
+
+var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent";
+}, function (props) {
+  return props.theme.hoverListOptionBackgroundColor;
+}, function (props) {
+  return props.theme.activeListOptionBackgroundColor;
+});
+
+var StyledSuggestion = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
+  return props.last || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(Suggestion);
+
+exports["default"] = _default;

package/text-input/TextInput.js

@@ -21,6 +21,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
@@ -31,7 +33,9 @@ var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColor
 
 var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -106,14 +110,6 @@ var makeCancelable = function makeCancelable(promise) {
   };
 };
 
-var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
-  return "This field is required. Please, enter a value.";
-};
-
-var getPatternErrorMessage = function getPatternErrorMessage() {
-  return "Please match the format requested.";
-};
-
 var patternMatch = function patternMatch(pattern, value) {
   return new RegExp(pattern).test(value);
 };
@@ -135,6 +131,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       value = _ref.value,
       helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
@@ -169,7 +167,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
       inputId = _useState2[0];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)(defaultValue),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       innerValue = _useState4[0],
       setInnerValue = _useState4[1];
@@ -203,9 +201,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var inputRef = (0, _react.useRef)(null);
   var actionRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var autosuggestId = "".concat(inputId, "-listBox");
-  var errorId = "error-message-".concat(inputId);
+  var errorId = "error-".concat(inputId);
   var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
   var lastOptionIndex = (0, _react.useMemo)(function () {
     return getLastOptionIndex(filteredSuggestions);
@@ -219,10 +218,6 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     return value && minLength && maxLength && (value.length < minLength || value.length > maxLength);
   };
 
-  var getLengthErrorMessage = function getLengthErrorMessage() {
-    return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
-  };
-
   var isNumberIncorrect = function isNumberIncorrect(value) {
     return (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
   };
@@ -234,7 +229,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   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 "Value must be greater than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, ".");else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return "Value must be less than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber, ".");
+    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);
   };
 
   var hasSuggestions = function hasSuggestions() {
@@ -255,19 +250,18 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
     if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: getNumberErrorMessage(newValue)
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
-      error: null
+      value: changedValue
     });
   };
 
@@ -289,31 +283,30 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     suggestions && closeSuggestions();
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });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()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: getNumberErrorMessage(event.target.value)
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-      value: event.target.value,
-      error: null
+      value: event.target.value
     });
   };
 
   var handleIOnKeyDown = function handleIOnKeyDown(event) {
-    switch (event.keyCode) {
-      case 40:
-        // Arrow Down
+    switch (event.key) {
+      case "Down":
+      case "ArrowDown":
+        event.preventDefault();
+
         if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number") {
           decrementNumber();
-          event.preventDefault();
         } else {
-          event.preventDefault();
           openSuggestions();
 
           if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
@@ -325,13 +318,13 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 38:
-        // Arrow Up
+      case "Up":
+      case "ArrowUp":
+        event.preventDefault();
+
         if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number") {
           incrementNumber();
-          event.preventDefault();
         } else {
-          event.preventDefault();
           openSuggestions();
 
           if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
@@ -343,8 +336,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 27:
-        // Esc
+      case "Esc":
+      case "Escape":
         event.preventDefault();
 
         if (hasSuggestions()) {
@@ -354,8 +347,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 13:
-        // Enter
+      case "Enter":
         if (hasSuggestions() && !isSearching) {
           var validFocusedSuggestion = filteredSuggestions.length > 0 && visualFocusedSuggIndex >= 0 && visualFocusedSuggIndex < filteredSuggestions.length;
           validFocusedSuggestion && changeValue(filteredSuggestions[visualFocusedSuggIndex]);
@@ -468,45 +460,22 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
     (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
   }, [value, innerValue, suggestions, numberInputContext]);
-
-  var HighlightedSuggestion = function HighlightedSuggestion(_ref2) {
-    var suggestion = _ref2.suggestion,
-        index = _ref2.index;
-    var regEx = new RegExp(value !== null && value !== void 0 ? value : innerValue, "i");
-    var matchedWords = suggestion.match(regEx);
-    var noMatchedWords = suggestion.replace(regEx, "");
-    var isLastOption = index === lastOptionIndex;
-    return /*#__PURE__*/_react["default"].createElement(Suggestion, {
-      id: "suggestion-".concat(index),
-      onClick: function onClick() {
-        changeValue(suggestion);
-        closeSuggestions();
-      },
-      visualFocused: visualFocusedSuggIndex === index,
-      role: "option",
-      "aria-selected": visualFocusedSuggIndex === index && "true"
-    }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
-      last: isLastOption,
-      visualFocused: visualFocusedSuggIndex === index
-    }, typeof suggestions === "function" ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textInput
-  }, /*#__PURE__*/_react["default"].createElement(DxcInput, {
+  }, /*#__PURE__*/_react["default"].createElement(TextInputContainer, {
     margin: margin,
-    ref: ref,
-    size: size
+    size: size,
+    ref: ref
   }, label && /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: inputId,
     disabled: disabled,
     backgroundType: backgroundType,
-    helperText: helperText
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+    hasHelperText: helperText ? true : false
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(InputContainer, {
-    error: error,
+    error: error ? true : false,
     disabled: disabled,
     backgroundType: backgroundType,
     onClick: handleInputContainerOnClick,
@@ -539,10 +508,11 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     role: isTextInputType() && hasSuggestions() ? "combobox" : "textbox",
     "aria-autocomplete": isTextInputType() && hasSuggestions() ? "list" : undefined,
     "aria-controls": isTextInputType() && hasSuggestions() ? autosuggestId : undefined,
+    "aria-disabled": disabled,
     "aria-expanded": isTextInputType() && hasSuggestions() ? isOpen ? "true" : "false" : undefined,
     "aria-activedescendant": isTextInputType() && hasSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined,
     "aria-invalid": error ? "true" : "false",
-    "aria-describedby": error ? errorId : undefined,
+    "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"
   }), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, {
     backgroundType: backgroundType,
@@ -556,8 +526,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Clear field",
-    "aria-label": "Clear field"
+    title: translatedLabels.textInput.clearFieldActionTitle,
+    "aria-label": translatedLabels.textInput.clearFieldActionTitle
   }, textInputIcons.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,
     disabled: disabled,
@@ -569,8 +539,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Decrement value",
-    "aria-label": "Decrement value"
+    title: translatedLabels.numberInput.decrementValueTitle,
+    "aria-label": translatedLabels.numberInput.decrementValueTitle
   }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -582,8 +552,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Increment value",
-    "aria-label": "Increment value"
+    title: translatedLabels.numberInput.incrementValueTitle,
+    "aria-label": translatedLabels.numberInput.incrementValueTitle
   }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -604,7 +574,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     backgroundType: backgroundType
   }, suffix), isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError) && /*#__PURE__*/_react["default"].createElement(Suggestions, {
     id: autosuggestId,
-    isError: isAutosuggestError,
+    error: isAutosuggestError ? true : false,
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
     },
@@ -612,16 +582,25 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     role: "listbox",
     "aria-label": label
   }, !isSearching && !isAutosuggestError && filteredSuggestions.length > 0 && filteredSuggestions.map(function (suggestion, index) {
-    return /*#__PURE__*/_react["default"].createElement(HighlightedSuggestion, {
-      key: "suggestion-".concat((0, _uuid.v4)()),
+    return /*#__PURE__*/_react["default"].createElement(_Suggestion["default"], {
+      key: "suggestion-".concat(index),
+      id: "suggestion-".concat(index),
+      value: value !== null && value !== void 0 ? value : innerValue,
+      onClick: function onClick() {
+        changeValue(suggestion);
+        closeSuggestions();
+      },
       suggestion: suggestion,
-      index: index
+      isLast: index === lastOptionIndex,
+      visuallyFocused: visualFocusedSuggIndex === index,
+      highlighted: typeof suggestions === "function"
     });
-  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
+  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, translatedLabels.textInput.searchingMessage), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
     backgroundType: backgroundType
-  }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
+  }, textInputIcons.error), translatedLabels.textInput.fetchingDataErrorMessage))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
-    backgroundType: backgroundType
+    backgroundType: backgroundType,
+    "aria-live": error ? "assertive" : "off"
   }, error)));
 });
 
@@ -636,7 +615,7 @@ 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 DxcInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\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  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\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";
@@ -663,7 +642,7 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
 }, function (props) {
   return props.theme.labelLineHeight;
 }, function (props) {
-  return !props.helperText && "margin-bottom: 0.25rem";
+  return !props.hasHelperText && "margin-bottom: 0.25rem";
 });
 
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
@@ -751,9 +730,9 @@ var Error = _styledComponents["default"].span(_templateObject12 || (_templateObj
 });
 
 var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 1;\n  max-height: 304px;\n  overflow-y: auto;\n  top: calc(100% + 4px);\n  left: 0;\n  margin: 0;\n  padding: 0.25rem 0;\n  width: 100%;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
-  return props.isError ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
+  return props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
 }, function (props) {
-  return props.isError ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
+  return props.error ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
 }, function (props) {
   return props.theme.listOptionFontColor;
 }, function (props) {
@@ -766,27 +745,15 @@ var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templat
   return props.theme.listOptionFontWeight;
 });
 
-var Suggestion = _styledComponents["default"].li(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.visualFocused ? props.theme.focusListOptionBorderColor : "transparent";
-}, function (props) {
-  return props.theme.hoverListOptionBackgroundColor;
-}, function (props) {
-  return props.theme.activeListOptionBackgroundColor;
-});
-
-var StyledSuggestion = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
-  return props.last || props.visualFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
-});
-
-var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  color: ", ";\n  line-height: 1.715em;\n"])), function (props) {
+var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  color: ", ";\n  line-height: 1.715em;\n"])), function (props) {
   return props.theme.systemMessageFontColor;
 });
 
-var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n"])), function (props) {
+var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
 });
 
-var SuggestionsError = _styledComponents["default"].span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  align-items: center;\n  line-height: 1.715em;\n  color: ", ";\n"])), function (props) {
+var SuggestionsError = _styledComponents["default"].span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  align-items: center;\n  line-height: 1.715em;\n  color: ", ";\n"])), function (props) {
   return props.theme.errorListDialogFontColor;
 });