fix(ui): replace HeroUI dropdowns with shadcn selects (#10097)

ui/components/invitations/workflow/forms/send-invitation-form.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { Select, SelectItem } from "@heroui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SaveIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
@@ -9,6 +8,13 @@ import * as z from "zod";
 
 import { sendInvite } from "@/actions/invitations/invitation";
 import { Button } from "@/components/shadcn";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/shadcn/select/select";
 import { useToast } from "@/components/ui";
 import { CustomInput } from "@/components/ui/custom";
 import { Form } from "@/components/ui/form";
@@ -111,35 +117,33 @@ export const SendInvitationForm = ({
           name="roleId"
           control={form.control}
           render={({ field }) => (
-            <>
+            <div className="flex flex-col gap-1.5">
               <Select
-                {...field}
-                label="Role"
-                placeholder="Select a role"
-                classNames={{
-                  selectorIcon: "right-2",
-                }}
-                variant="flat"
-                isDisabled={isSelectorDisabled}
-                selectedKeys={[field.value]}
-                onSelectionChange={(selected) =>
-                  field.onChange(selected?.currentKey || "")
-                }
+                value={field.value || undefined}
+                onValueChange={field.onChange}
+                disabled={isSelectorDisabled}
               >
-                {isSelectorDisabled ? (
-                  <SelectItem key={defaultRole}>{defaultRole}</SelectItem>
-                ) : (
-                  roles.map((role) => (
-                    <SelectItem key={role.id}>{role.name}</SelectItem>
-                  ))
-                )}
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a role" />
+                </SelectTrigger>
+                <SelectContent>
+                  {isSelectorDisabled ? (
+                    <SelectItem value={defaultRole}>{defaultRole}</SelectItem>
+                  ) : (
+                    roles.map((role) => (
+                      <SelectItem key={role.id} value={role.id}>
+                        {role.name}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
               </Select>
               {form.formState.errors.roleId && (
                 <p className="text-text-error mt-2 text-sm">
                   {form.formState.errors.roleId.message}
                 </p>
               )}
-            </>
+            </div>
           )}
         />