@transferwise/components 0.0.0-experimental-bb2bef0 → 0.0.0-experimental-537cce6

package/src/phoneNumberInput/PhoneNumberInput.messages.ts

@@ -5,12 +5,4 @@ export default defineMessages({
     id: 'neptune.PhoneNumberInput.SelectInput.placeholder',
     defaultMessage: 'Select an option...',
   },
-  countryCodeLabel: {
-    id: 'neptune.PhoneNumberInput.countryCodeLabel',
-    defaultMessage: 'Country code',
-  },
-  phoneNumberLabel: {
-    id: 'neptune.PhoneNumberInput.phoneNumberLabel',
-    defaultMessage: 'Phone number',
-  },
 });

package/src/phoneNumberInput/PhoneNumberInput.spec.tsx

@@ -21,30 +21,28 @@ describe('PhoneNumberInput', () => {
   const customRender = (overrides: Partial<PhoneNumberInputProps> = {}, locale?: string) =>
     render(<PhoneNumberInput {...props} {...overrides} />, { locale });
 
-  const getCountryCodeSelect = () => screen.getByRole('combobox');
-  const getCountryCodeLabel = () => screen.getByText('Country code');
-  const getPhoneNumberInput = () => screen.getByRole('textbox');
-  const getPhoneNumberLabel = () => screen.getByText('Phone number');
+  const getPrefixEl = () => screen.getByRole('combobox');
+  const getInputEl = () => screen.getByRole('textbox');
 
   describe('defaults', () => {
     it('should set prefix control to default UK value', () => {
       customRender();
-      expect(getCountryCodeSelect()).toHaveTextContent('+44');
+      expect(getPrefixEl()).toHaveTextContent('+44');
     });
 
     it('should set number control to empty', () => {
       customRender();
-      expect(getPhoneNumberInput()).toHaveValue('');
+      expect(getInputEl()).toHaveValue('');
     });
 
     it('should not disable the select', () => {
       customRender();
-      expect(getCountryCodeSelect()).toBeEnabled();
+      expect(getPrefixEl()).toBeEnabled();
     });
 
     it('should not disable the input', () => {
       customRender();
-      expect(getPhoneNumberInput()).toBeEnabled();
+      expect(getInputEl()).toBeEnabled();
     });
   });
 
@@ -52,56 +50,22 @@ describe('PhoneNumberInput', () => {
     const prefix = '+39';
     const number = '123456789';
     customRender({ initialValue: `${prefix}${number}` });
-    expect(getCountryCodeSelect()).toHaveTextContent(prefix);
-    expect(getPhoneNumberInput()).toHaveValue(number);
+    expect(getPrefixEl()).toHaveTextContent(prefix);
+    expect(getInputEl()).toHaveValue(number);
   });
 
   describe('id prop', () => {
-    it('should render sensible default IDs', () => {
+    it('should not render id by default', () => {
       customRender();
-      const countryCodeSelectID = getCountryCodeSelect().getAttribute('id');
-      expect(countryCodeSelectID).toMatch(/^country-code-select-[a-z0-9]{6}$/);
-      const countryCodeLabelID = getCountryCodeLabel().getAttribute('id');
-      expect(countryCodeLabelID).toMatch(/^country-code-label-[a-z0-9]{6}$/);
-      const phoneNumberInputID = getPhoneNumberInput().getAttribute('id');
-      expect(phoneNumberInputID).toMatch(/^phone-number-input-[a-z0-9]{6}$/);
-      const phoneNumberLabelID = getPhoneNumberLabel().getAttribute('id');
-      expect(phoneNumberLabelID).toMatch(/^phone-number-label-[a-z0-9]{6}$/);
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).not.toHaveAttribute('id');
     });
 
-    it('should use the custom `id` as-is for the input but with slight modification for select', () => {
+    it('should respect `id` for the input and ignore the select', () => {
       const id = 'component-id';
       customRender({ id });
-      expect(getPhoneNumberInput()).toHaveAttribute('id', id);
-      expect(getPhoneNumberLabel()).toHaveAttribute('id', `${id}-phone-number-label`);
-      expect(getCountryCodeSelect()).toHaveAttribute('id', `${id}-country-code-select`);
-      expect(getCountryCodeLabel()).toHaveAttribute('id', `${id}-country-code-label`);
-    });
-
-    it('should set correct ARIA attributes on the country code select when id is provided', () => {
-      const id = 'my-id';
-      customRender({ id });
-      // The select trigger should have aria-labelledby pointing to the label
-      expect(getCountryCodeSelect()).toHaveAttribute('aria-labelledby', `${id}-country-code-label`);
-    });
-
-    it('should set correct ARIA attributes on the country code select when id is not provided', () => {
-      customRender();
-      // The select trigger should have aria-labelledby pointing to a generated label id
-      const selectLabelledBy = getCountryCodeSelect().getAttribute('aria-labelledby');
-      expect(selectLabelledBy).toMatch(/^country-code-label-[a-z0-9]{6}$/);
-    });
-
-    it('should set correct ARIA attributes on the phone number input when id is provided', () => {
-      const id = 'my-id';
-      customRender({ id });
-      expect(getPhoneNumberInput()).toHaveAttribute('aria-labelledby', `${id}-phone-number-label`);
-    });
-
-    it('should set correct ARIA attributes on the phone number input when id is not provided', () => {
-      customRender();
-      const inputLabelledBy = getPhoneNumberInput().getAttribute('aria-labelledby');
-      expect(inputLabelledBy).toMatch(/^phone-number-label-[a-z0-9]{6}$/);
+      expect(getPrefixEl()).not.toHaveAttribute('id');
+      expect(getInputEl()).toHaveAttribute('id', id);
     });
   });
 
@@ -130,38 +94,38 @@ describe('PhoneNumberInput', () => {
       it(`'${number}' number should update the value properly`, async () => {
         await renderAndPaste(number);
 
-        expect(getCountryCodeSelect()).toHaveTextContent(countryCode);
-        expect(getPhoneNumberInput()).toHaveValue(localNumber);
+        expect(getPrefixEl()).toHaveTextContent(countryCode);
+        expect(getInputEl()).toHaveValue(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/[\s-]+/g, ''), countryCode);
       });
     });
 
     it('should not paste invalid characters', async () => {
       await renderAndPaste('+36asdasdasd');
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it('should not paste countries which are not in the select', async () => {
       await renderAndPaste('+9992342343423');
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should not paste numbers which doesn't start with the country code", async () => {
       await renderAndPaste('0+36303932551');
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(initialNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(initialNumber);
       expect(props.onChange).not.toHaveBeenCalled();
     });
 
     it("should allow pasting numbers which don't contain a country code", async () => {
       const newNumber = '06303932551';
       await renderAndPaste(newNumber);
-      expect(getCountryCodeSelect()).toHaveTextContent(initialPrefix);
-      expect(getPhoneNumberInput()).toHaveValue(newNumber);
+      expect(getPrefixEl()).toHaveTextContent(initialPrefix);
+      expect(getInputEl()).toHaveValue(newNumber);
       expect(props.onChange).toHaveBeenCalledWith(`${initialPrefix}${newNumber}`, initialPrefix);
     });
   });
@@ -172,12 +136,12 @@ describe('PhoneNumberInput', () => {
 
       it('should set the select to the longest matching prefix', () => {
         customRender(initialProps);
-        expect(getCountryCodeSelect()).toHaveTextContent('+1868');
+        expect(getPrefixEl()).toHaveTextContent('+1868');
       });
 
       it('should set the number input to the rest of the number', () => {
         customRender(initialProps);
-        expect(getPhoneNumberInput()).toHaveValue('123456789');
+        expect(getInputEl()).toHaveValue('123456789');
       });
     });
 
@@ -186,20 +150,20 @@ describe('PhoneNumberInput', () => {
 
       it('should empty the select', () => {
         customRender(initialProps);
-        expect(getCountryCodeSelect()).toHaveTextContent('Select an option...');
+        expect(getPrefixEl()).toHaveTextContent('Select an option...');
       });
 
       it('should put the whole value in the input without the plus', () => {
         customRender(initialProps);
-        expect(getPhoneNumberInput()).toHaveValue('999123456789');
+        expect(getInputEl()).toHaveValue('999123456789');
       });
     });
 
     describe('when an partial model is supplied (with a matching prefix)', () => {
       it('should set the select to the matching prefix and put the rest of the number in the suffix', () => {
         customRender({ initialValue: '+123' });
-        expect(getCountryCodeSelect()).toHaveTextContent('+1');
-        expect(getPhoneNumberInput()).toHaveValue('23');
+        expect(getPrefixEl()).toHaveTextContent('+1');
+        expect(getInputEl()).toHaveValue('23');
       });
     });
   });
@@ -207,8 +171,8 @@ describe('PhoneNumberInput', () => {
   describe('when disabled is true', () => {
     it('should disable both controls', () => {
       customRender({ disabled: true });
-      expect(getCountryCodeSelect()).toBeDisabled();
-      expect(getPhoneNumberInput()).toBeDisabled();
+      expect(getPrefixEl()).toBeDisabled();
+      expect(getInputEl()).toBeDisabled();
     });
   });
 
@@ -216,13 +180,13 @@ describe('PhoneNumberInput', () => {
     it('should use the provided placeholder', () => {
       const placeholder = 'custom placeholder';
       customRender({ placeholder });
-      expect(getPhoneNumberInput()).toHaveAttribute('placeholder', placeholder);
+      expect(getInputEl()).toHaveAttribute('placeholder', placeholder);
     });
 
     it('should use the provided searchPlaceholder', async () => {
       const searchPlaceholder = 'search placeholder';
       customRender({ searchPlaceholder });
-      await userEvent.click(getCountryCodeSelect());
+      await userEvent.click(getPrefixEl());
       expect(screen.getByRole('combobox', { name: searchPlaceholder })).toBeInTheDocument();
     });
   });
@@ -231,7 +195,7 @@ describe('PhoneNumberInput', () => {
     describe('and a value', () => {
       it('should use the prefix of the supplied value', () => {
         customRender({ initialValue: '+12345678' }, 'es');
-        expect(getCountryCodeSelect()).toHaveTextContent('+1');
+        expect(getPrefixEl()).toHaveTextContent('+1');
       });
     });
 
@@ -239,14 +203,14 @@ describe('PhoneNumberInput', () => {
       describe('and no country code', () => {
         it('should default the prefix to the local country', () => {
           customRender(undefined, 'es');
-          expect(getCountryCodeSelect()).toHaveTextContent('+34');
+          expect(getPrefixEl()).toHaveTextContent('+34');
         });
       });
 
       describe('and country code', () => {
         it('should override locale prefix with country specific prefix', () => {
           customRender({ countryCode: 'US' }, 'es');
-          expect(getCountryCodeSelect()).toHaveTextContent('+1');
+          expect(getPrefixEl()).toHaveTextContent('+1');
         });
       });
     });
@@ -256,7 +220,7 @@ describe('PhoneNumberInput', () => {
     describe('valid number', () => {
       it('should trigger onChange handler', async () => {
         customRender();
-        await userEvent.type(getPhoneNumberInput(), '123');
+        await userEvent.type(getInputEl(), '123');
         expect(props.onChange).toHaveBeenCalledWith('+44123', '+44');
       });
     });
@@ -264,7 +228,7 @@ describe('PhoneNumberInput', () => {
     describe('invalid number', () => {
       it('should trigger onChange with null value', async () => {
         customRender({ initialValue: '+1234' });
-        await userEvent.type(getPhoneNumberInput(), '{Backspace}{Backspace}{Backspace}1');
+        await userEvent.type(getInputEl(), '{Backspace}{Backspace}{Backspace}1');
         expect(props.onChange).toHaveBeenCalledWith(null, '+1');
       });
     });
@@ -272,7 +236,7 @@ describe('PhoneNumberInput', () => {
     describe('when user insert invalid character', () => {
       it('should strip them', async () => {
         customRender({ initialValue: '+12345678' });
-        await userEvent.type(getPhoneNumberInput(), '123--');
+        await userEvent.type(getInputEl(), '123--');
         expect(props.onChange).toHaveBeenCalledWith('+12345678123', '+1');
       });
     });
@@ -280,8 +244,8 @@ describe('PhoneNumberInput', () => {
     describe('overlapping prefix and suffix numbers', () => {
       it("shouldn't change the prefix number on matching suffix input", async () => {
         customRender({ countryCode: 'eg' });
-        await userEvent.type(getPhoneNumberInput(), '1111111');
-        expect(getPhoneNumberInput()).toHaveValue('1111111');
+        await userEvent.type(getInputEl(), '1111111');
+        expect(getInputEl()).toHaveValue('1111111');
         expect(props.onChange).toHaveBeenCalledWith('+201111111', '+20');
       });
     });
@@ -290,7 +254,7 @@ describe('PhoneNumberInput', () => {
   describe('when selectProps is supplied', () => {
     it('renders Select component with expected props', () => {
       customRender({ selectProps: { className: 'custom-class' } });
-      expect(getCountryCodeSelect().parentElement).toHaveClass('custom-class');
+      expect(getPrefixEl().parentElement).toHaveClass('custom-class');
     });
   });
 

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
 import { useInputAttributes } from '../inputs/contexts';
 import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
+
 import messages from './PhoneNumberInput.messages';
 import countries from './data/countries';
 import {
@@ -63,25 +64,6 @@ const PhoneNumberInput = ({
 
   const { locale, formatMessage } = useIntl();
 
-  const createId = (customID: string | undefined, backup: string): string => {
-    if (customID) {
-      return customID + (backup ? `-${backup}` : '');
-    }
-    const random = Math.random().toString(36).slice(2, 8);
-    return `${backup}-${random}`;
-  };
-
-  const ids = {
-    countryCode: {
-      label: createId(id, 'country-code-label'),
-      select: createId(id, 'country-code-select'),
-    },
-    phoneNumber: {
-      label: createId(id, 'phone-number-label'),
-      input: createId(id, id ? '' : 'phone-number-input'),
-    },
-  };
-
   const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
 
@@ -169,9 +151,6 @@ const PhoneNumberInput = ({
       aria-labelledby={ariaLabelledBy}
       className="tw-telephone"
     >
-      <label className="sr-only" id={ids.countryCode.label}>
-        {formatMessage(messages.countryCodeLabel)}
-      </label>
       <div className="tw-telephone__country-select">
         <SelectInput
           placeholder={formatMessage(messages.selectInputPlaceholder)}
@@ -202,13 +181,6 @@ const PhoneNumberInput = ({
           filterPlaceholder={searchPlaceholder}
           disabled={disabled}
           size={size}
-          id={ids.countryCode.select}
-          UNSAFE_triggerButtonProps={{
-            id: ids.countryCode.select,
-            'aria-labelledby': ids.countryCode.label,
-            'aria-describedby': undefined,
-            'aria-invalid': undefined,
-          }}
           onChange={(prefix) => {
             const country = prefix != null ? findCountryByPrefix(prefix) : null;
             setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
@@ -221,13 +193,10 @@ const PhoneNumberInput = ({
           {...selectProps}
         />
       </div>
-      <label className="sr-only" id={ids.phoneNumber.label} htmlFor={ids.phoneNumber.input}>
-        {formatMessage(messages.phoneNumberLabel)}
-      </label>
       <div className="tw-telephone__number-input">
         <div className={`input-group input-group-${size}`}>
           <Input
-            id={ids.phoneNumber.input}
+            id={id}
             autoComplete="tel-national"
             name="phoneNumber"
             inputMode="numeric"
@@ -235,7 +204,6 @@ const PhoneNumberInput = ({
             disabled={disabled}
             required={required}
             placeholder={placeholder}
-            aria-labelledby={ids.phoneNumber.label}
             onChange={onSuffixChange}
             onPaste={onPaste}
             onFocus={onFocus}

package/src/withDisplayFormat/WithDisplayFormat.spec.js

@@ -3,7 +3,7 @@ import { userEvent, render, screen, waitFor } from '../test-utils';
 import { Input } from '../inputs/Input';
 import WithDisplayFormat from '.';
 
-const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+const user = userEvent;
 
 const setup = (props) =>
   render(
@@ -22,15 +22,6 @@ describe('InputWithTextFormat (React Testing Library)', () => {
     onBlur: jest.fn(),
   };
 
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(async () => {
-    await jest.runOnlyPendingTimersAsync();
-    jest.useRealTimers();
-  });
-
   [
     { value: '123', expectedValue: '12-3', displayPattern: '**-**-**' },
     { value: '1234', expectedValue: '12-34', displayPattern: '**-**-**' },
@@ -132,18 +123,23 @@ describe('InputWithTextFormat (React Testing Library)', () => {
     expect(input).toHaveValue('12');
   });
 
-  // @FIXME (maybe) Is this behaviour expected? 🤔
-  it(`moves to the end, when entered a char in the middle`, async () => {
+  it(`cusor preserve position when entered a char in the middle`, async () => {
     setup(initialProps);
     const input = screen.getByRole('textbox');
     await user.type(input, '123');
     expect(input).toHaveValue('12-3');
 
-    await user.type(input, '{arrowLeft}{arrowLeft}{arrowLeft}@');
+    await user.keyboard('{arrowleft}{arrowleft}{arrowleft}');
+    await user.keyboard('@');
+
     expect(input).toHaveValue('1@-23');
 
-    await user.type(input, 'x');
-    expect(input).toHaveValue('1@-23x');
+    await user.keyboard('x');
+    expect(input).toHaveValue('1@-x23');
+
+    await user.keyboard('{arrowright}{backspace}');
+
+    expect(input).toHaveValue('1@-x3');
   });
 
   it(`supports pasting`, async () => {

package/src/withDisplayFormat/WithDisplayFormat.tsx

@@ -270,7 +270,6 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
   handleCursorPositioning = (action: string) => {
     const { displayPattern } = this.props;
     const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;
-    const target = triggerEvent?.currentTarget;
 
     const cursorPosition = getCursorPositionAfterKeystroke(
       action,
@@ -281,7 +280,9 @@ class WithDisplayFormat<T extends TextElementProps> extends React.Component<
     );
 
     setTimeout(() => {
-      target?.setSelectionRange(cursorPosition, cursorPosition);
+      if (triggerEvent) {
+        (triggerEvent.target as HTMLTextElement).setSelectionRange(cursorPosition, cursorPosition);
+      }
       this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });
     }, 0);
   };