react-simple-phone-input 1.1.8-beta → 3.0.0

package/dist/esm/index.js

@@ -1355,36 +1355,6 @@ function requireReactJsxRuntime_development () {
 	}
 } (jsxRuntime));
 
-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",
@@ -2568,17 +2538,19 @@ const countryData = [
     }
 ];
 
+//Get default country function
 const getDefaultCountry = (code) => {
     const result = countryData.find((item) => item.countryCode === code);
     return result;
 };
+//Get country data by search
 const getBySearch = (search, onlyCountry, excludeCountry) => {
-    var countries = [];
+    let countries = [];
     if (excludeCountry && excludeCountry.length > 0) {
-        countries = countryData.filter((item) => excludeCountry?.indexOf(item.countryCode) === -1);
+        countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
     }
     else if (onlyCountry && onlyCountry?.length > 0) {
-        countries = countryData.filter((item) => onlyCountry?.indexOf(item.countryCode) !== -1);
+        countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
     }
     else {
         countries = countryData;
@@ -2590,22 +2562,24 @@ const getBySearch = (search, onlyCountry, excludeCountry) => {
     });
     return result;
 };
+//Get country data by filter
 const getCountryByFilter = (onlyCountry, excludeCountry, preferredCountry) => {
-    var countries = [];
+    let countries = [];
     if (excludeCountry && excludeCountry.length > 0) {
-        countries = countryData.filter((item) => excludeCountry?.indexOf(item.countryCode) === -1);
+        countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
     }
     else if (onlyCountry && onlyCountry?.length > 0) {
-        countries = countryData.filter((item) => onlyCountry?.indexOf(item.countryCode) !== -1);
+        countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
     }
     else {
         countries = countryData;
     }
-    const result = countries.sort((a, b) => (Number(preferredCountry?.indexOf(b.countryCode)) - Number(preferredCountry?.indexOf(a.countryCode)))
+    const result = countries.sort((a, b) => (Number(preferredCountry?.includes(b.countryCode)) - Number(preferredCountry?.includes(a.countryCode)))
         || (preferredCountry?.indexOf(a.countryCode) - preferredCountry?.indexOf(b.countryCode)));
     return result;
 };
 
+//Click out side hook
 function useOnClickOutside(ref, handler) {
     React.useEffect(() => {
         const listener = (event) => {
@@ -2623,12 +2597,21 @@ function useOnClickOutside(ref, handler) {
     }, [ref, handler]);
 }
 
+//Component
 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" }) => {
+    //State
     const [selected, setSelected] = React.useState({});
     const [isDropdown, setDropdown] = React.useState(false);
     const [inputValue, setInputValue] = React.useState(value || "");
     const [countryDataInfo, setCountryData] = React.useState(countryData);
+    const [cursor, setCursor] = React.useState(0);
+    //Ref
+    const dropdownRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    //Custom Hook Call
+    useOnClickOutside(dropdownRef, () => setDropdown(false));
     //Handler
+    //---Input Onchange Handler//
     const handleChange = (e) => {
         const onlyNumber = e.target.value.replace(/\D/g, '');
         if (dialCodeInputField) {
@@ -2640,13 +2623,13 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
             onChange(selected.callingCode + onlyNumber);
         }
     };
-    //
+    //---Search Input Onchange Handler//
     const onSearchHandler = (e) => {
         const search = e.target.value;
         setCountryData(getBySearch(search, onlyCountries, excludeCountries));
     };
-    //
-    const handleSelected = (item) => {
+    //---Set Selected Handler//
+    const handleSelected = (item, i) => {
         if (dialCodeInputField) {
             const result = inputValue?.replace(selected.callingCode, item.callingCode);
             setInputValue(result.length > 0 ? result : item.callingCode);
@@ -2657,11 +2640,54 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         }
         setSelected(item);
         setDropdown(false);
+        setCursor(i);
+    };
+    //---Scroll To View Handler//
+    const scrollIntoView = (position) => {
+        if (search) {
+            if (countryDataInfo.length > 0) {
+                listRef.current?.scrollTo({
+                    top: position,
+                    behavior: "smooth"
+                });
+            }
+        }
+    };
+    //---Keyboard Navigation//
+    const keyBoardNav = (e) => {
+        if (isDropdown) {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setCursor(c => (c < countryDataInfo.length - 1 ? c + 1 : c));
+            }
+            if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setCursor(c => (c > 0 ? c - 1 : 0));
+            }
+            if (e.key === "Escape") {
+                setDropdown(false);
+            }
+            if (e.key === "Enter" && cursor >= 0) {
+                setSelected(countryDataInfo[cursor]);
+                setDropdown(false);
+            }
+        }
     };
-    //Custom Hook
-    const ref = React.useRef();
-    useOnClickOutside(ref, () => setDropdown(false));
-    //Effects
+    //React Hook
+    //---Scroll to view hook//
+    React.useEffect(() => {
+        if (cursor < 0 || cursor > countryDataInfo.length || !listRef) {
+            return () => {
+            };
+        }
+        if (isDropdown && listRef) {
+            if (countryDataInfo.length > 0) {
+                let listItems = Array.from(listRef.current?.children);
+                listItems[cursor] && scrollIntoView(listItems[cursor].offsetTop - 65);
+            }
+        }
+    }, [cursor]);
+    //---Dial Code Field Effect//
     React.useMemo(() => {
         if (dialCodeInputField) {
             const result = inputValue?.replace(selected.callingCode, getDefaultCountry(country).callingCode);
@@ -2670,16 +2696,16 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         }
         setSelected(getDefaultCountry(country));
     }, [country, dialCodeInputField]);
-    //
+    //---Country search hook//
     React.useMemo(() => {
         setCountryData(getCountryByFilter(onlyCountries, excludeCountries, preferredCountries));
     }, [onlyCountries, excludeCountries, preferredCountries]);
-    return (jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-container", children: jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-main", children: [jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-dropdown-container", ref: ref, children: [jsxRuntime.exports.jsxs("div", { onClick: () => setDropdown(!isDropdown), className: dialCodeInputField ? "simple-phone-input-sri198-dropdown-container-button dial" : "simple-phone-input-sri198-dropdown-container-button", children: [jsxRuntime.exports.jsx("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + selected.countryCode + ".svg", alt: selected.country, width: "20px" }), !dialCodeInputField &&
+    return (jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-container", onKeyDown: (e) => keyBoardNav(e), tabIndex: -1, children: jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-main", children: [jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-dropdown-container", ref: dropdownRef, children: [jsxRuntime.exports.jsxs("div", { onClick: () => setDropdown(!isDropdown), className: dialCodeInputField ? "simple-phone-input-sri198-dropdown-container-button dial" : "simple-phone-input-sri198-dropdown-container-button", children: [jsxRuntime.exports.jsx("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + selected.countryCode + ".svg", alt: selected.country, width: "20px" }), !dialCodeInputField &&
                                     jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-selected-code", children: selected.callingCode }), showDropdownIcon &&
-                                    jsxRuntime.exports.jsx("div", { className: isDropdown ? "simple-phone-input-sri198-dropdown-icon" : "simple-phone-input-sri198-dropdown-icon active", children: iconComponent ? iconComponent : (jsxRuntime.exports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 24 24", children: jsxRuntime.exports.jsx("path", { fill: "currentColor", d: "m7 10l5 5l5-5z" }) })) })] }), jsxRuntime.exports.jsxs("ul", { className: isDropdown ? "simple-phone-input-sri198-dropdown active" : "simple-phone-input-sri198-dropdown", children: [search &&
+                                    jsxRuntime.exports.jsx("div", { className: isDropdown ? "simple-phone-input-sri198-dropdown-icon" : "simple-phone-input-sri198-dropdown-icon active", children: iconComponent ? iconComponent : (jsxRuntime.exports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 24 24", children: jsxRuntime.exports.jsx("path", { fill: "currentColor", d: "m7 10l5 5l5-5z" }) })) })] }), jsxRuntime.exports.jsxs("ul", { className: isDropdown ? "simple-phone-input-sri198-dropdown active" : "simple-phone-input-sri198-dropdown", ref: listRef, children: [search &&
                                     jsxRuntime.exports.jsxs("div", { className: "simple-phone-input-sri198-search-container", children: [jsxRuntime.exports.jsx("input", { placeholder: searchPlaceholder, ...searchProps, onChange: onSearchHandler }), showSearchIcon &&
                                                 jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-search-icon", children: searchIconComponent ?? (jsxRuntime.exports.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 48 48", children: [jsxRuntime.exports.jsxs("g", { fill: "#616161", children: [jsxRuntime.exports.jsx("path", { d: "m29.175 31.99l2.828-2.827l12.019 12.019l-2.828 2.827z" }), jsxRuntime.exports.jsx("circle", { cx: "20", cy: "20", r: "16" })] }), jsxRuntime.exports.jsx("path", { fill: "#37474F", d: "m32.45 35.34l2.827-2.828l8.696 8.696l-2.828 2.828z" }), jsxRuntime.exports.jsx("circle", { cx: "20", cy: "20", r: "13", fill: "#64B5F6" }), jsxRuntime.exports.jsx("path", { fill: "#BBDEFB", d: "M26.9 14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2 1.2-6.9 3.2c-.4.4-.3 1.1.1 1.4c.4.4 1.1.3 1.4-.1C16 13.9 17.9 13 20 13s4 .9 5.4 2.5c.2.2.5.4.8.4c.2 0 .5-.1.6-.2c.4-.4.4-1.1.1-1.5z" })] })) })] }), countryDataInfo.length === 0 &&
-                                    jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-not-found", children: searchNotFound }), countryDataInfo.map((item, i) => (jsxRuntime.exports.jsxs("li", { onClick: () => handleSelected(item), className: item.countryCode === selected.countryCode ? "active" : "", children: [jsxRuntime.exports.jsx("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + item.countryCode + ".svg", alt: item.country, width: "20px" }), jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-dropdown-text", children: item.country }), jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-dropdown-country-code", children: item.callingCode })] }, i)))] })] }), jsxRuntime.exports.jsx("input", { className: "simple-phone-input-sri198-input", placeholder: placeholder, onChange: handleChange, type: "tel", onInput: (e) => {
+                                    jsxRuntime.exports.jsx("div", { className: "simple-phone-input-sri198-not-found", children: searchNotFound }), countryDataInfo.map((item, i) => (jsxRuntime.exports.jsxs("li", { onClick: () => handleSelected(item, i), className: i === cursor ? "active" : "", children: [jsxRuntime.exports.jsx("img", { src: "https://cdn.jsdelivr.net/gh/siamahnaf198/country-flags@main/img/" + item.countryCode + ".svg", alt: item.country, width: "20px" }), jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-dropdown-text", children: item.country }), jsxRuntime.exports.jsx("span", { className: "simple-phone-input-sri198-dropdown-country-code", children: item.callingCode })] }, i)))] })] }), jsxRuntime.exports.jsx("input", { className: "simple-phone-input-sri198-input", placeholder: placeholder, onChange: handleChange, type: "tel", onInput: (e) => {
                         if (dialCodeInputField) {
                             const oldVal = inputValue.slice(selected.callingCode.length);
                             if (e.target.value.startsWith(selected.callingCode)) {
@@ -2689,7 +2715,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
                                 e.target.value = selected.callingCode + oldVal;
                             }
                         }
-                    }, value: inputValue, ...inputProps })] }) }));
+                    }, onKeyDown: (e) => keyBoardNav(e), value: inputValue, ...inputProps })] }) }));
 };
 
 export { PhoneInput };