chore: update package version to 1.9.8-beta-4 and enhance country select functionality

Author: AbhishekA1509

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.9.8-beta-3",
+    "version": "1.9.8-beta-4",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -32,14 +32,29 @@ const CountrySelect = ({
         searchText,
     ) => {
         const searchValue = searchText.toLowerCase()
-        const searchCriterion = [option.data.value.name.toLowerCase(), `+${option.data.value.dialCode.toLowerCase()}`]
+        const searchCriterion = [
+            option.data.value.name.toLowerCase(),
+            `+${option.data.value.dialCode.toLowerCase()}`,
+            option.data.value.iso2.toLowerCase(),
+        ]
 
         return searchCriterion.some((criterion) => criterion.includes(searchValue))
     }
 
     const getOptionValue: SelectPickerProps<(typeof countryOptions)[number]['value']>['getOptionValue'] = (option) =>
         option.value.iso2
 
+    const formatOptionLabel: SelectPickerProps<(typeof countryOptions)[number]['value']>['formatOptionLabel'] = (
+        data,
+        formatOptionLabelMeta,
+    ) => {
+        if (formatOptionLabelMeta.context === 'menu') {
+            return data.label
+        }
+
+        return `+${data.value.dialCode}`
+    }
+
     return (
         <SelectPicker<(typeof countryOptions)[number]['value'], false>
             inputId={`select-picker__country-select--${name}`}
@@ -57,11 +72,12 @@ const CountrySelect = ({
             onMenuOpen={onMenuOpen}
             icon={
                 variant === 'selectPhoneCode' && selectedOption?.value?.iso2 ? (
-                    <FlagImage country={selectedOption?.value?.iso2} />
+                    <FlagImage country={selectedOption?.value?.iso2} size={20} />
                 ) : null
             }
-            controlShouldRenderValue={variant !== 'selectPhoneCode'}
+            formatOptionLabel={formatOptionLabel}
             fullWidth
+            ariaLabel={variant === 'default' ? 'Country' : 'Phone Code'}
         />
     )
 }

src/Shared/Components/CountrySelect/CountrySelect.component.tsx

@@ -20,7 +20,7 @@ const PhoneInput = ({
     // TODO: There are some issues with argentina country code, need to fix it
     const { inputValue, handlePhoneValueChange, inputRef, country, setCountry } = usePhoneInput({
         value: phoneValue,
-        forceDialCode: true,
+        disableDialCodeAndPrefix: true,
         onChange: (data) => {
             // So initially this will format the phone or set the dial code to us if no phone is there, but since we expect user to enter phone number, we will ignore the first call
             if (!hasValueInitialized.current) {
@@ -51,7 +51,7 @@ const PhoneInput = ({
 
             <div className="flexbox-col dc__gap-4 dc__grid">
                 <div className="flexbox dc__gap-8 w-100">
-                    <div className={`flexbox dc__mxw-50-per ${isCountrySelectOpen ? 'w-100' : ''}`}>
+                    <div className={`flexbox ${isCountrySelectOpen ? 'dc__mxw-50-per w-100' : 'dc__mnw-100'}`}>
                         <CountrySelect
                             placeholder={null}
                             selectedCountry={country.iso2}
@@ -73,6 +73,7 @@ const PhoneInput = ({
                         inputRef={inputRef}
                         error={error}
                         hideFormFieldInfo
+                        ariaLabel="Phone Number"
                         fullWidth
                     />
                 </div>