@dxc-technology/halstack-react 6.2.2 → 7.0.0

package/select/Select.test.js

@@ -421,15 +421,49 @@ describe("Select component tests", function () {
     expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
     expect(submitInput.value).toBe("4,2,6,3");
   });
+  test("Sends its value when submitted", function () {
+    var 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"
+      });
+    });
+
+    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;
+
+    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 _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
       options: single_options,
       disabled: true
     })),
-        getByRole = _render6.getByRole,
-        queryByRole = _render6.queryByRole;
+        getByRole = _render7.getByRole,
+        queryByRole = _render7.queryByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-disabled")).toBe("true");
@@ -440,7 +474,7 @@ describe("Select component tests", function () {
     expect(document.activeElement === select).toBeFalsy();
   });
   test("Disabled select - Clear all options action must be shown but not clickable", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
       options: single_options,
@@ -448,8 +482,8 @@ describe("Select component tests", function () {
       searchable: true,
       multiple: true
     })),
-        getByRole = _render7.getByRole,
-        getByText = _render7.getByText;
+        getByRole = _render8.getByRole,
+        getByText = _render8.getByText;
 
     _userEvent["default"].click(getByRole("button"));
 
@@ -458,13 +492,13 @@ describe("Select component tests", function () {
   test("Disabled select - Does not call onBlur event", function () {
     var onBlur = jest.fn();
 
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       disabled: true,
       onBlur: onBlur
     })),
-        getByRole = _render8.getByRole;
+        getByRole = _render9.getByRole;
 
     var select = getByRole("combobox");
 
@@ -480,7 +514,7 @@ describe("Select component tests", function () {
     expect(onBlur).not.toHaveBeenCalled();
   });
   test("Disabled select - When the component gains the focus, the listbox does not open", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       value: ["1", "2"],
       options: single_options,
@@ -488,8 +522,8 @@ describe("Select component tests", function () {
       searchable: true,
       multiple: true
     })),
-        getByRole = _render9.getByRole,
-        queryByRole = _render9.queryByRole;
+        getByRole = _render10.getByRole,
+        queryByRole = _render10.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -498,18 +532,42 @@ describe("Select component tests", function () {
     expect(queryByRole("listbox")).toBeFalsy();
     expect(document.activeElement === select).toBeFalsy();
   });
+  test("Disabled select - Doesn't send its value when submitted", function () {
+    var handlerOnSubmit = jest.fn(function (e) {
+      e.preventDefault();
+      var formData = new FormData(e.target);
+      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;
+
+    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 _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       onBlur: onBlur
     })),
-        getByRole = _render10.getByRole,
-        getAllByRole = _render10.getAllByRole;
+        getByRole = _render12.getByRole,
+        getAllByRole = _render12.getAllByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-required")).toBe("true");
@@ -544,15 +602,15 @@ describe("Select component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render11.getByRole,
-        getAllByRole = _render11.getAllByRole;
+        getByRole = _render13.getByRole,
+        getAllByRole = _render13.getAllByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-required")).toBe("true");
@@ -609,14 +667,14 @@ describe("Select component tests", function () {
     var onChange = jest.fn();
     var onBlur = jest.fn();
 
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render12.getByRole;
+        getByRole = _render14.getByRole;
 
     var select = getByRole("combobox");
     expect(select.getAttribute("aria-required")).toBe("false");
@@ -632,14 +690,14 @@ describe("Select component tests", function () {
     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 _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByText = _render13.getByText,
-        getByRole = _render13.getByRole,
-        getAllByRole = _render13.getAllByRole,
-        queryByRole = _render13.queryByRole;
+        getByText = _render15.getByText,
+        getByRole = _render15.getByRole,
+        getAllByRole = _render15.getAllByRole,
+        queryByRole = _render15.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -659,12 +717,12 @@ describe("Select component tests", function () {
     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 _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: []
     })),
-        getByRole = _render14.getByRole,
-        queryByRole = _render14.queryByRole;
+        getByRole = _render16.getByRole,
+        queryByRole = _render16.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -676,17 +734,17 @@ describe("Select component tests", function () {
   test("Non-Grouped Options - Click in an option selects it and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
       options: single_options,
       onChange: onChange
     })),
-        getByText = _render15.getByText,
-        getByRole = _render15.getByRole,
-        getAllByRole = _render15.getAllByRole,
-        queryByRole = _render15.queryByRole,
-        container = _render15.container;
+        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\"]");
@@ -709,16 +767,16 @@ describe("Select component tests", function () {
   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 _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render16.getByRole,
-        getAllByRole = _render16.getAllByRole,
-        getAllByText = _render16.getAllByText;
+        getByRole = _render18.getByRole,
+        getAllByRole = _render18.getAllByRole,
+        getAllByText = _render18.getAllByText;
 
     var select = getByRole("combobox");
 
@@ -765,18 +823,18 @@ describe("Select component tests", function () {
     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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render17.getByRole,
-        getAllByRole = _render17.getAllByRole,
-        getByText = _render17.getByText,
-        queryByText = _render17.queryByText,
-        container = _render17.container;
+        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];
@@ -794,12 +852,12 @@ describe("Select component tests", function () {
     expect(getByText("No matches found")).toBeTruthy();
   });
   test("Non-Grouped Options - Renders SVG icons correctly when passed with options", function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: svg_icon_options
     })),
-        getByRole = _render18.getByRole,
-        getAllByRole = _render18.getAllByRole;
+        getByRole = _render20.getByRole,
+        getAllByRole = _render20.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -809,13 +867,13 @@ describe("Select component tests", function () {
     expect(getAllByRole("option").length).toBe(5);
   });
   test("Non-Grouped Options - Renders string url icons correctly when passed with options", function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: url_icon_options,
       optional: true
     })),
-        getByRole = _render19.getByRole,
-        getAllByRole = _render19.getAllByRole;
+        getByRole = _render21.getByRole,
+        getAllByRole = _render21.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -825,12 +883,12 @@ describe("Select component tests", function () {
     expect(getAllByRole("option").length).toBe(6);
   });
   test("Non-Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render20.getByRole,
-        queryByRole = _render20.queryByRole;
+        getByRole = _render22.getByRole,
+        queryByRole = _render22.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -845,12 +903,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
   });
   test("Non-Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render21.getByRole,
-        queryByRole = _render21.queryByRole;
+        getByRole = _render23.getByRole,
+        queryByRole = _render23.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -872,12 +930,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-19");
   });
   test("Non-Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render22.getByRole,
-        queryByRole = _render22.queryByRole;
+        getByRole = _render24.getByRole,
+        queryByRole = _render24.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -892,12 +950,12 @@ describe("Select component tests", function () {
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Non-Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
-    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByRole = _render23.getByRole,
-        queryByRole = _render23.queryByRole;
+        getByRole = _render25.getByRole,
+        queryByRole = _render25.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -921,16 +979,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       optional: true
     })),
-        getByText = _render24.getByText,
-        getByRole = _render24.getByRole,
-        getAllByRole = _render24.getAllByRole,
-        queryByRole = _render24.queryByRole;
+        getByText = _render26.getByText,
+        getByRole = _render26.getByRole,
+        getAllByRole = _render26.getAllByRole,
+        queryByRole = _render26.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -982,17 +1040,17 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
     var onChange = jest.fn();
 
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render25.container,
-        getByText = _render25.getByText,
-        getByRole = _render25.getByRole,
-        getAllByRole = _render25.getAllByRole,
-        queryByRole = _render25.queryByRole;
+        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];
@@ -1019,15 +1077,15 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
     var onChange = jest.fn();
 
-    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render26.container,
-        getByText = _render26.getByText,
-        getByRole = _render26.getByRole;
+        container = _render28.container,
+        getByText = _render28.getByText,
+        getByRole = _render28.getByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1043,16 +1101,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Clicking the select, when the list is open, clears the search value", function () {
     var onChange = jest.fn();
 
-    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render29 = (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;
+        container = _render29.container,
+        getByText = _render29.getByText,
+        getByRole = _render29.getByRole,
+        getAllByRole = _render29.getAllByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1075,15 +1133,15 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Writing displays the listbox, if it was not open", function () {
     var onChange = jest.fn();
 
-    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render28.container,
-        getByRole = _render28.getByRole,
-        queryByRole = _render28.queryByRole;
+        container = _render30.container,
+        getByRole = _render30.getByRole,
+        queryByRole = _render30.queryByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1101,15 +1159,15 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - Key Esc cleans the search value and closes the options", function () {
     var onChange = jest.fn();
 
-    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render29.container,
-        getByRole = _render29.getByRole,
-        queryByRole = _render29.queryByRole;
+        container = _render31.container,
+        getByRole = _render31.getByRole,
+        queryByRole = _render31.queryByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1129,16 +1187,16 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", function () {
     var onChange = jest.fn();
 
-    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render32 = (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,
-        getAllByRole = _render30.getAllByRole,
-        queryByTitle = _render30.queryByTitle;
+        container = _render32.container,
+        getByRole = _render32.getByRole,
+        getAllByRole = _render32.getAllByRole,
+        queryByTitle = _render32.queryByTitle;
 
     var searchInput = container.querySelectorAll("input")[1];
 
@@ -1158,19 +1216,19 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
     var onChange = jest.fn();
 
-    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render31.getByText,
-        getAllByText = _render31.getAllByText,
-        getByRole = _render31.getByRole,
-        getAllByRole = _render31.getAllByRole,
-        queryByRole = _render31.queryByRole,
-        container = _render31.container;
+        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\"]");
@@ -1220,19 +1278,19 @@ describe("Select component tests", function () {
   test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", function () {
     var onChange = jest.fn();
 
-    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options,
       onChange: onChange,
       multiple: true
     })),
-        getByText = _render32.getByText,
-        queryByText = _render32.queryByText,
-        getByRole = _render32.getByRole,
-        getAllByRole = _render32.getAllByRole,
-        queryByRole = _render32.queryByRole,
-        getByTitle = _render32.getByTitle,
-        queryByTitle = _render32.queryByTitle;
+        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");
 
@@ -1267,7 +1325,7 @@ 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 _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
       options: single_options,
@@ -1275,10 +1333,10 @@ describe("Select component tests", function () {
       multiple: true,
       optional: true
     })),
