@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3df47e

package/select/Select.test.js

@@ -1,16 +1,45 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
-
-var _Select = _interopRequireDefault(require("./Select"));
-
 var _react2 = require("@testing-library/react");
-
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var single_options = [{
+var _Select = _interopRequireDefault(require("./Select.tsx"));
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+var singleOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -71,7 +100,7 @@ var single_options = [{
   label: "Option 20",
   value: "20"
 }];
-var svg_icon_options = [{
+var svgIconOptions = [{
   label: "3G Mobile",
   value: "1",
   icon: /*#__PURE__*/_react["default"].createElement("svg", {
@@ -135,14 +164,14 @@ var svg_icon_options = [{
   label: "Regular",
   value: "Regular"
 }];
-var url_icon_options = [{
+var urlIconOptions = [{
   label: "Instagram",
   value: "1",
   icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png"
 }, {
-  label: "Twitter",
+  label: "X",
   value: "2",
-  icon: "https://cdn-icons-png.flaticon.com/512/81/81609.png"
+  icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg"
 }, {
   label: "Snapchat",
   value: "3"
@@ -155,7 +184,7 @@ var url_icon_options = [{
   value: "5",
   icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png"
 }];
-var group_options = [{
+var groupOptions = [{
   label: "Colores",
   options: [{
     label: "Azul",
@@ -219,16 +248,16 @@ var group_options = [{
     value: "ebro"
   }]
 }];
-var grouped_icon_options = [{
+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: "Twitter",
+    label: "X",
     value: "2",
-    icon: "https://cdn-icons-png.flaticon.com/512/81/81609.png"
+    icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg"
   }, {
     label: "Facebook",
     value: "3",
@@ -264,52 +293,35 @@ var grouped_icon_options = [{
   }]
 }];
 describe("Select component tests", function () {
-  test("Renders with correct label", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      helperText: "test-select-helper-text",
-      placeholder: "Example text"
-    })),
-        getByText = _render.getByText,
-        getByRole = _render.getByRole;
-
-    var select = getByRole("combobox");
-    var label = getByText("test-select-label");
-    expect(label).toBeTruthy();
-
-    _userEvent["default"].click(label);
-
-    expect(document.activeElement).toEqual(select);
-  });
-  test("Renders with correct helper text and placeholder", 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;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            helperText: "test-select-helper-text",
+            placeholder: "Example text"
+          })), getByText = _render.getByText, getByRole = _render.getByRole;
+          select = getByRole("combobox");
+          label = getByText("test-select-label");
+          _context.next = 5;
+          return _userEvent["default"].click(label);
+        case 5:
+          expect(document.activeElement).toEqual(select);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Renders with correct aria attributes when is in error state", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      helperText: "test-select-helper-text",
-      placeholder: "Example text"
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("test-select-helper-text")).toBeTruthy();
-    expect(getByText("Example text")).toBeTruthy();
-  });
-  test("Renders with correct optional label", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      optional: true
-    })),
-        getByText = _render3.getByText;
-
-    expect(getByText("test-select-label")).toBeTruthy();
-    expect(getByText("(Optional)")).toBeTruthy();
-  });
-  test("Renders with error message and correct aria attributes", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "Error label",
-      error: "Error message."
-    })),
-        getByText = _render4.getByText,
-        getByRole = _render4.getByRole;
-
+        label: "Error label",
+        error: "Error message."
+      })),
+      getByText = _render2.getByText,
+      getByRole = _render2.getByRole;
     var select = getByRole("combobox");
     var errorMessage = getByText("Error message.");
     expect(errorMessage).toBeTruthy();
@@ -317,1584 +329,2042 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-invalid")).toBe("true");
     expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
   });
-  test("Disabled select - Clear all options action must be shown but not clickable", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      value: ["1", "2"],
-      options: single_options,
-      disabled: true,
-      searchable: true,
-      multiple: true
-    })),
-        getByRole = _render5.getByRole,
-        getByText = _render5.getByText,
-        queryByRole = _render5.queryByRole;
-
-    var select = getByRole("combobox");
-    expect(select.getAttribute("aria-disabled")).toBe("true");
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-
-    _userEvent["default"].click(getByRole("button"));
-
-    expect(getByText("Option 01, Option 02")).toBeTruthy();
-  });
-  test("Focused select does not open the listbox", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      value: ["1", "2"],
-      options: single_options,
-      disabled: true,
-      searchable: true,
-      multiple: true
-    })),
-        getByRole = _render6.getByRole,
-        queryByRole = _render6.queryByRole;
-
+  test("Renders with correct aria attributes", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render3, getByText, getByRole, select, label, list;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            placeholder: "Example",
+            options: singleOptions
+          })), getByText = _render3.getByText, getByRole = _render3.getByRole;
+          select = getByRole("combobox");
+          label = getByText("test-select-label");
+          expect(select.getAttribute("aria-disabled")).toBe("false");
+          expect(select.getAttribute("aria-haspopup")).toBe("listbox");
+          expect(select.getAttribute("aria-expanded")).toBe("false");
+          expect(select.getAttribute("aria-required")).toBe("true");
+          expect(select.getAttribute("aria-labelledby")).toBe(label.id);
+          expect(select.getAttribute("aria-activedescendant")).toBeNull();
+          expect(select.getAttribute("aria-invalid")).toBe("false");
+          _context2.next = 12;
+          return _userEvent["default"].click(select);
+        case 12:
+          list = getByRole("listbox");
+          expect(select.getAttribute("aria-controls")).toBe(list.id);
+          expect(list.getAttribute("aria-multiselectable")).toBe("false");
+        case 15:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  test("Single selection: Renders with correct default value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render4, getByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            name: "test",
+            defaultValue: "4",
+            options: singleOptions
+          })), getByText = _render4.getByText, getByRole = _render4.getByRole, getAllByRole = _render4.getAllByRole, queryByRole = _render4.queryByRole, container = _render4.container;
+          select = getByRole("combobox");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Option 04")).toBeTruthy();
+          expect(submitInput.value).toBe("4");
+          _context3.next = 8;
+          return _userEvent["default"].click(select);
+        case 8:
+          expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
+          _context3.next = 11;
+          return _userEvent["default"].click(getAllByRole("option")[7]);
+        case 11:
+          expect(getByText("Option 08")).toBeTruthy();
+          expect(submitInput.value).toBe("8");
+        case 13:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  test("Multiple selection: Renders with correct default value", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render5, getByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            name: "test",
+            defaultValue: ["4", "2", "6"],
+            options: singleOptions,
+            multiple: true
+          })), getByText = _render5.getByText, getByRole = _render5.getByRole, getAllByRole = _render5.getAllByRole, queryByRole = _render5.queryByRole, container = _render5.container;
+          select = getByRole("combobox");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Option 02, Option 04, Option 06")).toBeTruthy();
+          expect(submitInput.value).toBe("4,2,6");
+          _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;
+          return _userEvent["default"].click(getAllByRole("option")[2]);
+        case 13:
+          expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
+          expect(submitInput.value).toBe("4,2,6,3");
+        case 15:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  test("Sends its value when submitted", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var handlerOnSubmit, _render6, getByText, getByRole, getAllByRole, select, submit;
+    return _regenerator["default"].wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              options: "1,5,3"
+            });
+          });
+          _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            name: "options",
+            label: "test-select-label",
+            defaultValue: ["1", "5"],
+            options: singleOptions,
+            multiple: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render6.getByText, getByRole = _render6.getByRole, getAllByRole = _render6.getAllByRole;
+          select = getByRole("combobox");
+          submit = getByText("Submit");
+          _context5.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          _context5.next = 8;
+          return _userEvent["default"].click(getAllByRole("option")[2]);
+        case 8:
+          _context5.next = 10;
+          return _userEvent["default"].click(submit);
+        case 10:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  test("Searching for a value with an empty list of options passed doesn't open the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var _render7, container, getByRole, queryByRole, select, searchInput;
+    return _regenerator["default"].wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: [],
+            searchable: true
+          })), container = _render7.container, getByRole = _render7.getByRole, queryByRole = _render7.queryByRole;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context7.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          _context7.next = 7;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+            return _regenerator["default"].wrap(function _callee6$(_context6) {
+              while (1) switch (_context6.prev = _context6.next) {
+                case 0:
+                  _userEvent["default"].type(searchInput, "test");
+                case 1:
+                case "end":
+                  return _context6.stop();
+              }
+            }, _callee6);
+          })));
+        case 7:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(select.getAttribute("aria-expanded")).toBe("false");
+        case 9:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  test("Disabled select - Cannot gain focus or open the listbox via click", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var _render8, getByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee8$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            value: ["1", "2"],
+            options: singleOptions,
+            disabled: true
+          })), getByRole = _render8.getByRole, queryByRole = _render8.queryByRole;
+          select = getByRole("combobox");
+          expect(select.getAttribute("aria-disabled")).toBe("true");
+          _context8.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(document.activeElement === select).toBeFalsy();
+        case 7:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+  test("Disabled select - Clear all options action must be shown but not clickable", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+    var _render9, getByRole, getByText;
+    return _regenerator["default"].wrap(function _callee9$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
+        case 0:
+          _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            value: ["1", "2"],
+            options: singleOptions,
+            disabled: true,
+            searchable: true,
+            multiple: true
+          })), getByRole = _render9.getByRole, getByText = _render9.getByText;
+          _context9.next = 3;
+          return _userEvent["default"].click(getByRole("button"));
+        case 3:
+          expect(getByText("Option 01, Option 02")).toBeTruthy();
+        case 4:
+        case "end":
+          return _context9.stop();
+      }
+    }, _callee9);
+  })));
+  test("Disabled select - Does not call onBlur event", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+    var onBlur, _render10, getByRole, select;
+    return _regenerator["default"].wrap(function _callee10$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          onBlur = jest.fn();
+          _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: singleOptions,
+            disabled: true,
+            onBlur: onBlur
+          })), getByRole = _render10.getByRole;
+          select = getByRole("combobox");
+          _context10.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          _react2.fireEvent.keyDown(getByRole("combobox"), {
+            key: "Tab",
+            code: "Tab",
+            keyCode: 9,
+            charCode: 9
+          });
+          expect(onBlur).not.toHaveBeenCalled();
+        case 7:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee10);
+  })));
+  test("Disabled select - When the component gains the focus, the listbox does not open", function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        label: "test-select-label",
+        value: ["1", "2"],
+        options: singleOptions,
+        disabled: true,
+        searchable: true,
+        multiple: true
+      })),
+      getByRole = _render11.getByRole,
+      queryByRole = _render11.queryByRole;
     var select = getByRole("combobox");
