@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/components/FilterBar.cjs

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const react$1 = require("@floating-ui/react");
 const FilterPill = require("../data/FilterPill.cjs");
 const filterBarUtils = require("./filter-bar-utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const timestampFormat = require("../data/cells/timestamp-format.cjs");
 const utils = require("../lib/utils.cjs");
+const modalStack = require("../overlay/modalStack.cjs");
 const button = require("./button.cjs");
 const Combobox = require("./Combobox.cjs");
 const DateTimePicker = require("./DateTimePicker.cjs");
@@ -262,7 +264,6 @@ function OverflowFiltersMenu({
   activeHidden,
   onApply
 }) {
-  const rootRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const [stagedValues, setStagedValues] = react.useState({});
   const hasHidden = filters.length > 0;
@@ -270,15 +271,19 @@ function OverflowFiltersMenu({
     () => filters.map((filter) => filter.key).join("\0"),
     [filters]
   );
-  const openOverflowMenu = react.useCallback(() => {
-    setStagedValues(createFilterValueMap(filters));
-    setOpen(true);
-  }, [filters]);
+  const { refs, floatingStyles, context, floatingZ, getReferenceProps, getFloatingProps } = useAnchoredPopup(
+    open,
+    (next) => {
+      setStagedValues(createFilterValueMap(filters));
+      setOpen(next);
+    },
+    "bottom-end"
+  );
   const closeOverflowMenu = react.useCallback(() => {
     setStagedValues(createFilterValueMap(filters));
     setOpen(false);
   }, [filters]);
-  useDismissablePopup(open, rootRef, triggerRef, closeOverflowMenu);
+  const setTriggerRef = react$1.useMergeRefs([refs.setReference, triggerRef]);
   react.useEffect(() => {
     if (!hasHidden) closeOverflowMenu();
   }, [closeOverflowMenu, hasHidden]);
@@ -299,47 +304,39 @@ function OverflowFiltersMenu({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: rootRef,
-      className: utils.cn("relative shrink-0", !hasHidden && "invisible pointer-events-none"),
+      className: utils.cn("inline-flex shrink-0", !hasHidden && "invisible pointer-events-none"),
       "aria-hidden": !hasHidden || void 0,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           button.Button,
           {
-            ref: triggerRef,
+            ref: setTriggerRef,
             type: "button",
             variant: "outline",
             size: "sm",
             "aria-label": "More filters",
-            "aria-haspopup": "dialog",
-            "aria-expanded": hasHidden ? open : false,
             tabIndex: hasHidden ? 0 : -1,
             title: hasHidden ? "More filters" : void 0,
-            onClick: () => {
-              if (!hasHidden) return;
-              if (open) {
-                closeOverflowMenu();
-              } else {
-                openOverflowMenu();
-              }
-            },
             className: utils.cn(
               "h-8 min-w-0 gap-1.5 px-2 text-xs font-normal",
               activeHidden > 0 && "border-primary/40 text-primary"
             ),
+            ...getReferenceProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiFilter.UiFilter, className: "text-[14px]" }),
               activeHidden > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: activeHidden })
             ]
           }
         ),
-        hasHidden && open && /* @__PURE__ */ jsxRuntime.jsxs(
+        hasHidden && open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            ref: refs.setFloating,
             role: "dialog",
             "aria-label": "Overflow filters",
-            className: "fixed inset-x-2 bottom-4 top-16 z-50 flex flex-col overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/10 md:absolute md:bottom-auto md:left-auto md:right-0 md:top-[calc(100%+0.375rem)] md:block md:w-[min(34rem,calc(100vw-2rem))] md:overflow-visible md:shadow-black/5",
-            onClick: (event) => event.stopPropagation(),
+            style: { ...floatingStyles, zIndex: floatingZ },
+            className: "flex max-h-[min(34rem,calc(100vh-2rem))] w-[min(34rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/10",
+            ...getFloatingProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2 px-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Filters" }),
@@ -367,7 +364,7 @@ function OverflowFiltersMenu({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto rounded-md border border-border/70 md:overflow-visible", children: stagedFilters.map((filter) => {
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 divide-y divide-border/70 overflow-y-auto rounded-md border border-border/70", children: stagedFilters.map((filter) => {
                 const active = filterBarUtils.isFilterBarFilterActive(filter);
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
@@ -442,7 +439,7 @@ function OverflowFiltersMenu({
               ] })
             ]
           }