-        getByText = _render33.getByText,
-        getAllByText = _render33.getAllByText,
-        getByRole = _render33.getByRole,
-        getAllByRole = _render33.getAllByRole;
+        getByText = _render35.getByText,
+        getAllByText = _render35.getAllByText,
+        getByRole = _render35.getByRole,
+        getAllByRole = _render35.getAllByRole;
 
     var select = getByRole("combobox");
     expect(getByText("(Optional)")).toBeTruthy();
@@ -1296,13 +1354,13 @@ describe("Select component tests", function () {
     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 _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByText = _render34.getByText,
-        getByRole = _render34.getByRole,
-        getAllByRole = _render34.getAllByRole;
+        getByText = _render36.getByText,
+        getByRole = _render36.getByRole,
+        getAllByRole = _render36.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -1370,14 +1428,14 @@ describe("Select component tests", function () {
     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 _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: single_options
     })),
-        getByText = _render35.getByText,
-        getByRole = _render35.getByRole,
-        getAllByRole = _render35.getAllByRole,
-        queryByRole = _render35.queryByRole;
+        getByText = _render37.getByText,
+        getByRole = _render37.getByRole,
+        getAllByRole = _render37.getAllByRole,
+        queryByRole = _render37.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1445,14 +1503,14 @@ describe("Select component tests", function () {
     expect(getByText("Option 17")).toBeTruthy();
   });
   test("Grouped Options - Opens listbox and renders it correctly or closes it with a click on select", function () {
-    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByText = _render36.getByText,
-        getByRole = _render36.getByRole,
-        getAllByRole = _render36.getAllByRole,
-        queryByRole = _render36.queryByRole;
+        getByText = _render38.getByText,
+        getByRole = _render38.getByRole,
+        getAllByRole = _render38.getAllByRole,
+        queryByRole = _render38.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1480,15 +1538,15 @@ describe("Select component tests", function () {
     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 _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: [{
         label: "Group 1",
         options: []
       }]
     })),
-        getByRole = _render37.getByRole,
-        queryByRole = _render37.queryByRole;
+        getByRole = _render39.getByRole,
+        queryByRole = _render39.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1500,17 +1558,17 @@ describe("Select component tests", function () {
   test("Grouped Options - Click in an option selects it and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       name: "test",
       label: "test-select-label",
       options: group_options,
       onChange: onChange
     })),
-        getByText = _render38.getByText,
-        getByRole = _render38.getByRole,
-        getAllByRole = _render38.getAllByRole,
-        queryByRole = _render38.queryByRole,
-        container = _render38.container;
+        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\"]");
@@ -1533,16 +1591,16 @@ describe("Select component tests", function () {
   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 _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render39.getByRole,
-        getAllByRole = _render39.getAllByRole,
-        getAllByText = _render39.getAllByText;
+        getByRole = _render41.getByRole,
+        getAllByRole = _render41.getAllByRole,
+        getAllByText = _render41.getAllByText;
 
     var select = getByRole("combobox");
 
@@ -1589,18 +1647,18 @@ describe("Select component tests", function () {
     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 _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render40.getByRole,
-        getAllByRole = _render40.getAllByRole,
-        getByText = _render40.getByText,
-        queryByText = _render40.queryByText,
-        container = _render40.container;
+        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];
@@ -1618,13 +1676,13 @@ describe("Select component tests", function () {
     expect(getByText("No matches found")).toBeTruthy();
   });
   test("Grouped Options - Renders icons correctly when passed with group options", function () {
-    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: grouped_icon_options,
       optional: true
     })),
-        getByRole = _render41.getByRole,
-        getAllByRole = _render41.getAllByRole;
+        getByRole = _render43.getByRole,
+        getAllByRole = _render43.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -1634,12 +1692,12 @@ describe("Select component tests", function () {
     expect(getAllByRole("option").length).toBe(11);
   });
   test("Grouped Options: Arrow up key - Opens the listbox and visually focus the last option", function () {
-    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render42.getByRole,
-        queryByRole = _render42.queryByRole;
+        getByRole = _render44.getByRole,
+        queryByRole = _render44.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1654,12 +1712,12 @@ describe("Select component tests", function () {
     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 _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render43.getByRole,
-        queryByRole = _render43.queryByRole;
+        getByRole = _render45.getByRole,
+        queryByRole = _render45.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1681,12 +1739,12 @@ describe("Select component tests", function () {
     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 _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render44.getByRole,
-        queryByRole = _render44.queryByRole;
+        getByRole = _render46.getByRole,
+        queryByRole = _render46.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1701,12 +1759,12 @@ describe("Select component tests", function () {
     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 _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByRole = _render45.getByRole,
-        queryByRole = _render45.queryByRole;
+        getByRole = _render47.getByRole,
+        queryByRole = _render47.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1730,16 +1788,16 @@ describe("Select component tests", function () {
   test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", function () {
     var onChange = jest.fn();
 
-    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       optional: true
     })),
-        getByText = _render46.getByText,
-        getByRole = _render46.getByRole,
-        getAllByRole = _render46.getAllByRole,
-        queryByRole = _render46.queryByRole;
+        getByText = _render48.getByText,
+        getByRole = _render48.getByRole,
+        getAllByRole = _render48.getAllByRole,
+        queryByRole = _render48.queryByRole;
 
     var select = getByRole("combobox");
 
@@ -1791,17 +1849,17 @@ describe("Select component tests", function () {
   test("Grouped Options: Searchable - Displays an input for filtering the list of options", function () {
     var onChange = jest.fn();
 
-    var _render47 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render47.container,
-        getByText = _render47.getByText,
-        getByRole = _render47.getByRole,
-        getAllByRole = _render47.getAllByRole,
-        queryByRole = _render47.queryByRole;
+        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];
@@ -1834,15 +1892,15 @@ describe("Select component tests", function () {
   test("Grouped Options: Searchable - Displays 'No matches found' when there are no filtering results", function () {
     var onChange = jest.fn();
 
-    var _render48 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       searchable: true
     })),
-        container = _render48.container,
-        getByText = _render48.getByText,
-        getByRole = _render48.getByRole;
+        container = _render50.container,
+        getByText = _render50.getByText,
+        getByRole = _render50.getByRole;
 
     var select = getByRole("combobox");
     var searchInput = container.querySelectorAll("input")[1];
@@ -1858,19 +1916,19 @@ describe("Select component tests", function () {
   test("Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", function () {
     var onChange = jest.fn();
 
-    var _render49 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render49.getByText,
-        getAllByText = _render49.getAllByText,
-        getByRole = _render49.getByRole,
-        getAllByRole = _render49.getAllByRole,
-        queryByRole = _render49.queryByRole,
-        container = _render49.container;
+        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\"]");
@@ -1920,19 +1978,19 @@ describe("Select component tests", function () {
   test("Grouped Options: Multiple selection - Clear action and selection indicator", function () {
     var onChange = jest.fn();
 
-    var _render50 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options,
       onChange: onChange,
       multiple: true
     })),
-        getByText = _render50.getByText,
-        queryByText = _render50.queryByText,
-        getByRole = _render50.getByRole,
-        getAllByRole = _render50.getAllByRole,
-        queryByRole = _render50.queryByRole,
-        getByTitle = _render50.getByTitle,
-        queryByTitle = _render50.queryByTitle;
+        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");
 
@@ -1965,7 +2023,7 @@ 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 _render51 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       placeholder: "Choose an option",
       options: group_options,
@@ -1973,10 +2031,10 @@ describe("Select component tests", function () {
       multiple: true,
       optional: true
     })),
-        getByText = _render51.getByText,
-        getAllByText = _render51.getAllByText,
-        getByRole = _render51.getByRole,
-        getAllByRole = _render51.getAllByRole;
+        getByText = _render53.getByText,
+        getAllByText = _render53.getAllByText,
+        getByRole = _render53.getByRole,
+        getAllByRole = _render53.getAllByRole;
 
     var select = getByRole("combobox");
     expect(getByText("(Optional)")).toBeTruthy();
@@ -1994,13 +2052,13 @@ describe("Select component tests", function () {
     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 _render52 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByText = _render52.getByText,
-        getByRole = _render52.getByRole,
-        getAllByRole = _render52.getAllByRole;
+        getByText = _render54.getByText,
+        getByRole = _render54.getByRole,
+        getAllByRole = _render54.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -2068,13 +2126,13 @@ describe("Select component tests", function () {
     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 _render53 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    var _render55 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
       label: "test-select-label",
       options: group_options
     })),
-        getByText = _render53.getByText,
-        getByRole = _render53.getByRole,
-        getAllByRole = _render53.getAllByRole;
+        getByText = _render55.getByText,
+        getByRole = _render55.getByRole,
+        getAllByRole = _render55.getAllByRole;
 
     var select = getByRole("combobox");
 
@@ -2141,16 +2199,16 @@ describe("Select component tests", function () {
   test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", function () {
     var onChange = jest.fn();
 
-    var _render54 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+    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 = _render54.getByRole,
-        getAllByRole = _render54.getAllByRole,
-        getByTitle = _render54.getByTitle;
+        getByRole = _render56.getByRole,
+        getAllByRole = _render56.getAllByRole,
+        getByTitle = _render56.getByTitle;
 
     var select = getByRole("combobox");