react-simple-phone-input 1.0.8-beta → 1.0.10-beta

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

@@ -1,10 +1,11 @@
-import React, { ReactNode } from "react";
+import React from "react";
+import "./PhoneInput.css";
 interface Props {
     placeholder: string;
     country: string;
     onChange: (e: string) => void;
     value?: string;
-    iconComponent?: ReactNode;
+    iconComponent?: React.ReactNode;
     inputProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     onlyCountries?: string[];
     excludeCountries?: string[];
@@ -14,7 +15,7 @@ interface Props {
     search?: boolean;
     searchPlaceholder?: string;
     showSearchIcon?: boolean;
-    searchIconComponent?: ReactNode;
+    searchIconComponent?: React.ReactNode;
     searchProps?: React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     searchNotFound?: 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",
@@ -4022,7 +4052,7 @@ const getCountryByFilter = (onlyCountry, excludeCountry, preferredCountry) => {
 };
 
 function useOnClickOutside(ref, handler) {
-    react.exports.useEffect(() => {
+    React.useEffect(() => {
         const listener = (event) => {
             if (!ref.current || ref.current.contains(event.target)) {
                 return;
@@ -4039,11 +4069,11 @@ function useOnClickOutside(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.exports.useState({});
-    const [isDropdown, setDropdown] = react.exports.useState(false);
-    const [inputValue, setInputValue] = react.exports.useState(value || "");
-    const [countryDataInfo, setCountryData] = react.exports.useState(countryData);
-    const ref = react.exports.useRef();
+    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) => {
@@ -4073,7 +4103,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         setSelected(item);
         setDropdown(false);
     };
-    react.exports.useMemo(() => {
+    React.useMemo(() => {
         if (dialCodeInputField) {
             const result = inputValue === null || inputValue === void 0 ? void 0 : inputValue.replace(selected.callingCode, getDefaultCountry(country).callingCode);
             console.log(result);
@@ -4081,7 +4111,7 @@ const PhoneInput = ({ placeholder, country, onChange, value, iconComponent, inpu
         }
         setSelected(getDefaultCountry(country));
     }, [country, dialCodeInputField]);
-    react.exports.useMemo(() => {
+    React.useMemo(() => {
         setCountryData(getCountryByFilter(onlyCountries, excludeCountries, preferredCountries));
     }, [onlyCountries, excludeCountries, preferredCountries]);
     return (React.createElement("div", { className: "simple-phone-input-sri198-container" },