fix(context-menu): avoid reposition when sub are open and update story items (#10154)

Author: PavelLaptev

packages/ui/src/lib/components/ContextMenu.svelte

@@ -343,7 +343,9 @@
 		const observer = new MutationObserver((mutationList) => {
 			for (const mutation of mutationList) {
 				if (mutation.type === 'childList') {
-					if (isVisible && savedMouseEvent) {
+					// Only reposition if we don't have open submenus
+					// This prevents the menu from jumping when submenus open
+					if (isVisible && savedMouseEvent && !submenuCoordination.hasOpenSubmenus()) {
 						setPosition(savedMouseEvent);
 					}
 				}

packages/ui/src/stories/components/ContextMenu.stories.svelte

@@ -171,6 +171,28 @@
 						contextMenu?.close();
 					}}
 				/>
+				<ContextMenuItemSubmenu label="More actions">
+					{#snippet submenu({ close })}
+						<ContextMenuSection>
+							<ContextMenuItem
+								label="Cherry-pick"
+								onclick={() => {
+									console.log('Cherry-pick');
+									close();
+									contextMenu?.close();
+								}}
+							/>
+							<ContextMenuItem
+								label="Rebase"
+								onclick={() => {
+									console.log('Rebase');
+									close();
+									contextMenu?.close();
+								}}
+							/>
+						</ContextMenuSection>
+					{/snippet}
+				</ContextMenuItemSubmenu>
 			</ContextMenuSection>
 			<ContextMenuSection title="Branch operations">
 				<ContextMenuItem
@@ -187,27 +209,6 @@
 						contextMenu?.close();
 					}}
 				/>
-				<ContextMenuItem
-					label="Delete branch"
-					onclick={() => {
-						console.log('Delete branch');
-						contextMenu?.close();
-					}}
-				/>
-				<ContextMenuItem
-					label="Rename branch"
-					onclick={() => {
-						console.log('Rename branch');
-						contextMenu?.close();
-					}}
-				/>
-				<ContextMenuItem
-					label="Compare branches"
-					onclick={() => {
-						console.log('Compare branches');
-						contextMenu?.close();
-					}}
-				/>
 			</ContextMenuSection>
 			<ContextMenuSection>
 				<ContextMenuItem
@@ -255,36 +256,6 @@
 					}}
 				/>
 			</ContextMenuSection>
-			<ContextMenuSection>
-				<ContextMenuItem
-					label="Clone"
-					onclick={() => {
-						console.log('Clone');
-						contextMenu?.close();
-					}}
-				/>
-				<ContextMenuItem
-					label="Fork"
-					onclick={() => {
-						console.log('Fork');
-						contextMenu?.close();
-					}}
-				/>
-				<ContextMenuItem
-					label="Archive"
-					onclick={() => {
-						console.log('Archive');
-						contextMenu?.close();
-					}}
-				/>
-				<ContextMenuItem
-					label="Settings"
-					onclick={() => {
-						console.log('Settings');
-						contextMenu?.close();
-					}}
-				/>
-			</ContextMenuSection>
 		</ContextMenu>
 	{/snippet}
 </Story>