@dxc-technology/halstack-react 0.0.0-099fc65 → 0.0.0-0a9608a

package/select/Select.stories.tsx

@@ -1,19 +1,18 @@
 import React from "react";
-
-import { userEvent, within, waitFor } from "@storybook/testing-library";
-import { fireEvent } from "@testing-library/react";
-
+import { userEvent, within } from "@storybook/testing-library";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-
 import DxcSelect from "./Select";
+import Listbox from "./Listbox";
+import { ThemeProvider } from "styled-components";
+import useTheme from "../useTheme";
 
 export default {
   title: "Select",
   component: DxcSelect,
 };
-const one_option = [{ label: "Option 01", value: "1" }];
 
+const one_option = [{ label: "Option 01", value: "1" }];
 const single_options = [
   { label: "Option 01", value: "1" },
   { label: "Option 02", value: "2" },
@@ -190,7 +189,29 @@ const url_options = [
       {
         label: "Facebook",
         value: "facebook",
-        icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/2048px-2021_Facebook_icon.svg.png",
+        icon: (
+          <svg
+            version="1.1"
+            id="Capa_1"
+            x="0px"
+            y="0px"
+            width="438.536px"
+            height="438.536px"
+            viewBox="0 0 438.536 438.536"
+            fill="#4267B2"
+          >
+            <g>
+              <path
+                d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+      C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+      h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+      C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+      c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+      c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+              />
+            </g>
+          </svg>
+        ),
       },
       {
         label: "Pinterest",
@@ -224,10 +245,11 @@ const optionsWithEllipsisMedium = [
   { label: "Optiond1234567890123456789012345678901234", value: "1" },
   { label: "Optiond12345678901234567890123456789012345", value: "2" },
   { label: "Option 031111111111111111111111111111222", value: "3" },
-  { label: "Option 03111111111111111111111111111122", value: "4" },
 ];
+
 const Select = () => (
   <>
+    <Title title="States" theme="light" level={2} />
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
       <DxcSelect label="Hovered" options={single_options} />
@@ -242,129 +264,313 @@ const Select = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled with value" theme="light" level={4} />
-      <DxcSelect label="Disabled with value" disabled options={single_options} value="1" />
+      <DxcSelect label="Disabled with value" disabled options={single_options} defaultValue="1" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="With label" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} />
-      <Title title="Label and placeholder" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} placeholder="Placeholder" />
-      <Title title="Label, placeholder and helper text" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} helperText="Helper text" placeholder="Placeholder" />
       <Title title="Error" theme="light" level={4} />
       <DxcSelect
         label="Label"
         options={single_options}
-        error="Error message"
+        error="Error message."
         helperText="Helper text"
         placeholder="Placeholder"
       />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered error" theme="light" level={4} />
+      <DxcSelect
+        label="Label"
+        options={single_options}
+        error="Error message."
+        helperText="Helper text"
+        placeholder="Placeholder"
+      />
+    </ExampleContainer>
+    <Title title="Anatomy" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Label, placeholder and helper text" theme="light" level={4} />
+      <DxcSelect label="Label" options={single_options} helperText="Helper text" placeholder="Placeholder" />
+    </ExampleContainer>
+    <Title title="Variants" theme="light" level={2} />
+    <ExampleContainer>
       <Title title="Simple selection" theme="light" level={4} />
-      <DxcSelect label="Simple selection" searchable options={single_options} value="2" />
+      <DxcSelect label="Simple selection" searchable options={single_options} defaultValue="2" />
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="Multiple selection" theme="light" level={4} />
-      <DxcSelect label="Multiple select" searchable options={single_options} multiple value={["1", "2"]} />
+      <DxcSelect label="Multiple select" searchable options={single_options} multiple defaultValue={["1", "2"]} />
     </ExampleContainer>
-
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Multiple clear hovered" theme="light" level={4} />
-      <DxcSelect label="Multiple select" options={single_options} multiple value={["1", "2"]} />
+      <DxcSelect label="Multiple select" options={single_options} multiple defaultValue={["1", "2"]} />
     </ExampleContainer>
-
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Multiple clear actived" theme="light" level={4} />
-      <DxcSelect label="Multiple select" options={single_options} multiple value={["1", "2"]} />
+      <DxcSelect label="Multiple select" options={single_options} multiple defaultValue={["1", "2"]} />
     </ExampleContainer>
-    <>
-      <Title title="Sizes" theme="light" level={2} />
-      <ExampleContainer>
-        <Title title="Small size" theme="light" level={4} />
-        <DxcSelect label="Small" options={single_options} size="small" />
-      </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small size" theme="light" level={4} />
+      <DxcSelect label="Small" options={single_options} size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size" theme="light" level={4} />
+      <DxcSelect label="Medium" options={single_options} size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcSelect label="Large" options={single_options} size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Fillparent size" theme="light" level={4} />
+      <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="xxsmall margin" theme="light" level={4} />
+      <DxcSelect label="xxSmall" options={single_options} margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xsmall margin" theme="light" level={4} />
+      <DxcSelect label="xSmall" options={single_options} margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="small margin" theme="light" level={4} />
+      <DxcSelect label="Small" options={single_options} margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="medium margin" theme="light" level={4} />
+      <DxcSelect label="Medium" options={single_options} margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="large margin" theme="light" level={4} />
+      <DxcSelect label="Large" options={single_options} margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xlarge margin" theme="light" level={4} />
+      <DxcSelect label="xLarge" options={single_options} margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xxlarge margin" theme="light" level={4} />
+      <DxcSelect label="xxLarge" options={single_options} margin="xxlarge" />
+    </ExampleContainer>
+    <ExampleContainer expanded>
+      <Title title="Ellipsis" theme="light" level={2} />
+      <Title title="Multiple selection with ellipsis" theme="light" level={4} />
+      <DxcSelect label="Label" options={single_options} multiple defaultValue={["1", "2", "3", "4"]} />
+      <Title title="Value with ellipsis" theme="light" level={4} />
+      <DxcSelect label="Label" options={optionsWithEllipsisMedium} defaultValue="1" />
+      <Title title="Options with ellipsis" theme="light" level={4} />
+      <DxcSelect
+        label="Label"
+        placeholder="Choose an option"
+        defaultValue="1"
+        options={optionsWithEllipsisMedium}
+        margin={{ top: "xxlarge" }}
+      />
+    </ExampleContainer>
+  </>
+);
+const SelectListbox = () => {
+  const colorsTheme: any = useTheme();
+
+  return (
+    <ThemeProvider theme={colorsTheme.select}>
+      <Title title="Listbox" theme="light" level={2} />
       <ExampleContainer>
-        <Title title="Medium size" theme="light" level={4} />
-        <DxcSelect label="Medium" options={single_options} size="medium" />
+        <Title
+          title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+          theme="light"
+          level={3}
+        />
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+            height: "150px",
+            width: "min-content",
+            marginBottom: "100px",
+            padding: "20px",
+            border: "1px solid black",
+            borderRadius: "4px",
+            overflow: "auto",
+            zIndex: "1300",
+          }}
+        >
+          <DxcSelect label="Label" options={single_options} optional placeholder="Choose an option" />
+          <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+        </div>
       </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Large size" theme="light" level={4} />
