@blocklet/payment-react 1.18.55 → 1.19.0

package/src/components/country-select.tsx

@@ -1,21 +1,15 @@
 /* eslint-disable @typescript-eslint/indent */
-import { useMemo, forwardRef, useState, useEffect, ChangeEvent, useRef, KeyboardEvent } from 'react';
+import { useMemo, useState, useEffect, ChangeEvent, useRef, KeyboardEvent } from 'react';
 import { Box, MenuItem, Typography, TextField, Dialog, DialogContent, IconButton, Select, Slide } from '@mui/material';
-import { TransitionProps } from '@mui/material/transitions';
 import { useFormContext } from 'react-hook-form';
 import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
-import type { SxProps } from '@mui/material';
+import type { SlideProps, SxProps } from '@mui/material';
 import type { CountryIso2 } from 'react-international-phone';
 import { useMobile } from '../hooks/mobile';
 
-const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement;
-  },
-  ref: React.Ref<unknown>
-) {
+function Transition({ ref, ...props }: { ref: React.RefObject<unknown> } & SlideProps) {
   return <Slide direction="up" ref={ref} timeout={200} {...props} />;
-});
+}
 
 export type CountrySelectProps = {
   value: CountryIso2;
@@ -25,407 +19,426 @@ export type CountrySelectProps = {
   showDialCode?: boolean;
 };
 
-const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(
-  ({ value, onChange, name, sx, showDialCode = false }, ref) => {
-    const { setValue } = useFormContext();
-    const [open, setOpen] = useState(false);
-    const [searchText, setSearchText] = useState('');
-    const inputRef = useRef<HTMLInputElement>(null);
-    const menuRef = useRef<HTMLDivElement>(null);
-    const listRef = useRef<HTMLDivElement>(null);
-    const [focusedIndex, setFocusedIndex] = useState(-1);
-    const itemHeightRef = useRef<number>(40);
-    const { isMobile } = useMobile();
-    const measuredRef = useRef(false);
-
-    // Handle window resize
-    useEffect(() => {
-      if (!open) return () => {};
-      const handleResize = () => {
-        measuredRef.current = false;
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => {
-        window.removeEventListener('resize', handleResize);
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-
-    const scrollToTop = () => {
-      if (listRef.current) {
-        listRef.current.scrollTop = 0;
-      }
+export default function CountrySelect({
+  ref = undefined,
+  value,
+  onChange,
+  name,
+  sx = {},
+  showDialCode = false,
+}: CountrySelectProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
+  const { setValue } = useFormContext();
+  const [open, setOpen] = useState(false);
+  const [searchText, setSearchText] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const itemHeightRef = useRef<number>(40);
+  const { isMobile } = useMobile();
+  const measuredRef = useRef(false);
+
+  // Handle window resize
+  useEffect(() => {
+    if (!open) return () => {};
+    const handleResize = () => {
+      measuredRef.current = false;
     };
 
-    const measureItemHeight = () => {
-      if (!listRef.current || !open) return;
-
-      const items = listRef.current.querySelectorAll('.MuiMenuItem-root');
-      if (items.length > 0) {
-        const firstItem = items[0] as HTMLElement;
-        if (firstItem.offsetHeight > 0) {
-          itemHeightRef.current = firstItem.offsetHeight;
-        }
-      }
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const scrollToTop = () => {
+    if (listRef.current) {
+      listRef.current.scrollTop = 0;
+    }
+  };
 
-    const controlScrollPosition = (index: number) => {
-      if (!listRef.current) return;
+  const measureItemHeight = () => {
+    if (!listRef.current || !open) return;
 
-      // Always measure height when dropdown is open for accuracy
-      if (open && !measuredRef.current) {
-        measureItemHeight();
-        measuredRef.current = true;
+    const items = listRef.current.querySelectorAll('.MuiMenuItem-root');
+    if (items.length > 0) {
+      const firstItem = items[0] as HTMLElement;
+      if (firstItem.offsetHeight > 0) {
+        itemHeightRef.current = firstItem.offsetHeight;
       }
+    }
+  };
 
-      const listHeight = listRef.current.clientHeight;
-      const targetPosition = index * itemHeightRef.current;
+  const controlScrollPosition = (index: number) => {
+    if (!listRef.current) return;
 
-      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);
-      }
-    };
+    // Always measure height when dropdown is open for accuracy
+    if (open && !measuredRef.current) {
+      measureItemHeight();
+      measuredRef.current = true;
+    }
 
-    useEffect(() => {
-      let timeout: NodeJS.Timeout | null = null;
-      if (open) {
-        timeout = setTimeout(() => {
-          scrollToTop();
-          if (!isMobile && inputRef.current) {
-            inputRef.current.focus();
-          }
-        }, 100);
-      } else {
-        setSearchText('');
-        setFocusedIndex(-1);
-      }
-      return () => {
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-      };
-    }, [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]);
+    const listHeight = listRef.current.clientHeight;
+    const targetPosition = index * itemHeightRef.current;
 
-    useEffect(() => {
-      scrollToTop();
+    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: NodeJS.Timeout | null = null;
+    if (open) {
+      timeout = setTimeout(() => {
+        scrollToTop();
+        if (!isMobile && inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    } else {
+      setSearchText('');
       setFocusedIndex(-1);
-    }, [searchText]);
-
-    useEffect(() => {
-      let timeout: NodeJS.Timeout | null = null;
-      if (focusedIndex >= 0) {
-        timeout = setTimeout(() => {
-          controlScrollPosition(focusedIndex);
-        }, 10);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
       }
-      return () => {
-        if (timeout) {
-          clearTimeout(timeout);
-        }
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [focusedIndex, filteredCountries.length]);
-
-    const countryDetail = useMemo(() => {
-      const item = defaultCountries.find((v) => v[1] === value);
-      return value && item ? parseCountry(item) : { name: '' };
-    }, [value]);
-
-    const handleCountryClick = (code: CountryIso2) => {
-      onChange(code);
-      setValue(name, code);
-      setOpen(false);
     };
+  }, [open, isMobile]);
+
+  const filteredCountries = useMemo(() => {
+    if (!searchText) return defaultCountries;
 
-    const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-      e.stopPropagation();
-      setSearchText(e.target.value);
+    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: NodeJS.Timeout | null = null;
+    if (focusedIndex >= 0) {
+      timeout = setTimeout(() => {
+        controlScrollPosition(focusedIndex);
+      }, 10);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [focusedIndex, filteredCountries.length]);
 
-    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-      e.stopPropagation();
+  const countryDetail = useMemo(() => {
+    const item = defaultCountries.find((v) => v[1] === value);
+    return value && item ? parseCountry(item) : { name: '' };
+  }, [value]);
 
-      if (e.key === 'Escape') {
-        setOpen(false);
-        return;
-      }
+  const handleCountryClick = (code: CountryIso2) => {
+    onChange(code);
+    setValue(name, code);
+    setOpen(false);
+  };
 
-      const handleNavigation = (direction: 'next' | 'prev') => {
-        e.preventDefault();
-        setFocusedIndex((prev) => {
-          if (direction === 'next') {
-            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;
-        });
-      };
-
-      if (e.key === 'Tab') {
-        handleNavigation(e.shiftKey ? 'prev' : 'next');
-        return;
-      }
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    setSearchText(e.target.value);
+  };
 
-      if (e.key === 'ArrowDown') {
-        handleNavigation('next');
-        return;
-      }
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
 
-      if (e.key === 'ArrowUp') {
-        handleNavigation('prev');
-        return;
-      }
+    if (e.key === 'Escape') {
+      setOpen(false);
+      return;
+    }
 
-      if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
-        e.preventDefault();
-        const country = parseCountry(filteredCountries[focusedIndex]);
-        handleCountryClick(country.iso2);
-      }
+    const handleNavigation = (direction: 'next' | 'prev') => {
+      e.preventDefault();
+      setFocusedIndex((prev) => {
+        if (direction === 'next') {
+          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;
+      });
     };
 
-    const countryListContent = (
-      <>
-        <Box
-          sx={{
-            position: 'sticky',
-            top: 0,
-            zIndex: 1,
-            bgcolor: 'background.paper',
-            p: 1,
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}>
-          <TextField
-            inputRef={inputRef}
-            autoFocus={!isMobile}
-            fullWidth
-            placeholder="Search country..."
-            value={searchText}
-            onChange={handleSearchChange}
-            onKeyDown={handleKeyDown}
-            onClick={(e) => e.stopPropagation()}
-            size="small"
-            variant="outlined"
-          />
-        </Box>
-        <Box
-          ref={listRef}
-          sx={{
-            flex: 1,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            maxHeight: isMobile ? 'calc(60vh - 80px)' : 'calc(300px - 65px)',
-            scrollBehavior: 'smooth',
-          }}>
-          {filteredCountries.length > 0 ? (
-            filteredCountries.map((c: any, index) => {
-              const parsed = parseCountry(c);
-              const isFocused = index === focusedIndex;
-
-              return (
-                <MenuItem
-                  key={parsed.iso2}
-                  value={parsed.iso2}
-                  selected={parsed.iso2 === value}
-                  onClick={() => handleCountryClick(parsed.iso2)}
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    '&.Mui-selected': {
-                      backgroundColor: 'primary.lighter',
-                    },
-                    '&:hover': {
-                      backgroundColor: 'grey.100',
-                    },
-                    ...(isFocused
-                      ? {
-                          backgroundColor: 'grey.100',
-                          outline: 'none',
-                        }
-                      : {}),
-                  }}>
-                  <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
-                  <Typography>{parsed.name}</Typography>
-                  {showDialCode && (
-                    <Typography sx={{ ml: 1 }} color="text.secondary">
-                      {`+${parsed.dialCode}`}
-                    </Typography>
-                  )}
-                </MenuItem>
-              );
-            })
-          ) : (
-            <MenuItem disabled>
-              <Typography color="text.secondary">No countries found</Typography>
-            </MenuItem>
-          )}
-        </Box>
-      </>
-    );
+    if (e.key === 'Tab') {
+      handleNavigation(e.shiftKey ? 'prev' : 'next');
+      return;
+    }
 
-    if (!isMobile) {
-      return (
-        <Select
-          ref={ref}
-          open={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,
-              sx: {
-                display: 'flex',
-                '& .MuiList-root': {
-                  pt: 0,
+    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);
+    }
+  };
+
+  const countryListContent = (
+    <>
+      <Box
+        sx={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          bgcolor: 'background.paper',
+          p: 1,
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}>
+        <TextField
+          inputRef={inputRef}
+          autoFocus={!isMobile}
+          fullWidth
+          placeholder="Search country..."
+          value={searchText}
+          onChange={handleSearchChange}
+          onKeyDown={handleKeyDown}
+          onClick={(e) => e.stopPropagation()}
+          size="small"
+          variant="outlined"
+        />
+      </Box>
+      <Box
+        ref={listRef}
+        sx={{
+          flex: 1,
+          overflowY: 'auto',
+          overflowX: 'hidden',
+          maxHeight: isMobile ? 'calc(60vh - 80px)' : 'calc(300px - 65px)',
+          scrollBehavior: 'smooth',
+        }}>
+        {filteredCountries.length > 0 ? (
+          filteredCountries.map((c: any, index) => {
+            const parsed = parseCountry(c);
+            const isFocused = index === focusedIndex;
+
+            return (
+              <MenuItem
+                key={parsed.iso2}
+                value={parsed.iso2}
+                selected={parsed.iso2 === value}
+                onClick={() => handleCountryClick(parsed.iso2)}
+                sx={{
                   display: 'flex',
-                  flexDirection: 'column',
-                  overflowY: 'hidden',
-                },
+                  alignItems: 'center',
+                  '&.Mui-selected': {
+                    backgroundColor: 'primary.lighter',
+                  },
+                  '&:hover': {
+                    backgroundColor: 'grey.100',
+                  },
+                  ...(isFocused
+                    ? {
+                        backgroundColor: 'grey.100',
+                        outline: 'none',
+                      }
+                    : {}),
+                }}>
+                <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
+                <Typography>{parsed.name}</Typography>
+                {showDialCode && (
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      ml: 1,
+                    }}>
+                    {`+${parsed.dialCode}`}
+                  </Typography>
+                )}
+              </MenuItem>
+            );
+          })
+        ) : (
+          <MenuItem disabled>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+              }}>
+              No countries found
+            </Typography>
+          </MenuItem>
+        )}
+      </Box>
+    </>
+  );
+
+  if (!isMobile) {
+    return (
+      <Select
+        ref={ref}
+        open={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,
+            sx: {
+              display: 'flex',
+              '& .MuiList-root': {
+                pt: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                overflowY: 'hidden',
               },
             },
-          }}
-          sx={{
-            width: '100%',
-            minWidth: '60px',
+          },
+        }}
+        sx={{
+          width: '100%',
+          minWidth: '60px',
+          fieldset: {
+            display: 'none',
+          },
+          '&.Mui-focused:has(div[aria-expanded="false"])': {
             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',
+              display: 'block',
             },
-            ...sx,
-          }}
-          value={value}
-          onChange={(e) => {
-            onChange(e.target.value as CountryIso2);
-            setValue(name, e.target.value);
-          }}
-          renderValue={(code) => (
-            <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
-              <FlagEmoji iso2={code} style={{ display: 'flex' }} />
-              <Typography>{countryDetail?.name}</Typography>
-            </Box>
-          )}>
-          {countryListContent}
-        </Select>
-      );
-    }
-
-    return (
-      <Box ref={ref} sx={{ ...sx }}>
-        <Box
-          onClick={() => setOpen(true)}
-          display="flex"
-          alignItems="center"
-          flexWrap="nowrap"
-          gap={0.5}
-          sx={{
-            cursor: 'pointer',
+          },
+          '.MuiSelect-select': {
             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',
-          }}>
-          <FlagEmoji iso2={value} style={{ display: 'flex' }} />
-          <Typography>{countryDetail?.name}</Typography>
+            paddingRight: '24px !important',
+          },
+          svg: {
+            right: 0,
+          },
+          '.MuiMenuItem-root': {
+            justifyContent: 'flex-start',
+          },
+          ...sx,
+        }}
+        value={value}
+        onChange={(e) => {
+          onChange(e.target.value as CountryIso2);
+          setValue(name, e.target.value);
+        }}
+        renderValue={(code) => (
           <Box
             sx={{
-              position: 'absolute',
-              right: '8px',
-              width: 0,
-              height: 0,
-              borderLeft: '5px solid transparent',
-              borderRight: '5px solid transparent',
-              borderTop: '5px solid currentColor',
-            }}
-          />
-        </Box>
-
-        <Dialog
-          open={open}
-          onClose={() => setOpen(false)}
-          fullWidth
-          maxWidth="xs"
-          TransitionComponent={Transition}
-          PaperProps={{
-            sx: {
-              position: 'absolute',
-              bottom: 0,
-              m: 0,
-              p: 0,
-              borderBottomLeftRadius: 0,
-              borderBottomRightRadius: 0,
-              width: '100%',
-            },
-          }}>
-          <Box sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-            <Typography variant="h6">Select Country</Typography>
-            <IconButton edge="end" onClick={() => setOpen(false)} sx={{ '-webkit-tap-highlight-color': 'transparent' }}>
-              ✕
-            </IconButton>
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'nowrap',
+              gap: 0.5,
+              cursor: 'pointer',
+            }}>
+            <FlagEmoji iso2={code} style={{ display: 'flex' }} />
+            <Typography>{countryDetail?.name}</Typography>
           </Box>
-          <DialogContent sx={{ '&.MuiDialogContent-root': { p: 0 } }}>{countryListContent}</DialogContent>
-        </Dialog>
-      </Box>
+        )}>
+        {countryListContent}
+      </Select>
     );
   }
-);
 
-CountrySelect.defaultProps = {
-  sx: {},
-  showDialCode: false,
-};
-export default CountrySelect;
+  return (
+    <Box ref={ref} sx={{ ...sx }}>
+      <Box
+        onClick={() => setOpen(true)}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'nowrap',
+          gap: 0.5,
+          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',
+        }}>
+        <FlagEmoji iso2={value} style={{ display: 'flex' }} />
+        <Typography>{countryDetail?.name}</Typography>
+        <Box
+          sx={{
+            position: 'absolute',
+            right: '8px',
+            width: 0,
+            height: 0,
+            borderLeft: '5px solid transparent',
+            borderRight: '5px solid transparent',
+            borderTop: '5px solid currentColor',
+          }}
+        />
+      </Box>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        fullWidth
+        maxWidth="xs"
+        // @ts-expect-error
+        TransitionComponent={Transition}
+        PaperProps={{
+          sx: {
+            position: 'absolute',
+            bottom: 0,
+            m: 0,
+            p: 0,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            width: '100%',
+          },
+        }}>
+        <Box sx={{ p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <Typography variant="h6">Select Country</Typography>
+          <IconButton edge="end" onClick={() => setOpen(false)} sx={{ '-webkit-tap-highlight-color': 'transparent' }}>
+            ✕
+          </IconButton>
+        </Box>
+        <DialogContent sx={{ '&.MuiDialogContent-root': { p: 0 } }}>{countryListContent}</DialogContent>
+      </Dialog>
+    </Box>
+  );
+}