From 3d70db2d3b7a154c2b8ead4987890ba7a9674c2c Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Mon, 13 Jul 2026 12:56:03 -0400
Subject: [PATCH] ui(ContextMenuViewport): move to ui-next with theme support
 (#6008)

---
 .../contextMenuUICustomization.ts             |  4 +-
 .../ContextMenuViewport.tsx                   | 47 +++++++++++++++++++
 .../components/ContextMenuViewport/index.ts   |  1 +
 platform/ui-next/src/components/index.ts      |  2 +
 4 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx
 create mode 100644 platform/ui-next/src/components/ContextMenuViewport/index.ts

diff --git a/extensions/default/src/customizations/contextMenuUICustomization.ts b/extensions/default/src/customizations/contextMenuUICustomization.ts
index 4366df89c..6b941238d 100644
--- a/extensions/default/src/customizations/contextMenuUICustomization.ts
+++ b/extensions/default/src/customizations/contextMenuUICustomization.ts
@@ -1,5 +1,5 @@
-import { ContextMenu } from '@ohif/ui';
+import { ContextMenuViewport } from '@ohif/ui-next';
 
 export default {
-  'ui.contextMenu': ContextMenu,
+  'ui.contextMenu': ContextMenuViewport,
 };
diff --git a/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx
new file mode 100644
index 000000000..e8eda754c
--- /dev/null
+++ b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Icons } from '../Icons';
+
+interface ContextMenuViewportProps {
+  items?: Array<{
+    label: string;
+    action: (item: any, props: any) => void;
+    iconRight?: string;
+    [key: string]: unknown;
+  }>;
+  [key: string]: unknown;
+}
+
+const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      data-cy="context-menu"
+      className="bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 relative z-50 w-48 overflow-hidden rounded-md border border-input p-1 shadow-md"
+      onContextMenu={e => e.preventDefault()}
+    >
+      {items.map((item, index) => (
+        <button
+          type="button"
+          key={index}
+          data-cy="context-menu-item"
+          onClick={() => item.action(item, props)}
+          onMouseEnter={e => e.currentTarget.focus({ preventScroll: true })}
+          className="hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-base outline-none"
+        >
+          <span>{item.label}</span>
+          {item.iconRight && (
+            <Icons.ByName
+              name={item.iconRight}
+              className="inline"
+            />
+          )}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ContextMenuViewport;
diff --git a/platform/ui-next/src/components/ContextMenuViewport/index.ts b/platform/ui-next/src/components/ContextMenuViewport/index.ts
new file mode 100644
index 000000000..85f59ff4c
--- /dev/null
+++ b/platform/ui-next/src/components/ContextMenuViewport/index.ts
@@ -0,0 +1 @@
+export { default as ContextMenuViewport } from './ContextMenuViewport';
diff --git a/platform/ui-next/src/components/index.ts b/platform/ui-next/src/components/index.ts
index 0fea6af3e..636c73bec 100644
--- a/platform/ui-next/src/components/index.ts
+++ b/platform/ui-next/src/components/index.ts
@@ -142,6 +142,7 @@ import {
 } from './ToolButton';
 import { LayoutSelector } from './LayoutSelector';
 import { ToolSettings } from './OHIFToolSettings';
+import { ContextMenuViewport } from './ContextMenuViewport';
 export * from './StudyList';
 export { DataRow } from './DataRow';
 export { MeasurementTable } from './MeasurementTable';
@@ -309,6 +310,7 @@ export {
   ViewportDialog,
   CinePlayer,
   LayoutSelector,
+  ContextMenuViewport,
   SmartScrollbar,
   useSmartScrollbarLayoutContext,
   useSmartScrollbarScrollContext,