@joewinke/jatui 0.36.2 → 0.36.3

package/dist/actions/floating.js

@@ -132,10 +132,20 @@ export function floating(node, options) {
         }
     }
     startAutoUpdate();
-    // Animate in after first position has been applied (next microtask)
+    // Animate in after first position has been applied (next microtask).
+    // The end value is `none`, NOT `translateY(0)`: a non-none inline transform
+    // makes this element the CONTAINING BLOCK for any descendant
+    // `position: fixed` popover — a nested ContextMenu submenu is rendered
+    // inside this panel — silently re-anchoring that popover's viewport
+    // coordinates to this element (MOS jatui-fjch2: a submenu rendered on top
+    // of its parent menu). `none` still interpolates from translateY(2px)
+    // through the identity matrix, so the entrance animation is visually
+    // identical, and once it completes the element no longer creates a
+    // containing block. (opacity < 1 only creates a stacking context, not a
+    // containing block, so it is safe to keep.)
     requestAnimationFrame(() => {
         node.style.opacity = '1';
-        node.style.transform = 'translateY(0)';
+        node.style.transform = 'none';
     });
     // Defer outside-pointer listeners to avoid catching the opening event itself
     const listenerTimer = setTimeout(() => {

package/dist/components/ContextMenu.svelte

@@ -68,9 +68,19 @@
 		 * menus; the component sets this to `false` when it recursively renders
 		 * itself as a nested submenu so that arrow-navigating over a parent item
 		 * with a submenu doesn't yank keyboard focus out of the parent row.
-		 * ArrowRight from the parent explicitly focuses into the submenu.
+		 * The initial programmatic autofocus does NOT open a submenu that
+		 * happens to live on the first item — a submenu opens on hover, click,
+		 * Enter/Space or ArrowRight only. ArrowRight from the parent explicitly
+		 * focuses into the submenu.
 		 */
 		autoFocus?: boolean;
+		/**
+		 * Floating-ui placement for this menu panel. Top-level menus anchor at
+		 * the cursor and open 'bottom-start'; a nested submenu passes
+		 * 'left-start' when it must flip to the parent's LEFT edge because
+		 * there is no room to the right of it.
+		 */
+		placement?: 'bottom-start' | 'left-start';
 		/**
 		 * Called when an action item (not a submenu owner) is chosen, before
 		 * this menu closes. A nested submenu uses it to close the WHOLE menu
@@ -89,6 +99,7 @@
 		class: className = '',
 		onClose,
 		autoFocus = true,
+		placement: placementProp = 'bottom-start',
 		onItemSelected
 	}: Props = $props();
 
@@ -97,6 +108,15 @@
 	let submenuIndex = $state<number | null>(null);
 	let submenuX = $state(0);
 	let submenuY = $state(0);
+	// 'bottom-start' when the submenu opens to the right of the parent item,
+	// 'left-start' when it must flip to the parent's LEFT edge (viewport edge).
+	let submenuPlacement = $state<'bottom-start' | 'left-start'>('bottom-start');
+
+	// Suppresses the 'onfocus' open-submenu side effect DURING the menu's
+	// own initial programmatic autofocus, so a first item that happens to
+	// own a submenu does not instantly open it before any user interaction
+	// (the submenu still opens on hover, click, Enter/Space or ArrowRight).
+	let suppressFocusOpen = false;
 
 	/**
 	 * Unique id for THIS menu panel. The roving-focus queries below target
@@ -127,8 +147,20 @@
 
 	function openSubmenuAt(el: HTMLElement, index: number) {
 		const rect = el.getBoundingClientRect();
-		submenuX = rect.right;
+		// The submenu panel is `min-w-[200px]`. When there is no room to the
+		// right of the parent item (viewport edge), anchor the submenu at the
+		// parent's LEFT edge with placement 'left-start' so the two menus
+		// never overlap.
+		const SUBMENU_WIDTH = 200;
+		let nextPlacement: 'bottom-start' | 'left-start' = 'bottom-start';
+		let anchorX = rect.right;
+		if (rect.right + SUBMENU_WIDTH > window.innerWidth) {
+			anchorX = rect.left;
+			nextPlacement = 'left-start';
+		}
+		submenuX = anchorX;
 		submenuY = rect.top;
+		submenuPlacement = nextPlacement;
 		submenuIndex = index;
 	}
 
@@ -335,7 +367,11 @@
 	$effect(() => {
 		if (open && menuEl && autoFocus) {
 			requestAnimationFrame(() => {
+				// .focus() dispatches the focus event synchronously, so the
+				// guard brackets this call exactly.
+				suppressFocusOpen = true;
 				menuItemButtons()[0]?.focus();
+				suppressFocusOpen = false;
 			});
 		}
 	});
@@ -354,7 +390,7 @@
 		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 }}
+		use:floating={{ anchor, placement: placementProp, flip: true, shift: true, offset: 2, onDismiss: close }}
 		onkeydown={handleKeydown}
 	>
 		{#if header}
@@ -388,6 +424,10 @@
 					onclick={(e) => handleItemClick(item, i, e)}
 					onpointerenter={(e) => handleItemPointerEnter(item, i, e)}
 					onfocus={(e) => {
+						// A programmatic autofocus (the initial focus when the menu
+						// opens) must NOT open the submenu — only user gestures
+						// (hover, click, Enter/Space, ArrowRight) do.
+						if (suppressFocusOpen) return;
 						if (item.submenu?.length && !item.disabled) {
 							openSubmenuAt(e.currentTarget as HTMLElement, i);
 						} else {
@@ -427,6 +467,7 @@
 				open={true}
 				x={submenuX}
 				y={submenuY}
+				placement={submenuPlacement}
 				items={items[submenuIndex].submenu ?? []}
 				zIndex={zIndex + 1}
 				autoFocus={false}

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

@@ -21,9 +21,19 @@ interface Props {
      * menus; the component sets this to `false` when it recursively renders
      * itself as a nested submenu so that arrow-navigating over a parent item
      * with a submenu doesn't yank keyboard focus out of the parent row.
-     * ArrowRight from the parent explicitly focuses into the submenu.
+     * The initial programmatic autofocus does NOT open a submenu that
+     * happens to live on the first item — a submenu opens on hover, click,
+     * Enter/Space or ArrowRight only. ArrowRight from the parent explicitly
+     * focuses into the submenu.
      */
     autoFocus?: boolean;
+    /**
+     * Floating-ui placement for this menu panel. Top-level menus anchor at
+     * the cursor and open 'bottom-start'; a nested submenu passes
+     * 'left-start' when it must flip to the parent's LEFT edge because
+     * there is no room to the right of it.
+     */
+    placement?: 'bottom-start' | 'left-start';
     /**
      * Called when an action item (not a submenu owner) is chosen, before
      * this menu closes. A nested submenu uses it to close the WHOLE menu

package/package.json

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