@dxc-technology/halstack-react 0.0.0-4e1277a → 0.0.0-4e3dbad

package/select/Select.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 _Select = _interopRequireDefault(require("./Select.tsx"));
+var _Select = _interopRequireDefault(require("./Select"));
 // 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 singleOptions = [{
   label: "Option 01",
@@ -100,90 +99,6 @@ var singleOptions = [{
   label: "Option 20",
   value: "20"
 }];
-var svgIconOptions = [{
-  label: "3G Mobile",
-  value: "1",
-  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("g", null, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0,0h24v24H0V0z",
-    fill: "none"
-  })), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"
-  }))))
-}, {
-  label: "Ethernet",
-  value: "2",
-  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: "M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"
-  }))
-}, {
-  label: "Wi-fi",
-  value: "3",
-  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 0h24v24H0V0zm0 0h24v24H0V0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
-  }))
-}, {
-  label: "Settings backup restore (just for previous configuration)",
-  value: "4",
-  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: "M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"
-  }))
-}, {
-  label: "Regular",
-  value: "Regular"
-}];
-var urlIconOptions = [{
-  label: "Instagram",
-  value: "1",
-  icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
-}, {
-  label: "X",
-  value: "2",
-  icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg"
-}, {
-  label: "Snapchat",
-  value: "3"
-}, {
-  label: "Facebook",
-  value: "4",
-  icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png"
-}, {
-  label: "Pinterest",
-  value: "5",
-  icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
-}];
 var groupOptions = [{
   label: "Colores",
   options: [{
@@ -248,50 +163,6 @@ var groupOptions = [{
     value: "ebro"
   }]
 }];
-var groupedIconOptions = [{
-  label: "Social Media",
-  options: [{
-    label: "Instagram",
-    value: "1",
-    icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
-  }, {
-    label: "X",
-    value: "2",
-    icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg"
-  }, {
-    label: "Facebook",
-    value: "3",
-    icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png"
-  }, {
-    label: "Pinterest",
-    value: "4",
-    icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
-  }]
-}, {
-  label: "Group 2",
-  options: [{
-    label: "Option 4",
-    value: "5"
-  }, {
-    label: "Option 5",
-    value: "6"
-  }, {
-    label: "Option 6",
-    value: "7"
-  }]
-}, {
-  label: "Group 3",
-  options: [{
-    label: "Option 7",
-    value: "8"
-  }, {
-    label: "Option 8",
-    value: "9"
-  }, {
-    label: "Option 9",
-    value: "10"
-  }]
-}];
 describe("Select component tests", function () {
   test("When clicking the label, the focus goes to the select", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, getByText, getByRole, select, label;
@@ -301,7 +172,8 @@ describe("Select component tests", function () {
           _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             helperText: "test-select-helper-text",
-            placeholder: "Example text"
+            placeholder: "Example text",
+            options: singleOptions
           })), getByText = _render.getByText, getByRole = _render.getByRole;
           select = getByRole("combobox");
           label = getByText("test-select-label");
@@ -318,7 +190,8 @@ describe("Select component tests", function () {
   test("Renders with correct aria attributes when is in error state", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "Error label",
-        error: "Error message."
+        error: "Error message.",
+        options: singleOptions
       })),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole;
@@ -411,15 +284,12 @@ describe("Select component tests", function () {
           _context4.next = 8;
           return _userEvent["default"].click(select);
         case 8:
-          expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[5].getAttribute("aria-selected")).toBe("true");
-          _context4.next = 13;
+          _context4.next = 10;
           return _userEvent["default"].click(getAllByRole("option")[2]);
-        case 13:
+        case 10:
           expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
           expect(submitInput.value).toBe("4,2,6,3");
-        case 15:
+        case 12:
         case "end":
           return _context4.stop();
       }
@@ -510,6 +380,7 @@ describe("Select component tests", function () {
             label: "test-select-label",
             value: ["1", "2"],
             options: singleOptions,
+            multiple: true,
             disabled: true
           })), getByRole = _render8.getByRole, queryByRole = _render8.queryByRole;
           select = getByRole("combobox");
@@ -947,56 +818,13 @@ describe("Select component tests", function () {
       }
     }, _callee20);
   })));
-  test("Non-Grouped Options - Renders SVG icons correctly when passed with options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee21() {
-    var _render21, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee21$(_context21) {
-      while (1) switch (_context21.prev = _context21.next) {
-        case 0:
-          _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-            label: "test-select-label",
-            options: svgIconOptions
-          })), getByRole = _render21.getByRole, getAllByRole = _render21.getAllByRole;
-          select = getByRole("combobox");
-          _context21.next = 4;
-          return _userEvent["default"].click(select);
-        case 4:
-          expect(getByRole("listbox").querySelectorAll("[role='img']").length).toBe(4);
-          expect(getAllByRole("option").length).toBe(5);
-        case 6:
-        case "end":
-          return _context21.stop();
-      }
-    }, _callee21);
-  })));
-  test("Non-Grouped Options - Renders string url icons correctly when passed with options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee22() {
-    var _render22, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee22$(_context22) {
-      while (1) switch (_context22.prev = _context22.next) {
-        case 0:
-          _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-            label: "test-select-label",
-            options: urlIconOptions,
-            optional: true
-          })), getByRole = _render22.getByRole, getAllByRole = _render22.getAllByRole;
-          select = getByRole("combobox");
-          _context22.next = 4;
-          return _userEvent["default"].click(select);
-        case 4:
-          expect(getByRole("listbox").querySelectorAll("img").length).toBe(4);
-          expect(getAllByRole("option").length).toBe(6);
-        case 6:
-        case "end":
-          return _context22.stop();
-      }
-    }, _callee22);
-  })));
   test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: singleOptions
       })),
-      getByRole = _render23.getByRole,
-      queryByRole = _render23.queryByRole;
+      getByRole = _render21.getByRole,
+      queryByRole = _render21.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
@@ -1008,12 +836,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
   });
   test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: singleOptions
       })),
-      getByRole = _render24.getByRole,
-      queryByRole = _render24.queryByRole;
+      getByRole = _render22.getByRole,
+      queryByRole = _render22.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
@@ -1031,12 +859,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
   });
   test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: singleOptions
       })),
-      getByRole = _render25.getByRole,
-      queryByRole = _render25.queryByRole;
+      getByRole = _render23.getByRole,
+      queryByRole = _render23.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
@@ -1048,12 +876,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: singleOptions
       })),
