uikit-react-public 0.11.24 → 0.17.4

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

@@ -1,29 +1,149 @@
-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 { SelectProps } from '../Select.types';
 
 const NAME = 'ucl-uikit-select';
-export const DEFAULT_WIDTH_PX = 200;
 
-const CustomSelect = ({
+type CustomSelectProps<T> = Omit<
+  SelectProps<T>,
+  'native' | 'nativeHtmlAttributes'
+>;
+
+const CustomSelect = <T extends string | number>({
+  selectionBehaviour = 'focus',
   value,
   options = [],
   onValueChange,
   disabled,
   placeholder,
-  width = DEFAULT_WIDTH_PX,
+  lineBreak = false,
+  filterInputProps,
+  width,
   testId = NAME,
   className,
+  panelClassName,
+  filterable = false,
   ref,
   ...props
-}: CustomSelectProps) => {
+}: CustomSelectProps<T>) => {
+  // todo: remove width prop (deprecated)
+  if (width !== undefined) {
+    console.warn(
+      'Select width prop is deprecated; it has no effect. Use className instead.'
+    );
+  }
+
+  const atLeastOneOptionHasIcon = !!options.find(
+    (opt) => opt.icon !== undefined
+  );
+  // todo: remove option icon prop (deprecated)
+  if (atLeastOneOptionHasIcon) {
+    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 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) => {
@@ -34,6 +154,7 @@ const CustomSelect = ({
         setIsOpen(false);
       }
     };
+
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
@@ -45,6 +166,12 @@ const CustomSelect = ({
     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);
   };
@@ -54,18 +181,82 @@ const CustomSelect = ({
   };
 
   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();
   };
 
   // Used by <CustomOption> and passed as prop
-  const handleSelect = (event: React.MouseEvent, optionValue: string) => {
-    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' ||
@@ -75,9 +266,48 @@ const CustomSelect = ({
     )
       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;
     }
@@ -87,6 +317,8 @@ const CustomSelect = ({
     }
     if (isOpen && event.key === 'Escape') {
       closePanel();
+      skipOpenOnFocusRef.current = true;
+      event.currentTarget.focus();
       return;
     }
     // Select the previous option
@@ -95,17 +327,21 @@ const CustomSelect = ({
         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
@@ -114,18 +350,36 @@ const CustomSelect = ({
         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`
@@ -134,7 +388,8 @@ const CustomSelect = ({
     justify-content: space-between;
     position: relative;
     min-width: 80px;
-    width: fit-content;
+    width: 100%;
+    max-width: calc(100vw - 64px);
     height: 48px;
     box-sizing: border-box;
     padding: 0 16px;
@@ -150,16 +405,13 @@ const CustomSelect = ({
       ${!isOpen && `background-color: ${theme.color.neutral.grey5};`}
     }
 
-    &:focus-visible {
+    &:focus-visible,
+    &:focus-within {
       outline: none;
       box-shadow: ${theme.boxShadow.focus};
     }
   `;
 
-  const widthStyle = css`
-    width: ${width}px;
-  `;
-
   const disabledStyle = css`
     color: ${theme.color.text.disabled};
     border: ${theme.border.b1} solid ${theme.color.neutral.grey20};
@@ -170,25 +422,27 @@ const CustomSelect = ({
     }
   `;
 
-  const style = cx(
-    NAME,
-    baseStyle,
-    !!width && widthStyle,
-    disabled && disabledStyle,
-    className
-  );
+  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}
+      onFocus={handleFocus}
       tabIndex={disabled ? -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
@@ -196,22 +450,49 @@ const CustomSelect = ({
         selectedOption={selectedOption}
         placeholder={placeholder}
         disabled={disabled}
-      />
+        filterable={filterable}
+      >
+        {filterable && (
+          <FilterInput
+            value={filterText}
+            onChange={setFilterText}
+            placeholder={placeholder}
+            disabled={disabled}
+            inputRef={filterInputRef}
+            ariaControls={listboxId}
+            ariaExpanded={isOpen}
+            ariaActiveDescendant={activeDescendantId}
+            {...filterInputProps}
+          />
+        )}
+      </VisibleField>
       {isOpen && (
-        <Panel role='listbox'>
-          {options.map((option) => (
-            <CustomOption
-              key={option.value}
+        <Panel
+          className={panelClassName}
+          id={listboxId}
+          role='listbox'
+        >
+          {visibleOptions.map((option, index) => (
+            <CustomOption<T>
+              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.icon}
               {option.label}
             </CustomOption>
           ))}
+          {visibleOptions.length === 0 && (
+            <div className={noOptionsStyle}>No options</div>
+          )}
         </Panel>
       )}
     </div>

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

@@ -0,0 +1,80 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+import type { FilterInputProps } from '../Select.types';
+
+type FilterInputComponentProps = {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  inputRef?: React.RefObject<HTMLInputElement | null>;
+  className?: string;
+  ariaControls?: string;
+  ariaExpanded?: boolean;
+  ariaActiveDescendant?: string;
+} & FilterInputProps;
+
+const FilterInput = ({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  inputRef,
+  className,
+  ariaControls,
+  ariaExpanded,
+  ariaActiveDescendant,
+  ...rest
+}: FilterInputComponentProps) => {
+  const [theme] = useTheme();
+
+  const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Let parent handle key navigation
+    if (
+      e.key === 'Escape' ||
+      e.key === 'Enter' ||
+      e.key === 'ArrowUp' ||
+      e.key === 'ArrowDown'
+    )
+      return;
+    e.stopPropagation();
+  };
+
+  const style = css`
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: ${theme.color.text.primary};
+    &::placeholder {
+      color: ${theme.color.text.secondary};
+    }
+    &:disabled {
+      color: ${theme.color.text.disabled};
+      cursor: not-allowed;
+    }
+  `;
+  return (
+    <input
+      ref={inputRef}
+      className={cx(style, className)}
+      value={value}
+      placeholder={placeholder}
+      disabled={disabled}
+      onChange={(e) => onChange(e.target.value)}
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => handleOnKeyDown(e)}
+      aria-label='Filter options'
+      aria-autocomplete='list'
+      role='searchbox'
+      aria-haspopup='listbox'
+      aria-controls={ariaControls}
+      aria-expanded={ariaExpanded}
+      aria-activedescendant={ariaActiveDescendant}
+      {...rest}
+    />
+  );
+};
+
+export default FilterInput;

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

@@ -1,7 +1,19 @@
 import { css, cx } from '@emotion/css';
 import { useTheme } from '../../../theme';
 import { dataUri as chevronDownSvgDataUri } from '../../Icon/svgs/ChevronDownSvg';
-import { NativeSelectProps } from '../Select.types';
+import type { SelectProps } from '../Select.types';
+
+type NativeSelectProps = Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  'value' | 'defaultValue'
+> &
+  Omit<
+    SelectProps,
+    'native' | 'filterable' | 'nativeHtmlAttributes' | 'onValueChange' | 'ref'
+  > & {
+    value?: string | number;
+    ref?: React.Ref<HTMLSelectElement>;
+  };
 
 const NAME = 'ucl-uikit-select--native';
 

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

@@ -5,7 +5,7 @@ const NAME = 'ucl-uikit-select__panel';
 
 type PanelProps = React.ComponentPropsWithoutRef<'div'>;
 
-const Panel = (props: PanelProps) => {
+const Panel = ({ className, ...props }: PanelProps) => {
   const [theme] = useTheme();
 
   const handleClick = (event: React.MouseEvent) => {
@@ -14,15 +14,14 @@ const Panel = (props: PanelProps) => {
   };
 
   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
     min-width: 100%;
     width: fit-content;
-    max-height: 300px;
+    max-width: calc(100vw - 64px);
+    max-height: 400px;
     overflow-y: auto;
     overflow-x: hidden;
     box-sizing: content-box;
@@ -31,7 +30,7 @@ const Panel = (props: PanelProps) => {
     background-color: ${theme.color.neutral.white};
   `;
 
-  const style = cx(NAME, baseStyle);
+  const style = cx(NAME, baseStyle, className);
 
   return (
     <div