uikit-react-public 0.14.21 → 0.17.4

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

@@ -1,22 +1,30 @@
-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';
 
+type CustomSelectProps<T> = Omit<
+  SelectProps<T>,
+  'native' | 'nativeHtmlAttributes'
+>;
+
 const CustomSelect = <T extends string | number>({
+  selectionBehaviour = 'focus',
   value,
   options = [],
   onValueChange,
   disabled,
   placeholder,
   lineBreak = false,
+  filterInputProps,
   width,
   testId = NAME,
   className,
   panelClassName,
+  filterable = false,
   ref,
   ...props
 }: CustomSelectProps<T>) => {
@@ -35,11 +43,107 @@ 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 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,6 +154,7 @@ const CustomSelect = <T extends string | number>({
         setIsOpen(false);
       }
     };
+
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
@@ -61,6 +166,12 @@ const CustomSelect = <T extends string | number>({
     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 +181,82 @@ 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();
   };
 
   // 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 +266,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 +317,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 +327,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,20 +350,38 @@ 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`
     display: inline-flex;
     align-items: center;
@@ -167,7 +405,8 @@ const CustomSelect = <T extends string | number>({
       ${!isOpen && `background-color: ${theme.color.neutral.grey5};`}
     }
 
-    &:focus-visible {
+    &:focus-visible,
+    &:focus-within {
       outline: none;
       box-shadow: ${theme.boxShadow.focus};
     }
@@ -183,19 +422,27 @@ 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}
+      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
@@ -203,26 +450,49 @@ const CustomSelect = <T extends string | number>({
         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
           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>

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/VisibleField.tsx

@@ -10,6 +10,8 @@ interface VisibleFieldProps<T> {
   disabled?: boolean;
   selectedOption: OptionData<T> | null | undefined;
   placeholder?: string;
+  filterable?: boolean;
+  children?: React.ReactNode;
 }
 
 const VisibleField = <T extends string | number>({
@@ -17,6 +19,8 @@ const VisibleField = <T extends string | number>({
   isOpen,
   placeholder,
   disabled,
+  filterable,
+  children,
 }: VisibleFieldProps<T>) => {
   const [theme] = useTheme();
 
@@ -62,9 +66,13 @@ const VisibleField = <T extends string | number>({
       className={style}
       data-testid={NAME}
     >
-      <span className={innerStyle}>
-        {selectedOption ? selectedOption.label : placeholder || ''}
-      </span>
+      {filterable && isOpen ? (
+        <div className={innerStyle}>{children}</div>
+      ) : (
+        <span className={innerStyle}>
+          {selectedOption ? selectedOption.label : placeholder || ''}
+        </span>
+      )}
       <Icon.ChevronDown className={chevronIconStyle} />
     </div>
   );

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

@@ -3,3 +3,4 @@ export { default as NativeSelect } from './NativeSelect';
 export { default as CustomOption } from './CustomOption';
 export { default as Panel } from './Panel';
 export { default as VisibleField } from './VisibleField';
+export { default as FilterInput } from './FilterInput';

package/lib/components/Snackbar/Snackbar.stories.tsx

@@ -3,7 +3,7 @@ import { css } from '@emotion/css';
 import Snackbar from './Snackbar';
 
 const meta = {
-  title: 'Components/Ready to use/Snackbar',
+  title: 'Components/Snackbar',
   component: Snackbar,
   args: {
     children: 'Default snackbar text',

package/lib/components/Spinner/Spinner.stories.tsx

@@ -4,7 +4,7 @@ import Spinner from './Spinner';
 import { theme } from '../../theme';
 
 const meta = {
-  title: 'Components/Ready to use/Spinner',
+  title: 'Components/Spinner',
   component: Spinner,
   args: {
     size: 24,

package/lib/components/Textarea/Textarea.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Textarea from './Textarea';
 
 const meta = {
-  title: 'Components/Ready to use/Textarea',
+  title: 'Components/Textarea',
   component: Textarea,
   parameters: {
     layout: 'padded',

package/lib/components/Timepicker/Timepicker.tsx

@@ -33,6 +33,10 @@ const Timepicker = ({
     border-color: ${theme.color.text.primary};
     font-family: ${theme.font.family.primary};
     padding: ${theme.padding.p4};
+
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+    }
   `;
 
   const style = cx(NAME, baseStyle, className);

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

@@ -2,7 +2,7 @@
 
 exports[`Timepicker > snapshot 1`] = `
 <input
-  class="ucl-uikit-timepicker css-ihuem"
+  class="ucl-uikit-timepicker css-4iq7dt"
   data-testid="ucl-uikit-timepicker"
   type="time"
   value=""
@@ -11,7 +11,7 @@ exports[`Timepicker > snapshot 1`] = `
 
 exports[`Timepicker > snapshot: testID prop 1`] = `
 <input
-  class="ucl-uikit-timepicker css-ihuem"
+  class="ucl-uikit-timepicker css-4iq7dt"
   data-testid="testId"
   type="time"
   value=""

package/lib/components/Toggle/Toggle.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Toggle from './Toggle';
 
 const meta = {
-  title: 'Components/Ready to use/Toggle',
+  title: 'Components/Toggle',
   component: Toggle,
   parameters: {
     layout: 'centered',