-
     _react2.fireEvent.focus(select);
-
     expect(queryByRole("listbox")).toBeFalsy();
+    expect(document.activeElement === select).toBeFalsy();
   });
-  test("Controlled - Not optional constraint", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      onBlur: onBlur
-    })),
-        getByRole = _render7.getByRole,
-        getAllByRole = _render7.getAllByRole;
-
-    var select = getByRole("combobox");
-    expect(select.getAttribute("aria-required")).toBe("true");
-
-    _react2.fireEvent.focus(select);
-
-    _react2.fireEvent.blur(select);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, enter a value."
-    });
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[0]);
-
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({
-      value: "1",
-      error: null
-    });
-
-    _react2.fireEvent.focus(select);
-
-    _react2.fireEvent.blur(select);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "1",
-      error: null
-    });
-  });
+  test("Disabled select - Doesn't send its value when submitted", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+    var handlerOnSubmit, _render12, getByText, submit;
+    return _regenerator["default"].wrap(function _callee11$(_context11) {
+      while (1) switch (_context11.prev = _context11.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({});
+          });
+          _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            defaultValue: "1",
+            options: singleOptions,
+            disabled: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render12.getByText;
+          submit = getByText("Submit");
+          _context11.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+        case "end":
+          return _context11.stop();
+      }
+    }, _callee11);
+  })));
+  test("Controlled - Single selection - Not optional constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
+    var onChange, onBlur, _render13, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee12$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: singleOptions,
+            onChange: onChange,
+            onBlur: onBlur
+          })), getByRole = _render13.getByRole, getAllByRole = _render13.getAllByRole;
+          select = getByRole("combobox");
+          expect(select.getAttribute("aria-required")).toBe("true");
+          _react2.fireEvent.focus(select);
+          _react2.fireEvent.blur(select);
+          expect(onBlur).toHaveBeenCalled();
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "",
+            error: "This field is required. Please, enter a value."
+          });
+          _context12.next = 11;
+          return _userEvent["default"].click(select);
+        case 11:
+          _context12.next = 13;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 13:
+          expect(onChange).toHaveBeenCalled();
+          expect(onChange).toHaveBeenCalledWith({
+            value: "1"
+          });
+          _react2.fireEvent.blur(select);
+          expect(onBlur).toHaveBeenCalled();
+          expect(onBlur).toHaveBeenCalledWith({
+            value: "1"
+          });
+        case 18:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee12);
+  })));
+  test("Controlled - Multiple selection - Not optional constraint", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee13() {
+    var onChange, onBlur, _render14, getByRole, getAllByRole, select;
+    return _regenerator["default"].wrap(function _callee13$(_context13) {
+      while (1) switch (_context13.prev = _context13.next) {
+        case 0:
+          onChange = jest.fn();
+          onBlur = jest.fn();
+          _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: singleOptions,
+            onChange: onChange,
+            onBlur: onBlur,
+            multiple: true
+          })), getByRole = _render14.getByRole, getAllByRole = _render14.getAllByRole;
+          select = getByRole("combobox");
+          expect(select.getAttribute("aria-required")).toBe("true");
+          _react2.fireEvent.focus(select);
+          _react2.fireEvent.blur(select);
+          expect(onBlur).toHaveBeenCalled();
+          expect(onBlur).toHaveBeenCalledWith({
+            value: [],
+            error: "This field is required. Please, enter a value."
+          });
+          _context13.next = 11;
+          return _userEvent["default"].click(select);
+        case 11:
+          _context13.next = 13;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 13:
+          _context13.next = 15;
+          return _userEvent["default"].click(getAllByRole("option")[1]);
+        case 15:
+          expect(onChange).toHaveBeenCalled();
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["1", "2"]
+          });
+          _react2.fireEvent.blur(select);
+          expect(onBlur).toHaveBeenCalled();
+          expect(onBlur).toHaveBeenCalledWith({
+            value: ["1", "2"]
+          });
+          _context13.next = 22;
+          return _userEvent["default"].click(select);
+        case 22:
+          _context13.next = 24;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 24:
+          _context13.next = 26;
+          return _userEvent["default"].click(getAllByRole("option")[1]);
+        case 26:
+          expect(onChange).toHaveBeenCalled();
+          expect(onChange).toHaveBeenCalledWith({
+            value: [],
+            error: "This field is required. Please, enter a value."
+          });
+          _react2.fireEvent.blur(select);
+          expect(onBlur).toHaveBeenCalled();
+          expect(onBlur).toHaveBeenCalledWith({
+            value: [],
+            error: "This field is required. Please, enter a value."
+          });
+        case 31:
+        case "end":
+          return _context13.stop();
+      }
+    }, _callee13);
+  })));
   test("Controlled - Optional constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
-
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      onBlur: onBlur,
-      optional: true
-    })),
-        getByRole = _render8.getByRole;
-
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        label: "test-select-label",
+        options: singleOptions,
+        onChange: onChange,
+        onBlur: onBlur,
+        optional: true
+      })),
+      getByRole = _render15.getByRole;
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-required")).toBe("false");
-
     _react2.fireEvent.focus(select);
