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

an international phone number input component for React.

"use strict";var e=require("react"),n=require("react-dom"),r=require("../../style-inject.es-d4ddeae4.js"),t=require("./AffixWrapper.js"),o=require("./SelectOption.js"),c=require("../../hooks/useMemoizedFn.js"),a=require("../../unicode-5b4d6798.js");require("../../utils/getCountryCallingCode.js");r.styleInject(".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");module.exports=function(r){var i=void 0===r.border||r.border,s=e.useState(!1),p=s[0],l=s[1],d=e.useState("0px"),u=d[0],h=d[1],_=e.useState("0px"),b=_[0],x=_[1],g=e.useRef(null),f=c((function(){if(g.current){var e=g.current.getBoundingClientRect(),n=e.left,r=e.top,t=e.height;x("".concat(n,"px")),h("".concat(r+t+2,"px")),l(!0)}})),m=e.useState(r.countryCode),y=m[0],C=m[1],w=e.useMemo((function(){return r.countryCode||y}),[y,r.countryCode]);return e.createElement(e.Fragment,null,e.createElement("div",{ref:g,onClick:f,className:"react-phone-input__search-select ".concat(i?"react-phone-input__search-select__border":""," ").concat(r.className||""),style:r.style},e.createElement("span",null,a.getCountryFlag(w)," ",w),e.createElement("div",{className:"react-phone-input__search-select__arrow"})),p&&n.createPortal(e.createElement(t,{onBackdropClick:function(){return l(!1)},top:u,left:b},e.createElement(o,{countries:r.countries,activeCountry:r.countryCode,onChooseCountry:function(e){var n;r.setCountryCode(e),null===(n=r.onCountryCodeChange)||void 0===n||n.call(r,e),C(e),l(!1)},optionClassName:r.optionClassName,optionStyle:r.optionStyle})),document.body))};
//# sourceMappingURL=SearchSelect.js.map