@undevy-org/tablewright 0.1.0

package/dist/es/components/data-table/ColumnFilterPopover.js

@@ -0,0 +1,548 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Input } from "../ui/input.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
+import { FilterChip } from "./FilterChip.js";
+import { FilterPopoverFooter } from "./FilterPopoverFooter.js";
+const DEFAULT_LABELS = {
+  searchPlaceholder: "Search...",
+  addValuePlaceholder: "Add value...",
+  noData: "no data",
+  statsAllPrefix: "All:",
+  statsFilteredPrefix: "Filtered:",
+  statsTextAllPrefix: "e.g. All:",
+  statsTextFilteredPrefix: "e.g. Filt:",
+  chipFrom: "from",
+  chipTo: "to",
+  chipMin: "min",
+  chipMax: "max",
+  valuesCount: (n) => `${n} values`,
+  selectedCount: (n) => `${n} selected`
+};
+function formatChipDate(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return d.toLocaleDateString(void 0, { day: "2-digit", month: "short" });
+}
+function isEmptyValue(value, type) {
+  if (type === "text") return !Array.isArray(value) || value.length === 0;
+  if (type === "enum") return !Array.isArray(value) || value.length === 0;
+  if (type === "date")
+    return typeof value !== "object" || Array.isArray(value) || !value.from && !value.to;
+  if (type === "number-range")
+    return typeof value !== "object" || Array.isArray(value) || value.from === void 0 && value.to === void 0;
+  return true;
+}
+function ColumnFilterPopover({
+  config,
+  filter,
+  onChange,
+  onRemove,
+  initialOpen = false,
+  chipClassName,
+  stats,
+  requestOpen,
+  onRequestOpenHandled
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const onRequestOpenHandledRef = useRef(onRequestOpenHandled);
+  useEffect(() => {
+    onRequestOpenHandledRef.current = onRequestOpenHandled;
+  });
+  useEffect(() => {
+    if (!initialOpen) return;
+    const id = setTimeout(() => setIsOpen(true), 0);
+    return () => clearTimeout(id);
+  }, []);
+  useEffect(() => {
+    if (!requestOpen) return;
+    const id = setTimeout(() => {
+      setIsOpen(true);
+      onRequestOpenHandledRef.current?.();
+    }, 0);
+    return () => clearTimeout(id);
+  }, [requestOpen]);
+  const [draftTags, setDraftTags] = useState(
+    Array.isArray(filter.value) && config.type === "text" ? filter.value : []
+  );
+  const [draftInput, setDraftInput] = useState("");
+  const [draftEnum, setDraftEnum] = useState(
+    Array.isArray(filter.value) ? filter.value : []
+  );
+  const [draftDate, setDraftDate] = useState(
+    typeof filter.value === "object" && !Array.isArray(filter.value) ? {
+      from: String(filter.value.from ?? ""),
+      to: String(filter.value.to ?? "")
+    } : { from: "", to: "" }
+  );
+  const [draftNumberFrom, setDraftNumberFrom] = useState(
+    typeof filter.value === "object" && !Array.isArray(filter.value) && typeof filter.value.from === "number" ? String(filter.value.from) : ""
+  );
+  const [draftNumberTo, setDraftNumberTo] = useState(
+    typeof filter.value === "object" && !Array.isArray(filter.value) && typeof filter.value.to === "number" ? String(filter.value.to) : ""
+  );
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) {
+      if (isEmptyValue(filter.value, config.type)) {
+        onRemove();
+        return;
+      }
+      setDraftTags(Array.isArray(filter.value) && config.type === "text" ? filter.value : []);
+      setDraftInput("");
+      setDraftEnum(Array.isArray(filter.value) ? filter.value : []);
+      setDraftDate(
+        typeof filter.value === "object" && !Array.isArray(filter.value) ? {
+          from: String(filter.value.from ?? ""),
+          to: String(filter.value.to ?? "")
+        } : { from: "", to: "" }
+      );
+      if (typeof filter.value === "object" && !Array.isArray(filter.value)) {
+        const numVal = filter.value;
+        setDraftNumberFrom(typeof numVal.from === "number" ? String(numVal.from) : "");
+        setDraftNumberTo(typeof numVal.to === "number" ? String(numVal.to) : "");
+      } else {
+        setDraftNumberFrom("");
+        setDraftNumberTo("");
+      }
+    }
+    setIsOpen(nextOpen);
+  };
+  const handleApply = () => {
+    let value;
+    switch (config.type) {
+      case "text": {
+        const trimmed = draftInput.trim();
+        const all = trimmed.length > 0 && !draftTags.includes(trimmed) ? [...draftTags, trimmed] : [...draftTags];
+        value = all;
+        break;
+      }
+      case "enum":
+        value = draftEnum;
+        break;
+      case "date":
+        value = draftDate;
+        break;
+      case "number-range": {
+        const from = draftNumberFrom.trim() !== "" ? Number(draftNumberFrom) : void 0;
+        const to = draftNumberTo.trim() !== "" ? Number(draftNumberTo) : void 0;
+        value = { from, to };
+        break;
+      }
+      default:
+        return;
+    }
+    if (isEmptyValue(value, config.type)) {
+      onRemove();
+    } else {
+      onChange(value);
+    }
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    setDraftTags([]);
+    setDraftInput("");
+    setDraftEnum([]);
+    setDraftDate({ from: "", to: "" });
+    setDraftNumberFrom("");
+    setDraftNumberTo("");
+  };
+  const renderContent = () => {
+    const allStats = stats?.all ?? null;
+    const filteredStats = stats?.filtered ?? null;
+    const chipCls = (active) => active ? "rounded border border-[var(--tag-blue-text)]/20 bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] cursor-pointer transition-colors" : "rounded border border-[var(--border-subtle)] bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-primary)] hover:bg-[var(--bg-hover)] cursor-pointer transition-colors";
+    const truncate = (s, max = 20) => s.length > max ? s.slice(0, max) + "…" : s;
+    switch (config.type) {
+      case "text": {
+        const inTagsCls = "rounded border border-[var(--tag-blue-text)]/20 bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] opacity-60 cursor-pointer transition-colors";
+        const toggleTag = (s) => {
+          setDraftTags((prev) => prev.includes(s) ? prev.filter((t) => t !== s) : [...prev, s]);
+        };
+        const addTag = (raw) => {
+          const trimmed = raw.trim();
+          if (trimmed.length === 0 || draftTags.includes(trimmed)) return false;
+          setDraftTags((prev) => [...prev, trimmed]);
+          setDraftInput("");
+          return true;
+        };
+        const handleTextKeyDown = (e) => {
+          const isModEnter = e.key === "Enter" && (e.metaKey || e.ctrlKey);
+          if (isModEnter) {
+            e.preventDefault();
+            handleApply();
+            return;
+          }
+          if (e.key === "Enter") {
+            e.preventDefault();
+            if (draftInput.trim().length === 0) {
+              handleApply();
+            } else if (draftTags.length === 0) {
+              addTag(draftInput);
+              handleApply();
+            } else {
+              addTag(draftInput);
+            }
+            return;
+          }
+          if (e.key === "Backspace" && draftInput.length === 0 && draftTags.length > 0) {
+            setDraftTags((prev) => prev.slice(0, -1));
+          }
+        };
+        const renderTextRow = (label, textStats) => {
+          if (!textStats || textStats.type !== "text") {
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: DEFAULT_LABELS.noData })
+            ] });
+          }
+          const { samples, totalUnique } = textStats;
+          const remaining = totalUnique - samples.length;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+            samples.map((s) => {
+              const isInTags = draftTags.includes(s);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: isInTags ? inTagsCls : chipCls(false),
+                  onClick: () => toggleTag(s),
+                  children: truncate(s)
+                },
+                s
+              );
+            }),
+            remaining > 0 && /* @__PURE__ */ jsxs("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[9px] text-[var(--text-tertiary)]", children: [
+              "+",
+              remaining
+            ] })
+          ] });
+        };
+        const allText = allStats?.type === "text" ? allStats : null;
+        const filtText = filteredStats?.type === "text" ? filteredStats : null;
+        return /* @__PURE__ */ jsxs("div", { className: "p-3 w-64 space-y-3", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: [
+            "Contains",
+            draftTags.length >= 2 && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] font-semibold text-[var(--tag-blue-text)] bg-[var(--tag-blue-bg)] rounded px-1 py-0.5 uppercase", children: "OR" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2 py-1.5 focus-within:border-[var(--border-focus)]", children: [
+            draftTags.map((tag) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-0.5 rounded bg-[var(--tag-blue-bg)] px-1.5 py-0.5 text-[11px] text-[var(--tag-blue-text)] max-w-[140px]",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: tag }),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ml-0.5 text-[var(--tag-blue-text)]/60 hover:text-[var(--tag-blue-text)] text-xs leading-none",
+                      onClick: () => setDraftTags((prev) => prev.filter((t) => t !== tag)),
+                      children: "✕"
+                    }
+                  )
+                ]
+              },
+              tag
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoFocus: true,
+                className: "flex-1 min-w-[60px] bg-transparent text-sm text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]",
+                placeholder: draftTags.length === 0 ? DEFAULT_LABELS.searchPlaceholder : DEFAULT_LABELS.addValuePlaceholder,
+                value: draftInput,
+                onChange: (e) => setDraftInput(e.target.value),
+                onKeyDown: handleTextKeyDown
+              }
+            )
+          ] }),
+          allText && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-2 space-y-2", children: [
+            renderTextRow(DEFAULT_LABELS.statsTextAllPrefix, allText),
+            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderTextRow(DEFAULT_LABELS.statsTextFilteredPrefix, filtText) })
+          ] })
+        ] });
+      }
+      case "enum": {
+        const enumAllStats = allStats?.type === "enum" ? allStats : null;
+        const enumFiltStats = filteredStats?.type === "enum" ? filteredStats : null;
+        return /* @__PURE__ */ jsx("div", { className: "p-2 w-56 space-y-1", children: config.options?.map((option) => {
+          const allCount = enumAllStats?.counts[option.value];
+          const filtCount = enumFiltStats?.counts[option.value];
+          return /* @__PURE__ */ jsxs(
+            "label",
+            {
+              className: "flex items-center gap-2 px-2 py-1.5 hover:bg-[var(--bg-secondary)] rounded-md cursor-pointer transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: draftEnum.includes(option.value),
+                    onCheckedChange: (checked) => {
+                      setDraftEnum(
+                        (prev) => checked ? [...prev, option.value] : prev.filter((v) => v !== option.value)
+                      );
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm text-[var(--text-primary)]", children: option.label }),
+                allCount !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--text-tertiary)] tabular-nums", children: filtCount !== void 0 ? `${filtCount} / ${allCount}` : allCount })
+              ]
+            },
+            option.value
+          );
+        }) });
+      }
+      case "date": {
+        const renderDateRow = (label, dateStats) => {
+          if (!dateStats || dateStats.type !== "date") {
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: DEFAULT_LABELS.noData })
+            ] });
+          }
+          const { min, max } = dateStats;
+          if (min === max) {
+            const isActive = draftDate.from === min && draftDate.to === min;
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: chipCls(isActive),
+                  onClick: () => setDraftDate({ from: min, to: min }),
+                  children: formatChipDate(min)
+                }
+              )
+            ] });
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: chipCls(draftDate.from === min),
+                onClick: () => setDraftDate((prev) => ({ ...prev, from: min })),
+                children: [
+                  DEFAULT_LABELS.chipFrom,
+                  " ",
+                  formatChipDate(min)
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: chipCls(draftDate.to === max),
+                onClick: () => setDraftDate((prev) => ({ ...prev, to: max })),
+                children: [
+                  DEFAULT_LABELS.chipTo,
+                  " ",
+                  formatChipDate(max)
+                ]
+              }
+            )
+          ] });
+        };
+        const allDate = allStats?.type === "date" ? allStats : null;
+        const filtDate = filteredStats?.type === "date" ? filteredStats : null;
+        return /* @__PURE__ */ jsxs("div", { className: "p-3 w-64 space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: DEFAULT_LABELS.chipFrom }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                value: draftDate.from,
+                onChange: (e) => setDraftDate((prev) => ({ ...prev, from: e.target.value }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: DEFAULT_LABELS.chipTo }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                value: draftDate.to,
+                onChange: (e) => setDraftDate((prev) => ({ ...prev, to: e.target.value }))
+              }
+            )
+          ] }),
+          allDate && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-2 space-y-2", children: [
+            renderDateRow(DEFAULT_LABELS.statsAllPrefix, allDate),
+            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderDateRow(DEFAULT_LABELS.statsFilteredPrefix, filtDate) })
+          ] })
+        ] });
+      }
+      case "number-range": {
+        const renderNumRow = (label, numStats) => {
+          if (!numStats || numStats.type !== "number-range") {
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "rounded bg-[var(--bg-secondary)] px-1.5 py-0.5 text-[11px] text-[var(--text-tertiary)] italic", children: DEFAULT_LABELS.noData })
+            ] });
+          }
+          const { min, max } = numStats;
+          if (min === max) {
+            const isActive = draftNumberFrom === String(min) && draftNumberTo === String(min);
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: chipCls(isActive),
+                  onClick: () => {
+                    setDraftNumberFrom(String(min));
+                    setDraftNumberTo(String(min));
+                  },
+                  children: min
+                }
+              )
+            ] });
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--text-tertiary)] whitespace-nowrap min-w-[54px]", children: label }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: chipCls(draftNumberFrom === String(min)),
+                onClick: () => setDraftNumberFrom(String(min)),
+                children: [
+                  DEFAULT_LABELS.chipMin,
+                  " ",
+                  min
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: chipCls(draftNumberTo === String(max)),
+                onClick: () => setDraftNumberTo(String(max)),
+                children: [
+                  DEFAULT_LABELS.chipMax,
+                  " ",
+                  max
+                ]
+              }
+            )
+          ] });
+        };
+        const allNum = allStats?.type === "number-range" ? allStats : null;
+        const filtNum = filteredStats?.type === "number-range" ? filteredStats : null;
+        return /* @__PURE__ */ jsxs("div", { className: "p-3 w-64 space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: DEFAULT_LABELS.chipMin }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                autoFocus: true,
+                placeholder: allNum ? String(allNum.min) : "0",
+                value: draftNumberFrom,
+                onChange: (e) => setDraftNumberFrom(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleApply();
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider block", children: DEFAULT_LABELS.chipMax }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                placeholder: allNum ? String(allNum.max) : "0",
+                value: draftNumberTo,
+                onChange: (e) => setDraftNumberTo(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    handleApply();
+                  }
+                }
+              }
+            )
+          ] }),
+          allNum && /* @__PURE__ */ jsxs("div", { className: "border-t border-[var(--border-subtle)] pt-2 space-y-2", children: [
+            renderNumRow(DEFAULT_LABELS.statsAllPrefix, allNum),
+            filteredStats !== null && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] pt-1.5", children: renderNumRow(DEFAULT_LABELS.statsFilteredPrefix, filtNum) })
+          ] })
+        ] });
+      }
+      default:
+        return null;
+    }
+  };
+  const getDisplayValue = () => {
+    const { value } = filter;
+    if (isEmptyValue(value, config.type)) return void 0;
+    if (config.type === "text" && Array.isArray(value)) {
+      if (value.length === 1) {
+        return value[0].length > 20 ? `${value[0].slice(0, 20)}…` : value[0];
+      }
+      if (value.length === 2) {
+        const joined = value.join(", ");
+        return joined.length > 24 ? `${value.length} values` : joined;
+      }
+      return DEFAULT_LABELS.valuesCount(value.length);
+    }
+    if (config.type === "enum" && Array.isArray(value)) {
+      if (value.length === 1) {
+        return config.options?.find((o) => o.value === value[0])?.label ?? value[0];
+      }
+      return DEFAULT_LABELS.selectedCount(value.length);
+    }
+    if (config.type === "date" && typeof value === "object" && !Array.isArray(value)) {
+      const { from, to } = value;
+      if (from && to) return `${from} — ${to}`;
+      if (from) return `${DEFAULT_LABELS.chipFrom} ${from}`;
+      if (to) return `${DEFAULT_LABELS.chipTo} ${to}`;
+    }
+    if (config.type === "number-range" && typeof value === "object" && !Array.isArray(value)) {
+      const { from, to } = value;
+      if (from !== void 0 && to !== void 0) return `${from}–${to}`;
+      if (from !== void 0) return `≥${from}`;
+      if (to !== void 0) return `≤${to}`;
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      FilterChip,
+      {
+        label: config.label,
+        value: getDisplayValue(),
+        onRemove,
+        active: !!getDisplayValue(),
+        className: chipClassName
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        collisionPadding: 8,
+        className: "w-auto p-0 [box-shadow:var(--shadow-menu)] border-[var(--border-subtle)] flex flex-col max-h-[min(var(--radix-popover-content-available-height),520px)] overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain", children: renderContent() }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-[var(--bg-surface)]", children: /* @__PURE__ */ jsx(FilterPopoverFooter, { onApply: handleApply, onClear: handleClear }) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ColumnFilterPopover
+};