From 33b9a98644a8bea8909b2a0bec7e2e04453f015b Mon Sep 17 00:00:00 2001 From: Dan Rukas Date: Fri, 8 May 2026 10:45:39 -0400 Subject: [PATCH 1/4] Move ui ContentMenu to ui-next --- .../contextMenuUICustomization.ts | 4 +- .../ContextMenuLegacy/ContextMenuLegacy.tsx | 46 +++++++++++++++++++ .../src/components/ContextMenuLegacy/index.ts | 1 + platform/ui-next/src/components/index.ts | 2 + 4 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx create mode 100644 platform/ui-next/src/components/ContextMenuLegacy/index.ts diff --git a/extensions/default/src/customizations/contextMenuUICustomization.ts b/extensions/default/src/customizations/contextMenuUICustomization.ts index 4366df89c6e..9cbc4f4b724 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 { ContextMenuLegacy } from '@ohif/ui-next'; export default { - 'ui.contextMenu': ContextMenu, + 'ui.contextMenu': ContextMenuLegacy, }; diff --git a/platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx b/platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx new file mode 100644 index 00000000000..97f55ab556e --- /dev/null +++ b/platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { Icons } from '../Icons'; + +interface ContextMenuLegacyProps { + items?: Array<{ + label: string; + action: (item: any, props: any) => void; + iconRight?: string; + [key: string]: unknown; + }>; + defaultPosition?: { x: number; y: number }; + [key: string]: unknown; +} + +const ContextMenuLegacy = ({ items, ...props }: ContextMenuLegacyProps) => { + if (!items) { + return null; + } + + return ( +
e.preventDefault()} + > + {items.map((item, index) => ( +
item.action(item, props)} + className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center justify-between border-b border-border px-4 py-3 text-sm transition duration-300 last:border-b-0" + > + {item.label} + {item.iconRight && ( + + )} +
+ ))} +
+ ); +}; + +export default ContextMenuLegacy; diff --git a/platform/ui-next/src/components/ContextMenuLegacy/index.ts b/platform/ui-next/src/components/ContextMenuLegacy/index.ts new file mode 100644 index 00000000000..fc0e130b659 --- /dev/null +++ b/platform/ui-next/src/components/ContextMenuLegacy/index.ts @@ -0,0 +1 @@ +export { default as ContextMenuLegacy } from './ContextMenuLegacy'; diff --git a/platform/ui-next/src/components/index.ts b/platform/ui-next/src/components/index.ts index 699d2a14a87..ec44f0ea4a8 100644 --- a/platform/ui-next/src/components/index.ts +++ b/platform/ui-next/src/components/index.ts @@ -129,6 +129,7 @@ import { } from './ToolButton'; import { LayoutSelector } from './LayoutSelector'; import { ToolSettings } from './OHIFToolSettings'; +import { ContextMenuLegacy } from './ContextMenuLegacy'; export { DataRow } from './DataRow'; export { MeasurementTable } from './MeasurementTable'; export * from './ColorCircle'; @@ -280,6 +281,7 @@ export { ViewportDialog, CinePlayer, LayoutSelector, + ContextMenuLegacy, SmartScrollbar, useSmartScrollbarLayoutContext, useSmartScrollbarScrollContext, From 7e5ee69d4d87a97f67c9597eb099698aea30d15b Mon Sep 17 00:00:00 2001 From: Dan Rukas Date: Fri, 8 May 2026 10:52:49 -0400 Subject: [PATCH 2/4] Updated component naming --- .../src/customizations/contextMenuUICustomization.ts | 4 ++-- platform/ui-next/src/components/ContextMenuLegacy/index.ts | 1 - .../ContextMenuViewport.tsx} | 6 +++--- .../ui-next/src/components/ContextMenuViewport/index.ts | 1 + platform/ui-next/src/components/index.ts | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) delete mode 100644 platform/ui-next/src/components/ContextMenuLegacy/index.ts rename platform/ui-next/src/components/{ContextMenuLegacy/ContextMenuLegacy.tsx => ContextMenuViewport/ContextMenuViewport.tsx} (87%) 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 9cbc4f4b724..6b941238d9e 100644 --- a/extensions/default/src/customizations/contextMenuUICustomization.ts +++ b/extensions/default/src/customizations/contextMenuUICustomization.ts @@ -1,5 +1,5 @@ -import { ContextMenuLegacy } from '@ohif/ui-next'; +import { ContextMenuViewport } from '@ohif/ui-next'; export default { - 'ui.contextMenu': ContextMenuLegacy, + 'ui.contextMenu': ContextMenuViewport, }; diff --git a/platform/ui-next/src/components/ContextMenuLegacy/index.ts b/platform/ui-next/src/components/ContextMenuLegacy/index.ts deleted file mode 100644 index fc0e130b659..00000000000 --- a/platform/ui-next/src/components/ContextMenuLegacy/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as ContextMenuLegacy } from './ContextMenuLegacy'; diff --git a/platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx similarity index 87% rename from platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx rename to platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx index 97f55ab556e..4632a893005 100644 --- a/platform/ui-next/src/components/ContextMenuLegacy/ContextMenuLegacy.tsx +++ b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Icons } from '../Icons'; -interface ContextMenuLegacyProps { +interface ContextMenuViewportProps { items?: Array<{ label: string; action: (item: any, props: any) => void; @@ -12,7 +12,7 @@ interface ContextMenuLegacyProps { [key: string]: unknown; } -const ContextMenuLegacy = ({ items, ...props }: ContextMenuLegacyProps) => { +const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => { if (!items) { return null; } @@ -43,4 +43,4 @@ const ContextMenuLegacy = ({ items, ...props }: ContextMenuLegacyProps) => { ); }; -export default ContextMenuLegacy; +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 00000000000..85f59ff4c8e --- /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 ec44f0ea4a8..7aa642a90a7 100644 --- a/platform/ui-next/src/components/index.ts +++ b/platform/ui-next/src/components/index.ts @@ -129,7 +129,7 @@ import { } from './ToolButton'; import { LayoutSelector } from './LayoutSelector'; import { ToolSettings } from './OHIFToolSettings'; -import { ContextMenuLegacy } from './ContextMenuLegacy'; +import { ContextMenuViewport } from './ContextMenuViewport'; export { DataRow } from './DataRow'; export { MeasurementTable } from './MeasurementTable'; export * from './ColorCircle'; @@ -281,7 +281,7 @@ export { ViewportDialog, CinePlayer, LayoutSelector, - ContextMenuLegacy, + ContextMenuViewport, SmartScrollbar, useSmartScrollbarLayoutContext, useSmartScrollbarScrollContext, From 178b0be4a712c7ac62850e92e21b9aa0a4095601 Mon Sep 17 00:00:00 2001 From: Dan Rukas Date: Fri, 8 May 2026 11:02:29 -0400 Subject: [PATCH 3/4] Update design and behaviors --- .../components/ContextMenuViewport/ContextMenuViewport.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx index 4632a893005..2e78710bcd5 100644 --- a/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx +++ b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx @@ -20,7 +20,7 @@ const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => { return (
e.preventDefault()} > {items.map((item, index) => ( @@ -28,7 +28,7 @@ const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => { key={index} data-cy="context-menu-item" onClick={() => item.action(item, props)} - className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center justify-between border-b border-border px-4 py-3 text-sm transition duration-300 last:border-b-0" + className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-base outline-none" > {item.label} {item.iconRight && ( From 0173f268c0e42aa27cf7deeed130440e3b72697c Mon Sep 17 00:00:00 2001 From: Dan Rukas Date: Fri, 8 May 2026 11:14:44 -0400 Subject: [PATCH 4/4] Refine styling --- .../components/ContextMenuViewport/ContextMenuViewport.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx index 2e78710bcd5..a34831d1582 100644 --- a/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx +++ b/platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx @@ -20,7 +20,7 @@ const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => { return (
e.preventDefault()} > {items.map((item, index) => ( @@ -28,7 +28,7 @@ const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => { key={index} data-cy="context-menu-item" onClick={() => item.action(item, props)} - className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-base outline-none" + className="hover:bg-accent hover:text-accent-foreground flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-base outline-none" > {item.label} {item.iconRight && (