uikit-react-public 0.25.5 → 0.26.0

package/lib/components/HeaderNew/__tests__/__snapshots__/Header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Header > snapshot: variant=avatar 1`] = `
 <header
-  class="ucl-uikit-header css-13623bd"
+  class="ucl-uikit-header css-11a9sn4"
   data-testid="ucl-uikit-header"
 >
   <div
@@ -41,7 +41,7 @@ exports[`Header > snapshot: variant=avatar 1`] = `
 
 exports[`Header > snapshot: variant=breadcrumbs 1`] = `
 <header
-  class="ucl-uikit-header css-13623bd"
+  class="ucl-uikit-header css-11a9sn4"
   data-testid="ucl-uikit-header"
 >
   <div

package/lib/components/HeaderNew/constants.ts

@@ -1,3 +1,3 @@
 export const HEADER_TABLET_HEIGHT_PX = 78;
-export const HEADER_MOBILE_HEIGHT_PX = 48;
+export const HEADER_MOBILE_HEIGHT_PX = 64;
 export const DEFAULT_Z_INDEX = 3;

package/lib/components/Pagination/Pagination.tsx

@@ -8,10 +8,17 @@ import { useTheme } from '../../theme';
 export const NAME = 'ucl-uikit-pagination';
 
 interface PaginationContextValue {
+  mode: 'offset' | 'tracked';
   offset: number;
   limit: number;
-  total: number;
+  total?: number;
+  currentPage: number;
+  trackedMaxPage: number;
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
   onPageChange?: (page: number) => void;
+  onNextPage?: () => void;
+  onPreviousPage?: () => void;
 }
 
 export const PaginationContext = createContext<
@@ -19,10 +26,17 @@ export const PaginationContext = createContext<
 >(undefined);
 
 export interface PaginationBaseProps extends HTMLAttributes<HTMLDivElement> {
-  offset: number;
+  mode?: 'offset' | 'tracked';
+  offset?: number;
   limit: number;
-  total: number;
+  total?: number;
   onPageChange?: (newOffset: number) => void;
+  currentPage?: number;
+  trackedMaxPage?: number;
+  hasNextPage?: boolean;
+  hasPreviousPage?: boolean;
+  onNextPage?: () => void;
+  onPreviousPage?: () => void;
   testId?: string;
 }
 
