ui(ContextMenuViewport): move to ui-next with theme support (#6008)

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,
 };

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;

platform/ui-next/src/components/ContextMenuViewport/index.ts

@@ -0,0 +1 @@
+export { default as ContextMenuViewport } from './ContextMenuViewport';

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,