@transferwise/components 46.4.0 → 46.6.0

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

@@ -1,48 +1,79 @@
 import { isEmpty, isNumber, isNull } from '@transferwise/neptune-validation';
 import { Flag } from '@wise/art';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
 
 import { Typography } from '../common';
 import { Key as keyValues } from '../common/key';
 import keyCodes from '../common/keyCodes';
-import { Size } from '../common/propsValues/size';
+import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common/propsValues/size';
 import { Input } from '../inputs/Input';
-import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
+import {
+  SelectInput,
+  SelectInputItem,
+  SelectInputOptionContent,
+  SelectInputOptionItem,
+  SelectInputProps,
+} from '../inputs/SelectInput';
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
 import { formatAmount, parseAmount } from './currencyFormatting';
 
-const Currency = PropTypes.shape({
-  header: PropTypes.string,
-  value: PropTypes.string,
-  label: PropTypes.string,
-  currency: PropTypes.string,
-  note: PropTypes.string,
-  searchable: PropTypes.string,
-});
+export interface CurrencyOptionItem {
+  header?: never;
+  value: string;
+  label: string;
+  currency: string;
+  note?: string;
+  searchable?: string;
+}
 
-const isNumberOrNull = (v) => isNumber(v) || isNull(v);
+export interface CurrencyHeaderItem {
+  header: string;
+}
 
-const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
+export type CurrencyItem = CurrencyOptionItem | CurrencyHeaderItem;
+
+const isNumberOrNull = (v: unknown): v is number | null => isNumber(v) || isNull(v);
+
+const formatAmountIfSet = ({
+  amount,
+  currency,
+  locale,
+  maxLengthOverride,
+}: {
+  amount: number | null | undefined;
+  currency: string;
+  locale: string;
+  maxLengthOverride?: number;
+}) => {
   if (maxLengthOverride) {
-    return amount || '';
+    return amount != null ? String(amount) : '';
   } else {
     return typeof amount === 'number' ? formatAmount(amount, currency, locale) : '';
   }
 };
 
