@transferwise/components 0.0.0-experimental-4b7aba1 → 0.0.0-experimental-16e2eec

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

@@ -1,2 +1,7 @@
-export function isValidPhoneNumber(phoneNumber: any): boolean;
+/**
+ *
+ * @param phoneNumber
+ * @returns True if number that starts with "+" and contains a mix of digits and spaces with at least 4 digits.
+ */
+export declare const isValidPhoneNumber: (phoneNumber: string) => boolean;
 //# sourceMappingURL=isValidPhoneNumber.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"isValidPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.js"],"names":[],"mappings":"AAMO,sDAHM,OAAO,CAM4B"}
+{"version":3,"file":"isValidPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/isValidPhoneNumber/isValidPhoneNumber.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,gBAAiB,MAAM,YACsC,CAAC"}

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

@@ -1,2 +1,3 @@
-export function longestMatchingPrefix(matchingCodes: any): any;
+import { Country } from '../../data/countries';
+export declare const longestMatchingPrefix: (matchingCodes: Country[]) => Country;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/longestMatchingPrefix/index.js"],"names":[],"mappings":"AAAO,+DACoE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/longestMatchingPrefix/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,eAAO,MAAM,qBAAqB,kBAAmB,OAAO,EAAE,YACa,CAAC"}

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

@@ -1,2 +1,8 @@
-export function setDefaultPrefix(locale: string, countryCode: any): string;
+/**
+ * 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 declare const setDefaultPrefix: (locale: string, countryCode?: string) => string;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/setDefaultPrefix/index.js"],"names":[],"mappings":"AAeO,yCAJI,MAAM,qBAEJ,MAAM,CAWlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/setDefaultPrefix/index.ts"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,WAAY,MAAM,gBAAgB,MAAM,WAKpE,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,2 +1,2 @@
-export function sortArrayByProperty(arrayToSort: any, property: any): any[];
+export declare function sortArrayByProperty<T extends Record<PropertyKey, string>>(arrayToSort: T[], property: keyof T): T[];
 //# sourceMappingURL=sortArrayByProperty.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sortArrayByProperty.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.js"],"names":[],"mappings":"AACO,4EACkE"}
+{"version":3,"file":"sortArrayByProperty.d.ts","sourceRoot":"","sources":["../../../../../src/phoneNumberInput/utils/sortArrayByProperty/sortArrayByProperty.ts"],"names":[],"mappings":"AAAA,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,EACvE,WAAW,EAAE,CAAC,EAAE,EAChB,QAAQ,EAAE,MAAM,CAAC,OAGlB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-4b7aba1",
+  "version": "0.0.0-experimental-16e2eec",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/common/locale/{index.spec.js → index.spec.ts}

@@ -24,8 +24,8 @@ describe('locale utils', () => {
       ['zh_HK', 'zh'],
       ['ja-JP', 'ja'],
       ['zhHK', null],
-      [null, null],
-      [undefined, null],
+      [null as any, null],
+      [undefined as any, null],
       ['', null],
       ['  ', null],
       ['ar-dz', null],
@@ -51,8 +51,8 @@ describe('locale utils', () => {
       ['zh_HK', 'zh-HK'],
       ['ja-JP', 'ja-JP'],
       ['zhHK', null],
-      [null, null],
-      [undefined, null],
+      [null as any, null],
+      [undefined as any, null],
       ['', null],
       ['  ', null],
       ['ar-dz', 'ar-DZ'],

package/src/common/locale/index.ts

@@ -0,0 +1,96 @@
+import { Direction } from '..';
+
+export const DEFAULT_LANG = 'en';
+export const DEFAULT_LOCALE = 'en-GB';
+
+/**
+ * Languages written right-to-left.
+ */
+export const RTL_LANGUAGES = ['ar', 'he'];
+
+/**
+ * @deprecated The source of truth for supported languages lives in Crab.
+ */
+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, replacing `_` with `-`.
+ *
+ * @param locale `es`, `es_ES`, `en-GB`, `en`, `ja`, `ja-JP`, etc.
+ * @returns `null` if locale is unrecognized by `Intl.Locale`.
+ */
+export function adjustLocale(locale: string) {
+  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);
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides corresponding lang (iso2) for provided locale.
+ *
+ * @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.
+ */
+export function getLangFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  if (adjustedLocale != null) {
+    const { language } = new Intl.Locale(adjustedLocale);
+    if (SUPPORTED_LANGUAGES.includes(language)) {
+      return language;
+    }
+  }
+  return null;
+}
+
+/**
+ * Provides corresponding country code (iso2) for locales code with explicit region value.
+ *
+ * @param locale `es-ES`, `en-GB`, `ja-JP`, etc.
+ * @returns `null` if the locale is invalid or the region can‘t be identified.
+ */
+export function getCountryFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null ? new Intl.Locale(adjustedLocale).region ?? null : null;
+}
+
+/**
+ * Provides the layout direction for a given locale.
+ *
+ * @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.
+ */
+export function getDirectionFromLocale(locale: string) {
+  const adjustedLocale = adjustLocale(locale);
+  return adjustedLocale != null && RTL_LANGUAGES.includes(new Intl.Locale(adjustedLocale).language)
+    ? Direction.RTL
+    : Direction.LTR;
+}

