@dxc-technology/halstack-react 0.0.0-7c194f8 → 0.0.0-7c2b794

package/text-input/TextInput.js

@@ -15,12 +15,14 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
-var _NumberInput = require("../number-input/NumberInput");
 var _Suggestions = _interopRequireDefault(require("./Suggestions"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
 var _Icons = _interopRequireDefault(require("./Icons"));
 var _uuid = require("uuid");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _ActionIcon = _interopRequireDefault(require("../action-icon/ActionIcon"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _NumberInputContext = require("../number-input/NumberInputContext");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var sizes = {
@@ -165,7 +167,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
   var width = useWidth(inputContainerRef.current);
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
-  var numberInputContext = (0, _react.useContext)(_NumberInput.NumberInputContext);
+  var numberInputContext = (0, _react.useContext)(_NumberInputContext.NumberInputContext);
   var getNumberErrorMessage = function getNumberErrorMessage(value) {
     if (value < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage(numberInputContext.minNumber);else if (value > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage(numberInputContext.maxNumber);
   };
@@ -197,6 +199,30 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
       value: formattedValue
     });
   };
+  var decrementNumber = function decrementNumber() {
+    var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value !== null && value !== void 0 ? value : innerValue;
+    if (!disabled && !readOnly) {
+      var numberValue = Number(currentValue);
+      var steppedValue = Math.round((numberValue - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) + Number.EPSILON) * 100) / 100;
+      if (currentValue !== "") {
+        if (numberValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || steppedValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberValue);else if (numberValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else if (numberValue === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else changeValue(steppedValue);
+      } else {
+        if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) >= 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) < 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(-numberInputContext.stepNumber);
+      }
+    }
+  };
+  var incrementNumber = function incrementNumber() {
+    var currentValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : value !== null && value !== void 0 ? value : innerValue;
+    if (!disabled && !readOnly) {
+      var numberValue = Number(currentValue);
+      var steppedValue = Math.round((numberValue + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) + Number.EPSILON) * 100) / 100;
+      if (currentValue !== "") {
+        if (numberValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || steppedValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberValue);else if (numberValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if (numberValue === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(steppedValue);
+      } else {
+        if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) > 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) <= 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(numberInputContext.stepNumber);
+      }
+    }
+  };
   var handleInputContainerOnClick = function handleInputContainerOnClick() {
     document.activeElement !== actionRef.current && inputRef.current.focus();
   };
@@ -269,6 +295,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
         break;
     }
   };
+  var handleNumberInputWheel = function handleNumberInputWheel(event) {
+    if (document.activeElement === inputRef.current) event.deltaY < 0 ? incrementNumber(inputRef.current.value) : decrementNumber(inputRef.current.value);
+  };
   var handleClearActionOnClick = function handleClearActionOnClick() {
     changeValue("");
     inputRef.current.focus();
@@ -289,26 +318,6 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("step", step);
     inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("type", type);
   };
-  var decrementNumber = function decrementNumber() {
-    var currentValue = value !== null && value !== void 0 ? value : innerValue;
-    var numberValue = Number(currentValue);
-    var steppedValue = Math.round((numberValue - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) + Number.EPSILON) * 100) / 100;
-    if (currentValue !== "") {
-      if (numberValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || steppedValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberValue);else if (numberValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else if (numberValue === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else changeValue(steppedValue);
-    } else {
-      if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) >= 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) < 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(-numberInputContext.stepNumber);
-    }
-  };
-  var incrementNumber = function incrementNumber() {
-    var currentValue = value !== null && value !== void 0 ? value : innerValue;
-    var numberValue = Number(currentValue);
-    var steppedValue = Math.round((numberValue + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) + Number.EPSILON) * 100) / 100;
-    if (currentValue !== "") {
-      if (numberValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || steppedValue > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberValue);else if (numberValue < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if (numberValue === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(steppedValue);
-    } else {
-      if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) > 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);else if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) <= 0) changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);else changeValue(numberInputContext.stepNumber);
-    }
-  };
   (0, _react.useEffect)(function () {
     if (typeof suggestions === "function") {
       changeIsSearching(true);
@@ -395,7 +404,11 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     ref: inputContainerRef
   }, prefix && /*#__PURE__*/_react["default"].createElement(Prefix, {
     disabled: disabled
-  }, prefix), /*#__PURE__*/_react["default"].createElement(Input, {
+  }, prefix), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+    gap: "0.25rem",
+    alignItems: "center",
+    grow: 1
+  }, /*#__PURE__*/_react["default"].createElement(Input, {
     id: inputId,
     name: name,
     value: value !== null && value !== void 0 ? value : innerValue,
@@ -407,6 +420,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
+    onWheel: (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? handleNumberInputWheel : undefined,
     disabled: disabled,
     readOnly: readOnly,
     ref: inputRef,
@@ -427,51 +441,33 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     "aria-required": !disabled && !optional
   }), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, {
     "aria-label": "Error"
-  }, _Icons["default"].error), !disabled && !readOnly && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
-    "aria-label": translatedLabels.textInput.clearFieldActionTitle,
+  }, _Icons["default"].error), !disabled && !readOnly && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
     onClick: handleClearActionOnClick,
-    onMouseDown: function onMouseDown(event) {
-      event.stopPropagation();
-    },
+    icon: _Icons["default"].clear,
     tabIndex: tabIndex,