-
     _react2.fireEvent.blur(select);
-
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: null
+      value: ""
     });
     expect(select.getAttribute("aria-invalid")).toBe("false");
   });
-  test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByText = _render9.getByText,
-        getByRole = _render9.getByRole,
-        getAllByRole = _render9.getAllByRole,
-        queryByRole = _render9.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox")).toBeTruthy();
-    expect(select.getAttribute("aria-expanded")).toBe("true");
-    expect(getByText("Option 01")).toBeTruthy();
-    expect(getByText("Option 02")).toBeTruthy();
-    expect(getByText("Option 08")).toBeTruthy();
-    expect(getByText("Option 09")).toBeTruthy();
-    expect(getAllByRole("option").length).toBe(20);
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(select.getAttribute("aria-expanded")).toBe("false");
-  });
-  test("Non-Grouped Options - If an empty list of options is passed, the select is rendered but doestn't open the listbox", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: []
-    })),
-        getByRole = _render10.getByRole,
-        queryByRole = _render10.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(select.getAttribute("aria-expanded")).toBe("false");
-  });
-  test("Non-Grouped Options - Click in an option selects it and closes the listbox", function () {
-    var onChange = jest.fn();
-
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      name: "test",
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange
-    })),
-        getByText = _render11.getByText,
-        getByRole = _render11.getByRole,
-        getAllByRole = _render11.getAllByRole,
-        queryByRole = _render11.queryByRole,
-        container = _render11.container;
-
-    var select = getByRole("combobox");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[2]);
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "3",
-      error: null
-    });
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Option 03")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByRole("option")[2].getAttribute("aria-selected")).toBe("true");
-    expect(submitInput.value).toBe("3");
-  });
-  test("Non-Grouped Options - Optional renders an empty first option with the placeholder as its label", function () {
-    var onChange = jest.fn();
-
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      placeholder: "Choose an option",
-      options: single_options,
-      onChange: onChange,
-      optional: true
-    })),
-        getByRole = _render12.getByRole,
-        getAllByRole = _render12.getAllByRole,
-        getAllByText = _render12.getAllByText;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByText("Choose an option").length).toBe(2);
-    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
-
-    _userEvent["default"].click(getAllByRole("option")[0]);
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
-    });
-    expect(getAllByText("Choose an option").length).toBe(1);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
-    });
-    expect(getAllByText("Choose an option").length).toBe(1);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
-  });
-  test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: svg_icon_options
-    })),
-        getByRole = _render13.getByRole,
-        getAllByRole = _render13.getAllByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox").querySelectorAll("[role='img']").length).toBe(4);
-    expect(getAllByRole("option").length).toBe(5);
-  });
-  test("Non-Grouped Options - Renders string url icons correctly when passed with options", function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: url_icon_options,
-      optional: true
-    })),
-        getByRole = _render14.getByRole,
-        getAllByRole = _render14.getAllByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox").querySelectorAll("img").length).toBe(4);
-    expect(getAllByRole("option").length).toBe(6);
-  });
+  test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee14() {
+    var _render16, getByText, getByRole, getAllByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee14$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: singleOptions
+          })), getByText = _render16.getByText, getByRole = _render16.getByRole, getAllByRole = _render16.getAllByRole, queryByRole = _render16.queryByRole;
+          select = getByRole("combobox");
+          _context14.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          expect(getByRole("listbox")).toBeTruthy();
+          expect(select.getAttribute("aria-expanded")).toBe("true");
+          expect(getByText("Option 01")).toBeTruthy();
+          expect(getByText("Option 02")).toBeTruthy();
+          expect(getByText("Option 08")).toBeTruthy();
+          expect(getByText("Option 09")).toBeTruthy();
+          expect(getAllByRole("option").length).toBe(20);
+          _context14.next = 13;
+          return _userEvent["default"].click(select);
+        case 13:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(select.getAttribute("aria-expanded")).toBe("false");
+        case 15:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee14);
+  })));
+  test("Non-Grouped Options - If an empty list of options is passed, the select is rendered but doesn't open the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee15() {
+    var _render17, getByRole, queryByRole, select;
+    return _regenerator["default"].wrap(function _callee15$(_context15) {
+      while (1) switch (_context15.prev = _context15.next) {
+        case 0:
+          _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: []
+          })), getByRole = _render17.getByRole, queryByRole = _render17.queryByRole;
+          select = getByRole("combobox");
+          _context15.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(select.getAttribute("aria-expanded")).toBe("false");
+        case 6:
+        case "end":
+          return _context15.stop();
+      }
+    }, _callee15);
+  })));
+  test("Non-Grouped Options - Click in an option selects it and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee16() {
+    var onChange, _render18, getByText, getByRole, getAllByRole, queryByRole, container, select, submitInput;
+    return _regenerator["default"].wrap(function _callee16$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          onChange = jest.fn();
+          _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            name: "test",
+            label: "test-select-label",
+            options: singleOptions,
+            onChange: onChange
+          })), getByText = _render18.getByText, getByRole = _render18.getByRole, getAllByRole = _render18.getAllByRole, queryByRole = _render18.queryByRole, container = _render18.container;
+          select = getByRole("combobox");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context16.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          _context16.next = 8;
+          return _userEvent["default"].click(getAllByRole("option")[2]);
+        case 8:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "3"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Option 03")).toBeTruthy();
+          _context16.next = 13;
+          return _userEvent["default"].click(select);
+        case 13:
+          expect(getAllByRole("option")[2].getAttribute("aria-selected")).toBe("true");
+          expect(submitInput.value).toBe("3");
+        case 15:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee16);
+  })));
+  test("Non-Grouped Options - Optional renders an empty first option (selected by default) with the placeholder as its label", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee17() {
+    var onChange, _render19, getByRole, getAllByRole, getAllByText, select;
+    return _regenerator["default"].wrap(function _callee17$(_context17) {
+      while (1) switch (_context17.prev = _context17.next) {
+        case 0:
+          onChange = jest.fn();
+          _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            placeholder: "Choose an option",
+            options: singleOptions,
+            onChange: onChange,
+            optional: true
+          })), getByRole = _render19.getByRole, getAllByRole = _render19.getAllByRole, getAllByText = _render19.getAllByText;
+          select = getByRole("combobox");
+          _context17.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          expect(getAllByText("Choose an option").length).toBe(2);
+          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
+          _context17.next = 9;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 9:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ""
+          });
+          expect(getAllByText("Choose an option").length).toBe(1);
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(onChange).toHaveBeenCalledWith({
+            value: ""
+          });
+          expect(getAllByText("Choose an option").length).toBe(1);
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+        case 18:
+        case "end":
+          return _context17.stop();
+      }
+    }, _callee17);
+  })));
+  test("Non-Grouped Options - Filtering options never affects the optional item until there are no coincidences", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee20() {
+    var _render20, getAllByRole, getByText, queryByText, container, searchInput;
+    return _regenerator["default"].wrap(function _callee20$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            placeholder: "Placeholder example",
+            options: singleOptions,
+            optional: true,
+            searchable: true
+          })), getAllByRole = _render20.getAllByRole, getByText = _render20.getByText, queryByText = _render20.queryByText, container = _render20.container;
+          searchInput = container.querySelectorAll("input")[1];
+          _context20.next = 4;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee18() {
+            return _regenerator["default"].wrap(function _callee18$(_context18) {
+              while (1) switch (_context18.prev = _context18.next) {
+                case 0:
+                  _userEvent["default"].type(searchInput, "1");
+                case 1:
+                case "end":
+                  return _context18.stop();
+              }
+            }, _callee18);
+          })));
+        case 4:
+          expect(getByText("Placeholder example")).toBeTruthy();
+          expect(getAllByRole("option").length).toBe(12);
+          _context20.next = 8;
+          return (0, _react2.act)( /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee19() {
+            return _regenerator["default"].wrap(function _callee19$(_context19) {
+              while (1) switch (_context19.prev = _context19.next) {
+                case 0:
+                  _userEvent["default"].type(searchInput, "123");
+                case 1:
+                case "end":
+                  return _context19.stop();
+              }
+            }, _callee19);
+          })));
+        case 8:
+          expect(queryByText("Placeholder example")).toBeFalsy();
+          expect(getByText("No matches found")).toBeTruthy();
+        case 10:
+        case "end":
+          return _context20.stop();
+      }
+    }, _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 _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByRole = _render15.getByRole,
-        queryByRole = _render15.queryByRole;
-
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        label: "test-select-label",
+        options: singleOptions
+      })),
+      getByRole = _render23.getByRole,
+      queryByRole = _render23.queryByRole;
     var select = getByRole("combobox");
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
       code: "ArrowUp",
       keyCode: 38,
       charCode: 38
     });
