From f6f8f644edae0a27723b9cf6af28d675b0f090e1 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 15:30:28 +0200
Subject: [PATCH 01/18] move ts expect error above style prop, fix ts error

---
 src/lib/components/tabsv2/StyledTabs.ts        | 2 +-
 src/lib/components/tabsv2/Tabsv2.component.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/tabsv2/StyledTabs.ts b/src/lib/components/tabsv2/StyledTabs.ts
index 4cfc72b422..e7ce0a6cf4 100644
--- a/src/lib/components/tabsv2/StyledTabs.ts
+++ b/src/lib/components/tabsv2/StyledTabs.ts
@@ -58,7 +58,7 @@ export const TabItem = styled.div<{
 `;
 export const TabsContainer = styled.div<{
   tabLineColor?: string;
-  separatorColor: string;
+  separatorColor?: string;
 }>`
   height: 100%;
   width: 100%;
diff --git a/src/lib/components/tabsv2/Tabsv2.component.tsx b/src/lib/components/tabsv2/Tabsv2.component.tsx
index cf7c99f6c4..f40967aec6 100644
--- a/src/lib/components/tabsv2/Tabsv2.component.tsx
+++ b/src/lib/components/tabsv2/Tabsv2.component.tsx
@@ -185,8 +185,8 @@ function Tabs({
   });
   return (
     <TabsContext.Provider value={true}>
-      {/*@ts-expect-error containerType is not yet a valid prop for react */}
       <TabsContainer
+        // @ts-expect-error containerType is not yet a valid prop for react
         style={{ containerType: 'size' }}
         className={['sc-tabs', className].join(' ')}
         tabLineColor={tabLineColor}

From 5370b67fc89fe359e2ef31ff00746a4f36bfcbdc Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 11:10:50 +0200
Subject: [PATCH 02/18] remove -moz-transform (obsolete since FF 36), update
 for new spacing

---
 .../components/toggle/Toggle.component.tsx    | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/toggle/Toggle.component.tsx b/src/lib/components/toggle/Toggle.component.tsx
index 5d04aabd80..eafc21364e 100644
--- a/src/lib/components/toggle/Toggle.component.tsx
+++ b/src/lib/components/toggle/Toggle.component.tsx
@@ -1,12 +1,11 @@
 import { ChangeEvent, InputHTMLAttributes, useRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { spacing } from '../../style/theme';
 import { LABEL_PREFIX, useFieldContext } from '../form/Form.component';
-import { Stack } from '../../spacing';
+import { Stack, spacing } from '../../spacing';
 import { Text } from '../text/Text.component';
 
-type Props = InputHTMLAttributes<HTMLInputElement> & {
+export type Props = InputHTMLAttributes<HTMLInputElement> & {
   toggle: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   label?: string;
@@ -20,8 +19,7 @@ const ToggleContainer = styled.span<{ disabled?: boolean }>`
 `;
 const Switch = styled.label<{ disabled?: boolean }>`
   position: relative;
-  width: ${spacing.sp24};
-  height: ${spacing.sp14};
+  width: ${spacing.r24};
   align-self: center;
   ${(props) => {
     return css`
@@ -39,23 +37,22 @@ const Slider = styled.div<{ toggle?: boolean }>`
   width: 100%;
   height: 1rem;
   background-color: ${(props) => props.theme.backgroundLevel1};
-  border: ${spacing.sp1} solid
+  border: ${spacing.r1} solid
     ${(props) => props.theme[props.toggle ? 'selectedActive' : 'infoPrimary']};
-  border-radius: ${spacing.sp8};
+  border-radius: ${spacing.r8};
   transition: 0.4s;
-  -moz-transform: rotate(0.02deg);
+
   &:before {
     border-radius: 100%;
     position: absolute;
     content: '';
-    height: ${spacing.sp10};
-    width: ${spacing.sp10};
+    height: ${spacing.r10};
+    width: ${spacing.r10};
     left: 3px;
     top: 3.5px;
     background-color: ${(props) =>
       props.theme[props.toggle ? 'textSecondary' : 'textPrimary']};
     transition: 0.4s;
-    -moz-transform: rotate(0.02deg);
   }
 `;
 const ToggleInput = styled.input`
@@ -63,7 +60,7 @@ const ToggleInput = styled.input`
     background-color: ${(props) => props.theme.selectedActive};
   }
   &:checked + ${Slider}:before {
-    transform: translateX(${spacing.sp10});
+    transform: translateX(${spacing.r10});
   }
   display: none;
 `;

From b0294365fe02ecc7d687d80fc6da736150b4ce9e Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 11:11:20 +0200
Subject: [PATCH 03/18] type toggle stories

---
 stories/toggle.stories.tsx | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/stories/toggle.stories.tsx b/stories/toggle.stories.tsx
index 90bfd24aae..4e6341e831 100644
--- a/stories/toggle.stories.tsx
+++ b/stories/toggle.stories.tsx
@@ -1,22 +1,26 @@
 import React, { useState } from 'react';
-import { Toggle } from '../src/lib/components/toggle/Toggle.component';
-import { Wrapper } from './common';
+import { Props, Toggle } from '../src/lib/components/toggle/Toggle.component';
 import { useArgs } from '@storybook/preview-api';
-export default {
+import { Meta, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<Props>;
+const meta: Meta = {
   title: 'Components/Inputs/Toggle',
   component: Toggle,
   args: {
     name: 'toggle',
   },
 };
-export const Playground = {
+export default meta;
+
+export const Playground: Story = {
   render: (args) => {
-    const [{ toggle }, updateArgs] = useArgs();
+    const [{ toggle }, updateArgs] = useArgs<{ toggle: boolean }>();
     return (
       <Toggle
-        toggle={toggle}
-        onChange={() => updateArgs({ toggle: !toggle })}
         {...args}
+        onChange={() => updateArgs({ toggle: !toggle })}
+        toggle={toggle}
       />
     );
   },
@@ -24,18 +28,18 @@ export const Playground = {
     label: 'Playground',
   },
 };
-export const LabelledToggle = {
+export const LabelledToggle: Story = {
   render: (args) => {
     const [toggle, setToggle] = useState(false);
     return (
-      <Toggle toggle={toggle} onChange={() => setToggle(!toggle)} {...args} />
+      <Toggle {...args} toggle={toggle} onChange={() => setToggle(!toggle)} />
     );
   },
   args: {
     label: 'Airplane mode',
   },
 };
-export const DisabledToggle = {
+export const DisabledToggle: Story = {
   ...Playground,
   args: {
     label: 'Disabled Toggle',

From 90e4fdc1935b90e7a2055af7a6489915f5ad7971 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 11:20:17 +0200
Subject: [PATCH 04/18] init guideline

---
 stories/Toggle/toggle.guideline.mdx     | 20 ++++++++++++++++++++
 stories/{ => Toggle}/toggle.stories.tsx |  5 ++++-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 stories/Toggle/toggle.guideline.mdx
 rename stories/{ => Toggle}/toggle.stories.tsx (92%)

diff --git a/stories/Toggle/toggle.guideline.mdx b/stories/Toggle/toggle.guideline.mdx
new file mode 100644
index 0000000000..d0095f8855
--- /dev/null
+++ b/stories/Toggle/toggle.guideline.mdx
@@ -0,0 +1,20 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+
+import * as Stories from './toggle.stories';
+
+<Meta name="Guideline" of={Stories} />
+
+<Primary>
+  <Stories.Playground />
+</Primary>
+<Controls />
+
+<Source />
diff --git a/stories/toggle.stories.tsx b/stories/Toggle/toggle.stories.tsx
similarity index 92%
rename from stories/toggle.stories.tsx
rename to stories/Toggle/toggle.stories.tsx
index 4e6341e831..b0890384f9 100644
--- a/stories/toggle.stories.tsx
+++ b/stories/Toggle/toggle.stories.tsx
@@ -1,5 +1,8 @@
 import React, { useState } from 'react';
-import { Props, Toggle } from '../src/lib/components/toggle/Toggle.component';
+import {
+  Props,
+  Toggle,
+} from '../../src/lib/components/toggle/Toggle.component';
 import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
 

From 9ae7d3fffd9cb76bdcf4aaa7916ac09341483632 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 11:56:39 +0200
Subject: [PATCH 05/18] init test for Toggle

---
 src/lib/components/toggle/Toggle.test.tsx | 64 +++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/lib/components/toggle/Toggle.test.tsx

diff --git a/src/lib/components/toggle/Toggle.test.tsx b/src/lib/components/toggle/Toggle.test.tsx
new file mode 100644
index 0000000000..327e5f5228
--- /dev/null
+++ b/src/lib/components/toggle/Toggle.test.tsx
@@ -0,0 +1,64 @@
+/**
+ * - Test the Toggle component
+ * - Should render the Toggle component
+ * - Should render the Toggle component with a label
+ * - Should toggle the switch on click
+ * - Should toggle the switch when pressing the space key or enter key
+ * - Should not toggle the switch when disabled
+ * - Should not toggle the switch when disabled and pressing the space key or enter key
+ *
+ *
+ *
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { Toggle } from './Toggle.component';
+
+describe('Toggle', () => {
+  let toggle = false;
+  const handleClick = () => {
+    toggle = !toggle;
+  };
+  beforeEach(() => {
+    toggle = false;
+  });
+  it('should render the Toggle component with label', () => {
+    render(<Toggle onChange={() => {}} toggle label="Test"></Toggle>);
+    const toggle = screen.getByRole('checkbox');
+    expect(toggle).toBeInTheDocument();
+    const label = screen.getByText('Test');
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should toggle the switch on click on checkbox or label', () => {
+    render(
+      <Toggle onChange={handleClick} toggle={toggle} label="Test"></Toggle>,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.click(checkbox);
+    expect(toggle).toBe(true);
+    const label = screen.getByText('Test');
+    fireEvent.click(label);
+    expect(toggle).toBe(false);
+  });
+
+  it('should toggle the switch when pressing the space key or enter key', () => {
+    render(
+      <Toggle onChange={handleClick} toggle={toggle} label="Test"></Toggle>,
+    );
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.keyDown(checkbox, { key: 'Enter', code: 'Enter', charCode: 13 });
+    expect(toggle).toBe(true);
+    fireEvent.keyDown(checkbox, { key: ' ', code: 'Space', charCode: 32 });
+    expect(toggle).toBe(false);
+  });
+
+  it('should not toggle the switch when disabled', () => {
+    render(<Toggle onChange={() => {}} toggle disabled label="Test"></Toggle>);
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.click(checkbox);
+    expect(toggle).toBe(false);
+    fireEvent.keyDown(checkbox, { key: 'Enter', code: 'Enter', charCode: 13 });
+    expect(toggle).toBe(false);
+  });
+});

From 9d2293bd7e8d19886e8d91b77ff2d65d0413e361 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 16:37:05 +0200
Subject: [PATCH 06/18] remove disableToggle prop from searchInput

---
 src/lib/components/searchinput/SearchInput.component.tsx | 2 --
 stories/searchinput.stories.tsx                          | 6 +-----
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/lib/components/searchinput/SearchInput.component.tsx b/src/lib/components/searchinput/SearchInput.component.tsx
index 82568071bb..036f79e290 100644
--- a/src/lib/components/searchinput/SearchInput.component.tsx
+++ b/src/lib/components/searchinput/SearchInput.component.tsx
@@ -10,7 +10,6 @@ export type Props = {
   value: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
   onReset?: () => void;
-  disableToggle: boolean;
   disabled?: boolean;
   id?: string;
   size?: InputSize;
@@ -57,7 +56,6 @@ const ClearButton = styled.div`
 const SearchInput = forwardRef(
   (
     {
-      disableToggle,
       placeholder,
       value,
       onChange,
diff --git a/stories/searchinput.stories.tsx b/stories/searchinput.stories.tsx
index bb0a0e3527..82dd375b07 100644
--- a/stories/searchinput.stories.tsx
+++ b/stories/searchinput.stories.tsx
@@ -21,7 +21,7 @@ export const Default = {
             placeholder="Search server..."
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={false}
+            autoComplete="off"
           />
         </div>
         <Title>Disabled</Title>
@@ -36,7 +36,6 @@ export const Default = {
             placeholder="Search server..."
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={true}
           />
         </div>
         <Title>Search Input filled</Title>
@@ -49,7 +48,6 @@ export const Default = {
             value="carlito"
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={false}
             data-cy="carlito_searchinput"
           />
         </div>
@@ -64,7 +62,6 @@ export const Default = {
             placeholder="Search and Filter…"
             onChange={action('on input change')}
             onReset={action('on input reset')}
-            disableToggle={true}
           />
         </div>
         <Title>Disable the default toggle undefined onReset action</Title>
@@ -77,7 +74,6 @@ export const Default = {
             value=""
             placeholder="Search and Filter…"
             onChange={action('on input change')}
-            disableToggle={true}
           />
         </div>
       </Wrapper>

From 1342e7d8eae68d33aa3faaf4f8d4e3b16cc79e67 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 16:37:28 +0200
Subject: [PATCH 07/18] init Search Input test

---
 .../searchinput/SearchInput.test.tsx          | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/lib/components/searchinput/SearchInput.test.tsx

diff --git a/src/lib/components/searchinput/SearchInput.test.tsx b/src/lib/components/searchinput/SearchInput.test.tsx
new file mode 100644
index 0000000000..6366feb7f0
--- /dev/null
+++ b/src/lib/components/searchinput/SearchInput.test.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { SearchInput, Props } from './SearchInput.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import userEvent from '@testing-library/user-event';
+
+const queryClient = new QueryClient();
+
+const SearchInputRender = (props: Props) => {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SearchInput {...props} />
+    </QueryClientProvider>
+  );
+};
+
+describe('SearchInput', () => {
+  const selectors = {
+    searchInput: () => screen.getByRole('searchbox'),
+    //? queryBy is used to avoid the error when the element is not found
+    clearButton: () => screen.queryByRole('button'),
+  };
+  it('should render the SearchInput component', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with placeholder', () => {
+    render(
+      <SearchInputRender value="" onChange={() => {}} placeholder="Search" />,
+    );
+
+    const searchInput = screen.queryByPlaceholderText('Example: Search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render the SearchInput component with disabled prop', () => {
+    render(<SearchInputRender value="" onChange={() => {}} disabled />);
+
+    const searchInput = selectors.searchInput();
+    expect(searchInput).toBeInTheDocument();
+    expect(searchInput).toBeDisabled();
+  });
+
+  it('should change value instantly but call the onChange function with a 300ms delay after the end of typing', async () => {
+    const onChange = jest.fn();
+    render(<SearchInputRender value="" onChange={onChange} />);
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+    expect(searchInput).toHaveValue('test');
+    expect(onChange).not.toHaveBeenCalled();
+    await waitFor(
+      () => {
+        expect(onChange).toHaveBeenCalled();
+      },
+      { timeout: 350 },
+    );
+  });
+
+  it('should have a clear button when the input is not empty', () => {
+    render(<SearchInputRender value="" onChange={() => {}} />);
+
+    // clear button should not be rendered as value is empty
+    let clearButton = selectors.clearButton();
+    expect(clearButton).not.toBeInTheDocument();
+
+    const searchInput = selectors.searchInput();
+    userEvent.type(searchInput, 'test');
+
+    // clear button should now be rendered
+    clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+  });
+
+  it('should call the onReset function when the clear button is clicked and clear the input value', async () => {
+    const onReset = jest.fn();
+    render(
+      <SearchInputRender value="test" onChange={() => {}} onReset={onReset} />,
+    );
+    const searchInput = selectors.searchInput();
+    const clearButton = selectors.clearButton();
+    expect(clearButton).toBeInTheDocument();
+    clearButton && userEvent.click(clearButton);
+    expect(onReset).toHaveBeenCalled();
+    expect(searchInput).toHaveValue('');
+  });
+
+  // ? Should we test the autocomplete prop? (It is a browser feature so should be no)
+  // ? Should the clear button be hidden/disabled when the input is disabled?
+  // ? And should the text be greyed out?
+});

From 12f63103f5ba0aa7d901a2162aca5de7e48c1a7f Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Thu, 27 Jun 2024 17:15:13 +0200
Subject: [PATCH 08/18] init guideline for search input

---
 stories/SearchInput/searchinput.guideline.mdx | 20 +++++++++++++
 .../{ => SearchInput}/searchinput.stories.tsx | 28 +++++++++----------
 2 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 stories/SearchInput/searchinput.guideline.mdx
 rename stories/{ => SearchInput}/searchinput.stories.tsx (81%)

diff --git a/stories/SearchInput/searchinput.guideline.mdx b/stories/SearchInput/searchinput.guideline.mdx
new file mode 100644
index 0000000000..c10b1ee419
--- /dev/null
+++ b/stories/SearchInput/searchinput.guideline.mdx
@@ -0,0 +1,20 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+import { SearchInput } from '../../src/lib/components/searchinput/SearchInput.component';
+
+import * as Stories from './searchinput.stories';
+
+<Meta name="Guideline" of={Stories} />
+
+# Search Input
+
+<Story of={Stories.Debounce} />
+<Controls of={Stories.Debounce} />
+<Source of={Stories.Debounce} />
diff --git a/stories/searchinput.stories.tsx b/stories/SearchInput/searchinput.stories.tsx
similarity index 81%
rename from stories/searchinput.stories.tsx
rename to stories/SearchInput/searchinput.stories.tsx
index 82dd375b07..78b156b14e 100644
--- a/stories/searchinput.stories.tsx
+++ b/stories/SearchInput/searchinput.stories.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
-import { SearchInput } from '../src/lib/components/searchinput/SearchInput.component';
-import { Wrapper, Title } from './common';
+import { SearchInput } from '../../src/lib/components/searchinput/SearchInput.component';
+import { Wrapper, Title } from '../common';
 export default {
   title: 'Components/Inputs/SearchInput',
   component: SearchInput,
@@ -84,19 +84,17 @@ export const Debounce = {
   render: (args) => {
     const [value, setValue] = useState('');
     return (
-      <Wrapper>
-        <SearchInput
-          placeholder="Search"
-          value={value}
-          disableToggle
-          onReset={action('on input reset')}
-          onChange={(e) => {
-            setValue(e.target.value);
-            action('debounce')(`${e.target} changed`);
-          }}
-          {...args}
-        />
-      </Wrapper>
+      <SearchInput
+        placeholder="Search"
+        value={value}
+        disableToggle
+        onReset={action('on input reset')}
+        onChange={(e) => {
+          setValue(e.target.value);
+          action('debounce')(`${e.target} changed`);
+        }}
+        {...args}
+      />
     );
   },
 };

From 627a10486f01a224b0a2f5e6393a870ec86398ff Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Mon, 1 Jul 2024 15:08:26 +0200
Subject: [PATCH 09/18] improve toggle tests

---
 src/lib/components/toggle/Toggle.test.tsx | 86 ++++++++++-------------
 1 file changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/toggle/Toggle.test.tsx b/src/lib/components/toggle/Toggle.test.tsx
index 327e5f5228..24abe47464 100644
--- a/src/lib/components/toggle/Toggle.test.tsx
+++ b/src/lib/components/toggle/Toggle.test.tsx
@@ -1,64 +1,56 @@
-/**
- * - Test the Toggle component
- * - Should render the Toggle component
- * - Should render the Toggle component with a label
- * - Should toggle the switch on click
- * - Should toggle the switch when pressing the space key or enter key
- * - Should not toggle the switch when disabled
- * - Should not toggle the switch when disabled and pressing the space key or enter key
- *
- *
- *
- */
-import { render, screen, fireEvent } from '@testing-library/react';
-import React from 'react';
-import { Toggle } from './Toggle.component';
+import { render, screen } from '@testing-library/react';
+import React, { useState } from 'react';
+import { Props, Toggle } from './Toggle.component';
+import userEvent from '@testing-library/user-event';
 
 describe('Toggle', () => {
-  let toggle = false;
-  const handleClick = () => {
-    toggle = !toggle;
+  const selectors = {
+    toggle: () => screen.getByRole('checkbox'),
+    label: (text: string | RegExp) => screen.getByText(text),
   };
-  beforeEach(() => {
-    toggle = false;
-  });
+  const RenderToggle = (props: Omit<Props, 'onChange' | 'toggle'>) => {
+    const [toggle, setToggle] = useState<boolean>(false);
+    const handleClick = () => {
+      setToggle(!toggle);
+    };
+    return <Toggle {...props} toggle={toggle} onChange={handleClick} />;
+  };
+
   it('should render the Toggle component with label', () => {
-    render(<Toggle onChange={() => {}} toggle label="Test"></Toggle>);
-    const toggle = screen.getByRole('checkbox');
+    render(<RenderToggle label="Test" />);
+    const toggle = selectors.toggle();
     expect(toggle).toBeInTheDocument();
-    const label = screen.getByText('Test');
+    const label = selectors.label(/Test/);
     expect(label).toBeInTheDocument();
   });
 
   it('should toggle the switch on click on checkbox or label', () => {
-    render(
-      <Toggle onChange={handleClick} toggle={toggle} label="Test"></Toggle>,
-    );
-    const checkbox = screen.getByRole('checkbox');
-    fireEvent.click(checkbox);
-    expect(toggle).toBe(true);
-    const label = screen.getByText('Test');
-    fireEvent.click(label);
-    expect(toggle).toBe(false);
+    render(<RenderToggle label="Test"></RenderToggle>);
+    const toggle = selectors.toggle();
+    userEvent.click(toggle);
+    expect(toggle).toBeChecked();
+    const label = selectors.label('Test');
+    userEvent.click(label);
+    expect(toggle).not.toBeChecked();
   });
 
   it('should toggle the switch when pressing the space key or enter key', () => {
-    render(
-      <Toggle onChange={handleClick} toggle={toggle} label="Test"></Toggle>,
-    );
-    const checkbox = screen.getByRole('checkbox');
-    fireEvent.keyDown(checkbox, { key: 'Enter', code: 'Enter', charCode: 13 });
-    expect(toggle).toBe(true);
-    fireEvent.keyDown(checkbox, { key: ' ', code: 'Space', charCode: 32 });
-    expect(toggle).toBe(false);
+    render(<RenderToggle />);
+    const toggle = selectors.toggle();
+    userEvent.tab();
+    userEvent.keyboard('{space}');
+    expect(toggle).toBeChecked();
+    userEvent.keyboard('{enter}');
+    expect(toggle).not.toBeChecked();
   });
 
   it('should not toggle the switch when disabled', () => {
-    render(<Toggle onChange={() => {}} toggle disabled label="Test"></Toggle>);
-    const checkbox = screen.getByRole('checkbox');
-    fireEvent.click(checkbox);
-    expect(toggle).toBe(false);
-    fireEvent.keyDown(checkbox, { key: 'Enter', code: 'Enter', charCode: 13 });
-    expect(toggle).toBe(false);
+    render(<RenderToggle disabled={true} />);
+    const toggle = selectors.toggle();
+    // toBeDisabled is not working for some reason
+    userEvent.tab();
+    expect(toggle).not.toHaveFocus();
+    userEvent.click(toggle);
+    expect(toggle).not.toBeChecked();
   });
 });

From 5a0cf0a19d975084e5b0d87a59a330a682ea9c46 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 3 Jul 2024 10:49:24 +0200
Subject: [PATCH 10/18] add useArgs in WithDefaultvalue story

---
 stories/Select/selectv2.stories.tsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/stories/Select/selectv2.stories.tsx b/stories/Select/selectv2.stories.tsx
index 7d69d69e9d..186175416f 100644
--- a/stories/Select/selectv2.stories.tsx
+++ b/stories/Select/selectv2.stories.tsx
@@ -5,6 +5,7 @@ import { Modal } from '../../src/lib/components/modal/Modal.component';
 import { Select } from '../../src/lib/components/selectv2/Selectv2.component';
 import { Wrapper } from '../common';
 import { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
 
 type SelectStory = StoryObj<typeof Select>;
 const meta: Meta<typeof Select> = {
@@ -167,3 +168,27 @@ export const NotEnoughPlaceAtTheBottom: SelectStory = {
     children: optionsWithSearchBar,
   },
 };
+
+export const WithDefaultValue: SelectStory = {
+  render: (args) => {
+    const [{ value }, updateArgs] = useArgs();
+    return (
+      <div>
+        <Select
+          {...args}
+          onChange={(value) => updateArgs({ value })}
+          value={value}
+        ></Select>
+
+        <h2>Selected value</h2>
+        <p>{value}</p>
+      </div>
+    );
+  },
+  args: {
+    value: undefined,
+    placeholder: 'Select an option',
+    children: defaultOptions,
+    defaultValue: defaultOptions[0].props.value,
+  },
+};

From 3e38ba16792361d231bf13ce28d70f16f5707421 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 3 Jul 2024 10:50:47 +0200
Subject: [PATCH 11/18] change Select test, remove test for each type of
 variant as "rounded" is deprecated

---
 src/lib/components/selectv2/selectv2.test.tsx | 366 ++++++++----------
 1 file changed, 166 insertions(+), 200 deletions(-)

diff --git a/src/lib/components/selectv2/selectv2.test.tsx b/src/lib/components/selectv2/selectv2.test.tsx
index dc4262c3d6..ff81d9ee5a 100644
--- a/src/lib/components/selectv2/selectv2.test.tsx
+++ b/src/lib/components/selectv2/selectv2.test.tsx
@@ -1,13 +1,7 @@
-import {
-  screen,
-  render as testingRender,
-  within,
-} from '@testing-library/react';
+import { screen, render as testingRender } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { debug } from 'jest-preview';
-import { Icon } from '../icon/Icon.component';
 import { Option, Select } from '../selectv2/Selectv2.component';
 
 const render = (args) => {
@@ -27,22 +21,38 @@ const generateOptionsData = (n: number) =>
 
 const generateOptions = (n: number) => {
   return generateOptionsData(n).map((o, i) => (
-    <Option key={i} value={o.value} {...o}>
+    <Option key={i} {...o} value={o.value}>
       {o.label}
     </Option>
   ));
 };
-
+const users = [
+  {
+    label: 'User 1',
+    value: '1',
+  },
+  {
+    label: 'User 2',
+    value: '2',
+  },
+];
+
+const basicOptions = () => {
+  return users.map((user, index) => (
+    <Option key={index} value={user.value}>
+      {user.label}
+    </Option>
+  ));
+};
 const SelectWrapper = (props) => {
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState<string | null>(null);
   return (
     <Select value={value} onChange={(value) => setValue(value)} {...props}>
-      {props.children}
+      {props.children || basicOptions()}
     </Select>
   );
 };
 
-const variants = ['default', 'rounded'];
 const optionsWithScrollSearchBar = generateOptions(10); // more than 8 options should display searchbar + scrollbar
 
 const simpleOptions = generateOptions(4); // less than 5 options should not displays any scroll/search bar
@@ -64,218 +74,174 @@ const SelectReset = (props) => {
 };
 
 describe('SelectV2', () => {
-  const toBeClose = (container) => {
-    expect(container.getElementsByClassName('sc-select__option').length).toBe(
-      0,
-    );
-  };
-
-  const toBeOpenWith = (container, optionsLength: number) => {
-    expect(container.getElementsByClassName('sc-select__option').length).toBe(
-      optionsLength,
-    );
-  };
-
-  const toggleSelect = (container) => {
-    userEvent.click(container.querySelector('.sc-select__control'));
+  const selectors = {
+    option: (name: string | RegExp) => screen.getByRole('option', { name }),
+    options: () => screen.queryAllByRole('option'),
+    select: (withSearch?: boolean, name?: string) => {
+      if (withSearch) {
+        return screen.getByRole('combobox', { name });
+      }
+      return screen.getByRole('listbox', { name });
+    },
+    input: () => screen.getByRole('textbox'),
+    noOptions: () => screen.getByText(/No options/i),
   };
 
-  test.each(variants)(
-    'should open select on click/Enter/ArrowDown',
-    (variant) => {
-      const { container } = render(
-        <SelectWrapper variant={variant}>{simpleOptions}</SelectWrapper>,
-      );
-      // should open on click
-      toBeClose(container);
-      toggleSelect(container); // open
-
-      toBeOpenWith(container, simpleOptions.length);
-      toggleSelect(container); // close
-
-      userEvent.tab(); // remove focus
+  it('should throw error if <Option/> is outside <Select/>', () => {
+    expect(() => render(<Option value="Option 1" />)).toThrowError();
+  });
 
-      // should open with Enter/ArrowDown
-      ['Enter', 'ArrowDown'].forEach((key) => {
-        // should open on arrow down
-        toBeClose(container);
-        userEvent.tab(); // focus
+  it('should open/close on click', () => {
+    render(<SelectWrapper />);
+    const select = selectors.select();
+    expect(select).toBeInTheDocument();
+    let options = selectors.options();
+    expect(options).toHaveLength(0);
+
+    // should open on click
+    userEvent.click(select);
+    users.forEach((user) => {
+      const option = selectors.option(user.label);
+      expect(option).toBeInTheDocument();
+    });
+
+    userEvent.click(select);
+    options = selectors.options();
+    expect(options).toHaveLength(0);
+  });
 
-        userEvent.keyboard(`{${key}}`);
-        toBeOpenWith(container, simpleOptions.length);
-        toggleSelect(container); // close select
+  it('should open/close with keyboard', () => {
+    render(<SelectWrapper />);
+    const select = selectors.select();
+    expect(select).toBeInTheDocument();
+    const options = selectors.options();
+    expect(options).toHaveLength(0);
+
+    // should open on Enter
+    userEvent.tab();
+    userEvent.keyboard('{Enter}');
+    users.forEach((user) => {
+      const option = selectors.option(user.label);
+      expect(option).toBeInTheDocument();
+    });
+
+    // should close on Enter
+    userEvent.keyboard('{Enter}');
+    expect(options).toHaveLength(0);
+
+    // should open on ArrowDown
+    userEvent.tab();
+    userEvent.keyboard('{ArrowDown}');
+    users.forEach((user) => {
+      const option = selectors.option(user.label);
+      expect(option).toBeInTheDocument();
+    });
+  });
 
-        toBeClose(container);
-        userEvent.tab(); // remove focus
-      });
-    },
-  );
-  test.each(variants)('should display custom placeholder', (variant) => {
+  it('should display custom placeholder', () => {
     const placeholder = 'My placeholder...';
-    const { container } = render(
-      <SelectWrapper variant={variant} placeholder={placeholder}>
-        {simpleOptions}
-      </SelectWrapper>,
-    );
-    expect(
-      container.querySelector('.sc-select__placeholder'),
-    ).toHaveTextContent(placeholder);
-  });
-  test.each(variants)('should display default value', (variant) => {
-    const options = [
-      {
-        value: 0,
-        label: 'Label 0',
-      },
-    ];
-    const { container } = render(
-      <Select variant={variant} defaultValue={options[0]} options={options} />,
-    );
-    expect(container.querySelector('.sc-select__placeholder')).toBeNull();
-    expect(
-      container.querySelector('.sc-select__single-value'),
-    ).toHaveTextContent('Label 0');
-  });
-  test.each(variants)('select should be disabled', (variant) => {
-    const { container } = render(
-      <Select variant={variant} disabled defaultValue="0">
-        <Option value="0">{'Label 0'}</Option>
-      </Select>,
-    );
-    expect(container.querySelector('input')).toBeDisabled();
+    render(<SelectWrapper placeholder={placeholder} />);
+    const input = selectors.input();
+    expect(input).toBeInTheDocument();
+    expect(screen.getByText(placeholder)).toBeInTheDocument();
   });
-  test.each(variants)('should display no options', (variant) => {
-    const { container } = render(<Select variant={variant} />);
-    toggleSelect(container, variant);
-    expect(
-      container.querySelector('.sc-select__menu-notice--no-options'),
-    ).toHaveTextContent('No options');
+
+  // This test is failing as Select is not working as expected
+  // TODO Work on Select component to display default value when it is defined and value is not
+  it('should display default value', () => {
+    const defaultUser = users[0];
+    render(<SelectWrapper defaultValue={defaultUser.value} />);
+    const select = selectors.select();
+    expect(select).toHaveTextContent(defaultUser.label);
   });
-  test.each(variants)(
-    'should display a search bar if more than 8 options',
-    (variant) => {
-      const { container } = render(
-        <SelectWrapper variant={variant}>
-          {optionsWithScrollSearchBar}
-        </SelectWrapper>,
-      );
-      expect(container.querySelector('.sc-select__input')).not.toBeNull();
-    },
-  );
-  test.each(variants)('should display option', (variant) => {
-    const { container, getByTestId } = render(
-      <Select variant={variant}>
-        <Option data-testid="disabledOption" value="0" disabled>
-          Label 1
-        </Option>
-        <Option
-          data-testid="option2"
-          value="1"
-          icon={<Icon name="Deletion-marker" />}
-        >
-          Label 2
-        </Option>
-      </Select>,
-    );
-    toggleSelect(container);
-    expect(getByTestId('disabledOption')).toHaveAttribute(
-      'aria-disabled',
-      'true',
-    );
-    const icon = getByTestId('option2').querySelector('i');
-    expect(icon).not.toBeNull();
-    expect(icon).toHaveAttribute('aria-label', 'Deletion-marker ');
+
+  it('should be disabled', () => {
+    render(<SelectWrapper disabled />);
+    // select input instead of select as disabled attribute is on input
+    const input = selectors.input();
+    expect(input).toBeDisabled();
   });
-  test.each(variants)(
-    '<Option/> component should throw if outside <Select/>',
-    () => {
-      // mock console.error to not display error message on throw
-      jest.spyOn(console, 'error');
-      console.error.mockImplementation(() => {});
-      expect(() => render(<Option />)).toThrowError();
-      console.error.mockRestore(); // restore console.error
-    },
-  );
-  test.each(variants)('should highlight text on search', (variant) => {
-    const { container, getByTestId } = render(
-      <SelectWrapper variant={variant}>
-        {optionsWithScrollSearchBar}
+
+  it('should display no option', () => {
+    render(
+      <SelectWrapper>
+        <></>
       </SelectWrapper>,
     );
-    toggleSelect(container);
-    userEvent.type(container.querySelector('input'), 'Ite');
-    const firstOption = getByTestId('option0');
-    expect(firstOption).toHaveClass('sc-select__option--is-focused');
-    expect(
-      container.querySelector('.sc-highlighted-matching-text'),
-    ).toHaveTextContent('Ite');
+    const select = selectors.select();
+    userEvent.click(select);
+    const noOptions = selectors.noOptions();
+    expect(noOptions).toBeInTheDocument();
   });
-  test.each(variants)('should select/unselect option', (variant) => {
-    const { container, getByTestId } = render(
-      <SelectWrapper variant={variant}>{simpleOptions}</SelectWrapper>,
-    );
-    // select option
-    toggleSelect(container); // open select
-
-    toBeOpenWith(container, simpleOptions.length);
-    userEvent.click(getByTestId('option0'));
-    toBeClose(container); // selecting an option should close select
 
-    // unselect option
-    toggleSelect(container); // reopen select
+  it('should display a search bar if more than 8 options', () => {
+    render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
+    const select = selectors.select(true);
+    userEvent.click(select);
+    const input = selectors.input();
+    // An input exists even when the search bar is not displayed with a readOnly attribute
+    // Search bar input does not have the readOnly attribute and is focused at the opening of the select
+    expect(input).toBeInTheDocument();
+    expect(input).not.toHaveAttribute('readOnly');
+    expect(input).toHaveFocus();
+  });
 
-    expect(getByTestId('option0')).toHaveClass(
-      'sc-select__option--is-selected',
-    );
-    // should be focused on the selected option
-    expect(getByTestId('option0')).toHaveAttribute('aria-selected', 'true');
-    userEvent.click(getByTestId('option1')); // click on another option
+  it('should filter and highlight on search', () => {
+    render(<SelectWrapper>{generateOptions(10)} </SelectWrapper>);
+    const select = selectors.select(true);
+    userEvent.click(select);
+    const input = selectors.input();
+    expect(input).toBeInTheDocument();
+    userEvent.type(input, '2');
+
+    const option = selectors.option(/2/);
+    expect(option).toHaveTextContent('Item 2');
+    // select with classname is the easiest way to test the highlight (as there is a lot of layer with no specific role)
+    expect(
+      option.querySelector('.sc-highlighted-matching-text'),
+    ).toHaveTextContent('2');
+  });
 
-    toBeClose(container); // selecting an option should close select
+  it('should select/unselect option with keyboard', () => {
+    render(<SelectWrapper></SelectWrapper>);
+    const select = selectors.select();
+    userEvent.tab();
+    userEvent.keyboard('{ArrowDown}');
+    let options = selectors.options();
 
-    toggleSelect(container); // reopen select
+    // select first option
+    expect(options[0]).toHaveClass('sc-select__option--is-focused');
+    userEvent.keyboard('{Enter}');
+    expect(select).toHaveTextContent('User 1');
 
-    expect(getByTestId('option1')).toHaveClass(
-      'sc-select__option--is-selected',
-    );
-    expect(getByTestId('option1')).toHaveAttribute('aria-selected', 'true');
-    expect(getByTestId('option0')).not.toHaveClass(
-      'sc-select__option--is-selected',
-    );
-    expect(getByTestId('option0')).not.toHaveAttribute('aria-selected', 'true');
-  });
-  test.each(variants)('should focus on keyDown/keyUp', (variant) => {
-    const { container, getByTestId } = render(
-      <SelectWrapper variant={variant}>{simpleOptions}</SelectWrapper>,
-    );
-    toggleSelect(container);
+    // reopen select, the previous selected option should have selected class
+    userEvent.tab();
     userEvent.keyboard('{ArrowDown}');
-    expect(getByTestId('option0')).not.toHaveClass(
-      'sc-select__option--is-focused',
-    );
-    expect(getByTestId('option1')).toHaveClass('sc-select__option--is-focused');
-    userEvent.keyboard('{ArrowUp}');
-    expect(getByTestId('option0')).toHaveClass('sc-select__option--is-focused');
-    expect(getByTestId('option1')).not.toHaveClass(
-      'sc-select__option--is-focused',
-    );
+    userEvent.keyboard('{ArrowDown}');
+    options = selectors.options();
+    expect(options[0]).toHaveClass('sc-select__option--is-selected');
+    expect(options[1]).toHaveClass('sc-select__option--is-focused');
+    userEvent.keyboard('{Enter}');
+    expect(select).toHaveTextContent('User 2');
   });
-  test.each(variants)('should be able to reset the value', (variant) => {
-    const { container } = render(
-      <SelectReset variant={variant}>{simpleOptions}</SelectReset>,
-    );
-    userEvent.click(container.querySelector('button'));
-    expect(
-      container.querySelector('.sc-select__placeholder'),
-    ).toHaveTextContent('Select...');
+
+  it('should be able to reset the value', () => {
+    render(<SelectReset>{simpleOptions}</SelectReset>);
+    const button = screen.getByText(/reset/);
+    userEvent.click(button);
+    const select = selectors.select();
+    expect(select).toHaveTextContent('Select...');
   });
 
   it('should not trigger onChange when defaultValue is empty string', () => {
     const onChange = jest.fn();
     render(
-      <Select value={''} onChange={onChange}>
-        <Option value="test">test</Option>
-      </Select>,
+      <SelectWrapper
+        id="test-select-empty-string"
+        value={''}
+        onChange={onChange}
+        defaultValue=""
+      />,
     );
     expect(onChange).toBeCalledTimes(0);
   });

From 136d02f9f06d3aa612ed2b6ae24489567bca5dad Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 3 Jul 2024 11:00:31 +0200
Subject: [PATCH 12/18] remove disableToggle occurence

---
 src/lib/components/tablev2/Search.tsx             | 3 +--
 src/lib/organisms/attachments/AttachmentTable.tsx | 2 --
 stories/SearchInput/searchinput.stories.tsx       | 1 -
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/lib/components/tablev2/Search.tsx b/src/lib/components/tablev2/Search.tsx
index 0ccd123570..970d3c5105 100644
--- a/src/lib/components/tablev2/Search.tsx
+++ b/src/lib/components/tablev2/Search.tsx
@@ -17,7 +17,7 @@ export type SearchProps = {
   value?: string;
   locale?: TableLocalType;
   totalCount?: number;
-} & Omit<Props, 'disableToggle' | 'onChange'>;
+} & Omit<Props, 'onChange'>;
 
 const SearchContainer = styled.div`
   display: flex;
@@ -88,7 +88,6 @@ export function TableSearch(props: SearchProps) {
       <SearchInput
         value={value}
         placeholder={translations[locale].search}
-        disableToggle
         size="1"
         onChange={(evt) => {
           if (typeof onChange === 'function') {
diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx
index 2c9fca09b2..dcc5862e18 100644
--- a/src/lib/organisms/attachments/AttachmentTable.tsx
+++ b/src/lib/organisms/attachments/AttachmentTable.tsx
@@ -594,7 +594,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
                 onBlur={() => {
                   setSearchInputIsFocused(false);
                 }}
-                disableToggle
                 disabled={filteredEntities.status === 'error'}
               />
               <Loader />
@@ -616,7 +615,6 @@ export const AttachmentTable = <ENTITY_TYPE,>({
             onBlur={() => {
               setSearchInputIsFocused(false);
             }}
-            disableToggle
             searchInputIsFocused={searchInputIsFocused}
           />
         )}
diff --git a/stories/SearchInput/searchinput.stories.tsx b/stories/SearchInput/searchinput.stories.tsx
index 78b156b14e..6e95299c6e 100644
--- a/stories/SearchInput/searchinput.stories.tsx
+++ b/stories/SearchInput/searchinput.stories.tsx
@@ -87,7 +87,6 @@ export const Debounce = {
       <SearchInput
         placeholder="Search"
         value={value}
-        disableToggle
         onReset={action('on input reset')}
         onChange={(e) => {
           setValue(e.target.value);

From 8fd9c1ed887c6740248cff8b2eb3c52402419649 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 3 Jul 2024 15:20:48 +0200
Subject: [PATCH 13/18] remove defaultValue prop, update stories and delete
 corresponding test

---
 .../selectv2/Selectv2.component.tsx           |  9 -------
 src/lib/components/selectv2/selectv2.test.tsx |  9 -------
 stories/Select/selectv2.stories.tsx           | 27 +++++++------------
 3 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/selectv2/Selectv2.component.tsx b/src/lib/components/selectv2/Selectv2.component.tsx
index a84cd33e30..f3ca549b6c 100644
--- a/src/lib/components/selectv2/Selectv2.component.tsx
+++ b/src/lib/components/selectv2/Selectv2.component.tsx
@@ -302,7 +302,6 @@ export type SelectProps = {
   placeholder?: string;
   disabled?: boolean;
   children?: React.ReactNode;
-  defaultValue?: string;
   value?: string;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;
@@ -357,7 +356,6 @@ function SelectWithOptionContext(props: SelectProps) {
 function SelectBox({
   placeholder = 'Select...',
   disabled = false,
-  defaultValue,
   value,
   onChange,
   variant = 'default',
@@ -366,11 +364,6 @@ function SelectBox({
   id,
   ...rest
 }: SelectProps) {
-  if (defaultValue && value) {
-    console.error(
-      'The `defaultValue` will be overridden by the `value` if they are set at the same time.',
-    );
-  }
   const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
   const [searchSelection, setSearchSelection] = useState('');
   const [searchValue, setSearchValue] = useState('');
@@ -414,7 +407,6 @@ function SelectBox({
   // Force to reset the value
   useEffect(() => {
     if (
-      !defaultValue &&
       !isEmptyStringInOptions &&
       value === '' &&
       selectRef.current &&
@@ -436,7 +428,6 @@ function SelectBox({
             value={
               searchSelection || options.find((opt) => opt.value === value)
             }
-            defaultValue={defaultValue}
             inputValue={options.length > NOPT_SEARCH ? searchValue : undefined}
             selectedOption={options.find((opt) => opt.value === value)}
             keyboardFocusEnabled={keyboardFocusEnabled}
diff --git a/src/lib/components/selectv2/selectv2.test.tsx b/src/lib/components/selectv2/selectv2.test.tsx
index ff81d9ee5a..7c63d737a0 100644
--- a/src/lib/components/selectv2/selectv2.test.tsx
+++ b/src/lib/components/selectv2/selectv2.test.tsx
@@ -146,15 +146,6 @@ describe('SelectV2', () => {
     expect(screen.getByText(placeholder)).toBeInTheDocument();
   });
 
-  // This test is failing as Select is not working as expected
-  // TODO Work on Select component to display default value when it is defined and value is not
-  it('should display default value', () => {
-    const defaultUser = users[0];
-    render(<SelectWrapper defaultValue={defaultUser.value} />);
-    const select = selectors.select();
-    expect(select).toHaveTextContent(defaultUser.label);
-  });
-
   it('should be disabled', () => {
     render(<SelectWrapper disabled />);
     // select input instead of select as disabled attribute is on input
diff --git a/stories/Select/selectv2.stories.tsx b/stories/Select/selectv2.stories.tsx
index 186175416f..871e0881c8 100644
--- a/stories/Select/selectv2.stories.tsx
+++ b/stories/Select/selectv2.stories.tsx
@@ -11,9 +11,9 @@ type SelectStory = StoryObj<typeof Select>;
 const meta: Meta<typeof Select> = {
   title: 'Components/Inputs/Select',
   component: Select,
-  decorators: [
-    (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
-  ],
+  // decorators: [
+  //   (story) => <Wrapper style={{ minHeight: '15rem' }}>{story()}</Wrapper>,
+  // ],
 };
 
 export default meta;
@@ -38,7 +38,7 @@ const generateOptions = (n = 10) =>
 
 const optionsWithSearchBar = generateOptions(25);
 const optionsWithoutSearchBar = generateOptions(7);
-const defaultOptions = generateOptions(4);
+const defaultOptions = generateOptions(5);
 const thousandsOfOptions = generateOptions(1000);
 const optionsWithDisabledWithoutMessage = optionsWithSearchBar.map(
   (option, index) => {
@@ -79,7 +79,6 @@ export const WithoutOptions: SelectStory = {
 export const DisabledSelect: SelectStory = {
   args: {
     disabled: true,
-    defaultValue: defaultOptions[0].props.value,
     children: defaultOptions,
   },
 };
@@ -173,22 +172,16 @@ export const WithDefaultValue: SelectStory = {
   render: (args) => {
     const [{ value }, updateArgs] = useArgs();
     return (
-      <div>
-        <Select
-          {...args}
-          onChange={(value) => updateArgs({ value })}
-          value={value}
-        ></Select>
-
-        <h2>Selected value</h2>
-        <p>{value}</p>
-      </div>
+      <Select
+        {...args}
+        onChange={(value) => updateArgs({ value })}
+        value={value}
+      ></Select>
     );
   },
   args: {
-    value: undefined,
+    value: defaultOptions[0].props.value,
     placeholder: 'Select an option',
     children: defaultOptions,
-    defaultValue: defaultOptions[0].props.value,
   },
 };

From ade338d703ab6108cf6b0d843ed0004caf062785 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 3 Jul 2024 18:10:25 +0200
Subject: [PATCH 14/18] add test for disable options

---
 src/lib/components/selectv2/selectv2.test.tsx | 51 +++++++++++++++----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/selectv2/selectv2.test.tsx b/src/lib/components/selectv2/selectv2.test.tsx
index 7c63d737a0..6ddaeda177 100644
--- a/src/lib/components/selectv2/selectv2.test.tsx
+++ b/src/lib/components/selectv2/selectv2.test.tsx
@@ -177,6 +177,18 @@ describe('SelectV2', () => {
     expect(input).toHaveFocus();
   });
 
+  it('should unfocus the select when the select is closed', () => {
+    render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
+    const select = selectors.select(true);
+    userEvent.click(select);
+    let input = selectors.input();
+    expect(input).toHaveFocus();
+    const option = selectors.option(/Item 1/);
+    userEvent.click(option);
+    input = selectors.input();
+    expect(input).not.toHaveFocus();
+  });
+
   it('should filter and highlight on search', () => {
     render(<SelectWrapper>{generateOptions(10)} </SelectWrapper>);
     const select = selectors.select(true);
@@ -224,17 +236,38 @@ describe('SelectV2', () => {
     expect(select).toHaveTextContent('Select...');
   });
 
-  it('should not trigger onChange when defaultValue is empty string', () => {
-    const onChange = jest.fn();
+  it('should not be possible to select an option if it is disabled', () => {
     render(
-      <SelectWrapper
-        id="test-select-empty-string"
-        value={''}
-        onChange={onChange}
-        defaultValue=""
-      />,
+      <SelectWrapper>
+        <Option value="1" disabled>
+          User 1
+        </Option>
+        <Option value="2">User 2</Option>
+      </SelectWrapper>,
     );
-    expect(onChange).toBeCalledTimes(0);
+    const select = selectors.select();
+    userEvent.click(select);
+    const option = selectors.option(/User 1/);
+    expect(option).toHaveAttribute('aria-disabled', 'true');
+    userEvent.click(option);
+    const option2 = selectors.option(/User 2/);
+    expect(option2).toBeVisible();
+  });
+  it('should display a tooltip if the option is disabled with a reason', () => {
+    render(
+      <SelectWrapper>
+        <Option value="1" disabled disabledReason="This option is disabled">
+          User 1
+        </Option>
+      </SelectWrapper>,
+    );
+    const select = selectors.select();
+    userEvent.click(select);
+    const option = selectors.option(/User 1/);
+    expect(option).toHaveAttribute('aria-disabled', 'true');
+    userEvent.hover(option);
+    const tooltip = screen.getByText(/This option is disabled/);
+    expect(tooltip).toBeInTheDocument();
   });
 
   it('should select with the right selector', async () => {

From c37fc7a5931e33caff3ee64da517c6ff67d8023f Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Mon, 29 Jul 2024 15:05:02 +0200
Subject: [PATCH 15/18] add mark role to highlighted text

---
 src/lib/components/selectv2/Selectv2.component.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/selectv2/Selectv2.component.tsx b/src/lib/components/selectv2/Selectv2.component.tsx
index f3ca549b6c..f838973e90 100644
--- a/src/lib/components/selectv2/Selectv2.component.tsx
+++ b/src/lib/components/selectv2/Selectv2.component.tsx
@@ -135,7 +135,11 @@ const InternalOption = (width, isDefaultVariant) => (props) => {
                 ? 'sc-highlighted-matching-text'
                 : '';
             return (
-              <span key={i} className={highlightStyle}>
+              <span
+                role={highlightStyle ? 'mark' : undefined}
+                key={i}
+                className={highlightStyle}
+              >
                 {part}
               </span>
             );
@@ -238,7 +242,6 @@ const MenuList = (props) => {
     selectedIndex * optionHeight - (ITEMS_PER_SCROLL_WINDOW - 1) * optionHeight;
   useEffect(() => {
     if (listRef && listRef.current) {
-      // @ts-ignore
       listRef.current.scrollTo(
         getScrollOffset(
           listRef.current,
@@ -282,6 +285,7 @@ const ValueContainer = ({ children, ...props }) => {
   const icon = selectedOption ? selectedOption.icon : null;
   const ariaProps = {
     innerProps: {
+      disabled: true,
       role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
       'aria-expanded': props.selectProps.menuIsOpen,
       'aria-autocomplete': 'list',
@@ -309,6 +313,7 @@ export type SelectProps = {
   variant?: 'default' | 'rounded';
   size?: '1' | '2/3' | '1/2' | '1/3';
   className?: string;
+  /** use menuPositon='fixed' inside modal to avoid display issue */
   menuPosition?: 'fixed' | 'absolute';
 };
 type SelectOptionProps = {

From 507d26eea3a75ceaf40c3a13cd7504a2df1c67da Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Mon, 29 Jul 2024 15:06:11 +0200
Subject: [PATCH 16/18] remove comment

---
 src/lib/components/searchinput/SearchInput.test.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/lib/components/searchinput/SearchInput.test.tsx b/src/lib/components/searchinput/SearchInput.test.tsx
index 6366feb7f0..c9e6514102 100644
--- a/src/lib/components/searchinput/SearchInput.test.tsx
+++ b/src/lib/components/searchinput/SearchInput.test.tsx
@@ -17,7 +17,6 @@ const SearchInputRender = (props: Props) => {
 describe('SearchInput', () => {
   const selectors = {
     searchInput: () => screen.getByRole('searchbox'),
-    //? queryBy is used to avoid the error when the element is not found
     clearButton: () => screen.queryByRole('button'),
   };
   it('should render the SearchInput component', () => {
@@ -86,8 +85,4 @@ describe('SearchInput', () => {
     expect(onReset).toHaveBeenCalled();
     expect(searchInput).toHaveValue('');
   });
-
-  // ? Should we test the autocomplete prop? (It is a browser feature so should be no)
-  // ? Should the clear button be hidden/disabled when the input is disabled?
-  // ? And should the text be greyed out?
 });

From a5564bce6a0d7d8813a428569650a5741ed591ff Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Mon, 29 Jul 2024 15:11:49 +0200
Subject: [PATCH 17/18] change select tests to be closer to user interaction.
 add tests for search bar

---
 src/lib/components/selectv2/selectv2.test.tsx | 127 +++++++++---------
 1 file changed, 66 insertions(+), 61 deletions(-)

diff --git a/src/lib/components/selectv2/selectv2.test.tsx b/src/lib/components/selectv2/selectv2.test.tsx
index 6ddaeda177..b6eabb2872 100644
--- a/src/lib/components/selectv2/selectv2.test.tsx
+++ b/src/lib/components/selectv2/selectv2.test.tsx
@@ -26,37 +26,19 @@ const generateOptions = (n: number) => {
     </Option>
   ));
 };
-const users = [
-  {
-    label: 'User 1',
-    value: '1',
-  },
-  {
-    label: 'User 2',
-    value: '2',
-  },
-];
-
-const basicOptions = () => {
-  return users.map((user, index) => (
-    <Option key={index} value={user.value}>
-      {user.label}
-    </Option>
-  ));
-};
+const optionsWithScrollSearchBar = generateOptions(10); // more than 8 options should display searchbar + scrollbar
+
+const simpleOptions = generateOptions(4); // less than 5 options should not displays any scroll/search bar
+
 const SelectWrapper = (props) => {
   const [value, setValue] = useState<string | null>(null);
   return (
     <Select value={value} onChange={(value) => setValue(value)} {...props}>
-      {props.children || basicOptions()}
+      {props.children || simpleOptions}
     </Select>
   );
 };
 
-const optionsWithScrollSearchBar = generateOptions(10); // more than 8 options should display searchbar + scrollbar
-
-const simpleOptions = generateOptions(4); // less than 5 options should not displays any scroll/search bar
-
 const SelectReset = (props) => {
   const [value, setValue] = useState('default');
 
@@ -85,6 +67,7 @@ describe('SelectV2', () => {
     },
     input: () => screen.getByRole('textbox'),
     noOptions: () => screen.getByText(/No options/i),
+    highlightedText: () => screen.getByRole('mark'),
   };
 
   it('should throw error if <Option/> is outside <Select/>', () => {
@@ -100,8 +83,8 @@ describe('SelectV2', () => {
 
     // should open on click
     userEvent.click(select);
-    users.forEach((user) => {
-      const option = selectors.option(user.label);
+    simpleOptions.forEach((opt) => {
+      const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
     });
 
@@ -120,8 +103,8 @@ describe('SelectV2', () => {
     // should open on Enter
     userEvent.tab();
     userEvent.keyboard('{Enter}');
-    users.forEach((user) => {
-      const option = selectors.option(user.label);
+    simpleOptions.forEach((opt) => {
+      const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
     });
 
@@ -132,8 +115,8 @@ describe('SelectV2', () => {
     // should open on ArrowDown
     userEvent.tab();
     userEvent.keyboard('{ArrowDown}');
-    users.forEach((user) => {
-      const option = selectors.option(user.label);
+    simpleOptions.forEach((opt) => {
+      const option = selectors.option(opt.props.label);
       expect(option).toBeInTheDocument();
     });
   });
@@ -141,16 +124,24 @@ describe('SelectV2', () => {
   it('should display custom placeholder', () => {
     const placeholder = 'My placeholder...';
     render(<SelectWrapper placeholder={placeholder} />);
-    const input = selectors.input();
-    expect(input).toBeInTheDocument();
     expect(screen.getByText(placeholder)).toBeInTheDocument();
   });
 
   it('should be disabled', () => {
-    render(<SelectWrapper disabled />);
-    // select input instead of select as disabled attribute is on input
+    render(
+      <SelectWrapper value="1" disabled={true}>
+        {simpleOptions}
+      </SelectWrapper>,
+    );
+    userEvent.tab();
+    const select = selectors.select();
+    expect(select).not.toHaveFocus();
+    // use input instead of select because select will still trigger the open/close action
+    // despite select container not being clickable and input being disabled
     const input = selectors.input();
-    expect(input).toBeDisabled();
+    userEvent.click(input);
+    const options = selectors.options();
+    expect(options).toHaveLength(0);
   });
 
   it('should display no option', () => {
@@ -165,19 +156,21 @@ describe('SelectV2', () => {
     expect(noOptions).toBeInTheDocument();
   });
 
-  it('should display a search bar if more than 8 options', () => {
+  it('should filter and highlight on search', () => {
     render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
     const select = selectors.select(true);
     userEvent.click(select);
     const input = selectors.input();
-    // An input exists even when the search bar is not displayed with a readOnly attribute
-    // Search bar input does not have the readOnly attribute and is focused at the opening of the select
-    expect(input).toBeInTheDocument();
-    expect(input).not.toHaveAttribute('readOnly');
-    expect(input).toHaveFocus();
+
+    userEvent.type(input, '2');
+    const options = selectors.options();
+    expect(options).toHaveLength(1);
+    const searchedText = selectors.highlightedText();
+    expect(searchedText).toHaveTextContent('2');
+    expect(searchedText).toHaveClass('sc-highlighted-matching-text');
   });
 
-  it('should unfocus the select when the select is closed', () => {
+  it('should unfocus the search input when the select is closed', () => {
     render(<SelectWrapper>{optionsWithScrollSearchBar} </SelectWrapper>);
     const select = selectors.select(true);
     userEvent.click(select);
@@ -189,24 +182,22 @@ describe('SelectV2', () => {
     expect(input).not.toHaveFocus();
   });
 
-  it('should filter and highlight on search', () => {
-    render(<SelectWrapper>{generateOptions(10)} </SelectWrapper>);
+  it('should be possible to use searchbar when option is selected', () => {
+    render(
+      <SelectWrapper value="1">{optionsWithScrollSearchBar}</SelectWrapper>,
+    );
+    expect(screen.getByText(/Item 1/)).toBeVisible();
     const select = selectors.select(true);
     userEvent.click(select);
     const input = selectors.input();
-    expect(input).toBeInTheDocument();
     userEvent.type(input, '2');
-
-    const option = selectors.option(/2/);
-    expect(option).toHaveTextContent('Item 2');
-    // select with classname is the easiest way to test the highlight (as there is a lot of layer with no specific role)
-    expect(
-      option.querySelector('.sc-highlighted-matching-text'),
-    ).toHaveTextContent('2');
+    expect(screen.queryByText(/Item 1/)).not.toBeInTheDocument();
+    const options = selectors.options();
+    expect(options).toHaveLength(1);
   });
 
   it('should select/unselect option with keyboard', () => {
-    render(<SelectWrapper></SelectWrapper>);
+    render(<SelectWrapper />);
     const select = selectors.select();
     userEvent.tab();
     userEvent.keyboard('{ArrowDown}');
@@ -215,7 +206,7 @@ describe('SelectV2', () => {
     // select first option
     expect(options[0]).toHaveClass('sc-select__option--is-focused');
     userEvent.keyboard('{Enter}');
-    expect(select).toHaveTextContent('User 1');
+    expect(select).toHaveTextContent('Item 0');
 
     // reopen select, the previous selected option should have selected class
     userEvent.tab();
@@ -225,7 +216,20 @@ describe('SelectV2', () => {
     expect(options[0]).toHaveClass('sc-select__option--is-selected');
     expect(options[1]).toHaveClass('sc-select__option--is-focused');
     userEvent.keyboard('{Enter}');
-    expect(select).toHaveTextContent('User 2');
+    expect(select).toHaveTextContent('Item 1');
+  });
+
+  it('should scroll to selected value when opening select', () => {
+    render(
+      <SelectWrapper value={optionsWithScrollSearchBar[9].props.value}>
+        {optionsWithScrollSearchBar}
+      </SelectWrapper>,
+    );
+    const select = selectors.select(true);
+    userEvent.click(select);
+    const option = selectors.option(/Item 9/);
+    expect(screen.queryByRole('option', { name: /Item 1/i })).toBeNull();
+    expect(option).toBeVisible();
   });
 
   it('should be able to reset the value', () => {
@@ -240,30 +244,31 @@ describe('SelectV2', () => {
     render(
       <SelectWrapper>
         <Option value="1" disabled>
-          User 1
+          Item 1
         </Option>
-        <Option value="2">User 2</Option>
+        <Option value="2">Item 2</Option>
       </SelectWrapper>,
     );
     const select = selectors.select();
     userEvent.click(select);
-    const option = selectors.option(/User 1/);
-    expect(option).toHaveAttribute('aria-disabled', 'true');
+    const option = selectors.option(/Item 1/);
+
     userEvent.click(option);
-    const option2 = selectors.option(/User 2/);
+    const option2 = selectors.option(/Item 2/);
     expect(option2).toBeVisible();
   });
+
   it('should display a tooltip if the option is disabled with a reason', () => {
     render(
       <SelectWrapper>
         <Option value="1" disabled disabledReason="This option is disabled">
-          User 1
+          Item 1
         </Option>
       </SelectWrapper>,
     );
     const select = selectors.select();
     userEvent.click(select);
-    const option = selectors.option(/User 1/);
+    const option = selectors.option(/Item 1/);
     expect(option).toHaveAttribute('aria-disabled', 'true');
     userEvent.hover(option);
     const tooltip = screen.getByText(/This option is disabled/);

From c3c738b2858a464528b40aa9fde94afdb87607f9 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Fri, 2 Aug 2024 15:00:34 +0200
Subject: [PATCH 18/18] remove class selector/assertino in select test

---
 src/lib/components/selectv2/selectv2.test.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/selectv2/selectv2.test.tsx b/src/lib/components/selectv2/selectv2.test.tsx
index b6eabb2872..68af1fcfe0 100644
--- a/src/lib/components/selectv2/selectv2.test.tsx
+++ b/src/lib/components/selectv2/selectv2.test.tsx
@@ -167,7 +167,6 @@ describe('SelectV2', () => {
     expect(options).toHaveLength(1);
     const searchedText = selectors.highlightedText();
     expect(searchedText).toHaveTextContent('2');
-    expect(searchedText).toHaveClass('sc-highlighted-matching-text');
   });
 
   it('should unfocus the search input when the select is closed', () => {
@@ -201,20 +200,16 @@ describe('SelectV2', () => {
     const select = selectors.select();
     userEvent.tab();
     userEvent.keyboard('{ArrowDown}');
-    let options = selectors.options();
 
-    // select first option
-    expect(options[0]).toHaveClass('sc-select__option--is-focused');
+    // should select first option
     userEvent.keyboard('{Enter}');
     expect(select).toHaveTextContent('Item 0');
 
-    // reopen select, the previous selected option should have selected class
+    // should select second option
     userEvent.tab();
     userEvent.keyboard('{ArrowDown}');
     userEvent.keyboard('{ArrowDown}');
-    options = selectors.options();
-    expect(options[0]).toHaveClass('sc-select__option--is-selected');
-    expect(options[1]).toHaveClass('sc-select__option--is-focused');
+
     userEvent.keyboard('{Enter}');
     expect(select).toHaveTextContent('Item 1');
   });