@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/components/ErrorWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorWrapper.d.ts","sourceRoot":"","sources":["../../src/components/ErrorWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGT,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAWf,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,CAAC;AAEF,qBAAa,YAAa,SAAQ,SAAS,CACzC,iBAAiB,EACjB,iBAAiB,CAClB;IACU,KAAK,EAAE,iBAAiB,CAG/B;IAEF,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;IAInC,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAKpD,MAAM;CAWhB"}

package/dist/components/ErrorWrapper.js

@@ -0,0 +1,168 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Component, useState, useMemo } from "react";
+import { ErrorDetails } from "../data/diagnostics/ErrorDetails.js";
+import { normalizeErrorDiagnostics } from "../data/diagnostics/error-diagnostics.js";
+import { Icon } from "../data/Icon.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { UiWarningTriangle } from "../icons/components/UiWarningTriangle.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiCopy } from "../icons/components/UiCopy.js";
+class ErrorWrapper extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", {
+      error: null,
+      componentStack: null
+    });
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    var _a, _b;
+    this.setState({ componentStack: errorInfo.componentStack ?? null });
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error, errorInfo);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsx(
+        ErrorFallback,
+        {
+          error: this.state.error,
+          componentStack: this.state.componentStack
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+function copyStatusMessage(copyState) {
+  if (copyState === "copied") return "Error details copied to clipboard.";
+  if (copyState === "failed") {
+    return "Clipboard access failed. Expand the error details to copy individual values.";
+  }
+  return "";
+}
+function ErrorFallback({
+  error,
+  componentStack
+}) {
+  const [copyState, setCopyState] = useState("idle");
+  const diagnostics = useMemo(
+    () => errorDiagnostics(error, componentStack),
+    [componentStack, error]
+  );
+  const copyDetails = async () => {
+    var _a;
+    if (!((_a = navigator.clipboard) == null ? void 0 : _a.writeText)) {
+      setCopyState("failed");
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(errorReport(error, componentStack));
+      setCopyState("copied");
+    } catch {
+      setCopyState("failed");
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "error-wrapper",
+      role: "alert",
+      "aria-labelledby": "error-wrapper-title",
+      className: "flex min-h-dvh w-full items-center justify-center bg-background p-density-6 text-foreground",
+      children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-density-4 flex items-start gap-density-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "grid size-12 shrink-0 place-items-center rounded-full bg-destructive/10 text-destructive", children: /* @__PURE__ */ jsx(Icon, { icon: UiWarningTriangle, className: "size-6" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-destructive", children: "Unexpected application error" }),
+            /* @__PURE__ */ jsx(
+              "h1",
+              {
+                id: "error-wrapper-title",
+                className: "mt-density-1 text-2xl font-semibold tracking-tight",
+                children: "Something went wrong"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "mt-density-2 break-words text-sm text-muted-foreground", children: diagnostics.message })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-density-3 flex items-center gap-density-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => void copyDetails(),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { icon: copyState === "copied" ? UiCheck : UiCopy }),
+                copyState === "copied" ? "Copied" : "Copy error details"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-live": "polite",
+              className: cn(
+                "text-xs",
+                copyState === "failed" ? "text-destructive" : "text-muted-foreground"
+              ),
+              children: copyStatusMessage(copyState)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ErrorDetails, { diagnostics })
+      ] })
+    }
+  );
+}
+function errorDiagnostics(error, componentStack) {
+  const diagnostics = normalizeErrorDiagnostics(
+    error,
+    "An unexpected error was thrown without a message."
+  );
+  if (!diagnostics) {
+    throw new Error("ErrorWrapper could not normalize the captured error");
+  }
+  const cause = error.cause === void 0 ? [] : [["cause", String(error.cause)]];
+  const reactStack = componentStack == null ? void 0 : componentStack.trim();
+  return {
+    ...diagnostics,
+    context: [...diagnostics.context, ...cause],
+    ...reactStack ? {
+      stacktrace: [
+        diagnostics.stacktrace,
+        "React component stack:",
+        reactStack
+      ].filter(Boolean).join("\n\n")
+    } : {}
+  };
+}
+function errorReport(error, componentStack) {
+  const lines = [
+    `Error: ${error.message || "An unexpected error was thrown without a message."}`
+  ];
+  if (error.name !== "Error") lines.push(`Type: ${error.name}`);
+  if (error.cause !== void 0) lines.push(`Cause: ${String(error.cause)}`);
+  if (typeof window !== "undefined")
+    lines.push(`Page: ${window.location.href}`);
+  if (typeof navigator !== "undefined" && navigator.userAgent) {
+    lines.push(`User agent: ${navigator.userAgent}`);
+  }
+  lines.push(`Time: ${(/* @__PURE__ */ new Date()).toISOString()}`);
+  if (error.stack) lines.push("", "Stack trace:", error.stack);
+  if (componentStack == null ? void 0 : componentStack.trim()) {
+    lines.push("", "React component stack:", componentStack.trim());
+  }
+  return lines.join("\n");
+}
+export {
+  ErrorWrapper
+};
+//# sourceMappingURL=ErrorWrapper.js.map