-
     expect(queryByRole("listbox")).toBeTruthy();
     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 _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByRole = _render16.getByRole,
-        queryByRole = _render16.queryByRole;
-
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        label: "test-select-label",
+        options: singleOptions
+      })),
+      getByRole = _render24.getByRole,
+      queryByRole = _render24.queryByRole;
     var select = getByRole("combobox");
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
       code: "ArrowUp",
       keyCode: 38,
       charCode: 38
     });
-
     expect(queryByRole("listbox")).toBeTruthy();
     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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByRole = _render17.getByRole,
-        queryByRole = _render17.queryByRole;
-
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        label: "test-select-label",
+        options: singleOptions
+      })),
+      getByRole = _render25.getByRole,
+      queryByRole = _render25.queryByRole;
     var select = getByRole("combobox");
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     expect(queryByRole("listbox")).toBeTruthy();
     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 _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByRole = _render18.getByRole,
-        queryByRole = _render18.queryByRole;
-
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        label: "test-select-label",
+        options: singleOptions
+      })),
+      getByRole = _render26.getByRole,
+      queryByRole = _render26.queryByRole;
     var select = getByRole("combobox");
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
       code: "ArrowUp",
       keyCode: 38,
       charCode: 38
     });
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
     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", function () {
-    var onChange = jest.fn();
-
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      optional: true
-    })),
-        getByText = _render19.getByText,
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole,
-        queryByRole = _render19.queryByRole;
-
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render27 = (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;
+          select = getByRole("combobox");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(onChange).toHaveBeenCalledWith({
+            value: "20"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Option 20")).toBeTruthy();
+          _context23.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();
+      }
+    }, _callee23);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render28 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context24.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          expect(getByRole("listbox")).toBeTruthy();
+          _context24.next = 9;
+          return _userEvent["default"].type(searchInput, "08");
+        case 9:
+          _context24.next = 11;
+          return _userEvent["default"].click(getByRole("option"));
+        case 11:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "8"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Option 08")).toBeTruthy();
+          expect(searchInput.value).toBe("");
+          _context24.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();
+      }
+    }, _callee24);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render29 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context25.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          expect(getByRole("listbox")).toBeTruthy();
+          _context25.next = 9;
+          return _userEvent["default"].type(searchInput, "abc");
+        case 9:
+          expect(getByText("No matches found")).toBeTruthy();
+        case 10:
+        case "end":
+          return _context25.stop();
+      }
+    }, _callee25);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render30 = (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;
+          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) {
+                case 0:
+                  _userEvent["default"].type(searchInput, "2");
+                case 1:
+                case "end":
+                  return _context26.stop();
+              }
+            }, _callee26);
+          })));
+        case 6:
+          expect(getByRole("listbox")).toBeTruthy();
+          expect(getByText("Option 02")).toBeTruthy();
+          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) {
+                case 0:
+                  _userEvent["default"].click(select);
+                case 1:
+                case "end":
+                  return _context27.stop();
+              }
+            }, _callee27);
+          })));
+        case 13:
+          expect(searchInput.value).toBe("");
+        case 14:
+        case "end":
+          return _context28.stop();
+      }
+    }, _callee28);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render31 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context29.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          _context29.next = 8;
+          return _userEvent["default"].click(select);
+        case 8:
+          expect(queryByRole("listbox")).toBeFalsy();
+          _context29.next = 11;
+          return _userEvent["default"].type(searchInput, "2");
+        case 11:
+          expect(getByRole("listbox")).toBeTruthy();
+        case 12:
+        case "end":
+          return _context29.stop();
+      }
+    }, _callee29);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render32 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context30.next = 6;
+          return _userEvent["default"].type(searchInput, "Option 02");
+        case 6:
+          _react2.fireEvent.keyDown(select, {
+            key: "Esc",
+            code: "Esc",
+            keyCode: 27,
+            charCode: 27
+          });
+          expect(searchInput.value).toBe("");
+          expect(queryByRole("listbox")).toBeFalsy();
+        case 9:
+        case "end":
+          return _context30.stop();
+      }
+    }, _callee30);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render33 = (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;
+          searchInput = container.querySelectorAll("input")[1];
+          _context31.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;
+          return _userEvent["default"].click(clearAction);
+        case 11:
+          expect(getByRole("listbox")).toBeTruthy();
+          expect(getAllByRole("option").length).toBe(20);
+          expect(queryByTitle("Clear search")).toBeFalsy();
+        case 14:
+        case "end":
+          return _context31.stop();
+      }
+    }, _callee31);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render34 = (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;
+          select = getByRole("combobox");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context32.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
+          _context32.next = 9;
+          return _userEvent["default"].click(getAllByRole("option")[10]);
+        case 9:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["11"]
+          });
+          expect(queryByRole("listbox")).toBeTruthy();
+          expect(getAllByText("Option 11").length).toBe(2);
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["11", "19"]
+          });
+          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 "end":
+          return _context32.stop();
+      }
+    }, _callee32);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render35 = (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;
+          select = getByRole("combobox");
+          _context33.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          _context33.next = 7;
+          return _userEvent["default"].click(getAllByRole("option")[5]);
+        case 7:
+          _context33.next = 9;
+          return _userEvent["default"].click(getAllByRole("option")[8]);
+        case 9:
+          _context33.next = 11;
+          return _userEvent["default"].click(getAllByRole("option")[13]);
+        case 11:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["6", "9", "14"]
+          });
+          expect(queryByRole("listbox")).toBeTruthy();
+          expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy();
+          expect(getByText("3", {
+            exact: true
+          })).toBeTruthy();
+          _context33.next = 17;
+          return _userEvent["default"].click(getByTitle("Clear selection"));
+        case 17:
+          expect(onChange).toHaveBeenCalledWith({
+            value: [],
+            error: "This field is required. Please, enter a value."
+          });
+          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy();
+          expect(queryByText("3")).toBeFalsy();
+          expect(queryByTitle("Clear selection")).toBeFalsy();
+        case 22:
+        case "end":
+          return _context33.stop();
+      }
+    }, _callee33);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render36 = (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;
+          select = getByRole("combobox");
+          expect(getByText("(Optional)")).toBeTruthy();
+          _context34.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;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 10:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["1"]
+          });
+          expect(getAllByText("Option 01").length).toBe(2);
+        case 12:
+        case "end":
+          return _context34.stop();
+      }
+    }, _callee34);
+  })));
+  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) {
+        case 0:
+          _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: singleOptions
+          })), getByText = _render37.getByText, getByRole = _render37.getByRole, getAllByRole = _render37.getAllByRole;
+          select = getByRole("combobox");
+          _context35.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          _context35.next = 6;
+          return _userEvent["default"].click(getAllByRole("option")[4]);
+        case 6:
+          expect(getByText("Option 05")).toBeTruthy();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-4");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(getByText("Option 04")).toBeTruthy();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-3");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(getByText("Option 06")).toBeTruthy();
+        case 18:
+        case "end":
+          return _context35.stop();
+      }
+    }, _callee35);
+  })));
+  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) {
+        case 0:
+          _render38 = (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;
+          select = getByRole("combobox");
+          _context36.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          _context36.next = 6;
+          return _userEvent["default"].click(getAllByRole("option")[15]);
+        case 6:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Option 16")).toBeTruthy();
+          _context36.next = 10;
+          return _userEvent["default"].click(select);
+        case 10:
+          expect(select.getAttribute("aria-activedescendant")).toBeNull();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
+          _context36.next = 15;
+          return _userEvent["default"].click(select);
+        case 15:
+          expect(queryByRole("listbox")).toBeFalsy();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(getByText("Option 17")).toBeTruthy();
+        case 23:
+        case "end":
+          return _context36.stop();
+      }
+    }, _callee36);
+  })));
+  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) {
+        case 0:
+          _render39 = (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;
+          select = getByRole("combobox");
+          _context37.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          listbox = getByRole("listbox");
+          expect(listbox).toBeTruthy();
+          expect(select.getAttribute("aria-expanded")).toBe("true");
+          expect(getByText("Colores")).toBeTruthy();
+          expect(getByText("Azul")).toBeTruthy();
+          expect(getByText("Negro")).toBeTruthy();
+          expect(getByText("Ciudades españolas")).toBeTruthy();
+          expect(getByText("Madrid")).toBeTruthy();
+          groups = getAllByRole("group");
+          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;
+          return _userEvent["default"].click(select);
+        case 21:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(select.getAttribute("aria-expanded")).toBe("false");
+        case 23:
+        case "end":
+          return _context37.stop();
+      }
+    }, _callee37);
+  })));
+  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) {
+        case 0:
+          _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: [{
+              label: "Group 1",
+              options: []
+            }]
+          })), getByRole = _render40.getByRole, queryByRole = _render40.queryByRole;
+          select = getByRole("combobox");
+          _context38.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(select.getAttribute("aria-expanded")).toBe("false");
+        case 6:
+        case "end":
+          return _context38.stop();
+      }
+    }, _callee38);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render41 = (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;
+          select = getByRole("combobox");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context39.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          _context39.next = 8;
+          return _userEvent["default"].click(getAllByRole("option")[8]);
+        case 8:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "oviedo"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Oviedo")).toBeTruthy();
+          _context39.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();
+      }
+    }, _callee39);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render42 = (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;
+          select = getByRole("combobox");
+          _context40.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;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 9:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ""
+          });
+          expect(getAllByText("Placeholder example").length).toBe(1);
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(onChange).toHaveBeenCalledWith({
+            value: ""
+          });
+          expect(getAllByText("Placeholder example").length).toBe(1);
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
+        case 18:
+        case "end":
+          return _context40.stop();
+      }
+    }, _callee40);
+  })));
+  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) {
+        case 0:
+          _render43 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context41.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          _context41.next = 7;
+          return _userEvent["default"].type(searchInput, "ro");
+        case 7:
+          expect(getByText("Placeholder example")).toBeTruthy();
+          expect(getAllByRole("option").length).toBe(6);
+          _context41.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();
+      }
+    }, _callee42);
+  })));
+  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"], {
+        label: "test-select-label",
+        options: groupOptions
+      })),
+      getByRole = _render45.getByRole,
+      queryByRole = _render45.queryByRole;
     var select = getByRole("combobox");
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
       code: "ArrowUp",
       keyCode: 38,
       charCode: 38
     });
