@flanksource/clicky-ui 0.2.15 → 0.2.17

package/dist/components/FilterBar.cjs

@@ -25,6 +25,10 @@ const FILTER_BAR_OVERFLOW_TRIGGER_ESTIMATE_PX = 44;
 const FilterBarContext = react.createContext({
   autoSubmit: true
 });
+function applyFilterExtensions(filter, extensions) {
+  if (!extensions || extensions.length === 0) return filter;
+  return extensions.reduce((current, ext) => ext(current), filter);
+}
 function FilterBar({
   search,
   filters,
@@ -365,7 +369,13 @@ function OverflowFiltersMenu({
                           className: "flex min-w-0 items-center gap-1 truncate text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
                           title: filter.description ?? filter.label,
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filter.icon, className: "text-[12px] normal-case" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              Icon.LabelIcon,
+                              {
+                                icon: sizedIcon(filter.icon, 12),
+                                className: "text-[12px] normal-case"
+                              }
+                            ),
                             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: filter.label })
                           ]
                         }
@@ -476,7 +486,7 @@ function TextFilterValueControl({ filter }) {
       type: "text",
       "aria-label": filter.label,
       className: valueInputClassName(filter.disabled),
-      placeholder: filter.placeholder ?? "Filter...",
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       value: draft,
       disabled: filter.disabled,
       onChange: (event) => setDraft(event.target.value)
@@ -561,7 +571,7 @@ function EnumFilterValueControl({ filter }) {
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       className: "w-full",
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
@@ -588,7 +598,8 @@ function SelectMultiFilterValueControl({ filter }) {
       options: filter.options,
       value: filter.value,
       onChange: filter.onChange,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ariaLabel: `${filter.label} filter`,
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       ...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"
@@ -633,12 +644,12 @@ function EnumFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: enumOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
       allowCustomValue: false,
-      placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+      ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
       className: utils.cn(lookupFieldWidthClass(grow), filter.className),
       ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {}
     }
@@ -717,7 +728,7 @@ function TextFilterField({ filter, grow }) {
             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 ?? "Filter…",
+            ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
             value: draft,
             disabled: filter.disabled,
             onChange: (event) => setDraft(event.target.value)
@@ -733,6 +744,20 @@ function FilterFieldLabel({ icon, label }) {
     label
   ] });
 }
+function sizedIcon(icon, px) {
+  if (!react.isValidElement(icon)) return icon;
+  const el = icon;
+  return react.cloneElement(el, {
+    style: { width: `${px}px`, height: `${px}px`, ...el.props.style ?? {} }
+  });
+}
+function comboboxLabelProps(filter) {
+  if (filter.icon == null) return { label: filter.label };
+  return {
+    label: /* @__PURE__ */ jsxRuntime.jsx("span", { title: filter.label, className: "inline-flex items-center text-[10px]", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: sizedIcon(filter.icon, 10), className: "normal-case" }) }),
+    ariaLabel: filter.label
+  };
+}
 function lookupFieldWidthClass(grow) {
   return grow ? "min-w-[12rem] max-w-[18rem] flex-1" : "min-w-[11rem] max-w-[15rem] shrink-0";
 }
