From b80e2113493f60e65d35fbc206436fb36dfe9b51 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Thu, 25 Sep 2025 09:10:33 -0400
Subject: [PATCH] fix(ContextSubMenuItem): Remove truncation of context submenu
 items

---
 .../topologyPackageDemo/demoComponentFactory.tsx  | 15 ++++++++++++---
 .../components/contextmenu/ContextSubMenuItem.tsx |  1 +
 packages/module/src/css/topology-components.css   |  4 ++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
index c8a394f0..0ca214f9 100644
--- a/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
+++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/demoComponentFactory.tsx
@@ -31,7 +31,8 @@ import {
   EditableDragOperationType,
   GraphElementProps,
   isEdge,
-  Model
+  Model,
+  ContextSubMenuItem
 } from '@patternfly/react-topology';
 import CustomPathNode from '../../components/CustomPathNode';
 import CustomPolygonNode from '../../components/CustomPolygonNode';
@@ -99,8 +100,16 @@ const contextMenuItem = (label: string, i: number): React.ReactElement => {
   if (label === '-') {
     return <ContextMenuSeparator component="li" key={`separator:${i.toString()}`} />;
   }
+  if (label === 'Second') {
+    return (
+      <ContextSubMenuItem label={label} key={label}>
+        <ContextMenuItem onClick={() => alert(`Selected: ${label} 1`)}>{`${label} subitem number 1`}</ContextMenuItem>
+        <ContextMenuItem onClick={() => alert(`Selected: ${label} 2`)}>{`${label} subitem number 2`}</ContextMenuItem>
+        <ContextMenuItem onClick={() => alert(`Selected: ${label} 3`)}>{`${label} subitem number 3`}</ContextMenuItem>
+      </ContextSubMenuItem>
+    );
+  }
   return (
-    // eslint-disable-next-line no-alert
     <ContextMenuItem key={label} onClick={() => alert(`Selected: ${label}`)}>
       {label}
     </ContextMenuItem>
@@ -117,7 +126,7 @@ const demoComponentFactory: ComponentFactory = (
 ): React.ComponentType<{ element: GraphElement }> | undefined => {
   if (kind === ModelKind.graph) {
     return withDndDrop(graphDropTargetSpec([NODE_DRAG_TYPE]))(
-      withPanZoom()(withAreaSelection(['ctrlKey', 'shiftKey'])(GraphComponent))
+      withPanZoom()(withAreaSelection(['ctrlKey', 'shiftKey'])(withContextMenu(() => defaultMenu)(GraphComponent)))
     );
   }
   switch (type) {
diff --git a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
index da50b362..aff168e9 100644
--- a/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
+++ b/packages/module/src/components/contextmenu/ContextSubMenuItem.tsx
@@ -59,6 +59,7 @@ const ContextSubMenuItem: React.FunctionComponent<ContextSubMenuItemProps> = ({
         <AngleRightIcon className={css(topologyStyles.topologyContextSubMenuArrow)} />
       </DropdownItem>
       <Popper
+        className={css(topologyStyles.topologyContextSubMenuContainer)}
         open={open}
         placement="right-start"
         closeOnEsc
diff --git a/packages/module/src/css/topology-components.css b/packages/module/src/css/topology-components.css
index ecbb33a8..1916bf92 100644
--- a/packages/module/src/css/topology-components.css
+++ b/packages/module/src/css/topology-components.css
@@ -239,6 +239,10 @@
   padding-right: var(--pf-t--global--spacer--lg) !important;
 }
 
+.pf-topology-context-sub-menu__container .pf-v6-c-menu__list-item {
+    min-width: auto;
+}
+
 .pf-topology-context-sub-menu__arrow {
   position: absolute;
   right: var(--pf-t--global--spacer--xs);