phone-number-input-basic

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