@dxc-technology/halstack-react 0.0.0-509f1eb → 0.0.0-50acff4

package/text-input/TextInput.accessibility.test.js

@@ -0,0 +1,320 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _TextInput = _interopRequireDefault(require("./TextInput"));
+var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
+var action = {
+  onClick: function onClick() {},
+  icon: /*#__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 0h24v24H0V0z",
+    fill: "none"
+  }), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+  })),
+  title: "Action Title"
+};
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  return (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+}();
+describe("TextInput component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, baseElement, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            clearable: true
+          })), baseElement = _render.baseElement;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for autocomplete mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, baseElement, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            clearable: true,
+            autocomplete: "on"
+          })), baseElement = _render2.baseElement;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for suggestions mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, baseElement, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            clearable: true,
+            suggestions: countries
+          })), baseElement = _render3.baseElement;
+          _context3.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it("Should not have basic accessibility issues for pattern mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, baseElement, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            clearable: true,
+            pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+          })), baseElement = _render4.baseElement;
+          _context4.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context4.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  it("Should not have basic accessibility issues for optional mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var _render5, baseElement, results;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            clearable: true,
+            optional: true
+          })), baseElement = _render5.baseElement;
+          _context5.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context5.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it("Should not have basic accessibility issues for error mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var _render6, baseElement, results;
+    return _regenerator["default"].wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            error: "Error message.",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            clearable: true
+          })), baseElement = _render6.baseElement;
+          _context6.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context6.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  it("Should not have basic accessibility issues for read-only mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var _render7, baseElement, results;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            defaultValue: "Value",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            readOnly: true
+          })), baseElement = _render7.baseElement;
+          _context7.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context7.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var _render8, baseElement, results;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          // baseElement is needed when using React Portals
+          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            label: "Label",
+            placeholder: "Placeholder",
+            helperText: "Helper Text",
+            margin: "medium",
+            name: "Name",
+            size: "medium",
+            suffix: "Suffix",
+            prefix: "Prefix",
+            action: action,
+            minLength: 0,
+            maxLength: 100,
+            disabled: true
+          })), baseElement = _render8.baseElement;
+          _context8.next = 3;
+          return (0, _axeHelper.axe)(baseElement);
+        case 3:
+          results = _context8.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+});

package/text-input/TextInput.js

@@ -15,16 +15,15 @@ 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 _ActionIcon = _interopRequireDefault(require("../action-icon/ActionIcon"));
-var _main = require("../main");
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _NumberInputContext = require("../number-input/NumberInputContext");
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 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; }
+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 && {}.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 = {
   small: "240px",
   medium: "360px",
@@ -132,42 +131,40 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     size = _ref2$size === void 0 ? "medium" : _ref2$size,
     _ref2$tabIndex = _ref2.tabIndex,
     tabIndex = _ref2$tabIndex === void 0 ? 0 : _ref2$tabIndex;
-  var _useState3 = (0, _react.useState)("input-".concat((0, _uuid.v4)())),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
-    inputId = _useState4[0];
+  var inputId = "input-".concat((0, _react.useId)());
   var autosuggestId = "suggestions-".concat(inputId);
   var errorId = "error-".concat(inputId);
-  var _useState5 = (0, _react.useState)(defaultValue),
+  var _useState3 = (0, _react.useState)(defaultValue),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    innerValue = _useState4[0],
+    setInnerValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    innerValue = _useState6[0],
-    setInnerValue = _useState6[1];
+    isOpen = _useState6[0],
+    changeIsOpen = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    isOpen = _useState8[0],
-    changeIsOpen = _useState8[1];
+    isSearching = _useState8[0],
+    changeIsSearching = _useState8[1];
   var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    isSearching = _useState10[0],
-    changeIsSearching = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
+    isAutosuggestError = _useState10[0],
+    changeIsAutosuggestError = _useState10[1];
+  var _useState11 = (0, _react.useState)([]),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    isAutosuggestError = _useState12[0],
-    changeIsAutosuggestError = _useState12[1];
-  var _useState13 = (0, _react.useState)([]),
+    filteredSuggestions = _useState12[0],
+    changeFilteredSuggestions = _useState12[1];
+  var _useState13 = (0, _react.useState)(-1),
     _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-    filteredSuggestions = _useState14[0],
-    changeFilteredSuggestions = _useState14[1];
-  var _useState15 = (0, _react.useState)(-1),
-    _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-    visualFocusIndex = _useState16[0],
-    changeVisualFocusIndex = _useState16[1];
+    visualFocusIndex = _useState14[0],
+    changeVisualFocusIndex = _useState14[1];
   var inputRef = (0, _react.useRef)(null);
   var inputContainerRef = (0, _react.useRef)(null);
   var actionRef = (0, _react.useRef)(null);
   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);
   };
@@ -199,6 +196,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();
   };
@@ -257,6 +278,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
       case "Esc":
       case "Escape":
         event.preventDefault();
+        isOpen && event.stopPropagation();
         if (hasSuggestions(suggestions)) {
           changeValue("");
           isOpen && closeSuggestions();
@@ -271,12 +293,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
         break;
     }
   };
-  var handleWheel = (0, _react.useCallback)(function (event) {
-    if (document.activeElement === inputRef.current) {
-      event.preventDefault();
-      event.deltaY < 0 ? incrementNumber(inputRef.current.value) : decrementNumber(inputRef.current.value);
-    }
-  }, []);
+  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();
@@ -297,26 +316,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 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 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);
@@ -344,15 +343,6 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     }
     numberInputContext != null && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
   }, [value, innerValue, suggestions, numberInputContext]);
-  (0, _react.useEffect)(function () {
-    var input = inputRef.current;
-    input.addEventListener('wheel', handleWheel, {
-      passive: false
-    });
-    return function () {
-      input.removeEventListener('wheel', handleWheel);
-    };
-  }, [handleWheel]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textInput
   }, /*#__PURE__*/_react["default"].createElement(TextInputContainer, {
@@ -372,7 +362,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
         open: isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError)
       }, /*#__PURE__*/_react["default"].createElement(Popover.Trigger, {
         asChild: true,
-        "aria-controls": undefined
+        type: undefined,
+        "aria-controls": undefined,
+        "aria-haspopup": undefined,
+        "aria-expanded": undefined
       }, children), /*#__PURE__*/_react["default"].createElement(Popover.Portal, null, /*#__PURE__*/_react["default"].createElement(Popover.Content, {
         sideOffset: 5,
         style: {
@@ -412,7 +405,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     ref: inputContainerRef
   }, prefix && /*#__PURE__*/_react["default"].createElement(Prefix, {
     disabled: disabled
-  }, prefix), /*#__PURE__*/_react["default"].createElement(_main.DxcFlex, {
+  }, prefix), /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
     gap: "0.25rem",
     alignItems: "center",
     grow: 1
@@ -428,6 +421,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,
@@ -447,22 +441,24 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     "aria-errormessage": error ? errorId : undefined,
     "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(_ActionIcon["default"], {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_error"
+  })), !disabled && !readOnly && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
     onClick: handleClearActionOnClick,
-    icon: _Icons["default"].clear,
+    icon: "close",
     tabIndex: tabIndex,
     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,
-    icon: _Icons["default"].decrement,
+    icon: "remove",
     tabIndex: tabIndex,
     ref: actionRef,
     title: translatedLabels.numberInput.decrementValueTitle,
     disabled: disabled
   }), /*#__PURE__*/_react["default"].createElement(_ActionIcon["default"], {
     onClick: !readOnly ? handleIncrementActionOnClick : undefined,
-    icon: _Icons["default"].increment,
+    icon: "add",
     tabIndex: tabIndex,
     ref: actionRef,
     title: translatedLabels.numberInput.incrementValueTitle,
@@ -478,11 +474,14 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, re
     disabled: disabled
   }, suffix))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
+    role: "alert",
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });
-var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\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  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n  ", ";\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.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
@@ -561,7 +560,7 @@ var Suffix = _styledComponents["default"].span(_templateObject8 || (_templateObj
 }, function (props) {
   return props.theme.fontFamily;
 });
-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) {
+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  font-size: 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(_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) {