uikit-react-public 0.25.5 → 0.26.1

package/lib/components/HeaderNew/HeaderItem.tsx

@@ -23,7 +23,13 @@ const HeaderItem = ({
     min-height: 40px;
 
     &:not(:first-of-type) {
-      margin-left: ${theme.margin.m8};
+      margin-left: ${theme.margin.m16};
+    }
+
+    @media (min-width: ${theme.breakpoints.desktop}px) {
+      &:not(:first-of-type) {
+        margin-left: 0;
+      }
     }
   `;
 

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

@@ -39,4 +39,34 @@ describe('Header', () => {
     expect(link).toBeInTheDocument();
     expect(link.getAttribute('href')).toBe('/');
   });
+
+  test('spaces subsequent header items on smaller screens and resets spacing on desktop', () => {
+    render(
+      <ThemeContextProvider>
+        <Header title='LIDS'>
+          <Header.MenuContainer>
+            <Header.Item testId='first-header-item'>First</Header.Item>
+            <Header.Item testId='second-header-item'>Second</Header.Item>
+          </Header.MenuContainer>
+        </Header>
+      </ThemeContextProvider>
+    );
+
+    const firstItem = screen.getByTestId('first-header-item');
+    const secondItem = screen.getByTestId('second-header-item');
+    const generatedClass = [...secondItem.classList].find((className) =>
+      className.startsWith('css-')
+    );
+    const styles = document.head.textContent;
+
+    expect(firstItem).toHaveClass('ucl-uikit-header__item');
+    expect(secondItem).toHaveClass('ucl-uikit-header__item');
+    expect(generatedClass).toBeDefined();
+    expect(styles).toContain(
+      `.${generatedClass}:not(:first-of-type){margin-left:16px;}`
+    );
+    expect(styles).toContain(
+      `@media (min-width: 1056px){.${generatedClass}:not(:first-of-type){margin-left: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/MenuNew/MenuAccordion/MenuAccordion.tsx

@@ -60,8 +60,33 @@ const MenuAccordion = ({
   `;
 
   const bodyStyle = css`
+    display: grid;
+    grid-template-rows: 0fr;
     width: 100%;
+    margin-top: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      grid-template-rows 300ms ease-in,
+      margin-top 300ms ease-in,
+      opacity 300ms ease-in;
+  `;
+
+  const bodyExpandedStyle = css`
+    grid-template-rows: 1fr;
     margin-top: ${theme.margin.m8};
+    opacity: 1;
+    pointer-events: auto;
+    transition:
+      grid-template-rows 300ms ease-out,
+      margin-top 300ms ease-out,
+      opacity 300ms ease-out;
+  `;
+
+  const bodyInnerStyle = css`
+    min-height: 0;
+    overflow: hidden;
   `;
 
   const handleClick = (event: MouseEvent<HTMLDivElement>) => {
@@ -74,7 +99,7 @@ const MenuAccordion = ({
       <MenuBaseItem
         className={style}
         iconPosition='left'
-        underlineOnHover={false}
+        hoverMode='background'
         onClick={handleClick}
         endAdornment={<MenuAccordionChevron expanded={expanded} />}
         aria-expanded={expanded}
@@ -84,7 +109,13 @@ const MenuAccordion = ({
           <MenuItemText className={textStyle}>{label}</MenuItemText>
         </span>
       </MenuBaseItem>
-      {expanded && <div className={bodyStyle}>{children}</div>}
+      <div
+        className={cx(bodyStyle, expanded && bodyExpandedStyle)}
+        aria-hidden={!expanded}
+        inert={!expanded}
+      >
+        <div className={bodyInnerStyle}>{children}</div>
+      </div>
     </>
   );
 };

package/lib/components/MenuNew/MenuAccordion/MenuAccordionChevron.tsx

@@ -1,3 +1,4 @@
+import { css, cx } from '@emotion/css';
 import Icon from '../../Icon';
 
 export interface MenuAccordionChevronProps {
@@ -8,23 +9,24 @@ export interface MenuAccordionChevronProps {
 const MenuAccordionChevron = ({
   expanded,
   className,
-}: MenuAccordionChevronProps) =>
-  expanded ? (
-    <Icon.ChevronUp
-      className={className}
-      size={24}
-      aria-hidden='true'
-      focusable='false'
-      testId='ucl-uikit-menu__accordion__icon--chevron-up'
-    />
-  ) : (
+}: MenuAccordionChevronProps) => {
+  const baseStyle = css`
+    transition: transform 150ms ease-in-out;
+  `;
+
+  const expandedStyle = css`
+    transform: rotate(180deg);
+  `;
+
+  return (
     <Icon.ChevronDown
-      className={className}
+      className={cx(baseStyle, expanded && expandedStyle, className)}
       size={24}
       aria-hidden='true'
       focusable='false'
       testId='ucl-uikit-menu__accordion__icon--chevron-down'
     />
   );
+};
 
 export default MenuAccordionChevron;

package/lib/components/MenuNew/MenuBaseItem.tsx

@@ -6,7 +6,7 @@ export interface MenuBaseItemProps extends HTMLAttributes<HTMLDivElement> {
   icon?: ReactNode;
   iconPosition?: 'left' | 'right';
   endAdornment?: ReactNode;
-  underlineOnHover?: boolean;
+  hoverMode?: 'background' | 'underline';
   asChild?: boolean;
 }
 
@@ -20,7 +20,7 @@ const MenuBaseItem = ({
   onKeyDown,
   role,
   tabIndex,
-  underlineOnHover = true,
+  hoverMode = 'background',
   asChild = false,
   ...props
 }: MenuBaseItemProps) => {
@@ -63,15 +63,26 @@ const MenuBaseItem = ({
     &:focus-within {
       box-shadow: ${theme.boxShadow.focus};
     }
+  `;
 
-    ${underlineOnHover &&
-    `
-      &:hover .ucl-uikit-menu__item-text {
-        text-decoration: underline;
-      }
-    `}
+  const backgroundOnHoverStyle = css`
+    &:hover {
+      background-color: ${theme.colour.fill.brandSubtleHover};
+    }
   `;
-  const style = cx(baseStyle, className);
+
+  const underlineStyleOnHoverStyle = css`
+    &:hover .ucl-uikit-menu__item-text {
+      text-decoration: underline;
+    }
+  `;
+
+  const style = cx(
+    baseStyle,
+    hoverMode === 'underline' && underlineStyleOnHoverStyle,
+    hoverMode === 'background' && backgroundOnHoverStyle,
+    className
+  );
 
   const endAdornmentStyle = css`
     margin-left: auto;

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -49,6 +49,7 @@ const SecondaryMenuItem = ({
     <MenuBaseItem
       className={style}
       asChild={asChild}
+      hoverMode='underline'
       {...props}
     >
       <span className={contentStyle}>

package/lib/components/MenuNew/__tests__/Menu.test.tsx

@@ -86,7 +86,7 @@ describe('Menu', () => {
     ).toBeInTheDocument();
   });
 
-  test('accordion toggles to expanded state with up chevron', () => {
+  test('accordion toggles to expanded state with rotated down chevron', () => {
     wrap(
       <Menu>
         <Menu.Accordion
@@ -98,11 +98,18 @@ describe('Menu', () => {
       </Menu>
     );
 
-    expect(screen.queryByText('Library')).not.toBeInTheDocument();
+    const accordionContent = screen
+      .getByText('Library')
+      .closest('[aria-hidden]');
+    expect(accordionContent).toHaveAttribute('aria-hidden', 'true');
     fireEvent.click(screen.getByText('Services'));
+    expect(accordionContent).toHaveAttribute('aria-hidden', 'false');
     expect(
-      screen.getByTestId('ucl-uikit-menu__accordion__icon--chevron-up')
+      screen.getByTestId('ucl-uikit-menu__accordion__icon--chevron-down')
     ).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ucl-uikit-menu__accordion__icon--chevron-up')
+    ).not.toBeInTheDocument();
     expect(screen.getByText('Library')).toBeInTheDocument();
   });
 
@@ -220,10 +227,10 @@ describe('Menu', () => {
     expect(item?.firstChild).toHaveAttribute('data-testid', 'left-icon');
   });
 
-  test('can disable hover underline', () => {
+  test('primary items use background hover instead of underline hover', () => {
     wrap(
       <Menu>
-        <Menu.PrimaryItem underlineOnHover={false}>Home</Menu.PrimaryItem>
+        <Menu.PrimaryItem>Home</Menu.PrimaryItem>
       </Menu>
     );
 

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';