uikit-react-public 0.25.3 → 0.25.4

package/lib/components/Dropdown/Dropdown.context.tsx

@@ -1,6 +1,7 @@
 import React, {
   createContext,
   useContext,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -12,6 +13,7 @@ interface DropdownContextType {
   toggle: () => void;
   triggerRef: React.RefObject<HTMLElement | null>;
   contentRef: React.RefObject<HTMLDivElement | null>;
+  contentId: string;
 }
 
 const DropdownContext = createContext<DropdownContextType | undefined>(
@@ -28,6 +30,10 @@ export const useDropdownContext = () => {
   return context;
 };
 
+export const useDropdownContextOptional = () => {
+  return useContext(DropdownContext);
+};
+
 interface DropdownProviderProps {
   defaultOpen?: boolean;
   children: React.ReactNode;
@@ -40,6 +46,7 @@ const DropdownProvider = ({
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const triggerRef = useRef<HTMLElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
+  const contentId = useId();
 
   const value = useMemo(
     () => ({
@@ -48,8 +55,9 @@ const DropdownProvider = ({
       toggle: () => setIsOpen((prev) => !prev),
       triggerRef,
       contentRef,
+      contentId,
     }),
-    [isOpen]
+    [contentId, isOpen]
   );
 
   return (

package/lib/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, useEffect } from 'react';
+import { HTMLAttributes, useEffect, useRef } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
 import DropdownProvider, { useDropdownContext } from './Dropdown.context';
@@ -19,7 +19,8 @@ const DropdownBody = ({
   ...props
 }: Omit<DropdownProps, 'defaultOpen'>) => {
   const [theme] = useTheme();
-  const { setIsOpen, triggerRef, contentRef } = useDropdownContext();
+  const { isOpen, setIsOpen, triggerRef, contentRef } = useDropdownContext();
+  const wasOpenRef = useRef(isOpen);
 
   useEffect(() => {
     const handleDocumentClick = (event: MouseEvent) => {
@@ -50,6 +51,13 @@ const DropdownBody = ({
     };
   }, [setIsOpen, triggerRef, contentRef]);
 
+  useEffect(() => {
+    if (wasOpenRef.current && !isOpen) {
+      triggerRef.current?.focus();
+    }
+    wasOpenRef.current = isOpen;
+  }, [isOpen, triggerRef]);
+
   const baseStyle = css`
     position: relative;
     display: inline-flex;

package/lib/components/Dropdown/DropdownContent.tsx

@@ -1,6 +1,8 @@
-import { HTMLAttributes, memo } from 'react';
+import { HTMLAttributes, memo, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
+import useMediaQuery from '../../hooks/useMediaQuery';
 import { useDropdownContext } from './Dropdown.context';
 
 export const NAME = 'ucl-uikit-dropdown__content';
@@ -10,35 +12,167 @@ export interface DropdownContentProps extends HTMLAttributes<HTMLDivElement> {
   align?: 'left' | 'right';
 }
 
+const TABLET_BOTTOM_GAP_PX = 32;
+
 const DropdownContent = ({
   testId = NAME,
   align = 'right',
   className,
   children,
+  id,
   ...props
 }: DropdownContentProps) => {
   const [theme] = useTheme();
-  const { isOpen, contentRef } = useDropdownContext();
+  const { isOpen, contentRef, contentId } = useDropdownContext();
+  const [tabletMaxHeight, setTabletMaxHeight] = useState<number | undefined>(
+    undefined
+  );
+  const isTabletAndUp = useMediaQuery(
+    `(min-width: ${theme.breakpoints.tablet}px)`
+  );
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (isTabletAndUp || !isOpen) return;
+
+    const container = contentRef.current;
+    if (!container) return;
+
+    const { body } = document;
+    const previousOverflow = body.style.overflow;
+    const backgroundElements = Array.from(body.children).filter(
+      (element) => element !== container
+    ) as HTMLElement[];
+
+    const previousBackgroundState = backgroundElements.map((element) => ({
+      element,
+      ariaHidden: element.getAttribute('aria-hidden'),
+      inert: (element as HTMLElement & { inert?: boolean }).inert,
+    }));
+
+    body.style.overflow = 'hidden';
+    previousBackgroundState.forEach(({ element }) => {
+      element.setAttribute('aria-hidden', 'true');
+      (element as HTMLElement & { inert?: boolean }).inert = true;
+    });
+
+    const getFocusableElements = () =>
+      Array.from(
+        container.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        )
+      ).filter((element) => !element.hasAttribute('disabled'));
+
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    } else {
+      container.focus();
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Tab') return;
+
+      const elements = getFocusableElements();
+      if (elements.length === 0) {
+        event.preventDefault();
+        container.focus();
+        return;
+      }
+
+      const first = elements[0];
+      const last = elements[elements.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      body.style.overflow = previousOverflow;
+      previousBackgroundState.forEach(({ element, ariaHidden, inert }) => {
+        if (ariaHidden === null) {
+          element.removeAttribute('aria-hidden');
+        } else {
+          element.setAttribute('aria-hidden', ariaHidden);
+        }
+        (element as HTMLElement & { inert?: boolean }).inert = inert;
+      });
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [contentRef, isOpen, isTabletAndUp]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!isTabletAndUp || !isOpen) {
+      setTabletMaxHeight(undefined);
+      return;
+    }
+
+    const updateMaxHeight = () => {
+      const top = contentRef.current?.getBoundingClientRect().top ?? 0;
+      setTabletMaxHeight(
+        Math.max(window.innerHeight - top - TABLET_BOTTOM_GAP_PX, 0)
+      );
+    };
+
+    updateMaxHeight();
+    window.addEventListener('resize', updateMaxHeight);
+
+    return () => {
+      window.removeEventListener('resize', updateMaxHeight);
+    };
+  }, [contentRef, isOpen, isTabletAndUp]);
 
   const baseStyle = css`
     display: none;
-    position: absolute;
-    top: calc(100% + ${theme.margin.m8});
-    z-index: 100;
-    min-width: max-content;
+    z-index: 9999;
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    box-sizing: border-box;
+    overflow-y: auto;
+    overflow-x: hidden;
     background-color: ${theme.colour.surface.default};
     color: ${theme.colour.text.default};
-    border: ${theme.border.b1} solid ${theme.colour.border.default};
-    box-shadow: ${theme.boxShadow.y1};
-    border-radius: ${theme.radius.r4};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      z-index: 100;
+      position: absolute;
+      inset: auto;
+      top: calc(100% + ${theme.margin.m8});
+      width: auto;
+      max-width: none;
+      height: auto;
+      overflow-y: auto;
+      overflow-x: visible;
+      background-color: ${theme.colour.surface.default};
+      color: ${theme.colour.text.default};
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
+      box-shadow: ${theme.boxShadow.y1};
+      border-radius: ${theme.radius.r4};
+    }
   `;
 
   const alignLeftStyle = css`
-    left: 0;
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      left: 0;
+    }
   `;
 
   const alignRightStyle = css`
-    right: 0;
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      right: 0;
+    }
   `;
 
   const openStyle = css`
@@ -50,21 +184,47 @@ const DropdownContent = ({
     baseStyle,
     align === 'left' && alignLeftStyle,
     align === 'right' && alignRightStyle,
-    isOpen && openStyle,
-    className
+    isOpen && openStyle
   );
 
-  return (
+  const panelStyle = css`
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    min-height: 100%;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: auto;
+      max-width: none;
+      min-width: max-content;
+      min-height: auto;
+      overflow-y: auto;
+      background: transparent;
+      color: inherit;
+    }
+  `;
+
+  const content = (
     <div
       ref={contentRef}
       className={style}
-      role='menu'
-      data-testid={testId}
-      {...props}
+      style={isTabletAndUp ? { maxHeight: tabletMaxHeight } : undefined}
+      tabIndex={isTabletAndUp ? undefined : -1}
+      role={isTabletAndUp ? undefined : 'dialog'}
+      aria-modal={isTabletAndUp ? undefined : true}
     >
-      {children}
+      <div
+        className={cx(panelStyle, className)}
+        id={id ?? contentId}
+        data-testid={testId}
+        {...props}
+      >
+        {children}
+      </div>
     </div>
   );
+
+  return !isTabletAndUp ? createPortal(content, document.body) : content;
 };
 
 export default memo(DropdownContent);

package/lib/components/Dropdown/DropdownTrigger.tsx

@@ -15,7 +15,7 @@ export interface DropdownTriggerProps {
 }
 
 const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
-  const { isOpen, toggle, triggerRef } = useDropdownContext();
+  const { isOpen, toggle, triggerRef, contentId } = useDropdownContext();
 
   if (!isValidElement(children)) {
     return null;
@@ -54,8 +54,9 @@ const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
       }
     },
     onKeyDown: handleKeyDown,
-    'aria-haspopup': childProps['aria-haspopup'] ?? 'menu',
+    'aria-haspopup': childProps['aria-haspopup'],
     'aria-expanded': isOpen,
+    'aria-controls': childProps['aria-controls'] ?? contentId,
   });
 };
 

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

@@ -57,7 +57,7 @@ describe('Dropdown', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Open dropdown' }));
     expect(content).toBeVisible();
 
-    fireEvent.mouseDown(screen.getByRole('button', { name: 'Outside' }));
+    fireEvent.mouseDown(screen.getByText('Outside'));
     expect(content).not.toBeVisible();
   });
 });

package/lib/components/DropdownMenu/DropdownMenu.tsx

@@ -4,14 +4,24 @@ import Dropdown, { DropdownProps } from '../Dropdown';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import DropdownMenuTrigger from './DropdownMenuTrigger';
+import { useDropdownContext } from '../Dropdown/Dropdown.context';
 
 export const NAME = 'ucl-uikit-dropdown-menu';
 
+export interface DropdownMenuChildrenApi {
+  close: () => void;
+}
+
+type DropdownMenuChildren =
+  | ReactNode
+  | ((api: DropdownMenuChildrenApi) => ReactNode);
+
 export interface DropdownMenuProps
   extends
     Omit<DropdownProps, 'children'>,
     Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
-  children: ReactNode;
+  align?: 'left' | 'right';
+  children: DropdownMenuChildren;
   label?: string;
   triggerAriaLabelCollapsed?: string;
   triggerAriaLabelExpanded?: string;
@@ -20,7 +30,22 @@ export interface DropdownMenuProps
   contentClassName?: string;
 }
 
