@transferwise/components 46.160.1 → 46.160.3

package/src/DateLookup/_stories/DateLookup.rtl.test.story.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import DateLookup from '..';
 
 export default {
@@ -14,39 +14,47 @@ type Story = StoryObj<typeof DateLookup>;
 
 const selectedDate = new Date(2024, 5, 14);
 
+const i18nConfig = {
+  label: { ltr: 'Select date', rtl: 'اختر التاريخ' },
+  placeholder: { ltr: 'Choose a date', rtl: 'اختر تاريخًا' },
+};
+
 export const TriggerVariants: Story = {
-  render: () => (
-    <>
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        value={selectedDate}
-        clearable
-        onChange={() => {}}
-      />
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        size="sm"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        size="lg"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
+  render: () => {
+    const i18n = useRtlDiffI18n<{ label: string; placeholder: string }>();
+    return (
+      <>
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          value={selectedDate}
+          onChange={() => {}}
+        />
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          value={selectedDate}
+          clearable
+          onChange={() => {}}
+        />
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          size="sm"
+          value={selectedDate}
+          onChange={() => {}}
+        />
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          size="lg"
+          value={selectedDate}
+          onChange={() => {}}
+        />
+      </>
+    );
+  },
+  ...withRTLDiff({ renderAs: 'iframe', i18n: i18nConfig }),
 };
 
 const containerStyle: React.CSSProperties = {
@@ -59,16 +67,19 @@ const containerStyle: React.CSSProperties = {
 };
 
 export const OpenCalendarPanel: Story = {
-  render: () => (
-    <div style={containerStyle}>
-      <DateLookup
-        label="Select date"
-        placeholder="Choose a date"
-        value={selectedDate}
-        onChange={() => {}}
-      />
-    </div>
-  ),
+  render: () => {
+    const i18n = useRtlDiffI18n<{ label: string; placeholder: string }>();
+    return (
+      <div style={containerStyle}>
+        <DateLookup
+          label={i18n.label}
+          placeholder={i18n.placeholder}
+          value={selectedDate}
+          onChange={() => {}}
+        />
+      </div>
+    );
+  },
   play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.queryByRole('button');
@@ -77,12 +88,12 @@ export const OpenCalendarPanel: Story = {
     // Suppress focus ring on calendar cells — FocusScope traps focus inside the panel
     // and the autofocus cycle causes the selected date's ring to flicker between iframes.
     const style = canvasElement.ownerDocument.createElement('style');
-    style.textContent = ` 
-    .np-panel__content *:focus { 
-      outline: none !important; 
-      box-shadow: none !important; 
+    style.textContent = `
+    .np-panel__content *:focus {
+      outline: none !important;
+      box-shadow: none !important;
     }`;
     canvasElement.ownerDocument.head.appendChild(style);
   },
-  ...withRTLDiff({ renderAs: 'iframe' }),
+  ...withRTLDiff({ renderAs: 'iframe', i18n: i18nConfig }),
 };

package/src/Field/_stories/Field.test.story.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import { Input } from '../../Inputs/Input/Input';
 import { TextArea } from '../../Inputs/TextArea/TextArea';
-import { lorem10 } from '../../test-utils';
 import Field, { FieldProps } from '..';
 import { Sentiment } from '../../common';
 
@@ -59,44 +58,56 @@ export const DeprecatedProps: Story = {
 };
 
 export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* Required label (default) — label text aligns to start */}
-      <Field label="Required field">
-        <Input defaultValue="Input value" />
-      </Field>
+  render: () => {
+    const i18n = useRtlDiffI18n();
+    return (
+      <>
+        <Field label={i18n.requiredLabel}>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Optional label — "(optional)" suffix uses directional margin-left */}
-      <Field label="Optional field" required={false}>
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field label={i18n.optionalLabel} required={false}>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Label + description + message — full vertical layout with directional icon */}
-      <Field
-        label="Field with description and message"
-        required={false}
-        description={lorem10}
-        message="This is a validation message"
-        sentiment="negative"
-      >
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field
+          label={i18n.descriptionLabel}
+          required={false}
+          description={i18n.description}
+          message={i18n.validationMessage}
+          sentiment="negative"
+        >
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Message only (no label) — InlinePrompt icon+text layout visible */}
-      <Field message="A helpful message" sentiment="positive">
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field message={i18n.helpfulMessage} sentiment="positive">
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Loading message — spinner replaces icon but layout structure is identical */}
-      <Field label="Field with loading message" message="Saving…" messageLoading>
-        <Input defaultValue="Input value" />
-      </Field>
+        <Field label={i18n.loadingLabel} message={i18n.savingMessage} messageLoading>
+          <Input defaultValue={i18n.inputValue} />
+        </Field>
 
-      {/* Textarea with char counter — counter uses text-align:right + margin-left:auto */}
-      <Field label="Textarea with char counter" required={false} description="Max 100 characters">
-        <TextArea maxLength={100} defaultValue="Textarea value" />
-      </Field>
-    </>
-  ),
-  ...withRTLDiff(),
+        <Field label={i18n.textareaLabel} required={false} description={i18n.maxChars}>
+          <TextArea maxLength={100} defaultValue={i18n.textareaValue} />
+        </Field>
+      </>
+    );
+  },
+  ...withRTLDiff({
+    i18n: {
+      requiredLabel: { ltr: 'Required field', rtl: 'حقل مطلوب' },
+      optionalLabel: { ltr: 'Optional field', rtl: 'حقل اختياري' },
+      descriptionLabel: { ltr: 'Field with description and message', rtl: 'حقل مع وصف ورسالة' },
+      description: { ltr: 'A short description of the field', rtl: 'وصف قصير للحقل' },
+      validationMessage: { ltr: 'This is a validation message', rtl: 'هذه رسالة تحقق' },
+      helpfulMessage: { ltr: 'A helpful message', rtl: 'رسالة مفيدة' },
+      loadingLabel: { ltr: 'Field with loading message', rtl: 'حقل مع رسالة تحميل' },
+      savingMessage: { ltr: 'Saving…', rtl: 'جارٍ الحفظ…' },
+      textareaLabel: { ltr: 'Textarea with char counter', rtl: 'حقل نص مع عداد الأحرف' },
+      maxChars: { ltr: 'Max 100 characters', rtl: 'الحد الأقصى 100 حرف' },
+      inputValue: { ltr: 'Input value', rtl: 'قيمة الإدخال' },
+      textareaValue: { ltr: 'Textarea value', rtl: 'قيمة حقل النص' },
+    },
+  }),
 };

package/src/FlowNavigation/_stories/FlowNavigation.rtl.test.story.tsx

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import AvatarView from '../../AvatarView';
+import { ProfileType } from '../../common';
+import Logo from '../../Logo';
+
+import FlowNavigation from '../FlowNavigation';
+
+const noop = () => {};
+
+const steps = [
+  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
+  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
+  { label: 'Review', onClick: noop },
+  { label: 'Pay', onClick: noop },
+];
+
+const meta: Meta<typeof FlowNavigation> = {
+  component: FlowNavigation,
+  title: 'Navigation/FlowNavigation/Tests/RTL Diff',
+  tags: ['!autodocs', '!manifest'],
+  parameters: {
+    padding: '0',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof FlowNavigation>;
+
+export const Desktop: Story = {
+  render: () => (
+    <>
+      <FlowNavigation
+        activeStep={2}
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      <FlowNavigation
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        onClose={noop}
+      />
+      <FlowNavigation
+        done
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+      />
+    </>
+  ),
+  ...withRTLDiff(),
+};
+
+export const Mobile: Story = {
+  render: () => (
+    <>
+      <FlowNavigation
+        activeStep={2}
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        steps={steps}
+        onClose={noop}
+        onGoBack={noop}
+      />
+      <FlowNavigation
+        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
+        logo={<Logo />}
+        onClose={noop}
+      />
+    </>
+  ),
+  ...withRTLDiff({ viewport: 'largeMobile' }),
+};

package/src/FlowNavigation/_stories/FlowNavigation.test.story.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 
-import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
 import AvatarView from '../../AvatarView';
 import { ProfileType } from '../../common';
 import Logo from '../../Logo';
@@ -77,46 +76,3 @@ export const LongLabel: Story = {
     />
   ),
 };
-
-const rtlSteps = [
-  { label: 'Amount', hoverLabel: '100 GBP', onClick: noop },
-  { label: 'You', hoverLabel: 'Elena Durante', onClick: noop },
-  { label: 'Review', onClick: noop },
-  { label: 'Pay', onClick: noop },
-];
-
-/**
- * FlowNavigation has directional layout: back button on inline-start,
- * close button and avatar on inline-end, and a stepper progress bar that
- * flows in the reading direction. All of these flip in RTL.
- */
-export const RTLDiff: Story = {
-  render: () => (
-    <>
-      {/* With stepper, back button, close button, and avatar */}
-      <FlowNavigation
-        activeStep={2}
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={rtlSteps}
-        onClose={noop}
-        onGoBack={noop}
-      />
-      {/* Without stepper — logo left, close button right */}
-      <FlowNavigation
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        onClose={noop}
-      />
-      {/* Done state — no stepper, logo and close button only */}
-      <FlowNavigation
-        done
-        avatar={<AvatarView profileType={ProfileType.PERSONAL} />}
-        logo={<Logo />}
-        steps={rtlSteps}
-        onClose={noop}
-      />
-    </>
-  ),
-  ...withRTLDiff(),
-};

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();