From 4b563b0d818607425ad8c2db7690680d40a581bc Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:17:54 +0330
Subject: [PATCH 01/10] remove unnecessary filter

value is always truthy
---
 content/snippets/phone-input.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 83ba8c9..7518ae3 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -126,7 +126,6 @@ const CountrySelect = ({
               <CommandEmpty>No country found.</CommandEmpty>
               <CommandGroup>
                 {options
-                  .filter((x) => x.value)
                   .map((option) => (
                     <CommandItem
                       className="gap-2"

From 37f69a2e7370c1d1e5e0555a685588824ffe0917 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:19:30 +0330
Subject: [PATCH 02/10] remove another unnecessary check

---
 content/snippets/phone-input.mdx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 7518ae3..4f93f3a 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -137,11 +137,9 @@ const CountrySelect = ({
                         countryName={option.label}
                       />
                       <span className="flex-1 text-sm">{option.label}</span>
-                      {option.value && (
-                        <span className="text-foreground/50 text-sm">
-                          {`+${RPNInput.getCountryCallingCode(option.value)}`}
-                        </span>
-                      )}
+                      <span className="text-foreground/50 text-sm">
+                        {`+${RPNInput.getCountryCallingCode(option.value)}`}
+                      </span>
                       <CheckIcon
                         className={cn(
                           "ml-auto h-4 w-4",

From ebf1dab162056d4a72abe726293059a0e795f5d8 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:20:57 +0330
Subject: [PATCH 03/10] remove unnecessary displayName assignment

---
 content/snippets/phone-input.mdx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 4f93f3a..64195c2 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -166,7 +166,6 @@ const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
     </span>
   );
 };
-FlagComponent.displayName = "FlagComponent";
 
 export { PhoneInput };
 ```

From af0247b4acab8fce718fae0fde5cc0bb3aad4c73 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:30:36 +0330
Subject: [PATCH 04/10] cast a type

---
 content/snippets/phone-input.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 64195c2..516677c 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -59,7 +59,7 @@ const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
            *
            * @param {E164Number | undefined} value - The entered value
            */
-          onChange={(value) => onChange?.(value || "")}
+          onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
           {...props}
         />
       );

From 5d1c721a3745b9be7d67ce2879fa6cd473533603 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 13:38:37 +0330
Subject: [PATCH 05/10] use tailwind size instead of h and w + format

---
 content/snippets/phone-input.mdx | 49 ++++++++++++++++----------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 516677c..6a91445 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -112,7 +112,7 @@ const CountrySelect = ({
           <FlagComponent country={value} countryName={value} />
           <ChevronsUpDown
             className={cn(
-              "-mr-2 h-4 w-4 opacity-50",
+              "-mr-2 size-4 opacity-50",
               disabled ? "hidden" : "opacity-100",
             )}
           />
@@ -125,29 +125,28 @@ const CountrySelect = ({
             <ScrollArea className="h-72">
               <CommandEmpty>No country found.</CommandEmpty>
               <CommandGroup>
-                {options
-                  .map((option) => (
-                    <CommandItem
-                      className="gap-2"
-                      key={option.value}
-                      onSelect={() => handleSelect(option.value)}
-                    >
-                      <FlagComponent
-                        country={option.value}
-                        countryName={option.label}
-                      />
-                      <span className="flex-1 text-sm">{option.label}</span>
-                      <span className="text-foreground/50 text-sm">
-                        {`+${RPNInput.getCountryCallingCode(option.value)}`}
-                      </span>
-                      <CheckIcon
-                        className={cn(
-                          "ml-auto h-4 w-4",
-                          option.value === value ? "opacity-100" : "opacity-0",
-                        )}
-                      />
-                    </CommandItem>
-                  ))}
+                {options.map((option) => (
+                  <CommandItem
+                    className="gap-2"
+                    key={option.value}
+                    onSelect={() => handleSelect(option.value)}
+                  >
+                    <FlagComponent
+                      country={option.value}
+                      countryName={option.label}
+                    />
+                    <span className="flex-1 text-sm">{option.label}</span>
+                    <span className="text-sm text-foreground/50">
+                      {`+${RPNInput.getCountryCallingCode(option.value)}`}
+                    </span>
+                    <CheckIcon
+                      className={cn(
+                        "ml-auto size-4",
+                        option.value === value ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                  </CommandItem>
+                ))}
               </CommandGroup>
             </ScrollArea>
           </CommandList>
@@ -161,7 +160,7 @@ const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
   const Flag = flags[country];
 
   return (
-    <span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm">
+    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20">
       {Flag && <Flag title={countryName} />}
     </span>
   );

From f345dffa88aac5304ed2d408234405b73465178c Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:29:13 +0330
Subject: [PATCH 06/10] some refactor and cleanup

---
 content/snippets/phone-input.mdx | 82 ++++++++++++++++++--------------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 6a91445..ed3f14e 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -78,38 +78,34 @@ const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
 );
 InputComponent.displayName = "InputComponent";
 
-type CountrySelectOption = { label: string; value: RPNInput.Country };
+type CountryEntry = { label: string; value: RPNInput.Country | undefined };
 
 type CountrySelectProps = {
   disabled?: boolean;
   value: RPNInput.Country;
-  onChange: (value: RPNInput.Country) => void;
-  options: CountrySelectOption[];
+  options: CountryEntry[];
+  onChange: (country: RPNInput.Country) => void;
 };
 
 const CountrySelect = ({
   disabled,
-  value,
+  value: selectedCountry,
+  options: countryList,
   onChange,
-  options,
 }: CountrySelectProps) => {
-  const handleSelect = React.useCallback(
-    (country: RPNInput.Country) => {
-      onChange(country);
-    },
-    [onChange],
-  );
-
   return (
     <Popover>
       <PopoverTrigger asChild>
         <Button
           type="button"
-          variant={"outline"}
-          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
+          variant="outline"
+          className="flex gap-1 rounded-e-none rounded-s-lg px-3"
           disabled={disabled}
         >
-          <FlagComponent country={value} countryName={value} />
+          <FlagComponent
+            country={selectedCountry}
+            countryName={selectedCountry}
+          />
           <ChevronsUpDown
             className={cn(
               "-mr-2 size-4 opacity-50",
@@ -125,28 +121,17 @@ const CountrySelect = ({
             <ScrollArea className="h-72">
               <CommandEmpty>No country found.</CommandEmpty>
               <CommandGroup>
-                {options.map((option) => (
-                  <CommandItem
-                    className="gap-2"
-                    key={option.value}
-                    onSelect={() => handleSelect(option.value)}
-                  >
-                    <FlagComponent
-                      country={option.value}
-                      countryName={option.label}
-                    />
-                    <span className="flex-1 text-sm">{option.label}</span>
-                    <span className="text-sm text-foreground/50">
-                      {`+${RPNInput.getCountryCallingCode(option.value)}`}
-                    </span>
-                    <CheckIcon
-                      className={cn(
-                        "ml-auto size-4",
-                        option.value === value ? "opacity-100" : "opacity-0",
-                      )}
+                {countryList.map(({ value, label }) =>
+                  countryCode ? (
+                    <CountrySelectOption
+                      key={value}
+                      country={value}
+                      countryName={label}
+                      selectedCountry={selectedCountry}
+                      onChange={onChange}
                     />
-                  </CommandItem>
-                ))}
+                  ) : null,
+                )}
               </CommandGroup>
             </ScrollArea>
           </CommandList>
@@ -156,11 +141,34 @@ const CountrySelect = ({
   );
 };
 
+interface CountrySelectOptionProps extends RPNInput.FlagProps {
+  selectedCountry: RPNInput.Country;
+  onChange: (country: RPNInput.Country) => void;
+}
+
+const CountrySelectOption = ({
+  country,
+  countryName,
+  selectedCountry,
+  onChange,
+}: CountrySelectOptionProps) => {
+  return (
+    <CommandItem className="gap-2" onSelect={() => onChange(country)}>
+      <FlagComponent country={country} countryName={countryName} />
+      <span className="flex-1 text-sm">{countryName}</span>
+      <span className="text-foreground/50 text-sm">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
+      <CheckIcon
+        className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
+      />
+    </CommandItem>
+  );
+};
+
 const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
   const Flag = flags[country];
 
   return (
-    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20">
+    <span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm">
       {Flag && <Flag title={countryName} />}
     </span>
   );

From 18b5da9ccee7371fa5a4cb017fb8d4f50b4ebded Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Mon, 11 Nov 2024 14:33:28 +0330
Subject: [PATCH 07/10] format

---
 content/snippets/phone-input.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index ed3f14e..28a638c 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -156,7 +156,7 @@ const CountrySelectOption = ({
     <CommandItem className="gap-2" onSelect={() => onChange(country)}>
       <FlagComponent country={country} countryName={countryName} />
       <span className="flex-1 text-sm">{countryName}</span>
-      <span className="text-foreground/50 text-sm">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
+      <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
       <CheckIcon
         className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
       />
@@ -168,7 +168,7 @@ const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
   const Flag = flags[country];
 
   return (
-    <span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm">
+    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20">
       {Flag && <Flag title={countryName} />}
     </span>
   );

From 5af404e0873b31cda1bd7c53c5604a983ab9f3b4 Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Wed, 13 Nov 2024 13:26:20 +0330
Subject: [PATCH 08/10] fix a variable name

---
 content/snippets/phone-input.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 28a638c..2e0aa24 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -122,7 +122,7 @@ const CountrySelect = ({
               <CommandEmpty>No country found.</CommandEmpty>
               <CommandGroup>
                 {countryList.map(({ value, label }) =>
-                  countryCode ? (
+                  value ? (
                     <CountrySelectOption
                       key={value}
                       country={value}
@@ -156,7 +156,7 @@ const CountrySelectOption = ({
     <CommandItem className="gap-2" onSelect={() => onChange(country)}>
       <FlagComponent country={country} countryName={countryName} />
       <span className="flex-1 text-sm">{countryName}</span>
-      <span className="text-sm text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
+      <span className="text-foreground/50 text-sm">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
       <CheckIcon
         className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
       />
@@ -168,7 +168,7 @@ const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
   const Flag = flags[country];
 
   return (
-    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20">
+    <span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm">
       {Flag && <Flag title={countryName} />}
     </span>
   );

From 21e8787ebcf80ab9b6ffcc8bb55e200b389f120a Mon Sep 17 00:00:00 2001
From: "Amir H. Khanjani" <72540492+ahkhanjani@users.noreply.github.com>
Date: Sat, 16 Nov 2024 19:07:12 +0330
Subject: [PATCH 09/10] improve a type

---
 content/snippets/phone-input.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 2e0aa24..eea9684 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -32,7 +32,7 @@ import { cn } from "@/lib/utils";
 import { ScrollArea } from "./scroll-area";
 
 type PhoneInputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
+  React.ComponentProps<"input">,
   "onChange" | "value"
 > &
   Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {

From 9678987f77a4fb38eb711e75dec0a2ac14de6572 Mon Sep 17 00:00:00 2001
From: omeralpi <omeralpi@icloud.com>
Date: Sat, 16 Nov 2024 20:29:26 +0300
Subject: [PATCH 10/10] fix: update PhoneInputProps to omit "ref" in type
 definition

---
 components/ui/phone-input.tsx    | 4 ++--
 content/snippets/phone-input.mdx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
index 05aa88f..b92ddf2 100644
--- a/components/ui/phone-input.tsx
+++ b/components/ui/phone-input.tsx
@@ -26,8 +26,8 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
 
 type PhoneInputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "onChange" | "value"
+  React.ComponentProps<"input">,
+  "onChange" | "value" | "ref"
 > &
   Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
     onChange?: (value: RPNInput.Value) => void;
diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index eea9684..3746110 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -33,7 +33,7 @@ import { ScrollArea } from "./scroll-area";
 
 type PhoneInputProps = Omit<
   React.ComponentProps<"input">,
-  "onChange" | "value"
+  "onChange" | "value" | "ref"
 > &
   Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
     onChange?: (value: RPNInput.Value) => void;