-      getByRole = _render26.getByRole,
-      queryByRole = _render26.queryByRole;
+      getByRole = _render24.getByRole,
+      queryByRole = _render24.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
@@ -1070,18 +898,18 @@ describe("Select component tests", function () {
     expect(queryByRole("listbox")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
-  test("Non-Grouped Options: Enter key - Selects the visually focused option and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee23() {
-    var onChange, _render27, getByText, getByRole, getAllByRole, queryByRole, select;
-    return _regenerator["default"].wrap(function _callee23$(_context23) {
-      while (1) switch (_context23.prev = _context23.next) {
+  test("Non-Grouped Options: Enter key - Selects the visually focused option and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee21() {
+    var onChange, _render25, getByText, getByRole, getAllByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee21$(_context21) {
+      while (1) switch (_context21.prev = _context21.next) {
         case 0:
           onChange = jest.fn();
-          _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             optional: true
-          })), getByText = _render27.getByText, getByRole = _render27.getByRole, getAllByRole = _render27.getAllByRole, queryByRole = _render27.queryByRole;
+          })), getByText = _render25.getByText, getByRole = _render25.getByRole, getAllByRole = _render25.getAllByRole, queryByRole = _render25.queryByRole;
           select = getByRole("combobox");
           _react2.fireEvent.keyDown(select, {
             key: "ArrowUp",
@@ -1118,38 +946,38 @@ describe("Select component tests", function () {
           });
           expect(queryByRole("listbox")).toBeFalsy();
           expect(getByText("Option 20")).toBeTruthy();
-          _context23.next = 13;
+          _context21.next = 13;
           return _userEvent["default"].click(select);
         case 13:
           expect(getAllByRole("option")[20].getAttribute("aria-selected")).toBe("true");
         case 14:
         case "end":
-          return _context23.stop();
+          return _context21.stop();
       }
-    }, _callee23);
+    }, _callee21);
   })));
-  test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee24() {
-    var onChange, _render28, container, getByText, getByRole, getAllByRole, queryByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee24$(_context24) {
-      while (1) switch (_context24.prev = _context24.next) {
+  test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee22() {
+    var onChange, _render26, container, getByText, getByRole, getAllByRole, queryByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee22$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
         case 0:
           onChange = jest.fn();
-          _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render28.container, getByText = _render28.getByText, getByRole = _render28.getByRole, getAllByRole = _render28.getAllByRole, queryByRole = _render28.queryByRole;
+          })), container = _render26.container, getByText = _render26.getByText, getByRole = _render26.getByRole, getAllByRole = _render26.getAllByRole, queryByRole = _render26.queryByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context24.next = 6;
+          _context22.next = 6;
           return _userEvent["default"].click(select);
         case 6:
           expect(getByRole("listbox")).toBeTruthy();
-          _context24.next = 9;
+          _context22.next = 9;
           return _userEvent["default"].type(searchInput, "08");
         case 9:
-          _context24.next = 11;
+          _context22.next = 11;
           return _userEvent["default"].click(getByRole("option"));
         case 11:
           expect(onChange).toHaveBeenCalledWith({
@@ -1158,69 +986,69 @@ describe("Select component tests", function () {
           expect(queryByRole("listbox")).toBeFalsy();
           expect(getByText("Option 08")).toBeTruthy();
           expect(searchInput.value).toBe("");
-          _context24.next = 17;
+          _context22.next = 17;
           return _userEvent["default"].click(select);
         case 17:
           expect(getAllByRole("option")[7].getAttribute("aria-selected")).toBe("true");
         case 18:
         case "end":
-          return _context24.stop();
+          return _context22.stop();
       }
-    }, _callee24);
+    }, _callee22);
   })));
-  test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee25() {
-    var onChange, _render29, container, getByText, getByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee25$(_context25) {
-      while (1) switch (_context25.prev = _context25.next) {
+  test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee23() {
+    var onChange, _render27, container, getByText, getByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee23$(_context23) {
+      while (1) switch (_context23.prev = _context23.next) {
         case 0:
           onChange = jest.fn();
-          _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render29.container, getByText = _render29.getByText, getByRole = _render29.getByRole;
+          })), container = _render27.container, getByText = _render27.getByText, getByRole = _render27.getByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context25.next = 6;
+          _context23.next = 6;
           return _userEvent["default"].click(select);
         case 6:
           expect(getByRole("listbox")).toBeTruthy();
-          _context25.next = 9;
+          _context23.next = 9;
           return _userEvent["default"].type(searchInput, "abc");
         case 9:
           expect(getByText("No matches found")).toBeTruthy();
         case 10:
         case "end":
-          return _context25.stop();
+          return _context23.stop();
       }
-    }, _callee25);
+    }, _callee23);
   })));
-  test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee28() {
-    var onChange, _render30, container, getByText, getByRole, getAllByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee28$(_context28) {
-      while (1) switch (_context28.prev = _context28.next) {
+  test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee26() {
+    var onChange, _render28, container, getByText, getByRole, getAllByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee26$(_context26) {
+      while (1) switch (_context26.prev = _context26.next) {
         case 0:
           onChange = jest.fn();
-          _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render30.container, getByText = _render30.getByText, getByRole = _render30.getByRole, getAllByRole = _render30.getAllByRole;
+          })), container = _render28.container, getByText = _render28.getByText, getByRole = _render28.getByRole, getAllByRole = _render28.getAllByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context28.next = 6;
-          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee26() {
-            return _regenerator["default"].wrap(function _callee26$(_context26) {
-              while (1) switch (_context26.prev = _context26.next) {
+          _context26.next = 6;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee24() {
+            return _regenerator["default"].wrap(function _callee24$(_context24) {
+              while (1) switch (_context24.prev = _context24.next) {
                 case 0:
                   _userEvent["default"].type(searchInput, "2");
                 case 1:
                 case "end":
-                  return _context26.stop();
+                  return _context24.stop();
               }
-            }, _callee26);
+            }, _callee24);
           })));
         case 6:
           expect(getByRole("listbox")).toBeTruthy();
@@ -1228,72 +1056,72 @@ describe("Select component tests", function () {
           expect(getByText("Option 12")).toBeTruthy();
           expect(getByText("Option 20")).toBeTruthy();
           expect(getAllByRole("option").length).toBe(3);
-          _context28.next = 13;
-          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee27() {
-            return _regenerator["default"].wrap(function _callee27$(_context27) {
-              while (1) switch (_context27.prev = _context27.next) {
+          _context26.next = 13;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee25() {
+            return _regenerator["default"].wrap(function _callee25$(_context25) {
+              while (1) switch (_context25.prev = _context25.next) {
                 case 0:
                   _userEvent["default"].click(select);
                 case 1:
                 case "end":
-                  return _context27.stop();
+                  return _context25.stop();
               }
-            }, _callee27);
+            }, _callee25);
           })));
         case 13:
           expect(searchInput.value).toBe("");
         case 14:
         case "end":
-          return _context28.stop();
+          return _context26.stop();
       }
-    }, _callee28);
+    }, _callee26);
   })));