-        )
+        ) }) })
       ]
     }
   );
@@ -854,10 +851,8 @@ function LookupMultiFilterField({
   );
 }
 function NumberFilterField({ filter, grow }) {
-  const rootRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
-  useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
+  const popup = useAnchoredPopup(open, setOpen);
   const bounds = resolveNumberFilterBounds(filter);
   const [draft, setDraft] = useDebouncedNumberDraft(filter.value, filter.onChange);
   const sliderMin = clampNumber(parseFilterNumber(draft.min) ?? bounds.min, bounds.min, bounds.max);
@@ -868,10 +863,9 @@ function NumberFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: rootRef,
       title: filter.description,
       className: utils.cn(
-        "relative min-w-0",
+        "inline-flex min-w-0",
         grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
         filter.disabled && "opacity-60",
         filter.className
@@ -880,20 +874,18 @@ function NumberFilterField({ filter, grow }) {
         /* @__PURE__ */ jsxRuntime.jsxs(
           button.Button,
           {
-            ref: triggerRef,
+            ref: popup.refs.setReference,
             type: "button",
             variant: "outline",
             size: "sm",
             "aria-label": `${filter.label} filter`,
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
             disabled: filter.disabled,
-            onClick: () => setOpen((current) => !current),
             className: utils.cn(
               "min-w-0 gap-2 font-normal",
               grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[9.5rem] px-2.5",
               summary === filter.label && "text-muted-foreground"
             ),
+            ...popup.getReferenceProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filter.icon, className: "text-[14px] text-muted-foreground" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
@@ -901,88 +893,99 @@ function NumberFilterField({ filter, grow }) {
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg shadow-black/5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "text-[10px] text-primary disabled:text-muted-foreground",
-                onClick: () => {
-                  setDraft({});
-                  filter.onChange({});
-                },
-                disabled: !String(draft.min ?? "").trim() && !String(draft.max ?? "").trim(),
-                children: "Clear all"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[11px] text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.min, filter) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.max, filter) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-6", children: /* @__PURE__ */ jsxRuntime.jsx(
-                RangeSlider.RangeSlider,
-                {
-                  min: bounds.min,
-                  max: bounds.max,
-                  step: bounds.step,
-                  value: [activeMin, activeMax],
-                  ariaLabelMin: `${filter.label} minimum slider`,
-                  ariaLabelMax: `${filter.label} maximum slider`,
-                  onChange: ([nextMin, nextMax]) => setDraft(numberFilterValueFromSlider([nextMin, nextMax], bounds))
-                }
-              ) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Min" }),
+        open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context: popup.context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: popup.refs.setFloating,
+            role: "dialog",
+            "aria-label": filter.label,
+            style: { ...popup.floatingStyles, zIndex: popup.floatingZ },
+            className: "min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-lg shadow-black/5",
+            ...popup.getFloatingProps(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                  "button",
                   {
-                    type: "number",
-                    inputMode: "decimal",
-                    step: bounds.step,
-                    "aria-label": `${filter.label} minimum`,
-                    className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
-                    value: draft.min ?? "",
-                    onChange: (event) => setDraft(
-                      normalizeNumberFilterValue(
-                        { min: event.target.value, max: draft.max ?? "" },
-                        "min-input"
-                      )
-                    )
+                    type: "button",
+                    className: "text-[10px] text-primary disabled:text-muted-foreground",
+                    onClick: () => {
+                      setDraft({});
+                      filter.onChange({});
+                    },
+                    disabled: !String(draft.min ?? "").trim() && !String(draft.max ?? "").trim(),
+                    children: "Clear all"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Max" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "number",
-                    inputMode: "decimal",
-                    step: bounds.step,
-                    "aria-label": `${filter.label} maximum`,
-                    className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
-                    value: draft.max ?? "",
-                    onChange: (event) => setDraft(
-                      normalizeNumberFilterValue(
-                        { min: draft.min ?? "", max: event.target.value },
-                        "max-input"
-                      )
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[11px] text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.min, filter) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatNumberValue(bounds.max, filter) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    RangeSlider.RangeSlider,
+                    {
+                      min: bounds.min,
+                      max: bounds.max,
+                      step: bounds.step,
+                      value: [activeMin, activeMax],
+                      ariaLabelMin: `${filter.label} minimum slider`,
+                      ariaLabelMax: `${filter.label} maximum slider`,
+                      onChange: ([nextMin, nextMax]) => setDraft(numberFilterValueFromSlider([nextMin, nextMax], bounds))
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Min" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "number",
+                        inputMode: "decimal",
+                        step: bounds.step,
+                        "aria-label": `${filter.label} minimum`,
+                        className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        ...filter.minPlaceholder !== void 0 ? { placeholder: filter.minPlaceholder } : {},
+                        value: draft.min ?? "",
+                        onChange: (event) => setDraft(
+                          normalizeNumberFilterValue(
+                            { min: event.target.value, max: draft.max ?? "" },
+                            "min-input"
+                          )
+                        )
+                      }
                     )
-                  }
-                )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-[10px] text-muted-foreground", children: "Max" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "number",
+                        inputMode: "decimal",
+                        step: bounds.step,
+                        "aria-label": `${filter.label} maximum`,
+                        className: "h-8 w-full rounded-md border border-input bg-background px-2 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        ...filter.maxPlaceholder !== void 0 ? { placeholder: filter.maxPlaceholder } : {},
+                        value: draft.max ?? "",
+                        onChange: (event) => setDraft(
+                          normalizeNumberFilterValue(
+                            { min: draft.min ?? "", max: event.target.value },
+                            "max-input"
+                          )
+                        )
+                      }
+                    )
+                  ] })
+                ] })
               ] })
