@transferwise/components 45.15.0 → 45.15.1

package/src/inputs/SelectInput.story.tsx

@@ -141,7 +141,10 @@ export const Months: StoryObj<{
       <div className="d-flex flex-column">
         <SelectInput
           placeholder="Month"
-          items={months.map((month) => ({ type: 'option', value: month }))}
+          items={months.map((month) => ({
+            type: 'option',
+            value: month,
+          }))}
           value={selectedMonth}
           renderValue={(month) => <SelectInputOptionContent title={month.name} />}
           onChange={(month) => {
@@ -206,6 +209,14 @@ const allCurrencies: Currency[] = [...popularCurrencies, ...otherCurrencies].sor
   a.code.localeCompare(b.code),
 );
 
+function currencyOption(currency: Currency) {
+  return {
+    type: 'option',
+    value: currency,
+    filterMatchers: [currency.code, currency.name, ...(currency.countries ?? [])],
+  } satisfies SelectInputItem<Currency>;
+}
+
 export const Currencies: StoryObj<{
   onChange: (value: Currency) => void;
 }> = {
@@ -219,18 +230,12 @@ export const Currencies: StoryObj<{
             {
               type: 'group',
               label: 'Popular currencies',
-              options: popularCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
+              options: popularCurrencies.map((currency) => currencyOption(currency)),
             },
             {
               type: 'group',
               label: 'All currencies',
-              options: allCurrencies.map((currency) => ({
-                type: 'option',
-                value: currency,
-              })),
+              options: allCurrencies.map((currency) => currencyOption(currency)),
             },
           ]}
           value={selectedCurrency}