-  test("Non-Grouped Options: Searchable - Writing displays the listbox, if it was not open", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee29() {
-    var onChange, _render31, container, getByRole, queryByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee29$(_context29) {
-      while (1) switch (_context29.prev = _context29.next) {
+  test("Non-Grouped Options: Searchable - Writing displays the listbox, if it was not open", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee27() {
+    var onChange, _render29, container, getByRole, queryByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee27$(_context27) {
+      while (1) switch (_context27.prev = _context27.next) {
         case 0:
           onChange = jest.fn();
-          _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render31.container, getByRole = _render31.getByRole, queryByRole = _render31.queryByRole;
+          })), container = _render29.container, getByRole = _render29.getByRole, queryByRole = _render29.queryByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context29.next = 6;
+          _context27.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          _context29.next = 8;
+          _context27.next = 8;
           return _userEvent["default"].click(select);
         case 8:
           expect(queryByRole("listbox")).toBeFalsy();
-          _context29.next = 11;
+          _context27.next = 11;
           return _userEvent["default"].type(searchInput, "2");
         case 11:
           expect(getByRole("listbox")).toBeTruthy();
         case 12:
         case "end":
-          return _context29.stop();
+          return _context27.stop();
       }
-    }, _callee29);
+    }, _callee27);
   })));
-  test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee30() {
-    var onChange, _render32, container, getByRole, queryByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee30$(_context30) {
-      while (1) switch (_context30.prev = _context30.next) {
+  test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee28() {
+    var onChange, _render30, container, getByRole, queryByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee28$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
         case 0:
           onChange = jest.fn();
-          _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render32.container, getByRole = _render32.getByRole, queryByRole = _render32.queryByRole;
+          })), container = _render30.container, getByRole = _render30.getByRole, queryByRole = _render30.queryByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context30.next = 6;
+          _context28.next = 6;
           return _userEvent["default"].type(searchInput, "Option 02");
         case 6:
           _react2.fireEvent.keyDown(select, {
@@ -1306,31 +1134,31 @@ describe("Select component tests", function () {
           expect(queryByRole("listbox")).toBeFalsy();
         case 9:
         case "end":
-          return _context30.stop();
+          return _context28.stop();
       }
-    }, _callee30);
+    }, _callee28);
   })));
-  test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee31() {
-    var onChange, _render33, container, getByRole, getAllByRole, queryByTitle, searchInput, clearAction;
-    return _regenerator["default"].wrap(function _callee31$(_context31) {
-      while (1) switch (_context31.prev = _context31.next) {
+  test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee29() {
+    var onChange, _render31, container, getByRole, getAllByRole, queryByTitle, searchInput, clearAction;
+    return _regenerator["default"].wrap(function _callee29$(_context29) {
+      while (1) switch (_context29.prev = _context29.next) {
         case 0:
           onChange = jest.fn();
-          _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render33.container, getByRole = _render33.getByRole, getAllByRole = _render33.getAllByRole, queryByTitle = _render33.queryByTitle;
+          })), container = _render31.container, getByRole = _render31.getByRole, getAllByRole = _render31.getAllByRole, queryByTitle = _render31.queryByTitle;
           searchInput = container.querySelectorAll("input")[1];
-          _context31.next = 5;
+          _context29.next = 5;
           return _userEvent["default"].type(searchInput, "Option 02");
         case 5:
           expect(getAllByRole("option").length).toBe(1);
           expect(queryByTitle("Clear search")).toBeTruthy();
           clearAction = getByRole("button");
           expect(clearAction).toBeTruthy();
-          _context31.next = 11;
+          _context29.next = 11;
           return _userEvent["default"].click(clearAction);
         case 11:
           expect(getByRole("listbox")).toBeTruthy();
@@ -1338,30 +1166,30 @@ describe("Select component tests", function () {
           expect(queryByTitle("Clear search")).toBeFalsy();
         case 14:
         case "end":
-          return _context31.stop();
+          return _context29.stop();
       }
-    }, _callee31);
+    }, _callee29);
   })));
-  test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee32() {
-    var onChange, _render34, getByText, getAllByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
-    return _regenerator["default"].wrap(function _callee32$(_context32) {
-      while (1) switch (_context32.prev = _context32.next) {
+  test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee30() {
+    var onChange, _render32, getByText, getAllByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
+    return _regenerator["default"].wrap(function _callee30$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
         case 0:
           onChange = jest.fn();
-          _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             name: "test",
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             multiple: true
-          })), getByText = _render34.getByText, getAllByText = _render34.getAllByText, getByRole = _render34.getByRole, getAllByRole = _render34.getAllByRole, queryByRole = _render34.queryByRole, container = _render34.container;
+          })), getByText = _render32.getByText, getAllByText = _render32.getAllByText, getByRole = _render32.getByRole, getAllByRole = _render32.getAllByRole, queryByRole = _render32.queryByRole, container = _render32.container;
           select = getByRole("combobox");
           submitInput = container.querySelector("input[name=\"test\"]");
-          _context32.next = 6;
+          _context30.next = 6;
           return _userEvent["default"].click(select);
         case 6:
           expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
-          _context32.next = 9;
+          _context30.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[10]);
         case 9:
           expect(onChange).toHaveBeenCalledWith({
@@ -1392,38 +1220,36 @@ describe("Select component tests", function () {
           });
           expect(queryByRole("listbox")).toBeTruthy();
           expect(getByText("Option 11, Option 19")).toBeTruthy();
-          expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("11,19");
-        case 21:
+        case 19:
         case "end":
-          return _context32.stop();
+          return _context30.stop();
       }
-    }, _callee32);
+    }, _callee30);
   })));
