@transferwise/components 46.0.0 → 46.0.2

package/build/types/moneyInput/MoneyInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;AA+DA;IACE,wBAeC;IAZC,mBAAkD;IAClD;;;;;MAUC;IAGH,uDAaC;IAED,+CAWE;IAEF,oCAIE;IAEF,kCAyBE;IAEF,qCAgBE;IAEF,yBAGE;IAFA,mCAA0B;IAI5B,0BAEE;IAEF;;;;MAME;IAEF,0BAuBC;IAED,kBAsBC;IAED,yCAIE;IAEF,+BAKE;IAEF,+CAQE;IAEF,+BAAqE;IAErE,sCAmIC;CACF"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;AA+DA;IACE,wBAeC;IAZC,mBAAkD;IAClD;;;;;MAUC;IAGH,uDAaC;IAED,+CAWE;IAEF,oCAIE;IAEF,kCAyBE;IAEF,qCAgBE;IAEF,yBAGE;IAFA,mCAA0B;IAI5B,0BAEE;IAEF;;;;MAME;IAEF,0BAuBC;IAED,kBAsBC;IAED,yCAIE;IAEF,+BAKE;IAEF,+CAQE;IAEF,+BAAqE;IAErE,sCA6IC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.0.0",
+  "version": "46.0.2",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/moneyInput/MoneyInput.js

@@ -254,24 +254,34 @@ class MoneyInput extends Component {
       this.props;
     const selectOptions = this.getSelectOptions();
 
-    const getFirstOption = () => {
+    const getFirstSelectItem = () => {
       if (selectOptions.length !== 0) {
-        const firstOption = selectOptions[0];
-        if (firstOption.type === 'option') {
-          return firstOption.value;
+        const firstItem = selectOptions[0];
+
+        if (firstItem.type === 'option') {
+          return {
+            hasOneCurrency: selectOptions.length === 1,
+            currency: firstItem.value.currency,
+          };
         }
-        if (firstOption.type === 'group' && firstOption.options.length !== 0) {
-          return firstOption.options[0].value;
+
+        if (firstItem.type === 'group') {
+          return {
+            hasOneCurrency: firstItem.options.length === 1,
+            currency: firstItem.options[0].value.currency,
+          };
         }
       }
+
       return null;
     };
 
-    const firstOption = getFirstOption();
+    const firstSelectItem = getFirstSelectItem();
 
     const isFixedCurrency =
       !this.state.searchQuery &&
-      ((selectOptions.length === 1 && firstOption.currency === selectedCurrency.currency) ||
+      ((firstSelectItem?.hasOneCurrency &&
+        firstSelectItem?.currency === selectedCurrency.currency) ||
         !onCurrencyChange);
 
     const disabled = !this.props.onAmountChange;
@@ -351,7 +361,7 @@ class MoneyInput extends Component {
               renderValue={(currency, withinTrigger) => {
                 return (
                   <SelectInputOptionContent
-                    title={currency.label}
+                    title={withinTrigger ? currency.currency.toUpperCase() : currency.label}
                     note={withinTrigger ? undefined : currency.note}
                     icon={<Flag code={currency.currency} intrinsicSize={24} />}
                   />

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,8 +3,6 @@ import { within, userEvent } from '@storybook/testing-library';
 import { Lock } from '@transferwise/icons';
 import React from 'react';
 
-import Drawer from '../drawer';
-
 import MoneyInput from '.';
 
 export default {
@@ -82,6 +80,17 @@ const exampleCurrency = {
   },
 } as const;
 
+const exampleBalanceCurrency = {
+  eur: {
+    ...exampleCurrency.eur,
+    label: '123.45 EUR',
+  },
+  gbp: {
+    ...exampleCurrency.gbp,
+    label: '12.34 GBP',
+  },
+} as const;
+
 export const SingleCurrency: Story = {
   args: {
     currencies: [],
@@ -117,6 +126,20 @@ export const MultipleCurrencies: Story = {
   },
 };
 
+export const BalanceCurrencies: Story = {
+  args: {
+    currencies: [
+      {
+        header: 'Balance currencies',
+      },
+      exampleBalanceCurrency.eur,
+      exampleBalanceCurrency.gbp,
+    ],
+    selectedCurrency: exampleBalanceCurrency.eur,
+    searchPlaceholder: 'Type a currency / country',
+  },
+};
+
 export const OpenedInput: Story = {
   ...MultipleCurrencies,
   play: ({ canvasElement }) => {