@transferwise/components 46.6.0 → 46.7.0

package/src/phoneNumberInput/data/{countries.js → countries.ts}

@@ -1,4 +1,12 @@
-const countries = [
+export type Country = {
+  name: string;
+  iso2: string;
+  iso3: string;
+  phone: string;
+  phoneFormat?: string;
+};
+
+const countries: Country[] = [
   {
     name: 'Afghanistan',
     iso2: 'AF',

package/src/phoneNumberInput/utils/cleanNumber/cleanNumber.ts

@@ -0,0 +1,3 @@
+const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
+
+export const cleanNumber = (number: string) => number.match(DIGITS_MATCH)?.join('') ?? '';

package/src/phoneNumberInput/utils/excludeCountries/{excludeCountries.spec.js → excludeCountries.spec.ts}

@@ -4,7 +4,7 @@ import { excludeCountries } from './excludeCountries';
 
 describe('Exclude countries', () => {
   it('should return all the countries of list is empty', () => {
-    const remove = [];
+    const remove: string[] = [];
     const filteredCountries = excludeCountries(countries, remove);
     expect(filteredCountries).toHaveLength(countries.length);
   });

package/src/phoneNumberInput/utils/excludeCountries/{excludeCountries.js → excludeCountries.ts}

@@ -1,5 +1,7 @@
+import type { Country } from '../../data/countries';
+
 // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
-const filterCountriesByIso3 = (countries, iso3Codes) => {
+const filterCountriesByIso3 = (countries: Country[], iso3Codes: string[]) => {
   const iso3CodesSet = new Set(iso3Codes);
   return countries.filter((country) => !iso3CodesSet.has(country.iso3));
 };
@@ -7,11 +9,10 @@ const filterCountriesByIso3 = (countries, iso3Codes) => {
 /**
  * Removes the countries sepecified in the second param
  *
- * @param {Array} countries: list of country metadata objects
- * @param {Array} disabledCountries: list of iso3 country codes to remove from the list
- * @returns
+ * @param countries list of country metadata objects
+ * @param disabledCountries list of iso3 country codes to remove from the list
  */
-export const excludeCountries = (countries, disabledCountries) => {
+export const excludeCountries = (countries: Country[], disabledCountries: string[]) => {
   return disabledCountries.length > 0
     ? filterCountriesByIso3(countries, disabledCountries)
     : countries;

package/src/phoneNumberInput/utils/explodeNumberModel/{explodeNumberModel.spec.js → 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

@@ -0,0 +1,24 @@
+import { findCountryByPrefix } from '../findCountryByPrefix';
+
+export interface PhoneNumber {
+  prefix: string | null;
+  suffix: string;
+  format?: string;
+}
+
+/**
+ * @param number Phone number in a format like "+447573135343"
+ */
+export const explodeNumberModel = (number: string): PhoneNumber => {
+  const country = findCountryByPrefix(number);
+  return country
+    ? {
+        prefix: country.phone,
+        suffix: number.slice(country.phone.length),
+        format: country.phoneFormat,
+      }
+    : {
+        prefix: null,
+        suffix: number.slice(1),
+      };
+};

package/src/phoneNumberInput/utils/findCountryByCode/{findCountryByCode.spec.js → findCountryByCode.spec.ts}

@@ -14,7 +14,6 @@ describe('findCountryByCode', () => {
 
   it('should return null for invalid code', () => {
     expect(findCountryByCode('Wrong')).toBeNull();
-    expect(findCountryByCode(null)).toBeNull();
     expect(findCountryByCode('')).toBeNull();
     expect(findCountryByCode('  ')).toBeNull();
   });

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

@@ -0,0 +1,12 @@
+import countries from '../../data/countries';
+import { longestMatchingPrefix } from '../longestMatchingPrefix';
+
+export const findCountryByCode = (code: string) => {
+  if (code.length === 2) {
+    const matchingCodes = countries.filter((country) => code.toUpperCase() === country.iso2);
+    if (matchingCodes.length > 0) {
+      return longestMatchingPrefix(matchingCodes);
+    }
+  }
+  return null;
+};

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

@@ -0,0 +1,12 @@
+import countries from '../../data/countries';
+import { longestMatchingPrefix } from '../longestMatchingPrefix';
+
+export const findCountryByPrefix = (number: string) => {
+  if (number.length > 1) {
+    const matchingCodes = countries.filter((country) => number.startsWith(country.phone));
+    if (matchingCodes.length > 0) {
+      return longestMatchingPrefix(matchingCodes);
+    }
+  }
+  return null;
+};

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

@@ -0,0 +1,102 @@
+import { Country } from '../../data/countries';
+
+import { groupCountriesByPrefix } from '.';
+
+const countries = [
+  {
+    name: 'Canada',
+    iso2: 'CA',
+    iso3: 'CAN',
+    phone: '+1',
+  },
+  {
+    name: 'United States of America',
+    iso2: 'US',
+    iso3: 'USA',
+    phone: '+1',
+  },
+  {
+    name: 'United States Minor Outlying Islands',
+    iso2: 'UM',
+    iso3: 'UMI',
+    phone: '+1',
+  },
+  {
+    name: 'United Kingdom',
+    iso2: 'GB',
+    iso3: 'GBR',
+    phone: '+44',
+  },
+  {
+    name: 'Guernsey',
+    iso2: 'GG',
+    iso3: 'GGY',
+    phone: '+44',
+  },
+  {
+    name: 'Guinea',
+    iso2: 'GN',
+    iso3: 'GIN',
+    phone: '+224',
+  },
+];
+
+const groupedCountries = new Map<string, Country[]>([
+  [
+    '+1',
+    [
+      {
+        name: 'Canada',
+        iso2: 'CA',
+        iso3: 'CAN',
+        phone: '+1',
+      },
+      {
+        name: 'United States of America',
+        iso2: 'US',
+        iso3: 'USA',
+        phone: '+1',
+      },
+      {
+        name: 'United States Minor Outlying Islands',
+        iso2: 'UM',
+        iso3: 'UMI',
+        phone: '+1',
+      },
+    ],
+  ],
+  [
+    '+44',
+    [
+      {
+        name: 'United Kingdom',
+        iso2: 'GB',
+        iso3: 'GBR',
+        phone: '+44',
+      },
+      {
+        name: 'Guernsey',
+        iso2: 'GG',
+        iso3: 'GGY',
+        phone: '+44',
+      },
+    ],
+  ],
+  [
+    '+224',
+    [
+      {
+        name: 'Guinea',
+        iso2: 'GN',
+        iso3: 'GIN',
+        phone: '+224',
+      },
+    ],
+  ],
+]);
+
+describe('groupCountriesByPrefix', () => {
+  it('groups countries by prefix', () => {
+    expect(groupCountriesByPrefix(countries)).toStrictEqual(groupedCountries);
+  });
+});

package/src/phoneNumberInput/utils/groupCountriesByPrefix/groupCountriesByPrefix.ts

@@ -0,0 +1,12 @@
+import { Country } from '../../data/countries';
+
+export const groupCountriesByPrefix = (countries: Country[]) => {
+  const countriesByPrefix = new Map<string, Country[]>();
+  countries.forEach((country) => {
+    countriesByPrefix.set(country.phone, [
+      ...(countriesByPrefix.get(country.phone) ?? []),
+      country,
+    ]);
+  });
+  return countriesByPrefix;
+};

package/src/phoneNumberInput/utils/{index.js → index.ts}

@@ -4,8 +4,6 @@ export { explodeNumberModel } from './explodeNumberModel';
 export { longestMatchingPrefix } from './longestMatchingPrefix';
 export { findCountryByPrefix } from './findCountryByPrefix';
 export { findCountryByCode } from './findCountryByCode';
-export { filterOptionsForQuery } from './filterOptionsForQuery';
-export { isOptionAndFitsQuery } from './isOptionAndFitsQuery';
 export { cleanNumber } from './cleanNumber';
 export { isStringNumeric } from './isStringNumeric';
 export { sortArrayByProperty } from './sortArrayByProperty';

package/src/phoneNumberInput/utils/isStringNumeric/{isStringNumeric.spec.js → isStringNumeric.spec.ts}

@@ -4,7 +4,6 @@ describe('isStringNumeric', () => {
   it('should return true when numeric sting is provided', () => {
     expect(isStringNumeric('+23456')).toBe(true);
     expect(isStringNumeric('23456')).toBe(true);
-    expect(isStringNumeric(23456)).toBe(true);
   });
 
   it('should return false when string is provided', () => {

package/src/phoneNumberInput/utils/isStringNumeric/isStringNumeric.ts

@@ -0,0 +1 @@
+export const isStringNumeric = (value: string) => /^\+?[\d-\s]+$/.test(value);

package/src/phoneNumberInput/utils/isValidPhoneNumber/{isValidPhoneNumber.spec.js → isValidPhoneNumber.spec.ts}

@@ -11,7 +11,7 @@ describe('isValidPhoneNumber', () => {
 
   it('should return false for invalid numbers', () => {
     expect(isValidPhoneNumber('+441')).toBe(false);
-    expect(isValidPhoneNumber(44)).toBe(false);
+    expect(isValidPhoneNumber('44')).toBe(false);
     expect(isValidPhoneNumber('44123')).toBe(false);
   });
 });

package/src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts

@@ -0,0 +1,7 @@
+/**
+ *
+ * @param phoneNumber
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ */
+export const isValidPhoneNumber = (phoneNumber: string) =>
+  /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;

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

@@ -0,0 +1,4 @@
+import { Country } from '../../data/countries';
+
+export const longestMatchingPrefix = (matchingCodes: Country[]) =>
+  matchingCodes.reduce((a, b) => (a.phone.length > b.phone.length ? a : b));

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

@@ -0,0 +1,20 @@
+import { getCountryFromLocale } from '../../../common/locale';
+import { findCountryByCode } from '../findCountryByCode';
+
+/**
+ * Default phone code, the UK one `+44`
+ */
+const DEFAULT_PHONE_CODE = '+44';
+
+/**
+ * Given a valid locale it returns the correspondent prefix if found or +44 otherwise.
+ *
+ * @param locale BCP 47 language tag of locale, e.g. `"es-ES"`.
+ * @param countryCode Two-letter country code (ISO 3166-1 alpha-2).
+ */
+export const setDefaultPrefix = (locale: string, countryCode?: string) => {
+  const country =
+    (countryCode != null ? findCountryByCode(countryCode) : null) ??
+    findCountryByCode(getCountryFromLocale(locale) ?? locale);
+  return country?.phone ?? DEFAULT_PHONE_CODE;
+};

package/src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts

@@ -0,0 +1,6 @@
+export function sortArrayByProperty<T extends Record<PropertyKey, string>>(
+  arrayToSort: T[],
+  property: keyof T,
+) {
+  return [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
+}

package/src/select/Select.css

@@ -152,10 +152,6 @@
   border-radius: var(--radius-small);
   color: #37517e;
   color: var(--color-content-primary);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-  font-size: 1rem;
-  font-size: var(--font-size-16);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;

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

@@ -1,2 +0,0 @@
-export function filterOptionsForQuery(options: any, query: any): any;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/filterOptionsForQuery/index.js"],"names":[],"mappings":"AASO,qEAC0D"}

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

@@ -1,2 +0,0 @@
-export { isOptionAndFitsQuery, startsWith } from "./isOptionAndFitsQuery";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isOptionAndFitsQuery/index.js"],"names":[],"mappings":""}

package/build/types/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.d.ts

@@ -1,3 +0,0 @@
-export function isOptionAndFitsQuery(option: object, query: string): boolean;
-export function startsWith(property: any, query: any): boolean;
-//# sourceMappingURL=isOptionAndFitsQuery.d.ts.map

package/build/types/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"isOptionAndFitsQuery.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isOptionAndFitsQuery/isOptionAndFitsQuery.js"],"names":[],"mappings":"AAQO,6CAJI,MAAM,SACN,MAAM,GACJ,OAAO,CAMa;AAE1B,+DAQN"}

package/build/types/utilities/wrapInFragment.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function wrapInFragment(value: unknown): import("react").JSX.Element;
-//# sourceMappingURL=wrapInFragment.d.ts.map

package/build/types/utilities/wrapInFragment.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"wrapInFragment.d.ts","sourceRoot":"","sources":["../../../src/utilities/wrapInFragment.tsx"],"names":[],"mappings":";AAAA,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,+BAE5C"}

package/src/common/locale/index.js

@@ -1,139 +0,0 @@
-import { Direction } from '..';
-
-/**
- * Default language
- *
- * @type {string}
- */
-export const DEFAULT_LANG = 'en';
-
-/**
- * Default locale
- *
- * @type {string}
- */
-export const DEFAULT_LOCALE = 'en-GB';
-
-/**
- * Array of languages that are written from the right to the left
- *
- * @type {string[]}
- */
-export const RTL_LANGUAGES = ['ar', 'he'];
-
-/**
- * @deprecated The source of truth for supported languages lives in Crab.
- * @type {string[]}
- */
-export const SUPPORTED_LANGUAGES = [
-  DEFAULT_LANG,
-  'de',
-  'es',
-  'fr',
-  'hu',
-  'id',
-  'it',
-  'ja',
-  'pl',
-  'pt',
-  'ro',
-  'ru',
-  'th',
-  'tr',
-  'uk',
-  'zh',
-];
-
-/**
- * Verifies and adjusts locale (replace `_` with `-`)
- * Returns null if locale is unrecognized by {Intl.Locale}
- *
- * @param {string} locale (`es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null}
- */
-export function adjustLocale(locale) {
-  if (!locale || locale.trim().length === 0) {
-    return null;
-  }
-  try {
-    const { baseName } = new Intl.Locale(locale.trim().replace('_', '-'));
-    return baseName;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides corresponding lang (iso2) for provided locale
- * if locale is invalid or language is unsupported returns null
- *
- * @deprecated The use of this function almost always breaks language variants
- * e.g. Simplified and Traditional Chinese.
- * There should be no use case for this function.
- * To select the correct translations from a translations object, pass the
- * locale directly into Crab's getLocalisedMessages.
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {string|null} two-letter ISO639-1 language
- */
-export function getLangFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const { language } = new Intl.Locale(adjustedLocale);
-
-    if (SUPPORTED_LANGUAGES.includes(language)) {
-      return language;
-    }
-    return null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides corresponding country code (iso2) for locales code with explicit region value (`es-ES`, `en-GB`, `ja-JP` etc.)
- * if the value is invalid or missing region it returns null
- *
- * @param {string} locale
- * @returns {string|null}
- */
-export function getCountryFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale === null) {
-    return null;
-  }
-  try {
-    const { region } = new Intl.Locale(adjustedLocale);
-    return region ?? null;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return null;
-  }
-}
-
-/**
- * Provides the layout direction for a given locale.
- * If locale is invalid or language is unsupported returns Direction.LTR
- *
- * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
- * @returns {Direction} The layout direction based on the locale
- */
-export function getDirectionFromLocale(locale) {
-  try {
-    const adjustedLocale = adjustLocale(locale);
-    const { language } = new Intl.Locale(adjustedLocale);
-
-    return RTL_LANGUAGES.includes(language) ? Direction.RTL : Direction.LTR;
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.error(error);
-    return Direction.LTR;
-  }
-}