Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dan-rukas wants to merge 4 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
33b9a98
Move ui ContentMenu to ui-next
dan-rukas May 8, 2026
7e5ee69
Updated component naming
dan-rukas May 8, 2026
178b0be
Update design and behaviors
dan-rukas May 8, 2026
0173f26
Refine styling
dan-rukas May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions extensions/default/src/customizations/contextMenuUICustomization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ContextMenu } from '@ohif/ui';
import { ContextMenuViewport } from '@ohif/ui-next';

export default {
'ui.contextMenu': ContextMenu,
'ui.contextMenu': ContextMenuViewport,
};
46 changes: 46 additions & 0 deletions platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
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;
}>;
defaultPosition?: { x: number; y: number };
[key: string]: unknown;
Comment on lines +11 to +12
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 defaultPosition is declared in the interface but never read in the component body. Since the dialog service handles positioning externally via uiDialogService.show({ defaultPosition }), this prop will never be forwarded to the component as a prop, making the declaration dead code.

Suggested change
defaultPosition?: { x: number; y: number };
[key: string]: unknown;
[key: string]: unknown;
Prompt To Fix With AI 
This is a comment left during a code review.
Path: platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx
Line: 11-12

Comment:
`defaultPosition` is declared in the interface but never read in the component body. Since the dialog service handles positioning externally via `uiDialogService.show({ defaultPosition })`, this prop will never be forwarded to the component as a prop, making the declaration dead code.

```suggestion
  [key: string]: unknown;
```

How can I resolve this? If you propose a fix, please make it concise.

Copy link
Copy Markdown
Collaborator

@jbocce jbocce May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think @greptileai is correct here. Please update.

Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed — here's the fix. Just drop the defaultPosition line; the index signature already handles any extra props passed through:

Suggested change
defaultPosition?: { x: number; y: number };
[key: string]: unknown;
[key: string]: unknown;

That removes the dead declaration while keeping the interface flexible for anything else the dialog service might forward.

}

const ContextMenuViewport = ({ items, ...props }: ContextMenuViewportProps) => {
if (!items) {
return null;
}
Comment on lines +16 to +18
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps Bot May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Empty array bypasses the early-return guard

The guard if (!items) returns null only when items is undefined or null. If ContextMenuItemsBuilder.getMenuItems returns [], the controller's own if (!items) return also passes through, and the component renders an empty container div — a small invisible-but-present box at the calculated position. Adding || items.length === 0 to the guard would prevent this; note the old component has the same behavior so this is not a regression introduced by this PR.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: platform/ui-next/src/components/ContextMenuViewport/ContextMenuViewport.tsx
Line: 16-18

Comment:
**Empty array bypasses the early-return guard**

The guard `if (!items)` returns `null` only when `items` is `undefined` or `null`. If `ContextMenuItemsBuilder.getMenuItems` returns `[]`, the controller's own `if (!items) return` also passes through, and the component renders an empty container div — a small invisible-but-present box at the calculated position. Adding `|| items.length === 0` to the guard would prevent this; note the old component has the same behavior so this is not a regression introduced by this PR.

How can I resolve this? If you propose a fix, please make it concise.

Copy link
Copy Markdown
Collaborator

@jbocce jbocce May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it is not a regression let's leave it.


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) => (
<div
key={index}
data-cy="context-menu-item"
onClick={() => item.action(item, props)}
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"
Comment thread
dan-rukas marked this conversation as resolved.
>
<span>{item.label}</span>
{item.iconRight && (
<Icons.ByName
name={item.iconRight}
className="inline"
/>
)}
</div>
))}
</div>
);
};

export default ContextMenuViewport;
1 change: 1 addition & 0 deletions platform/ui-next/src/components/ContextMenuViewport/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as ContextMenuViewport } from './ContextMenuViewport';
2 changes: 2 additions & 0 deletions platform/ui-next/src/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ import {
} from './ToolButton';
import { LayoutSelector } from './LayoutSelector';
import { ToolSettings } from './OHIFToolSettings';
import { ContextMenuViewport } from './ContextMenuViewport';
export { DataRow } from './DataRow';
export { MeasurementTable } from './MeasurementTable';
export * from './ColorCircle';
Expand Down Expand Up @@ -280,6 +281,7 @@ export {
ViewportDialog,
CinePlayer,
LayoutSelector,
ContextMenuViewport,
SmartScrollbar,
useSmartScrollbarLayoutContext,
useSmartScrollbarScrollContext,
Expand Down
Loading