najm-kit 2.1.53 → 2.1.56

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.1.55
+
+- Honor `showIcon` on NTable `select` and `combobox` filters. The leading filter icon is still shown by default; pass `showIcon: false` on a filter to hide it.
+
+## 2.1.54
+
+- Added controlled remote-search and loading-state props to `ComboboxInput` and `FormInput type="combobox"` while preserving client filtering by default.
+
 ## 2.1.53 - 2026-08-05
 
 - Add typed `NBarChart`, `NLineChart`, `NPieChart`, and `NStatusBreakdown`

package/README.md

@@ -147,7 +147,7 @@ import { Form, FormInput, useNForm } from 'najm-kit';
 | Data | Table (NTable), StatCard, DetailList |
 | Overlays | Command palette, Tooltip, Toast |
 
-## ImageInput and AvatarInput
+## ImageInput and AvatarInput
 
 `ImageInput` and `AvatarInput` ship with a resilient preview contract so
 consumers do not need to wrap them with application-specific preview
@@ -388,3 +388,10 @@ const data = [
   ]}
 />
 ```
+
+### Server-backed combobox search
+
+`ComboboxInput` and `FormInput type="combobox"` can delegate filtering to a
+server by setting `shouldFilter={false}` and handling `onSearchChange`. Use
+`loading` and `loadingMessage` while replacement options are being fetched.
+Client-side filtering remains the default.

package/dist/index.d.ts

@@ -2153,6 +2153,10 @@ interface ComboboxInputProps extends BaseProps {
     placeholder?: string;
     searchPlaceholder?: string;
     emptyMessage?: string;
+    loading?: boolean;
+    loadingMessage?: string;
+    onSearchChange?: (query: string) => void;
+    shouldFilter?: boolean;
     icon?: InputIcon;
     showIcon?: boolean;
     disabled?: boolean;

package/dist/index.mjs

@@ -9810,7 +9810,7 @@ var TextAreaInput = ({ value, onChange, placeholder = "", className = "", varian
     }
   );
 };
-var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", 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 }) => {
   const [open, setOpen] = useState(false);
   const triggerRef = React__default.useRef(null);
   const pointerDismissedRef = React__default.useRef(false);
@@ -9827,10 +9827,18 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     onChange(next);
     setOpen(false);
     setQuery("");
+    onSearchChange?.("");
+  };
+  const updateQuery = (next) => {
+    setQuery(next);
+    onSearchChange?.(next);
   };
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: (o) => {
     setOpen(o);
-    if (!o) setQuery("");
+    if (!o) {
+      setQuery("");
+      onSearchChange?.("");
+    }
   }, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
       BaseInput,
@@ -9868,14 +9876,14 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
           pointerDismissedRef.current = false;
           triggerRef.current?.blur();
         },
-        children: /* @__PURE__ */ jsxs(Command, { children: [
+        children: /* @__PURE__ */ jsxs(Command, { shouldFilter, children: [
           /* @__PURE__ */ jsx(
             CommandInput,
             {
               placeholder: searchPlaceholder,
               className: "h-9",
               value: query,
-              onValueChange: setQuery,
+              onValueChange: updateQuery,
               onKeyDown: (e) => {
                 if (e.key === "Enter" && showFreeTextOption) {
                   e.preventDefault();
@@ -9885,7 +9893,7 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
             }
           ),
           /* @__PURE__ */ jsxs(CommandList, { children: [
-            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+            /* @__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" }),
@@ -13530,7 +13538,7 @@ function RenderFilter({ filter, mobilePrimary = false }) {
           searchPlaceholder: filter.searchPlaceholder,
           emptyMessage: filter.emptyMessage,
           icon: "filter",
-          showIcon: true,
+          showIcon: filter.showIcon ?? true,
           disabled: filter.disabled,
           bordered,
           className: "w-full"
@@ -13545,7 +13553,7 @@ function RenderFilter({ filter, mobilePrimary = false }) {
         items: filter.options || [],
         placeholder: filter.placeholder,
         icon: "filter",
-        showIcon: true,
+        showIcon: filter.showIcon ?? true,
         disabled: filter.disabled,
         bordered,
         className: "w-full"

package/package.json

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