АРХ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: канонизация labels, editor и ui dropdown-оберток

plane-src/packages/ui/src/breadcrumbs/navigation-dropdown.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 import type { TContextMenuItem } from "../dropdowns";
-import { CustomMenu } from "../dropdowns";
+import { ActionDropdown } from "../dropdowns";
 import { cn } from "../utils";
 import { Breadcrumbs } from "./breadcrumbs";
 
@@ -36,7 +36,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
   function NavigationButton() {
     return (
       <Tooltip tooltipContent={selectedItem?.title} position="bottom" disabled={isOpen}>
-        <button
+        <div
           onClick={(e) => {
             if (!isLast) {
               e.preventDefault();
@@ -56,7 +56,7 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
             {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
             <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
           </div>
-        </button>
+        </div>
       </Tooltip>
     );
   }
@@ -66,8 +66,8 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
   }
 
   return (
-    <CustomMenu
-      customButton={
+    <ActionDropdown
+      button={
         <>
           <NavigationButton />
           <Breadcrumbs.Separator
@@ -86,40 +86,21 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
       }
       placement="bottom-start"
       className="h-full rounded-sm"
-      customButtonClassName={cn(
+      buttonClassName={cn(
         "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
         {
           "bg-surface-2": isOpen,
         }
       )}
-      closeOnSelect
-      menuButtonOnClick={() => {
-        setIsOpen(!isOpen);
-      }}
-      onMenuClose={() => {
-        setIsOpen(false);
-      }}
-    >
-      {navigationItems.map((item) => {
-        if (item.shouldRender === false) return null;
-        return (
-          <CustomMenu.MenuItem
-            key={item.key}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (item.key === selectedItemKey) return;
-              item.action();
-            }}
-            className={cn(
-              "flex items-center gap-2",
-              {
-                "text-placeholder": item.disabled,
-              },
-              item.className
-            )}
-            disabled={item.disabled}
-          >
+      onOpenChange={setIsOpen}
+      items={navigationItems.map((item) => ({
+        ...item,
+        action: () => {
+          if (item.key === selectedItemKey) return;
+          item.action();
+        },
+        customContent: (
+          <div className="flex w-full items-center gap-2">
             {item.icon && <item.icon className={cn("size-4 flex-shrink-0", item.iconClassName)} />}
             <div className="w-full">
               <h5>{item.title}</h5>
@@ -134,9 +115,9 @@ export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdow
               )}
             </div>
             {item.key === selectedItemKey && <CheckIcon className="size-3.5 flex-shrink-0" />}
-          </CustomMenu.MenuItem>
-        );
-      })}
-    </CustomMenu>
+          </div>
+        ),
+      }))}
+    />
   );
 }

plane-src/packages/ui/src/link/block.tsx

@@ -5,11 +5,12 @@
  */
 
 import React from "react";
+import { MoreVertical } from "lucide-react";
 // plane utils
 import { calculateTimeAgo, cn, getIconForLink } from "@plane/utils";
 // plane ui
 import type { TContextMenuItem } from "../dropdowns/context-menu/root";
-import { CustomMenu } from "../dropdowns/custom-menu";
+import { ActionDropdown } from "../dropdowns/action-dropdown";
 
 export type TLinkItemBlockProps = {
   title: string;
@@ -38,36 +39,17 @@ export function LinkItemBlock(props: TLinkItemBlockProps) {
       </div>
       {menuItems && (
         <div className="hidden group-hover:block">
-          <CustomMenu placement="bottom-end" menuItemsClassName="z-20" closeOnSelect verticalEllipsis>
-            {menuItems.map((item) => (
-              <CustomMenu.MenuItem
-                key={item.key}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  item.action();
-                }}
-                className={cn("flex w-full items-center gap-2", {
-                  "text-placeholder": item.disabled,
-                })}
-                disabled={item.disabled}
-              >
-                {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
-                <div>
-                  <h5>{item.title}</h5>
-                  {item.description && (
-                    <p
-                      className={cn("whitespace-pre-line text-tertiary", {
-                        "text-placeholder": item.disabled,
-                      })}
-                    >
-                      {item.description}
-                    </p>
-                  )}
-                </div>
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
+          <ActionDropdown
+            placement="bottom-end"
+            menuClassName="z-20"
+            button={
+              <span className="grid place-items-center rounded-sm p-1 text-secondary hover:bg-white/6">
+                <MoreVertical className="h-3.5 w-3.5" />
+              </span>
+            }
+            buttonClassName="grid place-items-center"
+            items={menuItems}
+          />
         </div>
       )}
     </div>