uikit-react-public 0.24.4 → 0.25.0

package/dist/components/MenuNew/MenuContent.d.ts

@@ -1,9 +0,0 @@
-import { default as React, HTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-menu__content";
-export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
-    title?: string;
-    testId?: string;
-    position?: 'left' | 'right';
-}
-declare const _default: React.NamedExoticComponent<MenuContentProps>;
-export default _default;

package/dist/components/MenuNew/MenuItem.d.ts

@@ -1,10 +0,0 @@
-import { default as React, LiHTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-menu__item";
-export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
-    testId?: string;
-    icon?: React.ReactNode;
-    secondary?: boolean;
-    externalLink?: boolean;
-}
-declare const _default: React.NamedExoticComponent<MenuItemProps>;
-export default _default;

package/dist/components/MenuNew/MenuSection.d.ts

@@ -1,7 +0,0 @@
-import { default as React, HTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-menu__section";
-export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
-    testId?: string;
-}
-declare const MenuSection: React.FC<MenuSectionProps>;
-export default MenuSection;

package/dist/components/MenuNew/trigger/ButtonMenuTrigger.d.ts

@@ -1,8 +0,0 @@
-import { IconButtonProps } from '../../IconButton';
-export declare const NAME = "ucl-uikit-menu__trigger--button";
-export declare const DEFAULT_ARIA_LABEL = "Menu button";
-export interface ButtonMenuTriggerProps extends IconButtonProps {
-    ariaLabel?: string;
-}
-declare const _default: import('react').MemoExoticComponent<({ id, ariaLabel, className, ...props }: ButtonMenuTriggerProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/MenuNew/trigger/IconMenuTrigger.d.ts

@@ -1,8 +0,0 @@
-import { IconButtonProps } from '../../IconButton';
-export declare const NAME = "ucl-uikit-menu__trigger--icon";
-export declare const DEFAULT_ARIA_LABEL = "Menu button";
-export interface IconMenuTriggerProps extends IconButtonProps {
-    ariaLabel?: string;
-}
-declare const _default: import('react').MemoExoticComponent<({ id, ariaLabel, className, ...props }: IconMenuTriggerProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/SimpleMenu/SimpleMenu.d.ts

@@ -1,7 +0,0 @@
-import { HTMLAttributes } from 'react';
-export declare const NAME = "ucl-uikit-simple-menu";
-export interface SimpleMenuProps extends HTMLAttributes<HTMLUListElement> {
-    testId?: string;
-}
-declare const _default: import('react').MemoExoticComponent<({ testId, className, children, ...props }: SimpleMenuProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/dist/components/SimpleMenu/index.d.ts

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

package/lib/components/MenuNew/Menu.context.tsx

@@ -1,149 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useRef,
-  useEffect,
-} from 'react';
-import useMediaQuery from '../../hooks/useMediaQuery';
-import { useTheme } from '../../theme';
-
-interface IContext {
-  isOpen: boolean;
-  toggleMenu: () => void;
-  triggerRef: React.RefObject<HTMLButtonElement | null>;
-  contentRef: React.RefObject<HTMLDivElement | null>;
-}
-
-export const AppMenuContext = createContext({} as IContext);
-
-export const useAppMenu = () => useContext(AppMenuContext);
-
-const MenuProvider = ({
-  defaultOpen = false,
-  children,
-}: {
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-}) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-  const [theme] = useTheme();
-  const isDesktop = useMediaQuery(
-    `(min-width: ${theme.breakpoints.desktop}px)`
-  );
-
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const originalStyle = document.body.style.overflow;
-    if (isOpen && !isDesktop) {
-      // Prevent background scrolling when menu is open and on mobile
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = originalStyle;
-    }
-    return () => {
-      document.body.style.overflow = originalStyle;
-    };
-  }, [isOpen, isDesktop]);
-
-  useEffect(() => {
-    const closeMenuOutsideClick = (event: MouseEvent) => {
-      if (
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as Node) &&
-        contentRef.current &&
-        !contentRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-
-      if (!isOpen || !contentRef.current) return;
-
-      const focusableElements = Array.from(
-        contentRef.current.querySelectorAll(
-          '[role="menuitem"], [aria-label="Close menu"]'
-        )
-      ).filter((el) => {
-        const element = el as HTMLElement;
-        return (
-          element.getAttribute('aria-disabled') !== 'true' &&
-          element.tabIndex >= 0 &&
-          element.offsetParent !== null
-        );
-      }) as HTMLElement[];
-
-      if (focusableElements.length === 0) return;
-
-      const firstElement = focusableElements[0];
-      const lastElement = focusableElements[focusableElements.length - 1];
-
-      const currentIndex = focusableElements.indexOf(
-        document.activeElement as HTMLElement
-      );
-
-      if (event.key === 'Tab') {
-        // Loop focus on Tab/Shift+Tab
-        if (event.shiftKey && document.activeElement === firstElement) {
-          lastElement.focus();
-          event.preventDefault();
-        } else if (!event.shiftKey && document.activeElement === lastElement) {
-          firstElement.focus();
-          event.preventDefault();
-        }
-      } else if (event.key === 'ArrowDown') {
-        // Move focus to next item
-        if (currentIndex !== -1) {
-          const nextIndex = (currentIndex + 1) % focusableElements.length;
-          focusableElements[nextIndex].focus();
-          event.preventDefault();
-        } else {
-          firstElement.focus();
-          event.preventDefault();
-        }
-      } else if (event.key === 'ArrowUp') {
-        // Move focus to previous item
-        if (currentIndex !== -1) {
-          const prevIndex =
-            (currentIndex - 1 + focusableElements.length) %
-            focusableElements.length;
-          focusableElements[prevIndex].focus();
-          event.preventDefault();
-        } else {
-          lastElement.focus();
-          event.preventDefault();
-        }
-      }
-    };
-
-    document.addEventListener('mousedown', closeMenuOutsideClick);
-    document.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      document.removeEventListener('mousedown', closeMenuOutsideClick);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [isOpen]);
-
-  const toggleMenu = () => setIsOpen((prevOpen) => !prevOpen);
-
-  const value = {
-    isOpen,
-    toggleMenu,
-    triggerRef,
-    contentRef,
-  };
-
-  return (
-    <AppMenuContext.Provider value={value}>{children}</AppMenuContext.Provider>
-  );
-};
-
-export default MenuProvider;

