@transferwise/components 46.4.0 → 46.6.0

package/src/i18n/th.json

@@ -9,16 +9,16 @@
   "neptune.DateInput.year.label": "ปี",
   "neptune.DateInput.year.placeholder": "YYYY",
   "neptune.DateLookup.day": "วัน",
-  "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
+  "neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
   "neptune.DateLookup.month": "เดือน",
   "neptune.DateLookup.next": "ถัดไป",
   "neptune.DateLookup.previous": "ก่อนหน้า",
   "neptune.DateLookup.selected": "เลือกแล้ว",
   "neptune.DateLookup.twentyYears": "20 ปี",
   "neptune.DateLookup.year": "ปี",
-  "neptune.FlowNavigation.back": "back to previous step",
+  "neptune.FlowNavigation.back": "กลับไปที่ขั้นก่อนหน้า",
   "neptune.Info.ariaLabel": "ข้อมูลเพิ่มเติม",
-  "neptune.Link.opensInNewTab": "(opens in new tab)",
+  "neptune.Link.opensInNewTab": "(เปิดในแท็บใหม่)",
   "neptune.MoneyInput.Select.placeholder": "เลือกตัวเลือก...",
   "neptune.Select.searchPlaceholder": "ค้นหา...",
   "neptune.SelectInput.noResultsFound": "ไม่พบผลลัพธ์",

package/src/index.ts

@@ -2,6 +2,7 @@
  * Types
  */
 export type { InputProps } from './inputs/Input';
