@transferwise/components 0.0.0-experimental-eb6ccd6 → 0.0.0-experimental-a81440a

package/src/phoneNumberInput/PhoneNumberInput.css

@@ -1 +1 @@
-.tw-telephone{display:flex}.tw-telephone .tw-telephone__number-input{margin-left:12px;margin-left:var(--size-12)}[dir=rtl] .tw-telephone .tw-telephone__number-input{margin-left:0;margin-right:12px;margin-right:var(--size-12)}.tw-telephone__country-select{flex-basis:120px;flex-shrink:0}.tw-telephone__number-input{flex:auto 1 1}
+.tw-telephone{display:flex}.tw-telephone .tw-telephone__number-input{margin-left:12px;margin-left:var(--size-12)}[dir=rtl] .tw-telephone .tw-telephone__number-input{margin-left:0;margin-right:12px;margin-right:var(--size-12)}.tw-telephone__country-select{flex-basis:120px;flex-shrink:0}.tw-telephone__country-select .np-input-group{width:100%}.tw-telephone__number-input{flex:auto 1 1}

package/src/phoneNumberInput/PhoneNumberInput.js

@@ -4,16 +4,14 @@ import { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 
 import { Size } from '../common';
-import Select from '../select';
+import { SelectInput, SelectInputOptionContent } from '../inputs/SelectInput';
 
 import countries from './data/countries';
 import {
   explodeNumberModel,
-  filterOptionsForQuery,
   isValidPhoneNumber,
   cleanNumber,
   setDefaultPrefix,
-  isStringNumeric,
   sortArrayByProperty,
   groupCountriesByPrefix,
   excludeCountries,
@@ -55,20 +53,12 @@ const PhoneNumberInput = (props) => {
 
   const [internalValue, setInternalValue] = useState(getInitialValue());
   const [broadcastedValue, setBroadcastedValue] = useState(null);
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const countriesList = excludeCountries(countries, disabledCountries);
-
-  const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
-  const listSortedByPhone = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'phone'));
 
   const getSelectOptions = () => {
-    const filteredOptions = filterOptionsForQuery(
-      isStringNumeric(searchQuery) ? listSortedByPhone : listSortedByISO3,
-      searchQuery,
-    );
+    const countriesList = excludeCountries(countries, disabledCountries);
+    const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
 
-    return filteredOptions.map((option) => {
+    return listSortedByISO3.map((option) => {
       const { phone, iso3, iso2 } = option;
       let note = '';
 
@@ -78,14 +68,21 @@ const PhoneNumberInput = (props) => {
         note = isArray(iso2) ? iso2.join(', ') : iso2;
       }
 
-      return { value: phone, label: phone, note };
+      return {
+        type: 'option',
+        value: {
+          value: phone,
+          label: phone,
+          note: note,
+        },
+        filterMatchers: [phone, note],
+      };
     });
   };
 
   const options = getSelectOptions();
 
   const onPrefixChange = ({ value }) => {
-    setSearchQuery('');
     setInternalValue({ prefix: value, suffix: internalValue.suffix });
   };
 
@@ -101,12 +98,13 @@ const PhoneNumberInput = (props) => {
     if (!event.nativeEvent.clipboardData) {
       return;
     }
+
     const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(
       /(\s|-)+/g,
       '',
     );
     const { prefix: pastedPrefix, suffix: pastedSuffix } = explodeNumberModel(pastedValue);
-    const selectedPrefix = options.find(({ value }) => value === pastedPrefix);
+    const selectedPrefix = options.find(({ value }) => value.value === pastedPrefix);
 
     if (selectedPrefix && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
       setInternalValue({ prefix: pastedPrefix, suffix: pastedSuffix });
@@ -136,23 +134,24 @@ const PhoneNumberInput = (props) => {
   return (
     <div className="tw-telephone">
       <div className="tw-telephone__country-select">
-        <Select
-          id={id ? `${id}-select` : undefined}
-          options={options}
-          selected={{ value: internalValue.prefix, label: internalValue.prefix }}
+        <SelectInput
           placeholder="Select an option..."
-          searchPlaceholder={searchPlaceholder}
-          dropdownWidth={Size.SMALL}
-          searchValue={searchQuery}
-          required={required}
+          items={options}
+          value={{ value: internalValue.prefix, label: internalValue.prefix }}
+          renderValue={(option, withinTrigger) => (
+            <SelectInputOptionContent
+              title={option.label}
+              note={withinTrigger ? undefined : option.note}
+            />
+          )}
+          filterable
+          filterPlaceholder={searchPlaceholder}
           disabled={disabled}
           size={size}
           onChange={onPrefixChange}
-          onSearchChange={(newSearch) => setSearchQuery(newSearch)}
           {...selectProps}
         />
       </div>
-
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
           <input

package/src/phoneNumberInput/PhoneNumberInput.less

@@ -13,6 +13,10 @@
 .tw-telephone__country-select {
   flex-basis: @four-digit-country-code-width;
   flex-shrink: 0;
+
+  .np-input-group {
+    width: 100%;
+  }
 }
 
 .tw-telephone__number-input {

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -1,12 +1,29 @@
 import { shallow, mount } from 'enzyme';
 import { useIntl } from 'react-intl';
 
-import { fakeEvent } from '../common/fakeEvents';
-
 import PhoneNumberInput from '.';
 
 jest.mock('react-intl');
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+}
+
 const simulatePaste = (element, value) =>
   element.simulate('paste', { nativeEvent: { clipboardData: { getData: () => value } } });
 
@@ -15,7 +32,7 @@ describe('Given a telephone number component', () => {
   let input;
   let component;
   const props = { onChange: jest.fn() };
-  const PREFIX_SELECT_SELECTOR = 'Select';
+  const PREFIX_SELECT_SELECTOR = 'SelectInput';
   const NUMBER_SELECTOR = 'input[name="phoneNumber"]';
 
   beforeEach(() => {
@@ -34,14 +51,17 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set prefix control to default UK value', () => {
-      expect(select.props().selected).toStrictEqual({ value: '+44', label: '+44' });
+      expect(select.props().value).toStrictEqual({ value: '+44', label: '+44' });
     });
+
     it('should set number control to empty', () => {
       expect(input.prop('value')).toBe('');
     });
+
     it('should not disable the select', () => {
       expect(select.prop('disabled')).toBe(false);
     });
+
     it('should not disable the input', () => {
       expect(input.prop('disabled')).toBe(false);
     });
@@ -55,7 +75,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set control values correctly', () => {
-      expect(select.props().selected.value).toStrictEqual('+39');
+      expect(select.props().value.value).toStrictEqual('+39');
       expect(input.prop('value')).toBe('123456789');
     });
   });
@@ -67,28 +87,29 @@ describe('Given a telephone number component', () => {
       input = component.find(NUMBER_SELECTOR);
     });
 
-    it('should render input with expected id', () => {
-      expect(input.prop('id')).toBe('mock-id');
+    it('should render select with undefined id', () => {
+      expect(select.prop('id')).toBeUndefined();
     });
 
-    it('should render select with expected id', () => {
-      expect(select.prop('id')).toBe('mock-id-select');
+    it('should render input with expected id', () => {
+      expect(input.prop('id')).toBe('mock-id');
     });
   });
 
   describe('when an id is not supplied', () => {
     beforeEach(() => {
       component = shallow(<PhoneNumberInput {...props} />);
-      select = component.find(PREFIX_SELECT_SELECTOR);
       input = component.find(NUMBER_SELECTOR);
     });
 
-    it('should render select with undefined id', () => {
-      expect(select.prop('id')).toBeUndefined();
+    it('should render input with null id', () => {
+      expect(input.prop('id')).toBeNull();
     });
   });
 
   describe('when pasting', () => {
+    window.ResizeObserver = ResizeObserver;
+
     beforeEach(() => {
       component = mount(<PhoneNumberInput {...props} initialValue="+39123456789" />);
       select = () => component.find(PREFIX_SELECT_SELECTOR);
@@ -108,7 +129,8 @@ describe('Given a telephone number component', () => {
     ].forEach(({ number, countryCode, localNumber }) => {
       it(`${number} code should update the value properly`, () => {
         simulatePaste(component.find('input'), number);
-        expect(select().props().selected.value).toStrictEqual(countryCode);
+
+        expect(select().props().value.value).toStrictEqual(countryCode);
         expect(input().prop('value')).toBe(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/(\s|-)+/g, ''), countryCode);
       });
@@ -116,28 +138,28 @@ describe('Given a telephone number component', () => {
 
     it('should not paste invalid characters', () => {
       simulatePaste(component.find('input'), '+36asdasdasd');
-      expect(select().props().selected.value).toStrictEqual('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', () => {
       simulatePaste(component.find('input'), '+9992342343423');
-      expect(select().props().selected.value).toStrictEqual('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", () => {
       simulatePaste(component.find('input'), '0+36303932551');
-      expect(select().props().selected.value).toStrictEqual('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't contain a country code", () => {
       simulatePaste(component.find('input'), '06303932551');
-      expect(select().props().selected.value).toStrictEqual('+39');
+      expect(select().props().value.value).toStrictEqual('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
@@ -151,8 +173,9 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set the select to the longest matching prefix', () => {
-      expect(select.props().selected.value).toStrictEqual('+1868');
+      expect(select.props().value.value).toStrictEqual('+1868');
     });
+
     it('should set the number input to the rest of the number', () => {
       expect(input.prop('value')).toBe('123456789');
     });
@@ -166,8 +189,9 @@ describe('Given a telephone number component', () => {
     });
 
     it('should empty the select', () => {
-      expect(select.props().selected.value).toStrictEqual('');
+      expect(select.props().value.value).toStrictEqual('');
     });
+
     it('should put the whole value in the input without the plus', () => {
       expect(input.prop('value')).toBe('999123456789');
     });
@@ -176,10 +200,10 @@ describe('Given a telephone number component', () => {
   describe('when an invalid model is supplied', () => {
     it('should not re-explode model', () => {
       component = shallow(<PhoneNumberInput {...props} initialValue="+123" />);
-
       select = component.find(PREFIX_SELECT_SELECTOR);
       input = component.find(NUMBER_SELECTOR);
-      expect(select.props().selected.value).toStrictEqual('+44');
+
+      expect(select.props().value.value).toStrictEqual('+44');
       expect(input.prop('value')).toBe('');
     });
   });
@@ -194,6 +218,7 @@ describe('Given a telephone number component', () => {
     it('should disable the select', () => {
       expect(select.prop('disabled')).toBe(true);
     });
+
     it('should disable the input', () => {
       expect(input.prop('disabled')).toBe(true);
     });
@@ -227,7 +252,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should use the provided searchPlaceholder', () => {
-      expect(select.prop('searchPlaceholder')).toBe('searchPlaceholder');
+      expect(select.prop('filterPlaceholder')).toBe('searchPlaceholder');
     });
   });
 
@@ -241,7 +266,7 @@ describe('Given a telephone number component', () => {
       });
 
       it('should use the prefix of the supplied value', () => {
-        expect(select.props().selected.value).toBe('+1');
+        expect(select.props().value.value).toBe('+1');
       });
     });
 
@@ -255,7 +280,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should default the prefix to the local country', () => {
-          expect(select.props().selected.value).toBe('+34');
+          expect(select.props().value.value).toBe('+34');
         });
       });
 
@@ -268,7 +293,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should override locale prefix with country specific prefix', () => {
-          expect(select.props().selected.value).toBe('+1');
+          expect(select.props().value.value).toBe('+1');
         });
       });
     });
@@ -277,37 +302,31 @@ describe('Given a telephone number component', () => {
   describe('when user insert valid value', () => {
     beforeEach(() => {
       component = mount(<PhoneNumberInput {...props} />);
-      input = component.find(NUMBER_SELECTOR);
       select = component.find(PREFIX_SELECT_SELECTOR);
+      input = component.find(NUMBER_SELECTOR);
     });
 
     it('should trigger onChange handler', () => {
       input.simulate('change', { target: { value: '123' } });
       expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
     });
-
-    it('should trigger onChange handler and set previousReturned value', () => {
-      changeSelectValue('+39');
-      input.simulate('change', { target: { value: '123' } });
-      expect(props.onChange).toHaveBeenCalledWith('+39123', '+39');
-    });
   });
 
   describe('when user insert an invalid number', () => {
     it('should trigger onChange with null value', () => {
       component = mount(<PhoneNumberInput {...props} initialValue="+12345678" />);
       input = component.find(NUMBER_SELECTOR);
-      select = component.find(PREFIX_SELECT_SELECTOR);
+
       input.simulate('change', { target: { value: '1' } });
-      select.simulate('change', { value: '+39', label: '+39' });
       expect(props.onChange).toHaveBeenCalledWith(null, '+1');
     });
 
     it("shouldn't re-trigger onChange and set previousReturned state", () => {
       component = shallow(<PhoneNumberInput {...props} />);
-      input = component.find(NUMBER_SELECTOR);
       select = component.find(PREFIX_SELECT_SELECTOR);
-      select.simulate('change', { value: '+1', label: '+1' });
+      input = component.find(NUMBER_SELECTOR);
+
+      select.simulate('change', { value: { value: '+1', label: '+1' } });
       input.simulate('change', { target: { value: '12' } });
       expect(props.onChange).not.toHaveBeenCalled();
     });
@@ -317,30 +336,15 @@ describe('Given a telephone number component', () => {
     it('should strip them', () => {
       component = mount(<PhoneNumberInput {...props} value="+12345678" />);
       input = component.find(NUMBER_SELECTOR);
-      select = component.find(PREFIX_SELECT_SELECTOR);
-      input.simulate('change', { target: { value: '123--' } });
-      changeSelectValue('+39');
-      expect(props.onChange).toHaveBeenCalledWith('+39123', '+39');
-    });
-  });
 
-  describe('when user search by number options are sorted by phone values', () => {
-    it('should return sorted by value options', () => {
-      component = mount(<PhoneNumberInput {...props} value="+12345678" />);
-
-      component.find('button.np-dropdown-toggle').simulate('click', fakeEvent());
-      component
-        .find({ className: 'np-select-filter' })
-        .simulate('change', { target: { value: '+124' } });
-      select = component.find(PREFIX_SELECT_SELECTOR);
-      expect(+select.prop('options')[0].value).toBeLessThan(+select.prop('options')[1].value);
+      input.simulate('change', { target: { value: '123--' } });
+      expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
     });
   });
 
   describe('overlapping prefix and suffix numbers', () => {
     it("shouldn't change the prefix number on matching suffix input", () => {
       component = mount(<PhoneNumberInput {...props} countryCode="eg" />);
-
       component.find(NUMBER_SELECTOR).simulate('change', { target: { value: '1111111' } });
 
       expect(component.find(NUMBER_SELECTOR).props().value).toBe('1111111');
@@ -351,29 +355,13 @@ describe('Given a telephone number component', () => {
   describe('when selectProps is supplied', () => {
     beforeEach(() => {
       component = shallow(
-        <PhoneNumberInput
-          selectProps={{
-            buttonProps: {
-              'aria-label': 'mock-button-label',
-            },
-          }}
-          {...props}
-        />,
+        <PhoneNumberInput selectProps={{ className: 'custom-class' }} {...props} />,
       );
     });
 
     it('renders Select component with expected props', () => {
-      const select = component.find('Select');
-
-      expect(select.prop('buttonProps')).toStrictEqual({
-        'aria-label': 'mock-button-label',
-      });
+      const select = component.find(PREFIX_SELECT_SELECTOR);
+      expect(select.prop('className')).toStrictEqual('custom-class');
     });
   });
-
-  const changeSelectValue = (value) => {
-    component.find('button.np-dropdown-toggle').simulate('click', fakeEvent());
-    component.find({ className: 'np-select-filter' }).simulate('change', { target: { value } });
-    component.find('.np-dropdown-item.clickable').simulate('click', fakeEvent());
-  };
 });

package/src/phoneNumberInput/PhoneNumberInput.story.js

@@ -12,9 +12,7 @@ export const Basic = () => {
   const required = boolean('required', false);
   const size = select('size', ['sm', 'md', 'lg'], 'md');
   const selectProps = object('selectProps', {
-    buttonProps: {
-      'aria-label': 'Select country code',
-    },
+    className: 'custom-class',
   });
 
   return (