package/src/index.ts

@@ -106,7 +106,6 @@ export { default as RadioGroup } from './radioGroup';
 export { default as RadioOption } from './radioOption';
 export { default as Section } from './section';
 export { default as Select } from './select';
-export { default as SegmentedControl } from './segmentedControl';
 export { default as SlidingPanel } from './slidingPanel';
 export { default as SnackbarPortal } from './snackbar/Snackbar';
 export { default as SnackbarProvider } from './snackbar/SnackbarProvider';

package/src/main.css

@@ -4640,104 +4640,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }
-.segmented-control {
-  box-sizing: border-box;
-  --segment-highlight-width: 0;
-  --segment-highlight-x: var(--size-4);
-}
-.segmented-control__segments {
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  background: rgba(134,167,189,0.10196);
-  background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  width: 100%;
-  transition: outline 300ms;
-  outline: 2px solid transparent;
-}
-.segmented-control--input:has(:focus-visible) > .segmented-control__segments::after {
-  outline: 2px solid var(--color-interactive-primary);
-}
-.segmented-control__segments::after {
-  content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
-  position: absolute;
-  top: 4px;
-  top: var(--size-4);
-  bottom: 4px;
-  bottom: var(--size-4);
-  left: var(--segment-highlight-x);
-  z-index: 0;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  transition: left 300ms;
-}
-.segmented-control__segments--no-animate::after {
-  transition: none !important;
-}
-.segmented-control__segment {
-  position: relative;
-  flex: 1 1 100%;
-  flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
-  padding: 8px 16px;
-  padding: var(--size-8) var(--size-16);
-  margin: 0;
-  border-radius: 24px;
-  border-radius: var(--size-24);
-  z-index: 1;
-  cursor: pointer;
-  transition: font-weight 300ms, background 300ms;
-}
-.segmented-control__segment:hover {
-  background: rgba(0,0,0,0.10196);
-  background: var(--color-background-overlay);
-}
-.segmented-control__radio-input {
-  position: fixed;
-  opacity: 0;
-  pointer-events: none;
-}
-.segmented-control__button {
-  background: none;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  border: none;
-  outline: none;
-  width: 100%;
-  height: 100%;
-  font: inherit;
-  padding: none;
-  outline: 2px solid transparent;
-}
-.segmented-control__button:focus {
-  outline-offset: 0px;
-}
-.segmented-control__button:focus-visible {
-  outline-color: var(--color-interactive-primary);
-}
-.segmented-control__selected-segment:hover {
-  background: transparent;
-}
-.segmented-control__selected-segment {
-  font-weight: 800;
-  font-weight: var(--font-weight-bold);
-}
-.segmented-control__label-text {
-  word-wrap: break-word;
-  color: var(--color-interactive-primary);
-}
 .np-summary {
   min-width: 280px;
 }

package/src/main.less

@@ -53,7 +53,6 @@
 @import "./statusIcon/StatusIcon.less";
 @import "./stepper/Stepper.less";
 @import "./select/Select.less";
-@import "./segmentedControl/SegmentedControl.less";
 @import "./summary/Summary.less";
 @import "./switch/Switch.less";
 @import "./tabs/Tabs.less";

package/src/phoneNumberInput/PhoneNumberInput.spec.js

