@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9

package/tag/Tag.js

@@ -18,7 +18,7 @@ var _Box = _interopRequireDefault(require("../box/Box"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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 DxcTag = function DxcTag(_ref) {
   var icon = _ref.icon,
     _ref$label = _ref.label,

package/tag/Tag.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcTag from "./Tag";

package/tag/Tag.test.d.ts

@@ -0,0 +1 @@
+export {};

package/tag/Tag.test.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _Tag = _interopRequireDefault(require("./Tag.tsx"));
+var _Tag = _interopRequireDefault(require("./Tag"));
 describe("Tag component tests", function () {
   test("Tag renders with correct label", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {

package/text-input/Suggestion.js

@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2;
 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" != _typeof(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" != _typeof(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 transformSpecialChars = function transformSpecialChars(str) {
   var specialCharsRegex = /[\\*()\[\]{}+?/]/;
   var value = str;

package/text-input/Suggestions.js

@@ -14,7 +14,7 @@ var _Suggestion = _interopRequireDefault(require("./Suggestion"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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" != _typeof(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" != _typeof(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 Suggestions = function Suggestions(_ref) {
   var id = _ref.id,
     value = _ref.value,
@@ -43,11 +43,12 @@ var Suggestions = function Suggestions(_ref) {
     },
     ref: listboxRef,
     role: "listbox",
-    style: styles
+    style: styles,
+    "aria-label": "Suggestions"
   }, !isSearching && !searchHasErrors && suggestions.length > 0 && suggestions.map(function (suggestion, index) {
     return /*#__PURE__*/_react["default"].createElement(_Suggestion["default"], {
-      key: "suggestion-".concat(index),
-      id: "suggestion-".concat(index),
+      key: "".concat(id, "-suggestion-").concat(index),
+      id: "".concat(id, "-suggestion-").concat(index),
       value: value,
       onClick: suggestionOnClick,
       suggestion: suggestion,
@@ -55,9 +56,16 @@ var Suggestions = function Suggestions(_ref) {
       visuallyFocused: visualFocusIndex === index,
       highlighted: highlightedSuggestions
     });
-  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, translatedLabels.textInput.searchingMessage), searchHasErrors && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, {
+    role: "option"
+  }, translatedLabels.textInput.searchingMessage), searchHasErrors && /*#__PURE__*/_react["default"].createElement("span", {
+    role: "option"
+  }, /*#__PURE__*/_react["default"].createElement(SuggestionsError, {
+    role: "alert",
+    "aria-live": "assertive"
+  }, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     icon: "filled_error"
-  })), translatedLabels.textInput.fetchingDataErrorMessage));
+  })), translatedLabels.textInput.fetchingDataErrorMessage)));
 };
 var SuggestionsContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  box-sizing: border-box;\n  max-height: 304px;\n  overflow-y: auto;\n  margin: 0;\n  padding: 0.25rem 0;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
   return props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;

package/text-input/TextInput.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -7,8 +7,8 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
+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() {},
@@ -45,7 +45,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -55,7 +55,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("TextInput component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -80,7 +79,7 @@ describe("TextInput component accessibility tests", function () {
             clearable: true
           })), baseElement = _render.baseElement;
           _context.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -113,7 +112,7 @@ describe("TextInput component accessibility tests", function () {
             autocomplete: "on"
           })), baseElement = _render2.baseElement;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -146,7 +145,7 @@ describe("TextInput component accessibility tests", function () {
             suggestions: countries
           })), baseElement = _render3.baseElement;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -179,7 +178,7 @@ describe("TextInput component accessibility tests", function () {
             pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
           })), baseElement = _render4.baseElement;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();
@@ -212,7 +211,7 @@ describe("TextInput component accessibility tests", function () {
             optional: true
           })), baseElement = _render5.baseElement;
           _context5.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context5.sent;
           expect(results).toHaveNoViolations();
@@ -245,7 +244,7 @@ describe("TextInput component accessibility tests", function () {
             clearable: true
           })), baseElement = _render6.baseElement;
           _context6.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context6.sent;
           expect(results).toHaveNoViolations();
@@ -277,7 +276,7 @@ describe("TextInput component accessibility tests", function () {
             readOnly: true
           })), baseElement = _render7.baseElement;
           _context7.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context7.sent;
           expect(results).toHaveNoViolations();
@@ -308,7 +307,7 @@ describe("TextInput component accessibility tests", function () {
             disabled: true
           })), baseElement = _render8.baseElement;
           _context8.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement);
         case 3:
           results = _context8.sent;
           expect(results).toHaveNoViolations();

package/text-input/TextInput.js

