АРХ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: канон составных detail-menu и customButton-trigger

2026-04-22 12:36:23 +03:00 · 2026-04-22 12:36:23 +03:00 · 082948a69c
parent c86fc16cdf
commit 082948a69c
7 changed files with 203 additions and 103 deletions
--- a/plane-src/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
@ -8,10 +8,12 @@ import React from "react";
 import { observer } from "mobx-react";

 import { useTranslation } from "@plane/i18n";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
 import { PlusIcon } from "@plane/propel/icons";
 // plane imports
 import type { TIssueServiceType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/ui";
+import { ActionDropdown } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 // Plane-web
@ -40,33 +42,32 @@ export const RelationActionButton = observer(function RelationActionButton(props
  };

  // button element
-  const customButtonElement = customButton ? <>{customButton}</> : <PlusIcon className="h-4 w-4" />;
+  const items: TContextMenuItem[] = Object.values(ISSUE_RELATION_OPTIONS).flatMap((item, index) =>
+    item
+      ? [
+          {
+            key: `${item.key}-${index}`,
+            title: t(item.i18n_label),
+            action: () => handleOnClick(item.key),
+            customContent: (
+              <div className="flex items-center gap-2">
+                {item.icon(12)}
+                <span>{t(item.i18n_label)}</span>
+              </div>
+            ),
+          },
+        ]
+      : []
+  );

  return (
-    <CustomMenu
-      customButton={customButtonElement}
+    <ActionDropdown
+      items={items}
+      button={customButton ?? <PlusIcon className="h-4 w-4" />}
+      buttonAsChild={!!customButton}
+      buttonClassName={!customButton ? getIconButtonStyling("ghost", "sm") : undefined}
      placement="bottom-start"
      disabled={disabled}
-      maxHeight="lg"
-      closeOnSelect
-    >
-      {Object.values(ISSUE_RELATION_OPTIONS).map((item, index) => {
-        if (!item) return <></>;
-
-        return (
-          <CustomMenu.MenuItem
-            key={index}
-            onClick={() => {
-              handleOnClick(item.key);
-            }}
-          >
-            <div className="flex items-center gap-2">
-              {item.icon(12)}
-              <span>{t(item.i18n_label)}</span>
-            </div>
-          </CustomMenu.MenuItem>
-        );
-      })}
-    </CustomMenu>
+    />
  );
 });
--- a/plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@ -8,9 +8,11 @@ import React from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
 import { PlusIcon, WorkItemsIcon } from "@plane/propel/icons";
 import type { TIssue, TIssueServiceType } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
+import type { TContextMenuItem } from "@plane/ui";
+import { ActionDropdown } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";

@ -66,37 +68,29 @@ export const SubIssuesActionButton = observer(function SubIssuesActionButton(pro
  };

  // options
-  const optionItems = [
+  const optionItems: TContextMenuItem[] = [
    {
-      i18n_label: "common.create_new",
-      icon: <PlusIcon className="h-3 w-3" />,
-      onClick: handleCreateNew,
+      key: "create-new",
+      title: t("common.create_new"),
+      icon: PlusIcon,
+      action: handleCreateNew,
    },
    {
-      i18n_label: "common.add_existing",
-      icon: <WorkItemsIcon className="h-3 w-3" />,
-      onClick: handleAddExisting,
+      key: "add-existing",
+      title: t("common.add_existing"),
+      icon: WorkItemsIcon,
+      action: handleAddExisting,
    },
  ];

-  // button element
-  const customButtonElement = customButton ? <>{customButton}</> : <PlusIcon className="h-4 w-4" />;
-
  return (
-    <CustomMenu customButton={customButtonElement} placement="bottom-start" disabled={disabled} closeOnSelect>
-      {optionItems.map((item, index) => (
-        <CustomMenu.MenuItem
-          key={index}
-          onClick={() => {
-            item.onClick();
-          }}
-        >
-          <div className="flex items-center gap-2">
-            {item.icon}
-            <span>{t(item.i18n_label)}</span>
-          </div>
-        </CustomMenu.MenuItem>
-      ))}
-    </CustomMenu>
+    <ActionDropdown
+      items={optionItems}
+      button={customButton ?? <PlusIcon className="h-4 w-4" />}
+      buttonAsChild={!!customButton}
+      buttonClassName={!customButton ? getIconButtonStyling("ghost", "sm") : undefined}
+      placement="bottom-start"
+      disabled={disabled}
+    />
  );
 });
--- a/plane-src/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail-widgets/widget-button.tsx
@ -9,17 +9,22 @@ import React from "react";
 import { Button } from "@plane/propel/button";
 import { cn } from "@plane/utils";

