@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/select/Select.test.js

@@ -1,12 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 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 _Select = _interopRequireDefault(require("./Select.tsx"));
+
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -21,10 +28,12 @@ global.DOMRect = {
     };
   }
 };
+
 global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
+
   (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
@@ -37,7 +46,8 @@ global.ResizeObserver = /*#__PURE__*/function () {
   }]);
   return ResizeObserver;
 }();
-var single_options = [{
+
+var singleOptions = [{
   label: "Option 01",
   value: "1"
 }, {
@@ -98,7 +108,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", {
@@ -162,7 +172,7 @@ 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"
@@ -182,7 +192,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",
@@ -246,7 +256,7 @@ var group_options = [{
     value: "ebro"
   }]
 }];
-var grouped_icon_options = [{
+var groupedIconOptions = [{
   label: "Social Media",
   options: [{
     label: "Instagram",
@@ -293,24 +303,28 @@ var grouped_icon_options = [{
 describe("Select component tests", function () {
   test("When clicking the label, the focus goes to the select", 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;
+      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");
+
     _userEvent["default"].click(label);
+
     expect(document.activeElement).toEqual(select);
   });
   test("Renders with correct aria attributes when is in error state", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "Error label",
-        error: "Error message."
-      })),
-      getByText = _render2.getByText,
-      getByRole = _render2.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();
@@ -320,12 +334,13 @@ describe("Select component tests", function () {
   });
   test("Renders with correct aria attributes", function () {
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        placeholder: "Example",
-        options: single_options
-      })),
-      getByText = _render3.getByText,
-      getByRole = _render3.getByRole;
+      label: "test-select-label",
+      placeholder: "Example",
+      options: singleOptions
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
     var select = getByRole("combobox");
     var label = getByText("test-select-label");
     expect(select.getAttribute("aria-disabled")).toBe("false");
@@ -335,57 +350,69 @@ describe("Select component tests", function () {
     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("Single selection: Renders with correct default value", function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        name: "test",
-        defaultValue: "4",
-        options: single_options
-      })),
-      getByText = _render4.getByText,
-      getByRole = _render4.getByRole,
-      getAllByRole = _render4.getAllByRole,
-      queryByRole = _render4.queryByRole,
-      container = _render4.container;
+      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;
+
     var select = getByRole("combobox");
     var submitInput = container.querySelector("input[name=\"test\"]");
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Option 04")).toBeTruthy();
     expect(submitInput.value).toBe("4");
+
     _userEvent["default"].click(select);
+
     expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
+
     _userEvent["default"].click(getAllByRole("option")[7]);
+
     expect(getByText("Option 08")).toBeTruthy();
     expect(submitInput.value).toBe("8");
   });
   test("Multiple selection: Renders with correct default value", function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        name: "test",
-        defaultValue: ["4", "2", "6"],
-        options: single_options,
-        multiple: true
-      })),
-      getByText = _render5.getByText,
-      getByRole = _render5.getByRole,
-      getAllByRole = _render5.getAllByRole,
-      queryByRole = _render5.queryByRole,
-      container = _render5.container;
+      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;
+
     var select = getByRole("combobox");
     var 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");
+
     _userEvent["default"].click(select);
+
     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");
+
     _userEvent["default"].click(getAllByRole("option")[2]);
+
     expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
     expect(submitInput.value).toBe("4,2,6,3");
   });
@@ -398,87 +425,105 @@ describe("Select component tests", function () {
         options: "1,5,3"
       });
     });
+
     var _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: single_options,
-        multiple: true
-      }), /*#__PURE__*/_react["default"].createElement("button", {
-        type: "submit"
-      }, "Submit"))),
-      getByText = _render6.getByText,
-      getByRole = _render6.getByRole,
-      getAllByRole = _render6.getAllByRole;
+      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;
+
     var select = getByRole("combobox");
     var submit = getByText("Submit");
+
     _userEvent["default"].click(select);
+
     _userEvent["default"].click(getAllByRole("option")[2]);
