uikit-react-public 0.11.24 → 0.17.4

package/lib/components/Select/__tests__/Select.test.tsx

@@ -1,4 +1,5 @@
-import { describe, expect, test } from 'vitest';
+import { describe, expect, test, vi, beforeAll } from 'vitest';
+import { useState } from 'react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Select from '../Select';
@@ -11,6 +12,13 @@ const defaultOptions = [
 ];
 
 describe('Select', () => {
+  beforeAll(() => {
+    Object.defineProperty(Element.prototype, 'scrollIntoView', {
+      value: vi.fn(),
+      writable: true,
+    });
+  });
+
   // Snapshot tests
 
   test('Snapshot: default', () => {
@@ -19,7 +27,7 @@ describe('Select', () => {
         <Select
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -35,7 +43,7 @@ describe('Select', () => {
         <Select
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -50,7 +58,7 @@ describe('Select', () => {
           native
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          nativeHtmlAttributes={{ onChange: () => {} }}
         />
       </ThemeContextProvider>
     );
@@ -66,7 +74,7 @@ describe('Select', () => {
         <Select
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -91,7 +99,7 @@ describe('Select', () => {
           disabled
           options={defaultOptions}
           value=''
-          onChange={() => {}}
+          onValueChange={() => {}}
         />
       </ThemeContextProvider>
     );
@@ -109,11 +117,444 @@ describe('Select', () => {
           native
           options={defaultOptions}
           value='1'
-          onChange={() => {}}
+          nativeHtmlAttributes={{ onChange: () => {} }}
         />
       </ThemeContextProvider>
     );
     const select = renderResult.getByTestId('ucl-uikit-select--native');
     expect(select).toHaveProperty('disabled');
   });
+
+  test('Filters options when filterable is true', async () => {
+    const user = userEvent.setup();
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    await user.click(renderResult.getByTestId('ucl-uikit-select'));
+    const input = renderResult.container.querySelector('input');
+    expect(input).not.toBeNull();
+    await user.type(input as HTMLInputElement, '2');
+
+    const options = await renderResult.findAllByRole('option');
+    expect(options.length).toBe(1);
+    expect(options[0].textContent).toBe('Option 2');
+  });
+
+  test('shows empty state when filter yields no options', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), 'zzz');
+
+    expect(result.getByText('No options')).toBeInTheDocument();
+    expect(result.queryAllByTestId('ucl-uikit-select__option')).toHaveLength(0);
+  });
+
+  test('clears filter text after selecting an option', async () => {
+    const user = userEvent.setup();
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          filterable
+          options={defaultOptions}
+          value={value}
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), '2');
+    await user.click(result.getByText('Option 2'));
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    expect(result.getByRole('searchbox')).toHaveValue('');
+    expect(result.getAllByTestId('ucl-uikit-select__option')).toHaveLength(
+      defaultOptions.length
+    );
+  });
+
+  test('clears filter text when dropdown closes', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), '1');
+
+    await user.click(document.body);
+    await user.click(result.getByTestId('ucl-uikit-select'));
+
+    expect(result.getByRole('searchbox')).toHaveValue('');
+  });
+
+  test('keyboard navigation uses filtered options', async () => {
+    const user = userEvent.setup();
+    const options = [
+      { label: 'Alpha', value: 'alpha' },
+      { label: 'Echo', value: 'echo' },
+      { label: 'Gamma', value: 'gamma' },
+    ];
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      const handleChange = vi.fn((next, ev) => {
+        setValue(next as string);
+        changeSpy(next, ev);
+      });
+      return (
+        <Select
+          filterable
+          options={options}
+          value={value}
+          onValueChange={handleChange}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.type(result.getByRole('searchbox'), 'a');
+    expect(result.getAllByTestId('ucl-uikit-select__option')).toHaveLength(2);
+
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+
+    expect(changeSpy.mock.calls.map(([val]) => val)).toEqual([
+      'alpha',
+      'gamma',
+      'alpha',
+    ]);
+  });
+
+  test('selectionBehaviour=commit does not call onValueChange on arrow keys', async () => {
+    const user = userEvent.setup();
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          options={defaultOptions}
+          value={value}
+          selectionBehaviour='commit'
+          onValueChange={(next, ev) => {
+            setValue(next as string);
+            changeSpy(next, ev);
+          }}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+
+    expect(changeSpy).not.toHaveBeenCalled();
+  });
+
+  test('selectionBehaviour=commit commits highlighted option on Enter', async () => {
+    const user = userEvent.setup();
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          options={defaultOptions}
+          value={value}
+          selectionBehaviour='commit'
+          onValueChange={(next, ev) => {
+            setValue(next as string);
+            changeSpy(next, ev);
+          }}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+
+    expect(changeSpy.mock.calls.map(([val]) => val)).toEqual(['2']);
+    expect(
+      result.queryByTestId('ucl-uikit-select__panel')
+    ).not.toBeInTheDocument();
+    expect(result.getByTestId('ucl-uikit-select')).toHaveTextContent(
+      'Option 2'
+    );
+  });
+
+  test('keyboard navigation does not get stuck on duplicate values', async () => {
+    const user = userEvent.setup();
+    const options = [
+      { label: 'First duplicate', value: 'dup' },
+      { label: 'Second duplicate', value: 'dup' },
+      { label: 'Unique', value: 'unique' },
+    ];
+    const changeSpy = vi.fn();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      const handleChange = vi.fn((next, ev) => {
+        setValue(next as string);
+        changeSpy(next, ev);
+      });
+      return (
+        <Select
+          options={options}
+          value={value}
+          onValueChange={handleChange}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+
+    expect(changeSpy.mock.calls.map(([val]) => val)).toEqual([
+      'dup',
+      'dup',
+      'unique',
+    ]);
+
+    const optionElements = result.getAllByRole('option');
+    expect(
+      optionElements.filter((el) => el.getAttribute('aria-selected') === 'true')
+    ).toHaveLength(1);
+    expect(optionElements[2]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('keeps duplicate label identity when selecting by click', async () => {
+    const user = userEvent.setup();
+    const options = [
+      { label: 'First duplicate', value: 'dup' },
+      { label: 'Second duplicate', value: 'dup' },
+    ];
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          options={options}
+          value={value}
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.click(result.getAllByRole('option')[1]);
+
+    expect(result.getByTestId('ucl-uikit-select')).toHaveTextContent(
+      'Second duplicate'
+    );
+  });
+
+  test('forwards id and title attributes to the combobox', () => {
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          id='my-select'
+          title='Select an option'
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByRole('combobox');
+    expect(combobox).toHaveAttribute('id', 'my-select');
+    expect(combobox).toHaveAttribute('title', 'Select an option');
+  });
+
+  test('applies filterInputProps to the filter input', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <div>
+          <span id='filter-hint'>Filter options by text</span>
+          <Select
+            filterable
+            options={defaultOptions}
+            value=''
+            onValueChange={() => {}}
+            filterInputProps={{ 'aria-describedby': 'filter-hint' }}
+          />
+        </div>
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    const filterInput = result.getByRole('searchbox');
+    expect(filterInput).toHaveAttribute('aria-describedby', 'filter-hint');
+  });
+
+  test('opens filter input on keyboard focus', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.tab();
+
+    const filterInput = await result.findByRole('searchbox');
+    expect(filterInput).toHaveFocus();
+    expect(result.getByRole('listbox')).toBeInTheDocument();
+  });
+
+  test('pressing Escape closes dropdown and clears filter', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByTestId('ucl-uikit-select');
+    await user.click(combobox);
+    await user.type(result.getByRole('searchbox'), '1');
+    await user.keyboard('{Escape}');
+
+    expect(
+      result.queryByTestId('ucl-uikit-select__panel')
+    ).not.toBeInTheDocument();
+    expect(combobox).toHaveFocus();
+
+    await user.click(combobox);
+    expect(result.getByRole('searchbox')).toHaveValue('');
+  });
+
+  test('announces active option and option position metadata', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByRole('combobox');
+    await user.click(combobox);
+
+    const options = result.getAllByRole('option');
+    expect(options[0]).toHaveAttribute('aria-posinset', '1');
+    expect(options[0]).toHaveAttribute('aria-setsize', '3');
+    expect(options[1]).toHaveAttribute('aria-posinset', '2');
+    expect(options[1]).toHaveAttribute('aria-setsize', '3');
+
+    await user.keyboard('{ArrowDown}');
+    expect(combobox).toHaveAttribute('aria-activedescendant', options[0].id);
+
+    await user.keyboard('{ArrowDown}');
+    expect(combobox).toHaveAttribute('aria-activedescendant', options[1].id);
+  });
+
+  test('filterable input tracks active descendant while navigating options', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value=''
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    const filterInput = result.getByRole('searchbox');
+    expect(filterInput).toHaveFocus();
+
+    const options = result.getAllByRole('option');
+    await user.keyboard('{ArrowDown}');
+    expect(filterInput).toHaveAttribute('aria-activedescendant', options[0].id);
+
+    await user.keyboard('{ArrowDown}');
+    expect(filterInput).toHaveAttribute('aria-activedescendant', options[1].id);
+  });
 });

package/lib/components/Select/__tests__/__snapshots__/Select.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-1g3qqhm"
+  class="ucl-uikit-select css-1kop2c3"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"
@@ -14,10 +14,10 @@ exports[`Select > Snapshot: default 1`] = `
     data-testid="ucl-uikit-select__visible-field"
   >
     <span
-      class="css-1oagzrk"
+      class="css-16t5nns"
     />
     <svg
-      class="ucl-uikit-icon css-1ieo112"
+      class="ucl-uikit-icon css-hseitk"
       data-testid="ucl-uikit-icon"
       fill="none"
       height="24"

package/lib/components/Select/subcomponents/CustomOption.tsx

@@ -5,15 +5,17 @@ import { CustomOptionProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select__option';
 
-const CustomOption = ({
+const CustomOption = <T extends string | number>({
   value,
+  optionIndex,
   isSelected = false,
   onSelect,
+  lineBreak = false,
   testId = NAME,
   className,
   children,
   ...props
-}: CustomOptionProps) => {
+}: CustomOptionProps<T>) => {
   const [theme] = useTheme();
   const internalRef = useRef<HTMLDivElement>(null);
 
@@ -28,35 +30,47 @@ const CustomOption = ({
   }, [isSelected]);
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    onSelect(event, value);
+    onSelect(event, value, optionIndex);
     event.stopPropagation(); // Otherwise the panel will open again instantaneously
   };
 
   const baseStyle = css`
-    display: flex;
-    align-items: center;
-    justify-content: left;
     gap: 16px;
-    width: 100%;
     min-height: 40px;
     box-sizing: border-box;
-    padding: 8px 16px;
+    padding: ${theme.padding.p8} ${theme.padding.p16};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
+    line-height: ${theme.font.lineHeight.h140};
     background-color: ${theme.color.neutral.white};
     overflow: hidden;
-    white-space: nowrap;
 
     &:hover {
       background-color: ${theme.color.neutral.grey5};
     }
   `;
 
+  const noLineWrapStyle = css`
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  `;
+
+  const lineBreakStyle = css`
+    word-break: break-all;
+  `;
+
   const selectedStyle = css`
     background-color: ${theme.color.neutral.grey5};
   `;
 
-  const style = cx(NAME, baseStyle, isSelected && selectedStyle, className);
+  const style = cx(
+    NAME,
+    baseStyle,
+    !lineBreak && noLineWrapStyle,
+    lineBreak && lineBreakStyle,
+    isSelected && selectedStyle,
+    className
+  );
 
   return (
     <div