+const DropdownMenuContent = ({
+  children,
+}: {
+  children: DropdownMenuChildren;
+}) => {
+  const { setIsOpen } = useDropdownContext();
+
+  if (typeof children === 'function') {
+    return children({ close: () => setIsOpen(false) });
+  }
+
+  return children;
+};
+
 const DropdownMenu = ({
+  align = 'right',
   children,
   label = 'MENU',
   triggerAriaLabelCollapsed = 'Open menu',
@@ -50,6 +75,16 @@ const DropdownMenu = ({
     triggerClassName
   );
 
+  const contentBaseStyle = css`
+    background-color: ${theme.colour.surface.primary};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: 460px;
+    }
+  `;
+
+  const contentStyle = cx(contentBaseStyle, contentClassName);
+
   return (
     <Dropdown
       className={dropdownStyle}
@@ -64,8 +99,11 @@ const DropdownMenu = ({
           className={resolvedTriggerClassName}
         />
       </Dropdown.Trigger>
-      <Dropdown.Content className={contentClassName}>
-        {children}
+      <Dropdown.Content
+        className={contentStyle}
+        align={align}
+      >
+        <DropdownMenuContent>{children}</DropdownMenuContent>
       </Dropdown.Content>
     </Dropdown>
   );

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

@@ -1,6 +1,8 @@
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import DropdownMenu from '../DropdownMenu';
+import Button from '../../Button';
+import Menu from '../../MenuNew';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
 const mockMatchMedia = (matchesDesktop: boolean) => {
@@ -150,4 +152,51 @@ describe('DropdownMenu', () => {
       screen.getByRole('button', { name: 'Hide menu options' })
     ).toBeInTheDocument();
   });
+
+  test('supports render-prop children with close helper', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu>
+          {({ close }) => (
+            <Button
+              aria-label='Close from content'
+              onClick={close}
+            >
+              Close
+            </Button>
+          )}
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open menu' });
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+
+    fireEvent.click(trigger);
+    expect(content).toBeVisible();
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close from content' }));
+    expect(content).not.toBeVisible();
+  });
+
+  test('menu head close button closes dropdown without render-prop usage', () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu>
+          <Menu>
+            <Menu.Head />
+          </Menu>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open menu' });
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+
+    fireEvent.click(trigger);
+    expect(content).toBeVisible();
+
+    fireEvent.click(screen.getByTestId('ucl-uikit-menu__head__close-button'));
+    expect(content).not.toBeVisible();
+  });
 });

package/lib/components/MenuNew/Menu.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes, NamedExoticComponent, memo } from 'react';
 import { css, cx } from '@emotion/css';
 import MenuBaseItem, { MenuBaseItemProps } from './MenuBaseItem';
 import MenuDivider, { MenuDividerProps } from './MenuDivider';