-  test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee33() {
-    var onChange, _render35, getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle, select;
-    return _regenerator["default"].wrap(function _callee33$(_context33) {
-      while (1) switch (_context33.prev = _context33.next) {
+  test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee31() {
+    var onChange, _render33, getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle, select;
+    return _regenerator["default"].wrap(function _callee31$(_context31) {
+      while (1) switch (_context31.prev = _context31.next) {
         case 0:
           onChange = jest.fn();
-          _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             multiple: true
-          })), getByText = _render35.getByText, queryByText = _render35.queryByText, getByRole = _render35.getByRole, getAllByRole = _render35.getAllByRole, queryByRole = _render35.queryByRole, getByTitle = _render35.getByTitle, queryByTitle = _render35.queryByTitle;
+          })), getByText = _render33.getByText, queryByText = _render33.queryByText, getByRole = _render33.getByRole, getAllByRole = _render33.getAllByRole, queryByRole = _render33.queryByRole, getByTitle = _render33.getByTitle, queryByTitle = _render33.queryByTitle;
           select = getByRole("combobox");
-          _context33.next = 5;
+          _context31.next = 5;
           return _userEvent["default"].click(select);
         case 5:
-          _context33.next = 7;
+          _context31.next = 7;
           return _userEvent["default"].click(getAllByRole("option")[5]);
         case 7:
-          _context33.next = 9;
+          _context31.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[8]);
         case 9:
-          _context33.next = 11;
+          _context31.next = 11;
           return _userEvent["default"].click(getAllByRole("option")[13]);
         case 11:
           expect(onChange).toHaveBeenCalledWith({
@@ -1434,7 +1260,7 @@ describe("Select component tests", function () {
           expect(getByText("3", {
             exact: true
           })).toBeTruthy();
-          _context33.next = 17;
+          _context31.next = 17;
           return _userEvent["default"].click(getByTitle("Clear selection"));
         case 17:
           expect(onChange).toHaveBeenCalledWith({
@@ -1447,58 +1273,57 @@ describe("Select component tests", function () {
           expect(queryByTitle("Clear selection")).toBeFalsy();
         case 22:
         case "end":
-          return _context33.stop();
+          return _context31.stop();
       }
-    }, _callee33);
+    }, _callee31);
   })));
-  test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee34() {
-    var onChange, _render36, getByText, getAllByText, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee34$(_context34) {
-      while (1) switch (_context34.prev = _context34.next) {
+  test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee32() {
+    var onChange, _render34, getByText, getAllByText, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee32$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
         case 0:
           onChange = jest.fn();
-          _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             placeholder: "Choose an option",
             options: singleOptions,
             onChange: onChange,
             multiple: true,
             optional: true
-          })), getByText = _render36.getByText, getAllByText = _render36.getAllByText, getByRole = _render36.getByRole, getAllByRole = _render36.getAllByRole;
+          })), getByText = _render34.getByText, getAllByText = _render34.getAllByText, getByRole = _render34.getByRole, getAllByRole = _render34.getAllByRole;
           select = getByRole("combobox");
           expect(getByText("(Optional)")).toBeTruthy();
-          _context34.next = 6;
+          _context32.next = 6;
           return _userEvent["default"].click(select);
         case 6:
           expect(getAllByText("Choose an option").length).toBe(1);
-          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-          _context34.next = 10;
+          _context32.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
-        case 10:
+        case 9:
           expect(onChange).toHaveBeenCalledWith({
             value: ["1"]
           });
           expect(getAllByText("Option 01").length).toBe(2);
-        case 12:
+        case 11:
         case "end":
-          return _context34.stop();
+          return _context32.stop();
       }
-    }, _callee34);
+    }, _callee32);
   })));
-  test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee35() {
-    var _render37, getByText, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee35$(_context35) {
-      while (1) switch (_context35.prev = _context35.next) {
+  test("Non-Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee33() {
+    var _render35, getByText, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee33$(_context33) {
+      while (1) switch (_context33.prev = _context33.next) {
         case 0:
-          _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions
-          })), getByText = _render37.getByText, getByRole = _render37.getByRole, getAllByRole = _render37.getAllByRole;
+          })), getByText = _render35.getByText, getByRole = _render35.getByRole, getAllByRole = _render35.getAllByRole;
           select = getByRole("combobox");
-          _context35.next = 4;
+          _context33.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          _context35.next = 6;
+          _context33.next = 6;
           return _userEvent["default"].click(getAllByRole("option")[4]);
         case 6:
           expect(getByText("Option 05")).toBeTruthy();
@@ -1550,29 +1375,29 @@ describe("Select component tests", function () {
           expect(getByText("Option 06")).toBeTruthy();
         case 18:
         case "end":
-          return _context35.stop();
+          return _context33.stop();
       }
-    }, _callee35);
+    }, _callee33);
   })));
-  test("Non-Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee36() {
-    var _render38, getByText, getByRole, getAllByRole, queryByRole, select;
-    return _regenerator["default"].wrap(function _callee36$(_context36) {
-      while (1) switch (_context36.prev = _context36.next) {
+  test("Non-Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee34() {
+    var _render36, getByText, getByRole, getAllByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee34$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
         case 0:
-          _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions
-          })), getByText = _render38.getByText, getByRole = _render38.getByRole, getAllByRole = _render38.getAllByRole, queryByRole = _render38.queryByRole;
+          })), getByText = _render36.getByText, getByRole = _render36.getByRole, getAllByRole = _render36.getAllByRole, queryByRole = _render36.queryByRole;
           select = getByRole("combobox");
-          _context36.next = 4;
+          _context34.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          _context36.next = 6;
+          _context34.next = 6;
           return _userEvent["default"].click(getAllByRole("option")[15]);
         case 6:
           expect(queryByRole("listbox")).toBeFalsy();
           expect(getByText("Option 16")).toBeTruthy();
-          _context36.next = 10;
+          _context34.next = 10;
           return _userEvent["default"].click(select);
         case 10:
           expect(select.getAttribute("aria-activedescendant")).toBeNull();
@@ -1583,7 +1408,7 @@ describe("Select component tests", function () {
             charCode: 38
           });
           expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
-          _context36.next = 15;
+          _context34.next = 15;
           return _userEvent["default"].click(select);
         case 15:
           expect(queryByRole("listbox")).toBeFalsy();
@@ -1621,24 +1446,24 @@ describe("Select component tests", function () {
           expect(getByText("Option 17")).toBeTruthy();
         case 23:
         case "end":
-          return _context36.stop();
+          return _context34.stop();
       }
-    }, _callee36);
+    }, _callee34);
   })));
