From dc459b91247b80c9470dc5a64e29c9d6cd4aa276 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Thu, 15 Oct 2026 22:28:19 +0800
Subject: [PATCH] refactor(dify-ui): keep DropdownMenuArrow as the Base UI
 Menu.Arrow alias

Move the guide arrow styling into the knowledge upgrade guide so the shared
arrow keeps the upstream className(state) and style contract.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/dify-ui/src/dropdown-menu/index.tsx  | 19 ++-----------------
 .../components/operations-dropdown.tsx        |  8 +++++++-
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/dify-ui/src/dropdown-menu/index.tsx b/packages/dify-ui/src/dropdown-menu/index.tsx
index 986a3115a76..08345f77716 100644
--- a/packages/dify-ui/src/dropdown-menu/index.tsx
+++ b/packages/dify-ui/src/dropdown-menu/index.tsx
@@ -168,23 +168,8 @@ type DropdownMenuRadioGroupProps<Value = unknown> = Omit<
 }
 type DropdownMenuItemVariant = MenuItemVariant
 
-type DropdownMenuArrowProps = Omit<Menu.Arrow.Props, 'className'> & {
-  className?: string
-}
-
-function DropdownMenuArrow({ className, ...props }: DropdownMenuArrowProps) {
-  return (
-    <Menu.Arrow
-      className={cn(
-        'relative block h-2.5 w-5 overflow-clip',
-        'data-[side=bottom]:-top-2.5 data-[side=left]:-right-3.75 data-[side=left]:rotate-90 data-[side=right]:-left-3.75 data-[side=right]:-rotate-90 data-[side=top]:-bottom-2.5 data-[side=top]:rotate-180',
-        "before:absolute before:bottom-0 before:left-1/2 before:size-[calc(10px*sqrt(2))] before:transform-[translate(-50%,50%)_rotate(45deg)] before:rounded-tl-sm before:border before:border-divider-subtle before:bg-components-panel-bg before:content-['']",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
+const DropdownMenuArrow = Menu.Arrow
+type DropdownMenuArrowProps = Menu.Arrow.Props
 
 function DropdownMenuRadioGroup<Value = unknown>(
   props: DropdownMenuRadioGroupProps<Value>,
diff --git a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
index 177015f149d..60dc857fa29 100644
--- a/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
+++ b/web/app/components/datasets/list/dataset-card/components/operations-dropdown.tsx
@@ -158,7 +158,13 @@ const OperationsDropdown = ({
                     sideOffset={12}
                     className="w-80 max-w-[calc(100vw-2rem)] overflow-visible rounded-xl border border-divider-subtle bg-components-panel-bg p-0 shadow-md"
                   >
-                    <DropdownMenuArrow />
+                    <DropdownMenuArrow
+                      className={cn(
+                        'relative block h-2.5 w-5 overflow-clip',
+                        'data-[side=bottom]:-top-2.5 data-[side=left]:-right-3.75 data-[side=left]:rotate-90 data-[side=right]:-left-3.75 data-[side=right]:-rotate-90 data-[side=top]:-bottom-2.5 data-[side=top]:rotate-180',
+                        "before:absolute before:bottom-0 before:left-1/2 before:size-[calc(10px*sqrt(2))] before:transform-[translate(-50%,50%)_rotate(45deg)] before:rounded-tl-sm before:border before:border-divider-subtle before:bg-components-panel-bg before:content-['']",
+                      )}
+                    />
                     <div role="presentation" className="px-4 pt-3.5">
                       <div className="system-md-medium text-text-primary">
                         {t(($) => $['upgrade.guideTitle'], { ns: 'knowledgeUpgrade' })}