@@ -783,7 +808,7 @@ function LookupFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Combobox.Combobox,
     {
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
@@ -802,7 +827,7 @@ function LookupMultiFilterField({
     Combobox.Combobox,
     {
       multiple: true,
-      label: filter.label,
+      ...comboboxLabelProps(filter),
       options: lookupOptionsToCombobox(filter.options),
       value: filter.value,
       onChange: filter.onChange,
@@ -910,7 +935,7 @@ function NumberFilterField({ filter, grow }) {
                     step: bounds.step,
                     "aria-label": `${filter.label} minimum`,
                     className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: filter.minPlaceholder ?? formatNumberValue(bounds.min, filter),
+                    ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
                     value: draft.min ?? "",
                     onChange: (event) => setDraft(
                       normalizeNumberFilterValue(
@@ -931,7 +956,7 @@ function NumberFilterField({ filter, grow }) {
                     step: bounds.step,
                     "aria-label": `${filter.label} maximum`,
                     className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    placeholder: filter.maxPlaceholder ?? formatNumberValue(bounds.max, filter),
+                    ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
                     value: draft.max ?? "",
                     onChange: (event) => setDraft(
                       normalizeNumberFilterValue(
@@ -1015,7 +1040,7 @@ function NumberFilterPanel({
                   step: bounds.step,
                   "aria-label": `${filter.label} minimum`,
                   className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  placeholder: filter.minPlaceholder ?? formatNumberValue(bounds.min, filter),
+                  ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
                   value: draft.min ?? "",
                   onChange: (event) => setDraft(
                     normalizeNumberFilterValue(
@@ -1036,7 +1061,7 @@ function NumberFilterPanel({
                   step: bounds.step,
                   "aria-label": `${filter.label} maximum`,
                   className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  placeholder: filter.maxPlaceholder ?? formatNumberValue(bounds.max, filter),
+                  ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
                   value: draft.max ?? "",
                   onChange: (event) => setDraft(
                     normalizeNumberFilterValue(
@@ -1083,19 +1108,32 @@ function MultiFilterField({ filter, grow }) {
     };
   }, [onSearch, optionQuery]);
   const summary = summarizeMultiFilter(filter.label, draft);
-  const showOptionFilter = filter.truncated || Boolean(onSearch) || filter.options.length > 7;
+  const allowCustomValue = Boolean(filter.allowCustomValue);
+  const baseOptions = react.useMemo(() => {
+    if (!allowCustomValue) return filter.options;
+    const known = new Set(filter.options.map((o) => o.value));
+    const pinned = Object.keys(draft).filter((v) => !known.has(v)).map((v) => ({ value: v, label: v }));
+    return mergeMultiSelectOptions(pinned, filter.options);
+  }, [allowCustomValue, filter.options, draft]);
+  const showOptionFilter = filter.truncated || Boolean(onSearch) || allowCustomValue || filter.options.length > 7;
   const visibleOptions = react.useMemo(() => {
     const query = optionQuery.trim();
-    if (!query) return filter.options;
+    if (!query) return baseOptions;
     if (onSearch) {
-      const selectedHead = filter.options.filter((o) => draft[o.value] !== void 0);
+      const selectedHead = baseOptions.filter((o) => draft[o.value] !== void 0);
       return mergeMultiSelectOptions(selectedHead, searchOptions);
     }
     const lowered = query.toLowerCase();
-    return filter.options.filter(
+    return baseOptions.filter(
       (option) => multiSelectOptionText(option).toLowerCase().includes(lowered)
     );
-  }, [filter.options, searchOptions, optionQuery, onSearch, draft]);
+  }, [baseOptions, searchOptions, optionQuery, onSearch, draft]);
+  const trimmedQuery = optionQuery.trim();
+  const canAddCustom = allowCustomValue && trimmedQuery !== "" && !visibleOptions.some((o) => o.value === trimmedQuery);
+  const addCustom = () => {
+    setDraft(updateMultiFilterValue(draft, trimmedQuery, "include"));
+    setOptionQuery("");
+  };
   const moreCount = filter.truncated && filter.total ? Math.max(filter.total - filter.options.length, 0) : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1194,7 +1232,28 @@ function MultiFilterField({ filter, grow }) {
                 option.value
               );
             }),
-            visibleOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
+            canAddCustom && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "button",
+                tabIndex: 0,
+                "data-filter-add-custom": trimmedQuery,
+                className: "rounded-md px-2 py-1 text-sm text-primary hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                onClick: addCustom,
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    addCustom();
+                  }
+                },
+                children: [
+                  "Add “",
+                  trimmedQuery,
+                  "”"
+                ]
+              }
+            ),
+            visibleOptions.length === 0 && !canAddCustom && /* @__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 ",
@@ -1732,7 +1791,8 @@ function SelectMultiFilterField({
             options: filter.options,
             value: filter.value,
             onChange: filter.onChange,
-            placeholder: filter.placeholder ?? `Any ${filter.label.toLowerCase()}`,
+            ariaLabel: `${filter.label} filter`,
+            ...filter.placeholder !== void 0 ? { placeholder: filter.placeholder } : {},
             ...filter.disabled !== void 0 ? { disabled: filter.disabled } : {},
             triggerClassName: "h-6 min-w-0 border-0 bg-transparent px-1 text-xs shadow-none focus-visible:ring-0",
             menuClassName: "left-auto right-0"
@@ -2111,4 +2171,5 @@ function estimateFilterWidth(filter) {
 exports.FilterBar = FilterBar;
 exports.FilterBarFilterPanel = FilterBarFilterPanel;
 exports.FilterBarRangePanel = FilterBarRangePanel;
+exports.applyFilterExtensions = applyFilterExtensions;
 //# sourceMappingURL=FilterBar.cjs.map