package/dist/components/ErrorWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorWrapper.js","sources":["../../src/components/ErrorWrapper.tsx"],"sourcesContent":["import {\n  Component,\n  useMemo,\n  useState,\n  type ErrorInfo,\n  type ReactNode,\n} from \"react\";\nimport { ErrorDetails } from \"../data/diagnostics/ErrorDetails\";\nimport {\n  normalizeErrorDiagnostics,\n  type ErrorDiagnostics,\n} from \"../data/diagnostics/error-diagnostics\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiCopy, UiWarningTriangle } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"./button\";\n\nexport type ErrorWrapperProps = {\n  children: ReactNode;\n  onError?: (error: Error, errorInfo: ErrorInfo) => void;\n};\n\ntype ErrorWrapperState = {\n  error: Error | null;\n  componentStack: string | null;\n};\n\nexport class ErrorWrapper extends Component<\n  ErrorWrapperProps,\n  ErrorWrapperState\n> {\n  override state: ErrorWrapperState = {\n    error: null,\n    componentStack: null,\n  };\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n    this.setState({ componentStack: errorInfo.componentStack ?? null });\n    this.props.onError?.(error, errorInfo);\n  }\n\n  override render() {\n    if (this.state.error) {\n      return (\n        <ErrorFallback\n          error={this.state.error}\n          componentStack={this.state.componentStack}\n        />\n      );\n    }\n    return this.props.children;\n  }\n}\n\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nfunction copyStatusMessage(copyState: CopyState): string {\n  if (copyState === \"copied\") return \"Error details copied to clipboard.\";\n  if (copyState === \"failed\") {\n    return \"Clipboard access failed. Expand the error details to copy individual values.\";\n  }\n  return \"\";\n}\n\nfunction ErrorFallback({\n  error,\n  componentStack,\n}: {\n  error: Error;\n  componentStack: string | null;\n}) {\n  const [copyState, setCopyState] = useState<CopyState>(\"idle\");\n  const diagnostics = useMemo(\n    () => errorDiagnostics(error, componentStack),\n    [componentStack, error],\n  );\n\n  const copyDetails = async () => {\n    if (!navigator.clipboard?.writeText) {\n      setCopyState(\"failed\");\n      return;\n    }\n    try {\n      await navigator.clipboard.writeText(errorReport(error, componentStack));\n      setCopyState(\"copied\");\n    } catch {\n      setCopyState(\"failed\");\n    }\n  };\n\n  return (\n    <main\n      data-slot=\"error-wrapper\"\n      role=\"alert\"\n      aria-labelledby=\"error-wrapper-title\"\n      className=\"flex min-h-dvh w-full items-center justify-center bg-background p-density-6 text-foreground\"\n    >\n      <div className=\"w-full max-w-3xl\">\n        <div className=\"mb-density-4 flex items-start gap-density-3\">\n          <span className=\"grid size-12 shrink-0 place-items-center rounded-full bg-destructive/10 text-destructive\">\n            <Icon icon={UiWarningTriangle} className=\"size-6\" />\n          </span>\n          <div className=\"min-w-0 flex-1\">\n            <p className=\"text-xs font-semibold uppercase tracking-wide text-destructive\">\n              Unexpected application error\n            </p>\n            <h1\n              id=\"error-wrapper-title\"\n              className=\"mt-density-1 text-2xl font-semibold tracking-tight\"\n            >\n              Something went wrong\n            </h1>\n            <p className=\"mt-density-2 break-words text-sm text-muted-foreground\">\n              {diagnostics.message}\n            </p>\n          </div>\n        </div>\n\n        <div className=\"mb-density-3 flex items-center gap-density-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            onClick={() => void copyDetails()}\n          >\n            <Icon icon={copyState === \"copied\" ? UiCheck : UiCopy} />\n            {copyState === \"copied\" ? \"Copied\" : \"Copy error details\"}\n          </Button>\n          <span\n            aria-live=\"polite\"\n            className={cn(\n              \"text-xs\",\n              copyState === \"failed\"\n                ? \"text-destructive\"\n                : \"text-muted-foreground\",\n            )}\n          >\n            {copyStatusMessage(copyState)}\n          </span>\n        </div>\n\n        <ErrorDetails diagnostics={diagnostics} />\n      </div>\n    </main>\n  );\n}\n\nfunction errorDiagnostics(\n  error: Error,\n  componentStack: string | null,\n): ErrorDiagnostics {\n  const diagnostics = normalizeErrorDiagnostics(\n    error,\n    \"An unexpected error was thrown without a message.\",\n  );\n  if (!diagnostics) {\n    throw new Error(\"ErrorWrapper could not normalize the captured error\");\n  }\n\n  const cause =\n    error.cause === undefined\n      ? []\n      : [[\"cause\", String(error.cause)] as [string, string]];\n  const reactStack = componentStack?.trim();\n  return {\n    ...diagnostics,\n    context: [...diagnostics.context, ...cause],\n    ...(reactStack\n      ? {\n          stacktrace: [\n            diagnostics.stacktrace,\n            \"React component stack:\",\n            reactStack,\n          ]\n            .filter(Boolean)\n            .join(\"\\n\\n\"),\n        }\n      : {}),\n  };\n}\n\nfunction errorReport(error: Error, componentStack: string | null) {\n  const lines = [\n    `Error: ${error.message || \"An unexpected error was thrown without a message.\"}`,\n  ];\n  if (error.name !== \"Error\") lines.push(`Type: ${error.name}`);\n  if (error.cause !== undefined) lines.push(`Cause: ${String(error.cause)}`);\n  if (typeof window !== \"undefined\")\n    lines.push(`Page: ${window.location.href}`);\n  if (typeof navigator !== \"undefined\" && navigator.userAgent) {\n    lines.push(`User agent: ${navigator.userAgent}`);\n  }\n  lines.push(`Time: ${new Date().toISOString()}`);\n  if (error.stack) lines.push(\"\", \"Stack trace:\", error.stack);\n  if (componentStack?.trim()) {\n    lines.push(\"\", \"React component stack:\", componentStack.trim());\n  }\n  return lines.join(\"\\n\");\n}\n"],"names":[],"mappings":"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"}

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,9 +229,29 @@ 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 === "date-range" && /* @__PURE__ */ jsxRuntime.jsx(
+      FilterBarRangePanel,
+      {
+        kind: filter.timeEnabled === false ? "date" : "time",
+        label: filter.label,
+        ...dateRangeFilterProps(filter)
+      }
+    ),
     filter.kind === "text" && /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow: true })
   ] });
 }
