@flanksource/clicky-ui 0.2.3 → 0.2.5

package/dist/components/FilterBar.cjs

@@ -6,6 +6,7 @@ const FilterPill = require("../data/FilterPill.cjs");
 const Icon = require("../data/Icon.cjs");
 const utils = require("../lib/utils.cjs");
 const button = require("./button.cjs");
+const Combobox = require("./Combobox.cjs");
 const DateTimePicker = require("./DateTimePicker.cjs");
 const MultiSelect = require("./MultiSelect.cjs");
 const RangeSlider = require("./RangeSlider.cjs");
@@ -449,6 +450,13 @@ function FilterBarKeyValueControl({ filter }) {
 function filterInputId(filter) {
   return `filterbar-overflow-${filter.key}`;
 }
+function lookupOptionsToCombobox(options) {
+  return options.map((option) => ({
+    value: option.value,
+    label: option.label ?? option.value,
+    ...option.disabled !== void 0 ? { disabled: option.disabled } : {}
+  }));
+}
 function valueInputClassName(disabled) {
   return utils.cn(
     "h-8 w-full rounded-md border border-input bg-background px-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
@@ -473,7 +481,6 @@ function TextFilterValueControl({ filter }) {
 }
 function LookupFilterValueControl({ filter }) {
   const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
-  const listId = `${filter.key}-overflow-lookup-options`;
   if (filter.inputType === "date") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       DateTimePicker.DateTimePicker,
@@ -483,56 +490,55 @@ function LookupFilterValueControl({ filter }) {
         className: "w-full",
         inputClassName: valueInputClassName(filter.disabled),
         buttonClassName: "right-1",
-        placeholder: filter.placeholder ?? "Filter...",
+        placeholder: filter.placeholder,
         value: draft,
-        list: listId,
         disabled: filter.disabled,
         onChange: setDraft
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+  if (filter.inputType === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         id: filterInputId(filter),
-        type: filter.inputType === "number" ? "number" : "text",
+        type: "number",
         "aria-label": filter.label,
         className: valueInputClassName(filter.disabled),
-        placeholder: filter.placeholder ?? "Filter...",
+        placeholder: filter.placeholder,
         value: draft,
-        list: listId,
         disabled: filter.disabled,
         onChange: (event) => setDraft(event.target.value)
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-      "option",
-      {
-        value: option.value,
-        label: option.label ?? option.value,
-        disabled: option.disabled
-      },
-      option.value
-    )) })
-  ] });
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Combobox.Combobox,
+    {
+      id: filterInputId(filter),
+      options: lookupOptionsToCombobox(filter.options),
+      value: filter.value,
+      onChange: filter.onChange,
+      allowCustomValue: false,
+      className: "w-full",
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
+    }
+  );
 }
 function LookupMultiFilterValueControl({ filter }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    MultiSelect.MultiSelect,
+    Combobox.Combobox,
     {
-      options: filter.options.map((option) => ({
-        value: option.value,
-        label: option.label ?? option.value,
-        ...option.disabled !== void 0 ? { disabled: option.disabled } : {},
-        ...option.title !== void 0 ? { title: option.title } : {}
-      })),
+      multiple: true,
+      id: filterInputId(filter),
+      options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
-      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
-      triggerClassName: "h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-none",
-      menuClassName: "left-auto right-0"
+      allowCustomValue: false,
+      className: "w-full",
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
   );
 }
@@ -731,57 +737,63 @@ function TextFilterField({ filter, grow }) {
     }
   );
 }
+function lookupFieldWidthClass(grow) {
+  return grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0";
+}
 function LookupFilterField({ filter, grow }) {
   const [draft, setDraft] = useDebouncedTextDraft(filter.value, filter.onChange);
-  const listId = `${filter.key}-lookup-options`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      title: filter.description,
-      className: utils.cn(
-        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
-        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
-        filter.disabled && "opacity-60",
-        filter.className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
-        filter.inputType === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
-          DateTimePicker.DateTimePicker,
-          {
-            "aria-label": filter.label,
-            className: "w-full",
-            inputClassName: "w-full min-w-0 border-0 bg-transparent px-0 pr-6 text-sm text-foreground shadow-none focus-visible:ring-0",
-            buttonClassName: "right-0",
-            placeholder: filter.placeholder ?? "Filter…",
-            value: draft,
-            list: listId,
-            disabled: filter.disabled,
-            onChange: setDraft
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: filter.inputType === "number" ? "number" : "text",
-            "aria-label": filter.label,
-            className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
-            placeholder: filter.placeholder ?? "Filter…",
-            value: draft,
-            list: listId,
-            disabled: filter.disabled,
-            onChange: (event) => setDraft(event.target.value)
-          }
+  if (filter.inputType === "date" || filter.inputType === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        title: filter.description,
+        className: utils.cn(
+          "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
+          lookupFieldWidthClass(grow),
+          filter.disabled && "opacity-60",
+          filter.className
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-          "option",
-          {
-            value: option.value,
-            label: option.label ?? option.value,
-            disabled: option.disabled
-          },
-          option.value
-        )) })
-      ]
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+          filter.inputType === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
+            DateTimePicker.DateTimePicker,
+            {
+              "aria-label": filter.label,
+              className: "w-full",
+              inputClassName: "w-full min-w-0 border-0 bg-transparent px-0 pr-6 text-sm text-foreground shadow-none focus-visible:ring-0",
+              buttonClassName: "right-0",
+              placeholder: filter.placeholder,
+              value: draft,
+              disabled: filter.disabled,
+              onChange: setDraft
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "number",
+              "aria-label": filter.label,
+              className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+              placeholder: filter.placeholder,
+              value: draft,
+              disabled: filter.disabled,
+              onChange: (event) => setDraft(event.target.value)
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Combobox.Combobox,
+    {
+      label: filter.label,
+      options: lookupOptionsToCombobox(filter.options),
+      value: filter.value,
+      onChange: filter.onChange,
+      allowCustomValue: false,
+      className: utils.cn(lookupFieldWidthClass(grow), filter.className),
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
   );
 }
