uikit-react-public 0.17.4 → 0.21.9

package/lib/components/Select/subcomponents/CustomSelect.tsx

@@ -2,12 +2,24 @@ import { useState, useRef, useEffect, useMemo, useId } from 'react';
 import { css, cx } from '@emotion/css';
 import { VisibleField, Panel, CustomOption, FilterInput } from '.';
 import { useTheme } from '../../../theme';
-import type { SelectProps } from '../Select.types';
+import type { InternalSelectProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select';
+const FOCUSABLE_ELEMENTS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+  'audio[controls]',
+  'video[controls]',
+  'details > summary:first-of-type',
+].join(', ');
 
 type CustomSelectProps<T> = Omit<
-  SelectProps<T>,
+  InternalSelectProps<T>,
   'native' | 'nativeHtmlAttributes'
 >;
 
@@ -17,6 +29,7 @@ const CustomSelect = <T extends string | number>({
   options = [],
   onValueChange,
   disabled,
+  clearable = false,
   placeholder,
   lineBreak = false,
   filterInputProps,
@@ -95,6 +108,7 @@ const CustomSelect = <T extends string | number>({
     null
   );
   const filterInputRef = useRef<HTMLInputElement | null>(null);
+  const clearButtonRef = useRef<HTMLButtonElement | null>(null);
   const reactId = useId();
   const idBase = props.id ?? `${testId}-${reactId.replace(/[:]/g, '')}`;
   const listboxId = `${idBase}-listbox`;
@@ -161,6 +175,79 @@ const CustomSelect = <T extends string | number>({
     };
   }, [effectiveRef]);
 
+  const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+    const nextFocusedElement = event.relatedTarget as Node | null;
+    if (
+      effectiveRef.current &&
+      nextFocusedElement &&
+      effectiveRef.current.contains(nextFocusedElement)
+    ) {
+      return;
+    }
+    closePanel();
+  };
+
+  const isFocusableElement = (element: HTMLElement) => {
+    if (!element.isConnected) return false;
+    if (element instanceof HTMLInputElement && element.type === 'hidden') {
+      return false;
+    }
+    if (element.tabIndex < 0) return false;
+    if ('disabled' in element && element.disabled) return false;
+
+    const style = window.getComputedStyle(element);
+    if (style.display === 'none' || style.visibility === 'hidden') {
+      return false;
+    }
+
+    return true;
+  };
+
+  const moveFocusOutsideSelect = (isReverse: boolean) => {
+    if (!effectiveRef.current) return false;
+
+    const focusableElements = Array.from(
+      document.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS)
+    ).filter(isFocusableElement);
+
+    const currentElement = filterInputRef.current;
+    if (!currentElement) return false;
+
+    const currentIndex = focusableElements.indexOf(currentElement);
+    if (currentIndex === -1) return false;
+
+    const step = isReverse ? -1 : 1;
+    let nextIndex = currentIndex + step;
+
+    while (nextIndex >= 0 && nextIndex < focusableElements.length) {
+      const candidate = focusableElements[nextIndex];
+      if (!effectiveRef.current.contains(candidate)) {
+        candidate.focus();
+        if (document.activeElement === candidate) {
+          return true;
+        }
+      }
+      nextIndex += step;
+    }
+
+    return false;
+  };
+
+  const handleFilterTabOut = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    closePanel();
+    // If this widget gains more tabbable descendants, revisit this handoff.
+    if (!event.shiftKey && clearButtonRef.current) {
+      clearButtonRef.current.focus();
+      if (document.activeElement === clearButtonRef.current) {
+        event.preventDefault();
+        return;
+      }
+    }
+    if (moveFocusOutsideSelect(event.shiftKey)) {
+      event.preventDefault();
+    }
+  };
+
   useEffect(() => {
     // Close the dropdown if it becomes disabled
     if (disabled && isOpen) setIsOpen(false);
@@ -211,6 +298,17 @@ const CustomSelect = <T extends string | number>({
     closePanel();
   };
 
+  const handleClear = (event: React.MouseEvent | React.KeyboardEvent) => {
+    if (disabled) return;
+    event.stopPropagation();
+    setSelectedOptionIndex(null);
+    setActiveOptionIndex(null);
+    setFilterText('');
+    closePanel();
+    effectiveRef.current?.focus();
+    onValueChange?.(null, event);
+  };
+
   // Used by <CustomOption> and passed as prop
   const handleSelect = (
     event: React.MouseEvent,
@@ -393,18 +491,14 @@ const CustomSelect = <T extends string | number>({
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
-    background-color: ${theme.color.neutral.white};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.fill.inverse};
+    color: ${theme.colour.text.default};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
+    border: ${theme.border.b1} solid ${theme.colour.speciality.inputDefault};
     cursor: pointer;
     user-select: none;
 
-    &:hover {
-      ${!isOpen && `background-color: ${theme.color.neutral.grey5};`}
-    }
-
     &:focus-visible,
     &:focus-within {
       outline: none;
@@ -434,7 +528,8 @@ const CustomSelect = <T extends string | number>({
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       onFocus={handleFocus}
-      tabIndex={disabled ? -1 : 0}
+      onBlur={handleBlur}
+      tabIndex={disabled || (filterable && isOpen) ? -1 : 0}
       className={style}
       data-testid={testId}
       ref={setRefs}
@@ -451,6 +546,9 @@ const CustomSelect = <T extends string | number>({
         placeholder={placeholder}
         disabled={disabled}
         filterable={filterable}
+        clearable={clearable}
+        onClear={handleClear}
+        clearButtonRef={clearButtonRef}
       >
         {filterable && (
           <FilterInput
@@ -459,6 +557,8 @@ const CustomSelect = <T extends string | number>({
             placeholder={placeholder}
             disabled={disabled}
             inputRef={filterInputRef}
+            onBlur={handleBlur}
+            onTabOut={handleFilterTabOut}
             ariaControls={listboxId}
             ariaExpanded={isOpen}
             ariaActiveDescendant={activeDescendantId}

package/lib/components/Select/subcomponents/FilterInput.tsx

@@ -5,6 +5,8 @@ import type { FilterInputProps } from '../Select.types';
 type FilterInputComponentProps = {
   value: string;
   onChange: (value: string) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onTabOut?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   placeholder?: string;
   disabled?: boolean;
   inputRef?: React.RefObject<HTMLInputElement | null>;
@@ -17,6 +19,8 @@ type FilterInputComponentProps = {
 const FilterInput = ({
   value,
   onChange,
+  onBlur,
+  onTabOut,
   placeholder,
   disabled,
   inputRef,
@@ -29,6 +33,11 @@ const FilterInput = ({
   const [theme] = useTheme();
 
   const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Tab') {
+      onTabOut?.(e);
+      return;
+    }
+
     // Let parent handle key navigation
     if (
       e.key === 'Escape' ||
@@ -46,12 +55,12 @@ const FilterInput = ({
     outline: none;
     background: transparent;
     font: inherit;
-    color: ${theme.color.text.primary};
+    color: ${theme.colour.text.default};
     &::placeholder {
-      color: ${theme.color.text.secondary};
+      color: ${theme.colour.text.tertiary};
     }
     &:disabled {
-      color: ${theme.color.text.disabled};
+      color: ${theme.colour.text.disabled};
       cursor: not-allowed;
     }
   `;
@@ -63,6 +72,7 @@ const FilterInput = ({
       placeholder={placeholder}
       disabled={disabled}
       onChange={(e) => onChange(e.target.value)}
+      onBlur={onBlur}
       onClick={(e) => e.stopPropagation()}
       onKeyDown={(e) => handleOnKeyDown(e)}
       aria-label='Filter options'

package/lib/components/Select/subcomponents/NativeSelect.tsx

@@ -1,14 +1,14 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 import { dataUri as chevronDownSvgDataUri } from '../../Icon/svgs/ChevronDownSvg';
-import type { SelectProps } from '../Select.types';
+import type { InternalSelectProps } from '../Select.types';
 
 type NativeSelectProps = Omit<
   React.SelectHTMLAttributes<HTMLSelectElement>,
   'value' | 'defaultValue'
 > &
   Omit<
-    SelectProps,
+    InternalSelectProps,
     'native' | 'filterable' | 'nativeHtmlAttributes' | 'onValueChange' | 'ref'
   > & {
     value?: string | number;
@@ -29,8 +29,8 @@ const NativeSelect = ({
   const [theme] = useTheme();
 
   const chevronColour = disabled
-    ? theme.color.neutral.grey20
-    : theme.color.interaction.blue70;
+    ? theme.colour.icon.disabled
+    : theme.colour.icon.default;
   const chevronDownSvg = chevronDownSvgDataUri(chevronColour);
 
   const baseStyle = css`
@@ -39,9 +39,9 @@ const NativeSelect = ({
     line-height: ${theme.font.lineHeight.h150};
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
-    background-color: ${theme.color.neutral.white};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
-    color: ${theme.color.text.primary};
+    background-color: ${theme.colour.fill.inverse};
+    border: ${theme.border.b1} solid ${theme.colour.border.secondary};
+    color: ${theme.colour.text.default};
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -58,13 +58,6 @@ const NativeSelect = ({
     width: ${width}px;
   `;
 
-  const hoverStyle = css`
-    &:hover {
-      border-color: ${theme.color.neutral.grey60};
-      background-color: ${theme.color.neutral.grey5};
-    }
-  `;
-
   const focusStyle = css`
     &:focus-visible {
       box-shadow: ${theme.boxShadow.focus};
@@ -72,13 +65,13 @@ const NativeSelect = ({
   `;
 
   const disabledStyle = css`
-    color: ${theme.color.text.disabled};
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    color: ${theme.colour.text.disabled};
+    border: ${theme.border.b1} solid ${theme.colour.border.disabled};
     opacity: 1; // Override user-agent default
     cursor: not-allowed;
 
     &:hover {
-      background-color: ${theme.color.neutral.white};
+      background-color: ${theme.colour.fill.inverse};
     }
   `;
 
@@ -86,7 +79,6 @@ const NativeSelect = ({
     NAME,
     baseStyle,
     !!width && widthStyle,
-    !disabled && hoverStyle,
     !disabled && focusStyle,
     disabled && disabledStyle,
     className

package/lib/components/Select/subcomponents/Panel.tsx

@@ -26,8 +26,8 @@ const Panel = ({ className, ...props }: PanelProps) => {
     overflow-x: hidden;
     box-sizing: content-box;
     padding: ${theme.padding.p8} 0;
-    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
-    background-color: ${theme.color.neutral.white};
+    border: ${theme.border.b1} solid ${theme.colour.border.subtle};
+    background-color: ${theme.colour.fill.inverse};
   `;
 
   const style = cx(NAME, baseStyle, className);

package/lib/components/Select/subcomponents/VisibleField.tsx

@@ -11,6 +11,9 @@ interface VisibleFieldProps<T> {
   selectedOption: OptionData<T> | null | undefined;
   placeholder?: string;
   filterable?: boolean;
+  clearable?: boolean;
+  onClear?: (event: React.MouseEvent | React.KeyboardEvent) => void;
+  clearButtonRef?: React.RefObject<HTMLButtonElement | null>;
   children?: React.ReactNode;
 }
 
@@ -20,6 +23,9 @@ const VisibleField = <T extends string | number>({
   placeholder,
   disabled,
   filterable,
+  clearable = false,
+  onClear,
+  clearButtonRef,
   children,
 }: VisibleFieldProps<T>) => {
   const [theme] = useTheme();
@@ -44,7 +50,7 @@ const VisibleField = <T extends string | number>({
   const chevronIconBaseStyle = css`
     flex-shrink: 0;
     margin-left: auto;
-    color: ${theme.color.interaction.blue70};
+    color: ${theme.colour.icon.default};
   `;
 
   const chevronIconOpenStyle = css`
@@ -52,7 +58,7 @@ const VisibleField = <T extends string | number>({
   `;
 
   const chevronIconDisabledStyle = css`
-    color: ${theme.color.neutral.grey20};
+    color: ${theme.colour.icon.disabled};
   `;
 
   const chevronIconStyle = cx(
@@ -61,6 +67,26 @@ const VisibleField = <T extends string | number>({
     disabled && chevronIconDisabledStyle
   );
 
+  const clearButtonStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-left: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: ${theme.colour.icon.default};
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const showClearButton = clearable && !!selectedOption && !disabled;
+
   return (
     <div
       className={style}
@@ -73,7 +99,26 @@ const VisibleField = <T extends string | number>({
           {selectedOption ? selectedOption.label : placeholder || ''}
         </span>
       )}
-      <Icon.ChevronDown className={chevronIconStyle} />
+      {showClearButton ? (
+        <button
+          ref={clearButtonRef}
+          type='button'
+          className={clearButtonStyle}
+          aria-label='Clear selection'
+          data-testid={`${NAME}-clear-button`}
+          onClick={(event) => {
+            event.stopPropagation();
+            onClear?.(event);
+          }}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+        >
+          <Icon.X />
+        </button>
+      ) : (
+        <Icon.ChevronDown className={chevronIconStyle} />
+      )}
     </div>
   );
 };

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

@@ -9,6 +9,7 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
     class="ucl-uikit-icon css-1uzxprk"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -21,8 +22,8 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
     <path
       d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
     />
-    <polyline
-      points="22 4 12 14.01 9 11.01"
+    <path
+      d="M22 4 12 14.01l-3-3"
     />
   </svg>
   <span>
@@ -50,6 +51,7 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
     class="ucl-uikit-icon css-1uzxprk"
     data-testid="ucl-uikit-icon"
     fill="none"
+    focusable="false"
     height="24"
     stroke="currentColor"
     stroke-linecap="round"
@@ -62,8 +64,8 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
     <path
       d="M22 11.08V12a10 10 0 1 1-5.93-9.14"
     />
-    <polyline
-      points="22 4 12 14.01 9 11.01"
+    <path
+      d="M22 4 12 14.01l-3-3"
     />
   </svg>
   <span>
@@ -80,6 +82,7 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
+        focusable="false"
         height="24"
         stroke="currentColor"
         stroke-linecap="round"
@@ -89,17 +92,8 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <line
-          x1="18"
-          x2="6"
-          y1="6"
-          y2="18"
-        />
-        <line
-          x1="6"
-          x2="18"
-          y1="6"
-          y2="18"
+        <path
+          d="M18 6 6 18M6 6l12 12"
         />
       </svg>
     </button>

package/lib/components/Spinner/Spinner.tsx

@@ -1,17 +1,36 @@
 import { SVGAttributes, forwardRef, memo } from 'react';
 import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
 
 export const NAME = 'ucl-uikit-spinner';
 
 export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
   size?: number;
+  strokeWidth?: number;
   testId?: string;
+  inheritColour?: boolean;
 }
 
 const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
-  ({ size = 24, className, testId = NAME, ...rest }: SpinnerProps, ref) => {
-    const rotationDuration = `2s`; // rotation duration
-    const dashDuration = `1.5s`; // dash duration
+  (
+    {
+      size = 72,
+      strokeWidth = 4,
+      className,
+      testId = NAME,
+      inheritColour = false,
+      ...rest
+    }: SpinnerProps,
+    ref
+  ) => {
+    const [theme] = useTheme();
+
+    const rotationDuration = `3s`; // rotation duration
+    const dashDuration = `2s`; // dash duration
+
+    const baseStyle = css`
+      color: ${inheritColour ? 'inherit' : theme.colour.icon.brand};
+    `;
 
     const gStyle = css`
       transform-origin: 50% 50%;
@@ -44,7 +63,7 @@ const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
       }
     `;
 
-    const style = cx(NAME, className);
+    const style = cx(NAME, baseStyle, className);
 
     return (
       <svg
@@ -64,7 +83,7 @@ const Spinner = forwardRef<SVGSVGElement, SpinnerProps>(
             r='20'
             fill='none'
             stroke='currentColor'
-            strokeWidth={8}
+            strokeWidth={strokeWidth}
           />
         </g>
       </svg>

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

@@ -2,17 +2,26 @@ import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
 import { css } from '@emotion/css';
 import SpinnerSvg from '../Spinner';
+import { ThemeContextProvider } from '../../..';
 
 describe('SpinnerSvg', () => {
   // Snapshot tests
 
   test('snapshot: default props', () => {
-    const renderResult = render(<SpinnerSvg />);
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg />
+      </ThemeContextProvider>
+    );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
   test('snapshot: custom size', () => {
-    const renderResult = render(<SpinnerSvg size={32} />);
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg size={32} />
+      </ThemeContextProvider>
+    );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
@@ -20,7 +29,20 @@ describe('SpinnerSvg', () => {
     const style = css`
       color: #0d68cf;
     `;
-    const renderResult = render(<SpinnerSvg className={style} />);
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg className={style} />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  test('snapshot: inherits parent colour when inheritColour is true', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <SpinnerSvg inheritColour />
+      </ThemeContextProvider>
+    );
     expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
@@ -28,13 +50,21 @@ describe('SpinnerSvg', () => {
 
   test('Can be found with default testId', () => {
     const defaultTestId = 'ucl-uikit-spinner';
-    const { getByTestId } = render(<SpinnerSvg testId={defaultTestId} />);
+    const { getByTestId } = render(
+      <ThemeContextProvider>
+        <SpinnerSvg testId={defaultTestId} />
+      </ThemeContextProvider>
+    );
     const svg = getByTestId(defaultTestId);
     expect(svg).toBeDefined();
   });
 
   test('test ID: custom', () => {
-    const { getByTestId } = render(<SpinnerSvg testId='custom-test-id' />);
+    const { getByTestId } = render(
+      <ThemeContextProvider>
+        <SpinnerSvg testId='custom-test-id' />
+      </ThemeContextProvider>
+    );
     const svg = getByTestId('custom-test-id');
     expect(svg).toBeDefined();
   });