ui(dropdown menu): Added DropdownMenu component in ui-next (#4387)

platform/ui-next/src/_pages/playground.tsx

@@ -24,6 +24,23 @@ import { Checkbox } from '../components/Checkbox';
 import { Toggle, toggleVariants } from '../components/Toggle';
 import { Slider } from '../components/Slider';
 import { ScrollArea, ScrollBar } from '../components/ScrollArea';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from '../components/DropdownMenu';
 
 import { BackgroundColorSelect } from '../components/BackgroundColorSelect';
 
@@ -244,7 +261,7 @@ export default function Playground() {
         </div>
       </div>
 
-      <h2 className="section-header">Tabs</h2>
+      <h2 className="section-header">Select</h2>
       <div className="row">
         <div className="example">
           <Select>
@@ -260,6 +277,63 @@ export default function Playground() {
         </div>
       </div>
 
+      <h2 className="section-header">Dropdown Menu</h2>
+      <div className="row">
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <Button>Open Basic</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem>Long name Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button>Open Align Start</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start">
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem>Long name Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button>Open Align End</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem>Long name Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        <div className="example">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button>Open Align Top</Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              side="top"
+              align="start"
+            >
+              <DropdownMenuItem onSelect={() => console.log('Item 1')}>Item 1</DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => console.log('Item 2')}>Item 2</DropdownMenuItem>
+              <DropdownMenuItem onSelect={() => console.log('Item 3')}>
+                Long name Item 3
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
       <h2 className="section-header">Switch</h2>
       <div className="row">
         <div className="example">

platform/ui-next/src/components/Calendar/index.tsx

@@ -1,3 +1,3 @@
 import { Calendar } from './Calendar';
 
-export default Calendar;
+export { Calendar};

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

@@ -1,3 +1,3 @@
 import { Combobox } from './Combobox';
 
-export default Combobox;
+export { Combobox};

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

@@ -1,3 +1,13 @@
-import * as CommandComponents from './Command';
+import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './Command';
 
-export default CommandComponents;
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

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

@@ -1,3 +1,3 @@
-import { DatePickerWithRange } from "./DateRange";
+import { DatePickerWithRange } from './DateRange';
 
-export default DatePickerWithRange;
+export { DatePickerWithRange };

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

@@ -1,3 +1,14 @@
-import * as DialogComponents from './Dialog';
+import { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription } from './Dialog';
 
-export default DialogComponents;
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

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

@@ -63,4 +63,4 @@ DisplaySetMessageListTooltip.propTypes = {
   id: PropTypes.string,
 };
 
-export default DisplaySetMessageListTooltip;
+export { DisplaySetMessageListTooltip };

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

@@ -1,3 +1,3 @@
-import DisplaySetMessageListTooltip from './DisplaySetMessageListTooltip';
+import { DisplaySetMessageListTooltip } from './DisplaySetMessageListTooltip';
 
-export default DisplaySetMessageListTooltip;
+export { DisplaySetMessageListTooltip };

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

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-none',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-input z-50 min-w-[8rem] overflow-hidden rounded border p-1 shadow-lg',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground border-input z-50 min-w-[8rem] overflow-hidden rounded border p-1 shadow-md',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded px-2 py-1 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded py-1 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded py-1 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

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

@@ -0,0 +1,35 @@
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './DropdownMenu';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};

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

@@ -63,4 +63,4 @@ PanelSection.propTypes = {
   ),
 };
 
-export default PanelSection;
+export { PanelSection };

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

@@ -1,3 +1,2 @@
-import PanelSection from './PanelSection';
-
-export default PanelSection;
+import { PanelSection } from './PanelSection';
+export { PanelSection };

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

@@ -1,3 +1,3 @@
-import * as Popover from './Popover';
+import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
 
-export default Popover;
+export { Popover, PopoverContent, PopoverTrigger, PopoverAnchor };

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

@@ -1,3 +1,3 @@
-import { Separator } from "./Separator";
+import { Separator } from './Separator';
 
-export default Separator;
+export { Separator };

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

@@ -419,4 +419,4 @@ SidePanel.propTypes = {
   expandedWidth: PropTypes.number,
 };
 
-export default SidePanel;
+export { SidePanel };

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

@@ -1,2 +1,2 @@
-import SidePanel from './SidePanel';
-export default SidePanel;
+import { SidePanel } from './SidePanel';
+export { SidePanel };

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

@@ -140,4 +140,4 @@ StudyBrowser.propTypes = {
   ),
 };
 
-export default StudyBrowser;
+export { StudyBrowser };

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

@@ -1,2 +1,2 @@
-import StudyBrowser from './StudyBrowser';
-export default StudyBrowser;
+import { StudyBrowser } from './StudyBrowser';
+export { StudyBrowser };

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Icons } from '../Icons';
 