+
     _userEvent["default"].click(submit);
   });
   test("Disabled select - Cannot gain focus or open the listbox via click", function () {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        value: ["1", "2"],
-        options: single_options,
-        disabled: true
-      })),
-      getByRole = _render7.getByRole,
-      queryByRole = _render7.queryByRole;
+      label: "test-select-label",
+      value: ["1", "2"],
+      options: singleOptions,
+      disabled: true
+    })),
+        getByRole = _render7.getByRole,
+        queryByRole = _render7.queryByRole;
+
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-disabled")).toBe("true");
+
     _userEvent["default"].click(select);
+
     expect(queryByRole("listbox")).toBeFalsy();
     expect(document.activeElement === select).toBeFalsy();
   });
   test("Disabled select - Clear all options action must be shown but not clickable", function () {
     var _render8 = (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 = _render8.getByRole,
-      getByText = _render8.getByText;
+      label: "test-select-label",
+      value: ["1", "2"],
+      options: singleOptions,
+      disabled: true,
+      searchable: true,
+      multiple: true
+    })),
+        getByRole = _render8.getByRole,
+        getByText = _render8.getByText;
+
     _userEvent["default"].click(getByRole("button"));
+
     expect(getByText("Option 01, Option 02")).toBeTruthy();
   });
   test("Disabled select - Does not call onBlur event", function () {
     var onBlur = jest.fn();
+
     var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        disabled: true,
-        onBlur: onBlur
-      })),
-      getByRole = _render9.getByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      disabled: true,
+      onBlur: onBlur
+    })),
+        getByRole = _render9.getByRole;
+
     var select = getByRole("combobox");
+
     _userEvent["default"].click(select);
+
     _react2.fireEvent.keyDown(getByRole("combobox"), {
       key: "Tab",
       code: "Tab",
       keyCode: 9,
       charCode: 9
     });
+
     expect(onBlur).not.toHaveBeenCalled();
   });
   test("Disabled select - When the component gains the focus, the listbox does not open", function () {
     var _render10 = (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 = _render10.getByRole,
-      queryByRole = _render10.queryByRole;
+      label: "test-select-label",
+      value: ["1", "2"],
+      options: singleOptions,
+      disabled: true,
+      searchable: true,
+      multiple: true
+    })),
+        getByRole = _render10.getByRole,
+        queryByRole = _render10.queryByRole;
+
     var select = getByRole("combobox");
+
     _react2.fireEvent.focus(select);
+
     expect(queryByRole("listbox")).toBeFalsy();
     expect(document.activeElement === select).toBeFalsy();
   });
@@ -489,47 +534,60 @@ describe("Select component tests", function () {
       var formProps = Object.fromEntries(formData);
       expect(formProps).toStrictEqual({});
     });
+
     var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
-        onSubmit: handlerOnSubmit
-      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        defaultValue: "1",
-        options: single_options,
-        disabled: true
-      }), /*#__PURE__*/_react["default"].createElement("button", {
-        type: "submit"
-      }, "Submit"))),
-      getByText = _render11.getByText;
+      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 = _render11.getByText;
+
     var submit = getByText("Submit");
+
     _userEvent["default"].click(submit);
   });
   test("Controlled - Single selection - Not optional constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
+
     var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        onBlur: onBlur
-      })),
-      getByRole = _render12.getByRole,
-      getAllByRole = _render12.getAllByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByRole = _render12.getByRole,
+        getAllByRole = _render12.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"
     });
+
     _react2.fireEvent.blur(select);
+
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "1"
@@ -538,45 +596,62 @@ describe("Select component tests", function () {
   test("Controlled - Multiple selection - Not optional constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
+
     var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        onBlur: onBlur,
-        multiple: true
-      })),
-      getByRole = _render13.getByRole,
-      getAllByRole = _render13.getAllByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      onBlur: onBlur,
+      multiple: true
+    })),
+        getByRole = _render13.getByRole,
+        getAllByRole = _render13.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]);
+
     _userEvent["default"].click(getAllByRole("option")[1]);
+
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: ["1", "2"]
     });
+
     _react2.fireEvent.blur(select);
+
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: ["1", "2"]
     });
+
     _userEvent["default"].click(select);
+
     _userEvent["default"].click(getAllByRole("option")[0]);
+
     _userEvent["default"].click(getAllByRole("option")[1]);
+
     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: [],
@@ -586,18 +661,23 @@ describe("Select component tests", function () {
   test("Controlled - Optional constraint", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
+
     var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        onBlur: onBlur,
-        optional: true
-      })),
-      getByRole = _render14.getByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      onBlur: onBlur,
+      optional: true
+    })),
+        getByRole = _render14.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: ""
@@ -606,15 +686,18 @@ describe("Select component tests", function () {
   });
   test("Non-Grouped Options - Opens listbox and renders correctly or closes it with a click on select", function () {
     var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByText = _render15.getByText,
-      getByRole = _render15.getByRole,
-      getAllByRole = _render15.getAllByRole,
-      queryByRole = _render15.queryByRole;
+      label: "test-select-label",
+      options: singleOptions
+    })),
+        getByText = _render15.getByText,
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        queryByRole = _render15.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();
@@ -622,451 +705,562 @@ describe("Select component tests", function () {
     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 _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: []
-      })),
-      getByRole = _render16.getByRole,
-      queryByRole = _render16.queryByRole;
+      label: "test-select-label",
+      options: []
+    })),
+        getByRole = _render16.getByRole,
+        queryByRole = _render16.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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        name: "test",
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange
-      })),
-      getByText = _render17.getByText,
-      getByRole = _render17.getByRole,
-      getAllByRole = _render17.getAllByRole,
-      queryByRole = _render17.queryByRole,
-      container = _render17.container;
+      name: "test",
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange
+    })),
+        getByText = _render17.getByText,
+        getByRole = _render17.getByRole,
+        getAllByRole = _render17.getAllByRole,
+        queryByRole = _render17.queryByRole,
+        container = _render17.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"
     });
     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 (selected by default) with the placeholder as its label", function () {
     var onChange = jest.fn();
+
     var _render18 = (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 = _render18.getByRole,
-      getAllByRole = _render18.getAllByRole,
-      getAllByText = _render18.getAllByText;
+      label: "test-select-label",
+      placeholder: "Choose an option",
+      options: singleOptions,
+      onChange: onChange,
+      optional: true
+    })),
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole,
+        getAllByText = _render18.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: ""
     });
     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");
   });
   test("Non-Grouped Options - Filtering options never affects the optional item until there are no coincidence", function () {
     var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        placeholder: "Placeholder example",
-        options: single_options,
-        optional: true,
-        searchable: true
-      })),
-      getByRole = _render19.getByRole,
-      getAllByRole = _render19.getAllByRole,
-      getByText = _render19.getByText,
-      queryByText = _render19.queryByText,
-      container = _render19.container;
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: singleOptions,
+      optional: true,
+      searchable: true
+    })),
+        getByRole = _render19.getByRole,
+        getAllByRole = _render19.getAllByRole,
+        getByText = _render19.getByText,
+        queryByText = _render19.queryByText,
+        container = _render19.container;
+
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
+
     _userEvent["default"].click(select);
+
     _userEvent["default"].type(searchInput, "1");
+
     expect(getByText("Placeholder example")).toBeTruthy();
     expect(getAllByRole("option").length).toBe(12);
+
     _userEvent["default"].type(searchInput, "123");
+
     expect(queryByText("Placeholder example")).toBeFalsy();
     expect(getByText("No matches found")).toBeTruthy();
   });
   test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
     var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: svg_icon_options
-      })),
-      getByRole = _render20.getByRole,
-      getAllByRole = _render20.getAllByRole;
+      label: "test-select-label",
+      options: svgIconOptions
+    })),
+        getByRole = _render20.getByRole,
+        getAllByRole = _render20.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 _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: url_icon_options,
-        optional: true
-      })),
-      getByRole = _render21.getByRole,
-      getAllByRole = _render21.getAllByRole;
+      label: "test-select-label",
+      options: urlIconOptions,
+      optional: true
+    })),
+        getByRole = _render21.getByRole,
+        getAllByRole = _render21.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: Arrow up key - Opens the listbox and visually focus the last option", function () {
     var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByRole = _render22.getByRole,
