@dxc-technology/halstack-react 6.1.0 → 6.2.0

package/text-input/TextInput.js

@@ -27,66 +27,33 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _uuid = require("uuid");
-
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
 
-var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+var _Suggestions = _interopRequireDefault(require("./Suggestions"));
+
+var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _Icons = _interopRequireDefault(require("./Icons"));
+
+var _uuid = require("uuid");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 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 || _typeof3(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 textInputIcons = {
-  error: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
-  })),
-  clear: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0V0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-  })),
-  increment: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-  })),
-  decrement: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M19 13H5v-2h14v2z"
-  }))
+var sizes = {
+  small: "240px",
+  medium: "360px",
+  large: "480px",
+  fillParent: "100%"
+};
+
+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 makeCancelable = function makeCancelable(promise) {
@@ -110,21 +77,8 @@ var makeCancelable = function makeCancelable(promise) {
   };
 };
 
-var patternMatch = function patternMatch(pattern, value) {
-  return new RegExp(pattern).test(value);
-};
-
-var getLastOptionIndex = function getLastOptionIndex(filteredSuggestions) {
-  var last = 0;
-
-  var reducer = function reducer(acc, current) {
-    var _current$options;
-
-    return acc + ((_current$options = current.options) === null || _current$options === void 0 ? void 0 : _current$options.length);
-  };
-
-  if (filteredSuggestions.length > 0) filteredSuggestions[0].options ? last = filteredSuggestions.reduce(reducer, 0) - 1 : last = filteredSuggestions.length - 1;
-  return last;
+var patternMissmatch = function patternMissmatch(pattern, value) {
+  return pattern && !new RegExp(pattern).test(value);
 };
 
 var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
@@ -162,53 +116,48 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       size = _ref$size === void 0 ? "medium" : _ref$size,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+  var id = (0, _react.useState)((0, _uuid.v4)());
+  var inputId = "input-".concat(id);
+  var autosuggestId = "suggestions-".concat(id);
+  var errorId = "error-".concat(id);
 
-  var _useState = (0, _react.useState)("input-".concat((0, _uuid.v4)())),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      inputId = _useState2[0];
+  var _useState = (0, _react.useState)(defaultValue),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      innerValue = _useState2[0],
+      setInnerValue = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(defaultValue),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      innerValue = _useState4[0],
-      setInnerValue = _useState4[1];
+      isOpen = _useState4[0],
+      changeIsOpen = _useState4[1];
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isOpen = _useState6[0],
-      changeIsOpen = _useState6[1];
+      isSearching = _useState6[0],
+      changeIsSearching = _useState6[1];
 
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isSearching = _useState8[0],
-      changeIsSearching = _useState8[1];
+      isAutosuggestError = _useState8[0],
+      changeIsAutosuggestError = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)([]),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      isAutosuggestError = _useState10[0],
-      changeIsAutosuggestError = _useState10[1];
+      filteredSuggestions = _useState10[0],
+      changeFilteredSuggestions = _useState10[1];
 
-  var _useState11 = (0, _react.useState)([]),
+  var _useState11 = (0, _react.useState)(-1),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      filteredSuggestions = _useState12[0],
-      changeFilteredSuggestions = _useState12[1];
+      visualFocusIndex = _useState12[0],
+      changeVisualFocusIndex = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(-1),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      visualFocusedSuggIndex = _useState14[0],
-      changeVisualFocusedSuggIndex = _useState14[1];
-
-  var suggestionsRef = (0, _react.useRef)(null);
+  var inputContainerRef = (0, _react.useRef)(null);
   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);
   var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
