@upbound/monarch-blocks 0.4.0 → 0.5.0

package/dist/data-table.js

@@ -214,6 +214,14 @@ function isFilterOnlyColumn(column) {
   var _a;
   return ((_a = column.columnDef.meta) == null ? void 0 : _a.filterOnly) === true;
 }
+function hasFilterableColumns(columns) {
+  return columns.some(
+    (column) => {
+      var _a;
+      return !isFilterOnlyColumn(column) && column.getCanFilter() && !!((_a = column.columnDef.meta) == null ? void 0 : _a.filter);
+    }
+  );
+}
 function getTableState({
   error,
   loading,
@@ -447,6 +455,7 @@ function ColumnOptions({
 import { Button as Button2 } from "@upbound/monarch-core";
 import { DropdownMenu as DropdownMenu2, DropdownMenuContent as DropdownMenuContent2, DropdownMenuItem as DropdownMenuItem2, DropdownMenuTrigger as DropdownMenuTrigger2 } from "@upbound/monarch-core";
 import { Icon as Icon2 } from "@upbound/monarch-core";
+import { Link } from "@upbound/monarch-core";
 
 // src/relative-time.tsx
 import * as React2 from "react";
@@ -662,7 +671,7 @@ function getExpandColumnDefinition(options) {
 function DataTableValueCell({ content, title, className, href, onClick }) {
   const baseClassName = cn("text-body truncate", className);
   if (href) {
-    return /* @__PURE__ */ jsx4("p", { className: baseClassName, children: /* @__PURE__ */ jsx4("a", { href, title, className: "underline hover:no-underline", onClick, children: content }) });
+    return /* @__PURE__ */ jsx4("p", { className: baseClassName, children: /* @__PURE__ */ jsx4(Link, { href, title, onClick, children: content }) });
   }
   if (title) {
     return /* @__PURE__ */ jsxs3(Tooltip, { children: [
@@ -689,7 +698,7 @@ function TimestampCell({ timestamp }) {
 }
 
 // src/data-table/data-table.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import {
   getCoreRowModel,
   getExpandedRowModel,
@@ -1718,6 +1727,7 @@ function CelFilterBar({
     (_a = onCompileResultChangeRef.current) == null ? void 0 : _a.call(onCompileResultChangeRef, __spreadProps(__spreadValues({}, displayResult), { isEmitReady }));
   }, [displayResult, isEmitReady]);
   const conditions = tree.root.children.filter(isCelFilterCondition);
+  const containerRef = React3.useRef(null);
   function handleAddFilter(columnId) {
     const condition = createDefaultCondition({ schema, columnId });
     onChange(appendCondition(tree, condition));
@@ -1732,8 +1742,8 @@ function CelFilterBar({
     onChange({ root: __spreadProps(__spreadValues({}, tree.root), { children: [] }) });
     editor.clearSuppress();
   }
-  return /* @__PURE__ */ jsxs4("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), children: [
-    /* @__PURE__ */ jsx5(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter }),
+  return /* @__PURE__ */ jsxs4("div", { "data-slot": "cel-filter-bar", className: cn("flex flex-wrap items-center gap-2", className), ref: containerRef, children: [
+    /* @__PURE__ */ jsx5(CelAddFilterButton, { schema, conditions, onSelect: handleAddFilter, container: containerRef }),
     conditions.map((condition) => {
       const columnDef = resolveColumnDefinition(condition, schema);
       if (!columnDef) return null;
@@ -1748,7 +1758,8 @@ function CelFilterBar({
           controller: editor.getController(condition.id),
           issues: displayResult.issues.filter((issue) => issue.nodeId === condition.id),
           onRemove: () => handleRemove(condition.id),
-          onRestrictedOptionSelect
+          onRestrictedOptionSelect,
+          container: containerRef
         },
         condition.id
       );
@@ -1759,7 +1770,8 @@ function CelFilterBar({
 function CelAddFilterButton({
   schema,
   conditions,
-  onSelect
+  onSelect,
+  container
 }) {
   var _a, _b;
   const usedSingleInstanceColumnIds = new Set(
@@ -1790,7 +1802,7 @@ function CelAddFilterButton({
           /* @__PURE__ */ jsx5(Icon3, { name: "plus", "data-icon": "inline-start" }),
           "Add filter"
         ] }),
-        /* @__PURE__ */ jsxs4(ComboboxContent, { align: "start", className: "w-64", children: [
+        /* @__PURE__ */ jsxs4(ComboboxContent, { container, align: "start", className: "w-64", children: [
           /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: "Search filters\u2026" }),
           /* @__PURE__ */ jsx5(ComboboxEmpty, { children: "No filters found." }),
           /* @__PURE__ */ jsx5(ComboboxList, { children: (group) => /* @__PURE__ */ jsxs4(ComboboxGroup, { items: group.items, children: [
@@ -1854,7 +1866,8 @@ function CelFilterPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
   const shape = (_a = resolveFilterShape(condition, schema)) != null ? _a : columnDef.filterType;
@@ -1871,7 +1884,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1886,7 +1900,8 @@ function CelFilterPill({
         controller,
         issues,
         onRemove,
-        onRestrictedOptionSelect
+        onRestrictedOptionSelect,
+        container
       }
     );
   }
@@ -1996,7 +2011,8 @@ function CelCheckboxComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a;
   const options = (_a = columnDef.options) != null ? _a : [];
@@ -2055,7 +2071,7 @@ function CelCheckboxComboboxPill({
           ),
           /* @__PURE__ */ jsx5(Button3, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark" }) })
         ] }),
-        /* @__PURE__ */ jsxs4(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+        /* @__PURE__ */ jsxs4(ComboboxContent, { container, className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
           /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
           selected.length > 0 && /* @__PURE__ */ jsxs4(Fragment3, { children: [
             /* @__PURE__ */ jsxs4(ComboboxSelectedChips, { children: [
@@ -2084,7 +2100,8 @@ function CelRadioComboboxPill({
   controller,
   issues,
   onRemove,
-  onRestrictedOptionSelect
+  onRestrictedOptionSelect,
+  container
 }) {
   var _a, _b;
   const options = (_a = columnDef.options) != null ? _a : [];
@@ -2139,7 +2156,7 @@ function CelRadioComboboxPill({
           ),
           /* @__PURE__ */ jsx5(Button3, { variant: "outline", size: "icon", "aria-label": `Remove ${columnDef.title} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx5(Icon3, { name: "xmark" }) })
         ] }),
-        /* @__PURE__ */ jsxs4(ComboboxContent, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
+        /* @__PURE__ */ jsxs4(ComboboxContent, { container, className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
           /* @__PURE__ */ jsx5(ComboboxInput, { showTrigger: false, placeholder: `Search ${columnDef.title.toLowerCase()}\u2026` }),
           /* @__PURE__ */ jsxs4(ComboboxEmpty, { children: [
             "No ",
@@ -2341,7 +2358,7 @@ function CelDateValueEditor({
 }
 
 // src/data-table/data-table.tsx
-import { Icon as Icon8 } from "@upbound/monarch-core";
+import { Icon as Icon9 } from "@upbound/monarch-core";
 import { InputGroup as InputGroup2, InputGroupAddon as InputGroupAddon2, InputGroupInput as InputGroupInput2 } from "@upbound/monarch-core";
 
 // src/lib/data-table/contextual-filters.ts
@@ -2939,6 +2956,18 @@ function useGridLayout({
   };
 }
 
+// src/hooks/use-filter-visibility.ts
+import * as React5 from "react";
+function useFilterVisibility(filterVisibility) {
+  var _a, _b, _c;
+  const config = typeof filterVisibility === "object" ? filterVisibility : void 0;
+  const [innerVisible, setInnerVisible] = React5.useState((_a = config == null ? void 0 : config.defaultVisible) != null ? _a : false);
+  const showFilterToggle = filterVisibility !== false;
+  const filterRowVisible = (_b = config == null ? void 0 : config.visible) != null ? _b : innerVisible;
+  const setFilterRowVisible = (_c = config == null ? void 0 : config.onVisibleChange) != null ? _c : setInnerVisible;
+  return { showFilterToggle, filterRowVisible, setFilterRowVisible };
+}
+
 // src/data-table/empty-view.tsx
 import { Alert, AlertDescription } from "@upbound/monarch-core";
 import { Button as Button4 } from "@upbound/monarch-core";
@@ -2991,9 +3020,34 @@ function DataTableEmptyView({
   ] }) });
 }
 
+// src/data-table/filter-toggle.tsx
+import { Icon as Icon5, Toggle } from "@upbound/monarch-core";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function FilterToggle({ pressed, onPressedChange, count }) {
+  return /* @__PURE__ */ jsxs6(
+    Toggle,
+    {
+      variant: "outline",
+      pressed,
+      onPressedChange,
+      "aria-label": "Toggle filters",
+      className: "shrink-0 gap-1.5",
+      children: [
+        /* @__PURE__ */ jsx7(Icon5, { name: "filter", "data-icon": "inline-start" }),
+        "Filter",
+        !!count && /* @__PURE__ */ jsxs6("span", { className: "tabular-nums", children: [
+          "(",
+          count,
+          ")"
+        ] })
+      ]
+    }
+  );
+}
+
 // src/data-table/pagination.tsx
 import { Button as Button5 } from "@upbound/monarch-core";
-import { Icon as Icon5 } from "@upbound/monarch-core";
+import { Icon as Icon6 } from "@upbound/monarch-core";
 import { Label as Label2 } from "@upbound/monarch-core";
 import {
   Pagination,
@@ -3004,7 +3058,7 @@ import {
 } from "@upbound/monarch-core";
 import { Select as Select2, SelectContent as SelectContent2, SelectGroup as SelectGroup2, SelectItem as SelectItem2, SelectTrigger as SelectTrigger2, SelectValue as SelectValue2 } from "@upbound/monarch-core";
 import { Tooltip as Tooltip2, TooltipContent as TooltipContent2, TooltipTrigger as TooltipTrigger2 } from "@upbound/monarch-core";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var DEFAULT_PAGINATION_CONFIG = {
   summary: true,
   arrows: true,
@@ -3043,36 +3097,36 @@ function DataTablePagination({
   const currentPage = pageIndex + 1;
   const mounted = useMounted();
   const locale = mounted ? void 0 : "en-US";
-  return /* @__PURE__ */ jsxs6("div", { "data-testid": "table-footer", className: "flex items-center justify-between px-2 pt-4", children: [
-    resolved.summary ? /* @__PURE__ */ jsxs6("div", { className: "text-body text-muted-foreground", "data-testid": "table-pagination-summary", children: [
+  return /* @__PURE__ */ jsxs7("div", { "data-testid": "table-footer", className: "flex items-center justify-between px-2 pt-4", children: [
+    resolved.summary ? /* @__PURE__ */ jsxs7("div", { className: "text-body text-muted-foreground", "data-testid": "table-pagination-summary", children: [
       "Showing ",
-      /* @__PURE__ */ jsx7("span", { className: "text-foreground font-medium", children: itemStart.toLocaleString(locale) }),
+      /* @__PURE__ */ jsx8("span", { className: "text-foreground font-medium", children: itemStart.toLocaleString(locale) }),
       " to",
       " ",
-      /* @__PURE__ */ jsx7("span", { className: "text-foreground font-medium", children: itemEnd.toLocaleString(locale) }),
+      /* @__PURE__ */ jsx8("span", { className: "text-foreground font-medium", children: itemEnd.toLocaleString(locale) }),
       " of",
       " ",
-      /* @__PURE__ */ jsxs6("span", { className: "text-foreground font-medium", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "text-foreground font-medium", children: [
         rowCount.toLocaleString(locale),
         !isRowCountExact && "+"
       ] }),
       " ",
       "results",
-      !isRowCountExact && /* @__PURE__ */ jsxs6(Tooltip2, { children: [
-        /* @__PURE__ */ jsx7(TooltipTrigger2, { className: "ml-1 align-middle", children: /* @__PURE__ */ jsx7(Icon5, { name: "circle-info", size: "sm" }) }),
-        /* @__PURE__ */ jsx7(TooltipContent2, { children: "Add filters or refine your search to reduce the result set." })
+      !isRowCountExact && /* @__PURE__ */ jsxs7(Tooltip2, { children: [
+        /* @__PURE__ */ jsx8(TooltipTrigger2, { className: "ml-1 align-middle", children: /* @__PURE__ */ jsx8(Icon6, { name: "circle-info", size: "sm" }) }),
+        /* @__PURE__ */ jsx8(TooltipContent2, { children: "Add filters or refine your search to reduce the result set." })
       ] })
-    ] }) : /* @__PURE__ */ jsx7("div", {}),
-    /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-4", children: [
-      resolved.pageSizeSelector && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx7(Label2, { htmlFor: PAGE_SIZE_SELECT_ID, className: "font-semibold", children: "Rows per page" }),
-        /* @__PURE__ */ jsxs6(Select2, { value: String(effectivePageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
-          /* @__PURE__ */ jsx7(SelectTrigger2, { id: PAGE_SIZE_SELECT_ID, size: "sm", className: "w-18", "data-testid": "table-page-size-select", children: /* @__PURE__ */ jsx7(SelectValue2, {}) }),
-          /* @__PURE__ */ jsx7(SelectContent2, { align: "end", children: /* @__PURE__ */ jsx7(SelectGroup2, { children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx7(SelectItem2, { value: String(option), children: option }, option)) }) })
+    ] }) : /* @__PURE__ */ jsx8("div", {}),
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-4", children: [
+      resolved.pageSizeSelector && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(Label2, { htmlFor: PAGE_SIZE_SELECT_ID, className: "font-semibold", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs7(Select2, { value: String(effectivePageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
+          /* @__PURE__ */ jsx8(SelectTrigger2, { id: PAGE_SIZE_SELECT_ID, size: "sm", className: "w-18", "data-testid": "table-page-size-select", children: /* @__PURE__ */ jsx8(SelectValue2, {}) }),
+          /* @__PURE__ */ jsx8(SelectContent2, { align: "end", children: /* @__PURE__ */ jsx8(SelectGroup2, { children: normalizedPageSizeOptions.map((option) => /* @__PURE__ */ jsx8(SelectItem2, { value: String(option), children: option }, option)) }) })
         ] })
       ] }),
-      pageCount > 1 && (resolved.arrows || resolved.numbers) && /* @__PURE__ */ jsx7(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs6(PaginationContent, { children: [
-        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+      pageCount > 1 && (resolved.arrows || resolved.numbers) && /* @__PURE__ */ jsx8(Pagination, { className: "mx-0 w-auto justify-end", children: /* @__PURE__ */ jsxs7(PaginationContent, { children: [
+        resolved.arrows && /* @__PURE__ */ jsx8(PaginationItem, { children: /* @__PURE__ */ jsx8(
           Button5,
           {
             variant: "outline",
@@ -3080,10 +3134,10 @@ function DataTablePagination({
             "aria-label": "Go to first page",
             disabled: currentPage <= 1,
             onClick: () => onPageChange(1),
-            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevrons-left", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx8(Icon6, { name: "chevrons-left", className: "cn-rtl-flip" })
           }
         ) }),
-        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+        resolved.arrows && /* @__PURE__ */ jsx8(PaginationItem, { children: /* @__PURE__ */ jsx8(
           Button5,
           {
             variant: "outline",
@@ -3091,11 +3145,11 @@ function DataTablePagination({
             "aria-label": "Go to previous page",
             disabled: currentPage <= 1,
             onClick: () => onPageChange(currentPage - 1),
-            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevron-left", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx8(Icon6, { name: "chevron-left", className: "cn-rtl-flip" })
           }
         ) }),
         resolved.numbers && visiblePages.map(
-          (page, index) => page === void 0 ? /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+          (page, index) => page === void 0 ? /* @__PURE__ */ jsx8(PaginationItem, { children: /* @__PURE__ */ jsx8(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx8(PaginationItem, { children: /* @__PURE__ */ jsx8(
             PaginationLink,
             {
               href: "#",
@@ -3108,7 +3162,7 @@ function DataTablePagination({
             }
           ) }, page)
         ),
-        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+        resolved.arrows && /* @__PURE__ */ jsx8(PaginationItem, { children: /* @__PURE__ */ jsx8(
           Button5,
           {
             variant: "outline",
@@ -3116,10 +3170,10 @@ function DataTablePagination({
             "aria-label": "Go to next page",
             disabled: currentPage >= pageCount,
             onClick: () => onPageChange(currentPage + 1),
-            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevron-right", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx8(Icon6, { name: "chevron-right", className: "cn-rtl-flip" })
           }
         ) }),
-        resolved.arrows && /* @__PURE__ */ jsx7(PaginationItem, { children: /* @__PURE__ */ jsx7(
+        resolved.arrows && /* @__PURE__ */ jsx8(PaginationItem, { children: /* @__PURE__ */ jsx8(
           Button5,
           {
             variant: "outline",
@@ -3127,7 +3181,7 @@ function DataTablePagination({
             "aria-label": "Go to last page",
             disabled: currentPage >= pageCount,
             onClick: () => onPageChange(pageCount),
-            children: /* @__PURE__ */ jsx7(Icon5, { name: "chevrons-right", className: "cn-rtl-flip" })
+            children: /* @__PURE__ */ jsx8(Icon6, { name: "chevrons-right", className: "cn-rtl-flip" })
           }
         ) })
       ] }) })
@@ -3136,7 +3190,7 @@ function DataTablePagination({
 }
 
 // src/data-table/table-primitives.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import {
   flexRender as flexRender2
 } from "@tanstack/react-table";
@@ -3148,7 +3202,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger as DropdownMenuTrigger3
 } from "@upbound/monarch-core";
-import { Icon as Icon6 } from "@upbound/monarch-core";
+import { Icon as Icon7 } from "@upbound/monarch-core";
 import { Skeleton } from "@upbound/monarch-core";
 import {
   Table as BaseTable,
@@ -3159,7 +3213,7 @@ import {
   TableRow as BaseTableRow
 } from "@upbound/monarch-core";
 import { Tooltip as Tooltip3, TooltipContent as TooltipContent3, TooltipTrigger as TooltipTrigger3 } from "@upbound/monarch-core";
-import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var HEADER_SURFACE_BG = "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))]";
 var TABLE_HEAD_CLASSES = "text-body-sm text-muted-foreground h-10 px-4 text-left align-middle font-medium whitespace-nowrap has-[[role=checkbox]]:pr-0";
 var TABLE_CELL_CLASSES = "px-4 py-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0";
@@ -3173,7 +3227,7 @@ function DataTableRoot({
   children
 }) {
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         ref: gridRootRef,
@@ -3184,7 +3238,7 @@ function DataTableRoot({
       }
     );
   }
-  return /* @__PURE__ */ jsx8(BaseTable, { className, style, children });
+  return /* @__PURE__ */ jsx9(BaseTable, { className, style, children });
 }
 function getColumnPinningProps(column, surface = "body") {
   const isPinned = column.getIsPinned();
@@ -3207,8 +3261,8 @@ function getColumnPinningProps(column, surface = "body") {
 }
 function DataTableSortIcon({ sortOrder }) {
   if (!sortOrder) return null;
-  return /* @__PURE__ */ jsx8(
-    Icon6,
+  return /* @__PURE__ */ jsx9(
+    Icon7,
     {
       name: sortOrder === "asc" ? "arrow-up" : "arrow-down",
       size: "xs",
@@ -3227,57 +3281,57 @@ function ColumnActionsMenuItems({
   const canResize = header.column.getCanResize();
   const canHide = header.column.getCanHide();
   const canPin = !isGrid && header.column.getCanPin();
-  return /* @__PURE__ */ jsxs7(DropdownMenuContent3, { align: "start", className: "w-45", children: [
-    canSort && /* @__PURE__ */ jsxs7(Fragment5, { children: [
-      /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(DropdownMenuContent3, { align: "start", className: "w-45", children: [
+    canSort && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      /* @__PURE__ */ jsxs8(
         DropdownMenuItem3,
         {
           disabled: header.column.getIsSorted() === "asc",
           onClick: () => header.column.toggleSorting(false),
           children: [
-            /* @__PURE__ */ jsx8(Icon6, { name: "arrow-up" }),
+            /* @__PURE__ */ jsx9(Icon7, { name: "arrow-up" }),
             "Sort ascending"
           ]
         }
       ),
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8(
         DropdownMenuItem3,
         {
           disabled: header.column.getIsSorted() === "desc",
           onClick: () => header.column.toggleSorting(true),
           children: [
-            /* @__PURE__ */ jsx8(Icon6, { name: "arrow-down" }),
+            /* @__PURE__ */ jsx9(Icon7, { name: "arrow-down" }),
             "Sort descending"
           ]
         }
       ),
-      !!header.column.getIsSorted() && /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.clearSorting(), children: [
-        /* @__PURE__ */ jsx8(Icon6, { name: "xmark" }),
+      !!header.column.getIsSorted() && /* @__PURE__ */ jsxs8(DropdownMenuItem3, { onClick: () => header.column.clearSorting(), children: [
+        /* @__PURE__ */ jsx9(Icon7, { name: "xmark" }),
         "Remove sorting"
       ] })
     ] }),
-    canResize && /* @__PURE__ */ jsxs7(Fragment5, { children: [
-      canSort && /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
-      !isGrid && /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => onAutosizeColumn(header.column.id), children: [
-        /* @__PURE__ */ jsx8(Icon6, { name: "arrows-left-right" }),
+    canResize && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      canSort && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+      !isGrid && /* @__PURE__ */ jsxs8(DropdownMenuItem3, { onClick: () => onAutosizeColumn(header.column.id), children: [
+        /* @__PURE__ */ jsx9(Icon7, { name: "arrows-left-right" }),
         "Autosize column"
       ] }),
-      /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => onAutosizeAll(), children: [
-        /* @__PURE__ */ jsx8(Icon6, { name: "table-columns" }),
+      /* @__PURE__ */ jsxs8(DropdownMenuItem3, { onClick: () => onAutosizeAll(), children: [
+        /* @__PURE__ */ jsx9(Icon7, { name: "table-columns" }),
         isGrid ? "Reset all columns" : "Autosize all columns"
       ] })
     ] }),
-    (canHide || canPin) && /* @__PURE__ */ jsxs7(Fragment5, { children: [
-      (canSort || canResize) && /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
-      canHide && /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.toggleVisibility(), children: [
-        /* @__PURE__ */ jsx8(Icon6, { name: "eye-slash" }),
+    (canHide || canPin) && /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      (canSort || canResize) && /* @__PURE__ */ jsx9(DropdownMenuSeparator, {}),
+      canHide && /* @__PURE__ */ jsxs8(DropdownMenuItem3, { onClick: () => header.column.toggleVisibility(), children: [
+        /* @__PURE__ */ jsx9(Icon7, { name: "eye-slash" }),
         "Hide column"
       ] }),
-      canPin && (header.column.getIsPinned() ? /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.pin(false), children: [
-        /* @__PURE__ */ jsx8(Icon6, { name: "thumbtack" }),
+      canPin && (header.column.getIsPinned() ? /* @__PURE__ */ jsxs8(DropdownMenuItem3, { onClick: () => header.column.pin(false), children: [
+        /* @__PURE__ */ jsx9(Icon7, { name: "thumbtack" }),
         "Unpin column"
-      ] }) : /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: () => header.column.pin("left"), children: [
-        /* @__PURE__ */ jsx8(Icon6, { name: "thumbtack" }),
+      ] }) : /* @__PURE__ */ jsxs8(DropdownMenuItem3, { onClick: () => header.column.pin("left"), children: [
+        /* @__PURE__ */ jsx9(Icon7, { name: "thumbtack" }),
         "Pin column"
       ] }))
     ] })
@@ -3297,7 +3351,7 @@ function HeaderCellContent({
   const resizeHandler = header.getResizeHandler();
   const headerTitle = typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "";
   const sorted = header.column.getIsSorted();
-  const labelButton = /* @__PURE__ */ jsxs7(
+  const labelButton = /* @__PURE__ */ jsxs8(
     "button",
     {
       type: "button",
@@ -3308,10 +3362,10 @@ function HeaderCellContent({
         shouldShowActionsMenu ? "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 cursor-pointer" : "cursor-default"
       ),
       children: [
-        /* @__PURE__ */ jsx8(DataTableSortIcon, { sortOrder: sorted }),
-        /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: flexRender2(header.column.columnDef.header, header.getContext()) }),
-        shouldShowActionsMenu && /* @__PURE__ */ jsx8(
-          Icon6,
+        /* @__PURE__ */ jsx9(DataTableSortIcon, { sortOrder: sorted }),
+        /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: flexRender2(header.column.columnDef.header, header.getContext()) }),
+        shouldShowActionsMenu && /* @__PURE__ */ jsx9(
+          Icon7,
           {
             size: "sm",
             name: "ellipsis",
@@ -3321,9 +3375,9 @@ function HeaderCellContent({
       ]
     }
   );
-  const label = shouldShowActionsMenu ? /* @__PURE__ */ jsxs7(DropdownMenu3, { children: [
-    /* @__PURE__ */ jsx8(DropdownMenuTrigger3, { asChild: true, children: labelButton }),
-    /* @__PURE__ */ jsx8(
+  const label = shouldShowActionsMenu ? /* @__PURE__ */ jsxs8(DropdownMenu3, { children: [
+    /* @__PURE__ */ jsx9(DropdownMenuTrigger3, { asChild: true, children: labelButton }),
+    /* @__PURE__ */ jsx9(
       ColumnActionsMenuItems,
       {
         header,
@@ -3333,12 +3387,12 @@ function HeaderCellContent({
       }
     )
   ] }) : labelButton;
-  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
-    /* @__PURE__ */ jsx8("div", { className: "flex min-w-0 items-center gap-1", children: /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1", children: !isActionColumn && !isGroupedColumn && (headerTitle ? /* @__PURE__ */ jsxs7(Tooltip3, { children: [
-      /* @__PURE__ */ jsx8(TooltipTrigger3, { asChild: true, children: label }),
-      /* @__PURE__ */ jsx8(TooltipContent3, { children: headerTitle })
+  return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex min-w-0 flex-1 items-center gap-1", children: /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1", children: !isActionColumn && !isGroupedColumn && (headerTitle ? /* @__PURE__ */ jsxs8(Tooltip3, { children: [
+      /* @__PURE__ */ jsx9(TooltipTrigger3, { asChild: true, children: label }),
+      /* @__PURE__ */ jsx9(TooltipContent3, { children: headerTitle })
     ] }) : label) }) }),
-    canResize && /* @__PURE__ */ jsx8(
+    canResize && /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -3354,7 +3408,7 @@ function HeaderCellContent({
   ] });
 }
 var DEFAULT_STICKY_HEADER_OFFSET_PX = 0;
-var DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX = 48;
+var DEFAULT_STICKY_HEADER_ROW_HEIGHT_PX = 40;
 function DataTableHeader({
   headerGroups,
   onAutosizeAll,
@@ -3382,7 +3436,7 @@ function DataTableHeader({
       const stickyTopPx = stickyHeader ? stickyHeaderOffset + headerGroupIndex * stickyHeaderRowHeight : void 0;
       const isPinned = !isGrid && header.column.getIsPinned();
       const pinning = isGrid ? { className: "", style: {} } : getColumnPinningProps(header.column, "header");
-      const content = /* @__PURE__ */ jsx8(
+      const content = /* @__PURE__ */ jsx9(
         HeaderCellContent,
         {
           header,
@@ -3403,11 +3457,11 @@ function DataTableHeader({
         isPinned && "z-30"
       );
       if (isGrid) {
-        return /* @__PURE__ */ jsx8(
+        return /* @__PURE__ */ jsx9(
           "div",
           {
             role: "columnheader",
-            className: cn(TABLE_HEAD_CLASSES, cellClassName, "h-auto py-1.5 whitespace-normal"),
+            className: cn(TABLE_HEAD_CLASSES, cellClassName, "flex items-center whitespace-normal"),
             style: __spreadValues({
               minWidth: header.column.columnDef.minSize
             }, stickyTopPx !== void 0 ? { top: stickyTopPx } : {}),
@@ -3416,10 +3470,10 @@ function DataTableHeader({
           header.id
         );
       }
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         BaseTableHead,
         {
-          className: cn(cellClassName, "h-auto py-1.5 whitespace-normal"),
+          className: cn(cellClassName, "whitespace-normal"),
           style: __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, pinning.style), {
             minWidth: header.column.columnDef.minSize,
             maxWidth: header.column.columnDef.maxSize
@@ -3431,19 +3485,19 @@ function DataTableHeader({
     });
   };
   if (isGrid) {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       "div",
       {
         role: "rowgroup",
         className: cn("col-span-full grid grid-cols-subgrid", HEADER_SURFACE_BG, !!stickyHeader && "sticky z-20"),
         style: stickyHeader ? { top: stickyHeaderOffset } : void 0,
-        children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx8("div", { role: "row", className: "col-span-full grid grid-cols-subgrid border-b", children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id))
+        children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx9("div", { role: "row", className: "col-span-full grid grid-cols-subgrid border-b", children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id))
       }
     );
   }
-  return /* @__PURE__ */ jsx8(BaseTableHeader, { children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx8(BaseTableRow, { children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id)) });
+  return /* @__PURE__ */ jsx9(BaseTableHeader, { children: headerGroups.map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx9(BaseTableRow, { children: renderHeaders(headerGroup, headerGroupIndex) }, headerGroup.id)) });
 }
-var DataTableRow = React5.forwardRef(
+var DataTableRow = React6.forwardRef(
   (_a, ref) => {
     var _b = _a, { hoverable, disabled, className, layout = "auto" } = _b, props = __objRest(_b, ["hoverable", "disabled", "className", "layout"]);
     const classes = cn(
@@ -3453,7 +3507,7 @@ var DataTableRow = React5.forwardRef(
       className
     );
     if (layout === "grid") {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         "div",
         __spreadValues({
           ref,
@@ -3462,7 +3516,7 @@ var DataTableRow = React5.forwardRef(
         }, props)
       );
     }
-    return /* @__PURE__ */ jsx8(BaseTableRow, __spreadValues({ ref, className: classes }, props));
+    return /* @__PURE__ */ jsx9(BaseTableRow, __spreadValues({ ref, className: classes }, props));
   }
 );
 DataTableRow.displayName = "DataTableRow";
@@ -3493,7 +3547,7 @@ function DataTableCell({
     isPinned && "z-10",
     className
   );
-  const cellElement = isGrid ? /* @__PURE__ */ jsx8(
+  const cellElement = isGrid ? /* @__PURE__ */ jsx9(
     "div",
     {
       role: "cell",
@@ -3501,7 +3555,7 @@ function DataTableCell({
       style: { minWidth: cell.column.columnDef.minSize },
       children: content
     }
-  ) : /* @__PURE__ */ jsx8(
+  ) : /* @__PURE__ */ jsx9(
     BaseTableCell,
     {
       className: cellClassName,
@@ -3513,9 +3567,9 @@ function DataTableCell({
     }
   );
   if (!shouldShowContextualMenu || !onContextCell) return cellElement;
-  return /* @__PURE__ */ jsxs7(ContextMenu, { children: [
-    /* @__PURE__ */ jsx8(ContextMenuTrigger, { asChild: true, children: cellElement }),
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8(ContextMenu, { children: [
+    /* @__PURE__ */ jsx9(ContextMenuTrigger, { asChild: true, children: cellElement }),
+    /* @__PURE__ */ jsx9(
       CellContextualFilter,
       {
         filter: contextualFilter,
@@ -3534,7 +3588,7 @@ function DataTableGroupRow({
   layout = "auto"
 }) {
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx8("div", { role: "row", className: "bg-muted/50 hover:bg-muted/50 col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9("div", { role: "row", className: "bg-muted/50 hover:bg-muted/50 col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx9(
       "div",
       {
         role: "cell",
@@ -3544,7 +3598,7 @@ function DataTableGroupRow({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx8(BaseTableRow, { className: "bg-muted/50 hover:bg-muted/50", children: /* @__PURE__ */ jsx8(BaseTableCell, { colSpan, className: "text-foreground border-b font-semibold whitespace-nowrap", children: groupLabel }) });
+  return /* @__PURE__ */ jsx9(BaseTableRow, { className: "bg-muted/50 hover:bg-muted/50", children: /* @__PURE__ */ jsx9(BaseTableCell, { colSpan, className: "text-foreground border-b font-semibold whitespace-nowrap", children: groupLabel }) });
 }
 function DataTableSkeletonBody({
   rowCount = 10,
@@ -3553,32 +3607,32 @@ function DataTableSkeletonBody({
   layout = "auto"
 }) {
   const isGrid = layout === "grid";
-  const rows = Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx8(DataTableRow, { layout, children: columns.map(
+  const rows = Array.from({ length: rowCount }).map((_, rowIndex) => /* @__PURE__ */ jsx9(DataTableRow, { layout, children: columns.map(
     (col) => {
       var _a, _b;
-      return isGrid ? /* @__PURE__ */ jsx8(
+      return isGrid ? /* @__PURE__ */ jsx9(
         "div",
         {
           role: "cell",
           className: cn(TABLE_CELL_CLASSES, "flex items-center overflow-hidden"),
           style: { minWidth: col.minSize },
-          children: (_a = renderCell == null ? void 0 : renderCell(col.id)) != null ? _a : /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-full" })
+          children: (_a = renderCell == null ? void 0 : renderCell(col.id)) != null ? _a : /* @__PURE__ */ jsx9(Skeleton, { className: "h-4 w-full" })
         },
         `skeleton-col-${col.id}-row-${rowIndex}`
-      ) : /* @__PURE__ */ jsx8(
+      ) : /* @__PURE__ */ jsx9(
         BaseTableCell,
         {
           style: { width: col.size, minWidth: col.minSize, maxWidth: col.maxSize },
-          children: (_b = renderCell == null ? void 0 : renderCell(col.id)) != null ? _b : /* @__PURE__ */ jsx8(Skeleton, { className: "h-4 w-full" })
+          children: (_b = renderCell == null ? void 0 : renderCell(col.id)) != null ? _b : /* @__PURE__ */ jsx9(Skeleton, { className: "h-4 w-full" })
         },
         `skeleton-col-${col.id}-row-${rowIndex}`
       );
     }
   ) }, `skeleton-row-${rowIndex}`));
   if (isGrid) {
-    return /* @__PURE__ */ jsx8("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", "data-testid": "table-skeleton-loader", children: rows });
+    return /* @__PURE__ */ jsx9("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", "data-testid": "table-skeleton-loader", children: rows });
   }
-  return /* @__PURE__ */ jsx8(BaseTableBody, { "data-testid": "table-skeleton-loader", children: rows });
+  return /* @__PURE__ */ jsx9(BaseTableBody, { "data-testid": "table-skeleton-loader", children: rows });
 }
 function DataTableExpandedRow({
   colSpan,
@@ -3588,9 +3642,9 @@ function DataTableExpandedRow({
 }) {
   if (!show) return null;
   if (layout === "grid") {
-    return /* @__PURE__ */ jsx8("div", { role: "row", className: "col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx8("div", { role: "cell", style: { gridColumn: `span ${colSpan}` }, className: "bg-card p-0 align-top whitespace-normal", children }) });
+    return /* @__PURE__ */ jsx9("div", { role: "row", className: "col-span-full grid grid-cols-subgrid", children: /* @__PURE__ */ jsx9("div", { role: "cell", style: { gridColumn: `span ${colSpan}` }, className: "bg-card p-0 align-top whitespace-normal", children }) });
   }
-  return /* @__PURE__ */ jsx8(BaseTableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx8(BaseTableCell, { colSpan, className: "bg-card p-0 align-top whitespace-normal", children }) });
+  return /* @__PURE__ */ jsx9(BaseTableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx9(BaseTableCell, { colSpan, className: "bg-card p-0 align-top whitespace-normal", children }) });
 }
 function DataTableBody({
   tableRows,
@@ -3616,7 +3670,7 @@ function DataTableBody({
       minSize: c.columnDef.minSize,
       maxSize: c.columnDef.maxSize
     }));
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       DataTableSkeletonBody,
       {
         columns: skeletonColumns,
@@ -3630,17 +3684,17 @@ function DataTableBody({
     var _a, _b, _c, _d;
     if ((_a = row.getIsGrouped) == null ? void 0 : _a.call(row)) {
       const groupLabel = (_c = row.groupingValue) != null ? _c : row.groupingColumnId ? (_b = row.getGroupingValue) == null ? void 0 : _b.call(row, row.groupingColumnId) : void 0;
-      return /* @__PURE__ */ jsx8(DataTableGroupRow, { groupLabel: String(groupLabel != null ? groupLabel : ""), colSpan, layout }, row.id);
+      return /* @__PURE__ */ jsx9(DataTableGroupRow, { groupLabel: String(groupLabel != null ? groupLabel : ""), colSpan, layout }, row.id);
     }
     const isExpanded = !!(renderExpandedRow && ((_d = row.getIsExpanded) == null ? void 0 : _d.call(row)));
     const expandedRow = renderExpandedRow ? renderExpandedRow(row.original) : null;
-    return /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
-      /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsxs8(React6.Fragment, { children: [
+      /* @__PURE__ */ jsx9(
         DataTableRow,
         __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original) : {}), {
           "data-expanded": isExpanded || void 0,
           layout,
-          children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx8(
+          children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx9(
             DataTableCell,
             {
               cell,
@@ -3654,21 +3708,21 @@ function DataTableBody({
           ))
         })
       ),
-      /* @__PURE__ */ jsx8(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
+      /* @__PURE__ */ jsx9(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
     ] }, row.id);
   });
   if (isGrid) {
-    return /* @__PURE__ */ jsx8("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", children: rows });
+    return /* @__PURE__ */ jsx9("div", { role: "rowgroup", className: "col-span-full grid grid-cols-subgrid", children: rows });
   }
-  return /* @__PURE__ */ jsx8(BaseTableBody, { children: rows });
+  return /* @__PURE__ */ jsx9(BaseTableBody, { children: rows });
 }
 
 // src/data-table/view-filter.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 
 // src/filter-bar/filter-bar.tsx
-import * as React6 from "react";
-import { Icon as Icon7 } from "@upbound/monarch-core";
+import * as React7 from "react";
+import { Icon as Icon8 } from "@upbound/monarch-core";
 import { Badge as Badge2 } from "@upbound/monarch-core";
 import { Button as Button6 } from "@upbound/monarch-core";
 import { ButtonGroup as ButtonGroup2, ButtonGroupText as ButtonGroupText2 } from "@upbound/monarch-core";
@@ -3691,7 +3745,6 @@ import {
   DropdownMenu as DropdownMenu4,
   DropdownMenuCheckboxItem as DropdownMenuCheckboxItem2,
   DropdownMenuContent as DropdownMenuContent4,
-  DropdownMenuItem as DropdownMenuItem4,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger as DropdownMenuTrigger4
@@ -3699,7 +3752,7 @@ import {
 import { Input as Input2 } from "@upbound/monarch-core";
 import { Label as Label3 } from "@upbound/monarch-core";
 import { Popover as Popover2, PopoverContent as PopoverContent2, PopoverTrigger as PopoverTrigger2 } from "@upbound/monarch-core";
-import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function asCheckboxValue(value) {
   return Array.isArray(value) ? value : [];
 }
@@ -3733,6 +3786,14 @@ function applyTimeToDate(date, time) {
 function formatDateLabel(date) {
   return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
 }
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
 function FilterBar(_a) {
   var _b = _a, {
     filters,
@@ -3741,7 +3802,8 @@ function FilterBar(_a) {
     onRemoveFilter,
     onChangeFilter,
     className,
-    children
+    children,
+    ref
   } = _b, props = __objRest(_b, [
     "filters",
     "activeFilters",
@@ -3749,48 +3811,59 @@ function FilterBar(_a) {
     "onRemoveFilter",
     "onChangeFilter",
     "className",
-    "children"
+    "children",
+    "ref"
   ]);
   const usedKeys = new Set(activeFilters.map((f) => f.key));
   const availableFilters = filters.filter((f) => !usedKeys.has(f.key));
   const shouldShowFilters = availableFilters.length > 0 || activeFilters.length > 0;
-  const [pendingOpenKey, setPendingOpenKey] = React6.useState(null);
+  const [pendingOpenKey, setPendingOpenKey] = React7.useState(null);
   function handleAddFilter(key) {
     onAddFilter(key);
     setPendingOpenKey(key);
   }
-  return /* @__PURE__ */ jsxs8(
+  const containerRef = React7.useRef(null);
+  return /* @__PURE__ */ jsxs9(
     "div",
     __spreadProps(__spreadValues({
       "data-slot": "filter-bar",
       "data-visible-filters": shouldShowFilters,
-      className: cn("flex flex-wrap items-center gap-2", className)
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ref: composeRefs(containerRef, ref)
     }, props), {
       children: [
-        availableFilters.length > 0 && /* @__PURE__ */ jsxs8(DropdownMenu4, { children: [
-          /* @__PURE__ */ jsx9(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs8(Button6, { variant: "outline", children: [
-            /* @__PURE__ */ jsx9(Icon7, { name: "plus", "data-icon": "inline-start" }),
-            "Add filter"
-          ] }) }),
-          /* @__PURE__ */ jsx9(
-            DropdownMenuContent4,
-            {
-              align: "start",
-              className: "w-48",
-              onCloseAutoFocus: (e) => e.preventDefault(),
-              children: availableFilters.map((filter) => /* @__PURE__ */ jsx9(DropdownMenuItem4, { onSelect: () => handleAddFilter(filter.key), children: filter.label }, filter.key))
-            }
-          )
-        ] }),
+        availableFilters.length > 0 && /* @__PURE__ */ jsxs9(
+          Combobox2,
+          {
+            items: availableFilters,
+            itemToStringValue: (item) => item.label,
+            itemToStringLabel: (item) => item.label,
+            onValueChange: (filter) => {
+              if (filter) handleAddFilter(filter.key);
+            },
+            children: [
+              /* @__PURE__ */ jsxs9(ComboboxTrigger2, { "aria-label": "Add filter", render: /* @__PURE__ */ jsx10(Button6, { variant: "outline" }), children: [
+                /* @__PURE__ */ jsx10(Icon8, { name: "plus", "data-icon": "inline-start" }),
+                "Add filter"
+              ] }),
+              /* @__PURE__ */ jsxs9(ComboboxContent2, { container: containerRef, align: "start", className: "w-48", children: [
+                /* @__PURE__ */ jsx10(ComboboxInput2, { showTrigger: false, placeholder: "Search filters\u2026" }),
+                /* @__PURE__ */ jsx10(ComboboxEmpty2, { children: "No filters found." }),
+                /* @__PURE__ */ jsx10(ComboboxList2, { children: (filter) => /* @__PURE__ */ jsx10(ComboboxItem2, { value: filter, children: filter.label }, filter.key) })
+              ] })
+            ]
+          }
+        ),
         activeFilters.map((active) => {
           const definition = filters.find((f) => f.key === active.key);
           if (!definition) return null;
-          return /* @__PURE__ */ jsx9(
+          return /* @__PURE__ */ jsx10(
             FilterChip,
             {
               definition,
               value: active.value,
               autoOpen: active.key === pendingOpenKey,
+              container: containerRef,
               onChangeValue: (value) => onChangeFilter(active.key, value),
               onRemove: () => onRemoveFilter(active.key)
             },
@@ -3802,34 +3875,36 @@ function FilterBar(_a) {
     })
   );
 }
-function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
+function FilterChip({ definition, value, autoOpen, container, onChangeValue, onRemove }) {
   var _a;
   const type = (_a = definition.type) != null ? _a : "checkbox";
   switch (type) {
     case "checkbox":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         CheckboxFilterChip,
         {
           definition,
           value,
           autoOpen,
+          container,
           onChangeValue,
           onRemove
         }
       );
     case "radio":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         RadioFilterChip,
         {
           definition,
           value,
           autoOpen,
+          container,
           onChangeValue,
           onRemove
         }
       );
     case "text":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         TextFilterChip,
         {
           definition,
@@ -3840,7 +3915,7 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
         }
       );
     case "multiText":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         MultiTextFilterChip,
         {
           definition,
@@ -3851,7 +3926,7 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         DateFilterChip,
         {
           definition,
@@ -3864,12 +3939,13 @@ function FilterChip({ definition, value, autoOpen, onChangeValue, onRemove }) {
   }
 }
 function FilterChipRemoveButton({ label, onRemove }) {
-  return /* @__PURE__ */ jsx9(Button6, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx9(Icon7, { name: "xmark" }) });
+  return /* @__PURE__ */ jsx10(Button6, { variant: "outline", size: "icon", "aria-label": `Remove ${label} filter`, onClick: onRemove, children: /* @__PURE__ */ jsx10(Icon8, { name: "xmark" }) });
 }
 function CheckboxFilterChip({
   definition,
   value,
   autoOpen,
+  container,
   onChangeValue,
   onRemove
 }) {
@@ -3881,9 +3957,9 @@ function CheckboxFilterChip({
     const next = values.includes(optionValue) ? values.filter((v) => v !== optionValue) : [...values, optionValue];
     onChangeValue(next);
   }
-  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
-    searchable ? /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx10(ButtonGroupText2, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs9(
       Combobox2,
       {
         items: options,
@@ -3893,40 +3969,48 @@ function CheckboxFilterChip({
         value: options.filter((o) => values.includes(o.value)),
         onValueChange: (selected) => onChangeValue(selected.map((s) => s.value)),
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             ComboboxTrigger2,
             {
-              render: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
-              children: /* @__PURE__ */ jsx9("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
+              render: /* @__PURE__ */ jsx10(Button6, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx10("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel })
             }
           ),
-          /* @__PURE__ */ jsxs8(ComboboxContent2, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
-            /* @__PURE__ */ jsx9(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
-            values.length > 0 && /* @__PURE__ */ jsxs8(Fragment6, { children: [
-              /* @__PURE__ */ jsxs8(ComboboxSelectedChips2, { children: [
-                /* @__PURE__ */ jsx9(ComboboxValue2, { children: (selected) => /* @__PURE__ */ jsx9(Fragment6, { children: selected.map((item) => /* @__PURE__ */ jsx9(ComboboxChip2, { children: item.label }, item.value)) }) }),
-                /* @__PURE__ */ jsx9(ComboboxClearAll2, { onClick: () => onChangeValue([]) })
-              ] }),
-              /* @__PURE__ */ jsx9(ComboboxSeparator2, {})
-            ] }),
-            /* @__PURE__ */ jsxs8(ComboboxEmpty2, { children: [
-              "No ",
-              label.toLowerCase(),
-              " found."
-            ] }),
-            /* @__PURE__ */ jsx9(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs8(ComboboxItem2, { value: item, children: [
-              item.icon,
-              item.label
-            ] }, item.value) })
-          ] })
+          /* @__PURE__ */ jsxs9(
+            ComboboxContent2,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx10(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                values.length > 0 && /* @__PURE__ */ jsxs9(Fragment6, { children: [
+                  /* @__PURE__ */ jsxs9(ComboboxSelectedChips2, { children: [
+                    /* @__PURE__ */ jsx10(ComboboxValue2, { children: (selected) => /* @__PURE__ */ jsx10(Fragment6, { children: selected.map((item) => /* @__PURE__ */ jsx10(ComboboxChip2, { children: item.label }, item.value)) }) }),
+                    /* @__PURE__ */ jsx10(ComboboxClearAll2, { onClick: () => onChangeValue([]) })
+                  ] }),
+                  /* @__PURE__ */ jsx10(ComboboxSeparator2, {})
+                ] }),
+                /* @__PURE__ */ jsxs9(ComboboxEmpty2, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx10(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs9(ComboboxItem2, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
         ]
       }
-    ) : /* @__PURE__ */ jsxs8(DropdownMenu4, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx9(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs8(Button6, { variant: "outline", className: "gap-1 font-normal", children: [
-        /* @__PURE__ */ jsx9("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
-        /* @__PURE__ */ jsx9(Icon7, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+    ) : /* @__PURE__ */ jsxs9(DropdownMenu4, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx10(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs9(Button6, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx10("span", { className: values.length === 0 ? "text-muted-foreground" : "", children: displayLabel }),
+        /* @__PURE__ */ jsx10(Icon8, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx9(DropdownMenuContent4, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs8(
+      /* @__PURE__ */ jsx10(DropdownMenuContent4, { align: "start", className: "w-48", children: options.map((opt) => /* @__PURE__ */ jsxs9(
         DropdownMenuCheckboxItem2,
         {
           checked: values.includes(opt.value),
@@ -3939,13 +4023,14 @@ function CheckboxFilterChip({
         opt.value
       )) })
     ] }),
-    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx10(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function RadioFilterChip({
   definition,
   value,
   autoOpen,
+  container,
   onChangeValue,
   onRemove
 }) {
@@ -3954,9 +4039,9 @@ function RadioFilterChip({
   const selectedValue = asRadioValue(value);
   const displayLabel = selectedValue ? (_b = (_a = options.find((o) => o.value === selectedValue)) == null ? void 0 : _a.label) != null ? _b : selectedValue : "Any";
   const selected = (_c = options.find((o) => o.value === selectedValue)) != null ? _c : null;
-  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
-    searchable ? /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx10(ButtonGroupText2, { children: label }),
+    searchable ? /* @__PURE__ */ jsxs9(
       Combobox2,
       {
         items: options,
@@ -3968,38 +4053,46 @@ function RadioFilterChip({
           return onChangeValue((_a2 = next == null ? void 0 : next.value) != null ? _a2 : "");
         },
         children: [
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             ComboboxTrigger2,
             {
-              render: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
-              children: /* @__PURE__ */ jsx9("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
+              render: /* @__PURE__ */ jsx10(Button6, { variant: "outline", className: "gap-1 font-normal [&>svg:last-child]:size-(--icon-sm)" }),
+              children: /* @__PURE__ */ jsx10("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel })
             }
           ),
-          /* @__PURE__ */ jsxs8(ComboboxContent2, { className: "min-w-64", collisionAvoidance: { side: "none", align: "shift" }, children: [
-            /* @__PURE__ */ jsx9(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
-            /* @__PURE__ */ jsxs8(ComboboxEmpty2, { children: [
-              "No ",
-              label.toLowerCase(),
-              " found."
-            ] }),
-            /* @__PURE__ */ jsx9(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs8(ComboboxItem2, { value: item, children: [
-              item.icon,
-              item.label
-            ] }, item.value) })
-          ] })
+          /* @__PURE__ */ jsxs9(
+            ComboboxContent2,
+            {
+              container,
+              className: "min-w-64",
+              collisionAvoidance: { side: "none", align: "shift" },
+              children: [
+                /* @__PURE__ */ jsx10(ComboboxInput2, { showTrigger: false, placeholder: `Search ${label.toLowerCase()}\u2026` }),
+                /* @__PURE__ */ jsxs9(ComboboxEmpty2, { children: [
+                  "No ",
+                  label.toLowerCase(),
+                  " found."
+                ] }),
+                /* @__PURE__ */ jsx10(ComboboxList2, { children: (item) => /* @__PURE__ */ jsxs9(ComboboxItem2, { value: item, children: [
+                  item.icon,
+                  item.label
+                ] }, item.value) })
+              ]
+            }
+          )
         ]
       }
-    ) : /* @__PURE__ */ jsxs8(DropdownMenu4, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx9(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs8(Button6, { variant: "outline", className: "gap-1 font-normal", children: [
-        /* @__PURE__ */ jsx9("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
-        /* @__PURE__ */ jsx9(Icon7, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
+    ) : /* @__PURE__ */ jsxs9(DropdownMenu4, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx10(DropdownMenuTrigger4, { asChild: true, children: /* @__PURE__ */ jsxs9(Button6, { variant: "outline", className: "gap-1 font-normal", children: [
+        /* @__PURE__ */ jsx10("span", { className: selectedValue ? "" : "text-muted-foreground", children: displayLabel }),
+        /* @__PURE__ */ jsx10(Icon8, { name: "chevron-down", size: "sm", className: "text-muted-foreground" })
       ] }) }),
-      /* @__PURE__ */ jsx9(DropdownMenuContent4, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx9(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs8(DropdownMenuRadioItem, { value: opt.value, children: [
+      /* @__PURE__ */ jsx10(DropdownMenuContent4, { align: "start", className: "w-48", children: /* @__PURE__ */ jsx10(DropdownMenuRadioGroup, { value: selectedValue, onValueChange: onChangeValue, children: options.map((opt) => /* @__PURE__ */ jsxs9(DropdownMenuRadioItem, { value: opt.value, children: [
         opt.icon,
         opt.label
       ] }, opt.value)) }) })
     ] }),
-    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx10(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function TextFilterChip({
@@ -4011,12 +4104,12 @@ function TextFilterChip({
 }) {
   const { label, placeholder } = definition;
   const text = asTextValue(value);
-  const [open, setOpen] = React6.useState(!!autoOpen);
-  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
-    /* @__PURE__ */ jsxs8(Popover2, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx9(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx9("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
-      /* @__PURE__ */ jsx9(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsx9(
+  const [open, setOpen] = React7.useState(!!autoOpen);
+  return /* @__PURE__ */ jsxs9(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx10(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs9(Popover2, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx10(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx10("span", { className: text ? "" : "text-muted-foreground", children: text || "Any" }) }) }),
+      /* @__PURE__ */ jsx10(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsx10(
         Input2,
         {
           autoFocus: true,
@@ -4029,7 +4122,7 @@ function TextFilterChip({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx10(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function MultiTextFilterChip({
@@ -4041,7 +4134,7 @@ function MultiTextFilterChip({
 }) {
   const { label, placeholder } = definition;
   const tokens = asMultiTextValue(value);
-  const [draft, setDraft] = React6.useState("");
+  const [draft, setDraft] = React7.useState("");
   const displayLabel = tokens.length === 0 ? "Any" : tokens.length === 1 ? tokens[0] : `${tokens.length} values`;
   function addToken() {
     const token = draft.trim();
@@ -4055,25 +4148,25 @@ function MultiTextFilterChip({
   function removeToken(token) {
     onChangeValue(tokens.filter((t) => t !== token));
   }
-  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
-    /* @__PURE__ */ jsxs8(Popover2, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx9(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx9("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
-      /* @__PURE__ */ jsx9(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-        tokens.length > 0 && /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs8(Badge2, { variant: "secondary", className: "gap-1", children: [
+  return /* @__PURE__ */ jsxs9(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx10(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs9(Popover2, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx10(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx10("span", { className: tokens.length === 0 ? "text-muted-foreground" : "", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx10(PopoverContent2, { align: "start", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
+        tokens.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1", children: tokens.map((token) => /* @__PURE__ */ jsxs9(Badge2, { variant: "secondary", className: "gap-1", children: [
           token,
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10(
             "button",
             {
               type: "button",
               "aria-label": `Remove ${token}`,
               onClick: () => removeToken(token),
               className: "cursor-pointer",
-              children: /* @__PURE__ */ jsx9(Icon7, { name: "xmark", size: "xs" })
+              children: /* @__PURE__ */ jsx10(Icon8, { name: "xmark", size: "xs" })
             }
           )
         ] }, token)) }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           Input2,
           {
             autoFocus: true,
@@ -4092,7 +4185,7 @@ function MultiTextFilterChip({
         )
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx10(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 function DateFilterChip({
@@ -4122,12 +4215,12 @@ function DateFilterChip({
     if (!endDate) return;
     onChangeValue({ startDate, endDate: applyTimeToDate(endDate, time) });
   }
-  return /* @__PURE__ */ jsxs8(ButtonGroup2, { children: [
-    /* @__PURE__ */ jsx9(ButtonGroupText2, { children: label }),
-    /* @__PURE__ */ jsxs8(Popover2, { defaultOpen: autoOpen, children: [
-      /* @__PURE__ */ jsx9(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx9(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx9("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
-      /* @__PURE__ */ jsx9(PopoverContent2, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9(ButtonGroup2, { children: [
+    /* @__PURE__ */ jsx10(ButtonGroupText2, { children: label }),
+    /* @__PURE__ */ jsxs9(Popover2, { defaultOpen: autoOpen, children: [
+      /* @__PURE__ */ jsx10(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx10(Button6, { variant: "outline", className: "gap-1 font-normal", children: /* @__PURE__ */ jsx10("span", { className: startDate ? "" : "text-muted-foreground", children: displayLabel }) }) }),
+      /* @__PURE__ */ jsx10(PopoverContent2, { align: "start", className: "w-fit", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx10(
           Calendar2,
           {
             mode: "range",
@@ -4135,9 +4228,9 @@ function DateFilterChip({
             onSelect: pickRange
           }
         ),
-        showTimeInputs && /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center gap-2", children: [
-            /* @__PURE__ */ jsx9(
+        showTimeInputs && /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx10(
               Label3,
               {
                 htmlFor: `${definition.key}-start-time`,
@@ -4145,7 +4238,7 @@ function DateFilterChip({
                 children: "Start"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               Input2,
               {
                 id: `${definition.key}-start-time`,
@@ -4157,8 +4250,8 @@ function DateFilterChip({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center gap-2", children: [
-            /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx10(
               Label3,
               {
                 htmlFor: `${definition.key}-end-time`,
@@ -4166,7 +4259,7 @@ function DateFilterChip({
                 children: "End"
               }
             ),
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx10(
               Input2,
               {
                 id: `${definition.key}-end-time`,
@@ -4181,7 +4274,7 @@ function DateFilterChip({
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx9(FilterChipRemoveButton, { label, onRemove })
+    /* @__PURE__ */ jsx10(FilterChipRemoveButton, { label, onRemove })
   ] });
 }
 
@@ -4192,7 +4285,7 @@ var isCheckboxColumnFilter = (definition) => definition.type === "checkbox";
 var isMultiTextColumnFilter = (definition) => definition.type === "multiText";
 
 // src/data-table/view-filter.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function toFilterOption(opt) {
   return typeof opt === "string" ? { value: opt, label: opt } : { value: opt.value, label: opt.label };
 }
@@ -4235,7 +4328,7 @@ function ViewFilter({
   onColumnFiltersChange,
   className
 }) {
-  const filterableColumns = React7.useMemo(
+  const filterableColumns = React8.useMemo(
     () => columns.filter((column) => !isFilterOnlyColumn(column) && column.getCanFilter()).flatMap((column) => {
       var _a;
       const filter = (_a = column.columnDef.meta) == null ? void 0 : _a.filter;
@@ -4243,19 +4336,19 @@ function ViewFilter({
     }),
     [columns]
   );
-  const filterDefinitions = React7.useMemo(
+  const filterDefinitions = React8.useMemo(
     () => filterableColumns.map(({ key, filter }) => toFilterBarDefinition(key, filter)).sort((a, b) => a.order - b.order),
     [filterableColumns]
   );
-  const emptyValueByKey = React7.useMemo(
+  const emptyValueByKey = React8.useMemo(
     () => new Map(filterableColumns.map(({ key, filter }) => [key, emptyValueFor(filter)])),
     [filterableColumns]
   );
-  const activeFilters = React7.useMemo(
+  const activeFilters = React8.useMemo(
     () => columnFilters.map((filter) => ({ key: filter.id, value: filter.value })),
     [columnFilters]
   );
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     FilterBar,
     {
       className,
@@ -4269,10 +4362,10 @@ function ViewFilter({
 }
 
 // src/section-header.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function SectionHeader(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     __spreadProps(__spreadValues({
       "data-slot": "section-header",
@@ -4284,19 +4377,19 @@ function SectionHeader(_a) {
 }
 function SectionHeaderContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx11("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
+  return /* @__PURE__ */ jsx12("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
 }
 function SectionHeaderTitle(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx11("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
+  return /* @__PURE__ */ jsx12("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
 }
 function SectionHeaderDescription(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx11("p", __spreadValues({ "data-slot": "section-header-description", className: cn("text-body text-muted-foreground", className) }, props));
+  return /* @__PURE__ */ jsx12("p", __spreadValues({ "data-slot": "section-header-description", className: cn("text-body text-muted-foreground", className) }, props));
 }
 
 // src/data-table/data-table.tsx
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_PAGE_SIZE = 20;
 function DataTable({
   id,
@@ -4347,23 +4440,24 @@ function DataTable({
   initialColumnSizing,
   onColumnSizingPersist,
   stickyHeader = false,
-  celFilterConfig
+  celFilterConfig,
+  filterVisibility
 }) {
   var _a, _b, _c, _d, _e, _f;
   const isGrid = layout === "grid";
-  const tableBodyScrollRef = React8.useRef(null);
-  const [innerGlobalFilter, setInnerGlobalFilter] = React8.useState("");
-  const [innerColumnOrdering, setInnerColumnOrdering] = React8.useState([]);
-  const [innerColumnFilters, setInnerColumnFilters] = React8.useState([]);
-  const [innerSorting, setInnerSorting] = React8.useState(((_a = config.state) == null ? void 0 : _a.sorting) || []);
-  const [innerColumnPinning, setInnerColumnPinning] = React8.useState({ left: [], right: [] });
-  const [innerPagination, setInnerPagination] = React8.useState({
+  const tableBodyScrollRef = React9.useRef(null);
+  const [innerGlobalFilter, setInnerGlobalFilter] = React9.useState("");
+  const [innerColumnOrdering, setInnerColumnOrdering] = React9.useState([]);
+  const [innerColumnFilters, setInnerColumnFilters] = React9.useState([]);
+  const [innerSorting, setInnerSorting] = React9.useState(((_a = config.state) == null ? void 0 : _a.sorting) || []);
+  const [innerColumnPinning, setInnerColumnPinning] = React9.useState({ left: [], right: [] });
+  const [innerPagination, setInnerPagination] = React9.useState({
     pageIndex: ((_c = (_b = config.state) == null ? void 0 : _b.pagination) == null ? void 0 : _c.pageIndex) || 0,
     pageSize: ((_e = (_d = config.state) == null ? void 0 : _d.pagination) == null ? void 0 : _e.pageSize) || DEFAULT_PAGE_SIZE
   });
-  const [innerGrouping, setInnerGrouping] = React8.useState([]);
-  const [innerColumnVisibility, setInnerColumnVisibility] = React8.useState({});
-  const [innerExpanded, setInnerExpanded] = React8.useState({});
+  const [innerGrouping, setInnerGrouping] = React9.useState([]);
+  const [innerColumnVisibility, setInnerColumnVisibility] = React9.useState({});
+  const [innerExpanded, setInnerExpanded] = React9.useState({});
   const {
     columnSizing,
     handleColumnSizingChange,
@@ -4375,6 +4469,11 @@ function DataTable({
     onColumnSizingPersist,
     maxSize: isGrid ? RESIZE_MAX_UNBOUNDED : void 0
   });
+  const {
+    showFilterToggle: filterToggleRequested,
+    filterRowVisible,
+    setFilterRowVisible
+  } = useFilterVisibility(filterVisibility);
   const globalFilter = parentGlobalFilter != null ? parentGlobalFilter : innerGlobalFilter;
   const applyGlobalFilter = parentSetGlobalFilter != null ? parentSetGlobalFilter : setInnerGlobalFilter;
   const columnFilters = parentColumnFilters || innerColumnFilters;
@@ -4382,25 +4481,25 @@ function DataTable({
   const pagination = parentPagination || innerPagination;
   const setPagination = parentSetPagination != null ? parentSetPagination : setInnerPagination;
   const shouldDisablePagination = paginationConfig === false;
-  const resetPageIndexOnFilterChange = React8.useCallback(() => {
+  const resetPageIndexOnFilterChange = React9.useCallback(() => {
     if (!serverSidePagination || pagination.pageIndex === 0) return;
     setPagination((prev) => __spreadProps(__spreadValues({}, prev), { pageIndex: 0 }));
   }, [serverSidePagination, pagination.pageIndex, setPagination]);
-  const setGlobalFilter = React8.useCallback(
+  const setGlobalFilter = React9.useCallback(
     (value) => {
       applyGlobalFilter(value);
       resetPageIndexOnFilterChange();
     },
     [applyGlobalFilter, resetPageIndexOnFilterChange]
   );
-  const setColumnFilters = React8.useCallback(
+  const setColumnFilters = React9.useCallback(
     (value) => {
       applyColumnFilters(value);
       resetPageIndexOnFilterChange();
     },
     [applyColumnFilters, resetPageIndexOnFilterChange]
   );
-  React8.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     var _a2;
     if (shouldDisablePagination) return;
     (_a2 = tableBodyScrollRef.current) == null ? void 0 : _a2.scrollTo({ top: 0 });
@@ -4482,7 +4581,9 @@ function DataTable({
   const flatColumns = table.getAllFlatColumns();
   const displayableColumns = flatColumns.filter((col) => !isFilterOnlyColumn(col));
   const orderedVisibleColumns = table.getVisibleLeafColumns().filter((col) => !isFilterOnlyColumn(col));
-  const [gridMeasuredMins, setGridMeasuredMins] = React8.useState({});
+  const hasFilters = !!celFilterConfig || hasFilterableColumns(flatColumns);
+  const showFilterToggle = filterToggleRequested && !disableFilters && hasFilters;
+  const [gridMeasuredMins, setGridMeasuredMins] = React9.useState({});
   const { gridTemplateColumns, gridRootRef, handleAutosizeAll, handleAutosizeColumn, handleResetColumnSize } = useGridLayout({
     layout,
     table,
@@ -4496,7 +4597,7 @@ function DataTable({
     rawHandleAutosizeColumn,
     rawHandleResetColumnSize
   });
-  const handleContextCell = React8.useCallback(
+  const handleContextCell = React9.useCallback(
     (filter, cell) => {
       var _a2, _b2;
       if (celFilterConfig == null ? void 0 : celFilterConfig.onContextualFilter) {
@@ -4513,13 +4614,13 @@ function DataTable({
     },
     [celFilterConfig, onContextCell, setColumnFilters, table]
   );
-  const handleContextSearch = React8.useCallback(
+  const handleContextSearch = React9.useCallback(
     (searchTerm) => {
       setGlobalFilter(searchTerm);
     },
     [setGlobalFilter]
   );
-  const totalTableWidth = React8.useMemo(() => {
+  const totalTableWidth = React9.useMemo(() => {
     if (isGrid) return 0;
     const firstGroup = headerGroups[0];
     if (!firstGroup) return 0;
@@ -4543,12 +4644,12 @@ function DataTable({
     }
     setGlobalFilter("");
   };
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (parentGlobalFilter !== void 0) {
       setInnerGlobalFilter(parentGlobalFilter);
     }
   }, [parentGlobalFilter]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (disableColumnReordering) return;
     const allColumnIds = flatColumns.map((col) => col.id);
     const normalizedColumnOrdering = normalizeColumnOrdering(columnOrdering, allColumnIds);
@@ -4558,9 +4659,9 @@ function DataTable({
   }, [columnOrdering, disableColumnReordering, flatColumns, setColumnOrdering]);
   const showViewHeader = !!title || !!Actions;
   const showColumnOptions = !disableColumnReordering || !disableColumnVisibility;
-  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs9(InputGroup2, { className: "w-70", children: [
-    /* @__PURE__ */ jsx12(InputGroupAddon2, { align: "inline-start", children: /* @__PURE__ */ jsx12(Icon8, { name: "magnifying-glass" }) }),
-    /* @__PURE__ */ jsx12(
+  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs10(InputGroup2, { className: "w-70", children: [
+    /* @__PURE__ */ jsx13(InputGroupAddon2, { align: "inline-start", children: /* @__PURE__ */ jsx13(Icon9, { name: "magnifying-glass" }) }),
+    /* @__PURE__ */ jsx13(
       InputGroupInput2,
       {
         "aria-label": "Search",
@@ -4571,7 +4672,7 @@ function DataTable({
       }
     )
   ] });
-  const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx12(
+  const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx13(
     ColumnOptions,
     {
       columns: flatColumns,
@@ -4580,7 +4681,7 @@ function DataTable({
       disableColumnOrdering: disableColumnReordering
     }
   );
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       id: `table-${id}`,
@@ -4591,18 +4692,19 @@ function DataTable({
         className
       ),
       children: [
-        showViewHeader && /* @__PURE__ */ jsx12(SectionHeader, { className: "mb-4 flex w-full gap-2", children: /* @__PURE__ */ jsxs9(SectionHeaderContent, { children: [
-          !!title && /* @__PURE__ */ jsx12(SectionHeaderTitle, { children: title }),
-          !!description && /* @__PURE__ */ jsx12(SectionHeaderDescription, { children: description })
+        showViewHeader && /* @__PURE__ */ jsx13(SectionHeader, { className: "mb-4 flex w-full gap-2", children: /* @__PURE__ */ jsxs10(SectionHeaderContent, { children: [
+          !!title && /* @__PURE__ */ jsx13(SectionHeaderTitle, { children: title }),
+          !!description && /* @__PURE__ */ jsx13(SectionHeaderDescription, { children: description })
         ] }) }),
-        /* @__PURE__ */ jsxs9("div", { className: "mb-4 flex flex-row gap-2", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "mb-4 flex flex-row gap-2", children: [
           toolbarSearch,
-          /* @__PURE__ */ jsxs9("div", { className: "ml-auto flex items-center gap-2", children: [
-            !!Actions && /* @__PURE__ */ jsx12(Actions, { state: tableState }),
+          /* @__PURE__ */ jsxs10("div", { className: "ml-auto flex items-center gap-2", children: [
+            showFilterToggle && /* @__PURE__ */ jsx13(FilterToggle, { pressed: filterRowVisible, onPressedChange: setFilterRowVisible, count: filterCount }),
+            !!Actions && /* @__PURE__ */ jsx13(Actions, { state: tableState }),
             toolbarColumns
           ] })
         ] }),
-        !disableFilters && /* @__PURE__ */ jsx12("div", { className: "flex w-full", children: celFilterConfig ? /* @__PURE__ */ jsx12("div", { className: cn("mr-2 mb-4 min-w-0 flex-1", celFilterClassName), children: /* @__PURE__ */ jsx12(
+        !disableFilters && (!showFilterToggle || filterRowVisible) && /* @__PURE__ */ jsx13("div", { className: "flex w-full", children: celFilterConfig ? /* @__PURE__ */ jsx13("div", { className: cn("mr-2 mb-4 min-w-0 flex-1", celFilterClassName), children: /* @__PURE__ */ jsx13(
           CelFilterBar,
           {
             schema: celFilterConfig.schema,
@@ -4612,7 +4714,7 @@ function DataTable({
             onRestrictedOptionSelect: celFilterConfig.onRestrictedOptionSelect,
             showClearButton: celFilterConfig.showClearButton
           }
-        ) }) : /* @__PURE__ */ jsx12(
+        ) }) : /* @__PURE__ */ jsx13(
           ViewFilter,
           {
             columns: flatColumns,
@@ -4621,8 +4723,8 @@ function DataTable({
             className: "data-[visible-filters=true]:mb-4"
           }
         ) }),
-        shouldRenderTableContent ? /* @__PURE__ */ jsxs9(Fragment7, { children: [
-          /* @__PURE__ */ jsx12("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "table-main", children: /* @__PURE__ */ jsx12(
+        shouldRenderTableContent ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
+          /* @__PURE__ */ jsx13("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": "table-main", children: /* @__PURE__ */ jsx13(
             "div",
             {
               ref: tableBodyScrollRef,
@@ -4630,7 +4732,7 @@ function DataTable({
                 "min-h-0 flex-1 overflow-auto rounded-lg border **:data-[slot=table-container]:overflow-visible",
                 !!stickyHeader && "max-h-[calc(100svh-250px)]"
               ),
-              children: /* @__PURE__ */ jsxs9(
+              children: /* @__PURE__ */ jsxs10(
                 DataTableRoot,
                 {
                   layout,
@@ -4638,7 +4740,7 @@ function DataTable({
                   gridRootRef,
                   style: isGrid ? { width: "100%" } : totalTableWidth > 0 ? { width: `max(100%, ${totalTableWidth}px)`, minWidth: "100%" } : { width: "100%" },
                   children: [
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13(
                       DataTableHeader,
                       {
                         headerGroups,
@@ -4649,7 +4751,7 @@ function DataTable({
                         layout
                       }
                     ),
-                    /* @__PURE__ */ jsx12(
+                    /* @__PURE__ */ jsx13(
                       DataTableBody,
                       {
                         tableRows,
@@ -4671,7 +4773,7 @@ function DataTable({
               )
             }
           ) }),
-          !shouldDisablePagination && !!pagination && /* @__PURE__ */ jsx12(
+          !shouldDisablePagination && !!pagination && /* @__PURE__ */ jsx13(
             DataTablePagination,
             {
               rowCount,
@@ -4683,7 +4785,7 @@ function DataTable({
               onPageSizeChange: (nextPageSize) => setPagination((prev) => __spreadProps(__spreadValues({}, prev || pagination), { pageIndex: 0, pageSize: nextPageSize }))
             }
           )
-        ] }) : /* @__PURE__ */ jsx12(
+        ] }) : /* @__PURE__ */ jsx13(
           DataTableEmptyView,
           {
             emptyView,