-        <DxcSelect label="Large" options={single_options} size="large" />
+      <Title title="Listbox option states" theme="light" level={3} />
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Hovered option" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue=""
+          options={one_option}
+          visualFocusIndex={-1}
+          lastOptionIndex={0}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Fillparent size" theme="light" level={4} />
-        <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
+      <ExampleContainer pseudoState="pseudo-active">
+        <Title title="Active option" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue=""
+          options={one_option}
+          visualFocusIndex={-1}
+          lastOptionIndex={0}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
-    </>
-    <>
-      <Title title="Margins" theme="light" level={2} />
       <ExampleContainer>
-        <Title title="xxsmall margin" theme="light" level={4} />
-        <DxcSelect label="xxSmall" options={single_options} margin="xxsmall" />
+        <Title title="Focused option" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue=""
+          options={one_option}
+          visualFocusIndex={0}
+          lastOptionIndex={0}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
-      <ExampleContainer>
-        <Title title="xsmall margin" theme="light" level={4} />
-        <DxcSelect label="xSmall" options={single_options} margin="xsmall" />
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Hovered selected option" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue="1"
+          options={single_options}
+          visualFocusIndex={-1}
+          lastOptionIndex={3}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
-      <ExampleContainer>
-        <Title title="small margin" theme="light" level={4} />
-        <DxcSelect label="Small" options={single_options} margin="small" />
+      <ExampleContainer pseudoState="pseudo-active">
+        <Title title="Active selected option" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue="2"
+          options={single_options}
+          visualFocusIndex={0}
+          lastOptionIndex={3}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
+      <Title title="Listbox with icons" theme="light" level={3} />
       <ExampleContainer>
