uikit-react-public 0.11.13 → 0.11.15

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

@@ -1,40 +1,119 @@
 import { describe, expect, test } from 'vitest';
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Select from '../Select';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
+const defaultOptions = [
+  { text: 'Option 1', value: '1' },
+  { text: 'Option 2', value: '2' },
+  { text: 'Option 3', value: '3' },
+];
+
 describe('Select', () => {
   // Snapshot tests
 
-  test('snapshot: no props', () => {
+  test('Snapshot: default', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Interation tests
+  test('Can be found by default testId', () => {
+    const defaultTestId = 'ucl-uikit-select';
+
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    const select = renderResult.getByTestId(defaultTestId);
+    expect(select).toBeDefined();
+  });
+
+  test('Returns a native select when native prop is true', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          native
+          options={defaultOptions}
+          value=''
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    const select = renderResult.getByTestId('ucl-uikit-select--native');
+    expect(select).toBeDefined();
+    expect(select.tagName).toBe('SELECT');
+  });
+
+  test('Opens the panel when clicked', async () => {
+    const user = userEvent.setup();
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Select
+          options={defaultOptions}
+          value=''
+          onChange={() => {}}
+        />
+      </ThemeContextProvider>
+    );
+    const select = renderResult.getByTestId('ucl-uikit-select');
+    await user.click(select);
+    // Panel should open
+    const panel = renderResult.getByTestId('ucl-uikit-select__panel');
+    expect(panel).toBeInTheDocument();
+    // Options should be present
+    const options = renderResult.getAllByTestId('ucl-uikit-select__option');
+    expect(options.length).toBe(defaultOptions.length);
+    expect(options[0].textContent).toBe(defaultOptions[0].text);
+    expect(options[1].textContent).toBe(defaultOptions[1].text);
+    expect(options[2].textContent).toBe(defaultOptions[2].text);
+  });
+
+  test('Cannot be used when disabled', async () => {
+    const user = userEvent.setup();
     const renderResult = render(
       <ThemeContextProvider>
-        <Select>
-          <option>Option 1</option>
-          <option>Option 2</option>
-          <option>Option 3</option>
-          <option>Option 4</option>
-        </Select>
+        <Select
+          disabled
+          options={defaultOptions}
+          value=''
+          onChange={() => {}}
+        />
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    const select = renderResult.getByTestId('ucl-uikit-select');
+    await user.click(select);
+    // Panel should not open
+    const panel = renderResult.queryByTestId('ucl-uikit-select__panel');
+    expect(panel).not.toBeInTheDocument();
   });
 
-  test('snapshot: disabled', () => {
+  test('Cannot be used when native and disabled', async () => {
     const renderResult = render(
       <ThemeContextProvider>
-        <Select disabled>
-          <option>Option 1</option>
-          <option>Option 2</option>
-          <option>Option 3</option>
-          <option>Option 4</option>
-        </Select>
+        <Select
+          native
+          options={defaultOptions}
+          value='1'
+          onChange={() => {}}
+        />
       </ThemeContextProvider>
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    const select = renderResult.getByTestId('ucl-uikit-select--native');
+    expect(select).toHaveProperty('disabled');
   });
 });

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

@@ -1,42 +1,38 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Select > snapshot: disabled 1`] = `
-<select
-  class="ucl-uikit-select css-1k92o15"
+exports[`Select > Snapshot: default 1`] = `
+<div
+  aria-expanded="false"
+  aria-haspopup="listbox"
+  class="ucl-uikit-select css-1ur0y0n"
   data-testid="ucl-uikit-select"
-  disabled=""
+  role="combobox"
+  tabindex="0"
 >
-  <option>
-    Option 1
-  </option>
-  <option>
-    Option 2
-  </option>
-  <option>
-    Option 3
-  </option>
-  <option>
-    Option 4
-  </option>
-</select>
-`;
-
-exports[`Select > snapshot: no props 1`] = `
-<select
-  class="ucl-uikit-select css-mbwdbz"
-  data-testid="ucl-uikit-select"
->
-  <option>
-    Option 1
-  </option>
-  <option>
-    Option 2
-  </option>
-  <option>
-    Option 3
-  </option>
-  <option>
-    Option 4
-  </option>
-</select>
+  <div
+    class="ucl-uikit-select__visible-field css-4o4quu"
+    data-testid="ucl-uikit-select__visible-field"
+  >
+    <span
+      class="css-1oagzrk"
+    />
+    <svg
+      class="ucl-uikit-icon css-1ieo112"
+      data-testid="ucl-uikit-icon"
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline
+        points="6 9 12 15 18 9"
+      />
+    </svg>
+  </div>
+</div>
 `;

package/lib/components/Select/index.ts

@@ -1,2 +1,2 @@
 export { default } from './Select';
-export type { SelectProps } from './Select';
+export type { SelectProps, OptionData, SelectEvent } from './Select.types';

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

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react';
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+import { CustomOptionProps } from '../Select.types';
+
+const NAME = 'ucl-uikit-select__option';
+
+const CustomOption = ({
+  value,
+  isSelected = false,
+  onSelect,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: CustomOptionProps) => {
+  const [theme] = useTheme();
+  const internalRef = useRef<HTMLDivElement>(null);
+
+  // Scroll into view when selected & the Panel opens
+  useEffect(() => {
+    if (isSelected && internalRef.current) {
+      internalRef.current.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+      });
+    }
+  }, [isSelected]);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    onSelect(event, value);
+    event.stopPropagation(); // Otherwise the panel will open again instantaneously
+  };
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    gap: 16px;
+    width: 100%;
+    min-height: 40px;
+    box-sizing: border-box;
+    padding: 8px 16px;
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    background-color: ${theme.color.neutral.white};
+    overflow: hidden;
+    white-space: nowrap;
+
+    &:hover {
+      background-color: ${theme.color.neutral.grey5};
+    }
+  `;
+
+  const selectedStyle = css`
+    background-color: ${theme.color.neutral.grey5};
+  `;
+
+  const style = cx(NAME, baseStyle, isSelected && selectedStyle, className);
+
+  return (
+    <div
+      onClick={handleClick}
+      className={style}
+      data-testid={testId}
+      ref={internalRef}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default CustomOption;

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

@@ -0,0 +1,211 @@
+import { useState, useRef, useEffect } from 'react';
+import { css, cx } from '@emotion/css';
+import { VisibleField, Panel, CustomOption } from '.';
+import { useTheme } from '../../../theme';
+import type { CustomSelectProps } from '../Select.types';
+
+const NAME = 'ucl-uikit-select';
+
+const CustomSelect = ({
+  value,
+  options = [],
+  onChange,
+  disabled,
+  placeholder,
+  width = 325,
+  testId = NAME,
+  className,
+  ref,
+  ...props
+}: CustomSelectProps) => {
+  const internalRef = useRef<HTMLDivElement>(null);
+  const effectiveRef = ref || internalRef;
+
+  const [theme] = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        effectiveRef.current &&
+        !effectiveRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [effectiveRef]);
+
+  useEffect(() => {
+    // Close the dropdown if it becomes disabled
+    if (disabled && isOpen) setIsOpen(false);
+  }, [disabled, isOpen]);
+
+  const togglePanel = () => {
+    if (!disabled) setIsOpen((prev) => !prev);
+  };
+
+  const openPanel = () => {
+    if (!disabled) setIsOpen(true);
+  };
+
+  const closePanel = () => {
+    if (!disabled) setIsOpen(false);
+  };
+
+  // Used by <CustomOption> and passed as prop
+  const handleSelect = (event: React.MouseEvent, optionValue: string) => {
+    if (onChange) onChange(event, optionValue);
+    closePanel();
+  };
+
+  const selectedOption = options.find((option) => option.value === value);
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    // Prevent scrolling the page when the select is open
+    if (
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown' ||
+      event.key === 'ArrowLeft' ||
+      event.key === 'ArrowRight'
+    )
+      event.preventDefault();
+
+    if (disabled) return;
+
+    if (event.key === 'Enter') {
+      togglePanel();
+      return;
+    }
+    if (!isOpen && event.code === 'Space') {
+      openPanel();
+      return;
+    }
+    if (isOpen && event.key === 'Escape') {
+      closePanel();
+      return;
+    }
+    // Select the previous option
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      if (!isOpen) {
+        openPanel();
+        return;
+      }
+      if (!value) {
+        // Initialise at the last option if no value provided
+        onChange(event, options[options.length - 1].value);
+        return;
+      }
+      const currentOptionIndex = options.findIndex(
+        (option) => option.value === value
+      );
+      const previousOptionIndex =
+        (currentOptionIndex - 1 + options.length) % options.length;
+      onChange(event, options[previousOptionIndex].value);
+      return;
+    }
+    // Select the next option
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      if (!isOpen) {
+        openPanel();
+        return;
+      }
+      if (!value) {
+        // Initialise at the first option if no value provided
+        onChange(event, options[0].value);
+        return;
+      }
+      const currentOptionIndex = options.findIndex(
+        (option) => option.value === value
+      );
+      const nextOptionIndex = (currentOptionIndex + 1) % options.length;
+      onChange(event, options[nextOptionIndex].value);
+      return;
+    }
+  };
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    width: ${width}px;
+    min-width: 80px;
+    max-width: 624px;
+    height: 48px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    background-color: ${theme.color.neutral.white};
+    color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    border: ${theme.border.b1} solid ${theme.color.neutral.grey60};
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      ${!isOpen && `background-color: ${theme.color.neutral.grey5};`}
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: ${theme.color.neutral.white};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
+
+  return (
+    <div
+      onClick={togglePanel}
+      onKeyDown={handleKeyDown}
+      tabIndex={disabled ? -1 : 0}
+      className={style}
+      data-testid={testId}
+      ref={effectiveRef}
+      role='combobox'
+      aria-haspopup='listbox'
+      aria-expanded={isOpen}
+      {...props}
+    >
+      <VisibleField
+        isOpen={isOpen}
+        selectedOption={selectedOption}
+        placeholder={placeholder}
+        disabled={disabled}
+      />
+      {isOpen && (
+        <Panel role='listbox'>
+          {options.map((option) => (
+            <CustomOption
+              key={option.value}
+              value={option.value}
+              isSelected={value === option.value}
+              onSelect={handleSelect}
+              role='option'
+              aria-selected={value === option.value}
+            >
+              {option.icon}
+              {option.text}
+            </CustomOption>
+          ))}
+        </Panel>
+      )}
+    </div>
+  );
+};
+
+export default CustomSelect;

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

@@ -0,0 +1,109 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+import { dataUri as chevronDownSvgDataUri } from '../../Icon/svgs/ChevronDownSvg';
+import { NativeSelectProps } from '../Select.types';
+
+const NAME = 'ucl-uikit-select--native';
+
+const NativeSelect = ({
+  options,
+  width = 325,
+  disabled,
+  placeholder,
+  testId = NAME,
+  className,
+  ...props
+}: NativeSelectProps) => {
+  const [theme] = useTheme();
+
+  const chevronColour = disabled
+    ? theme.color.neutral.grey20
+    : theme.color.interaction.blue70;
+  const chevronDownSvg = chevronDownSvgDataUri(chevronColour);
+
+  const baseStyle = css`
+    width: ${width}px;
+    padding: 0 ${theme.padding.p40} 0 ${theme.padding.p16};
+    height: ${theme.padding.p48};
+    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};
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    outline: none;
+    cursor: pointer;
+
+    background-image: url(${chevronDownSvg});
+    background-size: 24px 24px;
+    background-position: right 16px center;
+    background-repeat: no-repeat;
+  `;
+
+  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};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    opacity: 1; // Override user-agent default
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: ${theme.color.neutral.white};
+    }
+  `;
+
+  const style = cx(
+    NAME,
+    baseStyle,
+    !disabled && hoverStyle,
+    !disabled && focusStyle,
+    disabled && disabledStyle,
+    className
+  );
+
+  return (
+    <select
+      className={style}
+      data-testid={testId}
+      disabled={disabled}
+      {...props}
+    >
+      {placeholder && (
+        <option
+          value=''
+          disabled
+          selected
+        >
+          {placeholder}
+        </option>
+      )}
+      {options
+        ? options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+            >
+              {option.text}
+            </option>
+          ))
+        : null}
+    </select>
+  );
+};
+
+export default NativeSelect;

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

@@ -0,0 +1,46 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+const NAME = 'ucl-uikit-select__panel';
+
+type PanelProps = React.ComponentPropsWithoutRef<'div'>;
+
+const Panel = (props: PanelProps) => {
+  const [theme] = useTheme();
+
+  const handleClick = (event: React.MouseEvent) => {
+    // Missed clicks on the panel should not close the dropdown
+    event.stopPropagation();
+  };
+
+  const baseStyle = css`
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 46px;
+    left: -1px; // -1px to align with the border of the field
+
+    z-index: 10; // Required: panel must be 'above' subsquent DOM elements
+    width: 100%;
+    max-height: 200px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: content-box;
+    padding: 16px 0 24px 0;
+    border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
+    background-color: ${theme.color.neutral.white};
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+      onClick={handleClick}
+      {...props}
+    />
+  );
+};
+
+export default Panel;