-
+    expect(queryByRole("listbox")).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"], {
+        label: "test-select-label",
+        options: groupOptions
+      })),
+      getByRole = _render46.getByRole,
+      queryByRole = _render46.queryByRole;
+    var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
     });
-
     _react2.fireEvent.keyDown(select, {
       key: "ArrowUp",
       code: "ArrowUp",
       keyCode: 38,
       charCode: 38
     });
-
+    expect(queryByRole("listbox")).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"], {
+        label: "test-select-label",
+        options: groupOptions
+      })),
+      getByRole = _render47.getByRole,
+      queryByRole = _render47.queryByRole;
+    var select = getByRole("combobox");
     _react2.fireEvent.keyDown(select, {
       key: "ArrowDown",
       code: "ArrowDown",
       keyCode: 40,
       charCode: 40
     });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "20",
-      error: null
-    });
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Option 20")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByRole("option")[20].getAttribute("aria-selected")).toBe("true");
+    expect(queryByRole("listbox")).toBeTruthy();
+    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
-  test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
-    var onChange = jest.fn();
-
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render20.container,
-        getByText = _render20.getByText,
-        getByRole = _render20.getByRole,
-        getAllByRole = _render20.getAllByRole,
-        queryByRole = _render20.queryByRole;
-
+  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"], {
+        label: "test-select-label",
+        options: groupOptions
+      })),
+      getByRole = _render48.getByRole,
+      queryByRole = _render48.queryByRole;
     var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox")).toBeTruthy();