-            ] })
-          ] })
-        ] })
+            ]
+          }
+        ) }) })
       ]
     }
   );
@@ -1091,14 +1094,16 @@ function NumberFilterPanel({
     }
   );
 }
+const MULTI_FILTER_OPTION_ROW_HEIGHT = 30;
+const MULTI_FILTER_OPTION_LIST_HEIGHT = 288;
+const MULTI_FILTER_OPTION_OVERSCAN = 6;
 function MultiFilterField({ filter, grow }) {
-  const rootRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const [optionQuery, setOptionQuery] = react.useState("");
+  const [optionScrollTop, setOptionScrollTop] = react.useState(0);
   const [searchOptions, setSearchOptions] = react.useState([]);
   const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
-  useDismissablePopup(open, rootRef, triggerRef, () => setOpen(false));
+  const popup = useAnchoredPopup(open, setOpen);
   const onSearch = filter.onSearch;
   react.useEffect(() => {
     if (!onSearch) return;
@@ -1141,6 +1146,25 @@ function MultiFilterField({ filter, grow }) {
       (option) => multiSelectOptionText(option).toLowerCase().includes(lowered)
     );
   }, [baseOptions, searchOptions, optionQuery, onSearch, draft]);
+  react.useEffect(() => {
+    setOptionScrollTop(0);
+  }, [optionQuery]);
+  const optionWindow = react.useMemo(() => {
+    const visibleRows = Math.ceil(MULTI_FILTER_OPTION_LIST_HEIGHT / MULTI_FILTER_OPTION_ROW_HEIGHT);
+    const start = Math.max(
+      0,
+      Math.floor(optionScrollTop / MULTI_FILTER_OPTION_ROW_HEIGHT) - MULTI_FILTER_OPTION_OVERSCAN
+    );
+    const end = Math.min(
+      visibleOptions.length,
+      start + visibleRows + MULTI_FILTER_OPTION_OVERSCAN * 2
+    );
+    return {
+      options: visibleOptions.slice(start, end),
+      totalHeight: visibleOptions.length * MULTI_FILTER_OPTION_ROW_HEIGHT,
+      top: start * MULTI_FILTER_OPTION_ROW_HEIGHT
+    };
+  }, [optionScrollTop, visibleOptions]);
   const trimmedQuery = optionQuery.trim();
   const canAddCustom = allowCustomValue && trimmedQuery !== "" && !visibleOptions.some((o) => o.value === trimmedQuery);
   const addCustom = () => {
@@ -1151,10 +1175,9 @@ function MultiFilterField({ filter, grow }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: rootRef,
       title: filter.description,
       className: utils.cn(
-        "relative min-w-0",
+        "inline-flex min-w-0",
         grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
         filter.disabled && "opacity-60",
         filter.className
@@ -1163,20 +1186,18 @@ function MultiFilterField({ filter, grow }) {
         /* @__PURE__ */ jsxRuntime.jsxs(
           button.Button,
           {
-            ref: triggerRef,
+            ref: popup.refs.setReference,
             type: "button",
             variant: "outline",
             size: "sm",
             "aria-label": `${filter.label} filter`,
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
             disabled: filter.disabled,
-            onClick: () => setOpen((current) => !current),
             className: utils.cn(
               "min-w-0 gap-2 font-normal",
               grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[8.5rem] px-2.5",
               summary === filter.label && "text-muted-foreground"
             ),
+            ...popup.getReferenceProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Icon.LabelIcon, { icon: filter.icon, className: "text-[14px] text-muted-foreground" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
@@ -1184,97 +1205,118 @@ function MultiFilterField({ filter, grow }) {
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-[calc(100%+0.375rem)] z-50 min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "text-[10px] text-primary disabled:text-muted-foreground",
-                onClick: () => setDraft({}),
-                disabled: Object.keys(draft).length === 0,
-                children: "Clear all"
-              }
-            )
-          ] }),
-          showOptionFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "search",
-                "aria-label": `Filter ${filter.label} options`,
-                className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
-                placeholder: `Filter ${filter.label.toLowerCase()}`,
-                value: optionQuery,
-                onChange: (event) => setOptionQuery(event.target.value)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-72 space-y-0.5 overflow-auto", children: [
-            visibleOptions.map((option) => {
-              const mode = draft[option.value] ?? "neutral";
-              const title = option.title ?? multiSelectOptionText(option);
-              return /* @__PURE__ */ jsxRuntime.jsx(
+        open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context: popup.context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: popup.refs.setFloating,
+            role: "dialog",
+            "aria-label": filter.label,
+            style: { ...popup.floatingStyles, zIndex: popup.floatingZ },
+            className: "min-w-[18rem] max-w-[22rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5",
+            ...popup.getFloatingProps(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: filter.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "text-[10px] text-primary disabled:text-muted-foreground",
+                    onClick: () => setDraft({}),
+                    disabled: Object.keys(draft).length === 0,
+                    children: "Clear all"
+                  }
+                )
+              ] }),
+              showOptionFilter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-2 rounded-md border border-input bg-background px-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiSearch.UiSearch, className: "shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "search",
+                    "aria-label": `Filter ${filter.label} options`,
+                    className: "h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground",
+                    placeholder: `Filter ${filter.label.toLowerCase()}`,
+                    value: optionQuery,
+                    onChange: (event) => setOptionQuery(event.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
-                  role: "button",
-                  tabIndex: 0,
-                  "data-filter-option": option.value,
-                  className: "rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                  onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
-                  onKeyDown: (event) => {
-                    if (event.key === "Enter" || event.key === " ") {
-                      event.preventDefault();
-                      setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode)));
-                    }
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    FilterPill.FilterPill,
-                    {
-                      className: "w-full justify-between",
-                      label: option.label,
-                      mode,
-                      title,
-                      togglePosition: "right",
-                      onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
-                    }
-                  )
-                },
-                option.value
-              );
-            }),
-            canAddCustom && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                "data-filter-add-custom": trimmedQuery,
-                className: "rounded-md px-2 py-1 text-sm text-primary hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
-                onClick: addCustom,
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    addCustom();
-                  }
-                },
-                children: [
-                  "Add “",
-                  trimmedQuery,
-                  "”"
-                ]
-              }
-            ),
-            visibleOptions.length === 0 && !canAddCustom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
-          ] }),
-          moreCount > 0 && !optionQuery.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 px-1.5 text-[11px] text-muted-foreground", children: [
-            "… and ",
-            moreCount.toLocaleString(),
-            " more",
-            onSearch ? " — type to search all" : ""
-          ] })
-        ] })
+                  className: "max-h-72 overflow-auto",
+                  onScroll: (event) => setOptionScrollTop(event.currentTarget.scrollTop),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", style: { height: optionWindow.totalHeight }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { transform: `translateY(${optionWindow.top}px)` }, children: optionWindow.options.map((option) => {
+                      const mode = draft[option.value] ?? "neutral";
+                      const title = option.title ?? multiSelectOptionText(option);
+                      return /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          role: "button",
+                          tabIndex: 0,
+                          "data-filter-option": option.value,
+                          className: "box-border flex items-center rounded-md px-1.5 py-0.5 hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                          style: { height: MULTI_FILTER_OPTION_ROW_HEIGHT },
+                          onClick: () => setDraft(updateMultiFilterValue(draft, option.value, nextFilterMode(mode))),
+                          onKeyDown: (event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                              event.preventDefault();
+                              setDraft(
+                                updateMultiFilterValue(draft, option.value, nextFilterMode(mode))
+                              );
+                            }
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            FilterPill.FilterPill,
+                            {
+                              className: "w-full justify-between",
+                              label: option.label,
+                              mode,
+                              title,
+                              togglePosition: "right",
+                              onModeChange: (next) => setDraft(updateMultiFilterValue(draft, option.value, next))
+                            }
+                          )
+                        },
+                        option.value
+                      );
+                    }) }) }),
+                    canAddCustom && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        "data-filter-add-custom": trimmedQuery,
+                        className: "rounded-md px-2 py-1 text-sm text-primary hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:outline-none",
+                        onClick: addCustom,
+                        onKeyDown: (event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            addCustom();
+                          }
+                        },
+                        children: [
+                          "Add “",
+                          trimmedQuery,
+                          "”"
+                        ]
+                      }
+                    ),
+                    visibleOptions.length === 0 && !canAddCustom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-3 text-sm text-muted-foreground", children: "No options found" })
+                  ]
+                }
+              ),
+              moreCount > 0 && !optionQuery.trim() && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 px-1.5 text-[11px] text-muted-foreground", children: [
+                "… and ",
+                moreCount.toLocaleString(),
+                " more",
+                onSearch ? " — type to search all" : ""
+              ] })
+            ]
+          }
+        ) }) })
       ]
     }
   );
