@transferwise/components 46.160.2 → 46.160.4

package/src/Inputs/SelectInput/Options/SelectInputOptions.tsx

@@ -1,11 +1,13 @@
 import { CrossCircle } from '@transferwise/icons';
 import { ListboxOptions } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useDeferredValue, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { Virtualizer, type VirtualizerHandle } from 'virtua';
 
 import { SearchInput } from '../../SearchInput/SearchInput';
+import { MAX_ITEMS_WITHOUT_VIRTUALIZATION } from '../constants';
+import { useTypeahead } from '../hooks/useTypeahead';
 import {
   SelectInputItemsCountContext,
   SelectInputItemPositionContext,
@@ -13,7 +15,6 @@ import {
 import {
   dedupeSelectInputItems,
   filterSelectInputItems,
-  MAX_ITEMS_WITHOUT_VIRTUALIZATION,
   searchableString,
   selectInputOptionItemIncludesNeedle,
   sortSelectInputItems,
@@ -42,7 +43,9 @@ export interface SelectInputOptionsProps<T = string> extends Pick<
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
+  initialTypeaheadKey?: string | null;
   onFilterChange: (query: string) => void;
+  onInitialTypeaheadHandled?: () => void;
   listBoxLabel?: string;
   listBoxLabelledBy?: string;
   autocomplete?: string;
@@ -67,7 +70,9 @@ export function SelectInputOptions<T = string>({
   searchInputRef,
   listboxRef,
   filterQuery,
+  initialTypeaheadKey,
   onFilterChange,
+  onInitialTypeaheadHandled,
   listBoxLabel,
   listBoxLabelledBy,
   autocomplete,
@@ -78,13 +83,37 @@ export function SelectInputOptions<T = string>({
   const virtualiserHandlerRef = useRef<VirtualizerHandle>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
   const initialRenderRef = useRef(true);
+  const deferredFilterQuery = useDeferredValue(filterQuery);
+  const handleTypeahead = useTypeahead({
+    disabled: filterable,
+    onMatch: onInitialTypeaheadHandled,
+  });
+
+  useEffect(() => {
+    if (filterable || initialTypeaheadKey == null) {
+      return;
+    }
+
+    const animationFrame = requestAnimationFrame(() => {
+      if (listboxRef.current == null) {
+        return;
+      }
+
+      listboxRef.current.focus({ preventScroll: true });
+      listboxRef.current.dispatchEvent(
+        new KeyboardEvent('keydown', { key: initialTypeaheadKey, bubbles: true }),
+      );
+    });
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [filterable, initialTypeaheadKey, listboxRef]);
 
   const needle = useMemo(() => {
     if (filterable) {
-      return filterQuery ? searchableString(filterQuery) : null;
+      return deferredFilterQuery ? searchableString(deferredFilterQuery) : null;
     }
     return undefined;
-  }, [filterQuery, filterable]);
+  }, [deferredFilterQuery, filterable]);
   useEffect(() => {
     if (needle) {
       // Ensure having an active option while filtering.
@@ -151,7 +180,7 @@ export function SelectInputOptions<T = string>({
         return item;
       });
 
-      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
+      return sortSelectInputItems(filtered, sortFilteredOptions, deferredFilterQuery);
     }
 
     return filterSelectInputItems(dedupedItems, (item) =>
@@ -284,7 +313,7 @@ export function SelectInputOptions<T = string>({
             shape="rectangle"
             placeholder={filterPlaceholder}
             aria-label={filterPlaceholder}
-            defaultValue={filterQuery}
+            value={filterQuery}
             aria-autocomplete="list"
             aria-expanded
             aria-controls={listboxId}
@@ -352,6 +381,7 @@ export function SelectInputOptions<T = string>({
           aria-labelledby={listBoxLabelledBy}
           tabIndex={0}
           className="np-select-input-listbox"
+          onKeyDownCapture={handleTypeahead}
         >
           {!virtualized ? (
             filteredItems.map((_, index) => getItemNode(index))

package/src/Inputs/SelectInput/SelectInput.test.tsx

@@ -34,6 +34,20 @@ describe('SelectInput', () => {
     expect(screen.getByText('Currency')).toBeInTheDocument();
   });
 
+  it('explicitly includes the trigger in the sequential keyboard focus order', () => {
+    render(
+      <SelectInput
+        placeholder="Currency"
+        items={[
+          { type: 'option', value: 'USD' },
+          { type: 'option', value: 'EUR' },
+        ]}
+      />,
+    );
+
+    expect(screen.getByRole('combobox')).toHaveAttribute('tabindex', '0');
+  });
+
   it('renders footer', async () => {
     render(
       <SelectInput
@@ -221,6 +235,135 @@ describe('SelectInput', () => {
     expect(trigger).toHaveTextContent('EUR');
   });
 
+  it('starts filtering when typing on the focused trigger', async () => {
+    const handleFilterChange = jest.fn();
+
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'January' },
+          { type: 'option', value: 'February' },
+          { type: 'option', value: 'March' },
+        ]}
+        filterable
+        onFilterChange={handleFilterChange}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.tab();
+    expect(trigger).toHaveFocus();
+    await userEvent.keyboard('f');
+
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    expect(searchInput).toHaveFocus();
+    expect(searchInput).toHaveValue('f');
+    expect(handleFilterChange).toHaveBeenLastCalledWith({
+      query: 'f',
+      queryNormalized: 'f',
+    });
+    expect(screen.getByRole('option', { name: 'February' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'January' })).not.toBeInTheDocument();
+  });
+
+  it('starts typeahead when typing on the focused trigger', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'Frost' },
+          { type: 'option', value: 'February' },
+          { type: 'option', value: 'March' },
+        ]}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.tab();
+    expect(trigger).toHaveFocus();
+    await userEvent.keyboard('f');
+
+    const listbox = screen.getByRole('listbox');
+    const frost = within(listbox).getByRole('option', { name: 'Frost' });
+    const february = within(listbox).getByRole('option', { name: 'February' });
+    await waitFor(() => {
+      expect(listbox).toHaveFocus();
+    });
+    await waitFor(() => {
+      expect(frost).toHaveClass('np-select-input-option-container--active');
+    });
+
+    await userEvent.keyboard('e');
+    await waitFor(() => {
+      expect(february).toHaveClass('np-select-input-option-container--active');
+    });
+
+    await userEvent.keyboard('{ArrowDown}');
+    expect(within(listbox).getByRole('option', { name: 'March' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+  });
+
+  it('continues typeahead across spaces after the query starts', async () => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'New Zealand' },
+          { type: 'option', value: 'New York' },
+          { type: 'option', value: 'Yorkshire' },
+        ]}
+      />,
+    );
+
+    await userEvent.tab();
+    await userEvent.keyboard('n');
+
+    const listbox = screen.getByRole('listbox');
+    await waitFor(() => {
+      expect(listbox).toHaveFocus();
+    });
+
+    await userEvent.keyboard('ew y');
+
+    await waitFor(() => {
+      expect(within(listbox).getByRole('option', { name: 'New York' })).toHaveClass(
+        'np-select-input-option-container--active',
+      );
+    });
+  });
+
+  it.each([
+    ['filterable', true],
+    ['non-filterable', false],
+  ])('supports arrow navigation after opening a %s select with Enter', async (_, filterable) => {
+    render(
+      <SelectInput
+        items={[
+          { type: 'option', value: 'GBP' },
+          { type: 'option', value: 'EUR' },
+          { type: 'option', value: 'USD' },
+        ]}
+        filterable={filterable}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.tab();
+    expect(trigger).toHaveFocus();
+    await userEvent.keyboard('{Enter}');
+
+    const controller = filterable
+      ? screen.getByRole('combobox', { expanded: true })
+      : screen.getByRole('listbox');
+    await waitFor(() => {
+      expect(controller).toHaveFocus();
+    });
+
+    await userEvent.keyboard('{ArrowDown}');
+    expect(screen.getByRole('option', { name: 'EUR' })).toHaveClass(
+      'np-select-input-option-container--active',
+    );
+  });
+
   it('clears filter query on close', async () => {
     const handleFilterChange = jest.fn();
 

package/src/Inputs/SelectInput/SelectInput.tsx

@@ -1,5 +1,5 @@
 import mergeProps from 'merge-props';
-import { useCallback, useEffect, useRef, useState, useDeferredValue } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Listbox as ListboxBase } from '@headlessui/react';
 import { Breakpoint } from '@transferwise/neptune-tokens';
 import { useScreenSize } from '../../common/hooks/useScreenSize';
@@ -10,6 +10,7 @@ import { SelectInputBottomSheet } from './BottomSheet';
 import { SelectInputPopover } from './Popover';
 import { SelectInputOptions } from './Options';
 import { DefaultRenderTrigger } from './DefaultRenderTrigger';
+import { isTypingKey } from './hooks/useTypeahead';
 
 import {
   SelectInputOptionContentWithinTriggerContext,
@@ -74,7 +75,6 @@ export function SelectInput<T = string, M extends boolean = false>({
   }, [open]);
 
   const [filterQuery, _setFilterQuery] = useState('');
-  const deferredFilterQuery = useDeferredValue(filterQuery);
   const previousFilterQueryRef = useRef(filterQuery);
 
   const setFilterQuery = useCallback(
@@ -94,6 +94,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   const internalTriggerRef = useRef<HTMLButtonElement | null>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const listboxRef = useRef<HTMLDivElement>(null);
+  const [initialTypeaheadKey, setInitialTypeaheadKey] = useState<string | null>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
   const screenSm = useScreenSize(Breakpoint.SMALL);
@@ -175,13 +176,33 @@ export function SelectInput<T = string, M extends boolean = false>({
                         setOpen((prev) => !prev);
                       },
                       onKeyDown: (event: React.KeyboardEvent) => {
+                        if (event.key === 'Enter') {
+                          event.preventDefault();
+                          event.currentTarget.dispatchEvent(
+                            new KeyboardEvent('keydown', { key: ' ', bubbles: true }),
+                          );
+                          return;
+                        }
+
+                        if (!open && isTypingKey(event)) {
+                          event.preventDefault();
+
+                          if (filterable) {
+                            setFilterQuery(event.key);
+                          } else {
+                            setInitialTypeaheadKey(event.key);
+                          }
+
+                          (event.currentTarget as HTMLButtonElement).click();
+                          return;
+                        }
+
                         if (
                           event.key === ' ' ||
-                          event.key === 'Enter' ||
                           event.key === 'ArrowDown' ||
                           event.key === 'ArrowUp'
                         ) {
-                          setOpen((prev) => !prev);
+                          setOpen(true);
                         }
                       },
                     },
@@ -225,6 +246,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               setOpen(false);
             }}
             onCloseEnd={() => {
+              setInitialTypeaheadKey(null);
               setFilterQuery('');
             }}
           >
@@ -240,10 +262,14 @@ export function SelectInput<T = string, M extends boolean = false>({
               sortFilteredOptions={sortFilteredOptions}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
-              filterQuery={deferredFilterQuery}
+              filterQuery={filterQuery}
+              initialTypeaheadKey={initialTypeaheadKey}
               autocomplete={autocomplete}
               name={name}
               onFilterChange={setFilterQuery}
+              onInitialTypeaheadHandled={() => {
+                setInitialTypeaheadKey(null);
+              }}
               onAutocompleteSelect={(matchedValue) => {
                 onChange?.(matchedValue as M extends true ? T[] : T);
                 if (!multiple) {

package/src/Inputs/SelectInput/SelectInput.utils.ts

@@ -1,7 +1,5 @@
 import { SelectInputItem, SelectInputOptionItem } from './SelectInput.types';
 
-export const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
-
 /**
  * Converts a string to a normalized, searchable format by:
  * - Trimming whitespace

package/src/Inputs/SelectInput/TriggerButton/SelectInputTriggerButton.tsx

@@ -29,6 +29,9 @@ export function SelectInputTriggerButton<T extends SelectInputTriggerButtonEleme
       ref={ref}
       as={PolymorphicWithOverrides}
       role="combobox"
+      // Safari can omit buttons from sequential keyboard navigation unless their
+      // focus order is explicit. Zero keeps the trigger in the natural tab order.
+      tabIndex={0}
       __overrides={{ as, size, ...interactionProps }}
       {...mergeProps({ onClick, onKeyDown }, restProps)}
     />

package/src/Inputs/SelectInput/constants.ts

@@ -0,0 +1,3 @@
+export const MAX_ITEMS_WITHOUT_VIRTUALIZATION = 50;
+
+export const TYPEAHEAD_QUERY_RESET_TIMEOUT_MS = 350;

package/src/Inputs/SelectInput/hooks/useTypeahead.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { TYPEAHEAD_QUERY_RESET_TIMEOUT_MS } from '../constants';
+import { searchableString } from '../SelectInput.utils';
+
+const resetsTypeaheadQuery = (key: string) =>
+  key === 'ArrowDown' ||
+  key === 'ArrowUp' ||
+  key === 'Home' ||
+  key === 'End' ||
+  key === 'PageDown' ||
+  key === 'PageUp';
+
+export const isTypingKey = (event: React.KeyboardEvent, query = '') =>
+  !event.metaKey &&
+  !event.ctrlKey &&
+  !event.nativeEvent.isComposing &&
+  /^.$/u.test(event.key) &&
+  (event.key !== ' ' || query !== '');
+
+interface UseTypeaheadParams {
+  disabled?: boolean;
+  onMatch?: () => void;
+}
+
+export function useTypeahead({ disabled = false, onMatch }: UseTypeaheadParams = {}) {
+  const queryRef = useRef('');
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const resetQuery = useCallback(() => {
+    queryRef.current = '';
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => resetQuery, [resetQuery]);
+
+  return useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled || !isTypingKey(event, queryRef.current)) {
+        if (resetsTypeaheadQuery(event.key)) {
+          resetQuery();
+        }
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      queryRef.current += event.key;
+      const needle = searchableString(queryRef.current);
+
+      if (timeoutRef.current != null) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(resetQuery, TYPEAHEAD_QUERY_RESET_TIMEOUT_MS);
+
+      const options = Array.from(
+        event.currentTarget.querySelectorAll<HTMLElement>(
+          '[role="option"]:not([aria-disabled="true"])',
+        ),
+      );
+      const optionLabels = options.map((option) => searchableString(option.textContent ?? ''));
+      const matchingIndex = optionLabels.findIndex((label) => label.startsWith(needle));
+      const closestIndex =
+        matchingIndex === -1
+          ? optionLabels.findIndex((label) => label.includes(needle))
+          : matchingIndex;
+
+      if (closestIndex === -1) {
+        return;
+      }
+
+      options[closestIndex].focus({ preventScroll: true });
+      event.currentTarget.focus({ preventScroll: true });
+      onMatch?.();
+    },
+    [disabled, onMatch, resetQuery],
+  );
+}

package/src/i18n/ja.json

@@ -50,7 +50,7 @@
   "neptune.Table.loaded": "テーブルデータが読み込まれました",
   "neptune.Table.loading": "テーブルデータを読み込み中です",
   "neptune.Table.refreshPage": "ページを更新する",
-  "neptune.Typeahead.suggestionsLabel": "Suggestions",
+  "neptune.Typeahead.suggestionsLabel": "提案",
   "neptune.Upload.csButtonText": "別のファイルをアップロードしますか？",
   "neptune.Upload.csFailureText": "アップロードに失敗しました。もう一度やり直してください。",
   "neptune.Upload.csSuccessText": "アップロードが完了しました。",

package/src/main.css

@@ -22323,6 +22323,16 @@ button.np-option {
     min-block-size: 128px;
   }
 }
+.np-flow-navigation--no-steps {
+  block-size: 80px;
+  min-block-size: 80px;
+}
+@media (min-width: 320.02px) {
+  .np-flow-navigation--no-steps {
+    block-size: 80px;
+    min-block-size: 80px;
+  }
+}
 .np-flow-navigation--border-bottom {
   border-block-end: 1px solid rgba(0,0,0,0.10196);
   border-block-end: 1px solid #0000001a;