-type Props = {
+type Props = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "title"> & {
  icon: React.ReactNode;
  title: string;
  disabled?: boolean;
  compactView?: boolean;
 };

-export function IssueDetailWidgetButton(props: Props) {
-  const { icon, title, disabled = false, compactView = false } = props;
+export const IssueDetailWidgetButton = React.forwardRef<HTMLButtonElement, Props>(function IssueDetailWidgetButton(
+  props,
+  ref
+) {
+  const { icon, title, disabled = false, compactView = false, className, ...buttonProps } = props;
+
  return (
    <Button
+      ref={ref}
      variant={"secondary"}
      disabled={disabled}
      size="xl"
@ -27,11 +32,13 @@ export function IssueDetailWidgetButton(props: Props) {
        "border-transparent shadow-none focus-visible:outline-none",
        compactView
          ? "h-10 rounded-[18px] bg-layer-2/80 px-4 backdrop-blur-xl hover:bg-layer-2-active"
-          : "rounded-md"
+          : "rounded-md",
+        className
      )}
+      {...buttonProps}
    >
      {icon && icon}
      <span className="text-body-xs-medium">{title}</span>
    </Button>
  );
-}
+});
--- a/plane-src/apps/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail/parent/root.tsx
@ -8,10 +8,11 @@ import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import { MinusCircle } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
+import { getIconButtonStyling } from "@plane/propel/icon-button";
 import type { TIssue } from "@plane/types";
 // component
 // ui
-import { ControlLink, CustomMenu } from "@plane/ui";
+import { ActionDropdown, ControlLink } from "@plane/ui";
 // helpers
 import { generateWorkItemLink } from "@plane/utils";
 // hooks
@ -92,19 +93,38 @@ export const IssueParentDetail = observer(function IssueParentDetail(props: TIss
          </div>
        </ControlLink>

-        <CustomMenu ellipsis optionsClassName="p-1.5">
-          <div className="border-b border-strong text-11 font-medium text-secondary">{t("issue.sibling.label")}</div>
+        <ActionDropdown
+          items={[]}
+          buttonClassName={getIconButtonStyling("ghost", "sm")}
+          placement="bottom-end"
+          menuClassName="p-1.5"
+          menuContent={({ closeDropdown }) => (
+            <div className="min-w-[12rem]">
+              <div className="border-b border-strong px-2 pb-2 text-11 font-medium text-secondary">
+                {t("issue.sibling.label")}
+              </div>

-          <IssueParentSiblings workspaceSlug={workspaceSlug} currentIssue={issue} parentIssue={parentIssue} />
+              <IssueParentSiblings
+                closeDropdown={closeDropdown}
+                workspaceSlug={workspaceSlug}
+                currentIssue={issue}
+                parentIssue={parentIssue}
+              />

-          <CustomMenu.MenuItem
-            onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}
-            className="flex items-center gap-2 py-2 text-danger-primary"
-          >
-            <MinusCircle className="h-4 w-4" />
-            <span>{t("issue.remove.parent.label")}</span>
-          </CustomMenu.MenuItem>
-        </CustomMenu>
+              <button
+                type="button"
+                onClick={() => {
+                  issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null });
+                  closeDropdown();
+                }}
+                className="flex w-full items-center gap-2 rounded-[0.9rem] px-2 py-2 text-left text-danger-primary transition-colors hover:bg-white/6"
+              >
+                <MinusCircle className="h-4 w-4" />
+                <span>{t("issue.remove.parent.label")}</span>
+              </button>
+            </div>
+          )}
+        />
      </div>
    </>
  );
--- a/plane-src/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail/parent/sibling-item.tsx
@ -5,8 +5,6 @@
 */

 import { observer } from "mobx-react";
-// ui
-import { CustomMenu } from "@plane/ui";
 // helpers
 import { generateWorkItemLink } from "@plane/utils";
 // hooks
