uikit-react-public 0.14.21 → 0.21.8

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

@@ -4,7 +4,7 @@ exports[`Select > Snapshot: default 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="ucl-uikit-select css-1g9yg1n"
+  class="ucl-uikit-select css-a6n340"
   data-testid="ucl-uikit-select"
   role="combobox"
   tabindex="0"
@@ -17,9 +17,10 @@ exports[`Select > Snapshot: default 1`] = `
       class="css-16t5nns"
     />
     <svg
-      class="ucl-uikit-icon css-hseitk"
+      class="ucl-uikit-icon css-1pg9a4v"
       data-testid="ucl-uikit-icon"
       fill="none"
+      focusable="false"
       height="24"
       stroke="currentColor"
       stroke-linecap="round"
@@ -29,8 +30,8 @@ exports[`Select > Snapshot: default 1`] = `
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <polyline
-        points="6 9 12 15 18 9"
+      <path
+        d="m6 9 6 6 6-6"
       />
     </svg>
   </div>

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

@@ -7,6 +7,7 @@ const NAME = 'ucl-uikit-select__option';
 
 const CustomOption = <T extends string | number>({
   value,
+  optionIndex,
   isSelected = false,
   onSelect,
   lineBreak = false,
@@ -29,10 +30,16 @@ const CustomOption = <T extends string | number>({
   }, [isSelected]);
 
   const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    onSelect(event, value);
+    onSelect(event, value, optionIndex);
     event.stopPropagation(); // Otherwise the panel will open again instantaneously
   };
 
+  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    // Keep focus on the combobox/filter input so blur does not close the panel
+    // before the option click handler runs.
+    event.preventDefault();
+  };
+
   const baseStyle = css`
     gap: 16px;
     min-height: 40px;
@@ -41,11 +48,11 @@ const CustomOption = <T extends string | number>({
     font-family: ${theme.font.family.primary};
     font-size: ${theme.font.size.f16};
     line-height: ${theme.font.lineHeight.h140};
-    background-color: ${theme.color.neutral.white};
+    background-color: ${theme.colour.fill.inverse};
     overflow: hidden;
 
     &:hover {
-      background-color: ${theme.color.neutral.grey5};
+      background-color: ${theme.colour.fill.brandSubtleHover};
     }
   `;
 
@@ -59,7 +66,7 @@ const CustomOption = <T extends string | number>({
   `;
 
   const selectedStyle = css`
-    background-color: ${theme.color.neutral.grey5};
+    background-color: ${theme.colour.fill.brandSubtleSelected};
   `;
 
   const style = cx(
@@ -73,6 +80,7 @@ const CustomOption = <T extends string | number>({
 
   return (
     <div
+      onMouseDown={handleMouseDown}
       onClick={handleClick}
       className={style}
       data-testid={testId}

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

@@ -1,22 +1,43 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useMemo, useId } from 'react';
 import { css, cx } from '@emotion/css';
-import { VisibleField, Panel, CustomOption } from '.';
+import { VisibleField, Panel, CustomOption, FilterInput } from '.';
 import { useTheme } from '../../../theme';
-import type { CustomSelectProps } 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<
+  InternalSelectProps<T>,
+  'native' | 'nativeHtmlAttributes'
+>;
 
 const CustomSelect = <T extends string | number>({
+  selectionBehaviour = 'focus',
   value,
   options = [],
   onValueChange,
   disabled,
+  clearable = false,
   placeholder,
   lineBreak = false,
+  filterInputProps,
   width,
   testId = NAME,
   className,
   panelClassName,
+  filterable = false,
   ref,
   ...props
 }: CustomSelectProps<T>) => {
@@ -35,11 +56,108 @@ const CustomSelect = <T extends string | number>({
     console.warn('Select option icon prop is deprecated; it has no effect.');
   }
 
+  const duplicateOptionValues = useMemo(() => {
+    const seen = new Set<T>();
+    const duplicates = new Set<T>();
+
+    for (const option of options) {
+      if (seen.has(option.value)) duplicates.add(option.value);
+      else seen.add(option.value);
+    }
+
+    return Array.from(duplicates);
+  }, [options]);
+
+  useEffect(() => {
+    if (duplicateOptionValues.length > 0) {
+      console.warn(
+        `Select options contain non-unique values: ${duplicateOptionValues
+          .map(String)
+          .join(', ')}`
+      );
+    }
+  }, [duplicateOptionValues]);
+
   const internalRef = useRef<HTMLDivElement>(null);
-  const effectiveRef = ref || internalRef;
+  const effectiveRef = internalRef;
+  const openedViaFocusRef = useRef(false);
+  const skipOpenOnFocusRef = useRef(false);
+
+  const setRefs = (node: HTMLDivElement | null) => {
+    internalRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (
+      ref &&
+      'current' in
+        (ref as React.RefObject<HTMLDivElement | HTMLSelectElement | null>)
+    ) {
+      (
+        ref as React.RefObject<HTMLDivElement | HTMLSelectElement | null>
+      ).current = node;
+    }
+  };
 
   const [theme] = useTheme();
   const [isOpen, setIsOpen] = useState(false);
+  const [filterText, setFilterText] = useState('');
+  const [activeOptionIndex, setActiveOptionIndex] = useState<number | null>(
+    null
+  );
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState<number | null>(
+    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`;
+
+  // Returns a list of indexes of options that are currently visible based on the filter text
+  const visibleOptionIndexes = useMemo(() => {
+    const normalizedFilterText = filterText.toLowerCase();
+    return filterable
+      ? options.reduce<number[]>((visibleIndexes, option, index) => {
+          if (option.label.toLowerCase().includes(normalizedFilterText)) {
+            visibleIndexes.push(index);
+          }
+          return visibleIndexes;
+        }, [])
+      : options.map((_, index) => index);
+  }, [filterable, options, filterText]);
+  const visibleOptions = useMemo(
+    () => visibleOptionIndexes.map((index) => options[index]),
+    [visibleOptionIndexes, options]
+  );
+
+  useEffect(() => {
+    if (!isOpen && filterText) setFilterText('');
+  }, [isOpen, filterText]);
+
+  useEffect(() => {
+    const matchingIndexes = options.reduce<number[]>(
+      (matches, option, index) => {
+        if (option.value === value) matches.push(index);
+        return matches;
+      },
+      []
+    );
+
+    if (matchingIndexes.length === 0) {
+      if (selectedOptionIndex !== null) setSelectedOptionIndex(null);
+      return;
+    }
+
+    // If the currently selected option is among the matches, keep it selected
+    if (
+      selectedOptionIndex !== null &&
+      matchingIndexes.includes(selectedOptionIndex)
+    ) {
+      return;
+    }
+    // Otherwise, select the first matching option
+    setSelectedOptionIndex(matchingIndexes[0]);
+  }, [options, selectedOptionIndex, value]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -50,17 +168,97 @@ const CustomSelect = <T extends string | number>({
         setIsOpen(false);
       }
     };
+
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [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);
   }, [disabled, isOpen]);
 
+  useEffect(() => {
+    if (filterable && isOpen && filterInputRef.current) {
+      filterInputRef.current.focus();
+    }
+  }, [filterable, isOpen]);
+
   const togglePanel = () => {
     if (!disabled) setIsOpen((prev) => !prev);
   };
@@ -70,18 +268,93 @@ const CustomSelect = <T extends string | number>({
   };
 
   const closePanel = () => {
-    if (!disabled) setIsOpen(false);
+    if (!disabled) {
+      setIsOpen(false);
+      setActiveOptionIndex(null);
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent) => {
+    if (disabled) return;
+    if (openedViaFocusRef.current) {
+      openedViaFocusRef.current = false;
+      return;
+    }
+    if (!isOpen) {
+      openPanel();
+      if (filterable && filterInputRef.current) {
+        filterInputRef.current.focus();
+      }
+      return;
+    }
+    // If filter is enabled and the click was on the input, keep it open
+    if (
+      filterable &&
+      filterInputRef.current &&
+      filterInputRef.current.contains(event.target as Node)
+    ) {
+      return;
+    }
+    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, optionValue: T) => {
-    if (onValueChange) onValueChange(optionValue, event);
+  const handleSelect = (
+    event: React.MouseEvent,
+    optionValue: T,
+    optionIndex?: number
+  ) => {
+    if (typeof optionIndex === 'number') {
+      setSelectedOptionIndex(optionIndex);
+    }
+    onValueChange?.(optionValue, event);
+    setFilterText('');
     closePanel();
   };
 
-  const selectedOption = options.find((option) => option.value === value);
+  // Get the currently selected option object from its index among the visible options
+  const selectedOption =
+    selectedOptionIndex !== null ? options[selectedOptionIndex] : undefined;
+  // Get the index of the selected option among the visible options, or -1 if it's not visible
+  const selectedVisibleIndex =
+    selectedOptionIndex !== null
+      ? visibleOptionIndexes.indexOf(selectedOptionIndex)
+      : -1;
+  // Ensure the active option index is within bounds of the visible options
+  const effectiveActiveOptionIndex =
+    activeOptionIndex !== null &&
+    activeOptionIndex >= 0 &&
+    activeOptionIndex < visibleOptions.length
+      ? activeOptionIndex
+      : null;
+  // Get the index of the currently highlighted option among the visible options, or null if none is highlighted
+  const highlightedVisibleIndex =
+    effectiveActiveOptionIndex !== null
+      ? effectiveActiveOptionIndex
+      : selectedVisibleIndex >= 0
+        ? selectedVisibleIndex
+        : null;
+  const highlightedOptionSourceIndex =
+    highlightedVisibleIndex !== null
+      ? visibleOptionIndexes[highlightedVisibleIndex]
+      : null;
+  const activeDescendantId =
+    isOpen && highlightedOptionSourceIndex !== null
+      ? `${idBase}-option-${highlightedOptionSourceIndex}`
+      : undefined;
 
-  const handleKeyDown = (event: React.KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     // Prevent scrolling the page when the select is open
     if (
       event.key === 'ArrowUp' ||
@@ -91,9 +364,48 @@ const CustomSelect = <T extends string | number>({
     )
       event.preventDefault();
 
+    // For current option index, activeOptionIndex > selectedVisibleIndex > value match > null
+    const getCurrentOptionIndex = () => {
+      if (
+        activeOptionIndex !== null &&
+        activeOptionIndex >= 0 &&
+        activeOptionIndex < visibleOptions.length
+      ) {
+        return activeOptionIndex;
+      }
+      if (selectedOptionIndex !== null) {
+        const selectedVisibleIndex =
+          visibleOptionIndexes.indexOf(selectedOptionIndex);
+        if (selectedVisibleIndex >= 0) {
+          return selectedVisibleIndex;
+        }
+      }
+      const selectedIndex = visibleOptions.findIndex(
+        (option) => option.value === value
+      );
+      return selectedIndex >= 0 ? selectedIndex : null;
+    };
+
     if (disabled) return;
 
     if (event.key === 'Enter') {
+      if (!isOpen) {
+        openPanel();
+        return;
+      }
+
+      if (selectionBehaviour === 'commit' && visibleOptions.length > 0) {
+        const currentOptionIndex = getCurrentOptionIndex();
+        if (currentOptionIndex !== null) {
+          const currentSourceIndex = visibleOptionIndexes[currentOptionIndex];
+          setSelectedOptionIndex(currentSourceIndex);
+          onValueChange?.(visibleOptions[currentOptionIndex].value, event);
+          setFilterText('');
+        }
+        closePanel();
+        return;
+      }
+
       togglePanel();
       return;
     }
@@ -103,6 +415,8 @@ const CustomSelect = <T extends string | number>({
     }
     if (isOpen && event.key === 'Escape') {
       closePanel();
+      skipOpenOnFocusRef.current = true;
+      event.currentTarget.focus();
       return;
     }
     // Select the previous option
@@ -111,17 +425,21 @@ const CustomSelect = <T extends string | number>({
         openPanel();
         return;
       }
-      if (!value) {
-        // Initialise at the last option if no value provided
-        onValueChange?.(options[options.length - 1].value, event);
+      if (visibleOptions.length === 0) {
         return;
       }
-      const currentOptionIndex = options.findIndex(
-        (option) => option.value === value
-      );
+      const currentOptionIndex = getCurrentOptionIndex();
       const previousOptionIndex =
-        (currentOptionIndex - 1 + options.length) % options.length;
-      onValueChange?.(options[previousOptionIndex].value, event);
+        currentOptionIndex === null
+          ? visibleOptions.length - 1
+          : (currentOptionIndex - 1 + visibleOptions.length) %
+            visibleOptions.length;
+      const previousSourceIndex = visibleOptionIndexes[previousOptionIndex];
+      setActiveOptionIndex(previousOptionIndex);
+      if (selectionBehaviour === 'focus') {
+        setSelectedOptionIndex(previousSourceIndex);
+        onValueChange?.(visibleOptions[previousOptionIndex].value, event);
+      }
       return;
     }
     // Select the next option
@@ -130,18 +448,36 @@ const CustomSelect = <T extends string | number>({
         openPanel();
         return;
       }
-      if (!value) {
-        // Initialise at the first option if no value provided
-        onValueChange?.(options[0].value, event);
+      if (visibleOptions.length === 0) {
         return;
       }
-      const currentOptionIndex = options.findIndex(
-        (option) => option.value === value
-      );
-      const nextOptionIndex = (currentOptionIndex + 1) % options.length;
-      onValueChange?.(options[nextOptionIndex].value, event);
+      const currentOptionIndex = getCurrentOptionIndex();
+      const nextOptionIndex =
+        currentOptionIndex === null
+          ? 0
+          : (currentOptionIndex + 1) % visibleOptions.length;
+      const nextSourceIndex = visibleOptionIndexes[nextOptionIndex];
+      setActiveOptionIndex(nextOptionIndex);
+      if (selectionBehaviour === 'focus') {
+        setSelectedOptionIndex(nextSourceIndex);
+        onValueChange?.(visibleOptions[nextOptionIndex].value, event);
+      }
+      return;
+    }
+  };
+
+  const handleFocus = (event: React.FocusEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    if (skipOpenOnFocusRef.current) {
+      skipOpenOnFocusRef.current = false;
       return;
     }
+    const isKeyboardFocus = event.currentTarget.matches(':focus-visible');
+    if (filterable && isKeyboardFocus) {
+      openedViaFocusRef.current = true;
+      openPanel();
+      if (filterInputRef.current) filterInputRef.current.focus();
+    }
   };
 
   const baseStyle = css`
@@ -155,19 +491,16 @@ 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-visible,
+    &:focus-within {
       outline: none;
       box-shadow: ${theme.boxShadow.focus};
     }
@@ -183,19 +516,28 @@ const CustomSelect = <T extends string | number>({
     }
   `;
 
+  const noOptionsStyle = css`
+    padding: ${theme.padding.p8} ${theme.padding.p16};
+    color: ${theme.color.text.secondary};
+  `;
+
   const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
 
   return (
     <div
-      onClick={togglePanel}
+      onClick={handleClick}
       onKeyDown={handleKeyDown}
-      tabIndex={disabled ? -1 : 0}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      tabIndex={disabled || (filterable && isOpen) ? -1 : 0}
       className={style}
       data-testid={testId}
-      ref={effectiveRef}
+      ref={setRefs}
       role='combobox'
       aria-haspopup='listbox'
       aria-expanded={isOpen}
+      aria-controls={isOpen ? listboxId : undefined}
+      aria-activedescendant={activeDescendantId}
       {...props}
     >
       <VisibleField
@@ -203,26 +545,54 @@ const CustomSelect = <T extends string | number>({
         selectedOption={selectedOption}
         placeholder={placeholder}
         disabled={disabled}
-      />
+        filterable={filterable}
+        clearable={clearable}
+        onClear={handleClear}
+        clearButtonRef={clearButtonRef}
+      >
+        {filterable && (
+          <FilterInput
+            value={filterText}
+            onChange={setFilterText}
+            placeholder={placeholder}
+            disabled={disabled}
+            inputRef={filterInputRef}
+            onBlur={handleBlur}
+            onTabOut={handleFilterTabOut}
+            ariaControls={listboxId}
+            ariaExpanded={isOpen}
+            ariaActiveDescendant={activeDescendantId}
+            {...filterInputProps}
+          />
+        )}
+      </VisibleField>
       {isOpen && (
         <Panel
           className={panelClassName}
+          id={listboxId}
           role='listbox'
         >
-          {options.map((option) => (
+          {visibleOptions.map((option, index) => (
             <CustomOption<T>
-              key={option.value}
+              key={`${String(option.value)}-${visibleOptionIndexes[index]}`}
+              id={`${idBase}-option-${visibleOptionIndexes[index]}`}
               value={option.value}
-              isSelected={value === option.value}
+              optionIndex={visibleOptionIndexes[index]}
+              isSelected={highlightedVisibleIndex === index}
               onSelect={handleSelect}
               lineBreak={lineBreak}
               role='option'
-              aria-selected={value === option.value}
+              aria-selected={highlightedVisibleIndex === index}
+              aria-posinset={index + 1}
+              aria-setsize={visibleOptions.length}
               {...option.optionProps}
             >
               {option.label}
             </CustomOption>
           ))}
+          {visibleOptions.length === 0 && (
+            <div className={noOptionsStyle}>No options</div>
+          )}
         </Panel>
       )}
     </div>