@transferwise/components 0.0.0-experimental-50e1f17 → 0.0.0-experimental-08d336e

package/src/modal/Modal.rtl.spec.js

@@ -1,8 +1,10 @@
 import { Position } from '../common';
-import { render, fireEvent, screen } from '../test-utils';
+import { render, fireEvent, screen, mockMatchMedia } from '../test-utils';
 
 import Modal from './Modal';
 
+mockMatchMedia();
+
 describe('Modal', () => {
   const props = {
     onClose: jest.fn(),

package/src/modal/Modal.spec.js

@@ -1,10 +1,12 @@
 import { mount } from 'enzyme';
 
 import { Title } from '..';
+import { mockMatchMedia } from '../test-utils';
 
 import Modal from './Modal';
 
 jest.useFakeTimers();
+mockMatchMedia();
 jest.mock('../common');
 
 const defaultLocale = 'en-GB';

package/src/modal/Modal.tsx

@@ -52,7 +52,7 @@ const Modal = ({
 }: ModalProps) => {
   const checkSpecialClasses = (classToCheck: string) =>
     className?.split(' ').includes(classToCheck);
-  const { isMobile, isMedium: isTablet } = useLayout();
+  const { isMedium } = useLayout();
 
   // These should be replaced with props in breaking change.
   const isCompact = checkSpecialClasses('compact');
@@ -60,7 +60,7 @@ const Modal = ({
 
   const contentReference = useRef<HTMLDivElement>(null);
 
-  return isMobile || isTablet ? (
+  return !isMedium ? (
     <Drawer
       open={open}
       headerTitle={title}

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 .money-input-currency-flag{margin-bottom:2px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-md .money-input-currency-flag{margin-bottom:1px}.tw-money-input .tw-money-input__fixed-currency.input-lg .money-input-currency-flag{margin-bottom:4px}.np-theme-personal .tw-money-input .tw-money-input__fixed-currency.input-lg .money-input-currency-flag{margin-bottom:3px}.tw-money-input .tw-money-input__fixed-currency .money-input-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-input-group>.np-form-control{lol:"money-input";align-items:center;display:flex;max-height:50px}.tw-money-input .amount-currency-select-btn>.np-input-group>.np-form-control 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-input-group>.np-form-control .money-input-currency-flag{display:inline-block!important;margin-left:2px;margin-right:2px}.tw-money-input .amount-currency-select-btn>.np-input-group>.np-button-input{box-shadow:none;padding:0 16px;padding:0 var(--padding-small);text-align:center}.tw-money-input .amount-currency-select-btn>.np-input-group>.np-button-input:active,.tw-money-input .amount-currency-select-btn>.np-input-group>.np-button-input:hover:not(:focus){box-shadow:none}.tw-money-input .amount-currency-select-btn>.np-input-group>.np-button-input .np-text-body-large{overflow:visible;text-overflow:clip}.tw-money-input .amount-currency-select-btn>.np-input-group>.np-form-control>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 .np-form-control--size-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 .amount-currency-select-btn .money-input-currency-flag{margin-right:0;margin-top:0}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-form-control--size-md .np-text-body-large{margin-left:4px;margin-right:4px}.np-theme-personal .tw-money-input .amount-currency-select-btn .np-form-control--size-lg .np-text-body-large{margin-left:9px;margin-right:9px}
+.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}

package/src/moneyInput/MoneyInput.js

@@ -1,5 +1,4 @@
 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';
@@ -10,7 +9,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 { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
+import Select from '../select';
 import Title from '../title';
 
 import messages from './MoneyInput.messages';
@@ -24,7 +23,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) => {
@@ -68,7 +67,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,
@@ -167,37 +165,14 @@ 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)];
 
-    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;
+    if (this.props.onCustomAction) {
+      selectOptions.push({ value: CUSTOM_ACTION, label: this.props.customActionLabel });
+    }
+
+    return selectOptions;
   }
 
   setAmount() {
@@ -226,14 +201,11 @@ class MoneyInput extends Component {
 
   handleSelectChange = (value) => {
     this.handleSearchChange('');
-    this.setState({ selectedOption: value });
-    this.props.onCurrencyChange(value);
-  };
 
-  handleCustomAction = () => {
-    this.handleSearchChange('');
-    if (this.props.onCustomAction) {
+    if (this.props.onCustomAction && value.value === CUSTOM_ACTION) {
       this.props.onCustomAction();
+    } else {
+      this.props.onCurrencyChange(value);
     }
   };
 
@@ -253,25 +225,10 @@ class MoneyInput extends Component {
     const { selectedCurrency, onCurrencyChange, size, addon, id, selectProps, maxLengthOverride } =
       this.props;
     const selectOptions = this.getSelectOptions();
-
-    const firstOptionValue = () => {
-      if (selectOptions.length !== 0) {
-        const firstOption = selectOptions[0];
-        if (firstOption.type === 'option') {
-          return firstOption.value.value;
-        }
-        if (firstOption.type === 'group' && firstOption.options.length !== 0) {
-          return firstOption.options[0].value.value;
-        }
-      }
-      return null;
-    };
-
-    const firstOption = firstOptionValue();
-
     const isFixedCurrency =
-      (selectOptions.length === 1 && firstOption === selectedCurrency.currency) ||
-      !onCurrencyChange;
+      !this.state.searchQuery &&
+      ((selectOptions.length === 1 && selectOptions[0].currency === selectedCurrency.currency) ||
+        !onCurrencyChange);
 
     const disabled = !this.props.onAmountChange;
     return (
@@ -348,35 +305,30 @@ class MoneyInput extends Component {
               this.style('amount-currency-select-btn'),
             )}
           >
-            <SelectInput
-              items={selectOptions}
-              value={this.state.selectedOption}
-              renderValue={(currency, withinTrigger) => {
-                return (
-                  <SelectInputOptionContent
-                    title={currency.label}
-                    note={withinTrigger ? undefined : currency.note}
-                    icon={
-                      <span className={classNames('money-input-currency-flag')}>
-                        <Flag code={currency.value} intrinsicSize={24} />
-                      </span>
-                    }
-                  />
-                );
+            <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,
               }}
-              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)}
-              filterable
-              filterPlaceholder={this.props.searchPlaceholder}
-              disabled={disabled}
+              searchPlaceholder={this.props.searchPlaceholder}
+              searchValue={this.state.searchQuery}
               size={size}
+              required
+              dropdownWidth={Size.LARGE}
+              inverse
               onChange={this.handleSelectChange}
               onSearchChange={this.handleSearchChange}
               {...selectProps}

package/src/moneyInput/MoneyInput.less

@@ -10,7 +10,7 @@
     // there's got to be a better way to do it
 
     &.input-md {
-      .money-input-currency-flag {
+      .currency-flag {
         margin-bottom: 2px;
 
         .np-theme-personal & {
@@ -20,7 +20,7 @@
     }
 
     &.input-lg {
-      .money-input-currency-flag {
+      .currency-flag {
         margin-bottom: 4px;
 
         .np-theme-personal & {
@@ -29,7 +29,7 @@
       }
     }
 
-    .money-input-currency-flag {
+    .currency-flag {
       vertical-align: middle;
     }
 
@@ -83,8 +83,7 @@
   }
 }
 
-.tw-money-input .amount-currency-select-btn > .np-input-group > .np-form-control {
-  lol: 'money-input';
+.tw-money-input .amount-currency-select-btn > .np-select > .btn {
   display: flex;
   align-items: center;
   max-height: 50px;
@@ -94,35 +93,36 @@
     font-weight: var(--font-weight-regular);
   }
 
-  .money-input-currency-flag {
+  .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
   }
 }
 
-// .np-select -> .np-input-group 
-// .np-dropdown-toggle -> .np-button-input
-// .btn -> .np-form-control
-// .currency-flag -> .money-input-currency-flag
-
-.tw-money-input .amount-currency-select-btn > .np-input-group > .np-button-input {
+.tw-money-input .amount-currency-select-btn > .np-select > .np-dropdown-toggle {
   padding: 0 var(--padding-small);
   text-align: center;
-  box-shadow: none;
 
-  &:hover:not(:focus),
-  &:active {
+  .np-theme-personal & {
     box-shadow: none;
-  }
 
-  .np-text-body-large {
-    overflow: visible;
-    text-overflow: clip;
+    &: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-input-group > .np-form-control > span.tw-icon {
+.tw-money-input .amount-currency-select-btn > .np-select > .np-btn > span.tw-icon {
   position: static;
 }
 
@@ -139,7 +139,7 @@
 
   .tw-money-input.input-group-md {
     .form-control,
-    .amount-currency-select-btn .np-form-control--size-md {
+    .amount-currency-select-btn .btn-md {
       min-height: 53px;
     }
   }
@@ -160,20 +160,24 @@
       color: var(--color-interactive-primary);
     }
 
+    .np-select-filter:focus {
+      outline: none;
+    }
+
     .amount-currency-select-btn {
-      .money-input-currency-flag {
+      .currency-flag {
         margin-right: 0;
         margin-top: 0;
       }
 
-      .np-form-control--size-md {
+      .np-btn-md {
         .np-text-body-large {
           margin-left: 4px;
           margin-right: 4px;
         }
       }
 
-      .np-form-control--size-lg {
+      .np-btn-lg {
         .np-text-body-large {
           margin-left: 9px;
           margin-right: 9px;