-        <Title title="medium margin" theme="light" level={4} />
-        <DxcSelect label="Medium" options={single_options} margin="medium" />
+        <Title title="Icons (SVGs)" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue="3"
+          options={icon_options}
+          visualFocusIndex={-1}
+          lastOptionIndex={3}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
       <ExampleContainer>
-        <Title title="large margin" theme="light" level={4} />
-        <DxcSelect label="Large" options={single_options} margin="large" />
+        <Title title="Icons (Images)" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue="facebook"
+          options={url_options}
+          visualFocusIndex={-1}
+          lastOptionIndex={6}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
       <ExampleContainer>
-        <Title title="xlarge margin" theme="light" level={4} />
-        <DxcSelect label="xLarge" options={single_options} margin="xlarge" />
+        <Title title="Grouped icons (SVGs)" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue={["0", "3"]}
+          options={icon_options_grouped}
+          visualFocusIndex={-1}
+          lastOptionIndex={3}
+          multiple={false}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
       <ExampleContainer>
-        <Title title="xxlarge margin" theme="light" level={4} />
-        <DxcSelect label="xxLarge" options={single_options} margin="xxlarge" />
+        <Title title="Grouped icons (Images)" theme="light" level={4} />
+        <Listbox
+          id="x"
+          currentValue={["facebook", "figma"]}
+          options={url_options}
+          visualFocusIndex={-1}
+          lastOptionIndex={6}
+          multiple={true}
+          optional={false}
+          optionalItem={{ label: "Empty", value: "" }}
+          searchable={false}
+          handleOptionOnClick={() => {}}
+          styles={{ width: 360 }}
+        />
       </ExampleContainer>
-    </>
-    <ExampleContainer expanded>
-      <Title title="Ellipsis" theme="light" level={2} />
-      <Title title="Multiple selection with ellipsis" theme="light" level={4} />
-      <DxcSelect label="Label" options={single_options} multiple value={["1", "2", "3", "4"]} />
-      <Title title="Value with ellipsis" theme="light" level={4} />
-      <DxcSelect label="Label" options={optionsWithEllipsisMedium} value="1" size="medium" />
-      <Title title="Option with ellipsis" theme="light" level={4} />
-      <DxcSelect
-        label="Label"
-        placeholder="Choose an option"
-        value="1"
-        options={optionsWithEllipsisMedium}
-        size="medium"
-      />
-    </ExampleContainer>
-  </>
-);
-export const Chromatic = Select.bind({});
-Chromatic.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getAllByRole("combobox")[25]);
+    </ThemeProvider>
+  );
 };
-const DefaultSelect = () => (
-  <ExampleContainer expanded>
-    <Title title="Default select" theme="light" level={4} />
-    <DxcSelect label="Select label" options={single_options} optional placeholder="Choose an option" />
-  </ExampleContainer>
-);
+
 const SearchableSelect = () => (
   <ExampleContainer expanded>
     <Title title="Searchable select" theme="light" level={4} />
     <DxcSelect label="Select Label" searchable options={single_options} placeholder="Choose an option" />
   </ExampleContainer>
 );