-
-    _userEvent["default"].type(searchInput, "08");
-
-    _userEvent["default"].click(getByRole("option"));
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "8",
-      error: null
+    _react2.fireEvent.keyDown(select, {
+      key: "ArrowUp",
+      code: "ArrowUp",
+      keyCode: 38,
+      charCode: 38
     });
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Option 08")).toBeTruthy();
-    expect(searchInput.value).toBe("");
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByRole("option")[7].getAttribute("aria-selected")).toBe("true");
-  });
-  test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
-    var onChange = jest.fn();
-
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render21.container,
-        getByText = _render21.getByText,
-        getByRole = _render21.getByRole;
-
-    var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox")).toBeTruthy();
-
-    _userEvent["default"].type(searchInput, "abc");
-
-    expect(getByText("No matches found")).toBeTruthy();
-  });
-  test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", function () {
-    var onChange = jest.fn();
-
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render22.container,
-        getByText = _render22.getByText,
-        getByRole = _render22.getByRole,
-        getAllByRole = _render22.getAllByRole;
-
-    var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox")).toBeTruthy();
-
-    _userEvent["default"].type(searchInput, "2");
-
-    expect(getByText("Option 02")).toBeTruthy();
-    expect(getByText("Option 12")).toBeTruthy();
-    expect(getByText("Option 20")).toBeTruthy();
-    expect(getAllByRole("option").length).toBe(3);
-
-    _userEvent["default"].click(select);
-
-    expect(searchInput.value).toBe("");
-  });
-  test("Non-Grouped Options: Searchable - Writing displays the listbox, if it was not open", function () {
-    var onChange = jest.fn();
-
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render23.container,
-        getByRole = _render23.getByRole,
-        queryByRole = _render23.queryByRole;
-
-    var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-
-    _userEvent["default"].type(searchInput, "2");
-
-    expect(getByRole("listbox")).toBeTruthy();
-  });
-  test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", function () {
-    var onChange = jest.fn();
-
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render24.container,
-        getByRole = _render24.getByRole,
-        queryByRole = _render24.queryByRole;
-
-    var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].type(searchInput, "Option 02");
-
     _react2.fireEvent.keyDown(select, {
-      key: "Esc",
-      code: "Esc",
-      keyCode: 27,
-      charCode: 27
+      key: "ArrowDown",
+      code: "ArrowDown",
+      keyCode: 40,
+      charCode: 40
     });
