@joewinke/jatui 0.5.0 → 0.5.2

package/dist/components/ContextMenu.svelte

@@ -105,7 +105,10 @@
 		submenuIndex = index;
 	}
 
-	function handleItemClick(item: ActionItem, index: number, event: MouseEvent) {
+	// Accelerators route through here with a KeyboardEvent; submenu items are
+	// handled before the call in that path, so `currentTarget` is only read
+	// for the (mouse-driven) submenu toggle branch.
+	function handleItemClick(item: ActionItem, index: number, event: MouseEvent | KeyboardEvent) {
 		if (item.disabled) return;
 		if (item.submenu && item.submenu.length) {
 			// Submenu owner: open (or toggle) instead of firing onSelect/close.
@@ -125,7 +128,13 @@
 	}
 
 	function handleItemPointerEnter(item: ActionItem, index: number, event: PointerEvent) {
-		if (item.disabled || !item.submenu?.length) return;
+		// Entering an item WITHOUT a submenu must close any open submenu —
+		// otherwise hover-scrolling past a submenu parent (e.g. "Classify
+		// sender") leaves its panel stuck open over the rest of the menu.
+		if (item.disabled || !item.submenu?.length) {
+			closeSubmenu();
+			return;
+		}
 		const el = event.currentTarget as HTMLElement;
 		openSubmenuAt(el, index);
 	}
@@ -178,6 +187,13 @@
 		return buttons.indexOf(activeBtn as HTMLButtonElement);
 	}
 
+	function isEditableTarget(target: EventTarget | null): boolean {
+		const el = target as HTMLElement | null;
+		if (!el) return false;
+		const tag = el.tagName;
+		return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || el.isContentEditable;
+	}
+
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
 			// If a submenu is open, close only the submenu on Escape; otherwise
@@ -226,6 +242,43 @@
 			}
 			return;
 		}
+		// Single-character accelerators (item.shortcut). No modifiers, and
+		// suppressed while focus sits in an editable element (a `content`
+		// snippet's input) so typing never fires actions.
+		if (
+			e.key.length === 1 &&
+			!e.ctrlKey &&
+			!e.metaKey &&
+			!e.altKey &&
+			!isEditableTarget(e.target)
+		) {
+			const pressed = e.key.toLowerCase();
+			const idx = items.findIndex(
+				(it) =>
+					!('divider' in it) &&
+					!it.disabled &&
+					it.shortcut?.toLowerCase() === pressed
+			);
+			if (idx >= 0) {
+				const item = items[idx] as ActionItem;
+				e.preventDefault();
+				e.stopPropagation();
+				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();
+					});
+				} else {
+					handleItemClick(item, idx, e);
+				}
+				return;
+			}
+		}
 		if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return;
 		const buttons = menuItemButtons();
 		if (!buttons.length) return;
@@ -289,7 +342,7 @@
 					aria-expanded={item.submenu?.length ? submenuIndex === i : undefined}
 					aria-label={item.content ? item.label : undefined}
 					class="w-full flex items-center gap-2 text-left px-3 py-1.5 text-sm transition-colors
-						{item.variant === 'danger' ? 'text-error hover:bg-error/10' : 'hover:bg-base-200'}
+						{item.variant === 'danger' ? 'text-error hover:bg-error/10' : 'hover:bg-base-300'}
 						{item.disabled ? 'opacity-50 cursor-not-allowed' : ''}"
 					disabled={item.disabled}
 					onclick={(e) => handleItemClick(item, i, e)}
@@ -297,6 +350,10 @@
 					onfocus={(e) => {
 						if (item.submenu?.length && !item.disabled) {
 							openSubmenuAt(e.currentTarget as HTMLElement, i);
+						} else {
+							// Arrow-navigating onto a submenu-less item closes any
+							// open submenu, same as pointer hover.
+							closeSubmenu();
 						}
 					}}
 				>
@@ -305,6 +362,12 @@
 					{:else}
 						{#if item.icon}<span class="shrink-0">{item.icon}</span>{/if}
 						<span class="truncate flex-1">{item.label}</span>
+						{#if item.shortcut}
+							<kbd
+								class="shrink-0 text-[10px] leading-none px-1 py-0.5 rounded border border-base-content/20 text-base-content/50"
+								aria-hidden="true">{item.shortcut}</kbd
+							>
+						{/if}
 						{#if item.submenu?.length}
 							<span class="text-base-content/50 shrink-0" aria-hidden="true">▸</span>
 						{/if}

package/dist/components/ContextMenu.types.d.ts

@@ -55,6 +55,16 @@ export type ActionItem = {
     content?: Snippet;
     variant?: 'default' | 'danger';
     disabled?: boolean;
+    /**
+     * Single-character keyboard accelerator, active while the menu is open.
+     * Pressing the key (case-insensitive, no modifiers) activates the item
+     * exactly like a click — including `submit` and closing the menu. A
+     * right-aligned <kbd> hint renders after the label. Items with a
+     * `submenu` open it (focus moves to its first item). Accelerators are
+     * suppressed while focus is inside an editable element (an `content`
+     * snippet's input, for example), so typing never triggers actions.
+     */
+    shortcut?: string;
 };
 export type DividerItem = {
     divider: true;

package/package.json

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