@dxc-technology/halstack-react 0.0.0-59b9187 → 0.0.0-5a4d834

package/select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcSelect from "./Select";
@@ -7,10 +7,23 @@ import Listbox from "./Listbox";
 import { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
+import { disabledRules } from "../../test/accessibility/rules/specific/select/disabledRules";
+import preview from "../../.storybook/preview";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Select",
   component: DxcSelect,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
 const one_option = [{ label: "Option 01", value: "1" }];
@@ -293,6 +306,14 @@ const Select = () => (
       <Title title="Fillparent size" theme="light" level={4} />
       <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcSelect label="fillParent" size="fillParent" options={single_options} />
+        <DxcSelect label="medium" size="medium" options={single_options} />
+        <DxcSelect label="large" size="large" options={single_options} />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="xxsmall margin" theme="light" level={4} />
@@ -390,7 +411,7 @@ const Select = () => (
 );
 
 const SelectListbox = () => {
-  const colorsTheme: any = useTheme();
+  const colorsTheme = useTheme();
 
   return (
     <>
@@ -426,7 +447,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x8"
             currentValue=""
             options={one_option}
             visualFocusIndex={-1}
@@ -442,7 +463,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-active">
           <Title title="Active option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x9"
             currentValue=""
             options={one_option}
             visualFocusIndex={-1}
@@ -458,7 +479,7 @@ const SelectListbox = () => {
         <ExampleContainer>
           <Title title="Focused option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x10"
             currentValue=""
             options={one_option}
             visualFocusIndex={0}
@@ -474,7 +495,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered selected option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x11"
             currentValue="1"
             options={single_options}
             visualFocusIndex={-1}
@@ -490,7 +511,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-active">
           <Title title="Active selected option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x12"
             currentValue="2"
             options={single_options}
             visualFocusIndex={0}
@@ -507,7 +528,7 @@ const SelectListbox = () => {
         <ExampleContainer>
           <Title title="Icons (SVGs)" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x13"
             currentValue="3"
             options={icon_options}
             visualFocusIndex={-1}
@@ -523,8 +544,8 @@ const SelectListbox = () => {
         <ExampleContainer>
           <Title title="Grouped icons (Material Symbols)" theme="light" level={4} />
           <Listbox
-            id="x"
-            currentValue={["0", "3"]}
+            id="x14"
+            currentValue={"4"}
             options={icon_options_grouped_material}
             visualFocusIndex={-1}
             lastOptionIndex={3}
@@ -539,8 +560,8 @@ const SelectListbox = () => {
         <ExampleContainer>
           <Title title="Grouped icons (Material)" theme="light" level={4} />
           <Listbox
-            id="x"
-            currentValue={["facebook", "figma"]}
+            id="x15"
+            currentValue={["car", "motorcycle", "train"]}
             options={options_material}
             visualFocusIndex={-1}
             lastOptionIndex={6}
@@ -559,7 +580,7 @@ const SelectListbox = () => {
           <Title title="Hovered option" theme="light" level={4} />
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x16"
               currentValue=""
               options={one_option}
               visualFocusIndex={-1}
@@ -577,7 +598,7 @@ const SelectListbox = () => {
           <Title title="Active option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x17"
               currentValue=""
               options={one_option}
               visualFocusIndex={-1}
@@ -595,7 +616,7 @@ const SelectListbox = () => {
           <Title title="Focused option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x18"
               currentValue=""
               options={one_option}
               visualFocusIndex={0}
@@ -613,7 +634,7 @@ const SelectListbox = () => {
           <Title title="Hovered selected option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x19"
               currentValue="1"
               options={single_options}
               visualFocusIndex={-1}
@@ -631,7 +652,7 @@ const SelectListbox = () => {
           <Title title="Active selected option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x20"
               currentValue="2"
               options={single_options}
               visualFocusIndex={0}
@@ -650,7 +671,7 @@ const SelectListbox = () => {
           <Title title="Icons (SVGs)" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x21"
               currentValue="3"
               options={icon_options}
               visualFocusIndex={-1}
@@ -728,7 +749,7 @@ const MultipleSelect = () => (
   </>
 );
 
-const MultipleSelectOpinioated = () => (
+const MultipleSelectOpinionated = () => (
   <ExampleContainer expanded>
     <Title title="Multiple select" theme="light" level={4} />
     <HalstackProvider theme={opinionatedTheme}>
@@ -886,7 +907,7 @@ MultipleOptionsDisplayed.play = async ({ canvasElement }) => {
   await userEvent.click(canvas.getAllByRole("combobox")[0]);
 };
 
-export const MultipleOptionsDisplayedOpinionated = MultipleSelectOpinioated.bind({});
+export const MultipleOptionsDisplayedOpinionated = MultipleSelectOpinionated.bind({});
 MultipleOptionsDisplayedOpinionated.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getAllByRole("combobox")[0]);

package/select/Select.test.d.ts

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

package/select/Select.test.js

@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-var _Select = _interopRequireDefault(require("./Select.tsx"));
+var _Select = _interopRequireDefault(require("./Select"));
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
 global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 var singleOptions = [{
   label: "Option 01",
@@ -100,70 +99,6 @@ var singleOptions = [{
   label: "Option 20",
   value: "20"
 }];
-var svgIconOptions = [{
-  label: "3G Mobile",
-  value: "1",
-  icon: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0,0h24v24H0V0z",
-    fill: "none"
-  })), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z"
-  }))))
-}, {
-  label: "Ethernet",
-  value: "2",
-  icon: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0V0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"
-  }))
-}, {
-  label: "Wi-fi",
-  value: "3",
-  icon: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0V0zm0 0h24v24H0V0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
-  }))
-}, {
-  label: "Settings backup restore (just for previous configuration)",
-  value: "4",
-  icon: /*#__PURE__*/_react["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    height: "24px",
-    viewBox: "0 0 24 24",
-    width: "24px",
-    fill: "currentColor"
-  }, /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M0 0h24v24H0V0z",
-    fill: "none"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    d: "M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"
-  }))
-}, {
-  label: "Regular",
-  value: "Regular"
-}];
 var groupOptions = [{
   label: "Colores",
   options: [{
@@ -228,41 +163,6 @@ var groupOptions = [{
     value: "ebro"
   }]
 }];
-var groupedIconOptions = [{
-  label: "Transport",
-  options: [{
-    label: "Electric Car",
-    value: "car",
-    icon: "electric_car"
-  }, {
-    label: "Motorcycle",
-    value: "motorcycle",
-    icon: "Motorcycle"
-  }, {
-    label: "Train",
-    value: "train",
-    icon: "train"
-  }, {
-    label: "Bike",
-    value: "bike",
-    icon: "pedal_bike"
-  }]
-}, {
-  label: "Entertainment",
-  options: [{
-    label: "Movie",
-    value: "movie",
-    icon: "movie"
-  }, {
-    label: "Music",
-    value: "music",
-    icon: "music_note"
-  }, {
-    label: "Games",
-    value: "games",
-    icon: "joystick"
-  }]
-}];
 describe("Select component tests", function () {
   test("When clicking the label, the focus goes to the select", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _render, getByText, getByRole, select, label;
@@ -272,7 +172,8 @@ describe("Select component tests", function () {
           _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
             label: "test-select-label",
             helperText: "test-select-helper-text",
-            placeholder: "Example text"
+            placeholder: "Example text",
+            options: singleOptions
           })), getByText = _render.getByText, getByRole = _render.getByRole;
           select = getByRole("combobox");
           label = getByText("test-select-label");
@@ -289,7 +190,8 @@ describe("Select component tests", function () {
   test("Renders with correct aria attributes when is in error state", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         label: "Error label",
-        error: "Error message."
+        error: "Error message.",
+        options: singleOptions
       })),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole;
@@ -382,15 +284,12 @@ describe("Select component tests", function () {
           _context4.next = 8;
           return _userEvent["default"].click(select);
         case 8:
-          expect(getAllByRole("option")[3].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[1].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[5].getAttribute("aria-selected")).toBe("true");
-          _context4.next = 13;
+          _context4.next = 10;
           return _userEvent["default"].click(getAllByRole("option")[2]);
-        case 13:
+        case 10:
           expect(getByText("Option 02, Option 03, Option 04, Option 06")).toBeTruthy();
           expect(submitInput.value).toBe("4,2,6,3");
-        case 15:
+        case 12:
         case "end":
           return _context4.stop();
       }
@@ -481,6 +380,7 @@ describe("Select component tests", function () {
             label: "test-select-label",
             value: ["1", "2"],
             options: singleOptions,
+            multiple: true,
             disabled: true
           })), getByRole = _render8.getByRole, queryByRole = _render8.queryByRole;
           select = getByRole("combobox");
@@ -1320,10 +1220,8 @@ describe("Select component tests", function () {
           });
           expect(queryByRole("listbox")).toBeTruthy();
           expect(getByText("Option 11, Option 19")).toBeTruthy();
-          expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[18].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("11,19");
-        case 21:
+        case 19:
         case "end":
           return _context30.stop();
       }
@@ -1399,15 +1297,14 @@ describe("Select component tests", function () {
           return _userEvent["default"].click(select);
         case 6:
           expect(getAllByText("Choose an option").length).toBe(1);
-          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-          _context32.next = 10;
+          _context32.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
-        case 10:
+        case 9:
           expect(onChange).toHaveBeenCalledWith({
             value: ["1"]
           });
           expect(getAllByText("Option 01").length).toBe(2);
-        case 12:
+        case 11:
         case "end":
           return _context32.stop();
       }
@@ -1566,7 +1463,7 @@ describe("Select component tests", function () {
           _context35.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          listbox = getByRole("listbox");
+          listbox = getByRole("list");
           expect(listbox).toBeTruthy();
           expect(select.getAttribute("aria-expanded")).toBe("true");
           expect(getByText("Colores")).toBeTruthy();
@@ -1574,7 +1471,7 @@ describe("Select component tests", function () {
           expect(getByText("Negro")).toBeTruthy();
           expect(getByText("Ciudades españolas")).toBeTruthy();
           expect(getByText("Madrid")).toBeTruthy();
-          groups = getAllByRole("group");
+          groups = getAllByRole("listbox");
           expect(groups.length).toBe(3);
           groupLabels = getAllByRole("presentation");
           expect(groups[0].getAttribute("aria-labelledby")).toBe(groupLabels[0].id);
@@ -1584,7 +1481,7 @@ describe("Select component tests", function () {
           _context35.next = 21;
           return _userEvent["default"].click(select);
         case 21:
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(select.getAttribute("aria-expanded")).toBe("false");
         case 23:
         case "end":
@@ -1608,7 +1505,7 @@ describe("Select component tests", function () {
           _context36.next = 4;
           return _userEvent["default"].click(select);
         case 4:
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(select.getAttribute("aria-expanded")).toBe("false");
         case 6:
         case "end":
@@ -1639,7 +1536,7 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: "oviedo"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Oviedo")).toBeTruthy();
           _context37.next = 13;
           return _userEvent["default"].click(select);
@@ -1755,7 +1652,7 @@ describe("Select component tests", function () {
       keyCode: 38,
       charCode: 38
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow up key - Puts the focus in last option when the first one is visually focused", function () {
@@ -1778,7 +1675,7 @@ describe("Select component tests", function () {
       keyCode: 38,
       charCode: 38
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-17");
   });
   test("Grouped Options: Arrow down key - Opens the listbox and visually focus the first option", function () {
@@ -1795,7 +1692,7 @@ describe("Select component tests", function () {
       keyCode: 40,
       charCode: 40
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Grouped Options: Arrow down key - Puts the focus in the first option when the last one is visually focused", function () {
@@ -1818,7 +1715,7 @@ describe("Select component tests", function () {
       keyCode: 40,
       charCode: 40
     });
-    expect(queryByRole("listbox")).toBeTruthy();
+    expect(queryByRole("list")).toBeTruthy();
     expect(select.getAttribute("aria-activedescendant")).toBe("option-0");
   });
   test("Grouped Options: Enter key - Selects the visually focused option and closes the listbox", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee40() {
@@ -1867,7 +1764,7 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: "ebro"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Ebro")).toBeTruthy();
           _context40.next = 13;
           return _userEvent["default"].click(select);
@@ -1896,29 +1793,28 @@ describe("Select component tests", function () {
           _context41.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox")).toBeTruthy();
+          expect(getByRole("list")).toBeTruthy();
           _context41.next = 9;
           return _userEvent["default"].type(searchInput, "ro");
         case 9:
-          expect(getAllByRole("group").length).toBe(2);
           expect(getAllByRole("presentation").length).toBe(2);
           expect(getAllByRole("option").length).toBe(5);
           expect(getByText("Colores")).toBeTruthy();
           expect(getByText("Ríos españoles")).toBeTruthy();
-          _context41.next = 16;
+          _context41.next = 15;
           return _userEvent["default"].click(getAllByRole("option")[4]);
-        case 16:
+        case 15:
           expect(onChange).toHaveBeenCalledWith({
             value: "ebro"
           });
-          expect(queryByRole("listbox")).toBeFalsy();
+          expect(queryByRole("list")).toBeFalsy();
           expect(getByText("Ebro")).toBeTruthy();
           expect(searchInput.value).toBe("");
-          _context41.next = 22;
+          _context41.next = 21;
           return _userEvent["default"].click(select);
-        case 22:
+        case 21:
           expect(getAllByRole("option")[17].getAttribute("aria-selected")).toBe("true");
-        case 23:
+        case 22:
         case "end":
           return _context41.stop();
       }
@@ -1941,7 +1837,7 @@ describe("Select component tests", function () {
           _context42.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox")).toBeTruthy();
+          expect(getByRole("list")).toBeTruthy();
           _context42.next = 9;
           return _userEvent["default"].type(searchInput, "very long string");
         case 9:
@@ -1970,14 +1866,13 @@ describe("Select component tests", function () {
           _context43.next = 6;
           return _userEvent["default"].click(select);
         case 6:
-          expect(getByRole("listbox").getAttribute("aria-multiselectable")).toBe("true");
-          _context43.next = 9;
+          _context43.next = 8;
           return _userEvent["default"].click(getAllByRole("option")[10]);
-        case 9:
+        case 8:
           expect(onChange).toHaveBeenCalledWith({
             value: ["bilbao"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getAllByText("Bilbao").length).toBe(2);
           _react2.fireEvent.keyDown(select, {
             key: "ArrowUp",
@@ -2000,12 +1895,10 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: ["bilbao", "guadalquivir"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getByText("Bilbao, Guadalquivir")).toBeTruthy();
-          expect(getAllByRole("option")[10].getAttribute("aria-selected")).toBe("true");
-          expect(getAllByRole("option")[16].getAttribute("aria-selected")).toBe("true");
           expect(submitInput.value).toBe("bilbao,guadalquivir");
-        case 21:
+        case 18:
         case "end":
           return _context43.stop();
       }
@@ -2042,7 +1935,7 @@ describe("Select component tests", function () {
           expect(onChange).toHaveBeenCalledWith({
             value: ["blanco", "oviedo", "duero", "ebro"]
           });
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy();
           expect(getByText("4", {
             exact: true
@@ -2050,7 +1943,7 @@ describe("Select component tests", function () {
           _context44.next = 19;
           return _userEvent["default"].click(getByTitle("Clear selection"));
         case 19:
-          expect(queryByRole("listbox")).toBeTruthy();
+          expect(queryByRole("list")).toBeTruthy();
           expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy();
           expect(queryByText("4")).toBeFalsy();
           expect(queryByTitle("Clear selection")).toBeFalsy();
@@ -2080,15 +1973,14 @@ describe("Select component tests", function () {
           return _userEvent["default"].click(select);
         case 6:
           expect(getAllByText("Choose an option").length).toBe(1);
-          expect(getAllByRole("option")[0].getAttribute("aria-selected")).toBe("false");
-          _context45.next = 10;
+          _context45.next = 9;
           return _userEvent["default"].click(getAllByRole("option")[0]);
-        case 10:
+        case 9:
           expect(onChange).toHaveBeenCalledWith({
             value: ["azul"]
           });
           expect(getAllByText("Azul").length).toBe(2);
-        case 12:
+        case 11:
         case "end":
           return _context45.stop();
       }

package/select/selectUtils.d.ts

@@ -0,0 +1,41 @@
+import { Option, OptionGroup } from "./types";
+/**
+ * Check if the value is not optional and is empty.
+ */
+declare const notOptionalCheck: (value: string | string[], multiple: boolean, optional: boolean) => boolean;
+/**
+ * Checks if the option is a group.
+ */
+declare const isOptionGroup: (option: Option | OptionGroup) => option is OptionGroup;
+/**
+ * Checks if the options are an array of groups.
+ */
+declare const isArrayOfOptionGroups: (options: Option[] | OptionGroup[]) => options is OptionGroup[];
+/**
+ * Checks if the groups have options.
+ */
+declare const groupsHaveOptions: (options: Option[] | OptionGroup[]) => boolean;
+/**
+ * Checks if the listbox can be opened.
+ */
+declare const canOpenListbox: (options: Option[] | OptionGroup[], disabled: boolean) => boolean;
+/**
+ * Filters the options by the search value.
+ */
+declare const filterOptionsBySearchValue: (options: Option[] | OptionGroup[], searchValue: string) => Option[] | OptionGroup[];
+/**
+ * Returns the index of the last option, depending on several conditions.
+ */
+declare const getLastOptionIndex: (options: Option[] | OptionGroup[], filteredOptions: Option[] | OptionGroup[], searchable: boolean, optional: boolean, multiple: boolean) => number;
+/**
+ * Return the current selection.
+ */
+declare const getSelectedOption: (value: string | string[], options: Option[] | OptionGroup[], multiple: boolean, optional: boolean, optionalItem: Option) => {
+    selectedOption: Option | Option[];
+    singleSelectionIndex: number;
+};
+/**
+ * Return the label or labels of the selected option(s) for the internal input.
+ */
+declare const getSelectedOptionLabel: (placeholder: string, selectedOption: Option | Option[]) => string;
+export { isOptionGroup, isArrayOfOptionGroups, notOptionalCheck, groupsHaveOptions, canOpenListbox as canOpenOptions, filterOptionsBySearchValue, getLastOptionIndex, getSelectedOption, getSelectedOptionLabel, };