uikit-react-public 0.30.0 → 0.32.3

package/lib/components/Heading/Heading.stories.tsx

@@ -21,45 +21,31 @@ export const Default: Story = {
   },
 };
 
-export const LevelXxl: Story = {
+export const Level1: Story = {
   args: {
-    level: 'xxl',
-    children: 'Heading level XXL',
+    level: 1,
+    children: 'Level 1 Heading',
   },
 };
 
-export const LevelXl: Story = {
+export const Level2: Story = {
   args: {
-    level: 'xl',
-    children: 'Heading level XL',
+    level: 2,
+    children: 'Level 2 Heading',
   },
 };
 
-export const LevelLg: Story = {
+export const Level3: Story = {
   args: {
-    level: 'lg',
-    children: 'Heading level LG',
-  },
-};
-
-export const LevelMd: Story = {
-  args: {
-    level: 'md',
-    children: 'Heading level MD',
-  },
-};
-
-export const LevelSm: Story = {
-  args: {
-    level: 'sm',
-    children: 'Heading level SM',
+    level: 3,
+    children: 'Level 3 Heading',
   },
 };
 
-export const LevelXs: Story = {
+export const Level4: Story = {
   args: {
-    level: 'xs',
-    children: 'Heading level XS',
+    level: 4,
+    children: 'Level 4 Heading',
   },
 };
 
@@ -71,12 +57,12 @@ export const AsSpan: Story = {
   },
 };
 
-export const NoMargins: Story = {
-  name: 'No margins',
+export const withMargins: Story = {
+  name: 'With margins',
   args: {
-    noMargins: true,
+    mb: '24',
     level: 'md',
-    children: 'Heading without margins',
+    children: 'Heading with bottom margin',
   },
   decorators: [
     (Story) => (

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

@@ -0,0 +1,18 @@
+import { ReactNode, createContext, use } from 'react';
+
+interface MenuContextValue {
+  collapsed: boolean;
+}
+
+const MenuContext = createContext<MenuContextValue>({
+  collapsed: false,
+});
+
+export const MenuProvider = ({
+  collapsed,
+  children,
+}: MenuContextValue & { children: ReactNode }) => (
+  <MenuContext value={{ collapsed }}>{children}</MenuContext>
+);
+
+export const useMenu = () => use(MenuContext);

package/lib/components/MenuNew/Menu.tsx

@@ -13,12 +13,14 @@ import ActionMenuButton, { ActionMenuButtonProps } from './ActionMenuButton';
 import PrimaryMenuItem, { PrimaryMenuItemProps } from './PrimaryMenuItem';
 import SecondaryMenuItem, { SecondaryMenuItemProps } from './SecondaryMenuItem';
 import { useTheme } from '../../theme';
+import { MenuProvider } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu';
 
-export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+export interface MenuProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
   border?: boolean;
+  collapsed?: boolean;
 }
 
 export type {
@@ -39,6 +41,7 @@ const Menu = ({
   className,
   children,
   border = false,
+  collapsed = false,
   ...props
 }: MenuProps) => {
   const [theme] = useTheme();
@@ -58,14 +61,16 @@ const Menu = ({
   const style = cx(baseStyle, border && borderStyle, className);
 
   return (
-    <nav
-      className={style}
-      data-testid={testId}
-      role='menu'
-      {...props}
-    >
-      {children}
-    </nav>
+    <MenuProvider collapsed={collapsed}>
+      <nav
+        className={style}
+        data-testid={testId}
+        role='menu'
+        {...props}
+      >
+        {children}
+      </nav>
+    </MenuProvider>
   );
 };
 

package/lib/components/MenuNew/MenuDivider.tsx

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../theme';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__divider';
 
@@ -8,13 +9,23 @@ export interface MenuDividerProps extends HTMLAttributes<HTMLHRElement> {}
 
 const MenuDivider = ({ className, ...props }: MenuDividerProps) => {
   const [theme] = useTheme();
+  const { collapsed } = useMenu();
   const baseStyle = css`
+    flex: 0 0 1px;
+    min-height: 1px;
+    box-sizing: border-box;
+    width: 100%;
+    align-self: stretch;
     border: 0;
     height: 1px;
     background-color: ${theme.colour.border.subtle};
     margin: ${theme.margin.m16} 0;
   `;
-  const style = cx(NAME, baseStyle, className);
+  const collapsedStyle = css`
+    width: 32px;
+    align-self: center;
+  `;
+  const style = cx(NAME, baseStyle, collapsed && collapsedStyle, className);
 
   return (
     <hr

package/lib/components/MenuNew/MenuHeading.tsx

@@ -2,6 +2,7 @@ import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import Heading from '../Heading';
 import { useTheme } from '../../theme';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__heading';
 
@@ -16,6 +17,7 @@ const MenuHeading = ({
   ...props
 }: MenuHeadingProps) => {
   const [theme] = useTheme();
+  const { collapsed } = useMenu();
 
   const baseStyle = css`
     box-sizing: border-box;
@@ -30,6 +32,10 @@ const MenuHeading = ({
 
   const style = cx(NAME, baseStyle, className);
 
+  if (collapsed) {
+    return null;
+  }
+
   const headingStyle = css`
     color: ${theme.colour.text.secondary};
     text-transform: uppercase;

package/lib/components/MenuNew/MenuItemText.tsx

@@ -13,12 +13,14 @@ export const NAME = 'ucl-uikit-menu__item-text';
 export interface MenuItemTextProps {
   asChild?: boolean;
   className?: string;
+  visuallyHidden?: boolean;
   children?: ReactNode;
 }
 
 const MenuItemText = ({
   asChild = false,
   className,
+  visuallyHidden = false,
   children,
 }: MenuItemTextProps) => {
   const asChildResetStyle = css`
@@ -46,18 +48,40 @@ const MenuItemText = ({
       box-shadow: none;
     }
   `;
-  const style = cx(NAME, className);
+  const visuallyHiddenStyle = css`
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  `;
+
+  const style = cx(NAME, visuallyHidden && visuallyHiddenStyle, className);
 
   if (asChild) {
+    const visuallyHiddenAsChildStyle = css`
+      color: transparent;
+      font-size: 0;
+      line-height: 0;
+    `;
+
     const child = Children.only(children) as ReactElement<{
       className?: string;
     }>;
 
     if (isValidElement(child)) {
       return (
-        <Text className={style}>
+        <Text className={cx(NAME, className)}>
           {cloneElement(child, {
-            className: cx(asChildResetStyle, child.props.className),
+            className: cx(
+              asChildResetStyle,
+              visuallyHidden && visuallyHiddenAsChildStyle,
+              child.props.className
+            ),
           })}
         </Text>
       );

package/lib/components/MenuNew/MenuSection.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__section';
 
@@ -13,12 +14,22 @@ const MenuSection = ({
   children,
   ...props
 }: MenuSectionProps) => {
+  const { collapsed } = useMenu();
+
   const style = cx(
     NAME,
     css`
+      width: 100%;
+      box-sizing: border-box;
       margin: 0;
       padding: 0;
     `,
+    collapsed &&
+      css`
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      `,
     className
   );
 

package/lib/components/MenuNew/PrimaryMenuItem.tsx

@@ -4,6 +4,7 @@ import { MenuBaseItemProps } from './MenuBaseItem';
 import MenuBaseItem from './MenuBaseItem';
 import MenuItemText from './MenuItemText';
 import { useTheme } from '../../theme';
+import { useMenu } from './Menu.context';
 
 export const NAME = 'ucl-uikit-menu__primary-item';
 
@@ -20,20 +21,84 @@ const PrimaryMenuItem = ({
   children,
   asChild,
   trailingContent,
+  icon: iconProp,
+  active = false,
   ...props
 }: PrimaryMenuItemProps) => {
   const [theme] = useTheme();
+  const { collapsed } = useMenu();
 
   const baseStyle = css`
     color: ${theme.colour.text.default};
     padding: 0 ${theme.padding.p16};
+    white-space: nowrap;
+    border-radius: 4px;
+
+    > svg {
+      width: 20px;
+      height: 20px;
+      flex: 0 0 20px;
+    }
 
     @media screen and (min-width: ${theme.breakpoints.tablet}px) {
       padding: 0 ${theme.padding.p16};
     }
+
+    &:focus-visible,
+    &:focus-within {
+      border-radius: 4px;
+      box-shadow: none !important;
+      z-index: 1;
+    }
+
+    &:focus-visible::after,
+    &:focus-within::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      box-sizing: border-box;
+      border-radius: 4px;
+      border: 2px solid ${theme.colour.border.brand};
+      pointer-events: none;
+    }
   `;
 
-  const style = cx(NAME, baseStyle, className);
+  const collapsedStyle = css`
+    width: 32px;
+    min-height: 32px;
+    height: 32px;
+    padding: 0;
+    margin-bottom: ${theme.margin.m8};
+    justify-content: center;
+    gap: 0;
+
+    &:focus-visible,
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus} !important;
+    }
+
+    &:focus-visible::after,
+    &:focus-within::after {
+      content: none;
+    }
+  `;
+
+  const collapsedActiveStyle = css`
+    background-color: ${theme.colour.fill.brand};
+    color: ${theme.colour.fill.inverse};
+
+    &:hover {
+      background-color: ${theme.colour.fill.brandHover};
+    }
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    collapsed && collapsedStyle,
+    collapsed && active && collapsedActiveStyle,
+    className
+  );
 
   const textStyle = css``;
 
@@ -48,16 +113,20 @@ const PrimaryMenuItem = ({
       className={style}
       asChild={asChild}
       iconPosition='left'
+      icon={iconProp}
+      active={!collapsed && active}
+      aria-current={active ? 'page' : props['aria-current']}
       {...props}
     >
       <span className={contentStyle}>
         <MenuItemText
           asChild={asChild}
           className={textStyle}
+          visuallyHidden={collapsed}
         >
           {children}
         </MenuItemText>
-        {trailingContent}
+        {!collapsed && trailingContent}
       </span>
     </MenuBaseItem>
   );

package/lib/components/Select/Select.types.ts

@@ -28,13 +28,7 @@ export type OptionData<T> = {
  */
 export type FilterInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  | 'value'
-  | 'onChange'
-  | 'disabled'
-  | 'ref'
-  | 'role'
-  | 'aria-autocomplete'
-  | 'aria-label'
+  'value' | 'onChange' | 'disabled' | 'ref' | 'role' | 'aria-autocomplete'
 >;
 
 export type SelectDropdownWidth = 'content' | 'match-select';

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

@@ -518,6 +518,76 @@ describe('Select', () => {
     );
   });
 
+  test('selectionBehaviour=commit returns focus to the combobox on Enter (filterable)', async () => {
+    const user = userEvent.setup();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          filterable
+          options={defaultOptions}
+          value={value}
+          selectionBehaviour='commit'
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    // Filter input has focus while the panel is open
+    expect(result.getByRole('searchbox')).toHaveFocus();
+
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+
+    // Panel (and its filter input) has closed, and focus is back on the
+    // combobox rather than lost to the document body.
+    expect(
+      result.queryByTestId('ucl-uikit-select__panel')
+    ).not.toBeInTheDocument();
+    expect(result.getByRole('combobox')).toHaveFocus();
+  });
+
+  test('selectionBehaviour=commit announces the committed option via a live region', async () => {
+    const user = userEvent.setup();
+
+    const ControlledSelect = () => {
+      const [value, setValue] = useState('');
+      return (
+        <Select
+          filterable
+          options={defaultOptions}
+          value={value}
+          selectionBehaviour='commit'
+          onValueChange={(next) => setValue(next as string)}
+        />
+      );
+    };
+
+    const result = render(
+      <ThemeContextProvider>
+        <ControlledSelect />
+      </ThemeContextProvider>
+    );
+
+    const status = result.getByRole('status');
+    expect(status).toHaveTextContent('');
+
+    await user.click(result.getByTestId('ucl-uikit-select'));
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{ArrowDown}');
+    await user.keyboard('{Enter}');
+
+    expect(status).toHaveTextContent('Option 2 selected');
+  });
+
   test('keyboard navigation does not get stuck on duplicate values', async () => {
     const user = userEvent.setup();
     const options = [
@@ -969,6 +1039,48 @@ describe('Select', () => {
     ).not.toBeInTheDocument();
   });
 
+  test('aria-activedescendant is absent immediately after opening with a preselected value', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value='2'
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    const combobox = result.getByRole('combobox');
+    await user.click(combobox);
+
+    expect(combobox).not.toHaveAttribute('aria-activedescendant');
+
+    await user.keyboard('{ArrowDown}');
+    expect(combobox).toHaveAttribute('aria-activedescendant');
+  });
+
+  test('filterable: aria-activedescendant is absent immediately after opening with a preselected value', async () => {
+    const user = userEvent.setup();
+    const result = render(
+      <ThemeContextProvider>
+        <Select
+          filterable
+          options={defaultOptions}
+          value='2'
+          onValueChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+
+    await user.click(result.getByRole('combobox'));
+    const filterInput = result.getByRole('searchbox');
+    expect(filterInput).not.toHaveAttribute('aria-activedescendant');
+
+    await user.keyboard('{ArrowDown}');
+    expect(filterInput).toHaveAttribute('aria-activedescendant');
+  });
+
   test('disabled clearable select does not show clear button', () => {
     const result = render(
       <ThemeContextProvider>

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

@@ -35,5 +35,10 @@ exports[`Select > Snapshot: default 1`] = `
       />
     </svg>
   </div>
+  <span
+    aria-live="polite"
+    class="css-fj1rnv"
+    role="status"
+  />
 </div>
 `;