uikit-react-public 0.25.5 → 0.26.0

package/dist/theme/__tests__/useTheme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/theme/index.d.ts

@@ -1,6 +1,7 @@
 export { default as theme } from './original/defaultTheme';
 export { default as lightTheme } from './light/lightTheme';
 export type { ThemeType, 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/dist/theme/useTheme.d.ts

@@ -1,7 +1,13 @@
 import { ReactNode } from 'react';
 import { ThemeType } from './original/defaultTheme';
+export declare const themes: {
+    readonly default: ThemeType;
+    readonly light: ThemeType;
+};
+export type ThemeName = keyof typeof themes;
 export declare const ThemeContextProvider: React.FC<{
     children: ReactNode;
+    theme?: ThemeType | ThemeName;
     initialTheme?: ThemeType;
 }>;
 declare const useTheme: () => [{
@@ -2673,4 +2679,13 @@ declare const useTheme: () => [{
         custom: (breakpoint: number) => string;
     };
 }>>];
+export declare const ThemeContextConsumer: React.FC<{
+    children: (themeState: ReturnType<typeof useTheme>) => ReactNode;
+}>;
+export declare const ThemeConsumer: React.FC<{
+    children: (context: {
+        theme: ThemeType;
+        setTheme: (theme: ThemeType) => void;
+    }) => ReactNode;
+}>;
 export default useTheme;

package/lib/components/DrawerMenu/DrawerMenu.tsx

@@ -0,0 +1,129 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { css, cx } from '@emotion/css';
+import Dropdown, { DropdownProps } from '../Dropdown';
+import useTheme from '../../theme/useTheme';
+import useMediaQuery from '../../hooks/useMediaQuery';
+import DrawerMenuTrigger from './DrawerMenuTrigger';
+import { useDropdownContext } from '../Dropdown/Dropdown.context';
+
+export const NAME = 'ucl-uikit-drawer-menu';
+
+export interface DrawerMenuChildrenApi {
+  close: () => void;
+}
+
+type DrawerMenuChildren =
+  | ReactNode
+  | ((api: DrawerMenuChildrenApi) => ReactNode);
+
+export interface DrawerMenuProps
+  extends
+    Omit<DropdownProps, 'children'>,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * @deprecated Prefer boundaryRef or boundarySelector so the drawer can
+   * calculate its vertical bounds from the containing layout.
+   */
+  topPx?: number;
+  bottomPx?: number;
+  contentHeight?: number | string;
+  boundaryRef?: RefObject<HTMLElement | null>;
+  boundarySelector?: string;
+  align?: 'left' | 'right';
+  children: DrawerMenuChildren;
+  label?: string;
+  triggerAriaLabelCollapsed?: string;
+  triggerAriaLabelExpanded?: string;
+  dropdownClassName?: string;
+  triggerClassName?: string;
+  contentClassName?: string;
+}
+
+const DrawerMenuContent = ({ children }: { children: DrawerMenuChildren }) => {
+  const { setIsOpen } = useDropdownContext();
+
+  if (typeof children === 'function') {
+    return children({ close: () => setIsOpen(false) });
+  }
+
+  return children;
+};
+
+const DrawerMenu = ({
+  topPx,
+  bottomPx,
+  contentHeight,
+  boundaryRef,
+  boundarySelector,
+  align = 'right',
+  children,
+  label = 'MENU',
+  triggerAriaLabelCollapsed = 'Open menu',
+  triggerAriaLabelExpanded = 'Close menu',
+  dropdownClassName,
+  triggerClassName,
+  contentClassName,
+  className,
+  ...props
+}: DrawerMenuProps) => {
+  const [theme] = useTheme();
+  const isDesktop = useMediaQuery(
+    `(min-width: ${theme.breakpoints.desktop}px)`
+  );
+
+  const triggerStyle = css`
+    color: ${theme.colour.text.brandPrimary};
+    font-family: ${theme.typography.body.mdNumeric.fontFamily};
+    font-weight: ${theme.typography.body.mdNumeric.fontWeight};
+    font-size: 14px;
+  `;
+
+  const dropdownStyle = cx(NAME, dropdownClassName);
+  const resolvedTriggerClassName = cx(
+    triggerStyle,
+    className,
+    triggerClassName
+  );
+
+  const contentBaseStyle = css`
+    background-color: ${theme.colour.surface.primary};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: 460px;
+      border-left: ${theme.border.b1} solid ${theme.colour.border.default};
+    }
+  `;
+
+  const contentStyle = cx(contentBaseStyle, contentClassName);
+
+  return (
+    <Dropdown
+      className={dropdownStyle}
+      {...props}
+    >
+      <Dropdown.Trigger>
+        <DrawerMenuTrigger
+          isDesktop={isDesktop}
+          label={label}
+          triggerAriaLabelCollapsed={triggerAriaLabelCollapsed}
+          triggerAriaLabelExpanded={triggerAriaLabelExpanded}
+          className={resolvedTriggerClassName}
+        />
+      </Dropdown.Trigger>
+      <Dropdown.Content
+        className={contentStyle}
+        align={align}
+        variant='drawer'
+        topPx={topPx}
+        bottomPx={bottomPx}
+        contentHeight={contentHeight}
+        drawerBoundaryRef={boundaryRef}
+        drawerBoundarySelector={boundarySelector}
+      >
+        <DrawerMenuContent>{children}</DrawerMenuContent>
+      </Dropdown.Content>
+    </Dropdown>
+  );
+};
+
+export default DrawerMenu;

package/lib/components/DrawerMenu/DrawerMenuTrigger.tsx

@@ -0,0 +1,9 @@
+import DropdownMenuTrigger, {
+  DropdownMenuTriggerProps,
+} from '../DropdownMenu/DropdownMenuTrigger';
+
+export type DrawerMenuTriggerProps = DropdownMenuTriggerProps;
+
+const DrawerMenuTrigger = DropdownMenuTrigger;
+
+export default DrawerMenuTrigger;

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

@@ -0,0 +1,126 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import DrawerMenu from '../DrawerMenu';
+import Button from '../../Button';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+const mockMatchMedia = (matchesDesktop: boolean) => {
+  globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: query.includes('min-width') ? matchesDesktop : false,
+    media: query,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+};
+
+const createRect = (bottom: number) =>
+  ({
+    bottom,
+    height: bottom,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  }) as DOMRect;
+
+describe('DrawerMenu', () => {
+  beforeEach(() => {
+    mockMatchMedia(true);
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      function getBoundingClientRect(this: HTMLElement) {
+        if (this.tagName === 'HEADER') {
+          return createRect(78);
+        }
+
+        return createRect(0);
+      }
+    );
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('measures the containing header and renders the drawer content', () => {
+    render(
+      <ThemeContextProvider>
+        <header>
+          <DrawerMenu
+            defaultOpen
+            bottomPx={12}
+          >
+            <div>Menu content</div>
+          </DrawerMenu>
+        </header>
+      </ThemeContextProvider>
+    );
+
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    const drawer = content.parentElement;
+
+    expect(drawer).not.toBeNull();
+    expect(drawer).toBeVisible();
+    expect(content).toBeVisible();
+  });
+
+  test('slides closed and open from the right', () => {
+    render(
+      <ThemeContextProvider>
+        <header>
+          <DrawerMenu>
+            {({ close }) => (
+              <Button
+                aria-label='Close from content'
+                onClick={close}
+              >
+                Close
+              </Button>
+            )}
+          </DrawerMenu>
+        </header>
+      </ThemeContextProvider>
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Open menu' });
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    const drawer = content.parentElement;
+
+    expect(drawer).not.toBeVisible();
+
+    fireEvent.click(trigger);
+    expect(drawer).toBeVisible();
+    expect(window.getComputedStyle(drawer as Element).transform).toBe(
+      'translateX(0)'
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Close from content' }));
+    expect(drawer).not.toBeVisible();
+  });
+
+  test('covers the full window below tablet', () => {
+    mockMatchMedia(false);
+
+    render(
+      <ThemeContextProvider>
+        <header>
+          <DrawerMenu defaultOpen>
+            <div>Menu content</div>
+          </DrawerMenu>
+        </header>
+      </ThemeContextProvider>
+    );
+
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    const drawer = content.parentElement;
+
+    expect(drawer).not.toBeNull();
+    expect(window.getComputedStyle(drawer as Element).top).toBe('0px');
+    expect(window.getComputedStyle(drawer as Element).height).toBe('100dvh');
+  });
+});

package/lib/components/DrawerMenu/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DrawerMenu';
+export type { DrawerMenuProps } from './DrawerMenu';

package/lib/components/Dropdown/DropdownContent.tsx

@@ -1,4 +1,4 @@
-import { HTMLAttributes, memo, useEffect, useState } from 'react';
+import { HTMLAttributes, memo, RefObject, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
@@ -7,29 +7,51 @@ import { useDropdownContext } from './Dropdown.context';
 
 export const NAME = 'ucl-uikit-dropdown__content';
 
-export interface DropdownContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface DropdownContentProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'style'
+> {
   testId?: string;
+  topPx?: number;
+  bottomPx?: number;
+  contentHeight?: number | string;
   align?: 'left' | 'right';
+  variant?: 'dropdown' | 'drawer';
+  drawerBoundaryRef?: RefObject<HTMLElement | null>;
+  drawerBoundarySelector?: string;
 }
 
 const TABLET_BOTTOM_GAP_PX = 32;
+const DEFAULT_DRAWER_BOUNDARY_SELECTOR =
+  'header,[role="banner"],[data-drawer-menu-boundary]';
+
+const getCssLength = (value: number | string) =>
+  typeof value === 'number' ? `${value}px` : value;
 
 const DropdownContent = ({
   testId = NAME,
+  topPx,
+  bottomPx = 0,
+  contentHeight,
   align = 'right',
+  variant = 'dropdown',
+  drawerBoundaryRef,
+  drawerBoundarySelector = DEFAULT_DRAWER_BOUNDARY_SELECTOR,
   className,
   children,
   id,
   ...props
 }: DropdownContentProps) => {
   const [theme] = useTheme();
-  const { isOpen, contentRef, contentId } = useDropdownContext();
+  const { isOpen, contentRef, contentId, triggerRef } = useDropdownContext();
   const [tabletMaxHeight, setTabletMaxHeight] = useState<number | undefined>(
     undefined
   );
+  const [drawerTopPx, setDrawerTopPx] = useState(0);
   const isTabletAndUp = useMediaQuery(
     `(min-width: ${theme.breakpoints.tablet}px)`
   );
+  const isDrawer = variant === 'drawer';
 
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -111,7 +133,7 @@ const DropdownContent = ({
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
-    if (!isTabletAndUp || !isOpen) {
+    if (!isTabletAndUp || !isOpen || isDrawer) {
       setTabletMaxHeight(undefined);
       return;
     }
@@ -129,7 +151,69 @@ const DropdownContent = ({
     return () => {
       window.removeEventListener('resize', updateMaxHeight);
     };
-  }, [contentRef, isOpen, isTabletAndUp]);
+  }, [contentRef, isDrawer, isOpen, isTabletAndUp]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    if (!isDrawer || !isOpen || topPx !== undefined) return;
+
+    const getBoundaryElement = () => {
+      if (drawerBoundaryRef?.current) {
+        return drawerBoundaryRef.current;
+      }
+
+      const triggerElement = triggerRef.current;
+      const closestBoundary = triggerElement?.closest<HTMLElement>(
+        drawerBoundarySelector
+      );
+
+      return (
+        closestBoundary ??
+        document.querySelector<HTMLElement>(drawerBoundarySelector)
+      );
+    };
+
+    const boundaryElement = getBoundaryElement();
+
+    const updateDrawerTop = () => {
+      const nextTop = boundaryElement?.getBoundingClientRect().bottom ?? 0;
+      setDrawerTopPx(Math.max(nextTop, 0));
+    };
+
+    updateDrawerTop();
+    window.addEventListener('resize', updateDrawerTop);
+    window.addEventListener('scroll', updateDrawerTop, true);
+
+    const resizeObserver =
+      typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(updateDrawerTop);
+
+    if (boundaryElement) {
+      resizeObserver?.observe(boundaryElement);
+    }
+
+    return () => {
+      window.removeEventListener('resize', updateDrawerTop);
+      window.removeEventListener('scroll', updateDrawerTop, true);
+      resizeObserver?.disconnect();
+    };
+  }, [
+    drawerBoundaryRef,
+    drawerBoundarySelector,
+    isDrawer,
+    isOpen,
+    topPx,
+    triggerRef,
+  ]);
+
+  const drawerTop =
+    topPx === undefined ? `${drawerTopPx}px` : getCssLength(topPx);
+  const drawerBottom = getCssLength(bottomPx);
+  const drawerHeight =
+    contentHeight === undefined
+      ? `calc(100dvh - ${drawerTop} - ${drawerBottom})`
+      : getCssLength(contentHeight);
 
   const baseStyle = css`
     display: none;
@@ -148,18 +232,58 @@ const DropdownContent = ({
     @media (min-width: ${theme.breakpoints.tablet}px) {
       z-index: 100;
       position: absolute;
+      box-sizing: border-box;
       inset: auto;
       top: calc(100% + ${theme.margin.m8});
       width: auto;
       max-width: none;
       height: auto;
-      overflow-y: auto;
+      overflow-y: visible;
       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 drawerStyle = css`
+    display: block;
+    position: fixed;
+    inset: auto;
+    top: 0;
+    bottom: auto;
+    width: 100vw;
+    max-width: 100vw;
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateX(100%);
+    transition:
+      transform 180ms ease-in-out,
+      visibility 0ms linear 180ms;
+    will-change: transform;
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      z-index: 100;
+      position: fixed;
+      top: ${drawerTop};
+      bottom: auto;
+      height: ${drawerHeight};
+      max-height: ${drawerHeight};
+      width: auto;
+      max-width: none;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  `;
+
+  const topStyle = css`
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      position: fixed;
+      top: ${topPx}px;
+      height: calc(100vh - ${topPx}px);
     }
   `;
 
@@ -169,6 +293,14 @@ const DropdownContent = ({
     }
   `;
 
+  const drawerAlignLeftStyle = css`
+    transform: translateX(-100%);
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      left: 0;
+    }
+  `;
+
   const alignRightStyle = css`
     @media (min-width: ${theme.breakpoints.tablet}px) {
       right: 0;
@@ -179,15 +311,24 @@ const DropdownContent = ({
     display: block;
   `;
 
+  const drawerOpenStyle = css`
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateX(0);
+    transition: transform 180ms ease;
+  `;
+
   const style = cx(
     NAME,
     baseStyle,
-    align === 'left' && alignLeftStyle,
+    isDrawer && drawerStyle,
+    !isDrawer && topPx !== undefined && topStyle,
+    align === 'left' && (isDrawer ? drawerAlignLeftStyle : alignLeftStyle),
     align === 'right' && alignRightStyle,
-    isOpen && openStyle
+    isOpen && (isDrawer ? drawerOpenStyle : openStyle)
   );
 
-  const panelStyle = css`
+  const panelBaseStyle = css`
     box-sizing: border-box;
     width: 100%;
     max-width: 100%;
@@ -204,17 +345,28 @@ const DropdownContent = ({
     }
   `;
 
+  const panelMaxHeightStyle = css`
+    max-height: ${tabletMaxHeight}px;
+  `;
+  const hasPanelMaxHeight =
+    !isDrawer && isTabletAndUp && tabletMaxHeight !== undefined;
+  const panelStyle = cx(
+    panelBaseStyle,
+    hasPanelMaxHeight && panelMaxHeightStyle,
+    className
+  );
+
   const content = (
     <div
       ref={contentRef}
       className={style}
-      style={isTabletAndUp ? { maxHeight: tabletMaxHeight } : undefined}
       tabIndex={isTabletAndUp ? undefined : -1}
       role={isTabletAndUp ? undefined : 'dialog'}
       aria-modal={isTabletAndUp ? undefined : true}
+      aria-hidden={!isOpen}
     >
       <div
-        className={cx(panelStyle, className)}
+        className={panelStyle}
         id={id ?? contentId}
         data-testid={testId}
         {...props}

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

@@ -60,4 +60,24 @@ describe('Dropdown', () => {
     fireEvent.mouseDown(screen.getByText('Outside'));
     expect(content).not.toBeVisible();
   });
+
+  test('left aligned dropdown does not use drawer slide transform', () => {
+    render(
+      <ThemeContextProvider>
+        <Dropdown defaultOpen>
+          <Dropdown.Trigger>
+            <Button aria-label='Open dropdown'>Open</Button>
+          </Dropdown.Trigger>
+          <Dropdown.Content align='left'>
+            <div>Content</div>
+          </Dropdown.Content>
+        </Dropdown>
+      </ThemeContextProvider>
+    );
+
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    const shell = content.parentElement;
+
+    expect(shell).not.toHaveStyle({ transform: 'translateX(-100%)' });
+  });
 });

package/lib/components/DropdownMenu/DropdownMenu.tsx

@@ -80,6 +80,9 @@ const DropdownMenu = ({
 
     @media (min-width: ${theme.breakpoints.tablet}px) {
       width: 460px;
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
+      box-shadow: ${theme.boxShadow.y1};
+      border-radius: ${theme.radius.r4};
     }
   `;
 

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

@@ -199,4 +199,25 @@ describe('DropdownMenu', () => {
     fireEvent.click(screen.getByTestId('ucl-uikit-menu__head__close-button'));
     expect(content).not.toBeVisible();
   });
+
+  test('keeps tablet scroll bounds on the bordered content panel', async () => {
+    render(
+      <ThemeContextProvider>
+        <DropdownMenu
+          defaultOpen
+          contentClassName='bordered-panel'
+        >
+          <div>Menu content</div>
+        </DropdownMenu>
+      </ThemeContextProvider>
+    );
+
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    const shell = content.parentElement;
+
+    expect(shell).not.toBeNull();
+    expect((shell as HTMLElement).style.maxHeight).toBe('');
+    expect(shell).not.toHaveClass('bordered-panel');
+    expect(content).toHaveClass('bordered-panel');
+  });
 });

package/lib/components/DropdownUserMenu/DropdownUserMenu.tsx

@@ -78,6 +78,16 @@ const DropdownUserMenu = ({
     pointer-events: none;
   `;
 
+  const contentBaseStyle = css`
+    background-color: ${theme.colour.surface.primary};
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      border: ${theme.border.b1} solid ${theme.colour.border.default};
+      box-shadow: ${theme.boxShadow.y1};
+      border-radius: ${theme.radius.r4};
+    }
+  `;
+
   const dropdownStyle = cx(NAME, dropdownClassName);
   const resolvedTriggerClassName = cx(
     triggerStyle,
@@ -86,6 +96,7 @@ const DropdownUserMenu = ({
   );
   const resolvedUserNameClassName = cx(userNameStyle, userNameClassName);
   const resolvedAvatarClassName = cx(avatarStyle, avatarClassName);
+  const resolvedContentClassName = cx(contentBaseStyle, contentClassName);
 
   return (
     <Dropdown
@@ -114,7 +125,7 @@ const DropdownUserMenu = ({
           <Icon.ChevronDown size={20} />
         </div>
       </Dropdown.Trigger>
-      <Dropdown.Content className={contentClassName}>
+      <Dropdown.Content className={resolvedContentClassName}>
         {children}
       </Dropdown.Content>
     </Dropdown>

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

@@ -65,9 +65,9 @@ describe('DropdownUserMenu', () => {
     expect(screen.getByRole('button', { name: 'Open user menu' })).toHaveClass(
       'trigger-override'
     );
-    expect(screen.getByTestId('ucl-uikit-dropdown__content')).toHaveClass(
-      'content-override'
-    );
+    const content = screen.getByTestId('ucl-uikit-dropdown__content');
+    expect(content).toHaveClass('content-override');
+    expect(content.className.split(' ').length).toBeGreaterThan(1);
     expect(screen.getByTestId('ucl-uikit-avatar')).toHaveClass(
       'avatar-override'
     );