Telephone number country menu (#156)

This PR aims to fix the country menu in order to sort alphabetically the
countries and to add the possibility to customize the menu width (200 by
default)

Author: Michele-Masciave

CHANGELOG.md

@@ -10,10 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - support into `requiredFields` property of `Form` component, for nested objects and arrays.
-- `form` helper functions
+- `form` helper functions.
+- `countryMenuWidth` property to `TelephoneNumberInput` in order to customize the country menu width.
 
 ### Fixed
 
+- `TelephoneNumberInput` countries order, in order to be alphabetically sorted.
 - Required field label on `FormGroupLayoutLabel`, `ColorPicker`, `TelephoneNumberInput`, `TypeaheadTextField` (hence `StaticTypeaheadInput` and `AsyncTypeaheadInput`) in order to display \* also on nested and array fields.
 
   1. `requiredFields` can still accept a `FieldPath<T>[]`

src/lib/TelephoneNumberInput.tsx

@@ -17,6 +17,7 @@ interface TelephoneNumberInputProps<T extends FieldValues>
   placeholder?: string;
   renderAutocompleteField?: (children: ReactNode) => ReactNode;
   locale?: string;
+  countryMenuWidth?: number;
 }
 
 const TelephoneNumberInput = <T extends FieldValues>(props: TelephoneNumberInputProps<T>) => {

src/lib/components/TelephoneNumberInput/TelephoneNumberAutocomplete.tsx

@@ -12,7 +12,10 @@ import { TextField } from "@mui/material";
 import { textFieldBootstrapStyle } from "src/lib/helpers/mui";
 
 interface TelephoneNumberAutocompleteProps<T extends FieldValues>
-  extends Pick<TelephoneNumberInputProps<T>, "pinnedCountries" | "locale" | "useBootstrapStyle" | "name" | "onChange"> {
+  extends Pick<
+    TelephoneNumberInputProps<T>,
+    "pinnedCountries" | "locale" | "useBootstrapStyle" | "name" | "onChange" | "countryMenuWidth"
+  > {
   popupState: PopupState;
   nationalPhoneNumber: string | undefined;
   country: Country;
@@ -24,6 +27,7 @@ const TelephoneNumberAutocomplete = <T extends FieldValues>(props: TelephoneNumb
     pinnedCountries = [],
     locale,
     useBootstrapStyle,
+    countryMenuWidth = 200,
     name,
     onChange: propsOnChange,
     popupState,
@@ -42,7 +46,7 @@ const TelephoneNumberAutocomplete = <T extends FieldValues>(props: TelephoneNumb
       disableClearable={false}
       getOptionDisabled={(option) => option.disabled ?? false}
       renderInput={(params) => <TextField {...params} inputRef={inputRef} />}
-      sx={{ ...(useBootstrapStyle && textFieldBootstrapStyle), width: 200 }}
+      sx={{ ...(useBootstrapStyle && textFieldBootstrapStyle), width: countryMenuWidth }}
       onChange={(_, value, reason) => {
         // cannot be cleared
         if (reason === "clear") {

src/lib/helpers/telephoneNumber.ts

@@ -100,7 +100,11 @@ const getCountriesOptions = (pinnedRegions: RegionCode[], locale?: string): Labe
         ? locale
         : undefined;
 
-  const supportedRegions = phoneNumberUtil.getSupportedRegions().filter((x) => !pinnedRegions.includes(x));
+  const supportedRegions = phoneNumberUtil
+    .getSupportedRegions()
+    .filter((x) => !pinnedRegions.includes(x))
+    .sort((a, b) => a.localeCompare(b));
+
   let labelValueOptions = [];
 
   if (pinnedRegions.length > 0) {