-      queryByRole = _render22.queryByRole;
+      label: "test-select-label",
+      options: singleOptions
+    })),
+        getByRole = _render22.getByRole,
+        queryByRole = _render22.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 _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByRole = _render23.getByRole,
-      queryByRole = _render23.queryByRole;
+      label: "test-select-label",
+      options: singleOptions
+    })),
+        getByRole = _render23.getByRole,
+        queryByRole = _render23.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 _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByRole = _render24.getByRole,
-      queryByRole = _render24.queryByRole;
+      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
     });
+
     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 _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByRole = _render25.getByRole,
-      queryByRole = _render25.queryByRole;
+      label: "test-select-label",
+      options: singleOptions
+    })),
+        getByRole = _render25.getByRole,
+        queryByRole = _render25.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 _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        optional: true
-      })),
-      getByText = _render26.getByText,
-      getByRole = _render26.getByRole,
-      getAllByRole = _render26.getAllByRole,
-      queryByRole = _render26.queryByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      optional: true
+    })),
+        getByText = _render26.getByText,
+        getByRole = _render26.getByRole,
+        getAllByRole = _render26.getAllByRole,
+        queryByRole = _render26.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: "20"
     });
     expect(queryByRole("listbox")).toBeFalsy();
     expect(getByText("Option 20")).toBeTruthy();
+
     _userEvent["default"].click(select);
+
     expect(getAllByRole("option")[20].getAttribute("aria-selected")).toBe("true");
   });
   test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", 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,
-        searchable: true
-      })),
-      container = _render27.container,
-      getByText = _render27.getByText,
-      getByRole = _render27.getByRole,
-      getAllByRole = _render27.getAllByRole,
-      queryByRole = _render27.queryByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render27.container,
+        getByText = _render27.getByText,
+        getByRole = _render27.getByRole,
+        getAllByRole = _render27.getAllByRole,
+        queryByRole = _render27.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"
     });
     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 _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render28.container,
-      getByText = _render28.getByText,
-      getByRole = _render28.getByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render28.container,
+        getByText = _render28.getByText,
+        getByRole = _render28.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 _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render29.container,
-      getByText = _render29.getByText,
-      getByRole = _render29.getByRole,
-      getAllByRole = _render29.getAllByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render29.container,
+        getByText = _render29.getByText,
+        getByRole = _render29.getByRole,
+        getAllByRole = _render29.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 _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render30.container,
-      getByRole = _render30.getByRole,
-      queryByRole = _render30.queryByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render30.container,
+        getByRole = _render30.getByRole,
+        queryByRole = _render30.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 _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render31.container,
-      getByRole = _render31.getByRole,
-      queryByRole = _render31.queryByRole;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render31.container,
+        getByRole = _render31.getByRole,
+        queryByRole = _render31.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
     });
+
     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 _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render32.container,
-      getByRole = _render32.getByRole,
-      getAllByRole = _render32.getAllByRole,
-      queryByTitle = _render32.queryByTitle;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render32.container,
+        getByRole = _render32.getByRole,
+        getAllByRole = _render32.getAllByRole,
+        queryByTitle = _render32.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 _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        name: "test",
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        multiple: true
-      })),
-      getByText = _render33.getByText,
-      getAllByText = _render33.getAllByText,
-      getByRole = _render33.getByRole,
-      getAllByRole = _render33.getAllByRole,
-      queryByRole = _render33.queryByRole,
-      container = _render33.container;
+      name: "test",
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render33.getByText,
+        getAllByText = _render33.getAllByText,
+        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);
+
     expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
+
     _userEvent["default"].click(getAllByRole("option")[10]);
+
     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"]
     });
@@ -1078,24 +1272,31 @@ describe("Select component tests", function () {
   });
   test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", function () {
     var onChange = jest.fn();
+
     var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        multiple: true
