najm-kit 2.11.7 → 2.11.9

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 2.11.9 - 2026-08-30
+
+- Fixed card grids that paginate client-side rendering their entire dataset on
+  one page. `useTable` pinned an uncontrolled paged card list to `data.length`,
+  a branch that predates the container measurement added in 2.2.0 and was never
+  reconciled with it: `calculatedCardPageSize` was measured and published, but
+  only ever applied to a server-paginated grid. A 500-row list rendered 500
+  cards on page one, reported a single page, and showed 500 as the current
+  Rows/page value. The measured size is now applied to an uncontrolled card grid
+  too, through the guards that already keep a server-paginated one stable —
+  geometry bucketing, the per-container report budget, and the deferral until
+  real cards have been measured. That loop is a property of the measurement
+  rather than of fetching: page size decides which cards render, and rendered
+  cards are what card height is measured from. Rendering every supplied row
+  stays the behavior wherever there is nothing to measure against, so
+  `dynamicHeight={false}` and a container that has not yet reported a layout are
+  unchanged, and a controlled `pagination` prop or an explicit Rows/page choice
+  still wins.
+
+## 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 }),
@@ -12161,15 +12207,17 @@ function useTable(effectiveViewModeOverride) {
   useLayoutEffect(() => {
     if (manualPagination || isPaginationControlled || isPageSizeUserSelected) return;
     if (dynamicHeight && renderedMode === "table") table.setPageSize(calculatedPageSize);
-    if (viewMode === "cards" && cardPagination.mode === "paged") {
+    const cardsAreUnmeasured = !dynamicHeight || !hasMeasuredLayout;
+    if (viewMode === "cards" && cardPagination.mode === "paged" && cardsAreUnmeasured) {
       table.setPageSize(data.length || 9999);
     }
-  }, [calculatedPageSize, dynamicHeight, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination, isPaginationControlled, isPageSizeUserSelected]);
+  }, [calculatedPageSize, dynamicHeight, hasMeasuredLayout, renderedMode, viewMode, cardPagination.mode, table, data.length, manualPagination, isPaginationControlled, isPageSizeUserSelected]);
   const dynamicPageSizeTarget = renderedMode === "cards" ? calculatedCardPageSize : calculatedPageSize;
   const geometryKey = `${Math.round(measuredBodyWidth / GEOMETRY_BUCKET_PX)}x${Math.round(measuredBodyHeight / GEOMETRY_BUCKET_PX)}`;
   const reportedGeometryRef = useRef(null);
   useLayoutEffect(() => {
-    if (!manualPagination || !dynamicHeight || isPageSizeUserSelected) return;
+    if (!dynamicHeight || isPageSizeUserSelected) return;
+    if (!manualPagination && (isPaginationControlled || renderedMode !== "cards")) return;
     if (cardPagination.mode !== "paged") return;
     if (!hasMeasuredLayout || measuredBodyHeight <= 0) return;
     if (!dynamicPageSizeTarget || dynamicPageSizeTarget < 1) return;
@@ -12191,6 +12239,7 @@ function useTable(effectiveViewModeOverride) {
     return () => clearTimeout(timer);
   }, [
     manualPagination,
+    isPaginationControlled,
     dynamicHeight,
     isPageSizeUserSelected,
     cardPagination.mode,

package/package.json

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