uikit-react-public 0.14.21 → 0.21.8

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

@@ -2,7 +2,7 @@
 
 exports[`Radio > snapshot: checked prop 1`] = `
 <span
-  class="ucl-uikit-radio css-1q95rl4"
+  class="ucl-uikit-radio css-1y63xt7"
 >
   <input
     checked=""
@@ -11,14 +11,14 @@ exports[`Radio > snapshot: checked prop 1`] = `
     type="radio"
   />
   <div
-    class="css-qvbxw4"
+    class="css-19pto6h"
   />
 </span>
 `;
 
 exports[`Radio > snapshot: no props 1`] = `
 <span
-  class="ucl-uikit-radio css-12hblv5"
+  class="ucl-uikit-radio css-121ivaw"
 >
   <input
     class="css-19qtec1"
@@ -30,7 +30,7 @@ exports[`Radio > snapshot: no props 1`] = `
 
 exports[`Radio > snapshot: testId prop 1`] = `
 <span
-  class="ucl-uikit-radio css-12hblv5"
+  class="ucl-uikit-radio css-121ivaw"
 >
   <input
     class="css-19qtec1"

package/lib/components/Search/Search.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Search from './Search';
 
 const meta = {
-  title: 'Components/Ready to use/Search',
+  title: 'Components/Search',
   component: Search,
   parameters: { layout: 'padded' },
   argTypes: {

package/lib/components/Search/Search.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, useState } from 'react';
+import { HTMLAttributes, useRef, useState } from 'react';
 import { css, cx } from '@emotion/css';
 import { Input, Icon, IconButton, InputProps, IconButtonProps } from '../..';
 import useTheme from '../../theme/useTheme';
@@ -38,6 +38,7 @@ const Search = ({
   ...props
 }: SearchProps) => {
   const [searchTerms, setSearchTerms] = useState<string>('');
+  const inputRef = useRef<HTMLInputElement>(null);
   const [theme] = useTheme();
 
   const handleSearchTermsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -46,6 +47,7 @@ const Search = ({
 
   const handleClearButtonClick = () => {
     setSearchTerms('');
+    inputRef.current?.focus();
   };
 
   const handleSearchButtonClick = () => {
@@ -125,6 +127,7 @@ const Search = ({
       {...props}
     >
       <Input
+        ref={inputRef}
         inputClassName={inputStyle}
         placeholder={placeholder}
         type='text'

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

@@ -34,7 +34,7 @@ describe('Search', () => {
         <Search />
       </ThemeContextProvider>
     );
-    const search = screen.getByTestId('ucl-uikit-search');
+    const search = screen.getByRole('textbox');
     expect(search).toBeInTheDocument();
   });
 
@@ -91,4 +91,22 @@ describe('Search', () => {
 
     expect(mockOnSearch).toHaveBeenCalledWith('test search');
   });
+  test('clear button clears text and returns focus to input', async () => {
+    const user = userEvent.setup();
+    render(
+      <ThemeContextProvider>
+        <Search placeholder='Search products...' />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByTestId('ucl-uikit-search');
+    const clearButton = screen.getByTestId('ucl-uikit-search-clear-search-btn');
+
+    await user.type(input, 'hello');
+    await user.tab();
+    await user.click(clearButton);
+
+    expect((input as HTMLInputElement).value).toBe('');
+    expect(document.activeElement).toBe(input);
+  });
 });

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

@@ -28,6 +28,7 @@ exports[`Search > snapshot: no props 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -37,17 +38,8 @@ exports[`Search > snapshot: no props 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <line
-          x1="18"
-          x2="6"
-          y1="6"
-          y2="18"
-        />
-        <line
-          x1="6"
-          x2="18"
-          y1="6"
-          y2="18"
+        <path
+          d="M18 6 6 18M6 6l12 12"
         />
       </svg>
     </button>
@@ -63,6 +55,7 @@ exports[`Search > snapshot: no props 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -77,11 +70,8 @@ exports[`Search > snapshot: no props 1`] = `
           cy="11"
           r="8"
         />
-        <line
-          x1="21"
-          x2="16.65"
-          y1="21"
-          y2="16.65"
+        <path
+          d="m21 21-4.35-4.35"
         />
       </svg>
     </button>
@@ -117,6 +107,7 @@ exports[`Search > snapshot: testId prop 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -126,17 +117,8 @@ exports[`Search > snapshot: testId prop 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <line
-          x1="18"
-          x2="6"
-          y1="6"
-          y2="18"
-        />
-        <line
-          x1="6"
-          x2="18"
-          y1="6"
-          y2="18"
+        <path
+          d="M18 6 6 18M6 6l12 12"
         />
       </svg>
     </button>
@@ -152,6 +134,7 @@ exports[`Search > snapshot: testId prop 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -166,11 +149,8 @@ exports[`Search > snapshot: testId prop 1`] = `
           cy="11"
           r="8"
         />
-        <line
-          x1="21"
-          x2="16.65"
-          y1="21"
-          y2="16.65"
+        <path
+          d="m21 21-4.35-4.35"
         />
       </svg>
     </button>

package/lib/components/Select/Select.mdx

@@ -0,0 +1,192 @@
+import * as SelectStories from "./Select.stories";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+
+export const usage = {
+  default: `<Select
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+  native: `<Select
+  native
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  nativeHtmlAttributes={{ onChange: onNativeChange }}
+/>`,
+  filterable: `<Select
+  filterable
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+  placeholder="Type to filter..."
+  filterInputProps={{ 'aria-describedby': 'filter-hint' }}
+/>`,
+  clearable: `<Select
+  clearable
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+  placeholder="Clear selection"
+/>`,
+  selectionBehaviourCommit: `<Select
+  selectionBehaviour="commit"
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+  disabled: `<Select
+  disabled
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+  placeholder: `<Select
+  placeholder="Please select an option"
+  options={[
+    { label: 'Option one', value: '1' },
+    { label: 'Option two', value: '2' },
+    { label: 'Option three', value: '3' },
+  ]}
+  value={value}
+  onValueChange={handleChange}
+/>`,
+};
+
+<Meta of={SelectStories} />
+<Title />
+<Subtitle>
+  A custom select with an optional native fallback, opt-in filtering, and long-text handling.
+</Subtitle>
+
+Use `<Select>` when you need a styled dropdown that works like a standard form control but matches the UCL UI kit. The component renders a custom combobox by default and can fall back to the native `<select>` for environments where native behaviour is preferred (e.g. mobile accessibility).
+
+Key features:
+- Custom dropdown with keyboard support (Enter/Space to open, arrows to navigate, Escape to close)
+- Configurable keyboard selection behaviour via `selectionBehaviour` (`focus` or `commit`)
+- Optional native fallback (`native`)
+- Optional filterable dropdown (`filterable`) that lets users type to narrow options
+- Optional clear action (`clearable`) in the custom variant
+- `filterInputProps` to forward additional attributes (e.g. `aria-describedby`) to the filter input
+- Support for long option text via `lineBreak`
+- Disabled state and placeholder support
+- Story previews set a fixed control width and wrapper height for better readability in docs.
+
+## Variants
+
+### Custom (default)
+The default renders a fully styled combobox that handles focus, keyboard navigation, and selection. Use this for most desktop/web cases.
+
+<Canvas
+  of={SelectStories.Default}
+  sourceState="shown"
+  source={{ code: usage.default }}
+/>
+
+### Native
+Set `native` to render the browser `<select>`. This is useful when you want built-in mobile picker behaviour or the simplest possible semantics. Props like `onChange`, `value`, and standard `<select>` attributes can be passed via `nativeHtmlAttributes`.
+
+<Canvas
+  of={SelectStories.Native}
+  sourceState="shown"
+  source={{ code: usage.native }}
+/>
+
+### Disabled
+Applies the disabled state to both custom and native variants; interactions are blocked and styles are subdued.
+
+<Canvas
+  of={SelectStories.Disabled}
+  sourceState="shown"
+  source={{ code: usage.disabled }}
+/>
+
+### Placeholder
+Shows helper text until a value is selected. In the native variant it appears as a disabled option; in the custom variant it shows in the visible field.
+
+<Canvas
+  of={SelectStories.WithPlaceholder}
+  sourceState="shown"
+  source={{ code: usage.placeholder }}
+/>
+
+### With filter
+Adds an inline text input when the dropdown is open so users can type to filter options. Arrow keys and Escape still control the dropdown; the filter text is preserved while open and cleared on close.
+
+Use `filterInputProps` to pass extra attributes to the input (e.g. `aria-describedby`, `inputMode`).
+
+<Canvas
+  of={SelectStories.filterable}
+  sourceState="shown"
+  source={{ code: usage.filterable }}
+/>
+
+### Clearable
+Adds a built-in clear button in the custom variant when a selection is present. Clearing calls `onValueChange(null, event)` and restores the placeholder text.
+
+<Canvas
+  of={SelectStories.Clearable}
+  sourceState="shown"
+  source={{ code: usage.clearable }}
+/>
+
+### Selection behaviour
+Use `selectionBehaviour` to control how keyboard navigation commits value in the custom variant:
+- `focus` (default): arrow keys move and commit immediately.
+- `commit`: arrow keys only highlight; Enter or click commits.
+
+<Canvas
+  of={SelectStories.SelectionBehaviourCommit}
+  sourceState="shown"
+  source={{ code: usage.selectionBehaviourCommit }}
+/>
+
+## Long text and wrapping
+For very long labels, set `lineBreak` to allow breaking the text inside options. Without it, text is truncated/ellipsized to keep layout intact.
+
+## Accessibility
+- Custom variant exposes `role="combobox"` and `aria-expanded`, and listens for Enter/Space/Escape/arrow keys.
+- In `selectionBehaviour="commit"`, arrow keys move highlight without changing value until Enter/click.
+- Tabbing away from an open custom dropdown closes it and lets focus move normally to the next or previous control.
+- Native variant leverages built-in browser semantics.
+- The filter input (when `filterable` is true) is focusable when the panel opens; Escape and arrow keys bubble to the parent so the dropdown still closes/navigates.
+- In the custom variant, `clearable` emits `null` as the cleared value.
+- `filterInputProps` lets you forward ARIA hooks like `aria-describedby` to the filter input.
+- Standard HTML attributes (`id`, `title`, `data-*`) are forwarded to the combobox/native select.
+
+## Props
+
+Full props specification for `<Select>` is below.
+
+<Canvas
+  of={SelectStories.Default}
+  sourceState="hidden"
+  source={{ code: usage.default }}
+/>
+
+You can use the controls below to manipulate the `<Select>` component above.
+
+<Controls />