-export default function StudyBrowserSort({ servicesManager }: withAppTypes) {
+export function StudyBrowserSort({ servicesManager }: withAppTypes) {
   const { customizationService, displaySetService } = servicesManager.services;
   const { values: sortFunctions } = customizationService.get('studyBrowser.sortFunctions');
 

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

@@ -1,3 +1,3 @@
-import StudyBrowserSort from './StudyBrowserSort';
+import { StudyBrowserSort } from './StudyBrowserSort';
 
-export default StudyBrowserSort;
+export { StudyBrowserSort };

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

@@ -1,10 +1,6 @@
 import React from 'react';
 
-export default function StudyBrowserViewOptions({
-  tabs,
-  onSelectTab,
-  activeTabName,
-}: withAppTypes) {
+export function StudyBrowserViewOptions({ tabs, onSelectTab, activeTabName }: withAppTypes) {
   const handleTabChange = (tabName: string) => {
     onSelectTab(tabName);
   };

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

@@ -1,3 +1,3 @@
-import StudyBrowserViewOptions from './StudyBrowserViewOptions';
+import { StudyBrowserViewOptions } from './StudyBrowserViewOptions';
 
-export default StudyBrowserViewOptions;
+export { StudyBrowserViewOptions };

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

@@ -85,4 +85,4 @@ StudyItem.propTypes = {
   viewPreset: PropTypes.string,
 };
 
-export default StudyItem;
+export { StudyItem };

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

@@ -1,2 +1,2 @@
-import StudyItem from './StudyItem';
-export default StudyItem;
+import { StudyItem } from './StudyItem';
+export { StudyItem };

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
 import { Icons } from '../Icons';
-import DisplaySetMessageListTooltip from '../DisplaySetMessageListTooltip';
+import { DisplaySetMessageListTooltip } from '../DisplaySetMessageListTooltip';
 import { TooltipTrigger, TooltipContent, TooltipProvider, Tooltip } from '../Tooltip';
 
 /**
@@ -291,4 +291,4 @@ Thumbnail.propTypes = {
   countIcon: PropTypes.string,
 };
 
-export default Thumbnail;
+export { Thumbnail };

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

@@ -1,2 +1,2 @@
-import Thumbnail from './Thumbnail';
-export default Thumbnail;
+import { Thumbnail } from './Thumbnail';
+export { Thumbnail };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Thumbnail from '../Thumbnail';
+import { Thumbnail } from '../Thumbnail';
 
 const ThumbnailList = ({
   thumbnails,
@@ -143,20 +143,4 @@ ThumbnailList.propTypes = {
   viewPreset: PropTypes.string,
 };
 
-// TODO: Support "Viewport Identificator"?
-function _getModalityTooltip(modality) {
-  if (_modalityTooltips.hasOwnProperty(modality)) {
-    return _modalityTooltips[modality];
-  }
-
-  return 'Unknown';
-}
-
-const _modalityTooltips = {
-  SR: 'Structured Report',
-  SEG: 'Segmentation',
-  OT: 'Other',
-  RTSTRUCT: 'RT Structure Set',
-};
-
-export default ThumbnailList;
+export { ThumbnailList };

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

@@ -1,2 +1,2 @@
-import ThumbnailList from './ThumbnailList';
-export default ThumbnailList;
+import { ThumbnailList } from './ThumbnailList';
+export { ThumbnailList };

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

@@ -1,12 +1,34 @@
 import { Button, buttonVariants } from './Button';
 import { ThemeWrapper } from './ThemeWrapper';
-import Command from './Command';
-import Dialog from './Dialog';
-import Combobox from './Combobox';
-import Popover from './Popover';
-import Calendar from './Calendar';
-import DatePickerWithRange from './DateRange';
-import Separator from './Separator';
+import {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+} from './Command';
+import {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from './Dialog';
+
+import { Combobox } from './Combobox';
+import { Popover, PopoverContent, PopoverTrigger, PopoverAnchor } from './Popover';
+import { Calendar } from './Calendar';
+import { DatePickerWithRange } from './DateRange';
+import { Separator } from './Separator';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
 import { Toggle, toggleVariants } from './Toggle';
 import { ToggleGroup, ToggleGroupItem } from './ToggleGroup';
@@ -18,30 +40,62 @@ import { Slider } from './Slider';
 import { ScrollArea, ScrollBar } from './ScrollArea';
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './Accordion';
 import { Icons } from './Icons';
-import SidePanel from './SidePanel';
-import StudyItem from './StudyItem';
-import StudyBrowser from './StudyBrowser';
-import StudyBrowserSort from './StudyBrowserSort';
-import StudyBrowserViewOptions from './StudyBrowserViewOptions';
-import Thumbnail from './Thumbnail';
-import ThumbnailList from './ThumbnailList';
-import PanelSection from './PanelSection';
-import DisplaySetMessageListTooltip from './DisplaySetMessageListTooltip';
+import { SidePanel } from './SidePanel';
+import { StudyItem } from './StudyItem';
+import { StudyBrowser } from './StudyBrowser';
+import { StudyBrowserSort } from './StudyBrowserSort';
+import { StudyBrowserViewOptions } from './StudyBrowserViewOptions';
+import { Thumbnail } from './Thumbnail';
+import { ThumbnailList } from './ThumbnailList';
+import { PanelSection } from './PanelSection';
+import { DisplaySetMessageListTooltip } from './DisplaySetMessageListTooltip';
 import { Toolbox, ToolboxUI } from './Toolbox';
-
-// Prototypes
-import { PanelSplit } from '../_prototypes/PanelSplit';
-import { ItemList } from '../_prototypes/PanelSplit/ItemList';
-import { PropertiesPanel } from '../_prototypes/PanelSplit/PropertiesPanel';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from './DropdownMenu';
 
 export {
   Button,
   buttonVariants,
   ThemeWrapper,
   Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
   Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
   Combobox,
   Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverAnchor,
   Calendar,
   DatePickerWithRange,
   Input,
@@ -76,7 +130,19 @@ export {
   DisplaySetMessageListTooltip,
   Toolbox,
   ToolboxUI,
-  PanelSplit,
-  ItemList,
-  PropertiesPanel,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
 };