@@ -17,14 +17,13 @@ var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _Suggestions = _interopRequireDefault(require("./Suggestions"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
-var _uuid = require("uuid");
 var _ActionIcon = _interopRequireDefault(require("../action-icon/ActionIcon"));
 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,35 +131,33 @@ 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);
@@ -281,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();
@@ -364,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: {
@@ -440,7 +441,7 @@ 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"
+    "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"], {
@@ -473,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) {

package/text-input/TextInput.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcTextInput from "./TextInput";
@@ -7,6 +7,7 @@ import Suggestions from "./Suggestions";
 import { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Text Input",
@@ -21,6 +22,7 @@ const action = {
       <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" />
     </svg>
   ),
+  title: "Copy",
 };
 
 const actionLargeIconSVG = {
@@ -31,11 +33,13 @@ const actionLargeIconSVG = {
       <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
     </svg>
   ),
+  title: "Clock",
 };
 
 const actionLargeIconURL = {
   onClick: () => {},
   icon: "search",
+  title: "Search",
 };
 
 const country = ["Afghanistan"];
@@ -265,6 +269,14 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcTextInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1.5rem">
+        <DxcTextInput label="Text input" size="fillParent" />
+        <DxcTextInput label="Text input" size="medium" />
+        <DxcTextInput label="Text input" size="large" />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
       <HalstackProvider theme={opinionatedTheme}>
@@ -371,7 +383,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x1"
             value=""
             suggestions={country}
             visualFocusIndex={-1}
@@ -385,7 +397,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer pseudoState="pseudo-active">
           <Title title="Active suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x2"
             value=""
             suggestions={country}
             visualFocusIndex={-1}
@@ -399,7 +411,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer>
           <Title title="Focused suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x3"
             value=""
             suggestions={country}
             visualFocusIndex={0}
@@ -413,7 +425,7 @@ const AutosuggestListbox = () => {
         <ExampleContainer>
           <Title title="Highlighted suggestion" theme="light" level={4} />
           <Suggestions
-            id="x"
+            id="x4"
             value="Afgh"
             suggestions={country}
             visualFocusIndex={-1}
@@ -428,7 +440,7 @@ const AutosuggestListbox = () => {
       <ExampleContainer>
         <Title title="Autosuggest Error" theme="light" level={3} />
         <Suggestions
-          id="x"
+          id="x5"
           value=""
           suggestions={country}
           visualFocusIndex={-1}
@@ -442,7 +454,7 @@ const AutosuggestListbox = () => {
       <ExampleContainer>
         <Title title="Autosuggest Searching message" theme="light" level={3} />
         <Suggestions
-          id="x"
+          id="x6"
           value=""
           suggestions={country}
           visualFocusIndex={-1}

package/text-input/TextInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/text-input/TextInput.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
+var _TextInput = _interopRequireDefault(require("./TextInput"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 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 specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];

package/textarea/Textarea.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/textarea/Textarea.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Textarea = _interopRequireDefault(require("./Textarea"));
 describe("Textarea component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, container, results;
@@ -27,7 +27,7 @@ describe("Textarea component accessibility tests", function () {
             optional: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -56,7 +56,7 @@ describe("Textarea component accessibility tests", function () {
             pattern: "^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? \"]).*$"
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();
@@ -84,7 +84,7 @@ describe("Textarea component accessibility tests", function () {
             maxLength: 100
           })), container = _render3.container;
           _context3.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context3.sent;
           expect(results).toHaveNoViolations();
@@ -113,7 +113,7 @@ describe("Textarea component accessibility tests", function () {
             disabled: true
           })), container = _render4.container;
           _context4.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context4.sent;
           expect(results).toHaveNoViolations();
@@ -142,7 +142,7 @@ describe("Textarea component accessibility tests", function () {
             readOnly: true
           })), container = _render5.container;
           _context5.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context5.sent;
           expect(results).toHaveNoViolations();

package/textarea/Textarea.js

@@ -15,10 +15,9 @@ var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _variables = require("../common/variables");
-var _uuid = require("uuid");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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 patternMatch = function patternMatch(pattern, value) {
   return new RegExp(pattern).test(value);
 };
@@ -59,12 +58,11 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     innerValue = _useState2[0],
     setInnerValue = _useState2[1];
-  var _useState3 = (0, _react.useState)("textarea-".concat((0, _uuid.v4)())),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
-    textareaId = _useState4[0];
+  var textareaId = "textarea-".concat((0, _react.useId)());
   var colorsTheme = (0, _useTheme["default"])();
   var translatedLabels = (0, _useTranslatedLabels["default"])();
   var textareaRef = (0, _react.useRef)(null);
+  var prevValueRef = (0, _react.useRef)(null);
   var errorId = "error-".concat(textareaId);
   var isNotOptional = function isNotOptional(value) {
     return value === "" && !optional;
@@ -87,13 +85,6 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       value: newValue
     });
   };
-  var autoVerticalGrow = function autoVerticalGrow() {
-    var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
-    var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
-    textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
-    var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
-    textareaRef.current.style.height = "".concat(newHeight, "px");
-  };
   var handleOnBlur = function handleOnBlur(event) {
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
@@ -110,8 +101,17 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   };
   var handleOnChange = function handleOnChange(event) {
     changeValue(event.target.value);
-    verticalGrow === "auto" && autoVerticalGrow();
   };
+  (0, _react.useEffect)(function () {
+    if (verticalGrow === "auto" && prevValueRef.current !== (value !== null && value !== void 0 ? value : innerValue)) {
+      var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
+      var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
+      textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
+      var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
+      textareaRef.current.style.height = "".concat(newHeight, "px");
+      prevValueRef.current = value !== null && value !== void 0 ? value : innerValue;
+    }
+  }, [verticalGrow, value, innerValue, rows]);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textarea
   }, /*#__PURE__*/_react["default"].createElement(TextareaContainer, {
@@ -146,6 +146,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     "aria-required": !disabled && !optional
   }), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
+    role: "alert",
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });

package/textarea/Textarea.test.d.ts

@@ -0,0 +1 @@
+export {};

package/textarea/Textarea.test.js

@@ -6,7 +6,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
 describe("Textarea component tests", function () {
   test("Renders with correct label", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {

package/toggle-group/ToggleGroup.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/toggle-group/ToggleGroup.accessibility.test.js

@@ -5,8 +5,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
 var ethernetSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
@@ -67,11 +67,11 @@ describe("Toggle group component accessibility tests", function () {
             helperText: "Toggle group helper text",
             options: options,
             margin: "medium",
-            defaultValue: 2,
+            defaultValue: [2],
             multiple: true
           })), container = _render.container;
           _context.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -94,7 +94,7 @@ describe("Toggle group component accessibility tests", function () {
             disabled: true
           })), container = _render2.container;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
+          return (0, _axeHelper.axe)(container);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();