@transferwise/components 46.127.1 → 46.128.1

package/src/inputs/SelectInput.story.tsx

@@ -624,6 +624,7 @@ interface CountryWithCurrency extends Country {
 const countriesWithCurrency: CountryWithCurrency[] = [
   { code: 'AD', name: 'Andorra', keywords: ['united states dollar'] },
   { code: 'DE', name: 'Germany', keywords: ['EUR'] },
+  { code: 'NR', name: 'New United Republic', keywords: ['NUR'] },
   { code: 'US', name: 'United States', keywords: ['USD'] },
   { code: 'ZM', name: 'Zambia', keywords: ['USD', 'united states dollar'] },
 ];
@@ -649,38 +650,50 @@ export const WithCustomSearchResultSorting: Story<CountryWithCurrency> = {
     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);
-    },
+    sortFilteredOptions: SelectInput.sortByRelevance((value) => value.name),
     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.
+          This example uses the built-in <code>SelectInput.sortByRelevance</code> helper to sort
+          filtered results by relevance. It prioritises: exact matches → starts with → contains →
+          alphabetical.
           <br />
           <br />
-          Try searching for &quot;united&quot; - Without the custom sorter, it would just be the
-          provided options order.
+          Try searching for &quot;united&quot; to see the sorting tiers in action:
           <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.
+          1. <strong>United States</strong> — name starts with &quot;United&quot;
+          <br />
+          2. <strong>New United Republic</strong> — name contains &quot;United&quot;
+          <br />
+          3. <strong>Andorra, Zambia</strong> — match only via keywords
         </p>
         <Story />
       </div>
     ),
   ],
+  parameters: {
+    docs: {
+      source: {
+        code: `<SelectInput
+  filterable
+  filterPlaceholder="Type a currency / country"
+  sortFilteredOptions={SelectInput.sortByRelevance((value) => value.name)}
+  items={countries.map((country) => ({
+    type: 'option',
+    value: country,
+    filterMatchers: [country.name, country.code, ...country.keywords],
+  }))}
+  renderValue={(country) => (
+    <SelectInputOptionContent
+      title={country.name}
+      icon={<Flag code={country.code} />}
+    />
+  )}
+/>`,
+      },
+    },
+  },
 };