package/lib/components/MenuNew/MenuContent.tsx

@@ -1,140 +0,0 @@
-import React, { HTMLAttributes, memo, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { css, cx } from '@emotion/css';
-import useTheme from '../../theme/useTheme';
-import useMediaQuery from '../../hooks/useMediaQuery';
-import Icon from '../Icon';
-import IconButton from '../IconButton';
-import { useAppMenu } from './Menu.context';
-
-export const NAME = 'ucl-uikit-menu__content';
-
-export interface MenuContentProps extends HTMLAttributes<HTMLUListElement> {
-  title?: string;
-  testId?: string;
-  position?: 'left' | 'right';
-}
-
-const MenuContent: React.FC<MenuContentProps> = ({
-  title,
-  testId = NAME,
-  position = 'right',
-  children,
-  className,
-  ...props
-}) => {
-  const { isOpen, contentRef, toggleMenu } = useAppMenu();
-
-  const [theme] = useTheme();
-
-  const { padding } = theme;
-
-  const isDesktop = useMediaQuery(
-    `(min-width: ${theme.breakpoints.desktop}px)`
-  );
-
-  const baseStyle = css`
-    display: none;
-    z-index: 100;
-    ${position === 'left' ? 'left: 0;' : 'right: 0;'}
-    white-space: nowrap;
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
-
-    position: fixed;
-    height: 100vh;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
-    min-width: 100%;
-
-    a {
-      height: auto;
-    }
-
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      position: absolute;
-      height: auto;
-      min-width: 600px;
-      border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
-      box-shadow: ${theme.boxShadow.y1};
-    }
-  `;
-
-  const openStyle = css`
-    display: block;
-  `;
-
-  const style = cx(NAME, baseStyle, isOpen && openStyle, className);
-
-  const headerStyle = css`
-    display: flex;
-    justify-content: space-between;
-    padding: ${padding.p64} ${padding.p24} ${padding.p16};
-
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      padding: ${padding.p32} ${padding.p48} ${padding.p16} ${padding.p64};
-      justify-content: flex-end;
-    }
-  `;
-
-  const titleStyle = css`
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      display: none;
-    }
-  `;
-
-  const bodyStyle = css`
-    padding: 0 ${padding.p24};
-    list-style: none;
-
-    @media (min-width: ${theme.breakpoints.desktop}px) {
-      margin: 0 ${padding.p64};
-      padding: 0;
-    }
-  `;
-
-  useEffect(() => {
-    const rootDiv = document.getElementById('root');
-    if (rootDiv) {
-      if (!isDesktop && isOpen) {
-        rootDiv.style.display = 'none';
-      } else {
-        rootDiv.style.display = '';
-      }
-    }
-  }, [isOpen, isDesktop]);
-
-  const menuContent = (
-    <div
-      ref={contentRef}
-      className={style}
-    >
-      <header className={headerStyle}>
-        <h3 className={titleStyle}>{title}</h3>
-        <IconButton
-          onClick={toggleMenu}
-          aria-label='Close menu'
-        >
-          <Icon.X size={40} />
-        </IconButton>
-      </header>
-      <ul
-        role='menu'
-        aria-labelledby='app-menu-button'
-        className={bodyStyle}
-        data-testid={testId}
-        tabIndex={-1}
-        {...props}
-      >
-        {children}
-      </ul>
-    </div>
-  );
-
-  return !isDesktop ? createPortal(menuContent, document.body) : menuContent;
-};
-
-export default memo(MenuContent);

package/lib/components/MenuNew/MenuItem.tsx

@@ -1,101 +0,0 @@
-import React, { LiHTMLAttributes, memo } from 'react';
-import { css, cx } from '@emotion/css';
-import useTheme from '../../theme/useTheme';
-import Icon from '../Icon/Icon';
-
-export const NAME = 'ucl-uikit-menu__item';
-
-export interface MenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
-  testId?: string;
-  icon?: React.ReactNode;
-  secondary?: boolean;
-  externalLink?: boolean;
-}
-
-const MenuItem: React.FC<MenuItemProps> = ({
-  testId = NAME,
-  icon,
-  children,
-  className,
-  onClick,
-  secondary,
-  externalLink,
-  ...props
-}) => {
-  const isClickable = !!onClick;
-  const [theme] = useTheme();
-
-  const baseStyle = css`
-    height: 40px;
-    margin-bottom: ${theme.margin.m16};
-    display: flex;
-    align-items: center;
-    font-family: ${theme.font.family.primary};
-    font-size: ${theme.font.size.f16};
-    font-weight: ${secondary
-      ? `${theme.font.weight.medium}`
-      : `${theme.font.weight.bold}`};
-    color: ${theme.color.text.secondary};
-  `;
-
-  const clickableMenuItemStyle = css`
-    color: ${secondary
-      ? `${theme.color.text.secondary}`
-      : `${theme.color.text.primary}`};
-    cursor: pointer;
-    &:hover {
-      background-color: ${theme.color.interaction.blue5};
-    }
-    &:focus-visible {
-      outline: none;
-      box-shadow: ${theme.boxShadow.focus};
-      z-index: 1;
-    }
-  `;
-
-  const iconContainerStyle = css`
-    display: inline-flex;
-    align-items: center;
-    margin-right: ${theme.margin.m32};
-  `;
-
-  const style = cx(
-    NAME,
-    baseStyle,
-    isClickable && clickableMenuItemStyle,
-    className
-  );
-
-  const content = (
-    <>
-      {React.isValidElement(icon) && (
-        <span className={iconContainerStyle}>{icon}</span>
-      )}
-      {children}
-    </>
-  );
-
-  return (
-    <li
-      tabIndex={isClickable ? 0 : -1}
-      role='menuitem'
-      aria-disabled={!isClickable}
-      className={style}
-      data-testid={testId}
-      onClick={onClick}
-      {...props}
-    >
-      {content}
-      {externalLink && (
-        <Icon.ExternalLink
-          size={16}
-          className={css`
-            margin-left: 8px;
-          `}
-        />
-      )}
-    </li>
-  );
-};
-
-export default memo(MenuItem);