@@ -1561,14 +1603,12 @@ function NestedMultiFilterField({
   filter,
   grow
 }) {
-  const rootRef = react.useRef(null);
-  const triggerRef = react.useRef(null);
   const [open, setOpen] = react.useState(false);
   const [activeGroup, setActiveGroup] = react.useState(null);
   const [draft, setDraft] = useDebouncedMultiDraft(filter.value, filter.onChange);
-  useDismissablePopup(open, rootRef, triggerRef, () => {
-    setOpen(false);
-    setActiveGroup(null);
+  const popup = useAnchoredPopup(open, (next) => {
+    setOpen(next);
+    if (!next) setActiveGroup(null);
   });
   const summary = summarizeMultiFilter(filter.label, draft);
   const groups = filter.groups;
@@ -1608,10 +1648,9 @@ function NestedMultiFilterField({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: rootRef,
       title: filter.description,
       className: utils.cn(
-        "relative min-w-0",
+        "inline-flex min-w-0",
         grow ? "min-w-[8rem] max-w-[12rem] flex-1" : "shrink-0",
         filter.disabled && "opacity-60",
         filter.className
@@ -1620,41 +1659,33 @@ function NestedMultiFilterField({
         /* @__PURE__ */ jsxRuntime.jsxs(
           button.Button,
           {
-            ref: triggerRef,
+            ref: popup.refs.setReference,
             type: "button",
             variant: "outline",
             size: "sm",
             "aria-label": `${filter.label} filter`,
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
             disabled: filter.disabled,
-            onClick: () => {
-              setOpen((current) => !current);
-              if (open) setActiveGroup(null);
-            },
             className: utils.cn(
               "min-w-0 gap-2 font-normal",
               grow ? "w-full max-w-[12rem] justify-between" : "w-auto max-w-[8.5rem] px-2.5",
               summary === filter.label && "text-muted-foreground"
             ),
+            ...popup.getReferenceProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: summary }),
               /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: open ? UiChevronUp.UiChevronUp : UiChevronDown.UiChevronDown, className: "text-muted-foreground" })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsxRuntime.jsxs(
+        open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context: popup.context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
+            ref: popup.refs.setFloating,
             role: "dialog",
-            onKeyDown: (event) => {
-              if (event.key === "Escape") {
-                event.preventDefault();
-                setOpen(false);
-                setActiveGroup(null);
-              }
-            },
-            className: "absolute left-0 top-[calc(100%+0.375rem)] z-50 flex",
+            "aria-label": filter.label,
+            style: { ...popup.floatingStyles, zIndex: popup.floatingZ },
+            className: "flex",
+            ...popup.getFloatingProps(),
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-[14rem] max-w-[16rem] rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-lg shadow-black/5", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
@@ -1773,7 +1804,7 @@ function NestedMultiFilterField({
               )
             ]
           }
-        )
+        ) }) })
       ]
     }
   );