-    title: translatedLabels.textInput.clearFieldActionTitle,
-    type: "button"
-  }, _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, {
-    "aria-label": translatedLabels.numberInput.decrementValueTitle,
-    disabled: disabled,
+    title: translatedLabels.textInput.clearFieldActionTitle
+  }), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
     onClick: !readOnly ? handleDecrementActionOnClick : undefined,
-    onMouseDown: function onMouseDown(event) {
-      event.stopPropagation();
-    },
-    ref: actionRef,
+    icon: _Icons["default"].decrement,
     tabIndex: tabIndex,
+    ref: actionRef,
     title: translatedLabels.numberInput.decrementValueTitle,
-    type: "button"
-  }, _Icons["default"].decrement), /*#__PURE__*/_react["default"].createElement(Action, {
-    "aria-label": translatedLabels.numberInput.incrementValueTitle,
-    disabled: disabled,
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
     onClick: !readOnly ? handleIncrementActionOnClick : undefined,
-    onMouseDown: function onMouseDown(event) {
-      event.stopPropagation();
-    },
-    ref: actionRef,
+    icon: _Icons["default"].increment,
     tabIndex: tabIndex,
+    ref: actionRef,
     title: translatedLabels.numberInput.incrementValueTitle,
-    type: "button"
-  }, _Icons["default"].increment)), action && /*#__PURE__*/_react["default"].createElement(Action, {
-    "aria-label": action.title,
-    disabled: disabled,
+    disabled: disabled
+  })), action && /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
     onClick: !readOnly ? action.onClick : undefined,
-    onMouseDown: function onMouseDown(event) {
-      event.stopPropagation();
-    },
-    ref: actionRef,
+    icon: action.icon,
     tabIndex: tabIndex,
+    ref: actionRef,
     title: action.title,
-    type: "button"
-  }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: action.icon
-  }) : action.icon), suffix && /*#__PURE__*/_react["default"].createElement(Suffix, {
+    disabled: disabled
+  })), suffix && /*#__PURE__*/_react["default"].createElement(Suffix, {
     disabled: disabled
   }, suffix))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
@@ -546,31 +542,22 @@ var Input = _styledComponents["default"].input(_templateObject6 || (_templateObj
 }, function (props) {
   return props.disabled ? props.theme.disabledPlaceholderFontColor : props.theme.placeholderFontColor;
 });
-var Action = _styledComponents["default"].button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border: 1px solid transparent;\n  border-radius: 2px;\n  width: 24px;\n  height: 24px;\n  padding: 3px;\n  margin-left: 0.25rem;\n  ", "\n  \n  box-shadow: 0 0 0 2px transparent;\n  background-color: ", ";\n  color: ", ";\n\n  ", "\n\n  img, svg {\n    width: 16px;\n    height: 16px;\n  }\n"])), function (props) {
-  return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
-}, function (props) {
-  return props.disabled ? props.theme.disabledActionBackgroundColor : props.theme.actionBackgroundColor;
-}, function (props) {
-  return props.disabled ? props.theme.disabledActionIconColor : props.theme.actionIconColor;
-}, function (props) {
-  return !props.disabled && "\n      &:focus, \n      &:focus-visible {\n        outline: none;\n        box-shadow: 0 0 0 2px ".concat(props.theme.focusActionBorderColor, ";\n        color: ").concat(props.theme.focusActionIconColor, ";\n      }\n      &:hover {\n        background-color: ").concat(props.theme.hoverActionBackgroundColor, ";\n        color: ").concat(props.theme.hoverActionIconColor, ";\n      }\n      &:active {\n        background-color: ").concat(props.theme.activeActionBackgroundColor, ";\n        color: ").concat(props.theme.activeActionIconColor, ";\n      }\n    ");
-});
-var Prefix = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin-left: 0.25rem;\n  padding: 0 0.5rem 0 0;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
+var Prefix = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin-left: 0.25rem;\n  padding: 0 0.5rem 0 0;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
   var color = props.disabled ? props.theme.disabledPrefixColor : props.theme.prefixColor;
   return "color: ".concat(color, "; border-right: 1px solid ").concat(color, ";");
 }, function (props) {
   return props.theme.fontFamily;
 });
-var Suffix = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin: 0 0.25rem;\n  padding: 0 0 0 0.5rem;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
+var Suffix = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 1.5rem;\n  line-height: 1.5rem;\n  margin: 0 0.25rem;\n  padding: 0 0 0 0.5rem;\n  ", ";\n  font-family: ", ";\n  font-size: 1rem;\n  pointer-events: none;\n"])), function (props) {
   var color = props.disabled ? props.theme.disabledSuffixColor : props.theme.suffixColor;
   return "color: ".concat(color, "; border-left: 1px solid ").concat(color, ";");
 }, function (props) {
   return props.theme.fontFamily;
 });
-var ErrorIcon = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  margin-left: 0.25rem;\n  color: ", ";\n\n  svg {\n    line-height: 18px;\n    font-size: 1.25rem;\n  }\n"])), function (props) {
+var ErrorIcon = _styledComponents["default"].span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n\n  svg {\n    line-height: 18px;\n    font-size: 1.25rem;\n  }\n"])), function (props) {
   return props.theme.errorIconColor;
 });
-var Error = _styledComponents["default"].span(_templateObject11 || (_templateObject11 = (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) {
+var Error = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (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.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;