@joewinke/jatui 0.31.0 → 0.31.1

package/dist/components/ContextMenu.svelte

@@ -1,3 +1,8 @@
+<script lang="ts" module>
+	// Per-instance id source for the menu panel (see `menuId` below).
+	let menuSeq = 0;
+</script>
+
 <script lang="ts">
 	/**
 	 * ContextMenu Component
@@ -93,6 +98,21 @@
 	let submenuX = $state(0);
 	let submenuY = $state(0);
 
+	/**
+	 * Unique id for THIS menu panel. The roving-focus queries below target
+	 * `[data-context-menu="…"] > button` instead of `:scope > button` because
+	 * jsdom's selector engine (nwsapi) expands `:scope` to `tag + .classList[0]`
+	 * — and this panel's first class is the Tailwind arbitrary value
+	 * `min-w-[200px]`, which nwsapi then cannot parse (`[200px]` looks like an
+	 * attribute selector to it). Real browsers are fine either way; avoiding
+	 * `:scope` keeps every jsdom test suite free of the resulting unhandled
+	 * errors. The unique id preserves the direct-children semantics of
+	 * `:scope >`: a nested submenu panel is rendered INSIDE this panel and
+	 * carries its own id, so it can never leak its items into this level's
+	 * query.
+	 */
+	const menuId = `cm-${++menuSeq}`;
+
 	function closeSubmenu() {
 		if (submenuIndex === null) return;
 		submenuIndex = null;
@@ -179,9 +199,13 @@
 	function menuItemButtons(): HTMLButtonElement[] {
 		if (!menuEl) return [];
 		// Only DIRECT children — don't include nested submenu items when nav-ing
-		// this level.
+		// this level. The menu panel carries a unique data-context-menu id, so
+		// this can't be matched by a nested panel (see `menuId` for why this
+		// isn't a `:scope >` selector — nwsapi/jsdom).
 		return Array.from(
-			menuEl.querySelectorAll(':scope > button[role="menuitem"]:not(:disabled)')
+			menuEl.querySelectorAll(
+				`[data-context-menu="${menuId}"] > button[role="menuitem"]:not(:disabled)`
+			)
 		);
 	}
 
@@ -190,11 +214,24 @@
 		const activeBtn = document.activeElement as HTMLElement | null;
 		if (!activeBtn) return -1;
 		const buttons = Array.from(
-			menuEl.querySelectorAll(':scope > button[role="menuitem"]')
+			menuEl.querySelectorAll(`[data-context-menu="${menuId}"] > button[role="menuitem"]`)
 		) as HTMLButtonElement[];
 		return buttons.indexOf(activeBtn as HTMLButtonElement);
 	}
 
+	// First focusable item of the OPEN nested submenu. The submenu's panel is
+	// a direct child of this menu's panel (nested in-DOM so click-outside
+	// treats it as inside — see the SelfContextMenu render below); finding it
+	// by traversal instead of a `:scope >` selector keeps nwsapi (jsdom) out
+	// of the picture entirely.
+	function firstSubmenuItem(): HTMLButtonElement | null {
+		if (!menuEl) return null;
+		const panel = Array.from(menuEl.children).find(
+			(c) => c.getAttribute('role') === 'menu'
+		);
+		return (panel?.querySelector('button[role="menuitem"]:not(:disabled)') ?? null) as HTMLButtonElement | null;
+	}
+
 	function isEditableTarget(target: EventTarget | null): boolean {
 		const el = target as HTMLElement | null;
 		if (!el) return false;
@@ -230,12 +267,8 @@
 				// ArrowRight is an explicit "enter the submenu" gesture — focus
 				// its first item. Hover/onfocus open the submenu without moving
 				// focus (see autoFocus prop on the recursive instance).
-				const el = menuEl;
 				requestAnimationFrame(() => {
-					const first = el?.querySelector(
-						':scope > [role="menu"] > button[role="menuitem"]:not(:disabled)'
-					) as HTMLButtonElement | null;
-					first?.focus();
+					firstSubmenuItem()?.focus();
 				});
 			}
 			return;
@@ -274,12 +307,8 @@
 				if (item.submenu?.length) {
 					const buttons = menuItemButtons();
 					openSubmenuAt(buttons[idx], idx);
-					const el = menuEl;
 					requestAnimationFrame(() => {
-						const first = el?.querySelector(
-							':scope > [role="menu"] > button[role="menuitem"]:not(:disabled)'
-						) as HTMLButtonElement | null;
-						first?.focus();
+						firstSubmenuItem()?.focus();
 					});
 				} else {
 					handleItemClick(item, idx, e);
@@ -305,12 +334,8 @@
 	// by the time this effect runs, so focus-return-on-close still works.
 	$effect(() => {
 		if (open && menuEl && autoFocus) {
-			const el = menuEl;
 			requestAnimationFrame(() => {
-				const buttons = Array.from(
-					el.querySelectorAll(':scope > button[role="menuitem"]:not(:disabled)')
-				) as HTMLButtonElement[];
-				buttons[0]?.focus();
+				menuItemButtons()[0]?.focus();
 			});
 		}
 	});
@@ -326,6 +351,7 @@
 		bind:this={menuEl}
 		role="menu"
 		tabindex="-1"
+		data-context-menu={menuId}
 		class="min-w-[200px] bg-base-200 border border-base-300 rounded-md py-1 {className}"
 		style="z-index: {zIndex};"
 		use:floating={{ anchor, placement: 'bottom-start', flip: true, shift: true, offset: 2, onDismiss: close }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",