uikit-react-public 0.25.3 → 0.25.5

package/lib/components/Badge/Badge.stories.tsx

@@ -4,6 +4,8 @@ import Badge from './Badge';
 import { type BadgeVariant } from './Badge';
 
 const VARIANTS: BadgeVariant[] = [
+  'info',
+  'info-subtle',
   'neutral',
   'neutral-subtle',
   'critical',

package/lib/components/Badge/Badge.tsx

@@ -6,6 +6,8 @@ import type { SpecificIconProps } from '../Icon/Icon';
 import type { ThemeType } from '../../theme';
 
 export type BadgeVariant =
+  | 'info'
+  | 'info-subtle'
   | 'neutral'
   | 'neutral-subtle'
   | 'critical'
@@ -19,6 +21,8 @@ export type BadgeVariant =
   | 'disabled';
 
 export const VARIANT_ICON_MAP = {
+  info: Icon.Info,
+  'info-subtle': Icon.Info,
   neutral: Icon.Info,
   'neutral-subtle': Icon.Info,
   critical: Icon.XCircle,
@@ -41,6 +45,14 @@ export interface BadgeVariantStyle {
 export const getBadgeVariantColours = (
   theme: ThemeType
 ): Record<BadgeVariant, BadgeVariantStyle> => ({
+  info: {
+    color: theme.colour.text.inverse,
+    backgroundColor: theme.colour.fill.brandPrimary,
+  },
+  'info-subtle': {
+    color: theme.colour.text.default,
+    backgroundColor: theme.primitiveColour.brandPurple['03'].$value.hex,
+  },
   neutral: {
     color: theme.colour.text.default,
     backgroundColor: 'transparent',

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

@@ -29,6 +29,25 @@ describe('Badge', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('snapshot: variant=info with icon', () => {
+    const { container } = wrap(
+      <Badge
+        variant='info'
+        icon
+      >
+        Info
+      </Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: variant=info-subtle', () => {
+    const { container } = wrap(
+      <Badge variant='info-subtle'>Info subtle</Badge>
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   test('snapshot: variant=critical with icon', () => {
     const { container } = wrap(
       <Badge

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

@@ -73,6 +73,48 @@ exports[`Badge > snapshot: variant=disabled 1`] = `
 </span>
 `;
 
+exports[`Badge > snapshot: variant=info with icon 1`] = `
+<span
+  class="ucl-uikit-badge css-11fgrnl"
+  data-testid="ucl-uikit-badge"
+>
+  <svg
+    aria-hidden="true"
+    class="ucl-uikit-icon css-y1s4m2"
+    data-testid="ucl-uikit-icon"
+    fill="none"
+    focusable="false"
+    height="14"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <path
+      d="M12 16v-4m0-4h.01"
+    />
+  </svg>
+  Info
+</span>
+`;
+
+exports[`Badge > snapshot: variant=info-subtle 1`] = `
+<span
+  class="ucl-uikit-badge css-1t6kxcm"
+  data-testid="ucl-uikit-badge"
+>
+  Info subtle
+</span>
+`;
+
 exports[`Badge > snapshot: variant=success with icon 1`] = `
 <span
   class="ucl-uikit-badge css-16a4ap6"

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