@dxc-technology/halstack-react 0.0.0-fdc49d2 → 0.0.0-ff5083e

package/tabs-nav/Tab.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Badge = _interopRequireDefault(require("../badge/Badge"));
+
+var _NavTabs = require("./NavTabs");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
+  var href = _ref.href,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      icon = _ref.icon,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$notificationNumb = _ref.notificationNumber,
+      notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
+      children = _ref.children,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var tabRef = /*#__PURE__*/(0, _react.createRef)();
+
+  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
+      iconPosition = _useContext.iconPosition,
+      tabIndex = _useContext.tabIndex,
+      hasIcons = _useContext.hasIcons,
+      focusedLabel = _useContext.focusedLabel;
+
+  (0, _react.useLayoutEffect)(function () {
+    var _tabRef$current;
+
+    focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
+  }, [focusedLabel]);
+
+  var handleOnKeyDown = function handleOnKeyDown(event) {
+    var _tabRef$current2;
+
+    switch (event.keyCode) {
+      case 13: // enter
+
+      case 32:
+        // space
+        tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
+        event.preventDefault();
+        break;
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(TabContainer, {
+    active: active,
+    role: "tab",
+    "aria-selected": active
+  }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
+    href: !disabled && href ? href : undefined,
+    disabled: disabled,
+    iconPosition: iconPosition,
+    hasIcon: hasIcons,
+    ref: function ref(anchorRef) {
+      tabRef.current = anchorRef;
+
+      if (_ref2) {
+        if (typeof _ref2 === "function") _ref2(anchorRef);else {
+          _ref2.current = anchorRef;
+        }
+      }
+    },
+    onKeyDown: handleOnKeyDown,
+    tabIndex: active ? tabIndex : -1
+  }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
+    iconPosition: iconPosition
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
+    src: icon
+  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, children, notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
+    notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
+    disabled: disabled
+  })))));
+});
+
+var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 2px solid ", ";\n"])), function (props) {
+  return props.active ? "#6f2c91" : "#0000001a";
+});
+
+var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  font-family: \"Open Sans\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 1rem;\n  color: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n\n  border-radius: 4px;\n\n  ", "\n"])), function (props) {
+  return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
+}, function (props) {
+  return props.disabled ? "#0000004D" : "#333333";
+}, function (props) {
+  return props.disabled ? "not-allowed" : "pointer";
+}, function (props) {
+  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
+}, function (props) {
+  return !props.disabled && ":hover {\n    background: #0000000D;\n  }\n\n  :focus {\n    outline: 2px solid #33aaff};\n  }\n\n  :active {\n    background: #0000001A;\n    outline: 2px solid #33aaff};\n  }";
+});
+
+var TabIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
+
+var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-bottom: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+  return props.iconPosition === "top" && "0.375rem";
+}, function (props) {
+  return props.iconPosition === "left" && "0.625rem";
+});
+
+var LabelContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
+
+var BadgeContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 0.5rem;\n"])));
+
+var _default = DxcTab;
+exports["default"] = _default;

package/tabs-nav/types.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+declare type SVG = React.SVGProps<SVGSVGElement>;
+export declare type TabProps = {
+    /**
+     * Whether the tab is active or not.
+     */
+    active?: boolean;
+    /**
+     * Whether the tab is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Page to be opened when the user clicks on the tab.
+     */
+    href?: string;
+    /**
+     * Element or path used as the icon that will be displayed in the tab.
+     */
+    icon?: string | SVG;
+    /**
+     * If the value is 'true', an empty badge will appear.
+     * If it is 'false', no badge will appear.
+     * If a number is put it will be shown as the label of the notification
+     * in the tab, taking into account that if that number is greater than 99,
+     * it will appear as '+99' in the badge.
+     */
+    notificationNumber?: boolean | number;
+    /**
+     * Content of the tab.
+     */
+    children: string;
+};
+export declare type NavTabsProps = {
+    /**
+     * Whether the icon should appear above or to the left of the label.
+     */
+    iconPosition?: "top" | "left";
+    /**
+     * Value of the tabindex for each tab.
+     */
+    tabIndex?: number;
+    /**
+     * Content of the tabs nav.
+     */
+    children: React.ReactNode;
+};
+export declare type NavTabsContextProps = {
+    iconPosition: "top" | "left";
+    tabIndex: number;
+    hasIcons: boolean;
+    focusedLabel: string;
+};
+export {};

package/tag/Tag.js

@@ -66,11 +66,11 @@ var DxcTag = function DxcTag(_ref) {
     shadowDepth: isHovered && (onClick || linkHref) && 2 || 1
   }, /*#__PURE__*/_react["default"].createElement(TagContent, {
     labelPosition: labelPosition
-  }, icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+  }, labelPosition === "before" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label), icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     iconBgColor: iconBgColor
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TagIcon, {
     src: icon
-  }) : icon), size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label)));
+  }) : icon), labelPosition === "after" && size !== "small" && label && /*#__PURE__*/_react["default"].createElement(TagLabel, null, label)));
 
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.tag
@@ -130,10 +130,7 @@ var StyledDxcTag = _styledComponents["default"].div(_templateObject || (_templat
   return props.theme.height;
 });
 
-var TagContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  flex-direction: ", ";\n  width: 100%;\n  height: ", ";\n"])), function (_ref8) {
-  var labelPosition = _ref8.labelPosition;
-  return labelPosition === "before" && "row-reverse" || "row";
-}, function (props) {
+var TagContent = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  height: ", ";\n"])), function (props) {
   return props.theme.height;
 });
 
@@ -145,8 +142,8 @@ var StyledButton = _styledComponents["default"].button(_templateObject4 || (_tem
   return props.theme.focusColor;
 });
 
-var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_ref9) {
-  var iconBgColor = _ref9.iconBgColor;
+var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  background: ", ";\n  width: ", ";\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  color: ", ";\n  min-width: ", ";\n  overflow: hidden;\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (_ref8) {
+  var iconBgColor = _ref8.iconBgColor;
   return iconBgColor;
 }, function (props) {
   return props.theme.iconSectionWidth;

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); }
 
@@ -205,6 +209,7 @@ 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-".concat(inputId);
@@ -221,10 +226,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);
   };
@@ -236,7 +237,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() {
@@ -257,19 +258,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
     });
   };
 
@@ -291,19 +291,18 @@ 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
     });
   };
 
@@ -470,45 +469,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,
@@ -559,8 +535,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,
@@ -572,8 +548,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,
@@ -585,8 +561,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,
@@ -607,7 +583,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();
     },
@@ -615,14 +591,22 @@ 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,
     "aria-live": error ? "assertive" : "off"
@@ -640,7 +624,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";
@@ -667,7 +651,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) {
@@ -755,9 +739,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) {
@@ -770,27 +754,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;
 });