-
-    expect(searchInput.value).toBe("");
-    expect(queryByRole("listbox")).toBeFalsy();
-  });
-  test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", function () {
-    var onChange = jest.fn();
-
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render25.container,
-        getByRole = _render25.getByRole,
-        getAllByRole = _render25.getAllByRole,
-        queryByTitle = _render25.queryByTitle;
-
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].type(searchInput, "Option 02");
-
-    expect(getAllByRole("option").length).toBe(1);
-    expect(queryByTitle("Clear search")).toBeTruthy();
-    var clearAction = getByRole("button");
-    expect(clearAction).toBeTruthy();
-
-    _userEvent["default"].click(clearAction);
-
-    expect(getByRole("listbox")).toBeTruthy();
-    expect(getAllByRole("option").length).toBe(20);
-    expect(queryByTitle("Clear search")).toBeFalsy();
-  });
-  test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
-    var onChange = jest.fn();
-
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      name: "test",
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      multiple: true
-    })),
-        getByText = _render26.getByText,
-        getAllByText = _render26.getAllByText,
-        getByRole = _render26.getByRole,
-        getAllByRole = _render26.getAllByRole,
-        queryByRole = _render26.queryByRole,
-        container = _render26.container;
-
-    var select = getByRole("combobox");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
-
-    _userEvent["default"].click(getAllByRole("option")[10]); // expect(onChange).toHaveBeenCalledWith({ value: ["11"], error: null });
-
-
-    expect(queryByRole("listbox")).toBeTruthy();
-    expect(getAllByText("Option 11").length).toBe(2);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    }); // expect(onChange).toHaveBeenCalledWith({ value: ["11", "19"], error: null });
-
-
-    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");
-  });
-  test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", function () {
-    var onChange = jest.fn();
-
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options,
-      onChange: onChange,
-      multiple: true
-    })),
-        getByText = _render27.getByText,
-        queryByText = _render27.queryByText,
-        getByRole = _render27.getByRole,
-        getAllByRole = _render27.getAllByRole,
-        queryByRole = _render27.queryByRole,
-        getByTitle = _render27.getByTitle,
-        queryByTitle = _render27.queryByTitle;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[5]);
-
-    _userEvent["default"].click(getAllByRole("option")[8]);
-
-    _userEvent["default"].click(getAllByRole("option")[13]); // expect(onChange).toHaveBeenCalledWith({ value: ["6", "9", "14"], error: null });
-
-
-    expect(queryByRole("listbox")).toBeTruthy();
-    expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy();
-    expect(getByText("3", {
-      exact: true
-    })).toBeTruthy();
-
-    _userEvent["default"].click(getByTitle("Clear selection"));
-
-    expect(queryByRole("listbox")).toBeTruthy();
-    expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy();
-    expect(queryByText("3")).toBeFalsy();
-    expect(queryByTitle("Clear selection")).toBeFalsy();
-  });
-  test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
-    var onChange = jest.fn();
-
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      placeholder: "Choose an option",
-      options: single_options,
-      onChange: onChange,
-      multiple: true,
-      optional: true
-    })),
-        getByText = _render28.getByText,
-        getAllByText = _render28.getAllByText,
-        getByRole = _render28.getByRole,
-        getAllByRole = _render28.getAllByRole;
-
-    var select = getByRole("combobox");
-    expect(getByText("(Optional)")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByText("Choose an option").length).toBe(1);
-    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-
-    _userEvent["default"].click(getAllByRole("option")[0]); // expect(onChange).toHaveBeenCalledWith({ value: ["1"], error: null });
-
-
-    expect(getAllByText("Option 01").length).toBe(2);
-  });
-  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", function () {
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByText = _render29.getByText,
-        getByRole = _render29.getByRole,
-        getAllByRole = _render29.getAllByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[4]);
-
-    expect(getByText("Option 05")).toBeTruthy();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-4");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(getByText("Option 04")).toBeTruthy();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-3");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(getByText("Option 06")).toBeTruthy();
-  });
-  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", function () {
-    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: single_options
-    })),
-        getByText = _render30.getByText,
-        getByRole = _render30.getByRole,
-        getAllByRole = _render30.getAllByRole,
-        queryByRole = _render30.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[15]);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Option 16")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(select.getAttribute("aria-activedescendant")).toBeNull();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-15");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(getByText("Option 17")).toBeTruthy();
-  });
-  test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", function () {
-    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByText = _render31.getByText,
-        getByRole = _render31.getByRole,
-        getAllByRole = _render31.getAllByRole,
-        queryByRole = _render31.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    var listbox = getByRole("listbox");
-    expect(listbox).toBeTruthy();
-    expect(select.getAttribute("aria-expanded")).toBe("true");
-    expect(getByText("Colores")).toBeTruthy();
-    expect(getByText("Azul")).toBeTruthy();
-    expect(getByText("Negro")).toBeTruthy();
-    expect(getByText("Ciudades españolas")).toBeTruthy();
-    expect(getByText("Madrid")).toBeTruthy();
-    var groups = getAllByRole("group");
-    expect(groups.length).toBe(3);
-    var 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);
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(select.getAttribute("aria-expanded")).toBe("false");
-  });
-  test("Grouped Options - If an empty list of options in a group is passed, the select is rendered but doestn't open the listbox", function () {
-    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: [{
-        label: "Group 1",
-        options: []
-      }]
-    })),
-        getByRole = _render32.getByRole,
-        queryByRole = _render32.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(select.getAttribute("aria-expanded")).toBe("false");
-  });
-  test("Grouped Options - Click in an option selects it and closes the listbox", function () {
-    var onChange = jest.fn();
-
-    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      name: "test",
-      label: "test-select-label",
-      options: group_options,
-      onChange: onChange
-    })),
-        getByText = _render33.getByText,
-        getByRole = _render33.getByRole,
-        getAllByRole = _render33.getAllByRole,
-        queryByRole = _render33.queryByRole,
-        container = _render33.container;
-
-    var select = getByRole("combobox");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[8]);
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "oviedo",
-      error: null
-    });
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Oviedo")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByRole("option")[8].getAttribute("aria-selected")).toBe("true");
-    expect(submitInput.value).toBe("oviedo");
-  });
-  test("Grouped Options - Optional renders an empty first option (out of any group) with the placeholder as its label", function () {
-    var onChange = jest.fn();
-
-    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      placeholder: "Placeholder example",
-      options: group_options,
-      onChange: onChange,
-      optional: true
-    })),
-        getByRole = _render34.getByRole,
-        getAllByRole = _render34.getAllByRole,
-        getAllByText = _render34.getAllByText;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByText("Placeholder example").length).toBe(2);
-    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("true");
-
-    _userEvent["default"].click(getAllByRole("option")[0]);
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
-    });
-    expect(getAllByText("Placeholder example").length).toBe(1);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: null
-    });
-    expect(getAllByText("Placeholder example").length).toBe(1);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
-  });
-  test("Grouped Options - Renders icons correctly when passed with group options", function () {
-    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: grouped_icon_options,
-      optional: true
-    })),
-        getByRole = _render35.getByRole,
-        getAllByRole = _render35.getAllByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox").querySelectorAll("img").length).toBe(4);
-    expect(getAllByRole("option").length).toBe(11);
-  });
-  test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByRole = _render36.getByRole,
-        queryByRole = _render36.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(queryByRole("listbox")).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 _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByRole = _render37.getByRole,
-        queryByRole = _render37.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(queryByRole("listbox")).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 _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByRole = _render38.getByRole,
-        queryByRole = _render38.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(queryByRole("listbox")).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 _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByRole = _render39.getByRole,
-        queryByRole = _render39.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
     expect(queryByRole("listbox")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
-  test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
-    var onChange = jest.fn();
-
-    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options,
-      onChange: onChange,
-      optional: true
-    })),
-        getByText = _render40.getByText,
-        getByRole = _render40.getByRole,
-        getAllByRole = _render40.getAllByRole,
-        queryByRole = _render40.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "ebro",
-      error: null
-    });
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Ebro")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
-  });
-  test("Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
-    var onChange = jest.fn();
-
-    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render41.container,
-        getByText = _render41.getByText,
-        getByRole = _render41.getByRole,
-        getAllByRole = _render41.getAllByRole,
-        queryByRole = _render41.queryByRole;
-
-    var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox")).toBeTruthy();
-
-    _userEvent["default"].type(searchInput, "ro");
-
-    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();
-
-    _userEvent["default"].click(getAllByRole("option")[4]);
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "ebro",
-      error: null
-    });
-    expect(queryByRole("listbox")).toBeFalsy();
-    expect(getByText("Ebro")).toBeTruthy();
-    expect(searchInput.value).toBe("");
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByRole("option")[17].getAttribute("aria-selected")).toBe("true");
-  });
-  test("Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
-    var onChange = jest.fn();
-
-    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options,
-      onChange: onChange,
-      searchable: true
-    })),
-        container = _render42.container,
-        getByText = _render42.getByText,
-        getByRole = _render42.getByRole;
-
-    var select = getByRole("combobox");
-    var searchInput = container.querySelectorAll("input")[1];
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox")).toBeTruthy();
-
-    _userEvent["default"].type(searchInput, "very long string");
-
-    expect(getByText("No matches found")).toBeTruthy();
-  });
-  test("Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
-    var onChange = jest.fn();
-
-    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      name: "test",
-      label: "test-select-label",
-      options: group_options,
-      onChange: onChange,
-      multiple: true
-    })),
-        getByText = _render43.getByText,
-        getAllByText = _render43.getAllByText,
-        getByRole = _render43.getByRole,
-        getAllByRole = _render43.getAllByRole,
-        queryByRole = _render43.queryByRole,
-        container = _render43.container;
-
-    var select = getByRole("combobox");
-    var submitInput = container.querySelector("input[name=\"test\"]");
-
-    _userEvent["default"].click(select);
-
-    expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
-
-    _userEvent["default"].click(getAllByRole("option")[10]); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao"], error: null });
-
-
-    expect(queryByRole("listbox")).toBeTruthy();
-    expect(getAllByText("Bilbao").length).toBe(2);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    }); // expect(onChange).toHaveBeenCalledWith({ value: ["bilbao", "guadalquivir"], error: null });
-
-
-    expect(queryByRole("listbox")).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");
-  });
-  test("Grouped Options: Multiple selection - Clear action and selection indicator", function () {
-    var onChange = jest.fn();
-
-    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options,
-      onChange: onChange,
-      multiple: true
-    })),
-        getByText = _render44.getByText,
-        queryByText = _render44.queryByText,
-        getByRole = _render44.getByRole,
-        getAllByRole = _render44.getAllByRole,
-        queryByRole = _render44.queryByRole,
-        getByTitle = _render44.getByTitle,
-        queryByTitle = _render44.queryByTitle;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[5]);
-
-    _userEvent["default"].click(getAllByRole("option")[8]);
-
-    _userEvent["default"].click(getAllByRole("option")[13]);
-
-    _userEvent["default"].click(getAllByRole("option")[17]); // expect(onChange).toHaveBeenCalledWith({ value: ["blanco", "oviedo", "duero", "ebro"], error: null });
-
-
-    expect(queryByRole("listbox")).toBeTruthy();
-    expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
-    expect(getByText("4", {
-      exact: true
-    })).toBeTruthy();
-
-    _userEvent["default"].click(getByTitle("Clear selection"));
-
-    expect(queryByRole("listbox")).toBeTruthy();
-    expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
-    expect(queryByText("4")).toBeFalsy();
-    expect(queryByTitle("Clear selection")).toBeFalsy();
-  });
-  test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
-    var onChange = jest.fn();
-
-    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      placeholder: "Choose an option",
-      options: group_options,
-      onChange: onChange,
-      multiple: true,
-      optional: true
-    })),
-        getByText = _render45.getByText,
-        getAllByText = _render45.getAllByText,
-        getByRole = _render45.getByRole,
-        getAllByRole = _render45.getAllByRole;
-
-    var select = getByRole("combobox");
-    expect(getByText("(Optional)")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(getAllByText("Choose an option").length).toBe(1);
-    expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-
-    _userEvent["default"].click(getAllByRole("option")[0]); // expect(onChange).toHaveBeenCalledWith({ value: ["azul"], error: null });
-
-
-    expect(getAllByText("Azul").length).toBe(2);
-  });
-  test("Grouped Options - If an options was previously selected when its opened (by key press), the visual focus appears always in the selected option", function () {
-    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByText = _render46.getByText,
-        getByRole = _render46.getByRole,
-        getAllByRole = _render46.getAllByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[2]);
-
-    expect(getByText("Rosa")).toBeTruthy();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-2");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(getByText("Rojo")).toBeTruthy();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-1");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(getByText("Verde")).toBeTruthy();
-  });
-  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", function () {
-    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      options: group_options
-    })),
-        getByText = _render47.getByText,
-        getByRole = _render47.getByRole,
-        getAllByRole = _render47.getAllByRole,
-        queryByRole = _render47.queryByRole;
-
-    var select = getByRole("combobox");
-
-    _userEvent["default"].click(select);
-
-    _userEvent["default"].click(getAllByRole("option")[17]);
-
-    expect(getByText("Ebro")).toBeTruthy();
-
-    _userEvent["default"].click(select);
-
-    expect(select.getAttribute("aria-activedescendant")).toBeNull();
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
-
-    _userEvent["default"].click(select);
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowDown",
-      code: "ArrowDown",
-      keyCode: 40,
-      charCode: 40
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "ArrowUp",
-      code: "ArrowUp",
-      keyCode: 38,
-      charCode: 38
-    });
-
-    _react2.fireEvent.keyDown(select, {
-      key: "Enter",
-      code: "Enter",
-      keyCode: 13,
-      charCode: 13
-    });
-
-    expect(getByText("Azul")).toBeTruthy();
-  });
-  test("Renders with correct aria attributes", function () {
-    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      label: "test-select-label",
-      placeholder: "Example",
-      options: single_options
-    })),
-        getByText = _render48.getByText,
-        getByRole = _render48.getByRole;
-
-    var select = getByRole("combobox");
-    var label = getByText("test-select-label");
-    expect(select.getAttribute("aria-disabled")).toBe("false");
-    expect(select.getAttribute("aria-haspopup")).toBe("listbox");
-    expect(select.getAttribute("aria-expanded")).toBe("false");
-    expect(select.getAttribute("aria-required")).toBe("true");
-    expect(select.getAttribute("aria-labelledby")).toBe(label.id);
-    expect(select.getAttribute("aria-activedescendant")).toBeNull();
-    expect(select.getAttribute("aria-invalid")).toBe("false");
-
-    _userEvent["default"].click(select);
-
-    var list = getByRole("listbox");
-    expect(select.getAttribute("aria-controls")).toBe(list.id);
-    expect(list.getAttribute("aria-multiselectable")).toBe("false");
-  });
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render49 = (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;
+          select = getByRole("combobox");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(onChange).toHaveBeenCalledWith({
+            value: "ebro"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Ebro")).toBeTruthy();
+          _context43.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();
+      }
+    }, _callee43);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render50 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context44.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          expect(getByRole("listbox")).toBeTruthy();
+          _context44.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;
+          return _userEvent["default"].click(getAllByRole("option")[4]);
+        case 16:
+          expect(onChange).toHaveBeenCalledWith({
+            value: "ebro"
+          });
+          expect(queryByRole("listbox")).toBeFalsy();
+          expect(getByText("Ebro")).toBeTruthy();
+          expect(searchInput.value).toBe("");
+          _context44.next = 22;
+          return _userEvent["default"].click(select);
+        case 22:
+          expect(getAllByRole("option")[17].getAttribute("aria-selected")).toBe("true");
+        case 23:
+        case "end":
+          return _context44.stop();
+      }
+    }, _callee44);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render51 = (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;
+          select = getByRole("combobox");
+          searchInput = container.querySelectorAll("input")[1];
+          _context45.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          expect(getByRole("listbox")).toBeTruthy();
+          _context45.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();
+      }
+    }, _callee45);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render52 = (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;
+          select = getByRole("combobox");
+          submitInput = container.querySelector("input[name=\"test\"]");
+          _context46.next = 6;
+          return _userEvent["default"].click(select);
+        case 6:
+          expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
+          _context46.next = 9;
+          return _userEvent["default"].click(getAllByRole("option")[10]);
+        case 9:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["bilbao"]
+          });
+          expect(queryByRole("listbox")).toBeTruthy();
+          expect(getAllByText("Bilbao").length).toBe(2);
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["bilbao", "guadalquivir"]
+          });
+          expect(queryByRole("listbox")).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 "end":
+          return _context46.stop();
+      }
+    }, _callee46);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render53 = (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;
+          select = getByRole("combobox");
+          _context47.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          _context47.next = 7;
+          return _userEvent["default"].click(getAllByRole("option")[5]);
+        case 7:
+          _context47.next = 9;
+          return _userEvent["default"].click(getAllByRole("option")[8]);
+        case 9:
+          _context47.next = 11;
+          return _userEvent["default"].click(getAllByRole("option")[13]);
+        case 11:
+          _context47.next = 13;
+          return _userEvent["default"].click(getAllByRole("option")[17]);
+        case 13:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["blanco", "oviedo", "duero", "ebro"]
+          });
+          expect(queryByRole("listbox")).toBeTruthy();
+          expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
+          expect(getByText("4", {
+            exact: true
+          })).toBeTruthy();
+          _context47.next = 19;
+          return _userEvent["default"].click(getByTitle("Clear selection"));
+        case 19:
+          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
+          expect(queryByText("4")).toBeFalsy();
+          expect(queryByTitle("Clear selection")).toBeFalsy();
+        case 23:
+        case "end":
+          return _context47.stop();
+      }
+    }, _callee47);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render54 = (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;
+          select = getByRole("combobox");
+          expect(getByText("(Optional)")).toBeTruthy();
+          _context48.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;
+          return _userEvent["default"].click(getAllByRole("option")[0]);
+        case 10:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["azul"]
+          });
+          expect(getAllByText("Azul").length).toBe(2);
+        case 12:
+        case "end":
+          return _context48.stop();
+      }
+    }, _callee48);
+  })));
+  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) {
+        case 0:
+          _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: groupOptions
+          })), getByText = _render55.getByText, getByRole = _render55.getByRole, getAllByRole = _render55.getAllByRole;
+          select = getByRole("combobox");
+          _context49.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          _context49.next = 6;
+          return _userEvent["default"].click(getAllByRole("option")[2]);
+        case 6:
+          expect(getByText("Rosa")).toBeTruthy();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-2");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(getByText("Rojo")).toBeTruthy();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-1");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(getByText("Verde")).toBeTruthy();
+        case 18:
+        case "end":
+          return _context49.stop();
+      }
+    }, _callee49);
+  })));
+  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) {
+        case 0:
+          _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+            label: "test-select-label",
+            options: groupOptions
+          })), getByText = _render56.getByText, getByRole = _render56.getByRole, getAllByRole = _render56.getAllByRole;
+          select = getByRole("combobox");
+          _context50.next = 4;
+          return _userEvent["default"].click(select);
+        case 4:
+          _context50.next = 6;
+          return _userEvent["default"].click(getAllByRole("option")[17]);
+        case 6:
+          expect(getByText("Ebro")).toBeTruthy();
+          _context50.next = 9;
+          return _userEvent["default"].click(select);
+        case 9:
+          expect(select.getAttribute("aria-activedescendant")).toBeNull();
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
+          _context50.next = 14;
+          return _userEvent["default"].click(select);
+        case 14:
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowDown",
+            code: "ArrowDown",
+            keyCode: 40,
+            charCode: 40
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "ArrowUp",
+            code: "ArrowUp",
+            keyCode: 38,
+            charCode: 38
+          });
+          _react2.fireEvent.keyDown(select, {
+            key: "Enter",
+            code: "Enter",
+            keyCode: 13,
+            charCode: 13
+          });
+          expect(getByText("Azul")).toBeTruthy();
+        case 21:
+        case "end":
+          return _context50.stop();
+      }
+    }, _callee50);
+  })));
+  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) {
+        case 0:
+          onChange = jest.fn();
+          _render57 = (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;
+          select = getByRole("combobox");
+          _context51.next = 5;
+          return _userEvent["default"].click(select);
+        case 5:
+          _context51.next = 7;
+          return _userEvent["default"].click(getAllByRole("option")[5]);
+        case 7:
+          _context51.next = 9;
+          return _userEvent["default"].click(getAllByRole("option")[8]);
+        case 9:
+          _context51.next = 11;
+          return _userEvent["default"].click(getAllByRole("option")[13]);
+        case 11:
+          expect(onChange).toHaveBeenCalledWith({
+            value: ["6", "9", "14"]
+          });
+          _context51.next = 14;
+          return _userEvent["default"].click(getByTitle("Clear selection"));
+        case 14:
+          expect(onChange).toHaveBeenCalledWith({
+            value: []
+          });
+        case 15:
+        case "end":
+          return _context51.stop();
+      }
+    }, _callee51);
+  })));
 });