phone-input

1import * as React from "react";
2import { CheckIcon, ChevronsUpDown } from "lucide-react";
3import * as RPNInput from "react-phone-number-input";
4import flags from "react-phone-number-input/flags";
5 
6import { Button } from "@/components/ui/button";
7import {
8  Command,
9  CommandEmpty,
10  CommandGroup,
11  CommandInput,
12  CommandItem,
13  CommandList,
14} from "@/components/ui/command";
15import { Input } from "@/components/ui/input";
16import {
17  Popover,
18  PopoverContent,
19  PopoverTrigger,
20} from "@/components/ui/popover";
21import { ScrollArea } from "@/components/ui/scroll-area";
22import { cn } from "@/lib/utils";
23 
24type PhoneInputProps = Omit<
25  React.ComponentProps<"input">,
26  "onChange" | "value" | "ref"
27> &
28  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
29    onChange?: (value: RPNInput.Value) => void;
30  };
31 
32const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
33  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
34    ({ className, onChange, value, ...props }, ref) => {
35      return (
36        <RPNInput.default
37          ref={ref}
38          className={cn("flex", className)}
39          flagComponent={FlagComponent}
40          countrySelectComponent={CountrySelect}
41          inputComponent={InputComponent}
42          smartCaret={false}
43          value={value || undefined}
44          /**
45           * Handles the onChange event.
46           *
47           * react-phone-number-input might trigger the onChange event as undefined
48           * when a valid phone number is not entered. To prevent this,
49           * the value is coerced to an empty string.
50           *
51           * @param {E164Number | undefined} value - The entered value
52           */
53          onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
54          {...props}
55        />
56      );
57    },
58  );
59PhoneInput.displayName = "PhoneInput";
60 
61const InputComponent = React.forwardRef<
62  HTMLInputElement,
63  React.ComponentProps<"input">
64>(({ className, ...props }, ref) => (
65  <Input
66    className={cn("rounded-e-lg rounded-s-none", className)}
67    {...props}
68    ref={ref}
69  />
70));
71InputComponent.displayName = "InputComponent";
72 
73type CountryEntry = { label: string; value: RPNInput.Country | undefined };
74 
75type CountrySelectProps = {
76  disabled?: boolean;
77  value: RPNInput.Country;
78  options: CountryEntry[];
79  onChange: (country: RPNInput.Country) => void;
80};
81 
82const CountrySelect = ({
83  disabled,
84  value: selectedCountry,
85  options: countryList,
86  onChange,
87// … truncated