@@ -33,6 +47,13 @@ const Pagination = ({
   limit,
   total,
   onPageChange,
+  mode = 'offset',
+  currentPage,
+  trackedMaxPage,
+  hasNextPage,
+  hasPreviousPage,
+  onNextPage,
+  onPreviousPage,
   testId,
   className,
   children,
@@ -40,11 +61,32 @@ const Pagination = ({
 }: PaginationProps) => {
   const [theme] = useTheme();
 
+  const isTrackedMode = mode === 'tracked';
+  const resolvedCurrentPage = isTrackedMode
+    ? Math.max(1, currentPage ?? 1)
+    : Math.floor((offset ?? 0) / limit) + 1;
+  const resolvedOffset = isTrackedMode
+    ? (resolvedCurrentPage - 1) * limit
+    : (offset ?? 0);
+
   const contextValue: PaginationContextValue = {
-    offset,
+    mode,
+    offset: resolvedOffset,
     limit,
     total,
+    currentPage: resolvedCurrentPage,
+    trackedMaxPage: isTrackedMode
+      ? Math.max(resolvedCurrentPage, trackedMaxPage ?? resolvedCurrentPage)
+      : 0,
+    hasPreviousPage: isTrackedMode
+      ? Boolean(hasPreviousPage ?? resolvedCurrentPage > 1)
+      : resolvedCurrentPage > 1,
+    hasNextPage: isTrackedMode
+      ? Boolean(hasNextPage)
+      : typeof total === 'number' && resolvedOffset + limit < total,
     onPageChange,
+    onNextPage,
+    onPreviousPage,
   };
 
   const baseStyle = css`

package/lib/components/Pagination/PaginationControls.tsx

@@ -30,7 +30,23 @@ const PaginationControls = ({
   const handlePageChange = useCallback(
     (newPage: number) => {
       if (contextValue) {
-        const { limit, onPageChange } = contextValue;
+        const { mode, limit, onPageChange, currentPage, trackedMaxPage } =
+          contextValue;
+
+        if (mode === 'tracked') {
+          if (
+            newPage < 1 ||
+            newPage > trackedMaxPage ||
+            newPage === currentPage
+          ) {
+            return;
+          }
+          if (onPageChange) {
+            onPageChange(newPage);
+          }
+          return;
+        }
+
         const newOffset = (newPage - 1) * limit;
         if (onPageChange) {
           onPageChange(newOffset);
@@ -44,16 +60,29 @@ const PaginationControls = ({
     return null;
   }
 
-  const { offset, limit, total } = contextValue;
+  const {
+    mode,
+    limit,
+    total,
+    currentPage,
+    trackedMaxPage,
+    hasPreviousPage,
+    hasNextPage,
+    onNextPage,
+    onPreviousPage,
+  } = contextValue;
 
-  const totalPages = Math.ceil(total / limit);
-  const currentPage = Math.floor(offset / limit) + 1;
+  const totalPages =
+    typeof total === 'number' ? Math.ceil(total / limit) : undefined;
 
-  const paginationButtons = getPaginationButtons(
-    currentPage,
-    totalPages,
-    isTabletPlus ? maxNumberButtons : 5
-  );
+  const paginationButtons =
+    mode === 'tracked'
+      ? Array.from({ length: trackedMaxPage }, (_, i) => i + 1)
+      : getPaginationButtons(
+          currentPage,
+          totalPages ?? 0,
+          isTabletPlus ? maxNumberButtons : 5
+        );
 
   const baseStyle = css``;
 
@@ -141,7 +170,11 @@ const PaginationControls = ({
   return (
     <nav
       className={style}
-      aria-label={`Pagination, ${totalPages} pages total`}
+      aria-label={
+        typeof totalPages === 'number'
+          ? `Pagination, ${totalPages} pages total`
+          : 'Pagination'
+      }
       data-testid={testId}
     >
       <ul className={listStyle}>
@@ -151,8 +184,18 @@ const PaginationControls = ({
             variant='tertiary'
             size={isTabletPlus ? 'default' : 'small'}
             aria-label='Go to previous page'
-            onClick={() => handlePageChange(currentPage - 1)}
-            disabled={currentPage === 1}
+            onClick={() => {
+              if (mode === 'tracked') {
+                if (onPreviousPage) {
+                  onPreviousPage();
+                } else {
+                  handlePageChange(currentPage - 1);
+                }
+                return;
+              }
+              handlePageChange(currentPage - 1);
+            }}
+            disabled={!hasPreviousPage}
           >
             Previous
           </Button>
@@ -198,8 +241,16 @@ const PaginationControls = ({
             className={nextButtonStyle}
             variant='tertiary'
             aria-label='Go to next page'
-            onClick={() => handlePageChange(currentPage + 1)}
-            disabled={currentPage === totalPages}
+            onClick={() => {
+              if (mode === 'tracked') {
+                if (onNextPage) {
+                  onNextPage();
+                }
+                return;
+              }
+              handlePageChange(currentPage + 1);
+            }}
+            disabled={!hasNextPage}
           >
             Next
           </Button>

package/lib/components/Pagination/PaginationInfo.tsx

@@ -26,16 +26,25 @@ const PaginationInfo = ({
     return null;
   }
 
-  const { offset, limit, total } = contextValue;
+  const { offset, limit, total, currentPage } = contextValue;
 
-  const totalPages = Math.ceil(total / limit);
-  const currentPage = Math.floor(offset / limit) + 1;
+  const totalPages =
+    typeof total === 'number' ? Math.ceil(total / limit) : undefined;
   const startItem = offset + 1;
-  const endItem = Math.min(offset + limit, total);
+  const endItem =
+    typeof total === 'number'
+      ? Math.min(offset + limit, total)
+      : offset + limit;
 
   const text = {
-    pages: `Page ${currentPage} of ${totalPages}`,
-    items: `${startItem}-${endItem} of ${total}${itemsPluralName ? ` ${itemsPluralName}` : ''}`,
+    pages:
+      typeof totalPages === 'number'
+        ? `Page ${currentPage} of ${totalPages}`
+        : `Page ${currentPage}`,
+    items:
+      typeof total === 'number'
+        ? `${startItem}-${endItem} of ${total}${itemsPluralName ? ` ${itemsPluralName}` : ''}`
+        : `${startItem}-${endItem}${itemsPluralName ? ` ${itemsPluralName}` : ''}`,
   }[format];
 
   const baseStyle = css`

package/lib/components/Pagination/index.tsx

@@ -1,6 +1,6 @@
 export { default } from './Pagination';
 export type { PaginationProps } from './Pagination';
-export { default as DialogHeader } from './PaginationControls';
+export { default as PaginationControls } from './PaginationControls';
 export type { PaginationControlsProps } from './PaginationControls';
-export { default as DialogFooter } from './PaginationInfo';
+export { default as PaginationInfo } from './PaginationInfo';
 export type { PaginationInfoProps } from './PaginationInfo';

package/lib/components/Search/Search.tsx

@@ -6,6 +6,7 @@ import marginsStyle, { MarginProps } from '../common/marginsStyle';
 
 export interface SearchBaseProps extends HTMLAttributes<HTMLDivElement> {
   onSearch?: (searchTerms: string) => void;
+  onClear?: () => void;
   placeholder?: string;
   disabled?: boolean;
   inputProps?: InputProps;
@@ -22,6 +23,7 @@ const Search = ({
   placeholder = '',
   testId = NAME,
   onSearch,
+  onClear,
   disabled = false,
   m,
   mv,
@@ -48,14 +50,29 @@ const Search = ({
   const handleClearButtonClick = () => {
     setSearchTerms('');
     inputRef.current?.focus();
+    if (onClear) {
+      onClear();
+    }
   };
 
-  const handleSearchButtonClick = () => {
+  const triggerSearch = () => {
     if (onSearch) {
       onSearch(searchTerms);
     }
   };
 
+  const handleSearchInputKeyDown = (
+    event: React.KeyboardEvent<HTMLInputElement>
+  ) => {
+    if (event.key === 'Enter') {
+      triggerSearch();
+    }
+  };
+
+  const handleSearchButtonClick = () => {
+    triggerSearch();
+  };
+
   const baseStyle = css`
     position: relative;
     height: 48px;
@@ -132,6 +149,7 @@ const Search = ({
         placeholder={placeholder}
         type='text'
         onChange={handleSearchTermsChange}
+        onKeyDown={handleSearchInputKeyDown}
         value={searchTerms}
         disabled={disabled}
         data-testid={testId}

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

@@ -91,6 +91,24 @@ describe('Search', () => {
 
     expect(mockOnSearch).toHaveBeenCalledWith('test search');
   });
+
+  test('calls onSearch when Enter key is pressed in input', async () => {
+    const user = userEvent.setup();
+    const mockOnSearch = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Search onSearch={mockOnSearch} />
+      </ThemeContextProvider>
+    );
+
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'test search{enter}');
+
+    expect(mockOnSearch).toHaveBeenCalledWith('test search');
+    expect(mockOnSearch).toHaveBeenCalledTimes(1);
+  });
+
   test('clear button clears text and returns focus to input', async () => {
     const user = userEvent.setup();
     render(
@@ -109,4 +127,39 @@ describe('Search', () => {
     expect((input as HTMLInputElement).value).toBe('');
     expect(document.activeElement).toBe(input);
   });
+
+  test('calls onClear when clear button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClear = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Search onClear={mockOnClear} />
+      </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.click(clearButton);
+
+    expect(mockOnClear).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not call onClear when search button is clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClear = vi.fn();
+
+    render(
+      <ThemeContextProvider>
+        <Search onClear={mockOnClear} />
+      </ThemeContextProvider>
+    );
+
+    const searchButton = screen.getByTestId('ucl-uikit-search-search-btn');
+    await user.click(searchButton);
+
+    expect(mockOnClear).not.toHaveBeenCalled();
+  });
 });

package/lib/components/index.ts

@@ -183,6 +183,9 @@ export type {
 export { default as DropdownMenu } from './DropdownMenu';
 export type { DropdownMenuProps } from './DropdownMenu';
 
+export { default as DrawerMenu } from './DrawerMenu';
+export type { DrawerMenuProps } from './DrawerMenu';
+
 export { default as DropdownUserMenu } from './DropdownUserMenu';
 export type { DropdownUserMenuProps } from './DropdownUserMenu';
 

package/lib/theme/__tests__/useTheme.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import defaultTheme from '../original/defaultTheme';
+import lightTheme from '../light/lightTheme';
+import { ThemeContextProvider, ThemeConsumer, themes } from '../useTheme';
+import type { ThemeType } from '../original/defaultTheme';
+
+const ThemeProbe = () => (
+  <ThemeConsumer>
+    {({ theme, setTheme }) => (
+      <>
+        <span data-testid='bg-default'>{theme.colour.bg.default}</span>
+        <button
+          data-testid='set-default'
+          onClick={() => setTheme(defaultTheme)}
+        >
+          set-default
+        </button>
+      </>
+    )}
+  </ThemeConsumer>
+);
+
+describe('useTheme', () => {
+  test('uses default theme when no theme prop is provided', () => {
+    render(
+      <ThemeContextProvider>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      defaultTheme.colour.bg.default
+    );
+  });
+
+  test('uses named theme when theme prop is provided', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      lightTheme.colour.bg.default
+    );
+  });
+
+  test('uses custom theme object when provided through theme prop', () => {
+    const customTheme: ThemeType = {
+      ...defaultTheme,
+      colour: {
+        ...defaultTheme.colour,
+        bg: {
+          ...defaultTheme.colour.bg,
+          default: '#123456',
+        },
+      },
+    };
+
+    render(
+      <ThemeContextProvider theme={customTheme}>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe('#123456');
+  });
+
+  test('ThemeConsumer exposes setTheme and updates the current theme', () => {
+    render(
+      <ThemeContextProvider theme='light'>
+        <ThemeProbe />
+      </ThemeContextProvider>
+    );
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      lightTheme.colour.bg.default
+    );
+
+    fireEvent.click(screen.getByTestId('set-default'));
+
+    expect(screen.getByTestId('bg-default').textContent).toBe(
+      defaultTheme.colour.bg.default
+    );
+  });
+
+  test('exports named themes map', () => {
+    expect(themes.default).toBe(defaultTheme);
+    expect(themes.light).toBe(lightTheme);
+  });
+});

package/lib/theme/index.ts

@@ -5,6 +5,13 @@ export type {
   DisplayColoursType,
   BlackAndWhiteColoursType,
 } from './original/defaultTheme';
-export { default as useTheme, ThemeContextProvider } from './useTheme';
+export {
+  default as useTheme,
+  ThemeContextProvider,
+  ThemeContextConsumer,
+  ThemeConsumer,
+  themes,
+} from './useTheme';
+export type { ThemeName } from './useTheme';
 export { uikitFontUrls, uikitFonts } from './fonts';
 export type { FontSource, FontStyle } from './fonts';

package/lib/theme/useTheme.tsx

@@ -2,9 +2,30 @@ import { createContext, useState, useContext, ReactNode } from 'react';
 import { Global, css } from '@emotion/react';
 import { ThemeType } from './original/defaultTheme';
 import theme from './original/defaultTheme';
+import lightTheme from './light/lightTheme';
 import { uikitFontUrls } from './fonts';
 
-const useThemeState = (initialTheme: ThemeType = theme as ThemeType) =>
+export const themes = {
+  default: theme as ThemeType,
+  light: lightTheme as ThemeType,
+  // dark: darkTheme as ThemeType, // does not exist yet
+} as const;
+
+export type ThemeName = keyof typeof themes;
+
+const resolveTheme = (themeNameOrValue?: ThemeType | ThemeName): ThemeType => {
+  if (!themeNameOrValue) {
+    return themes.default;
+  }
+
+  if (typeof themeNameOrValue === 'string') {
+    return themes[themeNameOrValue] ?? themes.default;
+  }
+
+  return themeNameOrValue;
+};
+
+const useThemeState = (initialTheme: ThemeType = themes.default) =>
   useState(initialTheme);
 
 const ThemeContext = createContext<ReturnType<typeof useThemeState> | null>(
@@ -72,9 +93,12 @@ const fontFaces = css`
 
 export const ThemeContextProvider: React.FC<{
   children: ReactNode;
+  theme?: ThemeType | ThemeName;
   initialTheme?: ThemeType;
-}> = ({ children, initialTheme }) => (
-  <ThemeContext.Provider value={useThemeState(initialTheme)}>
+}> = ({ children, theme, initialTheme }) => (
+  <ThemeContext.Provider
+    value={useThemeState(initialTheme ?? resolveTheme(theme))}
+  >
     <Global styles={fontFaces} />
     {children}
   </ThemeContext.Provider>
@@ -88,4 +112,18 @@ const useTheme = () => {
   return value;
 };
 
+export const ThemeContextConsumer: React.FC<{
+  children: (themeState: ReturnType<typeof useTheme>) => ReactNode;
+}> = ({ children }) => <>{children(useTheme())}</>;
+
+export const ThemeConsumer: React.FC<{
+  children: (context: {
+    theme: ThemeType;
+    setTheme: (theme: ThemeType) => void;
+  }) => ReactNode;
+}> = ({ children }) => {
+  const [activeTheme, setTheme] = useTheme();
+  return <>{children({ theme: activeTheme, setTheme })}</>;
+};
+
 export default useTheme;

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.25.5",
+  "version": "0.26.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,7 +55,7 @@
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
-    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.4",
     "@storybook/addon-links": "^8.6.4",
     "@storybook/addon-onboarding": "^8.6.4",
@@ -73,7 +73,7 @@
     "@typescript-eslint/parser": "^8.26.1",
     "@vitejs/plugin-basic-ssl": "^2.0.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "3.0.9",
+    "@vitest/coverage-v8": "^4.1.8",
     "eslint": "^9.22.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-ft-flow": "^3.0.11",
@@ -97,7 +97,7 @@
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.1",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.0.8",
+    "vitest": "^4.1.8",
     "wouter": "^3.6.0"
   }
 }