react-simple-phone-input 1.0.9-beta → 1.0.11-beta

package/dist/cjs/types/components/PhoneInput/PhoneInput.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import "./PhoneInput.css";
 interface Props {
     placeholder: string;
     country: string;

package/dist/esm/index.js

@@ -2800,6 +2800,36 @@ function requireReact_development () {
 
 var React = /*@__PURE__*/getDefaultExportFromCjs(react.exports);
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".simple-phone-input-sri198-container {\r\n    position: relative;\r\n}\r\n\r\n.simple-phone-input-sri198-main {\r\n    display: flex;\r\n    border: 1px solid rgba(0, 0, 0, 0.295);\r\n    user-select: none;\r\n    border-radius: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container {\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    background: rgba(0, 0, 0, 0.144);\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container img {\r\n    margin-right: 6px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown {\r\n    background: white;\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    position: absolute;\r\n    top: 100%;\r\n    left: 0;\r\n    right: 0;\r\n    height: 250px;\r\n    overflow-y: auto;\r\n    box-shadow: 0 0 20px rgb(180, 180, 180);\r\n    display: none;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container-button {\r\n    display: flex;\r\n    flex: 1;\r\n    width: 92px;\r\n    padding: 5px 2px 5px 7px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-container-button.dial {\r\n    width: unset;\r\n    padding: 8px 3px 8px 8px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown.active {\r\n    display: block;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li {\r\n    margin: 3px 0;\r\n    padding: 3px 8px;\r\n    display: flex;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li.active {\r\n    background: rgba(0, 0, 0, 0.116);\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li img {\r\n    margin-right: 6px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-text {\r\n    font-size: 15px;\r\n    flex: 1;\r\n    margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-country-code {\r\n    opacity: 0.6;\r\n    margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon svg {\r\n    transition: 0.3s ease;\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown-icon.active svg {\r\n    transform: rotate(-180deg)\r\n}\r\n\r\n.simple-phone-input-sri198-dropdown li:hover {\r\n    background: rgba(0, 0, 0, 0.116);\r\n}\r\n\r\n.simple-phone-input-sri198-selected-code {\r\n    flex: 1;\r\n    font-size: 14px;\r\n    margin-top: 3px;\r\n}\r\n\r\n.simple-phone-input-sri198-input {\r\n    width: 100%;\r\n    border: none;\r\n    padding: 0 10px;\r\n}\r\n\r\n.simple-phone-input-sri198-input:focus {\r\n    outline: none;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container {\r\n    padding: 5px;\r\n    position: relative;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container input {\r\n    border: 1px solid rgba(0, 0, 0, 0.116);\r\n    padding: 8px 10px;\r\n    width: 100%;\r\n    font-size: 15px;\r\n    border-radius: 2px;\r\n}\r\n\r\n.simple-phone-input-sri198-search-icon {\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    display: flex;\r\n    pointer-events: none;\r\n}\r\n\r\n.simple-phone-input-sri198-not-found {\r\n    text-align: center;\r\n    margin-top: 10px;\r\n    font-size: 15px;\r\n    color: red;\r\n}\r\n\r\n.simple-phone-input-sri198-search-icon svg {\r\n    font-size: 20px;\r\n}\r\n\r\n.simple-phone-input-sri198-search-container input:focus {\r\n    outline: none;\r\n}";
+styleInject(css_248z);
+
 const countryData = [
     {
         country: "Afghanistan",
@@ -4021,30 +4051,11 @@ const getCountryByFilter = (onlyCountry, excludeCountry, preferredCountry) => {
     return result;
 };
 
-function useOnClickOutside(ref, handler) {
-    React.useEffect(() => {
-        const listener = (event) => {
-            if (!ref.current || ref.current.contains(event.target)) {
-                return;
-            }
-            handler(event);
-        };
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
-        return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
-        };
-    }, [ref, handler]);
-}
-
 const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inputProps, onlyCountries, excludeCountries, preferredCountries, showDropdownIcon = true, dialCodeInputField = false, search = true, searchPlaceholder = "Search country", showSearchIcon = true, searchIconComponent, searchProps, searchNotFound = "Not found" }) => {
     const [selected, setSelected] = React.useState({});
     const [isDropdown, setDropdown] = React.useState(false);
     const [inputValue, setInputValue] = React.useState(value || "");
     const [countryDataInfo, setCountryData] = React.useState(countryData);
-    const ref = React.useRef();
-    useOnClickOutside(ref, () => setDropdown(false));
     //Handler
     const handleChange = (e) => {
         const onlyNumber = e.target.value.replace(/\D/g, '');
@@ -4086,7 +4097,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
     }, [onlyCountries, excludeCountries, preferredCountries]);
     return (React.createElement("div", { className: "simple-phone-input-sri198-container" },
         React.createElement("div", { className: "simple-phone-input-sri198-main" },
-            React.createElement("div", { className: "simple-phone-input-sri198-dropdown-container", ref: ref },
+            React.createElement("div", { className: "simple-phone-input-sri198-dropdown-container" },
                 React.createElement("div", { onClick: () => setDropdown(!isDropdown), className: dialCodeInputField ? "simple-phone-input-sri198-dropdown-container-button dial" : "simple-phone-input-sri198-dropdown-container-button" },
                     React.createElement("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + selected.countryCode + ".svg", alt: selected.country, width: "20px" }),
                     !dialCodeInputField &&