-  test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee37() {
-    var _render39, getByText, getByRole, getAllByRole, queryByRole, select, listbox, groups, groupLabels;
-    return _regenerator["default"].wrap(function _callee37$(_context37) {
-      while (1) switch (_context37.prev = _context37.next) {
+  test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee35() {
+    var _render37, getByText, getByRole, getAllByRole, queryByRole, select, listbox, groups, groupLabels;
+    return _regenerator["default"].wrap(function _callee35$(_context35) {
+      while (1) switch (_context35.prev = _context35.next) {
         case 0:
-          _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions
-          })), getByText = _render39.getByText, getByRole = _render39.getByRole, getAllByRole = _render39.getAllByRole, queryByRole = _render39.queryByRole;
+          })), getByText = _render37.getByText, getByRole = _render37.getByRole, getAllByRole = _render37.getAllByRole, queryByRole = _render37.queryByRole;
           select = getByRole("combobox");
-          _context37.next = 4;
+          _context35.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          listbox = getByRole("listbox");
+          listbox = getByRole("list");
           expect(listbox).toBeTruthy();
           expect(select.getAttribute("aria-expanded")).toBe("true");
           expect(getByText("Colores")).toBeTruthy();
@@ -1646,104 +1471,104 @@ describe("Select component tests", function () {
           expect(getByText("Negro")).toBeTruthy();
           expect(getByText("Ciudades españolas")).toBeTruthy();
           expect(getByText("Madrid")).toBeTruthy();
-          groups = getAllByRole("group");
+          groups = getAllByRole("listbox");
           expect(groups.length).toBe(3);
           groupLabels = getAllByRole("presentation");
           expect(groups[0].getAttribute("aria-labelledby")).toBe(groupLabels[0].id);
           expect(groups[1].getAttribute("aria-labelledby")).toBe(groupLabels[1].id);
           expect(groups[2].getAttribute("aria-labelledby")).toBe(groupLabels[2].id);
           expect(getAllByRole("option").length).toBe(18);
-          _context37.next = 21;
+          _context35.next = 21;
           return _userEvent["default"].click(select);
         case 21:
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(select.getAttribute("aria-expanded")).toBe("false");
         case 23:
         case "end":
-          return _context37.stop();
+          return _context35.stop();
       }
-    }, _callee37);
+    }, _callee35);
   })));
-  test("Grouped Options - If an empty list of options in a group is passed, the select is rendered but doesn't open the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee38() {
-    var _render40, getByRole, queryByRole, select;
-    return _regenerator["default"].wrap(function _callee38$(_context38) {
-      while (1) switch (_context38.prev = _context38.next) {
+  test("Grouped Options - If an empty list of options in a group is passed, the select is rendered but doesn't open the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee36() {
+    var _render38, getByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee36$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
         case 0:
-          _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: [{
               label: "Group 1",
               options: []
             }]
-          })), getByRole = _render40.getByRole, queryByRole = _render40.queryByRole;
+          })), getByRole = _render38.getByRole, queryByRole = _render38.queryByRole;
           select = getByRole("combobox");
-          _context38.next = 4;
+          _context36.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(select.getAttribute("aria-expanded")).toBe("false");
         case 6:
         case "end":
-          return _context38.stop();
+          return _context36.stop();
       }
-    }, _callee38);
+    }, _callee36);
   })));
-  test("Grouped Options - Click in an option selects it and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee39() {
-    var onChange, _render41, getByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
-    return _regenerator["default"].wrap(function _callee39$(_context39) {
-      while (1) switch (_context39.prev = _context39.next) {
+  test("Grouped Options - Click in an option selects it and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee37() {
+    var onChange, _render39, getByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
+    return _regenerator["default"].wrap(function _callee37$(_context37) {
+      while (1) switch (_context37.prev = _context37.next) {
         case 0:
           onChange = jest.fn();
-          _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             name: "test",
             label: "test-select-label",
             options: groupOptions,
             onChange: onChange
-          })), getByText = _render41.getByText, getByRole = _render41.getByRole, getAllByRole = _render41.getAllByRole, queryByRole = _render41.queryByRole, container = _render41.container;
+          })), getByText = _render39.getByText, getByRole = _render39.getByRole, getAllByRole = _render39.getAllByRole, queryByRole = _render39.queryByRole, container = _render39.container;
           select = getByRole("combobox");
           submitInput = container.querySelector("input[name=\"test\"]");
-          _context39.next = 6;
+          _context37.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          _context39.next = 8;
+          _context37.next = 8;
           return _userEvent["default"].click(getAllByRole("option")[8]);
         case 8:
           expect(onChange).toHaveBeenCalledWith({
             value: "oviedo"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Oviedo")).toBeTruthy();
-          _context39.next = 13;
+          _context37.next = 13;
           return _userEvent["default"].click(select);
         case 13:
           expect(getAllByRole("option")[8].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("oviedo");
         case 15:
         case "end":
-          return _context39.stop();
+          return _context37.stop();
       }
-    }, _callee39);
+    }, _callee37);
   })));
-  test("Grouped Options - Optional renders an empty first option (out of any group) with the placeholder as its label", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee40() {
-    var onChange, _render42, getByRole, getAllByRole, getAllByText, select;
-    return _regenerator["default"].wrap(function _callee40$(_context40) {
-      while (1) switch (_context40.prev = _context40.next) {
+  test("Grouped Options - Optional renders an empty first option (out of any group) with the placeholder as its label", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee38() {
+    var onChange, _render40, getByRole, getAllByRole, getAllByText, select;
+    return _regenerator["default"].wrap(function _callee38$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
         case 0:
           onChange = jest.fn();
-          _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             placeholder: "Placeholder example",
             options: groupOptions,
             onChange: onChange,
             optional: true
-          })), getByRole = _render42.getByRole, getAllByRole = _render42.getAllByRole, getAllByText = _render42.getAllByText;
+          })), getByRole = _render40.getByRole, getAllByRole = _render40.getAllByRole, getAllByText = _render40.getAllByText;
           select = getByRole("combobox");
-          _context40.next = 5;
+          _context38.next = 5;
           return _userEvent["default"].click(select);
         case 5:
           expect(getAllByText("Placeholder example").length).toBe(2);
           expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
-          _context40.next = 9;
+          _context38.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
         case 9:
           expect(onChange).toHaveBeenCalledWith({
@@ -1776,72 +1601,50 @@ describe("Select component tests", function () {
           expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
         case 18:
         case "end":
-          return _context40.stop();
+          return _context38.stop();
       }
-    }, _callee40);
+    }, _callee38);
   })));
