@transferwise/components 0.0.0-experimental-cf10171 → 0.0.0-experimental-ae2a4e7

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts

@@ -21,7 +21,7 @@ export interface PhoneNumberInputProps {
     searchPlaceholder?: string;
     size?: SizeSmall | SizeMedium | SizeLarge;
     placeholder?: string;
-    selectProps?: Partial<SelectInputProps<string>>;
+    selectProps?: Partial<SelectInputProps<string | null>>;
     /** List of iso3 codes of countries to remove from the list */
     disabledCountries?: string[];
 }

package/build/types/phoneNumberInput/PhoneNumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgBhG,MAAM,WAAW,2BAA2B;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC;IAChD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC9B;AAKD,QAAA,MAAM,gBAAgB,4JAcnB,qBAAqB,gCAgIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PhoneNumberInput.d.ts","sourceRoot":"","sources":["../../../src/phoneNumberInput/PhoneNumberInput.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAyC,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgBhG,MAAM,WAAW,2BAA2B;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACvD,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC9B;AAKD,QAAA,MAAM,gBAAgB,4JAcnB,qBAAqB,gCAuIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/build/types/phoneNumberInput/utils/explodeNumberModel/index.d.ts

@@ -1,7 +1,7 @@
 export interface PhoneNumber {
-    prefix: string;
+    prefix: string | null;
     suffix: string;
-    format: string;
+    format: string | undefined;
 }
 /**
  * @param number Phone number in a format like "+447573135343"

package/build/types/phoneNumberInput/utils/explodeNumberModel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/explodeNumberModel/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,WAAY,MAAM,KAAG,WAanD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/explodeNumberModel/index.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,WAAY,MAAM,KAAG,WAanD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-cf10171",
+  "version": "0.0.0-experimental-ae2a4e7",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -173,7 +173,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should empty the select', () => {
-      expect(select.props().value).toBe('');
+      expect(select.props().value).toBeNull();
     });
 
     it('should put the whole value in the input without the plus', () => {

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -39,7 +39,7 @@ export interface PhoneNumberInputProps {
   searchPlaceholder?: string;
   size?: SizeSmall | SizeMedium | SizeLarge;
   placeholder?: string;
-  selectProps?: Partial<SelectInputProps<string>>;
+  selectProps?: Partial<SelectInputProps<string | null>>;
   /** List of iso3 codes of countries to remove from the list */
   disabledCountries?: string[];
 }
@@ -71,7 +71,7 @@ const PhoneNumberInput = ({
       return {
         prefix: setDefaultPrefix(locale, countryCode),
         suffix: '',
-        format: '',
+        format: undefined,
       };
     }
 
@@ -103,10 +103,14 @@ const PhoneNumberInput = ({
       /(\s|-)+/g,
       '',
     );
-    const { prefix: pastedPrefix, suffix: pastedSuffix } = explodeNumberModel(pastedValue);
-
-    if (countriesByPrefix.has(pastedPrefix) && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
-      setInternalValue((prev) => ({ ...prev, prefix: pastedPrefix, suffix: pastedSuffix }));
+    const pastedNumber = explodeNumberModel(pastedValue);
+
+    if (
+      pastedNumber.prefix != null &&
+      countriesByPrefix.has(pastedNumber.prefix) &&
+      ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)
+    ) {
+      setInternalValue(pastedNumber);
     }
   };
 
@@ -115,8 +119,8 @@ const PhoneNumberInput = ({
       return setBroadcastedValue(internalValue);
     }
 
-    const internalPhoneNumber = internalValue.prefix + internalValue.suffix;
-    const broadcastedPhoneNumber = broadcastedValue.prefix + broadcastedValue.suffix;
+    const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
+    const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
 
     if (internalPhoneNumber === broadcastedPhoneNumber) {
       return;
@@ -126,7 +130,10 @@ const PhoneNumberInput = ({
       ? cleanNumber(internalPhoneNumber)
       : null;
 
-    onChange(newValue, internalValue.prefix);
+    onChange(
+      newValue,
+      internalValue.prefix ?? '', // TODO: Allow `null` in public API
+    );
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
 

package/src/phoneNumberInput/utils/explodeNumberModel/explodeNumberModel.spec.ts

@@ -12,7 +12,7 @@ describe('explodeNumberModel', () => {
 
     it('should return an exploded number for three digit prefix', () => {
       expect(explodeNumberModel('+3727573135343')).toStrictEqual({
-        format: '',
+        format: undefined,
         prefix: '+372',
         suffix: '7573135343',
       });

package/src/phoneNumberInput/utils/explodeNumberModel/index.ts

@@ -1,9 +1,9 @@
 import { findCountryByPrefix } from '../findCountryByPrefix';
 
 export interface PhoneNumber {
-  prefix: string;
+  prefix: string | null;
   suffix: string;
-  format: string;
+  format: string | undefined;
 }
 
 /**
@@ -15,11 +15,11 @@ export const explodeNumberModel = (number: string): PhoneNumber => {
     ? {
         prefix: country.phone,
         suffix: number.slice(country.phone.length),
-        format: country.phoneFormat ?? '',
+        format: country.phoneFormat,
       }
     : {
-        prefix: '',
+        prefix: null,
         suffix: number.slice(1),
-        format: '',
+        format: undefined,
       };
 };