@@ -1853,29 +1884,25 @@ function RangeControlButton({
     }
   );
 }
-function useDismissablePopup(open, rootRef, triggerRef, onClose) {
-  react.useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event) => {
-      var _a;
-      if (!((_a = rootRef.current) == null ? void 0 : _a.contains(event.target))) {
-        onClose();
-      }
-    };
-    const onKeyDown = (event) => {
-      var _a;
-      if (event.key === "Escape") {
-        onClose();
-        (_a = triggerRef.current) == null ? void 0 : _a.focus();
-      }
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [onClose, open, rootRef, triggerRef]);
+function useAnchoredPopup(open, onOpenChange, placement = "bottom-start") {
+  const floatingZ = modalStack.useFloatingZIndex();
+  const { refs, floatingStyles, context } = react$1.useFloating({
+    open,
+    onOpenChange,
+    placement,
+    whileElementsMounted: react$1.autoUpdate,
+    middleware: [react$1.offset(6), react$1.flip({ padding: 8 }), react$1.shift({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = react$1.useInteractions([
+    react$1.useClick(context),
+    react$1.useDismiss(context, { escapeKey: false }),
+    react$1.useRole(context, { role: "dialog" })
+  ]);
+  modalStack.useEscapeLayer(open, () => {
+    onOpenChange(false);
+    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
+  });
+  return { refs, floatingStyles, context, floatingZ, getReferenceProps, getFloatingProps };
 }
 function useMediaQuery(query) {
   const [matches, setMatches] = react.useState(() => {
@@ -1912,12 +1939,19 @@ function useDebouncedMultiDraft(value, onChange) {
   const { autoSubmit } = react.useContext(FilterBarContext);
   const [draft, setDraft] = react.useState(value);
   const latestOnChange = react.useRef(onChange);
+  const latestValue = react.useRef(value);
+  const valueKey = multiFilterValueKey(value);
   react.useEffect(() => {
     latestOnChange.current = onChange;
   }, [onChange]);
   react.useEffect(() => {
-    setDraft(value);
-  }, [value]);
+    if (!sameMultiFilterValue(latestValue.current, value)) {
+      latestValue.current = value;
+      setDraft(value);
+      return;
+    }
+    latestValue.current = value;
+  }, [valueKey, value]);
   react.useEffect(() => {
     if (sameMultiFilterValue(draft, value)) return;
     if (!autoSubmit) {
@@ -1928,9 +1962,12 @@ function useDebouncedMultiDraft(value, onChange) {
       latestOnChange.current(draft);
     }, FILTER_INPUT_DEBOUNCE_MS);
     return () => window.clearTimeout(timeoutId);
-  }, [autoSubmit, draft, value]);
+  }, [autoSubmit, draft, valueKey]);
   return [draft, setDraft];
 }
+function multiFilterValueKey(value) {
+  return Object.keys(value).sort().map((key) => `${key}:${value[key]}`).join("\0");
+}
 function sameMultiFilterValue(a, b) {
   const aKeys = Object.keys(a);
   const bKeys = Object.keys(b);