+function dateRangeFilterProps(filter) {
+  const {
+    key: _key,
+    kind: _kind,
+    label: _label,
+    icon: _icon,
+    description: _description,
+    ...range
+  } = filter;
+  return range;
+}
 function renderFilterField(filter, grow) {
   if (filter.kind === "lookup") {
     return /* @__PURE__ */ jsxRuntime.jsx(LookupFilterField, { filter, grow });
@@ -255,6 +277,19 @@ function renderFilterField(filter, grow) {
   if (filter.kind === "boolean") {
     return /* @__PURE__ */ jsxRuntime.jsx(BooleanFilterField, { filter });
   }
+  if (filter.kind === "tristate") {
+    return /* @__PURE__ */ jsxRuntime.jsx(TriStateFilterField, { filter });
+  }
+  if (filter.kind === "date-range") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RangeControlButton,
+      {
+        kind: filter.timeEnabled === false ? "date" : "time",
+        label: filter.label,
+        ...dateRangeFilterProps(filter)
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(TextFilterField, { filter, grow });
 }
 function OverflowFiltersMenu({
@@ -293,7 +328,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
@@ -444,6 +481,16 @@ function OverflowFiltersMenu({
   );
 }
 function FilterBarKeyValueControl({ filter }) {
+  if (filter.kind === "date-range") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RangeControlButton,
+      {
+        kind: filter.timeEnabled === false ? "date" : "time",
+        label: filter.label,
+        ...dateRangeFilterProps(filter)
+      }
+    );
+  }
   if (filter.kind === "text") {
     return /* @__PURE__ */ jsxRuntime.jsx(TextFilterValueControl, { filter });
   }
@@ -468,6 +515,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 +654,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,
@@ -631,7 +695,8 @@ function FilterBarRangePanel({
   timeZones,
   fromPlaceholder,
   toPlaceholder,
-  emptyLabel
+  emptyLabel,
+  disabled
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-72 p-3 text-popover-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(
     TimeRange.TimeRange,
@@ -642,6 +707,7 @@ function FilterBarRangePanel({
       from,
       to,
       onApply,
+      ...disabled !== void 0 ? { disabled } : {},
       ...presets ? { presets } : {},
       ...timeEnabled !== void 0 ? { timeEnabled } : {},
       ...timeZone ? { timeZone } : {},
@@ -669,6 +735,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",
@@ -1526,7 +1618,8 @@ function RangeControlButton({
   fromPlaceholder,
   toPlaceholder,
   emptyLabel,
-  className
+  className,
+  disabled
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     TimeRange.TimeRange,
@@ -1536,6 +1629,7 @@ function RangeControlButton({
       from,
       to,
       onApply,
+      ...disabled !== void 0 ? { disabled } : {},
       ...presets ? { presets } : {},
       ...timeEnabled !== void 0 ? { timeEnabled } : {},
       ...timeZone ? { timeZone } : {},
@@ -1711,10 +1805,15 @@ function formatRawNumber(value) {
 function createFilterValueMap(filters) {
   return Object.fromEntries(filters.map((filter) => [filter.key, filterBarFilterValue(filter)]));
 }
+function isStageableFilter(filter) {
+  return filter.kind !== "date-range";
+}
 function filterBarFilterValue(filter) {
+  if (!isStageableFilter(filter)) return void 0;
   return filter.value;
 }
 function filterWithStagedValue(filter, value, onChange) {
+  if (!isStageableFilter(filter)) return filter;
   if (filter.kind === "text") {
     return {
       ...filter,
@@ -1771,6 +1870,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,12 +1885,14 @@ function filterWithStagedValue(filter, value, onChange) {
 }
 function applyStagedFilterValues(filters, stagedValues) {
   for (const filter of filters) {
-    const next = stagedValues[filter.key] ?? filterBarFilterValue(filter);
+    if (!isStageableFilter(filter)) continue;
+    const next = Object.hasOwn(stagedValues, filter.key) ? stagedValues[filter.key] : filterBarFilterValue(filter);
     if (sameFilterBarValue(filterBarFilterValue(filter), next)) continue;
     applyFilterBarValue(filter, next);
   }
 }
 function applyFilterBarValue(filter, value) {
+  if (!isStageableFilter(filter)) return;
   if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
     filter.onChange(String(value ?? ""));
     return;
@@ -1801,6 +1909,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) {