@nexusui/components/core/common/PhoneNumber/CountryMenu.js

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import{jsx as e}from"react/jsx-runtime";import{useRef as o,useMemo as r,useCallback as n}from"react";import t from"@mui/material/Menu";import i from"clsx";import s from"./CountryItem.js";const a=a=>{const{anchorEl:l,onClose:u,onSelect:m,selectedCountry:d,allCountries:c,highPriorityCountries:f}=a,C=o({}),p=o(null),h=r((()=>{let e=Array.from(c).sort(((e,o)=>e.name.localeCompare(o.name)));if(f&&f?.length>0){const o=e.filter((e=>f.includes(e.iso2))),r=e.filter((e=>!f.includes(e.iso2)));o.sort(((e,o)=>f.indexOf(e.iso2)-f.indexOf(o.iso2))),e=[...o,...r]}return e}),[c,f]),x=n((e=>Boolean(d&&d.dialCode===e.dialCode)),[d]);return e(t,{"data-testid":"NexusPhoneNumber-country-menu",className:i("NexusCountryMenu-root","NexusPhoneNumber-country-menu"),ref:p,id:"country-menu",anchorEl:l,open:Boolean(l),onClose:u,children:h?.map(((o,r)=>e(s,{"data-testid":`NexusPhoneNumber-country-menu-item-${o.iso2}`,selected:x(o),onClick:()=>(e=>{m?.(e)})(o),"data-iso2":o.iso2,name:o.name,iso2:o.iso2,dialCode:o.dialCode,ref:e=>{e&&(C.current[`flag_no_${r}`]=e)}},`preferred_${o.iso2}_${r}`)))})};export{a as default};