@transferwise/components 46.0.3 → 46.0.5

package/build/types/dateInput/DateInput.messages.d.ts

@@ -15,6 +15,21 @@ declare namespace _default {
         const defaultMessage_2: string;
         export { defaultMessage_2 as defaultMessage };
     }
+    namespace dayPlaceholder {
+        const id_3: string;
+        export { id_3 as id };
+        const defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+        export const description: string;
+    }
+    namespace yearPlaceholder {
+        const id_4: string;
+        export { id_4 as id };
+        const defaultMessage_4: string;
+        export { defaultMessage_4 as defaultMessage };
+        const description_1: string;
+        export { description_1 as description };
+    }
 }
 export default _default;
 //# sourceMappingURL=DateInput.messages.d.ts.map

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,sCA6IC;CACF"}
+{"version":3,"file":"MoneyInput.d.ts","sourceRoot":"","sources":["../../../src/moneyInput/MoneyInput.js"],"names":[],"mappings":";;;;AA+DA;IACE,wBAcC;IAXC,mBAAkD;IAClD;;;;MASC;IAGH,uDAaC;IAED,+CAWE;IAEF,oCAIE;IAEF,kCAyBE;IAEF,qCAgBE;IAEF,yBAGE;IAFA,mCAA0B;IAI5B,0BAEE;IAEF;;;;MAME;IAEF,0BAuBC;IAED,kBAsBC;IAED,yCAGE;IAEF,+BAKE;IAEF,+CAQE;IAEF,+BAAqE;IAErE,sCA6IC;CACF"}

package/package.json

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

package/src/dateInput/DateInput.js

@@ -64,9 +64,9 @@ const DateInput = ({
   monthLabel = monthLabel || formatMessage(messages.monthLabel);
   yearLabel = yearLabel || formatMessage(messages.yearLabel);
   placeholders = {
-    day: placeholders?.day || 'DD',
+    day: placeholders?.day || formatMessage(messages.dayPlaceholder),
     month: placeholders?.month || formatMessage(messages.monthLabel),
-    year: placeholders?.year || 'YYYY',
+    year: placeholders?.year || formatMessage(messages.yearPlaceholder),
   };
 
   const getDateAsString = (date) => {

package/src/dateInput/DateInput.messages.js

@@ -13,4 +13,14 @@ export default defineMessages({
     id: 'neptune.DateInput.year.label',
     defaultMessage: 'Year',
   },
+  dayPlaceholder: {
+    id: 'neptune.DateInput.day.placeholder',
+    defaultMessage: 'DD',
+    description: 'Placeholder for 2-digit day values within an input.',
+  },
+  yearPlaceholder: {
+    id: 'neptune.DateInput.year.placeholder',
+    defaultMessage: 'YYYY',
+    description: 'Placeholder for 4-digit year values within an input.',
+  },
 });

package/src/dateInput/DateInput.spec.js

@@ -60,6 +60,16 @@ jest.mock('./DateInput.messages', () => ({
     id: 'neptune.DateInput.year.label',
     defaultMessage: 'Year',
   },
+  dayPlaceholder: {
+    id: 'neptune.DateInput.day.placeholder',
+    defaultMessage: 'DD',
+    description: 'Placeholder for 2-digit day values within an input.',
+  },
+  yearPlaceholder: {
+    id: 'neptune.DateInput.year.placeholder',
+    defaultMessage: 'YYYY',
+    description: 'Placeholder for 4-digit year values within an input.',
+  },
 }));
 
 jest.mock('react-intl');

package/src/i18n/en.json

@@ -4,8 +4,10 @@
   "neptune.ClearButton.ariaLabel": "Clear",
   "neptune.CloseButton.ariaLabel": "Close",
   "neptune.DateInput.day.label": "Day",
+  "neptune.DateInput.day.placeholder": "DD",
   "neptune.DateInput.month.label": "Month",
   "neptune.DateInput.year.label": "Year",
+  "neptune.DateInput.year.placeholder": "YYYY",
   "neptune.DateLookup.day": "day",
   "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
   "neptune.DateLookup.month": "month",

package/src/moneyInput/MoneyInput.js

@@ -68,7 +68,6 @@ class MoneyInput extends Component {
     this.formatMessage = this.props.intl.formatMessage;
     this.state = {
       searchQuery: '',
-      selectedOption: this.props.selectedCurrency,
       formattedAmount: formatAmountIfSet(
         props.amount,
         props.selectedCurrency.currency,
@@ -226,7 +225,6 @@ class MoneyInput extends Component {
 
   handleSelectChange = (value) => {
     this.handleSearchChange('');
-    this.setState({ selectedOption: value });
     this.props.onCurrencyChange(value);
   };
 
@@ -356,7 +354,7 @@ class MoneyInput extends Component {
           >
             <SelectInput
               items={selectOptions}
-              value={this.state.selectedOption}
+              value={selectedCurrency}
               compareValues="currency"
               renderValue={(currency, withinTrigger) => {
                 return (

package/src/moneyInput/MoneyInput.story.tsx

@@ -1,19 +1,33 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { Lock } from '@transferwise/icons';
-import React from 'react';
+import React, { useState } from 'react';
 
 import MoneyInput from '.';
 
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
-  render: (args) => (
-    <>
-      <label htmlFor={args.id as string}>Editable money input label</label>
-      <MoneyInput {...args} />
-    </>
-  ),
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selectedCurrency, setSelectedCurrency] = useState(
+      args.selectedCurrency as SelectedOption,
+    );
+    const currencies = args.currencies as SelectedOption[];
+
+    const handleOnCurrencyChange = (value: SelectedOption) => setSelectedCurrency(value);
+
+    return (
+      <>
+        <label htmlFor={args.id as string}>Editable money input label</label>
+        <MoneyInput
+          {...args}
+          selectedCurrency={selectedCurrency}
+          onCurrencyChange={currencies.length > 1 ? handleOnCurrencyChange : undefined}
+        />
+      </>
+    );
+  },
   args: {
     id: 'money-input',
     amount: 1000,
@@ -28,6 +42,8 @@ export default {
 
 type Story = StoryObj<typeof MoneyInput>;
 
+type SelectedOption = (typeof exampleCurrency)[keyof typeof exampleCurrency];
+
 const exampleCurrency = {
   eur: {
     value: 'EUR',