chore: update version to 1.9.5-beta-11 in package.json and package-lock.json; add onMenuOpen and onMenuClose props to CountrySelect and PhoneInput components

Author: AbhishekA1509

package-lock.json

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

package.json

@@ -14,6 +14,8 @@ const CountrySelect = ({
     name,
     variant = 'default',
     size,
+    onMenuClose,
+    onMenuOpen,
 }: CountrySelectProps) => {
     const countryOptions = useMemo(() => getCountryOptions(variant), [variant])
 
@@ -51,12 +53,15 @@ const CountrySelect = ({
             size={size}
             filterOption={filterOption}
             getOptionValue={getOptionValue}
+            onMenuClose={onMenuClose}
+            onMenuOpen={onMenuOpen}
             icon={
                 variant === 'selectPhoneCode' && selectedOption?.value?.iso2 ? (
                     <FlagImage country={selectedOption?.value?.iso2} />
                 ) : null
             }
             controlShouldRenderValue={variant !== 'selectPhoneCode'}
+            fullWidth
         />
     )
 }

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

@@ -2,7 +2,10 @@ import { CountryISO2Type } from '@Shared/index'
 import { SelectPickerProps } from '../SelectPicker'
 
 export interface CountrySelectProps
-    extends Pick<SelectPickerProps, 'required' | 'label' | 'error' | 'placeholder' | 'size'>,
+    extends Pick<
+            SelectPickerProps,
+            'required' | 'label' | 'error' | 'placeholder' | 'size' | 'onMenuOpen' | 'onMenuClose'
+        >,
         Required<Pick<SelectPickerProps, 'name'>> {
     selectedCountry: CountryISO2Type
     handleChange: (iso2: CountryISO2Type) => void

src/Shared/Components/CountrySelect/types.ts

@@ -1,6 +1,6 @@
 import { usePhoneInput } from 'react-international-phone'
 import { CountryISO2Type } from '@Shared/index'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { PhoneInputProps } from './types'
 import { CountrySelect } from '../CountrySelect'
 import { CustomInput } from '../CustomInput'
@@ -31,6 +31,16 @@ const PhoneInput = ({
         },
     })
 
+    const [isCountrySelectOpen, setIsCountrySelectOpen] = useState<boolean>(false)
+
+    const handleOpenCountrySelect = () => {
+        setIsCountrySelectOpen(true)
+    }
+
+    const handleCloseCountrySelect = () => {
+        setIsCountrySelectOpen(false)
+    }
+
     const handleUpdateCountry = (updatedCountry: CountryISO2Type) => {
         setCountry(updatedCountry)
     }
@@ -41,14 +51,16 @@ 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 mw-76">
+                    <div className={`flexbox dc__mxw-50-per ${isCountrySelectOpen ? 'w-100' : ''}`}>
                         <CountrySelect
                             placeholder={null}
                             selectedCountry={country.iso2}
                             variant="selectPhoneCode"
                             handleChange={handleUpdateCountry}
                             name={countryCodeSelectName}
                             size={countryCodeSelectSize}
+                            onMenuClose={handleCloseCountrySelect}
+                            onMenuOpen={handleOpenCountrySelect}
                         />
                     </div>