@@ -37,11 +37,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set prefix control to default UK value', () => {
-      expect(select.props().value).toStrictEqual({
-        value: '+44',
-        note: 'GBR, GGY, IMN, JEY',
-        label: '+44',
-      });
+      expect(select.props().value).toBe('+44');
     });
 
     it('should set number control to empty', () => {
@@ -49,11 +45,11 @@ describe('Given a telephone number component', () => {
     });
 
     it('should not disable the select', () => {
-      expect(select.prop('disabled')).toBe(false);
+      expect(select.prop('disabled')).toBeFalsy();
     });
 
     it('should not disable the input', () => {
-      expect(input.prop('disabled')).toBe(false);
+      expect(input.prop('disabled')).toBeFalsy();
     });
   });
 
@@ -65,7 +61,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set control values correctly', () => {
-      expect(select.props().value.value).toStrictEqual('+39');
+      expect(select.props().value).toBe('+39');
       expect(input.prop('value')).toBe('123456789');
     });
   });
@@ -92,8 +88,8 @@ describe('Given a telephone number component', () => {
       input = component.find(NUMBER_SELECTOR);
     });
 
-    it('should render input with null id', () => {
-      expect(input.prop('id')).toBeNull();
+    it('should render input with unspecified id', () => {
+      expect(input.prop('id')).toBeUndefined();
     });
   });
 
@@ -118,7 +114,7 @@ describe('Given a telephone number component', () => {
       it(`${number} code should update the value properly`, () => {
         simulatePaste(component.find('input'), number);
 
-        expect(select().props().value.value).toStrictEqual(countryCode);
+        expect(select().props().value).toBe(countryCode);
         expect(input().prop('value')).toBe(localNumber);
         expect(props.onChange).toHaveBeenCalledWith(number.replace(/(\s|-)+/g, ''), countryCode);
       });
@@ -126,28 +122,28 @@ describe('Given a telephone number component', () => {
 
     it('should not paste invalid characters', () => {
       simulatePaste(component.find('input'), '+36asdasdasd');
-      expect(select().props().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+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().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+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().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+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().value.value).toStrictEqual('+39');
+      expect(select().props().value).toBe('+39');
       expect(input().prop('value')).toBe('123456789');
       expect(props.onChange).not.toHaveBeenCalled();
     });
@@ -161,7 +157,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should set the select to the longest matching prefix', () => {
-      expect(select.props().value.value).toStrictEqual('+1868');
+      expect(select.props().value).toBe('+1868');
     });
 
     it('should set the number input to the rest of the number', () => {
@@ -177,7 +173,7 @@ describe('Given a telephone number component', () => {
     });
 
     it('should empty the select', () => {
-      expect(select.props().value).toBeUndefined();
+      expect(select.props().value).toBeNull();
     });
 
     it('should put the whole value in the input without the plus', () => {
@@ -191,7 +187,7 @@ describe('Given a telephone number component', () => {
       select = component.find(PREFIX_SELECT_SELECTOR);
       input = component.find(NUMBER_SELECTOR);
 
-      expect(select.props().value.value).toStrictEqual('+44');
+      expect(select.props().value).toBe('+44');
       expect(input.prop('value')).toBe('');
     });
   });
@@ -254,7 +250,7 @@ describe('Given a telephone number component', () => {
       });
 
       it('should use the prefix of the supplied value', () => {
-        expect(select.props().value.value).toBe('+1');
+        expect(select.props().value).toBe('+1');
       });
     });
 
@@ -268,7 +264,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should default the prefix to the local country', () => {
-          expect(select.props().value.value).toBe('+34');
+          expect(select.props().value).toBe('+34');
         });
       });
 
@@ -281,7 +277,7 @@ describe('Given a telephone number component', () => {
         });
 
         it('should override locale prefix with country specific prefix', () => {
-          expect(select.props().value.value).toBe('+1');
+          expect(select.props().value).toBe('+1');
         });
       });
     });
@@ -349,7 +345,7 @@ describe('Given a telephone number component', () => {
 
     it('renders Select component with expected props', () => {
       const select = component.find(PREFIX_SELECT_SELECTOR);
-      expect(select.prop('className')).toStrictEqual('custom-class');
+      expect(select.prop('className')).toBe('custom-class');
     });
   });
 });

