From 34f1477701b3016f2536afc92eac2883c6725f5e Mon Sep 17 00:00:00 2001
From: Jul Guga <mr.guga89@proton.me>
Date: Sat, 9 Nov 2024 14:56:46 +0100
Subject: [PATCH] update & fix phone-input from latest modification from shadcn
 components

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

diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
index 05aa88f..f97f978 100644
--- a/components/ui/phone-input.tsx
+++ b/components/ui/phone-input.tsx
@@ -15,7 +15,7 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { Input, InputProps } from "@/components/ui/input";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
@@ -36,38 +36,38 @@ type PhoneInputProps = Omit<
 const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
   React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
     ({ className, onChange, ...props }, ref) => {
-      return (
+    return (
         <RPNInput.default
-          ref={ref}
-          className={cn("flex", className)}
-          flagComponent={FlagComponent}
-          countrySelectComponent={CountrySelect}
-          inputComponent={InputComponent}
-          smartCaret={false}
-          /**
-           * Handles the onChange event.
-           *
-           * react-phone-number-input might trigger the onChange event as undefined
-           * when a valid phone number is not entered. To prevent this,
-           * the value is coerced to an empty string.
-           *
-           * @param {E164Number | undefined} value - The entered value
-           */
+        ref={ref}
+        className={cn("flex", className)}
+        flagComponent={FlagComponent}
+        countrySelectComponent={CountrySelect}
+        inputComponent={InputComponent}
+        smartCaret={false}
+        /**
+         * Handles the onChange event.
+         *
+         * react-phone-number-input might trigger the onChange event as undefined
+         * when a valid phone number is not entered. To prevent this,
+         * the value is coerced to an empty string.
+         *
+         * @param {E164Number | undefined} value - The entered value
+         */
           onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
-          {...props}
-        />
-      );
+        {...props}
+      />
+    );
     },
   );
 PhoneInput.displayName = "PhoneInput";
 
-const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => (
-    <Input
+const InputComponent = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+({ className, ...props }, ref) => (
+  <Input
       className={cn("rounded-e-lg rounded-s-none", className)}
-      {...props}
-      ref={ref}
-    />
+    {...props}
+    ref={ref}
+  />
   ),
 );
 InputComponent.displayName = "InputComponent";
@@ -100,7 +100,7 @@ const CountrySelect = ({
         <Button
           type="button"
           variant={"outline"}
-          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
+          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3 [&_svg]:h-4 [&_svg]:w-6")}
           disabled={disabled}
         >
           <FlagComponent country={value} countryName={value} />
@@ -123,7 +123,7 @@ const CountrySelect = ({
                   .filter((x) => x.value)
                   .map((option) => (
                     <CommandItem
-                      className="gap-2"
+                      className="[&_svg]:h-4 [&_svg]:w-6"
                       key={option.value}
                       onSelect={() => handleSelect(option.value)}
                     >
diff --git a/content/snippets/phone-input.mdx b/content/snippets/phone-input.mdx
index 83ba8c9..2bc4e58 100644
--- a/content/snippets/phone-input.mdx
+++ b/content/snippets/phone-input.mdx
@@ -21,15 +21,15 @@ import {
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
-import { Input, InputProps } from "@/components/ui/input";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 import { cn } from "@/lib/utils";
-import { ScrollArea } from "./scroll-area";
 
 type PhoneInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -42,38 +42,38 @@ type PhoneInputProps = Omit<
 const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
   React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
     ({ className, onChange, ...props }, ref) => {
-      return (
+    return (
         <RPNInput.default
-          ref={ref}
-          className={cn("flex", className)}
-          flagComponent={FlagComponent}
-          countrySelectComponent={CountrySelect}
-          inputComponent={InputComponent}
-          smartCaret={false}
-          /**
-           * Handles the onChange event.
-           *
-           * react-phone-number-input might trigger the onChange event as undefined
-           * when a valid phone number is not entered. To prevent this,
-           * the value is coerced to an empty string.
-           *
-           * @param {E164Number | undefined} value - The entered value
-           */
-          onChange={(value) => onChange?.(value || "")}
-          {...props}
-        />
-      );
+        ref={ref}
+        className={cn("flex", className)}
+        flagComponent={FlagComponent}
+        countrySelectComponent={CountrySelect}
+        inputComponent={InputComponent}
+        smartCaret={false}
+        /**
+         * Handles the onChange event.
+         *
+         * react-phone-number-input might trigger the onChange event as undefined
+         * when a valid phone number is not entered. To prevent this,
+         * the value is coerced to an empty string.
+         *
+         * @param {E164Number | undefined} value - The entered value
+         */
+          onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
+        {...props}
+      />
+    );
     },
   );
 PhoneInput.displayName = "PhoneInput";
 
-const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => (
-    <Input
+const InputComponent = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+({ className, ...props }, ref) => (
+  <Input
       className={cn("rounded-e-lg rounded-s-none", className)}
-      {...props}
-      ref={ref}
-    />
+    {...props}
+    ref={ref}
+  />
   ),
 );
 InputComponent.displayName = "InputComponent";
@@ -106,7 +106,7 @@ const CountrySelect = ({
         <Button
           type="button"
           variant={"outline"}
-          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
+          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3 [&_svg]:h-4 [&_svg]:w-6")}
           disabled={disabled}
         >
           <FlagComponent country={value} countryName={value} />
@@ -129,7 +129,7 @@ const CountrySelect = ({
                   .filter((x) => x.value)
                   .map((option) => (
                     <CommandItem
-                      className="gap-2"
+                      className="[&_svg]:h-4 [&_svg]:w-6"
                       key={option.value}
                       onSelect={() => handleSelect(option.value)}
                     >
@@ -139,7 +139,7 @@ const CountrySelect = ({
                       />
                       <span className="flex-1 text-sm">{option.label}</span>
                       {option.value && (
-                        <span className="text-foreground/50 text-sm">
+                        <span className="text-sm text-foreground/50">
                           {`+${RPNInput.getCountryCallingCode(option.value)}`}
                         </span>
                       )}
@@ -164,7 +164,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>
   );