-      })),
-      getByText = _render34.getByText,
-      queryByText = _render34.queryByText,
-      getByRole = _render34.getByRole,
-      getAllByRole = _render34.getAllByRole,
-      queryByRole = _render34.queryByRole,
-      getByTitle = _render34.getByTitle,
-      queryByTitle = _render34.queryByTitle;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render34.getByText,
+        queryByText = _render34.queryByText,
+        getByRole = _render34.getByRole,
+        getAllByRole = _render34.getAllByRole,
+        queryByRole = _render34.queryByRole,
+        getByTitle = _render34.getByTitle,
+        queryByTitle = _render34.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"]
     });
@@ -1104,7 +1305,9 @@ describe("Select component tests", function () {
     expect(getByText("3", {
       exact: true
     })).toBeTruthy();
+
     _userEvent["default"].click(getByTitle("Clear selection"));
+
     expect(onChange).toHaveBeenCalledWith({
       value: [],
       error: "This field is required. Please, enter a value."
@@ -1116,24 +1319,30 @@ describe("Select component tests", function () {
   });
   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 _render35 = (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 = _render35.getByText,
-      getAllByText = _render35.getAllByText,
-      getByRole = _render35.getByRole,
-      getAllByRole = _render35.getAllByRole;
+      label: "test-select-label",
+      placeholder: "Choose an option",
+      options: singleOptions,
+      onChange: onChange,
+      multiple: true,
+      optional: true
+    })),
+        getByText = _render35.getByText,
+        getAllByText = _render35.getAllByText,
+        getByRole = _render35.getByRole,
+        getAllByRole = _render35.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"]
     });
@@ -1141,132 +1350,167 @@ describe("Select component tests", function () {
   });
   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 _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByText = _render36.getByText,
-      getByRole = _render36.getByRole,
-      getAllByRole = _render36.getAllByRole;
+      label: "test-select-label",
+      options: singleOptions
+    })),
+        getByText = _render36.getByText,
+        getByRole = _render36.getByRole,
+        getAllByRole = _render36.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 _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options
-      })),
-      getByText = _render37.getByText,
-      getByRole = _render37.getByRole,
-      getAllByRole = _render37.getAllByRole,
-      queryByRole = _render37.queryByRole;
+      label: "test-select-label",
+      options: singleOptions
+    })),
+        getByText = _render37.getByText,
+        getByRole = _render37.getByRole,
+        getAllByRole = _render37.getAllByRole,
+        queryByRole = _render37.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 _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByText = _render38.getByText,
-      getByRole = _render38.getByRole,
-      getAllByRole = _render38.getAllByRole,
-      queryByRole = _render38.queryByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByText = _render38.getByText,
+        getByRole = _render38.getByRole,
+        getAllByRole = _render38.getAllByRole,
+        queryByRole = _render38.queryByRole;
+
     var select = getByRole("combobox");
+
     _userEvent["default"].click(select);
+
     var listbox = getByRole("listbox");
     expect(listbox).toBeTruthy();
     expect(select.getAttribute("aria-expanded")).toBe("true");
@@ -1282,358 +1526,441 @@ describe("Select component tests", function () {
     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 _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: [{
-          label: "Group 1",
-          options: []
-        }]
-      })),
-      getByRole = _render39.getByRole,
-      queryByRole = _render39.queryByRole;
+      label: "test-select-label",
+      options: [{
+        label: "Group 1",
+        options: []
+      }]
+    })),
+        getByRole = _render39.getByRole,
+        queryByRole = _render39.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 _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        name: "test",
-        label: "test-select-label",
-        options: group_options,
-        onChange: onChange
-      })),
-      getByText = _render40.getByText,
-      getByRole = _render40.getByRole,
-      getAllByRole = _render40.getAllByRole,
-      queryByRole = _render40.queryByRole,
-      container = _render40.container;
+      name: "test",
+      label: "test-select-label",
+      options: groupOptions,
+      onChange: onChange
+    })),
+        getByText = _render40.getByText,
+        getByRole = _render40.getByRole,
+        getAllByRole = _render40.getAllByRole,
+        queryByRole = _render40.queryByRole,
+        container = _render40.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"
     });
     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 _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        placeholder: "Placeholder example",