-const SearchableWithValue = () => (
+const SearchValue = () => (
   <ExampleContainer expanded>
     <Title title="Searchable select with value" theme="light" level={4} />
-    <DxcSelect label="Select Label" searchable value="1" options={single_options} placeholder="Choose an option" />
+    <DxcSelect
+      label="Select Label"
+      searchable
+      defaultValue="1"
+      options={single_options}
+      placeholder="Choose an option"
+    />
   </ExampleContainer>
 );
-
 const MultipleSelect = () => (
   <>
     <ExampleContainer expanded>
@@ -372,7 +578,7 @@ const MultipleSelect = () => (
       <DxcSelect
         label="Select label"
         options={single_options}
-        value={["1", "4"]}
+        defaultValue={["1", "4"]}
         multiple
         placeholder="Choose an option"
       />
@@ -382,75 +588,21 @@ const MultipleSelect = () => (
 const DefaultGroupedOptionsSelect = () => (
   <ExampleContainer expanded>
     <Title title="Grouped options simple select" theme="light" level={4} />
-    <DxcSelect label="Label" options={group_options} value="9" placeholder="Choose an option" />
+    <DxcSelect label="Label" options={group_options} defaultValue="9" placeholder="Choose an option" />
   </ExampleContainer>
 );
 const MultipleGroupedOptionsSelect = () => (
   <ExampleContainer expanded>
     <Title title="Grouped options multiple select" theme="light" level={4} />
-    <DxcSelect label="Label" options={group_options} value={["0", "2"]} multiple placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const RescaledIcons = () => (
-  <ExampleContainer expanded>
-    <Title title="Rescaled icons displayed" theme="light" level={4} />
-    <DxcSelect label="Label" options={url_options} value="facebook" placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const SelectWithIcons = () => (
-  <ExampleContainer expanded>
-    <Title title="Normal icons displayed" theme="light" level={4} />
-    <DxcSelect label="Label" options={icon_options} value="3" placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const SelectMultipleWithIcons = () => (
-  <ExampleContainer expanded>
-    <Title title="Multiple select with icons" theme="light" level={4} />
-    <DxcSelect label="Label" options={icon_options} multiple value={["1", "3"]} placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const MultipleGroupedOptionsSelectWithIcons = () => (
-  <ExampleContainer expanded>
-    <Title title="Multiple grouped options with icons" theme="light" level={4} />
     <DxcSelect
       label="Label"
-      options={icon_options_grouped}
+      options={group_options}
+      defaultValue={["0", "2"]}
       multiple
-      value={["3", "2"]}
       placeholder="Choose an option"
     />
   </ExampleContainer>
 );
-const OnlyOneOptionHovered = () => (
-  <ExampleContainer pseudoState="pseudo-hover" expanded>
-    <Title title="Hovered Option" theme="light" level={4} />
-    <DxcSelect label="Hovered" options={one_option} placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const OnlyOneOptionFocused = () => (
-  <ExampleContainer pseudoState="pseudo-focus" expanded>
-    <Title title="Focused Option" theme="light" level={4} />
-    <DxcSelect label="Focused" options={one_option} placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const OnlyOneOptionActived = () => (
-  <ExampleContainer pseudoState="pseudo-active" expanded>
-    <Title title="Actived Option" theme="light" level={4} />
-    <DxcSelect label="Actived" options={one_option} placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const SelectedOptionHovered = () => (
-  <ExampleContainer pseudoState="pseudo-hover" expanded>
-    <Title title="Hovered Selected Option" theme="light" level={4} />
-    <DxcSelect label="Hovered" value="1" options={one_option} placeholder="Choose an option" />
-  </ExampleContainer>
-);
-const SelectedOptionActived = () => (
-  <ExampleContainer pseudoState="pseudo-active" expanded>
-    <Title title="Actived Selected Option" theme="light" level={4} />
-    <DxcSelect label="Actived" value="1" options={one_option} placeholder="Choose an option" />
-  </ExampleContainer>
-);
 const MultipleSearchable = () => (
   <ExampleContainer expanded>
     <Title title="Searchable multiple select with value" theme="light" level={4} />
@@ -458,34 +610,40 @@ const MultipleSearchable = () => (
       label="Select Label"
       searchable
       multiple
-      value={["1", "4"]}
+      defaultValue={["1", "4"]}
       options={single_options}
       placeholder="Choose an option"
     />
   </ExampleContainer>
 );
-export const OptionsDisplayed = DefaultSelect.bind({});
-OptionsDisplayed.play = async ({ canvasElement }) => {
+
+export const Chromatic = Select.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getAllByRole("combobox")[24]);
+};
+
+export const ListboxStates = SelectListbox.bind({});
+ListboxStates.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const select = canvas.getByRole("combobox");
   await userEvent.click(select);
 };
+
 export const Searchable = SearchableSelect.bind({});
 Searchable.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole("combobox"));
-  await waitFor(async () => {
-    userEvent.type(canvas.getByRole("combobox"), "r");
-  });
+  await userEvent.type(canvas.getByRole("combobox"), "r");
 };
-export const SelectSearchableWithValue = SearchableWithValue.bind({});
-SelectSearchableWithValue.play = async ({ canvasElement }) => {
+
+export const SearchableWithValue = SearchValue.bind({});
+SearchableWithValue.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole("combobox"));
 };
 
-export const SelectMultipleSearchableWithValue = MultipleSearchable.bind({});
-SelectMultipleSearchableWithValue.play = async ({ canvasElement }) => {
+export const MultipleSearchableWithValue = MultipleSearchable.bind({});
+MultipleSearchableWithValue.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getAllByRole("combobox")[0]);
 };
@@ -497,75 +655,14 @@ GroupOptionsDisplayed.play = async ({ canvasElement }) => {
   await userEvent.click(select);
 };
 
-export const SelectMultipleOptionsDisplayed = MultipleSelect.bind({});
-SelectMultipleOptionsDisplayed.play = async ({ canvasElement }) => {
+export const MultipleOptionsDisplayed = MultipleSelect.bind({});
+MultipleOptionsDisplayed.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getAllByRole("combobox")[0]);
 };
 
-export const SelectMultipleGroupedOptionsDisplayed = MultipleGroupedOptionsSelect.bind({});
-SelectMultipleGroupedOptionsDisplayed.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-export const SelectWithIconsDisplayed = SelectWithIcons.bind({});
-SelectWithIconsDisplayed.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-
-export const SelectWithRescaledIconsDisplayed = RescaledIcons.bind({});
-SelectWithRescaledIconsDisplayed.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-export const SelectMultipleWithIconsDisplayed = SelectMultipleWithIcons.bind({});
-SelectMultipleWithIconsDisplayed.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-
-export const SelectMultipleGroupedWithIconsDisplayed = MultipleGroupedOptionsSelectWithIcons.bind({});
-SelectMultipleGroupedWithIconsDisplayed.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-
-export const OptionHovered = OnlyOneOptionHovered.bind({});
-OptionHovered.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-
-export const OptionFocused = OnlyOneOptionFocused.bind({});
-OptionFocused.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-  await waitFor(async () => {
-    fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
-  });
-};
-export const OptionActived = OnlyOneOptionActived.bind({});
-OptionActived.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-export const OptionSelectedHovered = SelectedOptionHovered.bind({});
-OptionSelectedHovered.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const select = canvas.getByRole("combobox");
-  await userEvent.click(select);
-};
-export const OptionSelectedActived = SelectedOptionActived.bind({});
-OptionSelectedActived.play = async ({ canvasElement }) => {
+export const MultipleGroupedOptionsDisplayed = MultipleGroupedOptionsSelect.bind({});
+MultipleGroupedOptionsDisplayed.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   const select = canvas.getByRole("combobox");
   await userEvent.click(select);