uikit-react-public 0.50.5 → 0.50.6

package/lib/components/ToggleGroup/ToggleGroup.tsx

@@ -7,18 +7,23 @@ import {
   useState,
 } from 'react';
 
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import useMediaQuery from '../../hooks/useMediaQuery';
 import Select, { NonClearableSelectProps } from '../Select';
 import ToggleGroupContext from './ToggleGroupContext';
-import Item, { ItemProps } from './subcomponents/Item';
+import ToggleGroupItem, {
+  ToggleGroupItemProps,
+} from './subcomponents/ToggleGroupItem';
+
+export const NAME = 'ucl-uikit-toggle-group';
 
 export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   value?: string;
   defaultValue?: string;
   onValueChange?: (value: string) => void;
+  testId?: string;
   selectProps?: Omit<
     NonClearableSelectProps<string>,
     'options' | 'value' | 'onValueChange'
@@ -27,7 +32,14 @@ export interface ToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const MOBILE_SELECT_ITEM_THRESHOLD = 2;
 
-const NAVIGATION_KEYS = ['ArrowRight', 'ArrowLeft', 'Home', 'End'];
+const NAVIGATION_KEYS = [
+  'ArrowRight',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowUp',
+  'Home',
+  'End',
+];
 
 const getEnabledItems = (container: HTMLElement) =>
   Array.from(
@@ -38,13 +50,13 @@ const getEnabledItems = (container: HTMLElement) =>
 
 const getItemsFromChildren = (
   children: React.ReactNode
-): React.ReactElement<ItemProps>[] =>
+): React.ReactElement<ToggleGroupItemProps>[] =>
   Children.toArray(children).flatMap((child) => {
     if (!isValidElement<{ children?: React.ReactNode }>(child)) {
       return [];
     }
-    if (child.type === Item) {
-      return [child as React.ReactElement<ItemProps>];
+    if (child.type === ToggleGroupItem) {
+      return [child as React.ReactElement<ToggleGroupItemProps>];
     }
     return getItemsFromChildren(child.props.children);
   });
@@ -55,6 +67,10 @@ const ToggleGroup = ({
   defaultValue,
   onValueChange,
   selectProps,
+  className,
+  onKeyDown,
+  testId = NAME,
+  ...htmlAttributes
 }: ToggleGroupProps) => {
   const [theme] = useTheme();
   const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
@@ -63,6 +79,14 @@ const ToggleGroup = ({
   const isMobile = !useMediaQuery(`(min-width: ${theme.breakpoints.tablet}px)`);
   const items = getItemsFromChildren(children);
   const name = useId();
+  const hasSublabel = items.some((item) => item.props.sublabel);
+  const firstEnabledValue = items.find((item) => !item.props.disabled)?.props
+    .value;
+  const tabbableValue = items.some(
+    (item) => item.props.value === selectedValue && !item.props.disabled
+  )
+    ? selectedValue
+    : firstEnabledValue;
 
   const setValue = (nextValue: string) => {
     if (!isControlled) {
@@ -73,6 +97,12 @@ const ToggleGroup = ({
   };
 
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
     if (!NAVIGATION_KEYS.includes(event.key)) {
       return;
     }
@@ -91,8 +121,10 @@ const ToggleGroup = ({
     const nextIndex =
       {
         ArrowRight: (currentIndex + 1) % enabledItems.length,
+        ArrowDown: (currentIndex + 1) % enabledItems.length,
         ArrowLeft:
           (currentIndex - 1 + enabledItems.length) % enabledItems.length,
+        ArrowUp: (currentIndex - 1 + enabledItems.length) % enabledItems.length,
         Home: 0,
         End: enabledItems.length - 1,
       }[event.key] ?? currentIndex;
@@ -104,7 +136,6 @@ const ToggleGroup = ({
 
   const toggleGroupStyle = css`
     display: flex;
-    gap: -1px;
     padding: ${theme.padding.p4};
     background-color: ${theme.colour.fill.subtle};
     border-radius: ${theme.radius.r4};
@@ -114,6 +145,8 @@ const ToggleGroup = ({
     return (
       <Select
         {...selectProps}
+        className={cx(NAME, selectProps?.className, className)}
+        testId={testId}
         options={items.map((item) => ({
           label: item.props.label,
           value: item.props.value,
@@ -126,10 +159,18 @@ const ToggleGroup = ({
 
   return (
     <ToggleGroupContext.Provider
-      value={{ value: selectedValue, setValue, name }}
+      value={{
+        value: selectedValue,
+        setValue,
+        name,
+        tabbableValue,
+        hasSublabel,
+      }}
     >
       <div
-        className={toggleGroupStyle}
+        {...htmlAttributes}
+        className={cx(NAME, toggleGroupStyle, className)}
+        data-testid={testId}
         role='radiogroup'
         onKeyDown={handleKeyDown}
       >
@@ -139,6 +180,6 @@ const ToggleGroup = ({
   );
 };
 
-ToggleGroup.Item = Item;
+ToggleGroup.Item = ToggleGroupItem;
 
 export default ToggleGroup;

package/lib/components/ToggleGroup/ToggleGroupContext.tsx

@@ -4,6 +4,8 @@ export interface ToggleGroupContextType {
   value: string | undefined;
   setValue: (value: string) => void;
   name: string;
+  tabbableValue: string | undefined;
+  hasSublabel: boolean;
 }
 
 const ToggleGroupContext = createContext<ToggleGroupContextType | undefined>(

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

@@ -2,9 +2,10 @@ import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import ToggleGroup from '../ToggleGroup';
-import ToggleGroupItem from '../subcomponents/Item';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
+const ToggleGroupItem = ToggleGroup.Item;
+
 const mockMatchMedia = (matchesDesktop: boolean) => {
   globalThis.matchMedia = vi.fn().mockImplementation((query) => ({
     matches: query.includes('min-width') ? matchesDesktop : false,
@@ -44,7 +45,10 @@ describe('ToggleGroup', () => {
       </ToggleGroup>
     );
 
-    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+    expect(screen.getByRole('radiogroup')).toHaveClass(
+      'ucl-uikit-toggle-group'
+    );
+    expect(screen.getByTestId('ucl-uikit-toggle-group')).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: 'Option 1' })).toHaveAttribute(
       'aria-checked',
       'true'
@@ -187,6 +191,90 @@ describe('ToggleGroup', () => {
     expect(option3).toHaveAttribute('aria-checked', 'true');
   });
 
+  test('moves focus and selection with vertical arrow keys', () => {
+    wrap(
+      <ToggleGroup defaultValue='option-1'>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    const option1 = screen.getByRole('radio', { name: 'Option 1' });
+    const option2 = screen.getByRole('radio', { name: 'Option 2' });
+
+    option1.focus();
+    fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowDown' });
+
+    expect(option2).toHaveFocus();
+    expect(option2).toHaveAttribute('aria-checked', 'true');
+
+    fireEvent.keyDown(screen.getByRole('radiogroup'), { key: 'ArrowUp' });
+
+    expect(option1).toHaveFocus();
+    expect(option1).toHaveAttribute('aria-checked', 'true');
+  });
+
+  test('makes the first enabled item tabbable when no item is selected', () => {
+    wrap(
+      <ToggleGroup>
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+          disabled
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    expect(screen.getByRole('radio', { name: 'Option 1' })).toHaveAttribute(
+      'tabindex',
+      '-1'
+    );
+    expect(screen.getByRole('radio', { name: 'Option 2' })).toHaveAttribute(
+      'tabindex',
+      '0'
+    );
+  });
+
+  test('forwards HTML attributes and composes onKeyDown', () => {
+    const onKeyDown = vi.fn();
+
+    wrap(
+      <ToggleGroup
+        aria-label='View'
+        className='custom-toggle-group'
+        defaultValue='option-1'
+        onKeyDown={onKeyDown}
+        testId='toggle-group'
+      >
+        <ToggleGroupItem
+          value='option-1'
+          label='Option 1'
+        />
+        <ToggleGroupItem
+          value='option-2'
+          label='Option 2'
+        />
+      </ToggleGroup>
+    );
+
+    const group = screen.getByTestId('toggle-group');
+    fireEvent.keyDown(group, { key: 'a' });
+
+    expect(group).toHaveAccessibleName('View');
+    expect(group).toHaveClass('ucl-uikit-toggle-group', 'custom-toggle-group');
+    expect(onKeyDown).toHaveBeenCalledOnce();
+  });
+
   test('skips disabled items when navigating with arrow keys', () => {
     wrap(
       <ToggleGroup defaultValue='option-1'>
@@ -272,7 +360,11 @@ describe('ToggleGroup mobile select fallback', () => {
 
   test('renders a Select instead of the radiogroup once item count exceeds the threshold', () => {
     wrap(
-      <ToggleGroup defaultValue='option-1'>
+      <ToggleGroup
+        className='custom-toggle-group'
+        defaultValue='option-1'
+        testId='responsive-toggle-group'
+      >
         <ToggleGroupItem
           value='option-1'
           label='Option 1'
@@ -289,7 +381,14 @@ describe('ToggleGroup mobile select fallback', () => {
     );
 
     expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument();
-    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'data-testid',
+      'responsive-toggle-group'
+    );
+    expect(screen.getByRole('combobox')).toHaveClass(
+      'ucl-uikit-toggle-group',
+      'custom-toggle-group'
+    );
   });
 
   test('counts items nested in fragments toward the mobile select threshold', async () => {
@@ -418,7 +517,7 @@ describe('ToggleGroup mobile select fallback', () => {
     );
 
     const select = screen.getByTestId(
-      'ucl-uikit-select--native'
+      'ucl-uikit-toggle-group'
     ) as HTMLSelectElement;
 
     expect(select.tagName).toBe('SELECT');
@@ -458,7 +557,7 @@ describe('ToggleGroup mobile select fallback', () => {
       </ToggleGroup>
     );
 
-    fireEvent.change(screen.getByTestId('ucl-uikit-select--native'), {
+    fireEvent.change(screen.getByTestId('ucl-uikit-toggle-group'), {
       target: { value: 'option-2' },
     });
 

package/lib/components/ToggleGroup/index.ts

@@ -1,4 +1,3 @@
 export { default } from './ToggleGroup';
 export type { ToggleGroupProps } from './ToggleGroup';
-export { default as Item } from './subcomponents/Item';
-export type { ItemProps } from './subcomponents/Item';
+export type { ToggleGroupItemProps } from './subcomponents/ToggleGroupItem';

package/lib/components/ToggleGroup/subcomponents/{Item.stories.tsx → ToggleGroupItem.stories.tsx}

@@ -1,11 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import ToggleGroup from '../ToggleGroup';
-import Item from './Item';
 
 const meta = {
   title: 'Components/ToggleGroup/Item',
-  component: Item,
+  component: ToggleGroup.Item,
   parameters: {
     layout: 'centered',
   },
@@ -17,7 +16,7 @@ const meta = {
       </ToggleGroup>
     ),
   ],
-} satisfies Meta<typeof Item>;
+} satisfies Meta<typeof ToggleGroup.Item>;
 
 export default meta;
 

package/lib/components/ToggleGroup/subcomponents/{Item.tsx → ToggleGroupItem.tsx}

@@ -1,37 +1,60 @@
-import type { InputHTMLAttributes } from 'react';
+import type React from 'react';
 import { css, cx } from '@emotion/css';
 
 import useTheme from '../../../theme/useTheme';
-import Text from '../../Text';
 import Icon from '../../Icon';
 import type { SpecificIconsType } from '../../Icon/Icon';
+import Text from '../../Text';
 import { useToggleGroupContext } from '../ToggleGroupContext';
 
-export interface ItemProps extends InputHTMLAttributes<HTMLInputElement> {
+export const NAME = 'ucl-uikit-toggle-group__item';
+
+const LABEL_CLASS_NAME = `${NAME}-label`;
+
+export interface ToggleGroupItemProps extends React.InputHTMLAttributes<HTMLInputElement> {
   value: string;
   label: string;
   icon?: keyof SpecificIconsType;
   disabled?: boolean;
   sublabel?: string;
+  testId?: string;
 }
 
-const Item = ({
+const ToggleGroupItem = ({
   value,
   label,
   sublabel,
   icon,
   disabled = false,
-}: ItemProps) => {
+  className,
+  onChange,
+  testId = NAME,
+  ...inputProps
+}: ToggleGroupItemProps) => {
   const [theme] = useTheme();
-  const { value: selectedValue, setValue, name } = useToggleGroupContext();
+  const {
+    value: selectedValue,
+    setValue,
+    name,
+    tabbableValue,
+    hasSublabel,
+  } = useToggleGroupContext();
   const selected = selectedValue === value;
+  const sublabelLineHeight =
+    theme.typography.body.xs.fontSize *
+    (theme.typography.body.xs.lineHeight / 100);
 
   const toggleGroupItemContainerStyle = css`
     box-sizing: border-box;
     position: relative;
     display: flex;
-    flex: 1 0 auto;
-    height: ${theme.height.h40};
+    flex: 1 1 0;
+    min-width: max-content;
+    height: ${
+      hasSublabel
+        ? `calc(${theme.height.h40} + ${theme.padding.p8})`
+        : theme.height.h40
+    };
     padding: ${theme.padding.p8};
     align-items: center;
     justify-content: center;
@@ -55,6 +78,10 @@ const Item = ({
         :hover {
           background-color: ${theme.colour.fill.brandSubtle};
         }
+
+        :hover .${LABEL_CLASS_NAME} {
+          font-weight: ${theme.typography.body.smSemibold.fontWeight};
+        }
       `
     }
 
@@ -82,6 +109,17 @@ const Item = ({
     gap: ${theme.padding.p8};
   `;
 
+  const toggleGroupItemContentStyle = css`
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    display: flex;
+    padding: ${theme.padding.p8};
+    align-items: center;
+    justify-content: ${sublabel ? 'space-between' : 'center'};
+    gap: ${theme.padding.p8};
+  `;
+
   const toggleGroupItemSizerStyle = cx(
     flexRowStyle,
     css`
@@ -89,24 +127,8 @@ const Item = ({
     `
   );
 
-  const toggleGroupItemContentStyle = cx(
-    flexRowStyle,
-    css`
-      box-sizing: border-box;
-      position: absolute;
-      inset: 0;
-      justify-content: ${sublabel && icon ? 'space-between' : 'center'};
-      padding: ${theme.padding.p8};
-    `
-  );
-
-  const toggleGroupItemLabelBaseStyle = css`
-    text-align: ${sublabel && icon ? 'left' : 'center'};
-  `;
-
   const toggleGroupItemLabelSelectedStyle = css`
     color: ${theme.colour.text.brand};
-    font-weight: ${theme.typography.body.smSemibold.fontWeight};
   `;
 
   const toggleGroupItemLabelDisabledStyle = css`
@@ -114,7 +136,6 @@ const Item = ({
   `;
 
   const toggleGroupItemLabelStyle = cx(
-    toggleGroupItemLabelBaseStyle,
     selected && !disabled && toggleGroupItemLabelSelectedStyle,
     disabled && toggleGroupItemLabelDisabledStyle
   );
@@ -140,8 +161,31 @@ const Item = ({
   );
 
   const toggleGroupItemTextStyle = css`
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding-bottom: ${sublabel ? `${sublabelLineHeight}px` : 0};
+    text-align: left;
+  `;
+
+  const toggleGroupItemReservedTextStyle = css`
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
+  `;
+
+  const toggleGroupItemLabelSizerStyle = css`
+    display: inline-grid;
+    white-space: nowrap;
+
+    > * {
+      grid-area: 1 / 1;
+    }
+  `;
+
+  const toggleGroupItemReservedLabelStyle = css`
+    visibility: hidden;
   `;
 
   const toggleGroupItemSublabelBaseStyle = css`
@@ -157,32 +201,58 @@ const Item = ({
     disabled && toggleGroupItemSublabelDisabledStyle
   );
 
-  const toggleGroupItemLabelGroupStyle = flexRowStyle;
+  const toggleGroupItemPositionedSublabelStyle = css`
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    white-space: nowrap;
+  `;
 
   const toggleGroupItemCheckIconStyle = css`
     color: ${theme.colour.icon.brand};
+    visibility: ${selected ? 'visible' : 'hidden'};
   `;
 
   const IconComponent = icon ? Icon[icon] : undefined;
 
-  const labelContent = (
-    <div className={toggleGroupItemLabelGroupStyle}>
+  const renderLabelContent = (reserved = false) => (
+    <div className={flexRowStyle}>
       {IconComponent && (
         <span className={toggleGroupItemIconStyle}>
           <IconComponent size={16} />
         </span>
       )}
-      <div className={toggleGroupItemTextStyle}>
-        <Text
-          level='sm'
-          className={toggleGroupItemLabelStyle}
-        >
-          {label}
-        </Text>
+      <div
+        className={
+          reserved ? toggleGroupItemReservedTextStyle : toggleGroupItemTextStyle
+        }
+      >
+        {reserved ? (
+          <Text level='sm-semibold'>{label}</Text>
+        ) : (
+          <span className={toggleGroupItemLabelSizerStyle}>
+            <Text
+              level={selected && !disabled ? 'sm-semibold' : 'sm'}
+              className={cx(LABEL_CLASS_NAME, toggleGroupItemLabelStyle)}
+            >
+              {label}
+            </Text>
+            <Text
+              aria-hidden
+              level='sm-semibold'
+              className={toggleGroupItemReservedLabelStyle}
+            >
+              {label}
+            </Text>
+          </span>
+        )}
         {sublabel && (
           <Text
             level='xs'
-            className={toggleGroupItemSublabelStyle}
+            className={cx(
+              toggleGroupItemSublabelStyle,
+              !reserved && toggleGroupItemPositionedSublabelStyle
+            )}
           >
             {sublabel}
           </Text>
@@ -191,43 +261,47 @@ const Item = ({
     </div>
   );
 
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    setValue(value);
+    onChange?.(event);
+  };
+
   return (
     <label className={toggleGroupItemContainerStyle}>
       <input
+        {...inputProps}
         type='radio'
-        className={toggleGroupItemInputStyle}
+        className={cx(NAME, toggleGroupItemInputStyle, className)}
         role='radio'
         aria-checked={selected}
         checked={selected}
         disabled={disabled}
         name={name}
         value={value}
-        tabIndex={selected ? 0 : -1}
+        tabIndex={tabbableValue === value ? 0 : -1}
         data-ucl-toggle-group-value={value}
-        onChange={() => {
-          if (disabled) return;
-          setValue(value);
-        }}
+        data-testid={testId}
+        onChange={handleChange}
       />
       <div
         aria-hidden
         className={toggleGroupItemSizerStyle}
       >
-        {labelContent}
+        {renderLabelContent(true)}
         <Icon.Check size={16} />
       </div>
       <div className={toggleGroupItemContentStyle}>
-        {labelContent}
-        {selected && (
-          <Icon.Check
-            aria-hidden
-            className={toggleGroupItemCheckIconStyle}
-            size={16}
-          />
-        )}
+        {renderLabelContent()}
+        <Icon.Check
+          aria-hidden
+          className={toggleGroupItemCheckIconStyle}
+          size={16}
+        />
       </div>
     </label>
   );
 };
 
-export default Item;
+export default ToggleGroupItem;