@ -16,12 +14,13 @@ import { useProject } from "@/hooks/store/use-project";
 import { IssueIdentifier } from "@/plane-web/components/issues/issue-details/issue-identifier";

 type TIssueParentSiblingItem = {
+  closeDropdown?: () => void;
  workspaceSlug: string;
  issueId: string;
 };

 export const IssueParentSiblingItem = observer(function IssueParentSiblingItem(props: TIssueParentSiblingItem) {
-  const { workspaceSlug, issueId } = props;
+  const { closeDropdown, workspaceSlug, issueId } = props;
  // hooks
  const { getProjectById } = useProject();
  const {
@ -43,23 +42,23 @@ export const IssueParentSiblingItem = observer(function IssueParentSiblingItem(p
  });

  return (
-    <>
-      <CustomMenu.MenuItem
-        key={issueDetail.id}
-        onClick={() => window.open(workItemLink, "_blank", "noopener,noreferrer")}
-      >
-        <div className="flex items-center gap-2 py-0.5">
-          {issueDetail.project_id && projectDetails?.identifier && (
-            <IssueIdentifier
-              projectId={issueDetail.project_id}
-              issueTypeId={issueDetail.type_id}
-              projectIdentifier={projectDetails?.identifier}
-              issueSequenceId={issueDetail.sequence_id}
-              size="xs"
-            />
-          )}
-        </div>
-      </CustomMenu.MenuItem>
-    </>
+    <button
+      type="button"
+      className="flex w-full items-center gap-2 rounded-[0.9rem] px-2 py-2 text-left text-secondary transition-colors hover:bg-white/6"
+      onClick={() => {
+        closeDropdown?.();
+        window.open(workItemLink, "_blank", "noopener,noreferrer");
+      }}
+    >
+      {issueDetail.project_id && projectDetails?.identifier && (
+        <IssueIdentifier
+          projectId={issueDetail.project_id}
+          issueTypeId={issueDetail.type_id}
+          projectIdentifier={projectDetails?.identifier}
+          issueSequenceId={issueDetail.sequence_id}
+          size="xs"
+        />
+      )}
+    </button>
  );
 });
--- a/plane-src/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
+++ b/plane-src/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
@ -14,13 +14,14 @@ import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { IssueParentSiblingItem } from "./sibling-item";

 export type TIssueParentSiblings = {
+  closeDropdown?: () => void;
  workspaceSlug: string;
  currentIssue: TIssue;
  parentIssue: TIssue;
 };

 export const IssueParentSiblings = observer(function IssueParentSiblings(props: TIssueParentSiblings) {
-  const { workspaceSlug, currentIssue, parentIssue } = props;
+  const { closeDropdown, workspaceSlug, currentIssue, parentIssue } = props;
  // hooks
  const {
    fetchSubIssues,
@ -41,18 +42,23 @@ export const IssueParentSiblings = observer(function IssueParentSiblings(props:
  return (
    <div className="my-1">
      {isLoading ? (
-        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
+        <div className="flex items-center gap-2 px-2 py-1.5 text-left text-11 whitespace-nowrap text-secondary">
          Loading
        </div>
      ) : subIssueIds && subIssueIds.length > 0 ? (
        subIssueIds.map(
          (issueId) =>
            currentIssue.id != issueId && (
-              <IssueParentSiblingItem key={issueId} workspaceSlug={workspaceSlug} issueId={issueId} />
+              <IssueParentSiblingItem
+                key={issueId}
+                closeDropdown={closeDropdown}
+                workspaceSlug={workspaceSlug}
+                issueId={issueId}
+              />
            )
        )
      ) : (
-        <div className="flex items-center gap-2 px-1 py-1 text-left text-11 whitespace-nowrap text-secondary">
+        <div className="flex items-center gap-2 px-2 py-1.5 text-left text-11 whitespace-nowrap text-secondary">
          No sibling work items
        </div>
      )}
--- a/plane-src/packages/ui/src/dropdowns/action-dropdown.tsx
+++ b/plane-src/packages/ui/src/dropdowns/action-dropdown.tsx
@ -16,19 +16,42 @@ import { cn } from "../utils";
 import type { TContextMenuItem } from "./context-menu";

 export type TActionDropdownTrigger = React.ReactNode;
+type TActionDropdownMenuContent = React.ReactNode | ((props: { closeDropdown: () => void }) => React.ReactNode);

 export interface IActionDropdownProps {
  button?: TActionDropdownTrigger;
+  buttonAsChild?: boolean;
  buttonClassName?: string;
  className?: string;
  disabled?: boolean;
  items: TContextMenuItem[];
+  menuContent?: TActionDropdownMenuContent;
  menuClassName?: string;
  onOpenChange?: (isOpen: boolean) => void;
  placement?: TPlacement;
  portalElement?: Element | null;
 }

+const assignRef = <T,>(ref: React.Ref<T> | undefined, value: T) => {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  (ref as React.MutableRefObject<T>).current = value;
+};
+
+const composeEventHandlers = <E extends { defaultPrevented?: boolean }>(
+  ...handlers: Array<((event: E) => void) | undefined>
+) => {
+  return (event: E) => {
+    for (const handler of handlers) {
+      handler?.(event);
+      if (event.defaultPrevented) break;
+    }
+  };
+};
+
 const renderActionContent = (item: TContextMenuItem) =>
  item.customContent ?? (
    <div className="flex items-start gap-2">
@ -108,14 +131,27 @@ function ActionDropdownItem(props: TActionDropdownItemProps) {
 }

 export function ActionDropdown(props: IActionDropdownProps) {
-  const { button, buttonClassName, className, disabled = false, items, menuClassName, onOpenChange, placement, portalElement } = props;
+  const {
+    button,
+    buttonAsChild = false,
+    buttonClassName,
+    className,
+    disabled = false,
+    items,
+    menuContent,
+    menuClassName,
+    onOpenChange,
+    placement,
+    portalElement,
+  } = props;
  const dropdownRef = React.useRef<HTMLDivElement | null>(null);
  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
  const [isOpen, setIsOpen] = React.useState(false);

  const renderedItems = items.filter((item) => item.shouldRender !== false);
-  const isDropdownDisabled = disabled || renderedItems.length === 0;
+  const hasMenuContent = menuContent !== undefined && menuContent !== null;
+  const isDropdownDisabled = disabled || (!hasMenuContent && renderedItems.length === 0);

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement: placement ?? "bottom-end",
@ -172,9 +208,13 @@ export function ActionDropdown(props: IActionDropdownProps) {

  useOutsideClickDetector(dropdownRef, closeDropdown);

+  const setReferenceNode = React.useCallback((node: HTMLElement | null) => {
+    setReferenceElement(node);
+  }, []);
+
  const defaultButton = (
    <button
-      ref={setReferenceElement as React.Ref<HTMLButtonElement>}
+      ref={setReferenceNode as React.Ref<HTMLButtonElement>}
      type="button"
      className={cn(
        "clickable relative grid place-items-center rounded-sm border-0 bg-transparent p-1 text-secondary shadow-none outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 hover:text-primary",
@ -196,9 +236,34 @@ export function ActionDropdown(props: IActionDropdownProps) {
    </button>
  );

+  const asChildButton =
+    buttonAsChild && React.isValidElement(button) && button.type !== React.Fragment
+      ? React.cloneElement(button, {
+          ref: (node: HTMLElement | null) => {
+            setReferenceNode(node);
+            assignRef((button as React.ReactElement & { ref?: React.Ref<HTMLElement> }).ref, node);
+          },
+          className: cn((button.props as { className?: string }).className, buttonClassName),
+          disabled: isDropdownDisabled || (button.props as { disabled?: boolean }).disabled,
+          onClick: composeEventHandlers(
+            (button.props as { onClick?: (event: React.MouseEvent<HTMLElement>) => void }).onClick,
+            handleTriggerClick
+          ),
+          onKeyDown: composeEventHandlers(
+            (button.props as { onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void }).onKeyDown,
+            handleKeyDown
+          ),
+          type: (button.props as { type?: string }).type ?? "button",
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen,
+          "aria-label": (button.props as { ["aria-label"]?: string })["aria-label"] ?? "Work item actions",
+          "data-action-dropdown-trigger": "true",
+        })
+      : null;
+
  const customButton = button ? (
    <button
-      ref={setReferenceElement as React.Ref<HTMLButtonElement>}
+      ref={setReferenceNode as React.Ref<HTMLButtonElement>}
      type="button"
      className={cn(
        "clickable block h-full rounded-full border-0 bg-transparent p-0 shadow-none outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0",
@ -236,11 +301,19 @@ export function ActionDropdown(props: IActionDropdownProps) {
                menuClassName
              )}
            >
-              <div className="max-h-[min(85vh,40rem)] space-y-1 overflow-y-auto">
-                {renderedItems.map((item) => (
-                  <ActionDropdownItem key={item.key} item={item} onSelect={closeDropdown} />
-                ))}
-              </div>
+              {hasMenuContent ? (
+                typeof menuContent === "function" ? (
+                  menuContent({ closeDropdown })
+                ) : (
+                  menuContent
+                )
+              ) : (
+                <div className="max-h-[min(85vh,40rem)] space-y-1 overflow-y-auto">
+                  {renderedItems.map((item) => (
+                    <ActionDropdownItem key={item.key} item={item} onSelect={closeDropdown} />
+                  ))}
+                </div>
+              )}
            </div>
          </div>,
          portalElement ?? document.body
@ -249,7 +322,7 @@ export function ActionDropdown(props: IActionDropdownProps) {

  return (
    <div ref={dropdownRef} className={cn("relative h-full", className)} onKeyDownCapture={handleKeyDown}>
-      {customButton ?? defaultButton}
+      {asChildButton ?? customButton ?? defaultButton}
      {popup}
    </div>
  );