najm-kit 2.11.7 → 2.11.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.11.8 - 2026-08-28
+
+- Fixed `NContextMenu` leaving keyboard focus on its opener after the menu
+  appeared. The first enabled action now receives focus, disabled actions are
+  skipped, Arrow Up/Down wrap, Home/End jump to the bounds, Tab dismisses the
+  menu, and Escape restores focus to the opener. Focused actions also receive
+  the same visual treatment as hovered actions.
+
 ## 2.11.7 - 2026-08-17
 
 - Fixed date, combobox, and multiselect `FormInput` controls reaching the

package/dist/index.mjs

@@ -9879,6 +9879,7 @@ function NViewBody({ children, className, variant = "table" }) {
 function NContextMenu({ x, y, items, onAction, onClose, className }) {
   const [openSub, setOpenSub] = useState(null);
   const menuRef = useRef(null);
+  const returnFocusRef = useRef(null);
   const [pos, setPos] = useState({ left: x, top: y });
   useLayoutEffect(() => {
     if (!menuRef.current) return;
@@ -9895,13 +9896,54 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
       (prev) => prev.left === next.left && prev.top === next.top ? prev : next
     );
   }, [x, y]);
+  useLayoutEffect(() => {
+    const activeElement = document.activeElement;
+    if (activeElement instanceof HTMLElement && !menuRef.current?.contains(activeElement)) {
+      returnFocusRef.current = activeElement;
+    }
+    menuRef.current?.querySelector("[data-context-menu-item]:not(:disabled)")?.focus();
+  }, []);
   useEffect(() => {
     const onKey = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key !== "Escape") return;
+      e.preventDefault();
+      onClose();
+      queueMicrotask(() => returnFocusRef.current?.focus());
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose]);
+  const onMenuKeyDown = (e) => {
+    const enabledItems = Array.from(
+      menuRef.current?.querySelectorAll(
+        "[data-context-menu-item]:not(:disabled)"
+      ) ?? []
+    );
+    if (!enabledItems.length) return;
+    const currentIndex = enabledItems.indexOf(document.activeElement);
+    let nextIndex = null;
+    switch (e.key) {
+      case "ArrowDown":
+        nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % enabledItems.length;
+        break;
+      case "ArrowUp":
+        nextIndex = currentIndex < 0 ? enabledItems.length - 1 : (currentIndex - 1 + enabledItems.length) % enabledItems.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = enabledItems.length - 1;
+        break;
+      case "Tab":
+        onClose();
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    enabledItems[nextIndex].focus();
+  };
   useEffect(() => {
     const isInsideMenu = (target) => target instanceof Node && !!menuRef.current?.contains(target);
     const onMouseDown = (e) => {
@@ -9930,6 +9972,7 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
       ),
       style: { left: pos.left, top: pos.top },
       onContextMenu: (e) => e.preventDefault(),
+      onKeyDown: onMenuKeyDown,
       children: items.map((item) => {
         const Icon2 = item.icon;
         const hasSub = !!item.submenu?.length;
@@ -9947,6 +9990,8 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                   {
                     type: "button",
                     role: "menuitem",
+                    tabIndex: -1,
+                    "data-context-menu-item": true,
                     disabled: item.disabled,
                     onClick: () => {
                       if (hasSub) return;
@@ -9954,8 +9999,8 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                       onClose();
                     },
                     className: cn(
-                      "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-40",
-                      item.danger && "text-destructive hover:text-destructive"
+                      "flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-40",
+                      item.danger && "text-destructive hover:text-destructive focus:text-destructive"
                     ),
                     children: [
                       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
@@ -9974,14 +10019,15 @@ function NContextMenu({ x, y, items, onAction, onClose, className }) {
                     {
                       type: "button",
                       role: "menuitem",
+                      tabIndex: -1,
                       disabled: sub.disabled,
                       onClick: () => {
                         onAction(sub.id);
                         onClose();
                       },
                       className: cn(
-                        "flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-40",
-                        sub.danger && "text-destructive hover:text-destructive"
+                        "flex w-full cursor-pointer items-center gap-2 px-3 py-1.5 text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-40",
+                        sub.danger && "text-destructive hover:text-destructive focus:text-destructive"
                       ),
                       children: [
                         SubIcon && /* @__PURE__ */ jsx(SubIcon, { size: 14 }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.11.7",
+  "version": "2.11.8",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",