@dxc-technology/halstack-react 0.0.0-d238e47 → 0.0.0-d30020b

package/text-input/TextInput.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _variables = require("../common/variables.js");
 
@@ -27,7 +27,7 @@ var _utils = require("../common/utils.js");
 
 var _uuid = require("uuid");
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
 
@@ -110,10 +110,6 @@ var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
   return "This field is required. Please, enter a value.";
 };
 
-var getLengthErrorMessage = function getLengthErrorMessage(length) {
-  return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
-};
-
 var getPatternErrorMessage = function getPatternErrorMessage() {
   return "Please match the format requested.";
 };
@@ -136,15 +132,11 @@ var getLastOptionIndex = function getLastOptionIndex(filteredSuggestions) {
 };
 
 var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _action$title;
-
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       action = _ref.action,
@@ -160,11 +152,11 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       suggestions = _ref.suggestions,
       pattern = _ref.pattern,
-      length = _ref.length,
+      minLength = _ref.minLength,
+      maxLength = _ref.maxLength,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
@@ -224,7 +216,11 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var isLengthIncorrect = function isLengthIncorrect(value) {
-    return value && (length === null || length === void 0 ? void 0 : length.min) && (length === null || length === void 0 ? void 0 : length.max) && (value.length < length.min || value.length > length.max);
+    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) {
@@ -262,7 +258,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       error: getNotOptionalErrorMessage()
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getLengthErrorMessage(length)
+      error: getLengthErrorMessage()
     });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: getPatternErrorMessage()
@@ -296,7 +292,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       error: getNotOptionalErrorMessage()
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getLengthErrorMessage(length)
+      error: getLengthErrorMessage()
     });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()
@@ -501,11 +497,12 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     margin: margin,
     ref: ref,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(Label, {
+  }, label && /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: inputId,
     disabled: disabled,
-    backgroundType: backgroundType
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), /*#__PURE__*/_react["default"].createElement(HelperText, {
+    backgroundType: backgroundType,
+    helperText: helperText
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(InputContainer, {
@@ -535,8 +532,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     ref: inputRef,
     backgroundType: backgroundType,
     pattern: pattern,
-    minLength: length === null || length === void 0 ? void 0 : length.min,
-    maxLength: length === null || length === void 0 ? void 0 : length.max,
+    minLength: minLength,
+    maxLength: maxLength,
     autoComplete: autocomplete,
     tabIndex: tabIndex,
     role: isTextInputType() && hasSuggestions() ? "combobox" : "textbox",
@@ -551,41 +548,53 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     backgroundType: backgroundType,
     "aria-label": "Error"
   }, textInputIcons.error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
-    onClick: handleClearActionOnClick,
+    onClick: function onClick() {
+      return handleClearActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    "aria-label": "Clear"
+    title: "Clear field",
+    "aria-label": "Clear field"
   }, 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,
-    onClick: handleDecrementActionOnClick,
+    onClick: function onClick() {
+      return handleDecrementActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    "aria-label": "Decrement"
+    title: "Decrement value",
+    "aria-label": "Decrement value"
   }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: handleIncrementActionOnClick,
+    onClick: function onClick() {
+      return handleIncrementActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    "aria-label": "Increment"
+    title: "Increment value",
+    "aria-label": "Increment value"
   }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: action.onClick,
+    onClick: function onClick() {
+      return action.onClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
-    title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
+    title: action.title,
+    "aria-label": action.title,
     backgroundType: backgroundType,
     tabIndex: tabIndex
   }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ActionIcon, {
@@ -610,7 +619,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     });
   }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
     backgroundType: backgroundType
-  }, textInputIcons.error), "Error fetching data"))), !disabled && /*#__PURE__*/_react["default"].createElement(Error, {
+  }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     backgroundType: backgroundType
   }, error)));
@@ -641,7 +650,7 @@ var DxcInput = _styledComponents["default"].div(_templateObject || (_templateObj
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -653,13 +662,15 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
   return props.theme.labelFontWeight;
 }, function (props) {
   return props.theme.labelLineHeight;
+}, function (props) {
+  return !props.helperText && "margin-bottom: 0.25rem";
 });
 
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.optionalLabelFontWeight;
 });
 
-var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-bottom: 0.25rem;\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -673,9 +684,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  margin: ", ";\n  padding: 0 0.5rem;\n\n  ", "\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
-  return "".concat(props.theme.inputMarginTop, " 0 ").concat(props.theme.inputMarginBottom, " 0");
-}, function (props) {
+var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  padding: 0 0.5rem;\n\n  ", "\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");
 }, function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
@@ -687,7 +696,7 @@ var InputContainer = _styledComponents["default"].div(_templateObject5 || (_temp
   return !props.disabled && "\n      &:hover {\n        border-color: ".concat(props.error ? "transparent" : props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor, ";\n        ").concat(props.error && "box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.hoverErrorBorderColorOnDark : props.theme.hoverErrorBorderColor, ";"), "\n      }\n      &:focus-within {\n        border-color: transparent;\n        box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n      }\n    ");
 });
 
-var Input = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  height: calc(2.5rem - 2px);\n  width: 100%;\n  background: none;\n  border: none;\n  outline: none;\n  padding: 0 0.5rem;\n\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5em;\n  ", "\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
+var Input = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  height: calc(2.5rem - 2px);\n  width: 100%;\n  background: none;\n  border: none;\n  outline: none;\n  padding: 0 0.5rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: 1.5em;\n  ", "\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -735,7 +744,7 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject11 || (_templat
   return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
 });
 
-var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n"])), function (props) {
+var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -757,7 +766,7 @@ var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templat
   return props.theme.listOptionFontWeight;
 });
 
-var Suggestion = _styledComponents["default"].li(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\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) {
+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;
@@ -765,7 +774,7 @@ var Suggestion = _styledComponents["default"].li(_templateObject14 || (_template
   return props.theme.activeListOptionBackgroundColor;
 });
 
-var StyledSuggestion = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\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) {
+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);
 });