react-phonenumber-text-input/dist/esm/components/SearchSelect/SearchSelect.js

an international phone number input component for React.

import e,{useState as n,useMemo as r}from"react";import{createPortal as t}from"react-dom";import{s as o}from"../../style-inject.es-e87a8d02.js";import c from"./AffixWrapper.js";import a from"./SelectOption.js";import i from"../../hooks/useMemoizedFn.js";import{g as p}from"../../unicode-e614313e.js";import"../../utils/getCountryCallingCode.js";o(".react-phone-input__search-select {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  min-height: 30px;\n  width: 53px;\n  font-size: 14px;\n  flex-shrink: 0;\n  padding-left: 6px;\n}\n.react-phone-input__search-select__border {\n  border: 1.5px solid #d5d4dc;\n  border-radius: 6px;\n  padding-left: 10px;\n  padding-right: 10px;\n  cursor: pointer;\n}\n\n.react-phone-input__search-select span {\n  user-select: none;\n}\n\n.react-phone-input__search-select__options-wrapper {\n  background-color: #ffffff;\n  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),\n    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);\n  border-radius: 6px;\n  min-width: 240px;\n  max-height: 272px;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.react-phonenumber__search-select__scroll {\n  overflow-y: overlay;\n  max-height: 242px;\n  box-sizing: border-box;\n}\n.react-phone-input__search-select__option {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 6px;\n  min-height: 32px;\n  padding: 0 8px;\n}\n.react-phone-input__search-select__option:hover {\n  background-color: #ece9e9;\n}\n\n.react-phone-input__search-select__active {\n  background-color: #cde6f0;\n}\n.react-phone-input__search-select__active:hover {\n  background-color: #b2dbeb;\n}\n.react-phonenumber__search-select__scroll::-webkit-scrollbar {\n  display: block;\n  width: 6px;\n  height: 0;\n  background-color: #f1f1f1;\n}\n.react-phonenumber__search-select__scroll::-webkit-scrollbar-thumb {\n  display: block;\n  width: 6px;\n  height: 0;\n  background-color: #9b9999;\n  border-radius: 3px;\n}\n.react-phonenumber__search-select__input-wrapper {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 5px;\n  border-bottom: 1px solid #d5d4dc;\n}\n.react-phonenumber__search-select__input {\n  padding-left: 5px;\n  padding-right: 5px;\n  padding-bottom: 2px;\n  border: none;\n  outline: none;\n  font-size: 14px;\n  font-weight: 400;\n  color: #000000;\n  background-color: transparent;\n  box-sizing: border-box;\n  width: 100%;\n}\n\n.react-phone-input__search-select__arrow {\n  border-left: 0.3em solid transparent;\n  border-right: 0.3em solid transparent;\n  border-top: 0.3em solid #373636;\n  margin-right: 3px;\n}\n");var s=function(o){var s=void 0===o.border||o.border,l=n(!1),d=l[0],u=l[1],h=n("0px"),_=h[0],b=h[1],x=n("0px"),m=x[0],f=x[1],g=e.useRef(null),y=i((function(){if(g.current){var e=g.current.getBoundingClientRect(),n=e.left,r=e.top,t=e.height;f("".concat(n,"px")),b("".concat(r+t+2,"px")),u(!0)}})),C=n(o.countryCode),w=C[0],k=C[1],v=r((function(){return o.countryCode||w}),[w,o.countryCode]);return e.createElement(e.Fragment,null,e.createElement("div",{ref:g,onClick:y,className:"react-phone-input__search-select ".concat(s?"react-phone-input__search-select__border":""," ").concat(o.className||""),style:o.style},e.createElement("span",null,p(v)," ",v),e.createElement("div",{className:"react-phone-input__search-select__arrow"})),d&&t(e.createElement(c,{onBackdropClick:function(){return u(!1)},top:_,left:m},e.createElement(a,{countries:o.countries,activeCountry:o.countryCode,onChooseCountry:function(e){var n;o.setCountryCode(e),null===(n=o.onCountryCodeChange)||void 0===n||n.call(o,e),k(e),u(!1)},optionClassName:o.optionClassName,optionStyle:o.optionStyle})),document.body))};export{s as default};
//# sourceMappingURL=SearchSelect.js.map