@blocklet/payment-react 1.18.35 → 1.18.37

package/src/components/country-select.tsx

@@ -1,339 +1,430 @@
 /* eslint-disable @typescript-eslint/indent */
 import { useMemo, forwardRef, useState, useEffect, ChangeEvent, useRef, KeyboardEvent } 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 { 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 { CountryIso2 } from 'react-international-phone';
 import { useMobile } from '../hooks/mobile';
 
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement;
+  },
+  ref: React.Ref<unknown>
+) {
+  return <Slide direction="up" ref={ref} timeout={200} {...props} />;
+});
+
 export type CountrySelectProps = {
   value: CountryIso2;
   onChange: (value: CountryIso2) => void;
   name: string;
   sx?: SxProps;
+  showDialCode?: boolean;
 };
 
-const CountrySelect = forwardRef<HTMLDivElement, CountrySelectProps>(({ value, onChange, name, sx }, 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;
+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;
+      }
     };
 
-    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] as HTMLElement;
+        if (firstItem.offsetHeight > 0) {
+          itemHeightRef.current = firstItem.offsetHeight;
+        }
+      }
     };
-    // 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;
+
+      // Always measure height when dropdown is open for accuracy
+      if (open && !measuredRef.current) {
+        measureItemHeight();
+        measuredRef.current = true;
+      }
 
-  const measureItemHeight = () => {
-    if (!listRef.current || !open) return;
+      const listHeight = listRef.current.clientHeight;
+      const targetPosition = index * itemHeightRef.current;
 
-    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;
+      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);
       }
-    }
-  };
+    };
 
-  const controlScrollPosition = (index: number) => {
-    if (!listRef.current) return;
+    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]);
 
-    // Always measure height when dropdown is open for accuracy
-    if (open && !measuredRef.current) {
-      measureItemHeight();
-      measuredRef.current = true;
-    }
+    const filteredCountries = useMemo(() => {
+      if (!searchText) return defaultCountries;
 
-    const listHeight = listRef.current.clientHeight;
-    const targetPosition = index * itemHeightRef.current;
+      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]);
 
-    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('');
+    useEffect(() => {
+      scrollToTop();
       setFocusedIndex(-1);
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
+    }, [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 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);
+    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation();
+
+      if (e.key === 'Escape') {
+        setOpen(false);
+        return;
       }
-    };
-    // 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 onCountryChange = (e: any) => {
-    onChange(e.target.value as CountryIso2);
-    setValue(name, e.target.value);
-  };
-
-  const handleCountryClick = (code: CountryIso2) => {
-    onChange(code);
-    setValue(name, code);
-    setOpen(false);
-  };
-
-  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-    setSearchText(e.target.value);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-
-    if (e.key === 'Escape') {
-      setOpen(false);
-      return;
-    }
 
-    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 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;
+      }
+
+      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;
-    }
+    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;
 
-    if (e.key === 'ArrowDown') {
-      handleNavigation('next');
-      return;
-    }
+              return (
+                <MenuItem
+                  key={parsed.iso2}
+                  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',
+                        }
+                      : {}),
+                  }}>
+                  <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 === 'ArrowUp') {
-      handleNavigation('prev');
-      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,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  overflowY: 'hidden',
+                },
+              },
+            },
+          }}
+          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={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>
+      );
     }
 
-    if (e.key === 'Enter' && focusedIndex >= 0 && focusedIndex < filteredCountries.length) {
-      e.preventDefault();
-      const country = parseCountry(filteredCountries[focusedIndex]);
-      handleCountryClick(country.iso2);
-    }
-  };
-
-  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',
+    return (
+      <Box ref={ref} sx={{ ...sx }}>
+        <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',
             },
-          },
-        },
-      }}
-      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={value}
-      onChange={onCountryChange}
-      renderValue={(code) => (
-        <Box display="flex" alignItems="center" flexWrap="nowrap" gap={0.5} sx={{ cursor: 'pointer' }}>
-          <FlagEmoji iso2={code} style={{ display: 'flex' }} />
+            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>
-      )}>
-      <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: '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={{
-                  '&.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',
-                      }
-                    : {}),
-                }}>
-                <FlagEmoji iso2={parsed.iso2} style={{ marginRight: '8px' }} />
-                <Typography>{parsed.name}</Typography>
-              </MenuItem>
-            );
-          })
-        ) : (
-          <MenuItem disabled>
-            <Typography color="text.secondary">No countries found</Typography>
-          </MenuItem>
-        )}
+        <Dialog
+          open={open}
+          onClose={() => setOpen(false)}
+          fullWidth
+          maxWidth="xs"
+          TransitionComponent={Transition}
+          PaperProps={{
+            sx: {
+              position: 'absolute',
+              bottom: 0,
+              m: 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={{ p: 0 }}>{countryListContent}</DialogContent>
+        </Dialog>
       </Box>
-    </Select>
-  );
-});
+    );
+  }
+);
 
 CountrySelect.defaultProps = {
   sx: {},
+  showDialCode: false,
 };
 export default CountrySelect;