@transferwise/components 0.0.0-experimental-85b9dd1 → 0.0.0-experimental-0db2ae7

package/build/index.esm.js

@@ -19,7 +19,7 @@ import { CSSTransition } from 'react-transition-group';
 import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
 import { createPortal } from 'react-dom';
-import { isUndefined, isKey, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
+import { isUndefined, isKey, isNumber, isEmpty, isNull, isArray } from '@transferwise/neptune-validation';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
@@ -342,76 +342,131 @@ const Key = {
   COMMA: ','
 };
 
+/**
+ * Default language
+ *
+ * @type {string}
+ */
 const DEFAULT_LANG = 'en';
+
+/**
+ * Default locale
+ *
+ * @type {string}
+ */
 const DEFAULT_LOCALE = 'en-GB';
+
 /**
- * Languages written right-to-left.
+ * Array of languages that are written from the right to the left
+ *
+ * @type {string[]}
  */
 const RTL_LANGUAGES = ['ar', 'he'];
+
 /**
  * @deprecated The source of truth for supported languages lives in Crab.
+ * @type {string[]}
  */
 const SUPPORTED_LANGUAGES = [DEFAULT_LANG, 'de', 'es', 'fr', 'hu', 'id', 'it', 'ja', 'pl', 'pt', 'ro', 'ru', 'th', 'tr', 'uk', 'zh'];
+
 /**
- * Verifies and adjusts locale, replacing `_` with `-`.
+ * Verifies and adjusts locale (replace `_` with `-`)
+ * Returns null if locale is unrecognized by {Intl.Locale}
  *
- * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
- * @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}
  */
 function adjustLocale(locale) {
-  const localeTrimmed = locale?.trim();
-  if (localeTrimmed) {
-    try {
-      return new Intl.Locale(localeTrimmed.replace('_', '-')).baseName;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
+  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;
   }
-  return null;
 }
+
 /**
- * Provides corresponding lang (iso2) for provided locale.
+ * 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 locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
- * @returns Two-letter ISO 639-1 language code, falling back to `null` if locale is invalid or language is unsupported.
+ * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {string|null} two-letter ISO639-1 language
  */
 function getLangFromLocale(locale) {
   const adjustedLocale = adjustLocale(locale);
-  if (adjustedLocale != null) {
+  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;
   }
-  return null;
 }
+
 /**
- * Provides corresponding country code (iso2) for locales code with explicit region value.
+ * 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 locale `es-ES`, `en-GB`, `ja-JP`, etc.
- * @returns `null` if the locale is invalid or the region can‘t be identified.
+ * @param {string} locale
+ * @returns {string|null}
  */
 function getCountryFromLocale(locale) {
   const adjustedLocale = adjustLocale(locale);
-  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
+  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 locale `es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
- * @returns The layout direction based on the locale, falling back to `Direction.LTR` if the locale is invalid or unsupported.
+ * @param {string} locale (`es`, `es-ES`, `en-GB`, `en`, `ja`, `ja-JP` etc)
+ * @returns {Direction} The layout direction based on the locale
  */
 function getDirectionFromLocale(locale) {
-  const adjustedLocale = adjustLocale(locale);
-  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language) ? Direction.RTL : Direction.LTR;
+  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;
+  }
 }
 
 /**
@@ -7208,10 +7263,13 @@ const formatWithPattern = (value, pattern) => {
   let patternSymbol = [];
   // valueArray.length increments during the cycle cause we are adding new elements.
   for (let index = 0; index < valueArray.length; index += 1) {
-    patternSymbol = patternWithSymbolsPosition.filter(symbol => symbol.index === index);
+    patternSymbol = patternWithSymbolsPosition.filter(pattern => pattern.index === index);
     // Add pattern's symbol at n position
     if (patternSymbol.length === 1) {
-      valueArray.splice(index, 0, patternSymbol.pop().symbol);
+      const last = patternSymbol.pop();
+      if (last) {
+        valueArray.splice(index, 0, last.symbol);
+      }
     }
   }
   return valueArray.join('');
@@ -7257,7 +7315,7 @@ const countConsecutiveSymbols = (selectionStart, applicablePattern, direction) =
   return groupSize;
 };
 
-const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd, pattern, pastedLength) => {
+const getCursorPositionAfterActionStroke = (action, selectionStart, selectionEnd, pattern, pastedLength) => {
   let cursorPosition = selectionStart;
   switch (action) {
     case 'Backspace':
@@ -7279,36 +7337,36 @@ const getCursorPositionAfteractionstroke = (action, selectionStart, selectionEnd
   }
   return cursorPosition;
 };
-var getCursorPositionAfterKeystroke = getCursorPositionAfteractionstroke;
+var getCursorPositionAfterKeystroke = getCursorPositionAfterActionStroke;
 
 class WithDisplayFormat extends Component {
+  static defaultProps = {
+    autoComplete: 'off',
+    displayPattern: '',
+    value: ''
+  };
   constructor(props) {
     super(props);
-    const {
-      value,
-      displayPattern
-    } = props;
-    const unformattedValue = unformatWithPattern$1(value, displayPattern);
+    const unformattedValue = unformatWithPattern$1(props.value ?? '', props.displayPattern);
     this.state = {
-      value: formatWithPattern$1(unformattedValue, displayPattern),
+      value: formatWithPattern$1(unformattedValue, props.displayPattern),
       historyNavigator: new HistoryNavigator$1(),
       prevDisplayPattern: props.displayPattern,
-      triggerType: null,
-      triggerEvent: null
+      triggerType: 'Initial',
+      triggerEvent: null,
+      selectionStart: 0,
+      selectionEnd: 0,
+      pastedLength: 0
     };
   }
-  static getDerivedStateFromProps(nextProps, previousState) {
-    const {
-      displayPattern
-    } = nextProps;
-    const {
-      prevDisplayPattern
-    } = previousState;
-    if (previousState.prevDisplayPattern !== displayPattern) {
-      const {
-        value,
-        historyNavigator
-      } = previousState;
+  static getDerivedStateFromProps({
+    displayPattern
+  }, {
+    prevDisplayPattern = displayPattern,
+    value,
+    historyNavigator
+  }) {
+    if (prevDisplayPattern !== displayPattern) {
       const unFormattedValue = unformatWithPattern$1(value, prevDisplayPattern);
       historyNavigator.reset();
       return {
@@ -7330,29 +7388,31 @@ class WithDisplayFormat extends Component {
     const {
       displayPattern
     } = this.props;
-    const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
-    if (triggerType === 'Paste' || triggerType === 'Cut') {
-      return triggerType;
-    }
-    if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
-      return triggerEvent.shiftKey ? 'Redo' : 'Undo';
-    }
-    // Detect mouse event redo
-    if (triggerEvent.ctrlKey && charCode === 'd') {
-      return 'Delete';
-    }
-
-    // Android Fix.
-    if (typeof triggerEvent.key === 'undefined') {
-      if (unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
+    if (triggerEvent) {
+      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();
+      if (triggerType === 'Paste' || triggerType === 'Cut') {
+        return triggerType;
+      }
+      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {
+        return triggerEvent.shiftKey ? 'Redo' : 'Undo';
+      }
+      // Detect mouse event redo
+      if (triggerEvent.ctrlKey && charCode === 'd') {
+        return 'Delete';
+      }
+      // Android Fix.
+      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern$1(value, displayPattern).length) {
         return 'Backspace';
       }
+      return triggerEvent.key;
+    } else {
+      // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
+      return 'Paste';
     }
-    return triggerEvent.key;
   };
   resetEvent = () => {
     this.setState({
-      triggerType: null,
+      triggerType: 'Initial',
       triggerEvent: null,
       pastedLength: 0
     });
@@ -7369,14 +7429,13 @@ class WithDisplayFormat extends Component {
     const {
       selectionStart,
       selectionEnd
-    } = event.target;
+    } = event.currentTarget;
     const {
       historyNavigator
     } = this.state;
     const {
       displayPattern
     } = this.props;
-
     // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
     let newFormattedValue = '';
     if (this.detectUndoRedo(event) === 'Undo') {
@@ -7395,8 +7454,8 @@ class WithDisplayFormat extends Component {
       this.setState({
         triggerEvent: event,
         triggerType: 'KeyDown',
-        selectionStart,
-        selectionEnd
+        selectionStart: selectionStart ?? 0,
+        selectionEnd: selectionEnd ?? 0
       });
     }
   };
@@ -7425,7 +7484,6 @@ class WithDisplayFormat extends Component {
   handleOnChange = event => {
     const {
       historyNavigator,
-      triggerEvent,
       triggerType
     } = this.state;
     const {
@@ -7436,9 +7494,7 @@ class WithDisplayFormat extends Component {
       value
     } = event.target;
     let unformattedValue = unformatWithPattern$1(value, displayPattern);
-    const action = triggerEvent === null ?
-    // triggerEvent can be null only in case of "autofilling" (via password manager extension or browser build-in one) events
-    'Paste' : this.getUserAction(unformattedValue);
+    const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
     }
@@ -7448,19 +7504,18 @@ class WithDisplayFormat extends Component {
     const newFormattedValue = formatWithPattern$1(unformattedValue, displayPattern);
     historyNavigator.add(unformattedValue);
     this.handleCursorPositioning(action);
-    const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
     this.setState({
       value: newFormattedValue
-    }, this.resetEvent(), onChange(broadcastValue));
+    }, () => {
+      this.resetEvent();
+      if (onChange) {
+        const broadcastValue = unformatWithPattern$1(newFormattedValue, displayPattern);
+        onChange(broadcastValue);
+      }
+    });
   };
   handleOnBlur = event => {
-    const {
-      displayPattern,
-      onBlur
-    } = this.props;
-    if (onBlur) {
-      onBlur(unformatWithPattern$1(event.target.value, displayPattern));
-    }
+    this.props.onBlur?.(unformatWithPattern$1(event.target.value, this.props.displayPattern));
   };
   handleOnFocus = event => {
     const {
@@ -7509,7 +7564,7 @@ class WithDisplayFormat extends Component {
     const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
       if (triggerEvent) {
-        triggerEvent.target.setSelectionRange(cursorPosition, cursorPosition);
+        triggerEvent.currentTarget.setSelectionRange(cursorPosition, cursorPosition);
       }
       this.setState({
         selectionStart: cursorPosition,
@@ -7519,7 +7574,6 @@ class WithDisplayFormat extends Component {
   };
   render() {
     const {
-      type,
       inputMode,
       className,
       id,
@@ -7536,7 +7590,6 @@ class WithDisplayFormat extends Component {
       value
     } = this.state;
     const renderProps = {
-      type,
       inputMode,
       className,
       id,
@@ -7559,62 +7612,13 @@ class WithDisplayFormat extends Component {
     return this.props.render(renderProps);
   }
 }
-WithDisplayFormat.propTypes = {
-  /**
-   * autocomplete hides our form help so we need to disable it when help text
-   * is present. Chrome ignores autocomplete=off, the only way to disable it is
-   * to provide an 'invalid' value, for which 'disabled' serves.
-   */
-  autoComplete: PropTypes.oneOf(['on', 'off', 'disabled']),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  maxLength: PropTypes.number,
-  minLength: PropTypes.number,
-  name: PropTypes.string,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  readOnly: PropTypes.bool,
-  render: PropTypes.func.isRequired,
-  required: PropTypes.bool,
-  displayPattern: PropTypes.string,
-  type: PropTypes.string,
-  inputMode: PropTypes.string,
-  value: PropTypes.string
-};
-WithDisplayFormat.defaultProps = {
-  autoComplete: 'off',
-  className: null,
-  disabled: false,
-  id: null,
-  maxLength: null,
-  minLength: null,
-  name: null,
-  placeholder: null,
-  readOnly: false,
-  required: false,
-  displayPattern: '',
-  type: 'text',
-  inputMode: null,
-  value: '',
-  onFocus: null,
-  onBlur: null
-};
-var WithDisplayFormat$1 = WithDisplayFormat;
 
-const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
+const InputWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsx("input", {
+  render: renderProps => /*#__PURE__*/jsx(Input, {
     ...renderProps
   })
 });
-InputWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-var InputWithDisplayFormat$1 = InputWithDisplayFormat;
 
 const InstructionsList = ({
   dos,
@@ -9563,79 +9567,111 @@ const countries = [{
   iso3: 'ZWE',
   phone: '+263'
 }];
+var countries$1 = countries;
 
 const longestMatchingPrefix = matchingCodes => matchingCodes.reduce((a, b) => a.phone.length > b.phone.length ? a : b);
 
 const findCountryByCode = code => {
-  if (code.length === 2) {
-    const matchingCodes = countries.filter(country => code.toUpperCase() === country.iso2);
-    if (matchingCodes.length > 0) {
-      return longestMatchingPrefix(matchingCodes);
-    }
+  let matchingCodes;
+  if (code && code.length === 2) {
+    matchingCodes = countries$1.filter(country => code.toUpperCase() === country.iso2);
   }
-  return null;
+  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
 };
 
 /**
  * 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).
+ * @param {string} locale - a string that represent the locale ex:'es-ES'
+ * @param countryCode
+ * @returns {string}
  */
 const setDefaultPrefix = (locale, countryCode) => {
-  const country = (countryCode != null ? findCountryByCode(countryCode) : null) ?? findCountryByCode(getCountryFromLocale(locale) ?? locale);
-  return country?.phone ?? DEFAULT_PHONE_CODE;
+  const country = findCountryByCode(countryCode) ||
+  // when `locale` code has explicit region: `en-GB`, `en-US`, `ar-AE`
+  findCountryByCode(getCountryFromLocale(locale)) ||
+  // when `locale` code is only two chars value: `fr`, `es`
+  findCountryByCode(locale);
+  return country?.phone || DEFAULT_PHONE_CODE;
 };
 
 /**
  *
  * @param phoneNumber
- * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ * @returns {boolean} - returns true for number that starts with '+' and contains a mix of digits and spaces with
+ * at least 4 digits.
  */
-const isValidPhoneNumber = phoneNumber => /^\+[\d-\s]+$/.test(phoneNumber) && (phoneNumber.match(/\d+/g)?.join('').length ?? 0) >= 4;
+const isValidPhoneNumber = phoneNumber => /^\+[\d-\s]+$/.test(phoneNumber) && phoneNumber.match(/\d+/g) && phoneNumber.match(/\d+/g).join('').length >= 4;
 
 const findCountryByPrefix = number => {
-  if (number.length > 1) {
-    const matchingCodes = countries.filter(country => number.startsWith(country.phone));
-    if (matchingCodes.length > 0) {
-      return longestMatchingPrefix(matchingCodes);
-    }
+  let matchingCodes = null;
+  if (number && number.length > 1) {
+    matchingCodes = countries$1.filter(country => number.indexOf(country.phone) === 0);
   }
-  return null;
+  return matchingCodes && matchingCodes.length > 0 ? longestMatchingPrefix(matchingCodes) : null;
 };
 
 /**
- * @param number Phone number in a format like "+447573135343"
+ * Given a sting in a valid format ex:'+447573135343' it returns an object of shape
+ * {prefix=+44 ,suffix=7573135343}
+ *
+ * @param {string} number - a string that defines a phone number.
+ * @returns {{prefix: (string|*), suffix: string, format: string}}
  */
 const explodeNumberModel = number => {
+  let prefix = '';
+  let suffix = '';
+  let format = '';
   const country = findCountryByPrefix(number);
-  return country ? {
-    prefix: country.phone,
-    suffix: number.slice(country.phone.length),
-    format: country.phoneFormat
-  } : {
-    prefix: null,
-    suffix: number.slice(1)
+  if (country) {
+    prefix = country.phone;
+    suffix = number.slice(country.phone.length);
+    format = country.phoneFormat || '';
+  } else {
+    prefix = '';
+    suffix = number.slice(1);
+    format = '';
+  }
+  return {
+    prefix,
+    suffix,
+    format
   };
 };
 
 const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
-const cleanNumber = number => number.match(DIGITS_MATCH)?.join('') ?? '';
+const cleanNumber = number => number.match(DIGITS_MATCH) && number.match(DIGITS_MATCH).join('') || '';
 
-function sortArrayByProperty(arrayToSort, property) {
-  return [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
-}
+// Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
+const sortArrayByProperty = (arrayToSort, property) => [...arrayToSort].sort((a, b) => a[property].localeCompare(b[property]));
 
 const groupCountriesByPrefix = countries => {
-  const countriesByPrefix = new Map();
-  countries.forEach(country => {
-    countriesByPrefix.set(country.phone, [...(countriesByPrefix.get(country.phone) ?? []), country]);
-  });
-  return countriesByPrefix;
+  const groupedArray = countries.reduce((accumulator, country) => {
+    const {
+      name,
+      iso2,
+      iso3,
+      phone
+    } = country;
+    if (accumulator[phone]) {
+      const previousValue = accumulator[phone];
+      accumulator[phone] = {
+        ...previousValue,
+        name: isArray(previousValue.name) ? [...previousValue.name, name] : [previousValue.name, name],
+        iso2: isArray(previousValue.iso2) ? [...previousValue.iso2, iso2] : [previousValue.iso2, iso2],
+        iso3: isArray(previousValue.iso3) ? [...previousValue.iso3, iso3] : [previousValue.iso3, iso3]
+      };
+    } else {
+      accumulator[phone] = country;
+    }
+    return accumulator;
+  }, {});
+  return Object.values(groupedArray);
 };
 
 // Reference fro localeCompare : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
@@ -9643,38 +9679,41 @@ const filterCountriesByIso3 = (countries, iso3Codes) => {
   const iso3CodesSet = new Set(iso3Codes);
   return countries.filter(country => !iso3CodesSet.has(country.iso3));
 };
+
 /**
  * Removes the countries sepecified in the second param
  *
- * @param countries list of country metadata objects
- * @param disabledCountries list of iso3 country codes to remove from the list
+ * @param {Array} countries: list of country metadata objects
+ * @param {Array} disabledCountries: list of iso3 country codes to remove from the list
+ * @returns
  */
 const excludeCountries = (countries, disabledCountries) => {
   return disabledCountries.length > 0 ? filterCountriesByIso3(countries, disabledCountries) : countries;
 };
 
 const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
-const defaultSelectProps = {};
-const defaultDisabledCountries = [];
-const PhoneNumberInput = ({
-  id,
-  required,
-  disabled,
-  initialValue,
-  onChange,
-  onFocus,
-  onBlur,
-  countryCode,
-  searchPlaceholder = 'Prefix',
-  size = Size.MEDIUM,
-  placeholder,
-  selectProps = defaultSelectProps,
-  disabledCountries = defaultDisabledCountries
-}) => {
+const PhoneNumberInput = props => {
+  const {
+    id,
+    onChange,
+    searchPlaceholder,
+    disabled,
+    required,
+    size,
+    placeholder,
+    onFocus,
+    onBlur,
+    countryCode,
+    selectProps,
+    disabledCountries
+  } = props;
   const {
     locale
   } = useIntl();
-  const [internalValue, setInternalValue] = useState(() => {
+  const getInitialValue = () => {
+    const {
+      initialValue
+    } = props;
     const cleanValue = initialValue ? cleanNumber(initialValue) : null;
     if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
       return {
@@ -9683,16 +9722,54 @@ const PhoneNumberInput = ({
       };
     }
     return explodeNumberModel(cleanValue);
-  });
+  };
+  const [internalValue, setInternalValue] = useState(getInitialValue());
   const [broadcastedValue, setBroadcastedValue] = useState(null);
-  const countriesByPrefix = useMemo(() => groupCountriesByPrefix(sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3')), [disabledCountries]);
+  const getSelectOptions = () => {
+    const countriesList = excludeCountries(countries$1, disabledCountries);
+    const listSortedByISO3 = groupCountriesByPrefix(sortArrayByProperty(countriesList, 'iso3'));
+    return listSortedByISO3.map(option => {
+      const {
+        phone,
+        iso3,
+        iso2,
+        name
+      } = option;
+      let note = '';
+      if (iso3) {
+        note = isArray(iso3) ? iso3.join(', ') : iso3;
+      } else if (iso2) {
+        note = isArray(iso2) ? iso2.join(', ') : iso2;
+      }
+      return {
+        type: 'option',
+        value: {
+          value: phone,
+          label: phone,
+          note: note
+        },
+        filterMatchers: [phone, note, name]
+      };
+    });
+  };
+  const options = getSelectOptions();
+  const onPrefixChange = ({
+    value
+  }) => {
+    setInternalValue({
+      prefix: value,
+      suffix: internalValue.suffix
+    });
+  };
   const onSuffixChange = event => {
-    const suffix = event.target.value;
-    if (ALLOWED_PHONE_CHARS.test(suffix)) {
-      setInternalValue(prev => ({
-        ...prev,
-        suffix
-      }));
+    const {
+      value = ''
+    } = event.target;
+    if (ALLOWED_PHONE_CHARS.test(value)) {
+      setInternalValue({
+        prefix: internalValue.prefix,
+        suffix: value
+      });
     }
   };
   const onPaste = event => {
@@ -9700,22 +9777,31 @@ const PhoneNumberInput = ({
       return;
     }
     const pastedValue = (event.nativeEvent.clipboardData.getData('text/plain') || '').replace(/(\s|-)+/g, '');
-    const pastedNumber = explodeNumberModel(pastedValue);
-    if (pastedNumber.prefix != null && countriesByPrefix.has(pastedNumber.prefix) && ALLOWED_PHONE_CHARS.test(pastedNumber.suffix)) {
-      setInternalValue(pastedNumber);
+    const {
+      prefix: pastedPrefix,
+      suffix: pastedSuffix
+    } = explodeNumberModel(pastedValue);
+    const selectedPrefix = options.find(({
+      value
+    }) => value.value === pastedPrefix);
+    if (selectedPrefix && ALLOWED_PHONE_CHARS.test(pastedSuffix)) {
+      setInternalValue({
+        prefix: pastedPrefix,
+        suffix: pastedSuffix
+      });
     }
   };
   useEffect(() => {
     if (broadcastedValue === null) {
       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;
     }
     const newValue = isValidPhoneNumber(internalPhoneNumber) ? cleanNumber(internalPhoneNumber) : null;
-    onChange(newValue, internalValue.prefix ?? '');
+    onChange(newValue, internalValue.prefix);
     setBroadcastedValue(internalValue);
   }, [onChange, broadcastedValue, internalValue]);
   return /*#__PURE__*/jsxs("div", {
@@ -9723,29 +9809,18 @@ const PhoneNumberInput = ({
     children: [/*#__PURE__*/jsx("div", {
       className: "tw-telephone__country-select",
       children: /*#__PURE__*/jsx(SelectInput, {
-        placeholder: "Select an option\u2026",
-        items: [...countriesByPrefix].map(([prefix, countries]) => ({
-          type: 'option',
-          value: prefix,
-          filterMatchers: [prefix, ...countries.map(country => country.name), ...countries.map(country => country.iso3)]
-        })),
-        value: internalValue.prefix,
-        renderValue: (prefix, withinTrigger) => /*#__PURE__*/jsx(SelectInputOptionContent, {
-          title: prefix,
-          note: withinTrigger ? undefined : countriesByPrefix.get(prefix)?.map(country => country.iso3).join(', ')
+        placeholder: "Select an option...",
+        items: options,
+        value: options.find(item => item.value.value === internalValue.prefix)?.value,
+        renderValue: (option, withinTrigger) => /*#__PURE__*/jsx(SelectInputOptionContent, {
+          title: option.label,
+          note: withinTrigger ? undefined : option.note
         }),
         filterable: true,
         filterPlaceholder: searchPlaceholder,
         disabled: disabled,
         size: size,
-        onChange: prefix => {
-          const country = prefix != null ? findCountryByPrefix(prefix) : null;
-          setInternalValue(prev => ({
-            ...prev,
-            prefix,
-            format: country?.phoneFormat
-          }));
-        },
+        onChange: onPrefixChange,
         ...selectProps
       })
     }), /*#__PURE__*/jsx("div", {
@@ -9771,6 +9846,37 @@ const PhoneNumberInput = ({
     })]
   });
 };
+PhoneNumberInput.propTypes = {
+  id: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  initialValue: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  countryCode: PropTypes.string,
+  searchPlaceholder: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  placeholder: PropTypes.string,
+  selectProps: PropTypes.object,
+  /** List of iso3 codes of countries to remove from the list */
+  disabledCountries: PropTypes.arrayOf(PropTypes.string)
+};
+PhoneNumberInput.defaultProps = {
+  id: null,
+  required: false,
+  disabled: false,
+  initialValue: null,
+  onFocus() {},
+  onBlur() {},
+  countryCode: null,
+  searchPlaceholder: 'Prefix',
+  size: Size.MEDIUM,
+  placeholder: '',
+  selectProps: {},
+  disabledCountries: []
+};
+var PhoneNumberInput$1 = PhoneNumberInput;
 
 const Progress = ({
   className,
@@ -12189,17 +12295,12 @@ Tabs.defaultProps = {
 };
 var Tabs$1 = Tabs;
 
-const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat$1, {
+const TextareaWithDisplayFormat = props => /*#__PURE__*/jsx(WithDisplayFormat, {
   ...props,
-  render: renderProps => /*#__PURE__*/jsx("textarea", {
+  render: renderProps => /*#__PURE__*/jsx(TextArea, {
     ...renderProps
   })
 });
-TextareaWithDisplayFormat.propTypes = {
-  displayPattern: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-var TextareaWithDisplayFormat$1 = TextareaWithDisplayFormat;
 
 /* eslint-disable jsx-a11y/no-autofocus */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
@@ -15496,5 +15597,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat$1 as InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat$1 as TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton$1 as CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput$1 as DateInput, DateLookup$1 as DateLookup, DateMode, Decision$1 as Decision, Presentation as DecisionPresentation, Type as DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList$1 as InstructionsList, LanguageProvider, Layout$1 as Layout, Link, ListItem$1 as ListItem, Loader$1 as Loader, Logo$1 as Logo, LogoType, Markdown$1 as Markdown, MarkdownNodeType, Modal, Money$1 as Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList$1 as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput$1 as PhoneNumberInput, Popover$2 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider$1 as Provider, RTL_LANGUAGES, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RadioOption$1 as RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel$1 as SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider$1 as SnackbarProvider, Status, StatusIcon, Stepper, Sticky$1 as Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip$1 as Tooltip, Type$1 as Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.esm.js.map