OHIF with Cornerstone3D 2.0 (#4347)

platform/ui-next/src/components/StudyBrowserViewOptions/StudyBrowserViewOptions.tsx

@@ -1,36 +1,44 @@
 import React from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../DropdownMenu/DropdownMenu';
 
 export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: withAppTypes) {
   const handleTabChange = (tabName: string) => {
     onSelectTab(tabName);
   };
 
+  const activeTab = tabs.find(tab => tab.name === activeTabName);
+
   return (
-    <div className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-center rounded border bg-black p-2">
-      <select
-        onChange={e => handleTabChange(e.target.value)}
-        value={activeTabName}
-        onClick={e => e.stopPropagation()}
-        className="w-full appearance-none bg-transparent text-sm leading-tight text-white shadow transition duration-300 focus:outline-none"
-      >
+    <DropdownMenu>
+      <DropdownMenuTrigger className="border-inputfield-main focus:border-inputfield-main flex h-[26px] w-[125px] items-center justify-start rounded border bg-black p-2 text-sm text-white">
+        {activeTab?.label}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="bg-black">
         {tabs.map(tab => {
           const { name, label, studies } = tab;
           const isActive = activeTabName === name;
           const isDisabled = !studies.length;
+
           if (isDisabled) {
             return null;
           }
+
           return (
-            <option
-              className={`appearance-none bg-black text-white ${isActive ? 'font-bold' : ''}`}
-              value={name}
+            <DropdownMenuItem
               key={name}
+              className={`text-white ${isActive ? 'font-bold' : ''}`}
+              onClick={() => handleTabChange(name)}
             >
               {label}
-            </option>
+            </DropdownMenuItem>
           );
         })}
-      </select>
-    </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }