@transferwise/components 45.26.3 → 45.28.0

package/src/moneyInput/MoneyInput.css

@@ -1 +1 @@
-.tw-money-input .tw-money-input__fixed-currency{padding-left:0!important}[dir=rtl] .tw-money-input .tw-money-input__fixed-currency{padding-left:0!important;padding-right:0!important}.tw-money-input .tw-money-input__fixed-currency.input-md .currency-flag{margin-bottom:2px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-md .currency-flag{margin-bottom:1px}.tw-money-input .tw-money-input__fixed-currency.input-lg .currency-flag{margin-bottom:4px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-lg .currency-flag{margin-bottom:3px}.tw-money-input .tw-money-input__fixed-currency .currency-flag{vertical-align:middle}.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{font-weight:var(--font-weight-normal)}.tw-money-input__keyline{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border:1px solid #0000001a;border:1px solid var(--color-border-neutral);height:24px;height:var(--size-24);margin-right:24px;margin-right:var(--size-24);transform:translateY(4px);width:2px}[dir=rtl] .tw-money-input__keyline{margin-left:24px;margin-left:var(--size-24);margin-right:0}.tw-money-input__fixed-currency{position:relative}.tw-money-input__fixed-currency span{color:#5d7079;color:var(--color-content-secondary)}__text{font-size:1rem;font-size:var(--font-size-16)}.input-group-sm .np-text-title-subsection,.input-group-sm .tw-money-input__text{font-size:.875rem;font-size:var(--font-size-14)}.input-group-md .np-text-title-subsection{font-size:1rem;font-size:var(--font-size-16)}.input-group-lg .tw-money-input__text{font-size:1.375rem;font-size:var(--font-size-22)}.tw-money-input .amount-currency-select-btn>.np-select>.btn{align-items:center;display:flex;max-height:50px}.tw-money-input .amount-currency-select-btn>.np-select>.btn span:not(.tw-icon){font-weight:400;font-weight:var(--font-weight-regular);min-width:2.6em}.tw-money-input .amount-currency-select-btn>.np-select>.btn .currency-flag{display:inline-block!important;margin-left:2px;margin-right:2px}.tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle{padding:0 16px;padding:0 var(--padding-small);text-align:center}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle,.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle:active,.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle:hover:not(:focus){box-shadow:none}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle .np-text-body-large{overflow:visible;text-overflow:clip}.np-theme-personal .tw-money-input .amount-currency-select-btn>.np-select>.np-dropdown-toggle .np-text-body-large .tw-money-input__text.np-text-title-subsection{font-weight:600;font-weight:var(--font-weight-semi-bold)}.tw-money-input .amount-currency-select-btn>.np-select>.np-btn>span.tw-icon{position:static}.np-theme-personal .tw-money-input__keyline{display:none}.np-theme-personal .tw-money-input.input-group-sm .form-control{min-height:34px}.np-theme-personal .tw-money-input.input-group-md .amount-currency-select-btn .btn-md,.np-theme-personal .tw-money-input.input-group-md .form-control{min-height:53px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{color:#768e9c;color:var(--color-content-tertiary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.np-theme-personal .tw-money-input button{border:none}.np-theme-personal .tw-money-input .np-text-title-subsection{color:var(--color-interactive-primary)}.np-theme-personal .tw-money-input .np-select-filter:focus{outline:none}.np-theme-personal .tw-money-input .amount-currency-select-btn .currency-flag{margin-right:0;margin-top:0}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-btn-md .np-text-body-large{margin-left:4px;margin-right:4px}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-btn-lg .np-text-body-large{margin-left:9px;margin-right:9px}
+.tw-money-input{display:flex}.tw-money-input .tw-money-input__fixed-currency{padding-left:0!important}[dir=rtl] .tw-money-input .tw-money-input__fixed-currency{padding-left:0!important;padding-right:0!important}.tw-money-input .tw-money-input__fixed-currency .np-text-title-subsection{color:#768e9c;color:var(--color-content-tertiary);font-weight:600;font-weight:var(--font-weight-semi-bold)}.tw-money-input.input-group-sm .form-control{min-height:34px}.tw-money-input.input-group-sm .np-text-title-subsection{font-size:.875rem;font-size:var(--font-size-14)}.tw-money-input.input-group-md .form-control{min-height:53px}.tw-money-input.input-group-md .np-text-title-subsection{font-size:1rem;font-size:var(--font-size-16)}.tw-money-input .input-group-addon{flex-shrink:0}.tw-money-input .input-group-addon:not(.amount-currency-select-btn){align-items:center;display:flex;flex-shrink:0;width:auto}.tw-money-input .amount-currency-select-btn{flex-shrink:0;line-height:normal;width:auto}.tw-money-input .np-button-input{border-bottom-right-radius:10px!important;border-bottom-right-radius:var(--radius-small)!important;border-top-right-radius:10px!important;border-top-right-radius:var(--radius-small)!important}.tw-money-input .np-button-input:not(.disabled,:disabled):focus-visible{border-radius:10px!important;border-radius:var(--radius-small)!important}.has-error .tw-money-input .np-button-input,.has-error .tw-money-input .np-button-input:not(.disabled,:disabled):hover,.tw-money-input .np-button-input,.tw-money-input .np-button-input:active,.tw-money-input .np-button-input:not(.disabled,:disabled):hover{box-shadow:none}.tw-money-input:not(.disabled,:disabled):not(.np-button-input:active):has(.np-button-input:focus-visible){box-shadow:inset 0 0 0 1px #c9cbce!important;box-shadow:inset 0 0 0 1px var(--color-interactive-secondary)!important}

package/src/moneyInput/MoneyInput.js

@@ -1,4 +1,5 @@
 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';
@@ -9,7 +10,7 @@ import { Key as keyValues } from '../common/key';
 import keyCodes from '../common/keyCodes';
 import { Size } from '../common/propsValues/size';
 import { Input } from '../inputs/Input';
-import Select from '../select';
+import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
@@ -23,7 +24,7 @@ const Currency = PropTypes.shape({
   note: PropTypes.string,
   searchable: PropTypes.string,
 });
-const CUSTOM_ACTION = 'CUSTOM_ACTION';
+
 const isNumberOrNull = (v) => isNumber(v) || isNull(v);
 
 const formatAmountIfSet = (amount, currency, locale, maxLengthOverride) => {
@@ -67,6 +68,7 @@ class MoneyInput extends Component {
     this.formatMessage = this.props.intl.formatMessage;
     this.state = {
       searchQuery: '',
+      selectedOption: this.props.selectedCurrency,
       formattedAmount: formatAmountIfSet(
         props.amount,
         props.selectedCurrency.currency,
@@ -165,14 +167,37 @@ 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)];
 
-    if (this.props.onCustomAction) {
-      selectOptions.push({ value: CUSTOM_ACTION, label: this.props.customActionLabel });
-    }
-
-    return selectOptions;
+    let formattedOptions = [];
+    let groupIndex = null;
+
+    selectOptions.forEach((item) => {
+      if (item.header) {
+        formattedOptions.push({
+          type: 'group',
+          label: item.header,
+          options: [],
+        });
+        groupIndex = formattedOptions.length - 1;
+      } else {
+        if (groupIndex === null) {
+          formattedOptions.push(this.mapOption(item));
+        } else {
+          formattedOptions[groupIndex]?.options.push(this.mapOption(item));
+        }
+      }
+    });
+    return formattedOptions;
   }
 
   setAmount() {
@@ -201,11 +226,14 @@ class MoneyInput extends Component {
 
   handleSelectChange = (value) => {
     this.handleSearchChange('');
+    this.setState({ selectedOption: value });
+    this.props.onCurrencyChange(value);
+  };
 
-    if (this.props.onCustomAction && value.value === CUSTOM_ACTION) {
+  handleCustomAction = () => {
+    this.handleSearchChange('');
+    if (this.props.onCustomAction) {
       this.props.onCustomAction();
-    } else {
-      this.props.onCurrencyChange(value);
     }
   };
 
@@ -225,9 +253,25 @@ class MoneyInput extends Component {
     const { selectedCurrency, onCurrencyChange, size, addon, id, selectProps, maxLengthOverride } =
       this.props;
     const selectOptions = this.getSelectOptions();
+
+    const getFirstOption = () => {
+      if (selectOptions.length !== 0) {
+        const firstOption = selectOptions[0];
+        if (firstOption.type === 'option') {
+          return firstOption.value;
+        }
+        if (firstOption.type === 'group' && firstOption.options.length !== 0) {
+          return firstOption.options[0].value;
+        }
+      }
+      return null;
+    };
+
+    const firstOption = getFirstOption();
+
     const isFixedCurrency =
       !this.state.searchQuery &&
-      ((selectOptions.length === 1 && selectOptions[0].currency === selectedCurrency.currency) ||
+      ((selectOptions.length === 1 && firstOption.currency === selectedCurrency.currency) ||
         !onCurrencyChange);
 
     const disabled = !this.props.onAmountChange;
@@ -279,16 +323,11 @@ class MoneyInput extends Component {
             )}
           >
             {(size === 'lg' || size === 'md') && (
-              <>
-                <i className={classNames(this.style('tw-money-input__keyline'))} />
-                <i
-                  className={classNames(
-                    this.style('currency-flag'),
-                    this.style(`currency-flag-${selectedCurrency.currency.toLowerCase()}`),
-                    this.style('m-r-2'),
-                  )}
-                />
-              </>
+              <span
+                className={classNames(this.style('money-input-currency-flag'), this.style('m-r-2'))}
+              >
+                <Flag code={selectedCurrency.currency.toLowerCase()} intrinsicSize={24} />
+              </span>
             )}
             <Title
               as="span"
@@ -305,30 +344,34 @@ class MoneyInput extends Component {
               this.style('amount-currency-select-btn'),
             )}
           >
-            <Select
-              id={id ? `${id}-select` : undefined}
-              classNames={this.props.classNames}
-              options={selectOptions}
-              selected={{
-                ...selectedCurrency,
-                label: (
-                  <Title
-                    as="span"
-                    type={Typography.TITLE_SUBSECTION}
-                    className="tw-money-input__text"
-                  >
-                    {selectedCurrency.label}
-                  </Title>
-                ),
-                note: null,
+            <SelectInput
+              items={selectOptions}
+              value={this.state.selectedOption}
+              compareValues="currency"
+              renderValue={(currency, withinTrigger) => {
+                return (
+                  <SelectInputOptionContent
+                    title={currency.label}
+                    note={withinTrigger ? undefined : currency.note}
+                    icon={<Flag code={currency.currency} intrinsicSize={24} />}
+                  />
+                );
               }}
+              renderFooter={
+                this.props.onCustomAction
+                  ? () => (
+                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                      <div role="button" tabIndex="0" onClick={this.handleCustomAction}>
+                        {this.props.customActionLabel}
+                      </div>
+                    )
+                  : null
+              }
               placeholder={this.formatMessage(messages.selectPlaceholder)}
-              searchPlaceholder={this.props.searchPlaceholder}
-              searchValue={this.state.searchQuery}
+              filterable
+              filterPlaceholder={this.props.searchPlaceholder}
+              disabled={disabled}
               size={size}
-              required
-              dropdownWidth={Size.LARGE}
-              inverse
               onChange={this.handleSelectChange}
               onSearchChange={this.handleSearchChange}
               {...selectProps}

package/src/moneyInput/MoneyInput.less

@@ -2,187 +2,68 @@
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 .tw-money-input {
+  display: flex;
   .tw-money-input__fixed-currency {
     .padding(left, 0) !important;
 
-    // let's plan on getting rid of these custom margins
-    // they center the flags for fixed money input currency flags
-    // there's got to be a better way to do it
-
-    &.input-md {
-      .currency-flag {
-        margin-bottom: 2px;
-
-        .np-theme-personal & {
-          margin-bottom: 1px;
-        }
-      }
-    }
-
-    &.input-lg {
-      .currency-flag {
-        margin-bottom: 4px;
-
-        .np-theme-personal & {
-          margin-bottom: 3px;
-        }
-      }
-    }
-
-    .currency-flag {
-      vertical-align: middle;
-    }
-
     .np-text-title-subsection {
-      font-weight: var(--font-weight-normal);
-    }
-  }
-
-  &__keyline {
-    width: 2px;
-    border: solid 1px var(--color-border-neutral);
-    height: var(--size-24);
-    background-color: var(--color-background-neutral);
-    .margin(right, var(--size-24));
-
-    transform: translateY(4px);
-  }
-
-  &__fixed-currency {
-    span {
-      color: var(--color-content-secondary);
+      color: var(--color-content-tertiary);
+      font-weight: var(--font-weight-semi-bold);
     }
-
-    position: relative;
   }
-}
-
-&__text {
-  font-size: var(--font-size-16);
-}
-
-&.input-group-sm {
-  .tw-money-input__text {
-    font-size: var(--font-size-14);
-  }
-
-  .np-text-title-subsection {
-    font-size: var(--font-size-14);
-  }
-}
-
-&.input-group-md {
-  .np-text-title-subsection {
-    font-size: var(--font-size-16);
-  }
-}
-
-&.input-group-lg {
-  .tw-money-input__text {
-    font-size: var(--font-size-22);
-  }
-}
-
-.tw-money-input .amount-currency-select-btn > .np-select > .btn {
-  display: flex;
-  align-items: center;
-  max-height: 50px;
 
-  span:not(.tw-icon) {
-    min-width: 2.6em; // fits a 3 letter string, ZMW being the longest one
-    font-weight: var(--font-weight-regular);
-  }
-
-  .currency-flag {
-    margin-right: 2px;
-    margin-left: 2px;
-    display: inline-block !important; // override a hidden-xs in select option which has too much logic around it
-  }
-}
-
-.tw-money-input .amount-currency-select-btn > .np-select > .np-dropdown-toggle {
-  padding: 0 var(--padding-small);
-  text-align: center;
-
-  .np-theme-personal & {
-    box-shadow: none;
-
-    &:hover:not(:focus),
-    &:active {
-      box-shadow: none;
-    }
-
-    .np-text-body-large {
-      .tw-money-input__text.np-text-title-subsection {
-        font-weight: var(--font-weight-semi-bold);
-      }
-      overflow: visible;
-      text-overflow: clip;
-    }
-  }
-}
-
-.tw-money-input .amount-currency-select-btn > .np-select > .np-btn > span.tw-icon {
-  position: static;
-}
-
-.np-theme-personal {
-  .tw-money-input__keyline {
-    display: none;
-  }
-
-  .tw-money-input.input-group-sm {
+  &.input-group-sm {
     .form-control {
       min-height: 34px;
     }
+    .np-text-title-subsection {
+      font-size: var(--font-size-14);
+    }
   }
 
-  .tw-money-input.input-group-md {
-    .form-control,
-    .amount-currency-select-btn .btn-md {
+  &.input-group-md {
+    .form-control {
       min-height: 53px;
     }
+    .np-text-title-subsection {
+      font-size: var(--font-size-16);
+    }
   }
 
-  .tw-money-input {
-    .tw-money-input__fixed-currency {
-      .np-text-title-subsection {
-        color: var(--color-content-tertiary);
-        font-weight: var(--font-weight-semi-bold);
-      }
+  .input-group-addon {
+    flex-shrink: 0;
+    &:not(.amount-currency-select-btn) {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      width: auto;
     }
+  }
+  
+  .amount-currency-select-btn {
+    flex-shrink: 0;
+    width: auto;
+    line-height: normal;
+  }
 
-    button {
-      border: none;
-    }
+  .np-button-input {
+    border-top-right-radius: var(--radius-small) !important;
+    border-bottom-right-radius: var(--radius-small) !important;
 
-    .np-text-title-subsection {
-      color: var(--color-interactive-primary);
+    &:not(.disabled,:disabled):focus-visible {
+      border-radius: var(--radius-small) !important;
     }
 
-    .np-select-filter:focus {
-      outline: none;
+    &,
+    &:active,
+    &:not(.disabled,:disabled):hover,
+    .has-error &,
+    .has-error &:not(.disabled,:disabled):hover {
+      box-shadow: none;
     }
+  }
 
-    .amount-currency-select-btn {
-      .currency-flag {
-        margin-right: 0;
-        margin-top: 0;
-      }
-
-      .np-btn-md {
-        .np-text-body-large {
-          margin-left: 4px;
-          margin-right: 4px;
-        }
-      }
-
-      .np-btn-lg {
-        .np-text-body-large {
-          margin-left: 9px;
-          margin-right: 9px;
-        }
-      }
-    }
+  &:not(.disabled,:disabled):not(.np-button-input:active):has(.np-button-input:focus-visible) {
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary) !important;
   }
 }

package/src/moneyInput/MoneyInput.rtl.spec.js

@@ -0,0 +1,71 @@
+import { mockMatchMedia, mockResizeObserver, render, userEvent } from '../test-utils';
+
+import MoneyInput from './MoneyInput';
+
+mockMatchMedia();
+mockResizeObserver();
+
+describe('MoneyInput', () => {
+  const currencies = [
+    {
+      header: 'Popular currencies',
+    },
+    {
+      value: 'EUR',
+      label: 'EUR',
+      note: 'Euro',
+      currency: 'eur',
+      searchable: 'Spain, Germany, France, Austria, Estonia',
+    },
+    {
+      value: 'USD',
+      label: 'USD',
+      note: 'United States dollar',
+      currency: 'usd',
+      searchable: 'Hong Kong, Saudi Arabia',
+    },
+    {
+      value: 'GBP',
+      label: 'GBP',
+      note: 'British pound',
+      currency: 'gbp',
+      searchable: 'England, Scotland, Wales',
+    },
+    {
+      header: 'Some other currencies',
+    },
+    {
+      value: 'CAD',
+      label: 'CAD',
+      note: 'Canadian dollar',
+      currency: 'cad',
+    },
+    {
+      value: 'AUD',
+      label: 'AUD',
+      note: 'Australian dollar',
+      currency: 'aud',
+    },
+  ];
+  const props = {
+    currencies,
+    selectedCurrency: currencies[1],
+    amount: 1000,
+    onAmountChange: jest.fn(),
+    onCurrencyChange: jest.fn(),
+  };
+  it.each([
+    ['asd', ''],
+    ['1a2s3d', '123'],
+    ['±!@#$^*_+?><', ''],
+    ['1±!@#$^*,_+?><2', '1,2'],
+    ['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} />);
+
+    const input = container.querySelector('input');
+    userEvent.type(input, testValue);
+    expect(input).toHaveValue(expectedValue);
+  });
+});