najm-kit 2.11.14 → 2.11.15

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.11.15 - 2026-09-04
+
+- Fixed `ComboboxInput` keyboard interaction. Enter and Space now open its
+  focusable trigger, and Enter commits the active filtered result instead of
+  doing nothing when the previously active CmdK item was filtered out. Disabled
+  comboboxes remain non-activatable.
+
 ## 2.11.14 - 2026-09-04
 
 - Added `defineNajmPreferences` to `najm-kit/server`: the language, theme, and

package/dist/index.mjs

@@ -29,7 +29,7 @@ import { HexColorPicker } from 'react-colorful';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
-import { Command as Command$1 } from 'cmdk';
+import { Command as Command$1, defaultFilter } from 'cmdk';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { create } from 'zustand';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -4564,21 +4564,39 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
   const displayLabel = selectedItem?.label ?? (allowFreeText && value ? value : "");
   const shouldDisplayIcon = Boolean(icon) && showIcon && !value;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
+  const [activeItem, setActiveItem] = useState(selectedItem?.label ?? normalizedItems[0]?.label ?? "");
   const trimmedQuery = query.trim();
   const queryMatchesItem = trimmedQuery !== "" && normalizedItems.some((i) => i.value === trimmedQuery || i.label.toLowerCase() === trimmedQuery.toLowerCase());
   const showFreeTextOption = allowFreeText && trimmedQuery !== "" && !queryMatchesItem;
+  const rankItems = (search) => normalizedItems.map((item, index) => ({
+    index,
+    item,
+    score: shouldFilter ? defaultFilter(item.label, search.trim(), [item.value, item.label]) : 1
+  })).filter(({ score }) => score > 0).sort((left, right) => right.score - left.score || left.index - right.index);
   const commit = (next) => {
     onChange(next);
+    setActiveItem(normalizedItems.find((item) => item.value === next)?.label ?? "");
     setOpen(false);
     setQuery("");
     onSearchChange?.("");
   };
   const updateQuery = (next) => {
+    setActiveItem(rankItems(next)[0]?.item.label ?? "");
     setQuery(next);
     onSearchChange?.(next);
   };
+  const updateActiveItem = (next) => {
+    const nextItem = normalizedItems.find((item) => item.label === next);
+    if (trimmedQuery !== "" && shouldFilter && (!nextItem || defaultFilter(nextItem.label, trimmedQuery, [nextItem.value, nextItem.label]) <= 0)) {
+      return;
+    }
+    setActiveItem(next);
+  };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (o) => {
     setOpen(o);
+    if (o) {
+      setActiveItem(selectedItem?.label ?? normalizedItems[0]?.label ?? "");
+    }
     if (!o) {
       setQuery("");
       onSearchChange?.("");
@@ -4596,6 +4614,11 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
         "aria-label": ariaLabel,
         tabIndex: disabled ? -1 : 0,
         "aria-expanded": open,
+        onKeyDown: (event) => {
+          if (disabled || event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          setOpen(true);
+        },
         className: cn(
           "cursor-pointer outline-none data-[state=open]:border-ring",
           className
@@ -4621,38 +4644,69 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
           pointerDismissedRef.current = false;
           triggerRef.current?.blur();
         },
-        children: /* @__PURE__ */ jsxs(Command, { shouldFilter, children: [
-          /* @__PURE__ */ jsx(
-            CommandInput,
-            {
-              placeholder: searchPlaceholder,
-              className: "h-9",
-              value: query,
-              onValueChange: updateQuery,
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && showFreeTextOption) {
-                  e.preventDefault();
-                  commit(trimmedQuery);
+        children: /* @__PURE__ */ jsxs(
+          Command,
+          {
+            shouldFilter,
+            value: activeItem,
+            onValueChange: updateActiveItem,
+            children: [
+              /* @__PURE__ */ jsx(
+                CommandInput,
+                {
+                  placeholder: searchPlaceholder,
+                  className: "h-9",
+                  value: query,
+                  onValueChange: updateQuery,
+                  onKeyDown: (e) => {
+                    const rankedItems = rankItems(trimmedQuery);
+                    if (trimmedQuery !== "" && rankedItems.length > 0 && ["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      const currentIndex = rankedItems.findIndex(({ item }) => item.label === activeItem);
+                      const nextIndex = e.key === "Home" ? 0 : e.key === "End" ? rankedItems.length - 1 : e.key === "ArrowDown" ? Math.min(currentIndex + 1, rankedItems.length - 1) : Math.max(currentIndex < 0 ? 0 : currentIndex - 1, 0);
+                      setActiveItem(rankedItems[nextIndex]?.item.label ?? "");
+                      return;
+                    }
+                    if (e.key !== "Enter") return;
+                    if (showFreeTextOption) {
+                      e.preventDefault();
+                      commit(trimmedQuery);
+                      return;
+                    }
+                    if (trimmedQuery !== "") {
+                      const activeMatch = normalizedItems.find((item) => item.label === activeItem);
+                      const nextItem = activeMatch && defaultFilter(
+                        activeMatch.label,
+                        trimmedQuery,
+                        [activeMatch.value, activeMatch.label]
+                      ) > 0 ? activeMatch : rankedItems[0]?.item;
+                      if (nextItem) {
+                        e.preventDefault();
+                        commit(nextItem.value);
+                      }
+                    }
+                  }
                 }
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs(CommandList, { children: [
-            /* @__PURE__ */ jsx(CommandEmpty, { children: loading ? loadingMessage : emptyMessage }),
-            /* @__PURE__ */ jsxs(CommandGroup, { children: [
-              showFreeTextOption && /* @__PURE__ */ jsxs(CommandItem, { value: trimmedQuery, onSelect: () => commit(trimmedQuery), className: "cursor-pointer", children: [
-                /* @__PURE__ */ jsx(Check, { className: "mr-2 h-4 w-4 opacity-0" }),
-                'Use "',
-                trimmedQuery,
-                '"'
-              ] }, "__free_text__"),
-              normalizedItems.map((item) => /* @__PURE__ */ jsxs(CommandItem, { value: item.label, keywords: [item.value, item.label], onSelect: () => commit(value === item.value ? "" : item.value), className: "cursor-pointer", children: [
-                /* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === item.value ? "opacity-100" : "opacity-0") }),
-                item.label
-              ] }, item.value))
-            ] })
-          ] })
-        ] })
+              ),
+              /* @__PURE__ */ jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsx(CommandEmpty, { children: loading ? loadingMessage : emptyMessage }),
+                /* @__PURE__ */ jsxs(CommandGroup, { children: [
+                  showFreeTextOption && /* @__PURE__ */ jsxs(CommandItem, { value: trimmedQuery, onSelect: () => commit(trimmedQuery), className: "cursor-pointer", children: [
+                    /* @__PURE__ */ jsx(Check, { className: "mr-2 h-4 w-4 opacity-0" }),
+                    'Use "',
+                    trimmedQuery,
+                    '"'
+                  ] }, "__free_text__"),
+                  normalizedItems.map((item) => /* @__PURE__ */ jsxs(CommandItem, { value: item.label, keywords: [item.value, item.label], onSelect: () => commit(value === item.value ? "" : item.value), className: "cursor-pointer", children: [
+                    /* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === item.value ? "opacity-100" : "opacity-0") }),
+                    item.label
+                  ] }, item.value))
+                ] })
+              ] })
+            ]
+          }
+        )
       }
     )
   ] });

package/package.json

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