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

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);
 };
@@ -205,6 +201,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 +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);
   };
@@ -236,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() {
@@ -257,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
     });
   };
 
@@ -291,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) {
@@ -327,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) {
@@ -345,8 +336,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
         break;
 
-      case 27:
-        // Esc
+      case "Esc":
+      case "Escape":
         event.preventDefault();
 
         if (hasSuggestions()) {
@@ -356,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]);
@@ -470,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,
@@ -559,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,
@@ -572,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,
@@ -585,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,
@@ -607,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();
     },
@@ -615,14 +582,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 +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";
@@ -667,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) {
@@ -755,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) {
@@ -770,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;
 });
 

package/text-input/TextInput.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { userEvent, within, waitFor } from "@storybook/testing-library";
-import { fireEvent } from "@testing-library/react";
+import { userEvent, within, fireEvent } from "@storybook/testing-library";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";

package/text-input/TextInput.test.js

@@ -118,8 +118,7 @@ describe("TextInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "Test",
-      error: null
+      value: "Test"
     });
   });
   test("Not optional constraint (onChange)", function () {
@@ -143,8 +142,7 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "Test",
-      error: null
+      value: "Test"
     });
 
     _userEvent["default"].clear(input);
@@ -205,16 +203,14 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "pattern4&",
-      error: null
+      value: "pattern4&"
     });
 
     _react2.fireEvent.blur(input);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "pattern4&",
-      error: null
+      value: "pattern4&"
     });
   });
   test("Length constraint", function () {
@@ -268,16 +264,14 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "length",
-      error: null
+      value: "length"
     });
 
     _react2.fireEvent.blur(input);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "length",
-      error: null
+      value: "length"
     });
   });
   test("Pattern and length constraints", function () {
@@ -350,16 +344,14 @@ describe("TextInput component tests", function () {
 
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "tests4&",
-      error: null
+      value: "tests4&"
     });
 
     _react2.fireEvent.blur(input);
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "tests4&",
-      error: null
+      value: "tests4&"
     });
   });
   test("onChange function is called correctly", function () {
@@ -378,8 +370,7 @@ describe("TextInput component tests", function () {
     expect(input.value).toBe("onchange event test");
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
-      value: "onchange event test",
-      error: null
+      value: "onchange event test"
     });
   });
   test("onBlur function is called correctly", function () {
@@ -405,8 +396,7 @@ describe("TextInput component tests", function () {
 
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "Blur test",
-      error: null
+      value: "Blur test"
     });
   });
   test("Clear action's tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -638,7 +628,7 @@ describe("TextInput component tests", function () {
     expect(input.getAttribute("aria-expanded")).toBe("true");
     expect(list.getAttribute("aria-label")).toBe("Autocomplete Countries");
     var options = getAllByRole("option");
-    expect(options[0].getAttribute("aria-selected")).toBe("false");
+    expect(options[0].getAttribute("aria-selected")).toBeNull();
   });
 });
 describe("TextInput component synchronous autosuggest tests", function () {
@@ -944,8 +934,7 @@ describe("TextInput component synchronous autosuggest tests", function () {
             _userEvent["default"].click(getByRole("option"));
 
             expect(onChange).toHaveBeenCalledWith({
-              value: "Andorra",
-              error: null
+              value: "Andorra"
             });
             expect(queryByRole("listbox")).toBeFalsy();
 
@@ -1291,7 +1280,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1363,7 +1352,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1412,7 +1401,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1481,7 +1470,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1508,8 +1497,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
             _userEvent["default"].click(getByRole("option"));
 
             expect(onChange).toHaveBeenCalledWith({
-              value: "Denmark",
-              error: null
+              value: "Denmark"
             });
             expect(input.value).toBe("Denmark");
 
@@ -1533,7 +1521,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1560,8 +1548,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
             _userEvent["default"].click(getByRole("option"));
 
             expect(onChange).toHaveBeenCalledWith({
-              value: "Denmark",
-              error: null
+              value: "Denmark"
             });
             expect(queryByRole("listbox")).toBeFalsy();
 
@@ -1585,7 +1572,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1629,7 +1616,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
                   resolve(newValue ? countries.filter(function (option) {
                     return option.toUpperCase().includes(newValue.toUpperCase());
                   }) : countries);
-                }, 1000);
+                }, 100);
               });
               return result;
             });
@@ -1693,7 +1680,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               var result = new Promise(function (resolve, reject) {
                 return setTimeout(function () {
                   reject("err");
-                }, 1000);
+                }, 100);
               });
               return result;
             });

package/text-input/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type Action = {
     /**
      * This function will be called when the user clicks the action.
@@ -78,26 +78,29 @@ declare type Props = {
      * This function will be called when the user types within the input
      * element of the component. An object including the current value and
      * the error (if the value entered is not valid) will be passed to this
-     * function. If there is no error, error will be null.
+     * function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the input element loses the focus.
      * An object including the input value and the error (if the value
      * entered is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the input component. If
+     * the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -114,7 +117,7 @@ declare type Props = {
      * pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -124,7 +127,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -134,7 +137,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**
@@ -148,7 +151,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**
@@ -160,4 +163,16 @@ declare type Props = {
  * Reference to the component.
  */
 export declare type RefType = HTMLDivElement;
+/**
+ * Single suggestion of the Autosuggest Text Input component.
+ */
+export declare type SuggestionProps = {
+    id: string;
+    value: string;
+    onClick: () => void;
+    suggestion: string;
+    isLast: boolean;
+    visuallyFocused: boolean;
+    highlighted: boolean;
+};
 export default Props;