@@ -789,46 +801,20 @@ function LookupMultiFilterField({
   filter,
   grow
 }) {
-  const [draft, setDraft] = useDebouncedTextDraft(
-    filter.value.join(", "),
-    (next) => filter.onChange(parseLookupMultiValue(next))
-  );
-  const listId = `${filter.key}-lookup-options`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Combobox.Combobox,
     {
-      title: filter.description,
-      className: utils.cn(
-        "flex h-8 items-center gap-2 rounded-md border border-input bg-muted/30 pl-2 pr-2 text-xs",
-        grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0",
-        filter.disabled && "opacity-60",
-        filter.className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "text",
-            "aria-label": filter.label,
-            className: "w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
-            placeholder: filter.placeholder ?? "value-1, value-2",
-            value: draft,
-            list: listId,
-            disabled: filter.disabled,
-            onChange: (event) => setDraft(event.target.value)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("datalist", { id: listId, children: filter.options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
-          "option",
-          {
-            value: option.value,
-            label: option.label ?? option.value,
-            disabled: option.disabled
-          },
-          option.value
-        )) })
-      ]
+      multiple: true,
+      label: filter.label,
+      options: lookupOptionsToCombobox(filter.options),
+      value: filter.value,
+      onChange: filter.onChange,
+      allowCustomValue: false,
+      className: utils.cn(lookupFieldWidthClass(grow), filter.className),
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
+      ...filter.onSearch !== void 0 ? { onSearch: filter.onSearch } : {},
+      ...filter.loading !== void 0 ? { loading: filter.loading } : {},
+      ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
   );
 }
@@ -1074,17 +1060,45 @@ function MultiFilterField({ filter, grow }) {
   const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const [optionQuery, setOptionQuery] = react.useState("");
+  const [searchOptions, setSearchOptions] = react.useState([]);
   const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
   useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
+  const onSearch = filter.onSearch;
+  react.useEffect(() => {
+    if (!onSearch) return;
+    const query = optionQuery.trim();
+    if (!query) {
+      setSearchOptions([]);
+      return;
+    }
+    let cancelled = false;
+    const handle = setTimeout(() => {
+      Promise.resolve(onSearch(query)).then((opts) => {
+        if (!cancelled && Array.isArray(opts)) setSearchOptions(opts);
+      }).catch(() => {
+        if (!cancelled) setSearchOptions([]);
+      });
+    }, 250);
+    return () => {
+      cancelled = true;
+      clearTimeout(handle);
+    };
+  }, [onSearch, optionQuery]);
   const summary = summarizeMultiFilter(filter.label, draft);
-  const showOptionFilter = filter.options.length > 7;
+  const showOptionFilter = filter.truncated || Boolean(onSearch) || filter.options.length > 7;
   const visibleOptions = react.useMemo(() => {
-    const query = optionQuery.trim().toLowerCase();
+    const query = optionQuery.trim();
     if (!query) return filter.options;
+    if (onSearch) {
+      const selectedHead = filter.options.filter((o) => draft[o.value] !== void 0);
+      return mergeMultiSelectOptions(selectedHead, searchOptions);
+    }
+    const lowered = query.toLowerCase();
     return filter.options.filter(
-      (option) => multiSelectOptionText(option).toLowerCase().includes(query)
+      (option) => multiSelectOptionText(option).toLowerCase().includes(lowered)
     );
-  }, [filter.options, optionQuery]);
+  }, [filter.options, searchOptions, optionQuery, onSearch, draft]);
+  const moreCount = filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1182,12 +1196,30 @@ function MultiFilterField({ filter, grow }) {
               );
             }),
             visibleOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
+          ] }),
+          moreCount > 0 && !optionQuery.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 px-1.5 text-[11px] text-muted-foreground", children: [
+            "… and ",
+            moreCount.toLocaleString(),
+            " more",
+            onSearch ? " — type to search all" : ""
           ] })
         ] })
       ]
     }
   );
 }
+function mergeMultiSelectOptions(head, extra) {
+  if (extra.length === 0) return head;
+  const seen = new Set(head.map((o) => o.value));
+  const merged = [...head];
+  for (const option of extra) {
+    if (!seen.has(option.value)) {
+      seen.add(option.value);
+      merged.push(option);
+    }
+  }
+  return merged;
+}
 function MultiFilterPanel({
   filter,
   chrome = "full"
@@ -1781,9 +1813,6 @@ function summarizeMultiFilter(label, value) {
   ].filter(Boolean);
   return `${label} ${counts.join(" ")}`;
 }
-function parseLookupMultiValue(value) {
-  return value.split(",").map((item) => item.trim()).filter(Boolean);
-}
 function useDebouncedMultiDraft(value, onChange) {
   const { autoSubmit } = react.useContext(FilterBarContext);
   const [draft, setDraft] = react.useState(value);