-const parseNumber = (amount, currency, locale, maxLengthOverride) => {
+const parseNumber = ({
+  amount,
+  currency,
+  locale,
+  maxLengthOverride,
+}: {
+  amount: string;
+  currency: string;
+  locale: string;
+  maxLengthOverride?: number;
+}) => {
   if (!maxLengthOverride) {
     return parseAmount(amount, currency, locale);
   }
   if (maxLengthOverride && amount.length > maxLengthOverride) {
     return 0;
   }
-  return +amount;
+  return Number(amount);
 };
 
 const inputKeyCodeAllowlist = new Set([
@@ -61,39 +92,76 @@ const inputKeyCodeAllowlist = new Set([
 
 const inputKeyAllowlist = new Set([keyValues.PERIOD, keyValues.COMMA]);
 
-class MoneyInput extends Component {
-  constructor(props) {
+export interface MoneyInputProps extends WrappedComponentProps {
+  id?: string;
+  currencies: readonly CurrencyItem[];
+  selectedCurrency: CurrencyOptionItem;
+  onCurrencyChange?: (value: CurrencyOptionItem) => void;
+  placeholder?: number;
+  amount: number | null;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  onAmountChange?: (value: number | null) => void;
+  addon?: React.ReactNode;
+  searchPlaceholder?: string;
+  /**
+   * Allows the consumer to react to searching, while the search itself is handled internally.
+   */
+  onSearchChange?: (value: { searchQuery: string; filteredOptions: CurrencyItem[] }) => void;
+  customActionLabel?: React.ReactNode;
+  onCustomAction?: () => void;
+  classNames?: Record<string, string>;
+  selectProps?: Partial<SelectInputProps<CurrencyOptionItem>>;
+  maxLengthOverride?: number;
+}
+
+interface MoneyInputState {
+  searchQuery: string;
+  formattedAmount: string;
+  locale: string;
+}
+
+class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
+  declare props: MoneyInputProps &
+    Required<Pick<MoneyInputProps, keyof typeof MoneyInput.defaultProps>>;
+
+  static defaultProps = {
+    size: Size.LARGE,
+    classNames: {},
+    selectProps: {},
+  } satisfies Partial<MoneyInputProps>;
+
+  amountFocused = false;
+
+  constructor(props: MoneyInputProps) {
     super(props);
-    const { locale } = this.props.intl;
-    this.formatMessage = this.props.intl.formatMessage;
     this.state = {
       searchQuery: '',
-      formattedAmount: formatAmountIfSet(
-        props.amount,
-        props.selectedCurrency.currency,
-        locale,
-        props.maxLengthOverride,
-      ),
-      locale,
+      formattedAmount: formatAmountIfSet({
+        amount: props.amount,
+        currency: props.selectedCurrency.currency,
+        locale: props.intl.locale,
+        maxLengthOverride: props.maxLengthOverride,
+      }),
+      locale: props.intl.locale,
     };
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({ locale: nextProps?.intl?.locale });
+  UNSAFE_componentWillReceiveProps(nextProps: MoneyInputProps) {
+    this.setState({ locale: nextProps.intl.locale });
 
     if (!this.amountFocused) {
       this.setState({
-        formattedAmount: formatAmountIfSet(
-          nextProps.amount,
-          nextProps.selectedCurrency.currency,
-          nextProps?.intl?.locale,
-          nextProps.maxLengthOverride,
-        ),
+        formattedAmount: formatAmountIfSet({
+          amount: nextProps.amount,
+          currency: nextProps.selectedCurrency.currency,
+          locale: nextProps.intl.locale,
+          maxLengthOverride: nextProps.maxLengthOverride,
+        }),
       });
     }
   }
 
-  isInputAllowedForKeyEvent = (event) => {
+  isInputAllowedForKeyEvent = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const { keyCode, metaKey, key, ctrlKey } = event;
     const isNumberKey = isNumber(parseInt(key, 10));
 
@@ -106,54 +174,54 @@ class MoneyInput extends Component {
     );
   };
 
-  handleKeyDown = (event) => {
+  handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
     if (!this.isInputAllowedForKeyEvent(event)) {
       event.preventDefault();
     }
   };
 
-  handlePaste = (event) => {
-    const paste = (event.clipboardData || window.clipboardData).getData('text');
+  handlePaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    const paste = event.clipboardData.getData('text');
     const { locale } = this.state;
     const parsed = isEmpty(paste)
       ? null
-      : parseNumber(
-          paste,
-          this.props.selectedCurrency.currency,
-          locale,
-          this.props.maxLengthOverride,
-        );
+      : parseNumber({
+          amount: paste,
+          currency: this.props.selectedCurrency.currency,
+          locale: locale,
+          maxLengthOverride: this.props.maxLengthOverride,
+        });
 
     if (isNumberOrNull(parsed)) {
       this.setState({
-        formattedAmount: formatAmountIfSet(
-          parsed,
-          this.props.selectedCurrency.currency,
-          locale,
-          this.props.maxLengthOverride,
-        ),
+        formattedAmount: formatAmountIfSet({
+          amount: parsed,
+          currency: this.props.selectedCurrency.currency,
+          locale: locale,
+          maxLengthOverride: this.props.maxLengthOverride,
+        }),
       });
-      this.props.onAmountChange(parsed);
+      this.props.onAmountChange?.(parsed);
     }
 
     event.preventDefault();
   };
 
-  onAmountChange = (event) => {
+  onAmountChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const { value } = event.target;
     this.setState({
       formattedAmount: value,
     });
     const parsed = isEmpty(value)
       ? null
-      : parseNumber(
-          value,
-          this.props.selectedCurrency.currency,
-          this.state.locale,
-          this.props.maxLengthOverride,
-        );
+      : parseNumber({
+          amount: value,
+          currency: this.props.selectedCurrency.currency,
+          locale: this.state.locale,
+          maxLengthOverride: this.props.maxLengthOverride,
+        });
     if (isNumberOrNull(parsed)) {
-      this.props.onAmountChange(parsed);
+      this.props.onAmountChange?.(parsed);
     }
   };
 
@@ -166,34 +234,26 @@ class MoneyInput extends Component {
     this.amountFocused = true;
   };
 
-  mapOption = (item) => {
-    return {
-      type: 'option',
-      value: item,
-      filterMatchers: [item.value, item.label, item.note, item.searchable],
-    };
-  };
-
   getSelectOptions() {
-    const selectOptions = [...filterOptionsForQuery(this.props.currencies, this.state.searchQuery)];
+    const selectOptions = filterCurrenciesForQuery(this.props.currencies, this.state.searchQuery);
 
-    let formattedOptions = [];
-    let groupIndex = null;
+    const formattedOptions: SelectInputItem<CurrencyOptionItem>[] = [];
+    let currentGroupOptions: SelectInputOptionItem<CurrencyOptionItem>[] | undefined;
 
     selectOptions.forEach((item) => {
-      if (item.header) {
+      if (item.header != null) {
+        currentGroupOptions = [];
         formattedOptions.push({
           type: 'group',
           label: item.header,
-          options: [],
+          options: currentGroupOptions,
         });
-        groupIndex = formattedOptions.length - 1;
       } else {
-        if (groupIndex === null) {
-          formattedOptions.push(this.mapOption(item));
-        } else {
-          formattedOptions[groupIndex]?.options.push(this.mapOption(item));
-        }
+        (currentGroupOptions ?? formattedOptions).push({
+          type: 'option',
+          value: item,
+          filterMatchers: [item.value, item.label, item.note ?? '', item.searchable ?? ''],
+        });
       }
     });
 
@@ -202,51 +262,47 @@ class MoneyInput extends Component {
 
   setAmount() {
     this.setState((previousState) => {
-      const parsed = parseNumber(
-        previousState.formattedAmount,
-        this.props.selectedCurrency.currency,
-        previousState.locale,
-        this.props.maxLengthOverride,
-      );
+      const parsed = parseNumber({
+        amount: previousState.formattedAmount,
+        currency: this.props.selectedCurrency.currency,
+        locale: previousState.locale,
+        maxLengthOverride: this.props.maxLengthOverride,
+      });
       if (!isNumberOrNull(parsed)) {
         return {
           formattedAmount: previousState.formattedAmount,
         };
       }
       return {
-        formattedAmount: formatAmountIfSet(
-          parsed,
-          this.props.selectedCurrency.currency,
-          previousState.locale,
-          this.props.maxLengthOverride,
-        ),
+        formattedAmount: formatAmountIfSet({
+          amount: parsed,
+          currency: this.props.selectedCurrency.currency,
+          locale: previousState.locale,
+          maxLengthOverride: this.props.maxLengthOverride,
+        }),
       };
     });
   }
 
-  handleSelectChange = (value) => {
+  handleSelectChange = (value: CurrencyOptionItem) => {
     this.handleSearchChange('');
-    this.props.onCurrencyChange(value);
+    this.props.onCurrencyChange?.(value);
   };
 
   handleCustomAction = () => {
     this.handleSearchChange('');
-    if (this.props.onCustomAction) {
-      this.props.onCustomAction();
-    }
+    this.props.onCustomAction?.();
   };
 
-  handleSearchChange = (searchQuery) => {
+  handleSearchChange = (searchQuery: string) => {
     this.setState({ searchQuery });
-    if (this.props.onSearchChange) {
-      this.props.onSearchChange({
-        searchQuery,
-        filteredOptions: filterOptionsForQuery(this.props.currencies, searchQuery),
-      });
-    }
+    this.props.onSearchChange?.({
+      searchQuery,
+      filteredOptions: filterCurrenciesForQuery(this.props.currencies, searchQuery),
+    });
   };
 
-  style = (className) => this.props.classNames[className] || className;
+  style = (className: string) => this.props.classNames[className] || className;
 
   render() {
     const { selectedCurrency, onCurrencyChange, size, addon, id, selectProps, maxLengthOverride } =
@@ -292,12 +348,12 @@ class MoneyInput extends Component {
           inputMode="decimal"
           disabled={disabled}
           maxLength={maxLengthOverride}
-          placeholder={formatAmountIfSet(
-            this.props.placeholder,
-            this.props.selectedCurrency.currency,
-            this.state.locale,
-            this.props.maxLengthOverride,
-          )}
+          placeholder={formatAmountIfSet({
+            amount: this.props.placeholder,
+            currency: this.props.selectedCurrency.currency,
+            locale: this.state.locale,
+            maxLengthOverride: this.props.maxLengthOverride,
+          })}
           autoComplete="off"
           onKeyDown={this.handleKeyDown}
           onChange={this.onAmountChange}
@@ -364,13 +420,13 @@ class MoneyInput extends Component {
                 this.props.onCustomAction
                   ? () => (
                       // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-                      <div role="button" tabIndex="0" onClick={this.handleCustomAction}>
+                      <div role="button" tabIndex={0} onClick={this.handleCustomAction}>
                         {this.props.customActionLabel}
                       </div>
                     )
-                  : null
+                  : undefined
               }
-              placeholder={this.formatMessage(messages.selectPlaceholder)}
+              placeholder={this.props.intl.formatMessage(messages.selectPlaceholder)}
               filterable
               filterPlaceholder={this.props.searchPlaceholder}
               disabled={disabled}
@@ -388,33 +444,36 @@ class MoneyInput extends Component {
   }
 }
 
-function filterOptionsForQuery(options, query) {
+function filterCurrenciesForQuery(
+  currencies: readonly CurrencyItem[],
+  query: string,
+): CurrencyItem[] {
   if (!query) {
-    return options;
+    return [...currencies];
   }
 
+  const options = currencies.filter(
+    (option): option is CurrencyOptionItem => option.header == null,
+  );
   const filteredOptions = removeDuplicateValueOptions(options).filter((option) =>
-    isCurrencyOptionAndFitsQuery(option, query),
+    currencyOptionFitsQuery(option, query),
   );
 
   return sortOptionsLabelsToFirst(filteredOptions, query);
 }
 
-function removeDuplicateValueOptions(options) {
-  const result = [];
-  const resultValues = [];
-
-  options.forEach((option) => {
-    if (option.value && !resultValues.includes(option.value)) {
-      result.push(option);
-      resultValues.push(option.value);
+function removeDuplicateValueOptions(options: CurrencyOptionItem[]) {
+  const uniqueValues = new Set<string>();
+  return options.filter((option) => {
+    if (!uniqueValues.has(option.value)) {
+      uniqueValues.add(option.value);
+      return true;
     }
+    return false;
   });
-
-  return result;
 }
 
-function isCurrencyOptionAndFitsQuery(option, query) {
+function currencyOptionFitsQuery(option: CurrencyOptionItem, query: string) {
   if (!option.value) {
     return false;
   }
@@ -426,11 +485,11 @@ function isCurrencyOptionAndFitsQuery(option, query) {
   );
 }
 
-function contains(property, query) {
+function contains(property: string | undefined, query: string) {
   return property && property.toLowerCase().includes(query.toLowerCase());
 }
 
-function sortOptionsLabelsToFirst(options, query) {
+function sortOptionsLabelsToFirst(options: CurrencyOptionItem[], query: string) {
   return options.sort((first, second) => {
     const firstContains = contains(first.label, query);
     const secondContains = contains(second.label, query);
@@ -448,47 +507,4 @@ function sortOptionsLabelsToFirst(options, query) {
   });
 }
 
-MoneyInput.propTypes = {
-  id: PropTypes.string,
-  currencies: PropTypes.arrayOf(Currency).isRequired,
-  selectedCurrency: Currency.isRequired,
-  onCurrencyChange: PropTypes.func,
-  placeholder: PropTypes.number,
-  amount: PropTypes.number,
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  onAmountChange: PropTypes.func,
-  addon: PropTypes.node,
-  searchPlaceholder: PropTypes.string,
-  /**
-   * Allows the consumer to react to searching, while the search itself is handled internally. Called with `{ searchQuery: string, filteredOptions: Currency[]  }`
-   */
-  onSearchChange: PropTypes.func,
-  customActionLabel: PropTypes.node,
-  onCustomAction: PropTypes.func,
-  classNames: PropTypes.objectOf(PropTypes.string),
-  selectProps: PropTypes.object,
-  maxLengthOverride: PropTypes.number,
-};
-
-MoneyInput.defaultProps = {
-  id: null,
-  size: Size.LARGE,
-  addon: null,
-  searchPlaceholder: '',
-  onSearchChange: undefined,
-  onCurrencyChange: null,
-  placeholder: null,
-  amount: null,
-  onAmountChange: null,
-  customActionLabel: '',
-  onCustomAction: null,
-  classNames: {},
-  selectProps: {},
-  maxLengthOverride: null,
-};
-
-// this export is necessary for react-to-typescript-definitions
-// to be able to properly generate TS types, this is due to us wrapping this component in `injectIntl` before exporting
-export { MoneyInput };
-
 export default injectIntl(MoneyInput);

package/src/moneyInput/{currencyFormatting.spec.js → currencyFormatting.spec.ts}

@@ -1,12 +1,12 @@
 import { formatAmount, parseAmount } from './currencyFormatting';
 
 jest.mock('@transferwise/formatting', () => ({
-  formatAmount: (number) => `formatted ${number}`,
+  formatAmount: (number: number) => `formatted ${number}`,
 }));
 
 describe('Number formatting', () => {
   it('uses @transferwise/formatting for formatting numbers', () => {
-    expect(formatAmount(100)).toBe('formatted 100');
+    expect(formatAmount(100, 'gbp')).toBe('formatted 100');
   });
 
   it('parses localized numbers', () => {

package/src/moneyInput/{currencyFormatting.js → currencyFormatting.ts}

@@ -5,7 +5,7 @@ import { DEFAULT_LOCALE } from '../common/locale';
 export { formatAmount };
 
 // TODO: do not duplicate this between formatting and components
-const currencyDecimals = {
+const currencyDecimals: Record<string, number> = {
   BIF: 0,
   BYR: 0,
   CLP: 0,
@@ -41,30 +41,27 @@ function isNumberLocaleSupported() {
   return numberString === '1,234';
 }
 
-function getValidLocale(locale) {
+function getValidLocale(locale: string) {
   try {
     const noUnderscoreLocale = locale.replace(/_/, '-');
 
     Intl.NumberFormat(noUnderscoreLocale);
     return noUnderscoreLocale;
   } catch {
-    return 'en-GB';
+    return DEFAULT_LOCALE;
   }
 }
 
-function getCurrencyDecimals(currency = '') {
+function getCurrencyDecimals(currency: string) {
   const upperCaseCurrency = currency.toUpperCase();
-  if (Object.prototype.hasOwnProperty.call(currencyDecimals, upperCaseCurrency)) {
-    return currencyDecimals[upperCaseCurrency];
-  }
-  return DEFAULT_CURRENCY_DECIMALS;
+  return currencyDecimals[upperCaseCurrency] ?? DEFAULT_CURRENCY_DECIMALS;
 }
 
-function getDecimalSeparator(locale) {
+function getDecimalSeparator(locale: string) {
   return isNumberLocaleSupported() ? (1.1).toLocaleString(locale)[1] : '.';
 }
 
-export function parseAmount(number, currency, locale) {
+export function parseAmount(number: string, currency: string, locale = DEFAULT_LOCALE) {
   const validLocale = getValidLocale(locale);
 
   const precision = getCurrencyDecimals(currency);

package/src/moneyInput/index.ts

@@ -0,0 +1,7 @@
+export type {
+  CurrencyHeaderItem,
+  CurrencyItem,
+  CurrencyOptionItem,
+  MoneyInputProps,
+} from './MoneyInput';
+export { default } from './MoneyInput';

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.spec.js

@@ -1,5 +1,7 @@
 import { shallow } from 'enzyme';
 
+import { TextArea } from '../inputs/TextArea';
+
 import TextareaWithDisplayFormat from '.';
 
 describe('TextareaWithDisplayFormat', () => {
@@ -10,6 +12,6 @@ describe('TextareaWithDisplayFormat', () => {
       .find('WithDisplayFormat')
       .renderProp('render')({ value: 'test' });
 
-    expect(view.find('textarea').props('value')).toStrictEqual({ value: 'test' });
+    expect(view.find(TextArea).props('value')).toStrictEqual({ value: 'test' });
   });
 });

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react';
+
+import { userEvent, within } from '../test-utils';
+
+import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
+
+export default {
+  component: TextareaWithDisplayFormat,
+  title: 'Forms/TextareaWithDisplayFormat',
+};
+
+type Story = StoryObj<typeof TextareaWithDisplayFormat>;
+
+export const Basic: Story = {
+  render: (args) => {
+    return (
+      <>
+        <TextareaWithDisplayFormat
+          value="0000"
+          displayPattern="**** - **** - ****"
+          onChange={console.log}
+        />
+      </>
+    );
+  },
+  // intentionally use interactive typing (over init value via `value` prop)
+  // to trigger event handlers in the component
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    userEvent.type(canvas.getByRole('textbox'), '111122223333');
+  },
+};

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.tsx

@@ -0,0 +1,13 @@
+import { TextArea, type TextAreaProps } from '../inputs/TextArea';
+import WithDisplayFormat, { type WithDisplayFormatProps } from '../withDisplayFormat';
+
+export interface TextareaWithDisplayFormatProps extends Omit<WithDisplayFormatProps, 'render'> {}
+
+const TextareaWithDisplayFormat = (props: TextareaWithDisplayFormatProps) => (
+  <WithDisplayFormat<TextAreaProps>
+    {...props}
+    render={(renderProps) => <TextArea {...renderProps} />}
+  />
+);
+
+export default TextareaWithDisplayFormat;

package/src/textareaWithDisplayFormat/index.ts

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