-  test("Grouped Options - Filtering options never affects the optional item until there are no coincidence", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee41() {
-    var _render43, getByRole, getAllByRole, getByText, queryByText, container, select, searchInput;
-    return _regenerator["default"].wrap(function _callee41$(_context41) {
-      while (1) switch (_context41.prev = _context41.next) {
+  test("Grouped Options - Filtering options never affects the optional item until there are no coincidence", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee39() {
+    var _render41, getByRole, getAllByRole, getByText, queryByText, container, select, searchInput;
+    return _regenerator["default"].wrap(function _callee39$(_context39) {
+      while (1) switch (_context39.prev = _context39.next) {
         case 0:
-          _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             placeholder: "Placeholder example",
             options: groupOptions,
             optional: true,
             searchable: true
-          })), getByRole = _render43.getByRole, getAllByRole = _render43.getAllByRole, getByText = _render43.getByText, queryByText = _render43.queryByText, container = _render43.container;
+          })), getByRole = _render41.getByRole, getAllByRole = _render41.getAllByRole, getByText = _render41.getByText, queryByText = _render41.queryByText, container = _render41.container;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context41.next = 5;
+          _context39.next = 5;
           return _userEvent["default"].click(select);
         case 5:
-          _context41.next = 7;
+          _context39.next = 7;
           return _userEvent["default"].type(searchInput, "ro");
         case 7:
           expect(getByText("Placeholder example")).toBeTruthy();
           expect(getAllByRole("option").length).toBe(6);
-          _context41.next = 11;
+          _context39.next = 11;
           return _userEvent["default"].type(searchInput, "roro");
         case 11:
           expect(queryByText("Placeholder example")).toBeFalsy();
           expect(getByText("No matches found")).toBeTruthy();
         case 13:
         case "end":
-          return _context41.stop();
-      }
-    }, _callee41);
-  })));
-  test("Grouped Options - Renders icons correctly when passed with group options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee42() {
-    var _render44, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee42$(_context42) {
-      while (1) switch (_context42.prev = _context42.next) {
-        case 0:
-          _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-            label: "test-select-label",
-            options: groupedIconOptions,
-            optional: true
-          })), getByRole = _render44.getByRole, getAllByRole = _render44.getAllByRole;
-          select = getByRole("combobox");
-          _context42.next = 4;
-          return _userEvent["default"].click(select);
-        case 4:
-          expect(getByRole("listbox").querySelectorAll("img").length).toBe(4);
-          expect(getAllByRole("option").length).toBe(11);
-        case 6:
-        case "end":
-          return _context42.stop();
+          return _context39.stop();
       }
-    }, _callee42);
+    }, _callee39);
   })));
   test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: groupOptions
       })),
-      getByRole = _render45.getByRole,
-      queryByRole = _render45.queryByRole;
+      getByRole = _render42.getByRole,
+      queryByRole = _render42.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
@@ -1849,16 +1652,16 @@ describe("Select component tests", function () {
       keyCode: 38,
       charCode: 38
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
-    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: groupOptions
       })),
-      getByRole = _render46.getByRole,
-      queryByRole = _render46.queryByRole;
+      getByRole = _render43.getByRole,
+      queryByRole = _render43.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
@@ -1872,16 +1675,16 @@ describe("Select component tests", function () {
       keyCode: 38,
       charCode: 38
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
-    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: groupOptions
       })),
-      getByRole = _render47.getByRole,
-      queryByRole = _render47.queryByRole;
+      getByRole = _render44.getByRole,
+      queryByRole = _render44.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
@@ -1889,16 +1692,16 @@ describe("Select component tests", function () {
       keyCode: 40,
       charCode: 40
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
-    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "test-select-label",
         options: groupOptions
       })),
-      getByRole = _render48.getByRole,
-      queryByRole = _render48.queryByRole;
+      getByRole = _render45.getByRole,
+      queryByRole = _render45.queryByRole;
     var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
@@ -1912,21 +1715,21 @@ describe("Select component tests", function () {
       keyCode: 40,
       charCode: 40
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
-  test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee43() {
-    var onChange, _render49, getByText, getByRole, getAllByRole, queryByRole, select;
-    return _regenerator["default"].wrap(function _callee43$(_context43) {
-      while (1) switch (_context43.prev = _context43.next) {
+  test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee40() {
+    var onChange, _render46, getByText, getByRole, getAllByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee40$(_context40) {
+      while (1) switch (_context40.prev = _context40.next) {
         case 0:
           onChange = jest.fn();
-          _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions,
             onChange: onChange,
             optional: true
-          })), getByText = _render49.getByText, getByRole = _render49.getByRole, getAllByRole = _render49.getAllByRole, queryByRole = _render49.queryByRole;
+          })), getByText = _render46.getByText, getByRole = _render46.getByRole, getAllByRole = _render46.getAllByRole, queryByRole = _render46.queryByRole;
           select = getByRole("combobox");
           _react2.fireEvent.keyDown(select, {
             key: "ArrowUp",
@@ -1961,117 +1764,115 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: "ebro"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Ebro")).toBeTruthy();
-          _context43.next = 13;
+          _context40.next = 13;
           return _userEvent["default"].click(select);
         case 13:
           expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
         case 14:
         case "end":
-          return _context43.stop();
+          return _context40.stop();
       }
-    }, _callee43);
+    }, _callee40);
   })));
