uikit-react-public 0.14.21 → 0.17.4

package/lib/components/NativeDatepicker/NativeDatepicker.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import NativeDatepicker from './NativeDatepicker';
+
+const meta = {
+  title: 'Components/NativeDatepicker',
+  component: NativeDatepicker,
+  parameters: { layout: 'padded' },
+  argTypes: {
+    value: { control: { type: 'date' } },
+    minDate: { control: { type: 'date' } },
+    maxDate: { control: { type: 'date' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NativeDatepicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
+    return (
+      <NativeDatepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  name: 'Disabled',
+  args: {
+    disabled: true,
+    value: new Date(2025, 2, 10),
+  },
+  render: (args) => <NativeDatepicker {...args} />,
+};
+
+export const WithMinMaxDates: Story = {
+  name: 'With min and max dates',
+  args: {
+    // Initialise min date as 5 days into the current month
+    minDate: (() => {
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), 5).toLocaleDateString(
+        'sv-SE'
+      );
+    })(),
+    // Initialise max date as 5 days before the last day of the current month
+    maxDate: (() => {
+      const now = new Date();
+      const lastDay = new Date(
+        now.getFullYear(),
+        now.getMonth() + 1,
+        0
+      ).getDate();
+      return new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        lastDay - 5
+      ).toLocaleDateString('sv-SE');
+    })(),
+  },
+  render: () => {
+    const [args, updateArgs] = useArgs();
+
+    // Storybook controls provide UNIX timestamps for dates, need to convert
+    // https://storybook.js.org/docs/essentials/controls#annotation
+    args.value = args.value ? new Date(args.value) : null;
+    args.minDate = args.minDate
+      ? new Date(args.minDate).toLocaleDateString('sv-SE')
+      : null;
+    args.maxDate = args.maxDate
+      ? new Date(args.maxDate).toLocaleDateString('sv-SE')
+      : null;
+
+    const onValueChange = (value: Date | null) => updateArgs({ value: value });
+    return (
+      <NativeDatepicker
+        {...args}
+        onValueChange={onValueChange}
+      />
+    );
+  },
+};

package/lib/components/{Datepicker/subcomponents → NativeDatepicker}/NativeDatepicker.tsx

@@ -1,19 +1,15 @@
 import { css, cx } from '@emotion/css';
-import { theme } from '../../../theme';
+import { theme } from '../../theme';
+import { dateToLocaleISOString } from './utils';
+import type { NativeDatepickerProps } from './NativeDatepicker.types';
 
-interface NativeDatepickerProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {
-  testId?: string;
-  ref?: React.RefObject<HTMLInputElement>;
-}
-
-const NAME = 'ucl-uikit-datepicker--native';
+const NAME = 'ucl-uikit-native-datepicker';
 
 const NativeDatepicker = ({
   value,
-  onChange,
-  min,
-  max,
+  onValueChange,
+  minDate,
+  maxDate,
   className,
   disabled,
   testId = NAME,
@@ -54,10 +50,13 @@ const NativeDatepicker = ({
   return (
     <input
       type='date'
-      value={value}
-      onChange={onChange}
-      min={min}
-      max={max}
+      value={dateToLocaleISOString(value) ?? ''}
+      onChange={(event) => {
+        const dateString = event.target.value;
+        onValueChange?.(dateString ? new Date(dateString) : null, event);
+      }}
+      min={minDate || undefined}
+      max={maxDate || undefined}
       disabled={disabled}
       className={style}
       data-testid={testId}

package/lib/components/NativeDatepicker/NativeDatepicker.types.ts

@@ -0,0 +1,19 @@
+import type { InputHTMLAttributes, RefObject } from 'react';
+
+export type DatepickerValue = Date | null;
+
+export interface NativeDatepickerProps
+  extends Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'value' | 'onChange' | 'min' | 'max'
+  > {
+  value?: DatepickerValue;
+  onValueChange?: (
+    value: DatepickerValue,
+    event?: React.SyntheticEvent
+  ) => void;
+  minDate?: string | null;
+  maxDate?: string | null;
+  testId?: string;
+  ref?: RefObject<HTMLInputElement>;
+}

package/lib/components/NativeDatepicker/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NativeDatepicker';
+export type { NativeDatepickerProps } from './NativeDatepicker.types';

package/lib/components/{Datepicker → NativeDatepicker}/utils/dateToLocaleISOString/dateToLocaleISOString.ts

@@ -1,7 +1,7 @@
 /**
  * Converts a Date object to a `YYYY-MM-DD` string based on the user's local timezone.
  *
- * Used for passing dates to <NativeDatepicker> in `Datepicker.tsx`
+ * Used for passing dates to <NativeDatepicker>
  *
  * This function uses the Swedish (`sv-SE`) locale with `toLocaleDateString`
  * as it conveniently defaults to the ISO 8601 `YYYY-MM-DD` format, while respecting

package/lib/components/NativeDatepicker/utils/index.ts

@@ -0,0 +1 @@
+export { default as dateToLocaleISOString } from './dateToLocaleISOString/dateToLocaleISOString';

package/lib/components/Pagination/PaginationControls.tsx

@@ -4,6 +4,7 @@ import useTheme from '../../theme/useTheme';
 import { PaginationContext } from './Pagination';
 import Button from '../Button';
 import getPaginationButtons from './getPaginationButtons';
+import { useMediaQuery } from '../../hooks';
 
 export const NAME = 'ucl-ukit-pagination__controls';
 export const DEFAULT_MAX_BUTTONS = 9;
@@ -21,6 +22,10 @@ const PaginationControls = ({
 }: PaginationControlsProps) => {
   const [theme] = useTheme();
 
+  const isTabletPlus = useMediaQuery(
+    `(min-width: ${theme.breakpoints.tablet}px)`
+  );
+
   const contextValue = useContext(PaginationContext);
 
   const handlePageChange = useCallback(
@@ -48,7 +53,7 @@ const PaginationControls = ({
   const paginationButtons = getPaginationButtons(
     currentPage,
     totalPages,
-    maxNumberButtons
+    isTabletPlus ? maxNumberButtons : 5
   );
 
   const baseStyle = css``;
@@ -61,23 +66,58 @@ const PaginationControls = ({
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: ${theme.margin.m8};
     list-style: none;
-  `;
+    gap: ${theme.margin.m4};
+    flex-wrap: nowrap;
 
-  const previousButtonStyle = css`
-    margin-right: ${theme.margin.m16};
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m8};
+    }
   `;
 
-  const nextButtonStyle = css`
-    margin-left: ${theme.margin.m16};
+  const buttonBaseStyle = css`
+    @media (max-width: ${theme.breakpoints.tablet}px) {
+      gap: ${theme.margin.m4};
+    }
   `;
 
-  const pageNumberButtonBaseStyle = css`
-    height: 48px;
-    min-width: 48px;
-    padding: 0;
-  `;
+  const previousButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-right: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const nextButtonStyle = cx(
+    buttonBaseStyle,
+    css`
+      margin-left: ${theme.margin.m16};
+      display: none;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        display: inline-block;
+      }
+    `
+  );
+
+  const pageNumberButtonBaseStyle = cx(
+    buttonBaseStyle,
+    css`
+      height: 40px;
+      min-width: 40px;
+      padding: 0;
+
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        height: 48px;
+        min-width: 48px;
+      }
+    `
+  );
 
   const pageNumberButtonStyle = cx(
     pageNumberButtonBaseStyle,
@@ -110,6 +150,7 @@ const PaginationControls = ({
           <Button
             className={previousButtonStyle}
             variant='tertiary'
+            size={isTabletPlus ? 'default' : 'small'}
             aria-label='Go to previous page'
             onClick={() => handlePageChange(currentPage - 1)}
             disabled={currentPage === 1}
@@ -128,6 +169,7 @@ const PaginationControls = ({
                   <Button
                     className={pageNumberButtonStyle}
                     variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
                     aria-label={`Page ${page}`}
                     onClick={() => handlePageChange(page)}
                   >
@@ -138,6 +180,7 @@ const PaginationControls = ({
                   <Button
                     className={currentPageNumberButtonStyle}
                     variant='secondary'
+                    size={isTabletPlus ? 'default' : 'small'}
                     aria-label={`Page ${page}, current page`}
                     aria-current='page'
                     disabled

package/lib/components/Pagination/PaginationInfo.tsx

@@ -40,11 +40,15 @@ const PaginationInfo = ({
   }[format];
 
   const baseStyle = css`
-    margin: ${theme.margin.m24} 0;
+    margin: ${theme.margin.m16} 0;
     text-align: center;
     color: ${theme.color.text.secondary};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      margin: ${theme.margin.m24} 0;
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Paragraph/Paragraph.stories.tsx

@@ -3,7 +3,7 @@ import Paragraph from './Paragraph';
 import { Link } from '../';
 
 const meta = {
-  title: 'Components/Ready to use/Paragraph',
+  title: 'Components/Paragraph',
   component: Paragraph,
   args: {
     children: 'Default paragraph text',

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/Select/Select.mdx

@@ -0,0 +1,169 @@
+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' }}
+/>`,
+  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
+- `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 }}
+/>
+
+### 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.
+- 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.
+- `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 />