UnifiedContextMenu
Pure action renderer context menu that receives pre-filtered actions and renders them grouped by section with dividers. Supports dual-mode dispatch: a generic callback OR individual typed handlers.
Action Group Types
Entity Name Actions
Tab creation, graph, filter, navigate
5 actions
Order ID Actions
Order items, edit, timeline
3 actions
Numeric Actions
Graph metric, quantity, show orders
3 actions
Interactive Demo with Action Log
11 total actions across all groups
Action Log
Click a menu action to see it logged here...
Usage
JSX
import { UnifiedContextMenu } from '@so.boss/gloss-ui';
import type { UnifiedMenuAction } from '@so.boss/gloss-ui';
const actions: UnifiedMenuAction[] = [
{
id: 'recent-orders',
label: 'Recent Orders',
icon: 'Receipt',
section: 'tab-actions',
type: 'create-tab',
cellKinds: ['entityName'],
tabType: 'orders',
},
{
id: 'graph-revenue',
label: 'Graph Revenue',
icon: 'BarChart',
section: 'graph-actions',
type: 'graph',
cellKinds: ['entityName'],
},
];
<UnifiedContextMenu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={() => setAnchorEl(null)}
actions={actions}
row={selectedRow}
entityType="customer"
onActionClick={(action, context) => {
handleAction(action, context);
}}
/>Props Reference
UnifiedContextMenu
| Prop | Type | Description |
|---|---|---|
anchorEl | HTMLElement | null | Anchor element for MUI Menu positioning |
open | boolean | Whether the menu is visible |
onClose | () => void | Called when menu should close |
actions | UnifiedMenuAction[] | Pre-filtered action definitions |
row | Record<string, unknown> | Data row that triggered the menu |
entityType | string | Entity type context (customer, manufacturer, salesperson) |
onActionClick | (action, context) => void | Generic action click handler with full context |
UnifiedMenuAction (key fields)
| Property | Type | Description |
|---|---|---|
id | string | Unique action identifier |
label | string | Display text for the action |
icon | string | MUI icon name (resolved via ICON_MAP) |
section | 'tab-actions' | 'graph-actions' | 'direct-nav' | 'related-nav' | Menu section grouping (rendered with dividers) |
type | 'create-tab' | 'graph' | 'navigate' | 'filter' | 'dispatch' | Action behavior type |
cellKinds | CellKind[] | Which cell kinds this action applies to |