@blocklet/payment-react 1.18.34 → 1.18.36

package/es/components/country-select.d.ts

@@ -5,6 +5,7 @@ export type CountrySelectProps = {
     onChange: (value: CountryIso2) => void;
     name: string;
     sx?: SxProps;
+    showDialCode?: boolean;
 };
 declare const CountrySelect: import("react").ForwardRefExoticComponent<CountrySelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CountrySelect;

package/es/components/country-select.js

@@ -1,304 +1,387 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, forwardRef, useState, useEffect, useRef } from "react";
-import { Box, MenuItem, Select, Typography, TextField } from "@mui/material";
+import { Box, MenuItem, Typography, TextField, Dialog, DialogContent, IconButton, Select, Slide } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { FlagEmoji, defaultCountries, parseCountry } from "react-international-phone";
 import { useMobile } from "../hooks/mobile.js";
-const CountrySelect = forwardRef(({ value, onChange, name, sx }, ref) => {
-  const { setValue } = useFormContext();
-  const [open, setOpen] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const inputRef = useRef(null);
-  const menuRef = useRef(null);
-  const listRef = useRef(null);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const itemHeightRef = useRef(40);
-  const { isMobile } = useMobile();
-  const measuredRef = useRef(false);
-  useEffect(() => {
-    if (!open)
+const Transition = forwardRef(function Transition2(props, ref) {
+  return /* @__PURE__ */ jsx(Slide, { direction: "up", ref, timeout: 200, ...props });
+});
+const CountrySelect = forwardRef(
+  ({ value, onChange, name, sx, showDialCode = false }, ref) => {
+    const { setValue } = useFormContext();
+    const [open, setOpen] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const inputRef = useRef(null);
+    const menuRef = useRef(null);
+    const listRef = useRef(null);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const itemHeightRef = useRef(40);
+    const { isMobile } = useMobile();
+    const measuredRef = useRef(false);
+    useEffect(() => {
+      if (!open)
+        return () => {
+        };
+      const handleResize = () => {
+        measuredRef.current = false;
+      };
+      window.addEventListener("resize", handleResize);
       return () => {
+        window.removeEventListener("resize", handleResize);
       };
-    const handleResize = () => {
-      measuredRef.current = false;
+    }, [open]);
+    const scrollToTop = () => {
+      if (listRef.current) {
+        listRef.current.scrollTop = 0;
+      }
     };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
+    const measureItemHeight = () => {
+      if (!listRef.current || !open)
+        return;
+      const items = listRef.current.querySelectorAll(".MuiMenuItem-root");
+      if (items.length > 0) {
+        const firstItem = items[0];
+        if (firstItem.offsetHeight > 0) {
+          itemHeightRef.current = firstItem.offsetHeight;
+        }
+      }
     };
-  }, [open]);
-  const scrollToTop = () => {
-    if (listRef.current) {
-      listRef.current.scrollTop = 0;
-    }
-  };
-  const measureItemHeight = () => {
-    if (!listRef.current || !open)
-      return;
-    const items = listRef.current.querySelectorAll(".MuiMenuItem-root");
-    if (items.length > 0) {
-      const firstItem = items[0];
-      if (firstItem.offsetHeight > 0) {
-        itemHeightRef.current = firstItem.offsetHeight;
+    const controlScrollPosition = (index) => {
+      if (!listRef.current)
+        return;
+      if (open && !measuredRef.current) {
+        measureItemHeight();
+        measuredRef.current = true;
       }
-    }
-  };
-  const controlScrollPosition = (index) => {
-    if (!listRef.current)
-      return;
-    if (open && !measuredRef.current) {
-      measureItemHeight();
-      measuredRef.current = true;
-    }
-    const listHeight = listRef.current.clientHeight;
-    const targetPosition = index * itemHeightRef.current;
-    if (index < 2) {
-      listRef.current.scrollTop = 0;
-    } else if (index > filteredCountries.length - 3) {
-      listRef.current.scrollTop = listRef.current.scrollHeight - listHeight;
-    } else {
-      const scrollPosition = targetPosition - listHeight / 2 + itemHeightRef.current / 2;
-      listRef.current.scrollTop = Math.max(0, scrollPosition);
-    }
-  };
-  useEffect(() => {
-    let timeout = null;
-    if (open) {
-      timeout = setTimeout(() => {
-        scrollToTop();
-        if (!isMobile && inputRef.current) {
-          inputRef.current.focus();
+      const listHeight = listRef.current.clientHeight;
+      const targetPosition = index * itemHeightRef.current;
+      if (index < 2) {
+        listRef.current.scrollTop = 0;
+      } else if (index > filteredCountries.length - 3) {
+        listRef.current.scrollTop = listRef.current.scrollHeight - listHeight;
+      } else {
+        const scrollPosition = targetPosition - listHeight / 2 + itemHeightRef.current / 2;
+        listRef.current.scrollTop = Math.max(0, scrollPosition);
+      }
+    };
+    useEffect(() => {
+      let timeout = null;
+      if (open) {
+        timeout = setTimeout(() => {
+          scrollToTop();
+          if (!isMobile && inputRef.current) {
+            inputRef.current.focus();
+          }
+        }, 100);
+      } else {
+        setSearchText("");
+        setFocusedIndex(-1);
+      }
+      return () => {
+        if (timeout) {
+          clearTimeout(timeout);
         }
-      }, 100);
-    } else {
-      setSearchText("");
+      };
+    }, [open, isMobile]);
+    const filteredCountries = useMemo(() => {
+      if (!searchText)
+        return defaultCountries;
+      return defaultCountries.filter((c) => {
+        const parsed = parseCountry(c);
+        return parsed.name.toLowerCase().includes(searchText.toLowerCase()) || parsed.iso2.toLowerCase().includes(searchText.toLowerCase()) || `+${parsed.dialCode}`.includes(searchText);
+      });
+    }, [searchText]);
+    useEffect(() => {
+      scrollToTop();
       setFocusedIndex(-1);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
+    }, [searchText]);
+    useEffect(() => {
+      let timeout = null;
+      if (focusedIndex >= 0) {
+        timeout = setTimeout(() => {
+          controlScrollPosition(focusedIndex);
+        }, 10);
       }
+      return () => {
+        if (timeout) {
+          clearTimeout(timeout);
+        }
+      };
+    }, [focusedIndex, filteredCountries.length]);
+    const countryDetail = useMemo(() => {
+      const item = defaultCountries.find((v) => v[1] === value);
+      return value && item ? parseCountry(item) : { name: "" };
+    }, [value]);
+    const handleCountryClick = (code) => {
+      onChange(code);
+      setValue(name, code);
+      setOpen(false);
     };
-  }, [open, isMobile]);
-  const filteredCountries = useMemo(() => {
-    if (!searchText)
-      return defaultCountries;
-    return defaultCountries.filter((c) => {
-      const parsed = parseCountry(c);
-      return parsed.name.toLowerCase().includes(searchText.toLowerCase()) || parsed.iso2.toLowerCase().includes(searchText.toLowerCase()) || `+${parsed.dialCode}`.includes(searchText);
-    });
-  }, [searchText]);
-  useEffect(() => {
-    scrollToTop();
-    setFocusedIndex(-1);
-  }, [searchText]);
-  useEffect(() => {
-    let timeout = null;
-    if (focusedIndex >= 0) {
-      timeout = setTimeout(() => {
-        controlScrollPosition(focusedIndex);
-      }, 10);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
+    const handleSearchChange = (e) => {
+      e.stopPropagation();
+      setSearchText(e.target.value);
     };
-  }, [focusedIndex, filteredCountries.length]);
-  const countryDetail = useMemo(() => {
-    const item = defaultCountries.find((v) => v[1] === value);
-    return value && item ? parseCountry(item) : { name: "" };
-  }, [value]);
-  const onCountryChange = (e) => {
-    onChange(e.target.value);
-    setValue(name, e.target.value);
-  };
-  const handleCountryClick = (code) => {
-    onChange(code);
-    setValue(name, code);
-    setOpen(false);
-  };
-  const handleSearchChange = (e) => {
-    e.stopPropagation();
-    setSearchText(e.target.value);
-  };
-  const handleKeyDown = (e) => {
-    e.stopPropagation();
-    if (e.key === "Escape") {
-      setOpen(false);
-      return;
-    }
-    const handleNavigation = (direction) => {
-      e.preventDefault();
-      setFocusedIndex((prev) => {
-        if (direction === "next") {
+    const handleKeyDown = (e) => {
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        setOpen(false);
+        return;
+      }
+      const handleNavigation = (direction) => {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          if (direction === "next") {
+            if (prev === -1)
+              return 0;
+            return prev >= filteredCountries.length - 1 ? 0 : prev + 1;
+          }
           if (prev === -1)
-            return 0;
-          return prev >= filteredCountries.length - 1 ? 0 : prev + 1;
-        }
-        if (prev === -1)
-          return filteredCountries.length - 1;
-        return prev <= 0 ? filteredCountries.length - 1 : prev - 1;
-      });
+            return filteredCountries.length - 1;
+          return prev <= 0 ? filteredCountries.length - 1 : prev - 1;
+        });
+      };
+      if (e.key === "Tab") {
+        handleNavigation(e.shiftKey ? "prev" : "next");
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        handleNavigation("next");
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        handleNavigation("prev");
+        return;
+      }
+      if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
+        e.preventDefault();
+        const country = parseCountry(filteredCountries[focusedIndex]);
+        handleCountryClick(country.iso2);
+      }
     };
-    if (e.key === "Tab") {
-      handleNavigation(e.shiftKey ? "prev" : "next");
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      handleNavigation("next");
-      return;
-    }
-    if (e.key === "ArrowUp") {
-      handleNavigation("prev");
-      return;
-    }
-    if (e.key === "Enter" && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
-      e.preventDefault();
-      const country = parseCountry(filteredCountries[focusedIndex]);
-      handleCountryClick(country.iso2);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    Select,
-    {
-      ref,
-      open,
-      onOpen: () => setOpen(true),
-      onClose: () => setOpen(false),
-      MenuProps: {
-        style: {
-          maxHeight: "300px",
-          top: "10px"
-        },
-        anchorOrigin: {
-          vertical: "bottom",
-          horizontal: "left"
-        },
-        transformOrigin: {
-          vertical: "top",
-          horizontal: "left"
-        },
-        PaperProps: {
-          ref: menuRef,
+    const countryListContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
           sx: {
-            display: "flex",
-            "& .MuiList-root": {
-              pt: 0,
-              display: "flex",
-              flexDirection: "column",
-              overflowY: "hidden"
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+            bgcolor: "background.paper",
+            p: 1
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx(
+            TextField,
+            {
+              inputRef,
+              autoFocus: !isMobile,
+              fullWidth: true,
+              placeholder: "Search country...",
+              value: searchText,
+              onChange: handleSearchChange,
+              onKeyDown: handleKeyDown,
+              onClick: (e) => e.stopPropagation(),
+              size: "small",
+              variant: "outlined"
             }
-          }
+          )
         }
-      },
-      sx: {
-        width: "100%",
-        minWidth: "60px",
-        fieldset: {
-          display: "none"
-        },
-        '&.Mui-focused:has(div[aria-expanded="false"])': {
-          fieldset: {
-            display: "block"
-          }
-        },
-        ".MuiSelect-select": {
-          padding: "8px",
-          paddingRight: "24px !important"
-        },
-        svg: {
-          right: 0
-        },
-        ".MuiMenuItem-root": {
-          justifyContent: "flex-start"
-        },
-        ...sx
-      },
-      value,
-      onChange: onCountryChange,
-      renderValue: (code) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexWrap: "nowrap", gap: 0.5, sx: { cursor: "pointer" }, children: [
-        /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
-        /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
-      ] }),
-      children: [
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            sx: {
-              position: "sticky",
-              top: 0,
-              zIndex: 1,
-              bgcolor: "background.paper",
-              p: 1
+      ),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: listRef,
+          sx: {
+            flex: 1,
+            overflowY: "auto",
+            overflowX: "hidden",
+            maxHeight: isMobile ? "calc(60vh - 80px)" : "calc(300px - 65px)",
+            scrollBehavior: "smooth"
+          },
+          children: filteredCountries.length > 0 ? filteredCountries.map((c, index) => {
+            const parsed = parseCountry(c);
+            const isFocused = index === focusedIndex;
+            return /* @__PURE__ */ jsxs(
+              MenuItem,
+              {
+                value: parsed.iso2,
+                selected: parsed.iso2 === value,
+                onClick: () => handleCountryClick(parsed.iso2),
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  "&.Mui-selected": {
+                    backgroundColor: "rgba(0, 0, 0, 0.04)"
+                  },
+                  "&:hover": {
+                    backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)"
+                  },
+                  ...isFocused ? {
+                    backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+                    outline: "none"
+                  } : {}
+                },
+                children: [
+                  /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
+                  /* @__PURE__ */ jsx(Typography, { children: parsed.name }),
+                  showDialCode && /* @__PURE__ */ jsx(Typography, { sx: { ml: 1 }, color: "text.secondary", children: `+${parsed.dialCode}` })
+                ]
+              },
+              parsed.iso2
+            );
+          }) : /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: "No countries found" }) })
+        }
+      )
+    ] });
+    if (!isMobile) {
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          ref,
+          open,
+          onOpen: () => setOpen(true),
+          onClose: () => setOpen(false),
+          MenuProps: {
+            style: {
+              maxHeight: "300px",
+              top: "10px"
+            },
+            anchorOrigin: {
+              vertical: "bottom",
+              horizontal: "left"
             },
-            onClick: (e) => {
-              e.stopPropagation();
+            transformOrigin: {
+              vertical: "top",
+              horizontal: "left"
+            },
+            PaperProps: {
+              ref: menuRef,
+              sx: {
+                display: "flex",
+                "& .MuiList-root": {
+                  pt: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflowY: "hidden"
+                }
+              }
+            }
+          },
+          sx: {
+            width: "100%",
+            minWidth: "60px",
+            fieldset: {
+              display: "none"
+            },
+            '&.Mui-focused:has(div[aria-expanded="false"])': {
+              fieldset: {
+                display: "block"
+              }
             },
-            children: /* @__PURE__ */ jsx(
-              TextField,
+            ".MuiSelect-select": {
+              padding: "8px",
+              paddingRight: "24px !important"
+            },
+            svg: {
+              right: 0
+            },
+            ".MuiMenuItem-root": {
+              justifyContent: "flex-start"
+            },
+            ...sx
+          },
+          value,
+          onChange: (e) => {
+            onChange(e.target.value);
+            setValue(name, e.target.value);
+          },
+          renderValue: (code) => /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", flexWrap: "nowrap", gap: 0.5, sx: { cursor: "pointer" }, children: [
+            /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
+            /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name })
+          ] }),
+          children: countryListContent
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(Box, { ref, sx: { ...sx }, children: [
+      /* @__PURE__ */ jsxs(
+        Box,
+        {
+          onClick: () => setOpen(true),
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "nowrap",
+          gap: 0.5,
+          sx: {
+            cursor: "pointer",
+            padding: "8px",
+            paddingRight: "24px",
+            position: "relative",
+            border: "none",
+            "-webkit-tap-highlight-color": "transparent",
+            userSelect: "none",
+            background: "none",
+            "&:hover, &:focus, &:active": {
+              backgroundColor: "transparent",
+              outline: "none"
+            },
+            touchAction: "manipulation"
+          },
+          children: [
+            /* @__PURE__ */ jsx(FlagEmoji, { iso2: value, style: { display: "flex" } }),
+            /* @__PURE__ */ jsx(Typography, { children: countryDetail?.name }),
+            /* @__PURE__ */ jsx(
+              Box,
               {
-                inputRef,
-                autoFocus: !isMobile,
-                fullWidth: true,
-                placeholder: "Search country...",
-                value: searchText,
-                onChange: handleSearchChange,
-                onKeyDown: handleKeyDown,
-                onClick: (e) => e.stopPropagation(),
-                size: "small",
-                variant: "outlined"
+                sx: {
+                  position: "absolute",
+                  right: "8px",
+                  width: 0,
+                  height: 0,
+                  borderLeft: "5px solid transparent",
+                  borderRight: "5px solid transparent",
+                  borderTop: "5px solid currentColor"
+                }
               }
             )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Box,
-          {
-            ref: listRef,
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog,
+        {
+          open,
+          onClose: () => setOpen(false),
+          fullWidth: true,
+          maxWidth: "xs",
+          TransitionComponent: Transition,
+          PaperProps: {
             sx: {
-              flex: 1,
-              overflowY: "auto",
-              overflowX: "hidden",
-              maxHeight: "calc(300px - 65px)",
-              scrollBehavior: "smooth"
-            },
-            children: filteredCountries.length > 0 ? filteredCountries.map((c, index) => {
-              const parsed = parseCountry(c);
-              const isFocused = index === focusedIndex;
-              return /* @__PURE__ */ jsxs(
-                MenuItem,
-                {
-                  value: parsed.iso2,
-                  selected: parsed.iso2 === value,
-                  onClick: () => handleCountryClick(parsed.iso2),
-                  sx: {
-                    "&.Mui-selected": {
-                      backgroundColor: "rgba(0, 0, 0, 0.04)"
-                    },
-                    "&:hover": {
-                      backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)"
-                    },
-                    ...isFocused ? {
-                      backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
-                      outline: "none"
-                    } : {}
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
-                    /* @__PURE__ */ jsx(Typography, { children: parsed.name })
-                  ]
-                },
-                parsed.iso2
-              );
-            }) : /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: "No countries found" }) })
-          }
-        )
-      ]
-    }
-  );
-});
+              position: "absolute",
+              bottom: 0,
+              m: 0,
+              borderBottomLeftRadius: 0,
+              borderBottomRightRadius: 0,
+              width: "100%"
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { sx: { p: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Select Country" }),
+              /* @__PURE__ */ jsx(IconButton, { edge: "end", onClick: () => setOpen(false), sx: { "-webkit-tap-highlight-color": "transparent" }, children: "\u2715" })
+            ] }),
+            /* @__PURE__ */ jsx(DialogContent, { sx: { p: 0 }, children: countryListContent })
+          ]
+        }
+      )
+    ] });
+  }
+);
 CountrySelect.defaultProps = {
-  sx: {}
+  sx: {},
+  showDialCode: false
 };
 export default CountrySelect;