-  var lastOptionIndex = (0, _react.useMemo)(function () {
-    return getLastOptionIndex(filteredSuggestions);
-  }, [filteredSuggestions]);
 
   var isNotOptional = function isNotOptional(value) {
     return value === "" && !optional;
@@ -241,8 +190,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var closeSuggestions = function closeSuggestions() {
-    changeIsOpen(false);
-    changeVisualFocusedSuggIndex(-1);
+    if (hasSuggestions()) {
+      changeIsOpen(false);
+      changeVisualFocusIndex(-1);
+    }
   };
 
   var changeValue = function changeValue(newValue) {
@@ -254,10 +205,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
-    });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
+    });else if (patternMissmatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: translatedLabels.formFields.formatRequestedErrorMessage
-    });else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
+    });else if (isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: getNumberErrorMessage(newValue)
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -280,17 +231,17 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var handleIOnBlur = function handleIOnBlur(event) {
-    suggestions && closeSuggestions();
+    closeSuggestions();
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       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({
+    });else if (patternMissmatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: translatedLabels.formFields.formatRequestedErrorMessage
-    });else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+    });else if (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({
@@ -310,7 +261,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
           openSuggestions();
 
           if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
-            changeVisualFocusedSuggIndex(function (visualFocusedSuggIndex) {
+            changeVisualFocusIndex(function (visualFocusedSuggIndex) {
               if (visualFocusedSuggIndex < filteredSuggestions.length - 1) return visualFocusedSuggIndex + 1;else if (visualFocusedSuggIndex === filteredSuggestions.length - 1) return 0;
             });
           }
@@ -328,7 +279,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
           openSuggestions();
 
           if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
-            changeVisualFocusedSuggIndex(function (visualFocusedSuggIndex) {
+            changeVisualFocusIndex(function (visualFocusedSuggIndex) {
               if (visualFocusedSuggIndex === 0 || visualFocusedSuggIndex === -1) return filteredSuggestions.length > 0 ? filteredSuggestions.length - 1 : suggestions.length - 1;else return visualFocusedSuggIndex - 1;
             });
           }
@@ -349,8 +300,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
       case "Enter":
         if (hasSuggestions() && !isSearching) {
-          var validFocusedSuggestion = filteredSuggestions.length > 0 && visualFocusedSuggIndex >= 0 && visualFocusedSuggIndex < filteredSuggestions.length;
-          validFocusedSuggestion && changeValue(filteredSuggestions[visualFocusedSuggIndex]);
+          var validFocusedSuggestion = filteredSuggestions.length > 0 && visualFocusIndex >= 0 && visualFocusIndex < filteredSuggestions.length;
+          validFocusedSuggestion && changeValue(filteredSuggestions[visualFocusIndex]);
           isOpen && closeSuggestions();
         }
 
@@ -423,15 +374,12 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     }
   };
 
-  (0, _react.useLayoutEffect)(function () {
-    var _suggestionsRef$curre, _visualFocusedOptionE;
+  var getTextInputWidth = (0, _react.useCallback)(function () {
+    var _inputContainerRef$cu;
 
-    var visualFocusedOptionEl = suggestionsRef === null || suggestionsRef === void 0 ? void 0 : (_suggestionsRef$curre = suggestionsRef.current) === null || _suggestionsRef$curre === void 0 ? void 0 : _suggestionsRef$curre.querySelectorAll("[role='option']")[visualFocusedSuggIndex];
-    visualFocusedOptionEl === null || visualFocusedOptionEl === void 0 ? void 0 : (_visualFocusedOptionE = visualFocusedOptionEl.scrollIntoView) === null || _visualFocusedOptionE === void 0 ? void 0 : _visualFocusedOptionE.call(visualFocusedOptionEl, {
-      block: "nearest",
-      inline: "start"
-    });
-  }, [visualFocusedSuggIndex]);
+    var rect = inputContainerRef === null || inputContainerRef === void 0 ? void 0 : (_inputContainerRef$cu = inputContainerRef.current) === null || _inputContainerRef$cu === void 0 ? void 0 : _inputContainerRef$cu.getBoundingClientRect();
+    return rect === null || rect === void 0 ? void 0 : rect.width;
+  }, []);
   (0, _react.useEffect)(function () {
     if (typeof suggestions === "function") {
       changeIsSearching(true);
@@ -455,7 +403,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       changeFilteredSuggestions(suggestions.filter(function (suggestion) {
         return suggestion.toUpperCase().startsWith((value !== null && value !== void 0 ? value : innerValue).toUpperCase());
       }));
-      changeVisualFocusedSuggIndex(-1);
+      changeVisualFocusIndex(-1);
     }
 
     (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
@@ -474,12 +422,17 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, 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, {
+  }, helperText), /*#__PURE__*/_react["default"].createElement(Popover.Root, {
+    open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError)
+  }, /*#__PURE__*/_react["default"].createElement(Popover.Trigger, {
+    asChild: true
+  }, /*#__PURE__*/_react["default"].createElement(InputContainer, {
     error: error ? true : false,
     disabled: disabled,
     backgroundType: backgroundType,
     onClick: handleInputContainerOnClick,
-    onMouseDown: handleInputContainerOnMouseDown
+    onMouseDown: handleInputContainerOnMouseDown,
+    ref: inputContainerRef
   }, prefix && /*#__PURE__*/_react["default"].createElement(Prefix, {
     disabled: disabled,
     backgroundType: backgroundType
@@ -490,9 +443,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     placeholder: placeholder,
     onBlur: handleIOnBlur,
     onChange: handleIOnChange,
-    onFocus: function onFocus() {
-      openSuggestions();
-    },
+    onFocus: openSuggestions,
     onKeyDown: handleIOnKeyDown,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
@@ -503,24 +454,22 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     pattern: pattern,
     minLength: minLength,
     maxLength: maxLength,
-    autoComplete: autocomplete,
+    autoComplete: autocomplete === "off" ? "nope" : autocomplete,
     tabIndex: tabIndex,
     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-expanded": isTextInputType() && hasSuggestions() ? isOpen : undefined,
+    "aria-activedescendant": isTextInputType() && hasSuggestions() && isOpen && visualFocusIndex !== -1 ? "suggestion-".concat(visualFocusIndex) : undefined,
+    "aria-invalid": error ? true : false,
     "aria-errormessage": error ? errorId : undefined,
-    "aria-required": optional ? "false" : "true"
+    "aria-required": optional ? false : true
   }), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, {
     backgroundType: backgroundType,
     "aria-label": "Error"
-  }, textInputIcons.error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
-    onClick: function onClick() {
-      return handleClearActionOnClick();
-    },
+  }, _Icons["default"].error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
+    onClick: handleClearActionOnClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -528,12 +477,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     tabIndex: tabIndex,
     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, {
+  }, _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,
     disabled: disabled,
-    onClick: function onClick() {
-      return handleDecrementActionOnClick();
-    },
+    onClick: handleDecrementActionOnClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -541,12 +488,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     tabIndex: tabIndex,
     title: translatedLabels.numberInput.decrementValueTitle,
     "aria-label": translatedLabels.numberInput.decrementValueTitle
-  }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
+  }, _Icons["default"].decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: function onClick() {
-      return handleIncrementActionOnClick();
-    },
+    onClick: handleIncrementActionOnClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -554,12 +499,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     tabIndex: tabIndex,
     title: translatedLabels.numberInput.incrementValueTitle,
     "aria-label": translatedLabels.numberInput.incrementValueTitle
-  }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
+  }, _Icons["default"].increment)), action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: function onClick() {
-      return action.onClick();
-    },
+    onClick: action.onClick,
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -572,49 +515,36 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }) : action.icon), suffix && /*#__PURE__*/_react["default"].createElement(Suffix, {
     disabled: disabled,
     backgroundType: backgroundType
-  }, suffix), isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError) && /*#__PURE__*/_react["default"].createElement(Suggestions, {
-    id: autosuggestId,
-    error: isAutosuggestError ? true : false,
-    onMouseDown: function onMouseDown(event) {
+  }, suffix))), /*#__PURE__*/_react["default"].createElement(Popover.Content, {
+    sideOffset: 4,
+    onOpenAutoFocus: function onOpenAutoFocus(event) {
+      // Avoid select to lose focus when the list is opened
       event.preventDefault();
     },
-    ref: suggestionsRef,
-    role: "listbox",
-    "aria-label": label
-  }, !isSearching && !isAutosuggestError && filteredSuggestions.length > 0 && filteredSuggestions.map(function (suggestion, index) {
-    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,
-      isLast: index === lastOptionIndex,
-      visuallyFocused: visualFocusedSuggIndex === index,
-      highlighted: typeof suggestions === "function"
-    });
-  }), 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), translatedLabels.textInput.fetchingDataErrorMessage))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
+    onCloseAutoFocus: function onCloseAutoFocus(event) {
+      // Avoid select to lose focus when the list is closed
+      event.preventDefault();
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+    id: autosuggestId,
+    value: value !== null && value !== void 0 ? value : innerValue,
+    suggestions: filteredSuggestions,
+    visualFocusIndex: visualFocusIndex,
+    highlightedSuggestions: typeof suggestions !== "function",
+    searchHasErrors: isAutosuggestError,
+    isSearching: isSearching,
+    suggestionOnClick: function suggestionOnClick(suggestion) {
+      changeValue(suggestion);
+      closeSuggestions();
+    },
+    getTextInputWidth: getTextInputWidth
+  }))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     backgroundType: backgroundType,
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });
 
-var sizes = {
-  small: "240px",
-  medium: "360px",
-  large: "480px",
-  fillParent: "100%"
-};
-
-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 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) {
@@ -729,33 +659,5 @@ var Error = _styledComponents["default"].span(_templateObject12 || (_templateObj
   return props.theme.fontFamily;
 });
 
-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.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
-}, function (props) {
-  return props.error ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
-}, function (props) {
-  return props.theme.listOptionFontColor;
-}, function (props) {
-  return props.theme.fontFamily;
-}, function (props) {
-  return props.theme.listOptionFontSize;
-}, function (props) {
-  return props.theme.listOptionFontStyle;
-}, function (props) {
-  return props.theme.listOptionFontWeight;
-});
-
-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(_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(_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;
-});
-
 var _default = DxcTextInput;
 exports["default"] = _default;