package/lib/components/MenuNew/MenuSection.tsx

@@ -1,47 +0,0 @@
-import React, { HTMLAttributes } from 'react';
-import { css, cx } from '@emotion/css';
-import { useTheme } from '../../theme';
-
-export const NAME = 'ucl-uikit-menu__section';
-
-export interface MenuSectionProps extends HTMLAttributes<HTMLLIElement> {
-  testId?: string;
-}
-
-const MenuSection: React.FC<MenuSectionProps> = ({
-  className,
-  children,
-  ...props
-}) => {
-  const [theme] = useTheme();
-
-  const baseStyle = css`
-    padding: 0;
-    margin-top: 0;
-    margin-bottom: ${theme.margin.m32};
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid ${theme.color.neutral.grey10};
-    }
-  `;
-
-  const style = cx(NAME, baseStyle, className);
-
-  const listStyle = css`
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  `;
-
-  return (
-    <li
-      role='presentation'
-      className={style}
-      {...props}
-    >
-      <ul className={listStyle}>{children}</ul>
-    </li>
-  );
-};
-
-export default MenuSection;

package/lib/components/MenuNew/trigger/ButtonMenuTrigger.tsx

@@ -1,42 +0,0 @@
-import { memo } from 'react';
-import { cx } from '@emotion/css';
-import { IconButtonProps } from '../../IconButton';
-import { useAppMenu } from '../Menu.context';
-import { Button, Icon } from '../..';
-
-export const NAME = 'ucl-uikit-menu__trigger--button';
-export const DEFAULT_ARIA_LABEL = 'Menu button';
-
-export interface ButtonMenuTriggerProps extends IconButtonProps {
-  ariaLabel?: string;
-}
-
-const ButtonMenuTrigger = ({
-  id = 'menu-trigger',
-  ariaLabel = DEFAULT_ARIA_LABEL,
-  className,
-  ...props
-}: ButtonMenuTriggerProps) => {
-  const { toggleMenu, isOpen, triggerRef } = useAppMenu();
-
-  const style = cx(NAME, className);
-
-  return (
-    <Button
-      id={id}
-      ref={triggerRef}
-      className={style}
-      size='small'
-      icon={<Icon.Menu />}
-      onClick={toggleMenu}
-      aria-label={ariaLabel}
-      aria-haspopup='true'
-      aria-expanded={isOpen ? 'true' : 'false'}
-      {...props}
-    >
-      Menu
-    </Button>
-  );
-};
-
-export default memo(ButtonMenuTrigger);

