react-simple-phone-input 4.6.3 → 4.6.4

package/dist/esm/index.js

@@ -1,5 +1,31 @@
 import React from 'react';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production_min = {};
@@ -1355,7 +1381,7 @@ function requireReactJsxRuntime_development () {
 	}
 } (jsxRuntime));
 
-const countryData = [
+var countryData = [
     {
         country: "Afghanistan",
         countryCode: "AF",
@@ -2539,50 +2565,52 @@ const countryData = [
 ];
 
 //Get default country function
-const getDefaultCountry = (code) => {
-    const result = countryData.find((item) => item.countryCode === code);
+var getDefaultCountry = function (code) {
+    var result = countryData.find(function (item) { return item.countryCode === code; });
     return result;
 };
 //Get country data by search
-const getBySearch = (search, onlyCountry, excludeCountry) => {
-    let countries = [];
+var getBySearch = function (search, onlyCountry, excludeCountry) {
+    var countries = [];
     if (excludeCountry && excludeCountry.length > 0) {
-        countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
+        countries = countryData.filter(function (item) { return !(excludeCountry === null || excludeCountry === void 0 ? void 0 : excludeCountry.includes(item.countryCode)); });
     }
-    else if (onlyCountry && onlyCountry?.length > 0) {
-        countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
+    else if (onlyCountry && (onlyCountry === null || onlyCountry === void 0 ? void 0 : onlyCountry.length) > 0) {
+        countries = countryData.filter(function (item) { return onlyCountry === null || onlyCountry === void 0 ? void 0 : onlyCountry.includes(item.countryCode); });
     }
     else {
         countries = countryData;
     }
-    const result = countries.filter((item) => {
-        const escapeRegExp = (str) => str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
-        const regex = new RegExp(escapeRegExp(search), "gi");
+    var result = countries.filter(function (item) {
+        var escapeRegExp = function (str) { return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); };
+        var regex = new RegExp(escapeRegExp(search), "gi");
         return item.country.match(regex);
     });
     return result;
 };
 //Get country data by filter
-const getCountryByFilter = (onlyCountry, excludeCountry, preferredCountry) => {
-    let countries = [];
+var getCountryByFilter = function (onlyCountry, excludeCountry, preferredCountry) {
+    var countries = [];
     if (excludeCountry && excludeCountry.length > 0) {
-        countries = countryData.filter((item) => !excludeCountry?.includes(item.countryCode));
+        countries = countryData.filter(function (item) { return !(excludeCountry === null || excludeCountry === void 0 ? void 0 : excludeCountry.includes(item.countryCode)); });
     }
-    else if (onlyCountry && onlyCountry?.length > 0) {
-        countries = countryData.filter((item) => onlyCountry?.includes(item.countryCode));
+    else if (onlyCountry && (onlyCountry === null || onlyCountry === void 0 ? void 0 : onlyCountry.length) > 0) {
+        countries = countryData.filter(function (item) { return onlyCountry === null || onlyCountry === void 0 ? void 0 : onlyCountry.includes(item.countryCode); });
     }
     else {
         countries = countryData;
     }
-    const result = countries.sort((a, b) => (Number(preferredCountry?.includes(b.countryCode)) - Number(preferredCountry?.includes(a.countryCode)))
-        || (preferredCountry?.indexOf(a.countryCode) - preferredCountry?.indexOf(b.countryCode)));
+    var result = countries.sort(function (a, b) {
+        return (Number(preferredCountry === null || preferredCountry === void 0 ? void 0 : preferredCountry.includes(b.countryCode)) - Number(preferredCountry === null || preferredCountry === void 0 ? void 0 : preferredCountry.includes(a.countryCode)))
+            || ((preferredCountry === null || preferredCountry === void 0 ? void 0 : preferredCountry.indexOf(a.countryCode)) - (preferredCountry === null || preferredCountry === void 0 ? void 0 : preferredCountry.indexOf(b.countryCode)));
+    });
     return result;
 };
 
 //Click out side hook
 function useOnClickOutside(ref, handler) {
-    React.useEffect(() => {
-        const listener = (event) => {
+    React.useEffect(function () {
+        var listener = function (event) {
             if (!ref.current || ref.current.contains(event.target)) {
                 return;
             }
@@ -2590,7 +2618,7 @@ function useOnClickOutside(ref, handler) {
         };
         document.addEventListener("mousedown", listener);
         document.addEventListener("touchstart", listener);
-        return () => {
+        return function () {
             document.removeEventListener("mousedown", listener);
             document.removeEventListener("touchstart", listener);
         };
@@ -2598,22 +2626,23 @@ function useOnClickOutside(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" }) => {
+var PhoneInput = function (_a) {
+    var placeholder = _a.placeholder, country = _a.country, onChange = _a.onChange, value = _a.value, iconComponent = _a.iconComponent, inputProps = _a.inputProps, onlyCountries = _a.onlyCountries, excludeCountries = _a.excludeCountries, preferredCountries = _a.preferredCountries, _b = _a.showDropdownIcon, showDropdownIcon = _b === void 0 ? true : _b, _c = _a.dialCodeInputField, dialCodeInputField = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? true : _d, _e = _a.searchPlaceholder, searchPlaceholder = _e === void 0 ? "Search country" : _e, _f = _a.showSearchIcon, showSearchIcon = _f === void 0 ? true : _f, searchIconComponent = _a.searchIconComponent, searchProps = _a.searchProps, _g = _a.searchNotFound, searchNotFound = _g === void 0 ? "Not found" : _g;
     //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);
+    var _h = React.useState({}), selected = _h[0], setSelected = _h[1];
+    var _j = React.useState(false), isDropdown = _j[0], setDropdown = _j[1];
+    var _k = React.useState(value || ""), inputValue = _k[0], setInputValue = _k[1];
+    var _l = React.useState(countryData), countryDataInfo = _l[0], setCountryData = _l[1];
+    var _m = React.useState(0), cursor = _m[0], setCursor = _m[1];
     //Ref
-    const dropdownRef = React.useRef(null);
-    const listRef = React.useRef(null);
+    var dropdownRef = React.useRef(null);
+    var listRef = React.useRef(null);
     //Custom Hook Call
-    useOnClickOutside(dropdownRef, () => setDropdown(false));
+    useOnClickOutside(dropdownRef, function () { return setDropdown(false); });
     //Handler
     //---Input Onchange Handler//
-    const handleChange = (e) => {
-        const onlyNumber = e.target.value.replace(/\D/g, '');
+    var handleChange = function (e) {
+        var onlyNumber = e.target.value.replace(/\D/g, '');
         if (dialCodeInputField) {
             onChange("+" + onlyNumber);
             setInputValue("+" + onlyNumber);
@@ -2624,14 +2653,14 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         }
     };
     //---Search Input Onchange Handler//
-    const onSearchHandler = (e) => {
-        const search = e.target.value;
+    var onSearchHandler = function (e) {
+        var search = e.target.value;
         setCountryData(getBySearch(search, onlyCountries, excludeCountries));
     };
     //---Set Selected Handler//
-    const handleSelected = (item, i) => {
+    var handleSelected = function (item, i) {
         if (dialCodeInputField) {
-            const result = inputValue?.replace(selected.callingCode, item.callingCode);
+            var result = inputValue === null || inputValue === void 0 ? void 0 : inputValue.replace(selected.callingCode, item.callingCode);
             setInputValue(result.length > 0 ? result : item.callingCode);
             onChange(result.length > 0 ? result : item.callingCode);
         }
@@ -2643,10 +2672,11 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         setCursor(i);
     };
     //---Scroll To View Handler//
-    const scrollIntoView = (position) => {
+    var scrollIntoView = function (position) {
+        var _a;
         if (search) {
             if (countryDataInfo.length > 0) {
-                listRef.current?.scrollTo({
+                (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
                     top: position,
                     behavior: "smooth"
                 });
@@ -2654,15 +2684,15 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         }
     };
     //---Keyboard Navigation//
-    const keyBoardNav = (e) => {
+    var keyBoardNav = function (e) {
         if (isDropdown) {
             if (e.key === "ArrowDown") {
                 e.preventDefault();
-                setCursor(c => (c < countryDataInfo.length - 1 ? c + 1 : c));
+                setCursor(function (c) { return (c < countryDataInfo.length - 1 ? c + 1 : c); });
             }
             if (e.key === "ArrowUp") {
                 e.preventDefault();
-                setCursor(c => (c > 0 ? c - 1 : 0));
+                setCursor(function (c) { return (c > 0 ? c - 1 : 0); });
             }
             if (e.key === "Escape") {
                 setDropdown(false);
@@ -2675,39 +2705,40 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
     };
     //React Hook
     //---Scroll to view hook//
-    React.useEffect(() => {
+    React.useEffect(function () {
+        var _a;
         if (cursor < 0 || cursor > countryDataInfo.length || !listRef) {
-            return () => {
+            return function () {
             };
         }
         if (isDropdown && listRef) {
             if (countryDataInfo.length > 0) {
-                let listItems = Array.from(listRef.current?.children);
+                var listItems = Array.from((_a = listRef.current) === null || _a === void 0 ? void 0 : _a.children);
                 listItems[cursor] && scrollIntoView(listItems[cursor].offsetTop - 65);
             }
         }
     }, [cursor]);
     //---Dial Code Field Effect//
-    React.useMemo(() => {
+    React.useMemo(function () {
         if (dialCodeInputField) {
-            const result = inputValue?.replace(selected.callingCode, getDefaultCountry(country).callingCode);
+            var result = inputValue === null || inputValue === void 0 ? void 0 : inputValue.replace(selected.callingCode, getDefaultCountry(country).callingCode);
             console.log(result);
             setInputValue(result.length > 0 ? result : getDefaultCountry(country).callingCode);
         }
         setSelected(getDefaultCountry(country));
     }, [country, dialCodeInputField]);
     //---Country search hook//
-    React.useMemo(() => {
+    React.useMemo(function () {
         setCountryData(getCountryByFilter(onlyCountries, excludeCountries, preferredCountries));
     }, [onlyCountries, excludeCountries, preferredCountries]);
-    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", 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, 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) => {
+    return (jsxRuntime.exports.jsx("div", __assign({ className: "simple-phone-input-sri198-container", onKeyDown: function (e) { return keyBoardNav(e); }, tabIndex: -1 }, { children: jsxRuntime.exports.jsxs("div", __assign({ className: "simple-phone-input-sri198-main" }, { children: [jsxRuntime.exports.jsxs("div", __assign({ className: "simple-phone-input-sri198-dropdown-container", ref: dropdownRef }, { children: [jsxRuntime.exports.jsxs("div", __assign({ onClick: function () { return 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", __assign({ className: "simple-phone-input-sri198-selected-code" }, { children: selected.callingCode })), showDropdownIcon &&
+                                    jsxRuntime.exports.jsx("div", __assign({ className: isDropdown ? "simple-phone-input-sri198-dropdown-icon" : "simple-phone-input-sri198-dropdown-icon active" }, { children: iconComponent ? iconComponent : (jsxRuntime.exports.jsx("svg", __assign({ 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", __assign({ className: isDropdown ? "simple-phone-input-sri198-dropdown active" : "simple-phone-input-sri198-dropdown", ref: listRef }, { children: [search &&
+                                    jsxRuntime.exports.jsxs("div", __assign({ className: "simple-phone-input-sri198-search-container" }, { children: [jsxRuntime.exports.jsx("input", __assign({ placeholder: searchPlaceholder }, searchProps, { onChange: onSearchHandler })), showSearchIcon &&
+                                                jsxRuntime.exports.jsx("div", __assign({ className: "simple-phone-input-sri198-search-icon" }, { children: searchIconComponent !== null && searchIconComponent !== void 0 ? searchIconComponent : (jsxRuntime.exports.jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 48 48" }, { children: [jsxRuntime.exports.jsxs("g", __assign({ 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", __assign({ className: "simple-phone-input-sri198-not-found" }, { children: searchNotFound })), countryDataInfo.map(function (item, i) { return (jsxRuntime.exports.jsxs("li", __assign({ onClick: function () { return 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", __assign({ className: "simple-phone-input-sri198-dropdown-text" }, { children: item.country })), jsxRuntime.exports.jsx("span", __assign({ className: "simple-phone-input-sri198-dropdown-country-code" }, { children: item.callingCode }))] }), i)); })] }))] })), jsxRuntime.exports.jsx("input", __assign({ className: "simple-phone-input-sri198-input", placeholder: placeholder, onChange: handleChange, type: "tel", onInput: function (e) {
                         if (dialCodeInputField) {
-                            const oldVal = inputValue.slice(selected.callingCode.length);
+                            var oldVal = inputValue.slice(selected.callingCode.length);
                             if (e.target.value.startsWith(selected.callingCode)) {
                                 e.target.value = e.target.value;
                             }
@@ -2715,7 +2746,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
                                 e.target.value = selected.callingCode + oldVal;
                             }
                         }
-                    }, onKeyDown: (e) => keyBoardNav(e), value: inputValue, ...inputProps })] }) }));
+                    }, onKeyDown: function (e) { return keyBoardNav(e); }, value: inputValue }, inputProps))] })) })));
 };
 
 export { PhoneInput };