@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/components/FilterBar.cjs

@@ -18,6 +18,7 @@ const DateTimePicker = require("./DateTimePicker.cjs");
 const MultiSelect = require("./MultiSelect.cjs");
 const RangeSlider = require("./RangeSlider.cjs");
 const TimeRange = require("./TimeRange.cjs");
+const TriStateToggle = require("./TriStateToggle.cjs");
 const UiSearch = require("../icons/components/UiSearch.cjs");
 const UiFilter = require("../icons/components/UiFilter.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
@@ -139,6 +140,7 @@ function FilterBar({
   return /* @__PURE__ */ jsxRuntime.jsx(filterBarContext.FilterBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      "data-slot": "filter-bar",
       className: utils.cn(
         "flex flex-nowrap items-center gap-2 overflow-visible bg-background py-1.5",
         "flex-wrap md:flex-nowrap",
@@ -227,6 +229,7 @@ function FilterBarFilterPanelContent({
     filter.kind === "number" && /* @__PURE__ */ jsxRuntime.jsx(NumberFilterPanel, { filter, chrome }),
     filter.kind === "enum" && /* @__PURE__ */ jsxRuntime.jsx(EnumFilterField, { filter, grow: true }),
     filter.kind === "boolean" && /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterField, { filter }),
+    filter.kind === "tristate" && /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterField, { filter }),
     filter.kind === "text" && /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow: true })
   ] });
 }
@@ -255,6 +258,9 @@ function renderFilterField(filter, grow) {
   if (filter.kind === "boolean") {
     return /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterField, { filter });
   }
+  if (filter.kind === "tristate") {
+    return /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterField, { filter });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow });
 }
 function OverflowFiltersMenu({
@@ -293,7 +299,9 @@ function OverflowFiltersMenu({
   const stagedFilters = filters.map(
     (filter) => filterWithStagedValue(
       filter,
-      stagedValues[filter.key] ?? filterBarFilterValue(filter),
+      // Key presence, not `??`: a tri-state cycled to unset stages `undefined`,
+      // which must render as unset instead of falling back to the live value.
+      Object.hasOwn(stagedValues, filter.key) ? stagedValues[filter.key] : filterBarFilterValue(filter),
       (next) => setStagedValues((current) => ({
         ...current,
         [filter.key]: next
@@ -468,6 +476,9 @@ function FilterBarKeyValueControl({ filter }) {
   if (filter.kind === "nested-multi") {
     return /* @__PURE__ */ jsxRuntime.jsx(NestedMultiFilterField, { filter, grow: true });
   }
+  if (filter.kind === "tristate") {
+    return /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterValueControl, { filter });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(NumberFilterField, { filter, grow: true });
 }
 function filterInputId(filter) {
@@ -604,6 +615,20 @@ function BooleanFilterValueControl({ filter }) {
     }
   ) });
 }
+function TriStateFilterValueControl({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    TriStateToggle.TriStateToggle,
+    {
+      id: filterInputId(filter),
+      value: filter.value,
+      onChange: filter.onChange,
+      label: filter.label,
+      size: "md",
+      ...filter.labels ? { labels: filter.labels } : {},
+      ...filter.disabled ? { disabled: filter.disabled } : {}
+    }
+  ) });
+}
 function SelectMultiFilterValueControl({ filter }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     MultiSelect.MultiSelect,
@@ -669,6 +694,32 @@ function EnumFilterField({ filter, grow }) {
     }
   );
 }
+function TriStateFilterField({ filter }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      title: filter.description,
+      className: utils.cn(
+        "flex h-8 shrink-0 items-center gap-2 rounded-md border border-input bg-muted/30 px-2 text-xs",
+        filter.disabled && "opacity-60",
+        filter.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TriStateToggle.TriStateToggle,
+          {
+            value: filter.value,
+            onChange: filter.onChange,
+            label: filter.label,
+            ...filter.labels ? { labels: filter.labels } : {},
+            ...filter.disabled ? { disabled: filter.disabled } : {}
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(FilterFieldLabel, { icon: filter.icon, label: filter.label })
+      ]
+    }
+  );
+}
 function BooleanFilterField({ filter }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
@@ -1771,6 +1822,13 @@ function filterWithStagedValue(filter, value, onChange) {
       onChange: (next) => onChange(next)
     };
   }
+  if (filter.kind === "tristate") {
+    return {
+      ...filter,
+      value: value === void 0 ? void 0 : Boolean(value),
+      onChange: (next) => onChange(next)
+    };
+  }
   return {
     ...filter,
     value: Boolean(value),
@@ -1779,7 +1837,7 @@ function filterWithStagedValue(filter, value, onChange) {
 }
 function applyStagedFilterValues(filters, stagedValues) {
   for (const filter of filters) {
-    const next = stagedValues[filter.key] ?? filterBarFilterValue(filter);
+    const next = Object.hasOwn(stagedValues, filter.key) ? stagedValues[filter.key] : filterBarFilterValue(filter);
     if (sameFilterBarValue(filterBarFilterValue(filter), next)) continue;
     applyFilterBarValue(filter, next);
   }
@@ -1801,6 +1859,10 @@ function applyFilterBarValue(filter, value) {
     filter.onChange(Boolean(value));
     return;
   }
+  if (filter.kind === "tristate") {
+    filter.onChange(value === void 0 ? void 0 : Boolean(value));
+    return;
+  }
   filter.onChange(isMultiFilterValue(value) ? value : {});
 }
 function sameFilterBarValue(left, right) {