-        options: group_options,
-        onChange: onChange,
-        optional: true
-      })),
-      getByRole = _render41.getByRole,
-      getAllByRole = _render41.getAllByRole,
-      getAllByText = _render41.getAllByText;
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: groupOptions,
+      onChange: onChange,
+      optional: true
+    })),
+        getByRole = _render41.getByRole,
+        getAllByRole = _render41.getAllByRole,
+        getAllByText = _render41.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: ""
     });
     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");
   });
   test("Grouped Options - Filtering options never affects the optional item until there are no coincidence", function () {
     var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        placeholder: "Placeholder example",
-        options: group_options,
-        optional: true,
-        searchable: true
-      })),
-      getByRole = _render42.getByRole,
-      getAllByRole = _render42.getAllByRole,
-      getByText = _render42.getByText,
-      queryByText = _render42.queryByText,
-      container = _render42.container;
+      label: "test-select-label",
+      placeholder: "Placeholder example",
+      options: groupOptions,
+      optional: true,
+      searchable: true
+    })),
+        getByRole = _render42.getByRole,
+        getAllByRole = _render42.getAllByRole,
+        getByText = _render42.getByText,
+        queryByText = _render42.queryByText,
+        container = _render42.container;
+
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
+
     _userEvent["default"].click(select);
+
     _userEvent["default"].type(searchInput, "ro");
+
     expect(getByText("Placeholder example")).toBeTruthy();
     expect(getAllByRole("option").length).toBe(6);
+
     _userEvent["default"].type(searchInput, "roro");
+
     expect(queryByText("Placeholder example")).toBeFalsy();
     expect(getByText("No matches found")).toBeTruthy();
   });
   test("Grouped Options - Renders icons correctly when passed with group options", function () {
     var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: grouped_icon_options,
-        optional: true
-      })),
-      getByRole = _render43.getByRole,
-      getAllByRole = _render43.getAllByRole;
+      label: "test-select-label",
+      options: groupedIconOptions,
+      optional: true
+    })),
+        getByRole = _render43.getByRole,
+        getAllByRole = _render43.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 _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByRole = _render44.getByRole,
-      queryByRole = _render44.queryByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByRole = _render44.getByRole,
+        queryByRole = _render44.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 _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByRole = _render45.getByRole,
-      queryByRole = _render45.queryByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByRole = _render45.getByRole,
+        queryByRole = _render45.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 _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByRole = _render46.getByRole,
-      queryByRole = _render46.queryByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByRole = _render46.getByRole,
+        queryByRole = _render46.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 _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByRole = _render47.getByRole,
-      queryByRole = _render47.queryByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByRole = _render47.getByRole,
+        queryByRole = _render47.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 _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options,
-        onChange: onChange,
-        optional: true
-      })),
-      getByText = _render48.getByText,
-      getByRole = _render48.getByRole,
-      getAllByRole = _render48.getAllByRole,
-      queryByRole = _render48.queryByRole;
+      label: "test-select-label",
+      options: groupOptions,
+      onChange: onChange,
+      optional: true
+    })),
+        getByText = _render48.getByText,
+        getByRole = _render48.getByRole,
+        getAllByRole = _render48.getAllByRole,
+        queryByRole = _render48.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"
     });
     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 _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render49.container,
-      getByText = _render49.getByText,
-      getByRole = _render49.getByRole,
-      getAllByRole = _render49.getAllByRole,
-      queryByRole = _render49.queryByRole;
+      label: "test-select-label",
+      options: groupOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render49.container,
+        getByText = _render49.getByText,
+        getByRole = _render49.getByRole,
+        getAllByRole = _render49.getAllByRole,
+        queryByRole = _render49.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"
     });
     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 _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options,