package/src/phoneNumberInput/PhoneNumberInput.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+import { Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
+import { SelectInput, SelectInputOptionContent, SelectInputProps } from '../inputs/SelectInput';
+
+import countries from './data/countries';
+import {
+  explodeNumberModel,
+  isValidPhoneNumber,
+  cleanNumber,
+  setDefaultPrefix,
+  sortArrayByProperty,
+  groupCountriesByPrefix,
+  excludeCountries,
+  findCountryByPrefix,
+} from './utils';
+import { PhoneNumber } from './utils/explodeNumberModel';
+
+const ALLOWED_PHONE_CHARS = /^$|^[\d-\s]+$/;
+
+export interface PhoneNumberInputProps {
+  id?: string;
+  required?: boolean;
+  disabled?: boolean;
+  initialValue?: string;
+  onChange: (value: string | null, prefix: string) => void;
+  onFocus?: React.FocusEventHandler<HTMLInputElement>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement>;
+  countryCode?: string;
+  searchPlaceholder?: string;
+  size?: SizeSmall | SizeMedium | SizeLarge;
+  placeholder?: string;
+  selectProps?: Partial<SelectInputProps<string | null>>;
+  /** List of iso3 codes of countries to remove from the list */
+  disabledCountries?: string[];
+}
+
+const defaultSelectProps = {} satisfies PhoneNumberInputProps['selectProps'];
+const defaultDisabledCountries = [] satisfies PhoneNumberInputProps['disabledCountries'];
+
+const PhoneNumberInput = ({
+  id,
+  required,
+  disabled,
+  initialValue,
+  onChange,
+  onFocus,
+  onBlur,
+  countryCode,
+  searchPlaceholder = 'Prefix',
+  size = Size.MEDIUM,
+  placeholder,
+  selectProps = defaultSelectProps,
+  disabledCountries = defaultDisabledCountries,
+}: PhoneNumberInputProps) => {
+  const { locale } = useIntl();
+
+  const [internalValue, setInternalValue] = useState<PhoneNumber>(() => {
+    const cleanValue = initialValue ? cleanNumber(initialValue) : null;
+
+    if (!cleanValue || !isValidPhoneNumber(cleanValue)) {
+      return {
+        prefix: setDefaultPrefix(locale, countryCode),
+        suffix: '',
+      };
+    }
+
+    return explodeNumberModel(cleanValue);
+  });
+  const [broadcastedValue, setBroadcastedValue] = useState<PhoneNumber | null>(null);
+
+  const countriesByPrefix = useMemo(
+    () =>
+      groupCountriesByPrefix(
+        sortArrayByProperty(excludeCountries(countries, disabledCountries), 'iso3'),
+      ),
+    [disabledCountries],
+  );
+
+  const onSuffixChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const suffix = event.target.value;
+    if (ALLOWED_PHONE_CHARS.test(suffix)) {
+      setInternalValue((prev) => ({ ...prev, suffix }));
+    }
+  };
+
+  const onPaste: React.ClipboardEventHandler<HTMLInputElement> = (event) => {
+    if (!event.nativeEvent.clipboardData) {
+      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);
+    }
+  };
+
+  useEffect(() => {
+    if (broadcastedValue === null) {
+      return setBroadcastedValue(internalValue);
+    }
+
+    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 ?? '', // TODO: Allow `null` in public API
+    );
+    setBroadcastedValue(internalValue);
+  }, [onChange, broadcastedValue, internalValue]);
+
+  return (
+    <div className="tw-telephone">
+      <div className="tw-telephone__country-select">
+        <SelectInput
+          placeholder="Select an option…"
+          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) => (
+            <SelectInputOptionContent
+              title={prefix}
+              note={
+                withinTrigger
+                  ? undefined
+                  : countriesByPrefix
+                      .get(prefix)
+                      ?.map((country) => country.iso3)
+                      .join(', ')
+              }
+            />
+          )}
+          filterable
+          filterPlaceholder={searchPlaceholder}
+          disabled={disabled}
+          size={size}
+          onChange={(prefix) => {
+            const country = prefix != null ? findCountryByPrefix(prefix) : null;
+            setInternalValue((prev) => ({ ...prev, prefix, format: country?.phoneFormat }));
+          }}
+          {...selectProps}
+        />
+      </div>
+      <div className="tw-telephone__number-input">
+        <div className={`input-group input-group-${size}`}>
+          <input
+            id={id}
+            autoComplete="tel-national"
+            name="phoneNumber"
+            inputMode="numeric"
+            value={internalValue.suffix}
+            className="form-control"
+            disabled={disabled}
+            required={required}
+            placeholder={placeholder}
+            onChange={onSuffixChange}
+            onPaste={onPaste}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PhoneNumberInput;

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('') ?? '';