-  test("Grouped Options: Searchable - Displays an input for filtering the list of options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee44() {
-    var onChange, _render50, container, getByText, getByRole, getAllByRole, queryByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee44$(_context44) {
-      while (1) switch (_context44.prev = _context44.next) {
+  test("Grouped Options: Searchable - Displays an input for filtering the list of options", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee41() {
+    var onChange, _render47, container, getByText, getByRole, getAllByRole, queryByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee41$(_context41) {
+      while (1) switch (_context41.prev = _context41.next) {
         case 0:
           onChange = jest.fn();
-          _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render50.container, getByText = _render50.getByText, getByRole = _render50.getByRole, getAllByRole = _render50.getAllByRole, queryByRole = _render50.queryByRole;
+          })), container = _render47.container, getByText = _render47.getByText, getByRole = _render47.getByRole, getAllByRole = _render47.getAllByRole, queryByRole = _render47.queryByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context44.next = 6;
+          _context41.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox")).toBeTruthy();
-          _context44.next = 9;
+          expect(getByRole("list")).toBeTruthy();
+          _context41.next = 9;
           return _userEvent["default"].type(searchInput, "ro");
         case 9:
-          expect(getAllByRole("group").length).toBe(2);
           expect(getAllByRole("presentation").length).toBe(2);
           expect(getAllByRole("option").length).toBe(5);
           expect(getByText("Colores")).toBeTruthy();
           expect(getByText("Ríos españoles")).toBeTruthy();
-          _context44.next = 16;
+          _context41.next = 15;
           return _userEvent["default"].click(getAllByRole("option")[4]);
-        case 16:
+        case 15:
           expect(onChange).toHaveBeenCalledWith({
             value: "ebro"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Ebro")).toBeTruthy();
           expect(searchInput.value).toBe("");
-          _context44.next = 22;
+          _context41.next = 21;
           return _userEvent["default"].click(select);
-        case 22:
+        case 21:
           expect(getAllByRole("option")[17].getAttribute("aria-selected")).toBe("true");
-        case 23:
+        case 22:
         case "end":
-          return _context44.stop();
+          return _context41.stop();
       }
-    }, _callee44);
+    }, _callee41);
   })));
-  test("Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee45() {
-    var onChange, _render51, container, getByText, getByRole, select, searchInput;
-    return _regenerator["default"].wrap(function _callee45$(_context45) {
-      while (1) switch (_context45.prev = _context45.next) {
+  test("Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee42() {
+    var onChange, _render48, container, getByText, getByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee42$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
         case 0:
           onChange = jest.fn();
-          _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions,
             onChange: onChange,
             searchable: true
-          })), container = _render51.container, getByText = _render51.getByText, getByRole = _render51.getByRole;
+          })), container = _render48.container, getByText = _render48.getByText, getByRole = _render48.getByRole;
           select = getByRole("combobox");
           searchInput = container.querySelectorAll("input")[1];
-          _context45.next = 6;
+          _context42.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox")).toBeTruthy();
-          _context45.next = 9;
+          expect(getByRole("list")).toBeTruthy();
+          _context42.next = 9;
           return _userEvent["default"].type(searchInput, "very long string");
         case 9:
           expect(getByText("No matches found")).toBeTruthy();
         case 10:
         case "end":
-          return _context45.stop();
+          return _context42.stop();
       }
-    }, _callee45);
+    }, _callee42);
   })));
-  test("Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee46() {
-    var onChange, _render52, getByText, getAllByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
-    return _regenerator["default"].wrap(function _callee46$(_context46) {
-      while (1) switch (_context46.prev = _context46.next) {
+  test("Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee43() {
+    var onChange, _render49, getByText, getAllByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
+    return _regenerator["default"].wrap(function _callee43$(_context43) {
+      while (1) switch (_context43.prev = _context43.next) {
         case 0:
           onChange = jest.fn();
-          _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             name: "test",
             label: "test-select-label",
             options: groupOptions,
             onChange: onChange,
             multiple: true
-          })), getByText = _render52.getByText, getAllByText = _render52.getAllByText, getByRole = _render52.getByRole, getAllByRole = _render52.getAllByRole, queryByRole = _render52.queryByRole, container = _render52.container;
+          })), getByText = _render49.getByText, getAllByText = _render49.getAllByText, getByRole = _render49.getByRole, getAllByRole = _render49.getAllByRole, queryByRole = _render49.queryByRole, container = _render49.container;
           select = getByRole("combobox");
           submitInput = container.querySelector("input[name=\"test\"]");
-          _context46.next = 6;
+          _context43.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
-          _context46.next = 9;
+          _context43.next = 8;
           return _userEvent["default"].click(getAllByRole("option")[10]);
-        case 9:
+        case 8:
           expect(onChange).toHaveBeenCalledWith({
             value: ["bilbao"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getAllByText("Bilbao").length).toBe(2);
           _react2.fireEvent.keyDown(select, {
             key: "ArrowUp",
@@ -2094,114 +1895,111 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: ["bilbao", "guadalquivir"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
-          expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[16].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("bilbao,guadalquivir");
-        case 21:
+        case 18:
         case "end":
-          return _context46.stop();
+          return _context43.stop();
       }
-    }, _callee46);
+    }, _callee43);
   })));
-  test("Grouped Options: Multiple selection - Clear action and selection indicator", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee47() {
-    var onChange, _render53, getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle, select;
-    return _regenerator["default"].wrap(function _callee47$(_context47) {
-      while (1) switch (_context47.prev = _context47.next) {
+  test("Grouped Options: Multiple selection - Clear action and selection indicator", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee44() {
+    var onChange, _render50, getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle, select;
+    return _regenerator["default"].wrap(function _callee44$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
         case 0:
           onChange = jest.fn();
-          _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions,
             onChange: onChange,
             multiple: true
-          })), getByText = _render53.getByText, queryByText = _render53.queryByText, getByRole = _render53.getByRole, getAllByRole = _render53.getAllByRole, queryByRole = _render53.queryByRole, getByTitle = _render53.getByTitle, queryByTitle = _render53.queryByTitle;
+          })), getByText = _render50.getByText, queryByText = _render50.queryByText, getByRole = _render50.getByRole, getAllByRole = _render50.getAllByRole, queryByRole = _render50.queryByRole, getByTitle = _render50.getByTitle, queryByTitle = _render50.queryByTitle;
           select = getByRole("combobox");
-          _context47.next = 5;
+          _context44.next = 5;
           return _userEvent["default"].click(select);
         case 5:
-          _context47.next = 7;
+          _context44.next = 7;
           return _userEvent["default"].click(getAllByRole("option")[5]);
         case 7:
-          _context47.next = 9;
+          _context44.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[8]);
         case 9:
-          _context47.next = 11;
+          _context44.next = 11;
           return _userEvent["default"].click(getAllByRole("option")[13]);
         case 11:
-          _context47.next = 13;
+          _context44.next = 13;
           return _userEvent["default"].click(getAllByRole("option")[17]);
         case 13:
           expect(onChange).toHaveBeenCalledWith({
             value: ["blanco", "oviedo", "duero", "ebro"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
           expect(getByText("4", {
             exact: true
           })).toBeTruthy();
-          _context47.next = 19;
+          _context44.next = 19;
           return _userEvent["default"].click(getByTitle("Clear selection"));
         case 19:
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
           expect(queryByText("4")).toBeFalsy();
           expect(queryByTitle("Clear selection")).toBeFalsy();
         case 23:
         case "end":
-          return _context47.stop();
+          return _context44.stop();
       }
-    }, _callee47);
+    }, _callee44);
   })));