+import MenuHead, { MenuHeadProps } from './MenuHead';
 import MenuHeading, { MenuHeadingProps } from './MenuHeading';
 import MenuSection, { MenuSectionProps } from './MenuSection';
 import MenuAccordion, {
@@ -22,6 +23,7 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
 
 export type {
   MenuDividerProps,
+  MenuHeadProps,
   MenuHeadingProps,
   MenuSectionProps,
   MenuAccordionProps,
@@ -41,11 +43,12 @@ const Menu = ({
 }: MenuProps) => {
   const [theme] = useTheme();
   const baseStyle = css`
-    padding: ${theme.padding.p16} ${theme.padding.p24};
+    width: 100%;
+    box-sizing: border-box;
+    padding: ${theme.padding.p16} ${theme.padding.p16};
     background-color: ${theme.colour.surface.primary};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
-      width: 360px;
       padding: ${theme.padding.p48} ${theme.padding.p64};
     }
   `;
@@ -58,6 +61,7 @@ const Menu = ({
     <nav
       className={style}
       data-testid={testId}
+      role='menu'
       {...props}
     >
       {children}
@@ -67,6 +71,7 @@ const Menu = ({
 
 interface MenuComponent extends NamedExoticComponent<MenuProps> {
   Section: typeof MenuSection;
+  Head: typeof MenuHead;
   Heading: typeof MenuHeading;
   Accordion: typeof MenuAccordion;
   Divider: typeof MenuDivider;
@@ -78,6 +83,7 @@ interface MenuComponent extends NamedExoticComponent<MenuProps> {
 
 const MemoMenu: MenuComponent = Object.assign(memo(Menu), {
   Section: MenuSection,
+  Head: MenuHead,
   Heading: MenuHeading,
   Accordion: MenuAccordion,
   Divider: MenuDivider,

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

@@ -38,6 +38,7 @@ const MenuAccordion = ({
   const baseStyle = css`
     width: 100%;
     color: ${theme.colour.text.default};
+    padding: 0 ${theme.padding.p16};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       padding: 0 ${theme.padding.p16};

package/lib/components/MenuNew/MenuHead.tsx

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { UclLogoNew } from '../UclLogoNew';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+import { useDropdownContextOptional } from '../Dropdown/Dropdown.context';
+
+export const NAME = 'ucl-uikit-menu__head';
+
+export interface MenuHeadProps extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+  onClose?: () => void;
+  closeButtonAriaLabel?: string;
+}
+
+const MenuHead = ({
+  testId = NAME,
+  onClose,
+  closeButtonAriaLabel = 'Close menu',
+  className,
+  ...props
+}: MenuHeadProps) => {
+  const [theme] = useTheme();
+  const dropdownContext = useDropdownContextOptional();
+
+  const baseStyle = css`
+    box-sizing: border-box;
+    margin: 0 0 48px;
+    padding: 0 ${theme.padding.p8};
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      display: none;
+      padding: 0 ${theme.padding.p16};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  const closeButtonStyle = css`
+    width: 32px;
+    height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  `;
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      {...props}
+    >
+      <UclLogoNew
+        testId={`${testId}__logo`}
+        height={30}
+      />
+      <IconButton
+        testId={`${testId}__close-button`}
+        aria-label={closeButtonAriaLabel}
+        onClick={() => {
+          onClose?.();
+          dropdownContext?.setIsOpen(false);
+        }}
+        className={closeButtonStyle}
+      >
+        <Icon.X size={32} />
+      </IconButton>
+    </div>
+  );
+};
+
+export default MenuHead;

package/lib/components/MenuNew/MenuHeading.tsx

@@ -20,6 +20,7 @@ const MenuHeading = ({
   const baseStyle = css`
     box-sizing: border-box;
     margin: ${theme.margin.m32} 0 ${theme.margin.m16};
+    padding: 0 ${theme.padding.p16};
     text-transform: uppercase;
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -26,6 +26,7 @@ const PrimaryMenuItem = ({
 
   const baseStyle = css`
     color: ${theme.colour.text.default};
+    padding: 0 ${theme.padding.p16};
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       padding: 0 ${theme.padding.p16};

package/lib/components/MenuNew/SecondaryMenuItem.tsx

@@ -25,8 +25,12 @@ const SecondaryMenuItem = ({
   const [theme] = useTheme();
 
   const baseStyle = css`
-    padding-inline: ${theme.margin.m16};
+    padding: 0 ${theme.padding.p16};
     color: ${theme.colour.text.secondary};
+
+    @media screen and (min-width: ${theme.breakpoints.tablet}px) {
+      padding: 0 ${theme.padding.p16};
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

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

@@ -26,6 +26,31 @@ describe('Menu', () => {
     expect(heading).not.toHaveAttribute('role', 'button');
   });
 
+  test('renders head item', () => {
+    const onClose = vi.fn();
+
+    wrap(
+      <Menu>
+        <Menu.Head onClose={onClose} />
+      </Menu>
+    );
+
+    const head = screen.getByTestId('ucl-uikit-menu__head');
+    const logo = screen.getByTestId('ucl-uikit-menu__head__logo');
+    const closeButton = screen.getByTestId(
+      'ucl-uikit-menu__head__close-button'
+    );
+
+    expect(head).toBeInTheDocument();
+    expect(logo).toBeInTheDocument();
+    expect(closeButton).toBeInTheDocument();
+    expect(head).toHaveClass('ucl-uikit-menu__head');
+    expect(head).not.toHaveAttribute('role', 'button');
+
+    fireEvent.click(closeButton);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
   test('renders semantic section wrapper', () => {
     wrap(
       <Menu>