najm-kit 2.11.6 → 2.11.8

package/CHANGELOG.md

@@ -1,14 +1,39 @@
-# Changelog
-
-## 2.11.6 - 2026-08-15
-
-- Fixed `FormInput` dropping React Hook Form's native field binding for text,
-  number, password, textarea, and time controls. These controls now forward
-  their field name, composed blur handler, and focus ref to the actual native
-  element, preserving browser form semantics, touched-state tracking, and
-  programmatic focus without changing composite-control contracts.
-
-## 2.11.5 - 2026-08-14
+# 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
+  accessibility tree with no accessible name. These types render their trigger
+  as a styled `div`, so the `<label for>` that `FormControl` wires up pointed at
+  a non-labelable element and named nothing: screen readers announced an unnamed
+  control, and `getByRole(..., { name })` could not resolve one. The form label
+  now becomes the trigger's `aria-label`, and `DateInput` and `ComboboxInput`
+  accept an explicit `ariaLabel` to override it. `select` keeps naming itself
+  from `ariaLabel || placeholder`; renaming it would break consumers that select
+  it by placeholder today.
+- Fixed `DateInput` rendering its popover trigger as a `div`. Radix only merges
+  trigger props onto the child, so the control had no role, no tab stop, and no
+  keyboard activation — it was unreachable without a mouse. It is now a real
+  `<button type="button">`, which also keeps it from submitting the surrounding
+  form when the calendar opens.
+
+## 2.11.6 - 2026-08-15
+
+- Fixed `FormInput` dropping React Hook Form's native field binding for text,
+  number, password, textarea, and time controls. These controls now forward
+  their field name, composed blur handler, and focus ref to the actual native
+  element, preserving browser form semantics, touched-state tracking, and
+  programmatic focus without changing composite-control contracts.
+
+## 2.11.5 - 2026-08-14
 
 - Fixed numbered lists staying on an invalid final page after a deletion or
   another mutation reduced the server total. Paged lists now clamp before

package/dist/index.d.ts

@@ -2238,6 +2238,7 @@ interface ComboboxInputProps extends BaseProps {
     showIcon?: boolean;
     disabled?: boolean;
     allowFreeText?: boolean;
+    ariaLabel?: string;
 }
 interface MultiSelectInputProps extends BaseProps {
     value: string[];
@@ -2294,6 +2295,7 @@ interface DateInputProps extends BaseProps {
     placeholder?: string;
     icon?: InputIcon;
     showIcon?: boolean;
+    ariaLabel?: string;
 }
 interface StarRatingInputProps extends BaseProps {
     value: number;

package/dist/index.mjs

@@ -4551,7 +4551,7 @@ var TextAreaInput = React66__default.forwardRef(({ value, onChange, placeholder
   );
 });
 TextAreaInput.displayName = "TextAreaInput";
-var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
+var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", loading = false, loadingMessage = "Loading...", onSearchChange, shouldFilter = true, value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false, ariaLabel }) => {
   const [open, setOpen] = useState(false);
   const triggerRef = React66__default.useRef(null);
   const pointerDismissedRef = React66__default.useRef(false);
@@ -4590,6 +4590,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
         bordered,
         borderColor,
         role: "combobox",
+        "aria-label": ariaLabel,
         tabIndex: disabled ? -1 : 0,
         "aria-expanded": open,
         className: cn(
@@ -4782,13 +4783,13 @@ function Calendar(props) {
     }
   );
 }
-var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor }) => {
+var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor, ariaLabel }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const toDateString = (date) => date ? format(date, "yyyy-MM-dd") : void 0;
   const toDate = (val) => typeof val === "string" ? parseISO(val) : val;
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label2, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": ariaLabel, className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal bg-transparent border-0 p-0 outline-none", children: /* @__PURE__ */ jsx("span", { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: toDate(value), onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
@@ -9878,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;
@@ -9894,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) => {
@@ -9929,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;
@@ -9946,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;
@@ -9953,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: [
@@ -9973,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 }),
@@ -10879,6 +10926,7 @@ var Inputs = {
   slider: SliderInput
 };
 var nativeFieldTypes = /* @__PURE__ */ new Set(["text", "number", "password", "textarea", "time"]);
+var labelNamedCompositeTypes = /* @__PURE__ */ new Set(["date", "combobox", "multiselect"]);
 var FormInput = ({ name, type, formLabel, formDescription, required = false, disabled = false, readOnly = false, hidden = false, icon, iconColor, classNames, background, ...rest }) => {
   const InputComponent = Inputs[type];
   const { control } = useFormContext();
@@ -10897,6 +10945,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
   };
   const presetInput = type === "textarea" ? preset.input?.replace(/\bh-\d+\b/g, "").trim() : preset.input;
   const isFillAvatar = type === "avatar" && inputRest.fill === true;
+  const compositeAriaLabel = labelNamedCompositeTypes.has(type) && typeof formLabel === "string" ? { ariaLabel: inputRest.ariaLabel ?? formLabel } : {};
   const slot = {
     item: cn(
       preset.item,
@@ -10929,7 +10978,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
         formLabel,
         required && !disabled && !readOnly && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, ...nativeFieldBinding, className: slot.input }) }),
+      /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(InputComponent, { value: field.value ?? getDefaultValue(), onChange: handleChange, status: hasError && !isHidden ? "error" : "default", bordered: contextBordered, icon: formLabel ? void 0 : icon, iconColor: formLabel ? void 0 : iconColor, disabled, readOnly, ...inputRest, ...compositeAriaLabel, ...nativeFieldBinding, className: slot.input }) }),
       !hasError && !disabled && !readOnly && formDescription && /* @__PURE__ */ jsx(FormDescription, { className: slot.description, children: formDescription }),
       !isHidden && /* @__PURE__ */ jsx(FormMessage, { className: slot.error })
     ] });

package/dist/theme.css

@@ -307,10 +307,10 @@ input:autofill {
   overflow-x: auto;
   scrollbar-width: none;
 }
-.najm-overlay-scroll-x::-webkit-scrollbar {
-  display: none;
-}
-
+.najm-overlay-scroll-x::-webkit-scrollbar {
+  display: none;
+}
+
 /* Responsive table actions stay discoverable on touch and tablet layouts.
    Fine-pointer desktops may keep the quieter hover/focus reveal treatment. */
 .ntable-card-action {
@@ -367,7 +367,7 @@ input:autofill {
   .nimage-input-compact-overlay:focus-visible {
     opacity: 1;
   }
-}
+}
 
 /* OverlayScrollbars theme used by the <NajmScroll> component — a thin,
    translucent slate bar that floats over content with no reserved space.

package/package.json

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