-        onChange: onChange,
-        searchable: true
-      })),
-      container = _render50.container,
-      getByText = _render50.getByText,
-      getByRole = _render50.getByRole;
+      label: "test-select-label",
+      options: groupOptions,
+      onChange: onChange,
+      searchable: true
+    })),
+        container = _render50.container,
+        getByText = _render50.getByText,
+        getByRole = _render50.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 _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        name: "test",
-        label: "test-select-label",
-        options: group_options,
-        onChange: onChange,
-        multiple: true
-      })),
-      getByText = _render51.getByText,
-      getAllByText = _render51.getAllByText,
-      getByRole = _render51.getByRole,
-      getAllByRole = _render51.getAllByRole,
-      queryByRole = _render51.queryByRole,
-      container = _render51.container;
+      name: "test",
+      label: "test-select-label",
+      options: groupOptions,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render51.getByText,
+        getAllByText = _render51.getAllByText,
+        getByRole = _render51.getByRole,
+        getAllByRole = _render51.getAllByRole,
+        queryByRole = _render51.queryByRole,
+        container = _render51.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"]
     });
     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"]
     });
@@ -1645,25 +1972,33 @@ describe("Select component tests", function () {
   });
   test("Grouped Options: Multiple selection - Clear action and selection indicator", function () {
     var onChange = jest.fn();
+
     var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options,
-        onChange: onChange,
-        multiple: true
-      })),
-      getByText = _render52.getByText,
-      queryByText = _render52.queryByText,
-      getByRole = _render52.getByRole,
-      getAllByRole = _render52.getAllByRole,
-      queryByRole = _render52.queryByRole,
-      getByTitle = _render52.getByTitle,
-      queryByTitle = _render52.queryByTitle;
+      label: "test-select-label",
+      options: groupOptions,
+      onChange: onChange,
+      multiple: true
+    })),
+        getByText = _render52.getByText,
+        queryByText = _render52.queryByText,
+        getByRole = _render52.getByRole,
+        getAllByRole = _render52.getAllByRole,
+        queryByRole = _render52.queryByRole,
+        getByTitle = _render52.getByTitle,
+        queryByTitle = _render52.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"]
     });
@@ -1672,7 +2007,9 @@ describe("Select component tests", function () {
     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();
@@ -1680,24 +2017,30 @@ describe("Select component tests", function () {
   });
   test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", function () {
     var onChange = jest.fn();
+
     var _render53 = (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 = _render53.getByText,
-      getAllByText = _render53.getAllByText,
-      getByRole = _render53.getByRole,
-      getAllByRole = _render53.getAllByRole;
+      label: "test-select-label",
+      placeholder: "Choose an option",
+      options: groupOptions,
+      onChange: onChange,
+      multiple: true,
+      optional: true
+    })),
+        getByText = _render53.getByText,
+        getAllByText = _render53.getAllByText,
+        getByRole = _render53.getByRole,
+        getAllByRole = _render53.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"]
     });
@@ -1705,139 +2048,179 @@ describe("Select component tests", function () {
   });
   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 _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByText = _render54.getByText,
-      getByRole = _render54.getByRole,
-      getAllByRole = _render54.getAllByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByText = _render54.getByText,
+        getByRole = _render54.getByRole,
+        getAllByRole = _render54.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 _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: group_options
-      })),
-      getByText = _render55.getByText,
-      getByRole = _render55.getByRole,
-      getAllByRole = _render55.getAllByRole;
+      label: "test-select-label",
+      options: groupOptions
+    })),
+        getByText = _render55.getByText,
+        getByRole = _render55.getByRole,
+        getAllByRole = _render55.getAllByRole;
+
     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("Multiple selection and optional - Clear action cleans every selected option but does not display an error", function () {
     var onChange = jest.fn();
+
     var _render56 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        label: "test-select-label",
-        options: single_options,
-        onChange: onChange,
-        multiple: true,
-        optional: true
-      })),
-      getByRole = _render56.getByRole,
-      getAllByRole = _render56.getAllByRole,
-      getByTitle = _render56.getByTitle;
+      label: "test-select-label",
+      options: singleOptions,
+      onChange: onChange,
+      multiple: true,
+      optional: true
+    })),
+        getByRole = _render56.getByRole,
+        getAllByRole = _render56.getAllByRole,
+        getByTitle = _render56.getByTitle;
+
     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"]
     });
+
     _userEvent["default"].click(getByTitle("Clear selection"));
+
     expect(onChange).toHaveBeenCalledWith({
       value: []
     });