-  test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee48() {
-    var onChange, _render54, getByText, getAllByText, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee48$(_context48) {
-      while (1) switch (_context48.prev = _context48.next) {
+  test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee45() {
+    var onChange, _render51, getByText, getAllByText, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee45$(_context45) {
+      while (1) switch (_context45.prev = _context45.next) {
         case 0:
           onChange = jest.fn();
-          _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             placeholder: "Choose an option",
             options: groupOptions,
             onChange: onChange,
             multiple: true,
             optional: true
-          })), getByText = _render54.getByText, getAllByText = _render54.getAllByText, getByRole = _render54.getByRole, getAllByRole = _render54.getAllByRole;
+          })), getByText = _render51.getByText, getAllByText = _render51.getAllByText, getByRole = _render51.getByRole, getAllByRole = _render51.getAllByRole;
           select = getByRole("combobox");
           expect(getByText("(Optional)")).toBeTruthy();
-          _context48.next = 6;
+          _context45.next = 6;
           return _userEvent["default"].click(select);
         case 6:
           expect(getAllByText("Choose an option").length).toBe(1);
-          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-          _context48.next = 10;
+          _context45.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
-        case 10:
+        case 9:
           expect(onChange).toHaveBeenCalledWith({
             value: ["azul"]
           });
           expect(getAllByText("Azul").length).toBe(2);
-        case 12:
+        case 11:
         case "end":
-          return _context48.stop();
+          return _context45.stop();
       }
-    }, _callee48);
+    }, _callee45);
   })));
-  test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee49() {
-    var _render55, getByText, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee49$(_context49) {
-      while (1) switch (_context49.prev = _context49.next) {
+  test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee46() {
+    var _render52, getByText, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee46$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
         case 0:
-          _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions
-          })), getByText = _render55.getByText, getByRole = _render55.getByRole, getAllByRole = _render55.getAllByRole;
+          })), getByText = _render52.getByText, getByRole = _render52.getByRole, getAllByRole = _render52.getAllByRole;
           select = getByRole("combobox");
-          _context49.next = 4;
+          _context46.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          _context49.next = 6;
+          _context46.next = 6;
           return _userEvent["default"].click(getAllByRole("option")[2]);
         case 6:
           expect(getByText("Rosa")).toBeTruthy();
@@ -2253,28 +2051,28 @@ describe("Select component tests", function () {
           expect(getByText("Verde")).toBeTruthy();
         case 18:
         case "end":
-          return _context49.stop();
+          return _context46.stop();
       }
-    }, _callee49);
+    }, _callee46);
   })));
-  test("Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee50() {
-    var _render56, getByText, getByRole, getAllByRole, select;
-    return _regenerator["default"].wrap(function _callee50$(_context50) {
-      while (1) switch (_context50.prev = _context50.next) {
+  test("Grouped Options - If an options was previously selected when its opened (by click and key press), the visual focus appears always in the selected option", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee47() {
+    var _render53, getByText, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee47$(_context47) {
+      while (1) switch (_context47.prev = _context47.next) {
         case 0:
-          _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: groupOptions
-          })), getByText = _render56.getByText, getByRole = _render56.getByRole, getAllByRole = _render56.getAllByRole;
+          })), getByText = _render53.getByText, getByRole = _render53.getByRole, getAllByRole = _render53.getAllByRole;
           select = getByRole("combobox");
-          _context50.next = 4;
+          _context47.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          _context50.next = 6;
+          _context47.next = 6;
           return _userEvent["default"].click(getAllByRole("option")[17]);
         case 6:
           expect(getByText("Ebro")).toBeTruthy();
-          _context50.next = 9;
+          _context47.next = 9;
           return _userEvent["default"].click(select);
         case 9:
           expect(select.getAttribute("aria-activedescendant")).toBeNull();
@@ -2285,7 +2083,7 @@ describe("Select component tests", function () {
             charCode: 38
           });
           expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
-          _context50.next = 14;
+          _context47.next = 14;
           return _userEvent["default"].click(select);
         case 14:
           _react2.fireEvent.keyDown(select, {
@@ -2322,40 +2120,40 @@ describe("Select component tests", function () {
           expect(getByText("Azul")).toBeTruthy();
         case 21:
         case "end":
-          return _context50.stop();
+          return _context47.stop();
       }
-    }, _callee50);
+    }, _callee47);
   })));
-  test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee51() {
-    var onChange, _render57, getByRole, getAllByRole, getByTitle, select;
-    return _regenerator["default"].wrap(function _callee51$(_context51) {
-      while (1) switch (_context51.prev = _context51.next) {
+  test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee48() {
+    var onChange, _render54, getByRole, getAllByRole, getByTitle, select;
+    return _regenerator["default"].wrap(function _callee48$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
         case 0:
           onChange = jest.fn();
-          _render57 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+          _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             options: singleOptions,
             onChange: onChange,
             multiple: true,
             optional: true
-          })), getByRole = _render57.getByRole, getAllByRole = _render57.getAllByRole, getByTitle = _render57.getByTitle;
+          })), getByRole = _render54.getByRole, getAllByRole = _render54.getAllByRole, getByTitle = _render54.getByTitle;
           select = getByRole("combobox");
-          _context51.next = 5;
+          _context48.next = 5;
           return _userEvent["default"].click(select);
         case 5:
-          _context51.next = 7;
+          _context48.next = 7;
           return _userEvent["default"].click(getAllByRole("option")[5]);
         case 7:
-          _context51.next = 9;
+          _context48.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[8]);
         case 9:
-          _context51.next = 11;
+          _context48.next = 11;
           return _userEvent["default"].click(getAllByRole("option")[13]);
         case 11:
           expect(onChange).toHaveBeenCalledWith({
             value: ["6", "9", "14"]
           });
-          _context51.next = 14;
+          _context48.next = 14;
           return _userEvent["default"].click(getByTitle("Clear selection"));
         case 14:
           expect(onChange).toHaveBeenCalledWith({
@@ -2363,8 +2161,8 @@ describe("Select component tests", function () {
           });
         case 15:
         case "end":
-          return _context51.stop();
+          return _context48.stop();
       }
-    }, _callee51);
+    }, _callee48);
   })));
 });