@transferwise/components 46.122.0 → 46.123.0

package/src/header/Header.tests.story.tsx

@@ -4,7 +4,7 @@ import { allModes } from '../../.storybook/modes';
 
 const meta: Meta<typeof Header> = {
   component: Header,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   title: 'Typography/Header/tests',
 };
 export default meta;

package/src/inputs/SelectInput.spec.tsx

@@ -263,6 +263,183 @@ describe('SelectInput', () => {
     expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
   });
 
+  it('deduplicates search results across groups using compareValues as key', async () => {
+    interface Currency {
+      code: string;
+      name: string;
+    }
+
+    const usdInGroup1: Currency = { code: 'USD', name: 'US Dollar' };
+    const usdInGroup2: Currency = { code: 'USD', name: 'US Dollar' };
+    const eur: Currency = { code: 'EUR', name: 'Euro' };
+    const gbp: Currency = { code: 'GBP', name: 'British Pound' };
+
+    render(
+      <SelectInput<Currency>
+        items={[
+          {
+            type: 'group',
+            label: 'Popular',
+            options: [
+              { type: 'option', value: usdInGroup1 },
+              { type: 'option', value: eur },
+            ],
+          },
+          {
+            type: 'group',
+            label: 'All currencies',
+            options: [
+              { type: 'option', value: usdInGroup2 },
+              { type: 'option', value: gbp },
+            ],
+          },
+        ]}
+        compareValues="code"
+        renderValue={(currency) => currency.name}
+        filterable
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const listbox = screen.getByRole('listbox');
+
+    // Before filtering, should show all 4 options (no deduplication yet)
+    let options = within(listbox).getAllByRole('option');
+    expect(options).toHaveLength(4);
+
+    const usdOptions = within(listbox).getAllByText('US Dollar');
+    expect(usdOptions).toHaveLength(2);
+
+    // Start filtering - type a search query to trigger deduplication
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    await userEvent.type(searchInput, 'u');
+
+    // After filtering with 'u', should show 3 unique options (USD deduplicated, EUR, GBP)
+    options = within(listbox).getAllByRole('option');
+    expect(options).toHaveLength(3);
+    expect(within(listbox).getByText('Euro')).toBeInTheDocument();
+    expect(within(listbox).getByText('British Pound')).toBeInTheDocument();
+
+    // Filter more specifically for 'dollar'
+    await userEvent.clear(searchInput);
+    await userEvent.type(searchInput, 'dollar');
+
+    const filteredOptions = within(listbox).getAllByRole('option');
+    // Should only show 1 USD option, not 2
+    expect(filteredOptions).toHaveLength(1);
+    expect(within(listbox).getByText('US Dollar')).toBeInTheDocument();
+  });
+
+  it('deduplicates search results across groups using compareValues as function', async () => {
+    interface Item {
+      id: number;
+      label: string;
+    }
+
+    const item1Group1: Item = { id: 1, label: 'Item One' };
+    const item2Group1: Item = { id: 2, label: 'Item Two' };
+
+    const item1Group2: Item = { id: 1, label: 'Item One' };
+
+    render(
+      <SelectInput<Item>
+        items={[
+          {
+            type: 'group',
+            label: 'Group A',
+            options: [
+              { type: 'option', value: item1Group1 },
+              { type: 'option', value: item2Group1 },
+            ],
+          },
+          {
+            type: 'group',
+            label: 'Group B',
+            options: [{ type: 'option', value: item1Group2 }],
+          },
+        ]}
+        compareValues={(a, b) => a?.id === b?.id}
+        renderValue={(item) => item.label}
+        filterable
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const listbox = screen.getByRole('listbox');
+
+    // Before filtering, should show all 3 options (no deduplication yet)
+    let options = within(listbox).getAllByRole('option');
+    expect(options).toHaveLength(3);
+
+    // Start filtering - type a search query to trigger deduplication
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    await userEvent.type(searchInput, 'item');
+
+    // After filtering, should show 2 unique options (item with id:1 deduplicated, item with id:2)
+    options = within(listbox).getAllByRole('option');
+    expect(options).toHaveLength(2);
+    expect(within(listbox).getByText('Item One')).toBeInTheDocument();
+    expect(within(listbox).getByText('Item Two')).toBeInTheDocument();
+  });
+
+  it('sorts filtered options using sortFilteredOptions prop', async () => {
+    interface Country {
+      code: string;
+      name: string;
+      keywords: string[];
+    }
+
+    const countries: Country[] = [
+      { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
+      { code: 'DE', name: 'Germany', keywords: ['EUR'] },
+      { code: 'US', name: 'United States', keywords: ['United States dollar', 'USD'] },
+      { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
+    ];
+
+    render(
+      <SelectInput<Country>
+        items={countries.map((country) => ({
+          type: 'option',
+          value: country,
+          filterMatchers: country.keywords,
+        }))}
+        renderValue={(country) => country.name}
+        filterable
+        sortFilteredOptions={(a, b, searchQuery) => {
+          const query = searchQuery.toLowerCase();
+          const nameA = a.value.name.toLowerCase();
+          const nameB = b.value.name.toLowerCase();
+
+          const aMatch = nameA.includes(query);
+          const bMatch = nameB.includes(query);
+
+          if (aMatch && !bMatch) return -1;
+          if (!aMatch && bMatch) return 1;
+
+          return nameA.localeCompare(nameB);
+        }}
+      />,
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await userEvent.click(trigger);
+
+    const searchInput = screen.getByRole('combobox', { expanded: true });
+    await userEvent.type(searchInput, 'united');
+
+    const listbox = screen.getByRole('listbox');
+    const options = within(listbox).getAllByRole('option');
+
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveTextContent('United States');
+    expect(options[1]).toHaveTextContent('Andorra');
+    expect(options[2]).toHaveTextContent('Zambia');
+  });
+
   describe('listbox label', () => {
     const fieldLabel = 'Fruits';
     const triggerLabel = 'Select fruit';

package/src/inputs/SelectInput.story.tsx

@@ -616,3 +616,71 @@ export const WithAutocomplete: Story<string> = {
     );
   },
 };
+
+interface CountryWithCurrency extends Country {
+  keywords: string[];
+}
+
+const countriesWithCurrency: CountryWithCurrency[] = [
+  { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
+  { code: 'DE', name: 'Germany', keywords: ['EUR'] },
+  { code: 'US', name: 'United States', keywords: ['USD'] },
+  { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
+];
+
+function countryWithCurrencyOption(country: CountryWithCurrency) {
+  return {
+    type: 'option',
+    value: country,
+    filterMatchers: [country.name, country.code, ...country.keywords],
+  } satisfies SelectInputItem<CountryWithCurrency>;
+}
+
+export const WithCustomSearchResultSorting: Story<CountryWithCurrency> = {
+  args: {
+    items: countriesWithCurrency.map(countryWithCurrencyOption),
+    compareValues: 'code',
+    renderValue: (country) => (
+      <SelectInputOptionContent
+        title={country.name}
+        icon={<Flag code={country.code} intrinsicSize={24} />}
+      />
+    ),
+    value: countriesWithCurrency[0],
+    filterable: true,
+    filterPlaceholder: 'Type a currency / country',
+    sortFilteredOptions: (a, b, searchQuery) => {
+      const normalizedQuery = searchQuery.toLowerCase();
+      const nameA = a.value.name.toLowerCase();
+      const nameB = b.value.name.toLowerCase();
+
+      // Prioritize countries where name contains the search query
+      const aNameMatch = nameA.includes(normalizedQuery);
+      const bNameMatch = nameB.includes(normalizedQuery);
+
+      if (aNameMatch && !bNameMatch) return -1;
+      if (!aNameMatch && bNameMatch) return 1;
+
+      // Then sort alphabetically
+      return nameA.localeCompare(nameB);
+    },
+    size: 'lg',
+  } satisfies Story<CountryWithCurrency>['args'],
+  decorators: [
+    (Story) => (
+      <div>
+        <p className="m-b-3 np-text-body-default" style={{ maxWidth: '600px' }}>
+          This example demonstrates custom sorting with the <code>sortFilteredOptions</code> prop.
+          <br />
+          <br />
+          Try searching for &quot;united&quot; - Without the custom sorter, it would just be the
+          provided options order.
+          <br />
+          With a customer sorter function in this story, the countries with &quot;United&quot; in
+          their name appear first, followed by countries that only match via keywords.
+        </p>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/inputs/SelectInput.tsx

@@ -93,8 +93,13 @@ export type SelectInputItem<T = string> =
 function dedupeSelectInputOptionItem<T>(
   item: SelectInputOptionItem<T>,
   existingValues: Set<T>,
+  compareValues?: (a: T, b: T) => boolean,
 ): SelectInputOptionItem<T | undefined> {
-  if (!existingValues.has(item.value)) {
+  const isDuplicate = compareValues
+    ? Array.from(existingValues).some((existingValue) => compareValues(item.value, existingValue))
+    : existingValues.has(item.value);
+
+  if (!isDuplicate) {
     existingValues.add(item.value);
     return item;
   }
@@ -108,18 +113,20 @@ function dedupeSelectInputOptionItem<T>(
  */
 function dedupeSelectInputItems<T>(
   items: readonly SelectInputItem<T>[],
+  compareValues?: (a: T, b: T) => boolean,
 ): SelectInputItem<T | undefined>[] {
   const existingValues = new Set<T>();
+
   return items.map((item) => {
     switch (item.type) {
       case 'option': {
-        return dedupeSelectInputOptionItem(item, existingValues);
+        return dedupeSelectInputOptionItem(item, existingValues, compareValues);
       }
       case 'group': {
         return {
           ...item,
           options: item.options.map((option) =>
-            dedupeSelectInputOptionItem(option, existingValues),
+            dedupeSelectInputOptionItem(option, existingValues, compareValues),
           ),
         };
       }
@@ -153,6 +160,38 @@ function filterSelectInputItems<T>(
   });
 }
 
+/**
+ * Flattens and sorts filtered options using the provided comparator.
+ * Extracts all options from groups, filters out undefined values (deduplicated items),
+ * sorts them, and returns as a flat list of option items.
+ */
+function sortSelectInputItems<T>(
+  items: readonly SelectInputItem<T | undefined>[],
+  compareFn: (
+    a: SelectInputOptionItem<NonNullable<T>>,
+    b: SelectInputOptionItem<NonNullable<T>>,
+    searchQuery: string,
+  ) => number,
+  searchQuery: string,
+): SelectInputItem<NonNullable<T>>[] {
+  const flattenedOption = items.flatMap((item) => {
+    if (item.type === 'option') {
+      return item.value !== undefined ? [item as SelectInputOptionItem<NonNullable<T>>] : [];
+    }
+
+    if (item.type === 'group') {
+      return item.options.filter(
+        (option): option is SelectInputOptionItem<NonNullable<T>> => option.value !== undefined,
+      );
+    }
+
+    return [];
+  });
+
+  // eslint-disable-next-line functional/immutable-data
+  return flattenedOption.sort((a, b) => compareFn(a, b, searchQuery));
+}
+
 export interface SelectInputProps<T = string, M extends boolean = false> {
   id?: string;
   /**
@@ -203,6 +242,11 @@ export interface SelectInputProps<T = string, M extends boolean = false> {
   }) => React.ReactNode;
   filterable?: boolean;
   filterPlaceholder?: string;
+  sortFilteredOptions?: (
+    a: SelectInputOptionItem<NonNullable<T>>,
+    b: SelectInputOptionItem<NonNullable<T>>,
+    searchQuery: string,
+  ) => number;
   disabled?: boolean;
   size?: 'sm' | 'md' | 'lg';
   className?: string;
@@ -297,6 +341,7 @@ export function SelectInput<T = string, M extends boolean = false>({
   renderTrigger = defaultRenderTrigger,
   filterable,
   filterPlaceholder,
+  sortFilteredOptions,
   disabled,
   size = 'md',
   className,
@@ -481,10 +526,12 @@ export function SelectInput<T = string, M extends boolean = false>({
               id={id ? `${id}Search` : undefined}
               parentId={parentId}
               items={items}
+              compareValues={compareValues}
               renderValue={renderValue}
               renderFooter={renderFooter}
               filterable={filterable}
               filterPlaceholder={filterPlaceholder}
+              sortFilteredOptions={sortFilteredOptions}
               searchInputRef={searchInputRef}
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
@@ -589,7 +636,15 @@ const SelectInputOptionsContainer = forwardRef(function SelectInputOptionsContai
 
 interface SelectInputOptionsProps<T = string> extends Pick<
   SelectInputProps<T>,
-  'items' | 'renderValue' | 'renderFooter' | 'filterable' | 'filterPlaceholder' | 'id' | 'parentId'
+  | 'items'
+  | 'renderValue'
+  | 'renderFooter'
+  | 'filterable'
+  | 'filterPlaceholder'
+  | 'id'
+  | 'parentId'
+  | 'compareValues'
+  | 'sortFilteredOptions'
 > {
   searchInputRef: React.MutableRefObject<HTMLInputElement | null>;
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
@@ -606,10 +661,12 @@ function SelectInputOptions<T = string>({
   id,
   parentId,
   items,
+  compareValues: compareValuesProp,
   renderValue = String,
   renderFooter,
   filterable = false,
   filterPlaceholder,
+  sortFilteredOptions,
   searchInputRef,
   listboxRef,
   filterQuery,
@@ -651,12 +708,40 @@ function SelectInputOptions<T = string>({
     }
   }, [controllerRef, needle]);
 
-  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] =
-    needle != null
-      ? filterSelectInputItems(dedupeSelectInputItems(items), (item) =>
-          selectInputOptionItemIncludesNeedle(item, needle),
-        )
-      : items;
+  const compareValues = useMemo(() => {
+    if (!compareValuesProp) {
+      return undefined;
+    }
+
+    if (typeof compareValuesProp === 'function') {
+      return (a: NonNullable<T>, b: NonNullable<T>) => compareValuesProp(a, b);
+    }
+
+    const key = compareValuesProp;
+    return (a: NonNullable<T>, b: NonNullable<T>) => {
+      if (typeof a === 'object' && a != null && typeof b === 'object' && b != null) {
+        return (a as Record<string, unknown>)[key] === (b as Record<string, unknown>)[key];
+      }
+      return a === b;
+    };
+  }, [compareValuesProp]);
+
+  const filteredItems: readonly SelectInputItem<NonNullable<T> | undefined>[] = useMemo(() => {
+    if (needle == null) {
+      return items;
+    }
+
+    const filtered = filterSelectInputItems(dedupeSelectInputItems(items, compareValues), (item) =>
+      selectInputOptionItemIncludesNeedle(item, needle),
+    );
+
+    if (sortFilteredOptions) {
+      return sortSelectInputItems(filtered, sortFilteredOptions, filterQuery);
+    }
+
+    return filtered;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [needle, items, compareValues]);
   const resultsEmpty = needle != null && filteredItems.length === 0;
 
   const virtualized = filteredItems.length > MAX_ITEMS_WITHOUT_VIRTUALIZATION;

package/src/legacylistItem/LegacyListItem.tests.story.tsx

@@ -6,7 +6,7 @@ import List from '../list';
 
 export default {
   component: LegacyListItem,
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'deprecated', '!manifest'],
   title: 'Content/LegacyListItem/tests',
 };
 

package/src/listItem/ListItem.spec.tsx

@@ -1526,10 +1526,9 @@ describe('ListItem', () => {
         );
         expect(screen.queryByText(prompt)).not.toBeInTheDocument();
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
-          'id',
-          expect.stringMatching(/_prompt$/),
-        );
+        expect(
+          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
+        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
 
       it('should render muted prompt if disabled and disabledPromptMessage are set', () => {
@@ -1537,10 +1536,9 @@ describe('ListItem', () => {
           <ListItem title="Test Title" disabled disabledPromptMessage={disabledPromptMessage} />,
         );
         expect(screen.getByText(disabledPromptMessage)).toBeInTheDocument();
-        expect(screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode).toHaveAttribute(
-          'id',
-          expect.stringMatching(/_prompt$/),
-        );
+        expect(
+          screen.getByTestId('InlinePrompt_Muted').parentNode?.parentNode?.parentNode,
+        ).toHaveAttribute('id', expect.stringMatching(/_prompt$/));
       });
     });
   });

package/src/listItem/_stories/ListItem.focus.test.story.tsx

@@ -21,7 +21,7 @@ const waitForListItem = async (canvas: ReturnType<typeof within>, timeout = 3000
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/focus',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -12,7 +12,7 @@ import { LISTITEM_CQ } from '../constants';
 
 export default {
   title: 'Content/ListItem/tests/layout',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: bright-green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: dark',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: forest-green',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx

@@ -6,7 +6,7 @@ import { withSizedContainer } from '../helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/cq: medium',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx

@@ -12,7 +12,7 @@ import {
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/surface: neutral',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx

@@ -11,7 +11,7 @@ import { VariantStory } from './helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/theme: personal',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx

@@ -6,7 +6,7 @@ import { allModes } from '../../../../.storybook/modes';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/rtl',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },

package/src/listItem/_stories/variants/ListItem.small.test.story.tsx

@@ -6,7 +6,7 @@ import { withSizedContainer } from '../helpers';
 export default {
   component: ListItem,
   title: 'Content/ListItem/tests/variants/cq: small',
-  tags: ['!autodocs'],
+  tags: ['!autodocs', '!manifest'],
   parameters: {
     controls: { disable: true },
     actions: { disable: true },