fix(ui): replace HeroUI dropdowns with Radix ActionDropdown to fix overlay conflict (#10002)

Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>

ui/components/users/table/data-table-row-actions.tsx

@@ -1,22 +1,16 @@
 "use client";
 
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownMenu,
-  DropdownSection,
-  DropdownTrigger,
-} from "@heroui/dropdown";
-import {
-  DeleteDocumentBulkIcon,
-  EditDocumentBulkIcon,
-} from "@heroui/shared-icons";
 import { Row } from "@tanstack/react-table";
-import clsx from "clsx";
+import { Pencil, Trash2 } from "lucide-react";
 import { useState } from "react";
 
 import { VerticalDotsIcon } from "@/components/icons";
 import { Button } from "@/components/shadcn";
+import {
+  ActionDropdown,
+  ActionDropdownDangerZone,
+  ActionDropdownItem,
+} from "@/components/shadcn/dropdown";
 import { Modal } from "@/components/shadcn/modal";
 
 import { DeleteForm, EditForm } from "../forms";
@@ -25,7 +19,6 @@ interface DataTableRowActionsProps<UserProps> {
   row: Row<UserProps>;
   roles?: { id: string; name: string }[];
 }
-const iconClasses = "text-2xl text-default-500 pointer-events-none shrink-0";
 
 export function DataTableRowActions<UserProps>({
   row,
@@ -66,51 +59,27 @@ export function DataTableRowActions<UserProps>({
       </Modal>
 
       <div className="relative flex items-center justify-end gap-2">
-        <Dropdown
-          className="border-border-neutral-secondary bg-bg-neutral-secondary border shadow-xl"
-          placement="bottom"
-        >
-          <DropdownTrigger>
+        <ActionDropdown
+          trigger={
             <Button variant="ghost" size="icon-sm" className="rounded-full">
               <VerticalDotsIcon className="text-slate-400" />
             </Button>
-          </DropdownTrigger>
-          <DropdownMenu
-            closeOnSelect
-            aria-label="Actions"
-            color="default"
-            variant="flat"
-          >
-            <DropdownSection title="Actions">
-              <DropdownItem
-                key="edit"
-                description="Allows you to edit the user"
-                textValue="Edit User"
-                startContent={<EditDocumentBulkIcon className={iconClasses} />}
-                onPress={() => setIsEditOpen(true)}
-              >
-                Edit User
-              </DropdownItem>
-            </DropdownSection>
-            <DropdownSection title="Danger zone">
-              <DropdownItem
-                key="delete"
-                className="text-text-error"
-                color="danger"
-                description="Delete the user permanently"
-                textValue="Delete User"
-                startContent={
-                  <DeleteDocumentBulkIcon
-                    className={clsx(iconClasses, "!text-text-error")}
-                  />
-                }
-                onPress={() => setIsDeleteOpen(true)}
-              >
-                Delete User
-              </DropdownItem>
-            </DropdownSection>
-          </DropdownMenu>
-        </Dropdown>
+          }
+        >
+          <ActionDropdownItem
+            icon={<Pencil />}
+            label="Edit User"
+            onSelect={() => setIsEditOpen(true)}
+          />
+          <ActionDropdownDangerZone>
+            <ActionDropdownItem
+              icon={<Trash2 />}
+              label="Delete User"
+              destructive
+              onSelect={() => setIsDeleteOpen(true)}
+            />
+          </ActionDropdownDangerZone>
+        </ActionDropdown>
       </div>
     </>
   );