+export type { InputWithDisplayFormatProps } from './inputWithDisplayFormat';
 export type { InputGroupProps } from './inputs/InputGroup';
 export type { SearchInputProps } from './inputs/SearchInput';
 export type {
@@ -14,8 +15,15 @@ export type {
   SelectInputTriggerButtonProps,
 } from './inputs/SelectInput';
 export type { TextAreaProps } from './inputs/TextArea';
+export type { TextareaWithDisplayFormatProps } from './textareaWithDisplayFormat';
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { ModalProps } from './modal';
+export type {
+  CurrencyHeaderItem,
+  CurrencyItem,
+  CurrencyOptionItem,
+  MoneyInputProps,
+} from './moneyInput';
 export type {
   LayoutDirection,
   TypographyTypes,

package/src/inputWithDisplayFormat/InputWithDisplayFormat.tsx

@@ -0,0 +1,10 @@
+import { Input, type InputProps } from '../inputs/Input';
+import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
+
+export interface InputWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
+
+const InputWithDisplayFormat = (props: InputWithDisplayFormatProps) => (
+  <WithDisplayFormat<InputProps> {...props} render={(renderProps) => <Input {...renderProps} />} />
+);
+
+export default InputWithDisplayFormat;

package/src/inputWithDisplayFormat/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InputWithDisplayFormat';
+export type { InputWithDisplayFormatProps } from './InputWithDisplayFormat';

package/src/inputs/SelectInput.tsx

@@ -145,13 +145,13 @@ export interface SelectInputProps<T = string> {
     placeholderShown: boolean;
     clear: (() => void) | undefined;
     disabled: boolean;
-    size: 'md' | 'lg';
+    size: 'sm' | 'md' | 'lg';
     className: string | undefined;
   }) => React.ReactNode;
   filterable?: boolean;
   filterPlaceholder?: string;
   disabled?: boolean;
-  size?: 'md' | 'lg';
+  size?: 'sm' | 'md' | 'lg';
   className?: string;
   onFilterChange?: (args: { query: string; queryNormalized: string | null }) => void;
   onChange?: (value: T) => void;

package/src/moneyInput/{MoneyInput.rtl.spec.js → MoneyInput.rtl.spec.tsx}

@@ -1,4 +1,4 @@
-import { mockMatchMedia, mockResizeObserver, render, userEvent } from '../test-utils';
+import { mockMatchMedia, mockResizeObserver, render, screen, userEvent } from '../test-utils';
 
 import MoneyInput from './MoneyInput';
 
@@ -46,7 +46,7 @@ describe('MoneyInput', () => {
       note: 'Australian dollar',
       currency: 'aud',
     },
-  ];
+  ] as const;
   const props = {
     currencies,
     selectedCurrency: currencies[1],
@@ -62,9 +62,9 @@ describe('MoneyInput', () => {
     ['12,3', '12,3'],
     ['12.3', '12.3'],
   ])("ignores the letters when typed '%s' and shows '%s'", (testValue, expectedValue) => {
-    const { container } = render(<MoneyInput {...props} amount={null} />);
+    render(<MoneyInput {...props} amount={null} />);
 
-    const input = container.querySelector('input');
+    const input = screen.getByRole('textbox');
     userEvent.type(input, testValue);
     expect(input).toHaveValue(expectedValue);
   });

package/src/moneyInput/MoneyInput.spec.js

@@ -31,7 +31,7 @@ describe('Money Input', () => {
 
   let currencies;
 
-  const EEK = { value: 'EEK', currency: 'EEK' };
+  const EEK = { value: 'EEK', label: 'EEK', currency: 'eek' };
 
   beforeEach(() => {
     currencies = [
@@ -185,7 +185,7 @@ describe('Money Input', () => {
               note: 'Canadian dollar',
               currency: 'cad',
             },
-            filterMatchers: ['CAD', 'CAD', 'Canadian dollar', undefined],
+            filterMatchers: ['CAD', 'CAD', 'Canadian dollar', ''],
           },
           {
             type: 'option',
@@ -195,7 +195,7 @@ describe('Money Input', () => {
               note: 'Australian dollar',
               currency: 'aud',
             },
-            filterMatchers: ['AUD', 'AUD', 'Australian dollar', undefined],
+            filterMatchers: ['AUD', 'AUD', 'Australian dollar', ''],
           },
         ],
       },
@@ -240,9 +240,9 @@ describe('Money Input', () => {
     it('hides headers', () => {
       currencies = [
         { header: 'A currency' },
-        { value: 'GBP', label: 'British pound' },
+        { value: 'GBP', label: 'British pound', currency: 'gbp' },
         { header: 'Another currency' },
-        { value: 'EUR', label: 'Euro' },
+        { value: 'EUR', label: 'Euro', currency: 'eur' },
       ];
       component.setProps({ currencies });
       expect(displayedCurrencies()).toStrictEqual([
@@ -252,8 +252,8 @@ describe('Money Input', () => {
           options: [
             {
               type: 'option',
-              value: { value: 'GBP', label: 'British pound' },
-              filterMatchers: ['GBP', 'British pound', undefined, undefined],
+              value: { value: 'GBP', label: 'British pound', currency: 'gbp' },
+              filterMatchers: ['GBP', 'British pound', '', ''],
             },
           ],
         },
@@ -263,8 +263,8 @@ describe('Money Input', () => {
           options: [
             {
               type: 'option',
-              value: { value: 'EUR', label: 'Euro' },
-              filterMatchers: ['EUR', 'Euro', undefined, undefined],
+              value: { value: 'EUR', label: 'Euro', currency: 'eur' },
+              filterMatchers: ['EUR', 'Euro', '', ''],
             },
           ],
         },
@@ -274,33 +274,33 @@ describe('Money Input', () => {
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', label: 'British pound' },
-          filterMatchers: ['GBP', 'British pound', undefined, undefined],
+          value: { value: 'GBP', label: 'British pound', currency: 'gbp' },
+          filterMatchers: ['GBP', 'British pound', '', ''],
         },
         {
           type: 'option',
-          value: { value: 'EUR', label: 'Euro' },
-          filterMatchers: ['EUR', 'Euro', undefined, undefined],
+          value: { value: 'EUR', label: 'Euro', currency: 'eur' },
+          filterMatchers: ['EUR', 'Euro', '', ''],
         },
       ]);
     });
 
     it('searches by label', () => {
       currencies = [
-        { value: 'GBP', label: 'British pound' },
-        { value: 'EUR', label: 'Euro' },
+        { value: 'GBP', label: 'British pound', currency: 'gbp' },
+        { value: 'EUR', label: 'Euro', currency: 'eur' },
       ];
       component.setProps({ currencies });
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', label: 'British pound' },
-          filterMatchers: ['GBP', 'British pound', undefined, undefined],
+          value: { value: 'GBP', label: 'British pound', currency: 'gbp' },
+          filterMatchers: ['GBP', 'British pound', '', ''],
         },
         {
           type: 'option',
-          value: { value: 'EUR', label: 'Euro' },
-          filterMatchers: ['EUR', 'Euro', undefined, undefined],
+          value: { value: 'EUR', label: 'Euro', currency: 'eur' },
+          filterMatchers: ['EUR', 'Euro', '', ''],
         },
       ]);
 
@@ -308,28 +308,28 @@ describe('Money Input', () => {
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', label: 'British pound' },
-          filterMatchers: ['GBP', 'British pound', undefined, undefined],
+          value: { value: 'GBP', label: 'British pound', currency: 'gbp' },
+          filterMatchers: ['GBP', 'British pound', '', ''],
         },
       ]);
     });
 
     it('searches by note', () => {
       currencies = [
-        { value: 'GBP', note: 'Queen money' },
-        { value: 'EUR', note: 'Other money' },
+        { value: 'GBP', label: 'British pound', currency: 'gbp', note: 'Queen money' },
+        { value: 'EUR', label: 'Euro', currency: 'eur', note: 'Other money' },
       ];
       component.setProps({ currencies });
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', note: 'Queen money' },
-          filterMatchers: ['GBP', undefined, 'Queen money', undefined],
+          value: { value: 'GBP', label: 'British pound', currency: 'gbp', note: 'Queen money' },
+          filterMatchers: ['GBP', 'British pound', 'Queen money', ''],
         },
         {
           type: 'option',
-          value: { value: 'EUR', note: 'Other money' },
-          filterMatchers: ['EUR', undefined, 'Other money', undefined],
+          value: { value: 'EUR', label: 'Euro', currency: 'eur', note: 'Other money' },
+          filterMatchers: ['EUR', 'Euro', 'Other money', ''],
         },
       ]);
 
@@ -337,28 +337,48 @@ describe('Money Input', () => {
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'EUR', note: 'Other money' },
-          filterMatchers: ['EUR', undefined, 'Other money', undefined],
+          value: { value: 'EUR', label: 'Euro', currency: 'eur', note: 'Other money' },
+          filterMatchers: ['EUR', 'Euro', 'Other money', ''],
         },
       ]);
     });
 
     it('searches by searchable string', () => {
       currencies = [
-        { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-        { value: 'EUR', searchable: 'Europe' },
+        {
+          value: 'GBP',
+          label: 'British pound',
+          currency: 'gbp',
+          searchable: 'Great Britain, United Kingdom',
+        },
+        {
+          value: 'EUR',
+          label: 'Euro',
+          currency: 'eur',
+          searchable: 'Europe',
+        },
       ];
       component.setProps({ currencies });
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
+          value: {
+            value: 'GBP',
+            label: 'British pound',
+            currency: 'gbp',
+            searchable: 'Great Britain, United Kingdom',
+          },
+          filterMatchers: ['GBP', 'British pound', '', 'Great Britain, United Kingdom'],
         },
         {
           type: 'option',
-          value: { value: 'EUR', searchable: 'Europe' },
-          filterMatchers: ['EUR', undefined, undefined, 'Europe'],
+          value: {
+            value: 'EUR',
+            label: 'Euro',
+            currency: 'eur',
+            searchable: 'Europe',
+          },
+          filterMatchers: ['EUR', 'Euro', '', 'Europe'],
         },
       ]);
 
@@ -366,16 +386,31 @@ describe('Money Input', () => {
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
+          value: {
+            value: 'GBP',
+            label: 'British pound',
+            currency: 'gbp',
+            searchable: 'Great Britain, United Kingdom',
+          },
+          filterMatchers: ['GBP', 'British pound', '', 'Great Britain, United Kingdom'],
         },
       ]);
     });
 
     it('shows custom action option on every search when onCustomAction is passed to MoneyInput', () => {
       currencies = [
-        { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-        { value: 'EUR', searchable: 'Europe' },
+        {
+          value: 'GBP',
+          label: 'British pound',
+          currency: 'gbp',
+          searchable: 'Great Britain, United Kingdom',
+        },
+        {
+          value: 'EUR',
+          label: 'Euro',
+          currency: 'eur',
+          searchable: 'Europe',
+        },
       ];
       component.setProps({
         currencies,
@@ -385,13 +420,23 @@ describe('Money Input', () => {
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
+          value: {
+            value: 'GBP',
+            label: 'British pound',
+            currency: 'gbp',
+            searchable: 'Great Britain, United Kingdom',
+          },
+          filterMatchers: ['GBP', 'British pound', '', 'Great Britain, United Kingdom'],
         },
         {
           type: 'option',
-          value: { value: 'EUR', searchable: 'Europe' },
-          filterMatchers: ['EUR', undefined, undefined, 'Europe'],
+          value: {
+            value: 'EUR',
+            label: 'Euro',
+            currency: 'eur',
+            searchable: 'Europe',
+          },
+          filterMatchers: ['EUR', 'Euro', '', 'Europe'],
         },
       ]);
 
@@ -399,8 +444,13 @@ describe('Money Input', () => {
       expect(displayedCurrencies()).toStrictEqual([
         {
           type: 'option',
-          value: { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-          filterMatchers: ['GBP', undefined, undefined, 'Great Britain, United Kingdom'],
+          value: {
+            value: 'GBP',
+            label: 'British pound',
+            currency: 'gbp',
+            searchable: 'Great Britain, United Kingdom',
+          },
+          filterMatchers: ['GBP', 'British pound', '', 'Great Britain, United Kingdom'],
         },
       ]);
 
@@ -421,7 +471,7 @@ describe('Money Input', () => {
             note: 'Australian dollar',
             currency: 'aud',
           },
-          filterMatchers: ['AUD', 'AUD', 'Australian dollar', undefined],
+          filterMatchers: ['AUD', 'AUD', 'Australian dollar', ''],
         },
         {
           type: 'option',
@@ -515,7 +565,7 @@ describe('Money Input', () => {
   );
 
   it('passes the id given to the input element', () => {
-    expect(amountInput().prop('id')).toBeNull();
+    expect(amountInput().prop('id')).not.toBeDefined();
     component.setProps({ id: 'some-id' });
 
     expect(amountInput().prop('id')).toBe('some-id');
@@ -617,8 +667,18 @@ describe('Money Input', () => {
 
   it('shows custom action last when onCustomAction prop is passed to MoneyInput', () => {
     currencies = [
-      { value: 'GBP', searchable: 'Great Britain, United Kingdom' },
-      { value: 'EUR', searchable: 'Europe' },
+      {
+        value: 'GBP',
+        label: 'British pound',
+        currency: 'gbp',
+        searchable: 'Great Britain, United Kingdom',
+      },
+      {
+        value: 'EUR',
+        label: 'EUR',
+        currency: 'eur',
+        searchable: 'Europe',
+      },
     ];
     const onCustomActionMock = jest.fn();
     component.setProps({

package/src/moneyInput/MoneyInput.story.tsx

@@ -3,19 +3,16 @@ import { within, userEvent } from '@storybook/testing-library';
 import { Lock } from '@transferwise/icons';
 import React, { useState } from 'react';
 
-import MoneyInput from '.';
+import MoneyInput, { CurrencyOptionItem } from '.';
 
 export default {
   component: MoneyInput,
   title: 'Forms/MoneyInput',
   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 [selectedCurrency, setSelectedCurrency] = useState(args.selectedCurrency);
 
-    const handleOnCurrencyChange = (value: SelectedOption) => setSelectedCurrency(value);
+    const handleOnCurrencyChange = (value: CurrencyOptionItem) => setSelectedCurrency(value);
 
     return (
       <>
@@ -31,19 +28,14 @@ export default {
   args: {
     id: 'money-input',
     amount: 1000,
-    selectProps: {
-      buttonProps: {
-        'aria-label': 'Select currency',
-      },
-    },
+    onAmountChange: () => {},
+    onCurrencyChange: () => {},
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof MoneyInput>;
 
 type Story = StoryObj<typeof MoneyInput>;
 
-type SelectedOption = (typeof exampleCurrency)[keyof typeof exampleCurrency];
-
 const exampleCurrency = {
   eur: {
     value: 'EUR',
@@ -111,7 +103,7 @@ export const SingleCurrency: Story = {
   args: {
     currencies: [],
     selectedCurrency: exampleCurrency.eur,
-    onCurrencyChange: null,
+    onCurrencyChange: undefined,
   },
 };