package/lib/components/MenuNew/trigger/IconMenuTrigger.tsx

@@ -1,40 +0,0 @@
-import { memo } from 'react';
-import { cx } from '@emotion/css';
-import IconButton, { IconButtonProps } from '../../IconButton';
-import { useAppMenu } from '../Menu.context';
-import { Icon } from '../..';
-
-export const NAME = 'ucl-uikit-menu__trigger--icon';
-export const DEFAULT_ARIA_LABEL = 'Menu button';
-
-export interface IconMenuTriggerProps extends IconButtonProps {
-  ariaLabel?: string;
-}
-
-const IconMenuTrigger = ({
-  id = 'menu-trigger',
-  ariaLabel = DEFAULT_ARIA_LABEL,
-  className,
-  ...props
-}: IconMenuTriggerProps) => {
-  const { toggleMenu, isOpen, triggerRef } = useAppMenu();
-
-  const style = cx(NAME, className);
-
-  return (
-    <IconButton
-      id={id}
-      ref={triggerRef}
-      className={style}
-      onClick={toggleMenu}
-      aria-label={ariaLabel}
-      aria-haspopup='true'
-      aria-expanded={isOpen ? 'true' : 'false'}
-      {...props}
-    >
-      <Icon.Menu/>
-    </IconButton>
-  );
-};
-
-export default memo(IconMenuTrigger);

package/lib/components/SimpleMenu/SimpleMenu.tsx

@@ -1,40 +0,0 @@
-import { HTMLAttributes, memo } from 'react';
-import { css, cx } from '@emotion/css';
-import useTheme from '../../theme/useTheme';
-
-export const NAME = 'ucl-uikit-simple-menu';
-
-export interface SimpleMenuProps extends HTMLAttributes<HTMLUListElement> {
-  testId?: string;
-}
-
-const SimpleMenu = ({
-  testId = NAME,
-  className,
-  children,
-  ...props
-}: SimpleMenuProps) => {
-  const [theme] = useTheme();
-
-  const baseStyle = css`
-    list-style: none;
-    margin: 0;
-    padding: ${theme.padding.p8};
-    border-radius: ${theme.radius.r4};
-  `;
-
-  const style = cx(NAME, baseStyle, className);
-
-  return (
-    <ul
-      role='menu'
-      data-testid={testId}
-      className={style}
-      {...props}
-    >
-      {children}
-    </ul>
-  );
-};
-
-export default memo(SimpleMenu);

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

@@ -1,38 +0,0 @@
-import { describe, expect, test } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import SimpleMenu from '../SimpleMenu';
-import { ThemeContextProvider } from '../../../theme/useTheme';
-
-describe('SimpleMenu', () => {
-  test('renders with default test id', () => {
-    render(
-      <ThemeContextProvider>
-        <SimpleMenu>
-          <li role='menuitem'>Item one</li>
-        </SimpleMenu>
-      </ThemeContextProvider>
-    );
-
-    expect(screen.getByTestId('ucl-uikit-simple-menu')).toBeInTheDocument();
-    expect(screen.getByRole('menu')).toBeInTheDocument();
-    expect(
-      screen.getByRole('menuitem', { name: 'Item one' })
-    ).toBeInTheDocument();
-  });
-
-  test('supports custom test id and className', () => {
-    render(
-      <ThemeContextProvider>
-        <SimpleMenu
-          testId='custom-simple-menu'
-          className='menu-override'
-        >
-          <li role='menuitem'>Item two</li>
-        </SimpleMenu>
-      </ThemeContextProvider>
-    );
-
-    const menu = screen.getByTestId('custom-simple-menu');
-    expect(menu).toHaveClass('menu-override');
-  });
-});

package/lib/components/SimpleMenu/index.ts

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