@parallelworks/ui 0.41.0 → 0.42.0

package/dist/list/ListViewControls.js

@@ -1,117 +1,82 @@
-import { useStrings } from "../components/Provider.js";
-import { FaCheck } from "../icons/fa/FaCheck.js";
 import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
 import { FaChevronUp } from "../icons/fa/FaChevronUp.js";
 import { FaFilter } from "../icons/fa/FaFilter.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { LuSettings2 } from "../icons/lu/LuSettings2.js";
-import { TOOLTIP_ID, TooltipInfo } from "../components/Tooltip.js";
-import { focusOnMount } from "../components/focus.js";
+import { panelClassName, portalContainer, positionerClassName } from "../components/floating.js";
+import { MenuCheckboxItem, MenuPopup, MenuSubmenuTrigger } from "../components/Menu.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { useStrings } from "../components/Provider.js";
+import { useQueryMatch } from "../components/search.js";
+import { InfoTip } from "../components/InfoTip.js";
+import { Switch } from "../components/Switch.js";
+import { Select } from "../components/Select.js";
 import { isTextEntryContext } from "./textEntry.js";
-import cx from "classnames";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
+import { Menu } from "@base-ui/react/menu";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { Popover } from "@base-ui/react/popover";
 //#region src/list/ListViewControls.tsx
 /** Shared chrome for the toolbar control buttons (Filter, Display, Search) so
 * they read as a consistent button cluster — matched by ListSearchControl. */
 var listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
-var FLYOUT = "min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg";
-/** Toggle pill shared by the Display menu's column + pinned-action pickers. */
-function pillClass(on) {
-	return cx("whitespace-nowrap rounded-full border px-2.5 py-1 text-[12px] transition-colors", on ? "border-transparent bg-(--theme-muted-panel-bg) text-(--theme-app)" : "border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)");
-}
+var activeButtonClassName = "border-(--theme-link) text-(--theme-app)";
+/** A toggle pill, for the Display panel's column and pinned-action pickers. */
+var pillClassName = "whitespace-nowrap rounded-full border border-(--theme-border) px-2.5 py-1 text-[12px] text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) data-pressed:border-transparent data-pressed:bg-(--theme-muted-panel-bg) data-pressed:text-(--theme-app)";
 var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
-/** A header-strip button that opens a panel under it. The panel is a
-*  non-modal dialog named by the button, not a menu: it holds switches,
-*  pills and text rather than menu items. Portals into .ds-root so the panel
-*  escapes the toolbar's overflow clipping. */
-function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children }) {
-	const btnRef = useRef(null);
-	const panelRef = useRef(null);
-	const [pos, setPos] = useState(null);
-	const close = useCallback(() => setPos(null), []);
-	const open = useCallback(() => {
-		const r = btnRef.current?.getBoundingClientRect();
-		if (r) setPos({
-			right: Math.max(8, Math.round(window.innerWidth - r.right)),
-			top: Math.round(r.bottom) + 4
-		});
-	}, []);
+/** Calls `onPress` on a single key, such as F to filter, unless the key goes to a text field. */
+function useShortcutKey(key, onPress) {
+	const press = useRef(onPress);
+	press.current = onPress;
 	useEffect(() => {
-		if (!pos) return;
+		if (!key) return;
 		const onKey = (e) => {
-			if (e.key === "Escape") close();
-		};
-		const onScroll = (e) => {
-			if (e.target instanceof Node && panelRef.current?.contains(e.target)) return;
-			close();
-		};
-		window.addEventListener("keydown", onKey);
-		window.addEventListener("scroll", onScroll, true);
-		window.addEventListener("resize", close);
-		return () => {
-			window.removeEventListener("keydown", onKey);
-			window.removeEventListener("scroll", onScroll, true);
-			window.removeEventListener("resize", close);
-		};
-	}, [pos, close]);
-	useEffect(() => {
-		if (!shortcut) return;
-		const onKey = (e) => {
-			if (e.metaKey || e.ctrlKey || e.altKey) return;
-			if (e.key.toLowerCase() !== shortcut.toLowerCase()) return;
+			if (e.metaKey || e.ctrlKey || e.altKey || e.key.toLowerCase() !== key.toLowerCase()) return;
 			if (isTextEntryContext(e.target)) return;
 			e.preventDefault();
-			open();
+			press.current();
 		};
 		window.addEventListener("keydown", onKey);
 		return () => window.removeEventListener("keydown", onKey);
-	}, [shortcut, open]);
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
-		ref: btnRef,
-		type: "button",
-		onClick: () => pos ? close() : open(),
-		"aria-label": label,
-		"aria-haspopup": "dialog",
-		"aria-expanded": pos !== null,
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": label,
-		"data-tooltip-shortcut": shortcut ? shortcut.toUpperCase() : void 0,
-		className: cx(listControlButtonClasses, active && "border-(--theme-link) text-(--theme-app)"),
-		children: [icon, active && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
-	}), pos && createPortal(/* @__PURE__ */ jsx("div", {
-		role: "none",
-		className: "fixed inset-0 z-50",
-		onMouseDown: close,
-		onContextMenu: (e) => {
-			e.preventDefault();
-			close();
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			ref: panelRef,
-			role: "dialog",
-			"aria-label": label,
-			onMouseDown: (e) => e.stopPropagation(),
-			className: cx("absolute rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg", panelClassName),
-			style: {
-				right: pos.right,
-				top: pos.top
-			},
-			children
-		})
-	}), document.querySelector(".ds-root") ?? document.body)] });
+	}, [key]);
 }
-/** Small on/off switch for the Display menu's boolean options. */
-function Switch({ checked, onChange, label }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		role: "switch",
-		"aria-checked": checked,
-		"aria-label": label,
-		onClick: onChange,
-		className: cx("relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors", checked ? "bg-(--theme-link)" : "bg-(--theme-border)"),
-		children: /* @__PURE__ */ jsx("span", { className: cx("inline-block h-3 w-3 rounded-full bg-white transition-transform", checked ? "translate-x-3.5" : "translate-x-0.5") })
+/** Marks a control whose panel has narrowed or changed the list. */
+function ActiveDot() {
+	return /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" });
+}
+/** A header-strip button that opens a panel under it. The panel is a
+*  non-modal dialog named by the button, not a menu: it holds switches,
+*  pills and text rather than menu items. */
+function AnchoredPopover({ icon, label, active, shortcut, panelClassName: panelClass, children }) {
+	const [open, setOpen] = useState(false);
+	useShortcutKey(shortcut, () => setOpen(true));
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: label,
+			shortcut: shortcut?.toUpperCase(),
+			disabled: open,
+			children: /* @__PURE__ */ jsxs(Popover.Trigger, {
+				"aria-label": label,
+				className: clsx(listControlButtonClasses, active && activeButtonClassName),
+				children: [icon, active && /* @__PURE__ */ jsx(ActiveDot, {})]
+			})
+		}), /* @__PURE__ */ jsx(Popover.Portal, {
+			container: portalContainer(),
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				side: "bottom",
+				align: "end",
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					"aria-label": label,
+					className: clsx(panelClassName, panelClass),
+					children
+				})
+			})
+		})]
 	});
 }
 function ListDisplayMenu({ view, label }) {
@@ -129,27 +94,31 @@ function ListDisplayMenu({ view, label }) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-[13px] text-(--theme-app)",
 					children: t.grouping
-				}), /* @__PURE__ */ jsx(OptionDropdown, {
+				}), /* @__PURE__ */ jsx(OptionSelect, {
+					label: t.grouping,
 					options: view.groupBys,
 					value: view.groupBy,
 					onSelect: view.setGroupBy
 				})]
 			}),
 			view.orderBys.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center justify-between gap-3", hasGrouping && "mt-2.5"),
+				className: clsx("flex items-center justify-between gap-3", hasGrouping && "mt-2.5"),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-[13px] text-(--theme-app)",
 					children: t.ordering
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: view.toggleOrderDir,
-						"aria-label": orderDirLabel,
-						title: orderDirLabel,
-						className: "flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
-						children: view.orderDir === "asc" ? /* @__PURE__ */ jsx(FaChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3" })
-					}), /* @__PURE__ */ jsx(OptionDropdown, {
+					children: [/* @__PURE__ */ jsx(Tooltip, {
+						content: orderDirLabel,
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: view.toggleOrderDir,
+							"aria-label": orderDirLabel,
+							className: "flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+							children: view.orderDir === "asc" ? /* @__PURE__ */ jsx(FaChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(FaChevronDown, { className: "h-3 w-3" })
+						})
+					}), /* @__PURE__ */ jsx(OptionSelect, {
+						label: t.ordering,
 						options: view.orderBys,
 						value: view.orderBy,
 						onSelect: view.setOrderBy
@@ -157,14 +126,15 @@ function ListDisplayMenu({ view, label }) {
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center justify-between gap-3", (hasGrouping || view.orderBys.length > 0) && "mt-2.5"),
+				className: clsx("flex items-center justify-between gap-3", (hasGrouping || view.orderBys.length > 0) && "mt-2.5"),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "text-[13px] text-(--theme-app)",
 					children: t.columnHeaders
 				}), /* @__PURE__ */ jsx(Switch, {
+					size: "sm",
 					checked: view.showColumnHeaders,
-					onChange: view.toggleColumnHeaders,
-					label: t.showColumnHeaders
+					onCheckedChange: view.toggleColumnHeaders,
+					"aria-label": t.showColumnHeaders
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -173,9 +143,10 @@ function ListDisplayMenu({ view, label }) {
 					className: "text-[13px] text-(--theme-app)",
 					children: t.showActions
 				}), /* @__PURE__ */ jsx(Switch, {
+					size: "sm",
 					checked: view.showActions,
-					onChange: view.toggleShowActions,
-					label: t.showRowActions
+					onCheckedChange: view.toggleShowActions,
+					"aria-label": t.showRowActions
 				})]
 			}),
 			view.showActions && /* @__PURE__ */ jsxs("div", {
@@ -184,9 +155,10 @@ function ListDisplayMenu({ view, label }) {
 					className: "text-[13px] text-(--theme-muted-text-color)",
 					children: t.alwaysShowActions
 				}), /* @__PURE__ */ jsx(Switch, {
+					size: "sm",
 					checked: view.alwaysShowActions,
-					onChange: view.toggleAlwaysShowActions,
-					label: t.alwaysShowRowActions
+					onCheckedChange: view.toggleAlwaysShowActions,
+					"aria-label": t.alwaysShowRowActions
 				})]
 			}),
 			toggleable.length > 0 && /* @__PURE__ */ jsxs("div", {
@@ -196,10 +168,10 @@ function ListDisplayMenu({ view, label }) {
 					children: t.displayProperties
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-1.5",
-					children: toggleable.map((c) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => view.toggleColumn(c.key),
-						className: pillClass(view.isVisible(c.key)),
+					children: toggleable.map((c) => /* @__PURE__ */ jsx(Toggle, {
+						pressed: view.isVisible(c.key),
+						onPressedChange: () => view.toggleColumn(c.key),
+						className: pillClassName,
 						children: c.label
 					}, c.key))
 				})]
@@ -207,17 +179,14 @@ function ListDisplayMenu({ view, label }) {
 			view.showActions && view.actions.length > 0 && /* @__PURE__ */ jsxs("div", {
 				className: "mt-3 border-t border-(--theme-border) pt-3",
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: cx(SECTION_LABEL, "flex items-center gap-1"),
-					children: [t.pinnedActions, /* @__PURE__ */ jsx(TooltipInfo, {
-						className: "inline-flex",
-						text: t.pinnedActionsHelp
-					})]
+					className: clsx(SECTION_LABEL, "flex items-center gap-1"),
+					children: [t.pinnedActions, /* @__PURE__ */ jsx(InfoTip, { text: t.pinnedActionsHelp })]
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-1.5",
-					children: view.actions.map((a) => /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: () => view.togglePinned(a.key),
-						className: pillClass(view.isPinned(a.key)),
+					children: view.actions.map((a) => /* @__PURE__ */ jsx(Toggle, {
+						pressed: view.isPinned(a.key),
+						onPressedChange: () => view.togglePinned(a.key),
+						className: pillClassName,
 						children: a.label
 					}, a.key))
 				})]
@@ -234,165 +203,106 @@ function ListDisplayMenu({ view, label }) {
 		]
 	});
 }
-/** Capture phase: the popover panel stops mousedown propagation, so a
-* bubble-phase listener never sees clicks inside it. */
-function useCloseOnOutsideClick(open, close) {
-	const ref = useRef(null);
-	useEffect(() => {
-		if (!open) return;
-		const onDown = (e) => {
-			if (e.target instanceof Node && !ref.current?.contains(e.target)) close();
-		};
-		document.addEventListener("mousedown", onDown, true);
-		return () => document.removeEventListener("mousedown", onDown, true);
-	}, [open, close]);
-	return ref;
-}
-/** Single-choice picker for the Display menu's grouping and ordering rows. */
-function OptionDropdown({ options, value, onSelect }) {
+/** Single-choice picker for the Display panel's grouping and ordering rows. */
+function OptionSelect({ label, options, value, onSelect }) {
 	const t = useStrings().list;
-	const [open, setOpen] = useState(false);
-	const ref = useCloseOnOutsideClick(open, useCallback(() => setOpen(false), []));
 	const current = options.find((o) => o.value === value);
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: "relative",
-		children: [/* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsx(Select, {
+		"aria-label": label,
+		items: options,
+		value,
+		onValueChange: (next) => {
+			if (next !== null) onSelect(next);
+		},
+		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			onClick: () => setOpen((o) => !o),
 			className: "flex items-center gap-1.5 rounded-md border border-(--theme-border) px-2 py-1 text-[12px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
 			children: [current?.label ?? t.none, /* @__PURE__ */ jsx(FaChevronDown, { className: "h-2.5 w-2.5 opacity-60" })]
-		}), open && /* @__PURE__ */ jsx("div", {
-			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
-			children: options.map((o) => /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => {
-					onSelect(o.value);
-					setOpen(false);
-				},
-				className: cx("flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg)", value === o.value ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
-				children: [o.label, value === o.value && /* @__PURE__ */ jsx(FaCheck, { className: "h-3 w-3" })]
-			}, o.value))
-		})]
+		})
 	});
 }
+/** The Filter button's menu: a submenu for each facet, whose options toggle
+*  without closing it. F opens it. */
 function ListFilterMenu({ view, label }) {
 	const t = useStrings().list;
-	if (view.facets.length === 0) return null;
-	return /* @__PURE__ */ jsx(AnchoredPopover, {
-		icon: /* @__PURE__ */ jsx(FaFilter, { className: "h-3.5 w-3.5" }),
-		label: label ?? t.filter,
-		active: view.activeFilterCount > 0,
-		shortcut: "f",
-		panelClassName: "w-56 py-1",
-		children: /* @__PURE__ */ jsx(FilterMenuBody, { view })
-	});
-}
-/** Single-open submenu prevents overlapping; resets on panel remount so Filter opens clean. */
-function FilterMenuBody({ view }) {
-	const t = useStrings().list;
-	const [openKey, setOpenKey] = useState(null);
-	const closeTimer = useRef(void 0);
-	const openFacet = (key) => {
-		clearTimeout(closeTimer.current);
-		setOpenKey(key);
-	};
-	const scheduleClose = () => {
-		closeTimer.current = setTimeout(() => setOpenKey(null), 160);
-	};
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-		className: "flex items-center justify-between px-3 py-1",
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
-			children: t.filter
-		}), view.activeFilterCount > 0 && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: view.clearFilters,
-			className: "text-[12px] text-(--theme-muted-text-color) hover:text-(--theme-app)",
-			children: t.clear
-		})]
-	}), view.facets.map((facet) => /* @__PURE__ */ jsx(FilterFacetRow, {
-		view,
-		facet,
-		open: openKey === facet.key,
-		onEnter: () => openFacet(facet.key),
-		onLeave: scheduleClose
-	}, facet.key))] });
-}
-function FilterFacetRow({ view, facet, open, onEnter, onLeave }) {
-	const selected = view.filters[facet.key] ?? [];
-	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
-		role: "none",
-		onMouseEnter: onEnter,
-		onMouseLeave: onLeave,
-		onFocus: onEnter,
-		onBlur: onLeave,
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": open,
-			"aria-haspopup": "menu",
-			onClick: onEnter,
-			className: "flex w-full cursor-default items-center justify-between gap-3 px-3 py-1.5 text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
-			children: [/* @__PURE__ */ jsx("span", { children: facet.label }), /* @__PURE__ */ jsxs("span", {
-				className: "flex items-center gap-1.5",
-				children: [selected.length > 0 && /* @__PURE__ */ jsx("span", {
-					className: "text-[11px] text-(--theme-muted-text-color)",
-					children: selected.length
-				}), /* @__PURE__ */ jsx(LuChevronRight, { className: "h-3 w-3 opacity-60" })]
-			})]
-		}), open && /* @__PURE__ */ jsx(FacetOptions, {
-			view,
-			facet,
-			selected
+	const [open, setOpen] = useState(false);
+	const hasFacets = view.facets.length > 0;
+	useShortcutKey(hasFacets ? "f" : void 0, () => setOpen(true));
+	if (!hasFacets) return null;
+	const name = label ?? t.filter;
+	const active = view.activeFilterCount > 0;
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: name,
+			shortcut: "F",
+			disabled: open,
+			children: /* @__PURE__ */ jsxs(Menu.Trigger, {
+				"aria-label": name,
+				className: clsx(listControlButtonClasses, active && activeButtonClassName),
+				children: [/* @__PURE__ */ jsx(FaFilter, { className: "h-3.5 w-3.5" }), active && /* @__PURE__ */ jsx(ActiveDot, {})]
+			})
+		}), /* @__PURE__ */ jsxs(MenuPopup, {
+			align: "end",
+			className: "w-56",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-3 py-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
+					children: t.filter
+				}), active && /* @__PURE__ */ jsx(Menu.Item, {
+					closeOnClick: false,
+					onClick: view.clearFilters,
+					className: "cursor-pointer text-[12px] text-(--theme-muted-text-color) outline-none data-highlighted:text-(--theme-app)",
+					children: t.clear
+				})]
+			}), view.facets.map((facet) => /* @__PURE__ */ jsx(FacetSubmenu, {
+				view,
+				facet
+			}, facet.key))]
 		})]
 	});
 }
-/** Mounted only while the flyout is open, so the search box resets on reopen. */
-function FacetOptions({ view, facet, selected }) {
+function FacetSubmenu({ view, facet }) {
 	const strings = useStrings();
+	const matches = useQueryMatch();
 	const [query, setQuery] = useState("");
-	const needle = query.trim().toLowerCase();
-	const options = needle ? facet.options.filter((option) => selected.includes(option.value) || option.label.toLowerCase().includes(needle)) : facet.options;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("absolute right-full top-0 z-10 flex max-h-[70vh] flex-col", FLYOUT),
-		children: [facet.searchable && /* @__PURE__ */ jsx("div", {
-			className: "border-b border-(--theme-border) px-3 pb-1.5 pt-0.5",
-			children: /* @__PURE__ */ jsx("input", {
-				ref: focusOnMount,
-				type: "text",
-				autoComplete: "off",
-				"data-1p-ignore": true,
-				value: query,
-				onChange: (e) => setQuery(e.target.value),
+	const selected = view.filters[facet.key] ?? [];
+	const needle = query.trim();
+	const options = needle ? facet.options.filter((o) => selected.includes(o.value) || matches(needle, o.label)) : facet.options;
+	const rows = options.map((option) => {
+		const checked = selected.includes(option.value);
+		return /* @__PURE__ */ jsxs(MenuCheckboxItem, {
+			checked,
+			closeOnClick: false,
+			onCheckedChange: () => view.setFacetValues(facet.key, checked ? selected.filter((v) => v !== option.value) : [...selected, option.value]),
+			children: [option.icon, option.label]
+		}, option.value);
+	});
+	const submenu = /* @__PURE__ */ jsxs(Menu.SubmenuRoot, { children: [/* @__PURE__ */ jsxs(MenuSubmenuTrigger, { children: [facet.label, selected.length > 0 && /* @__PURE__ */ jsx("span", {
+		className: "ml-auto text-[11px] text-(--theme-muted-text-color)",
+		children: selected.length
+	})] }), /* @__PURE__ */ jsxs(MenuPopup, {
+		side: "inline-start",
+		children: [facet.searchable ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "sticky top-0 z-[1] border-b border-(--theme-border) bg-(--theme-app-bg) px-3 pb-1.5 pt-0.5",
+			children: /* @__PURE__ */ jsx(Menu.Input, {
 				placeholder: strings.list.searchOptions,
 				"aria-label": strings.list.searchOptions,
-				className: "w-full bg-transparent text-[13px] text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none"
+				className: "w-full bg-transparent text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-muted-text-color)"
 			})
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "min-h-0 overflow-y-auto",
-			children: [options.length === 0 && /* @__PURE__ */ jsx("div", {
-				className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
-				children: strings.dropdown.noOptionsFound
-			}), options.map((option) => {
-				const checked = selected.includes(option.value);
-				return /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					onMouseDown: (e) => e.preventDefault(),
-					onClick: () => view.setFacetValues(facet.key, checked ? selected.filter((v) => v !== option.value) : [...selected, option.value]),
-					className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "flex h-3.5 w-3.5 shrink-0 items-center justify-center text-(--theme-link)",
-							children: checked && /* @__PURE__ */ jsx(FaCheck, { className: "h-3 w-3" })
-						}),
-						option.icon,
-						option.label
-					]
-				}, option.value);
-			})]
+		}), /* @__PURE__ */ jsx(Menu.List, { children: rows })] }) : rows, options.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
+			children: strings.dropdown.noOptionsFound
 		})]
-	});
+	})] });
+	return facet.searchable ? /* @__PURE__ */ jsx(Menu.FilterProvider, {
+		filter: null,
+		value: query,
+		onValueChange: setQuery,
+		children: submenu
+	}) : submenu;
 }
 //#endregion
 export { AnchoredPopover, ListDisplayMenu, ListFilterMenu, listControlButtonClasses };

package/dist/list/UserHoverCard.d.ts

@@ -1,19 +1,7 @@
 import type { ReactNode } from 'react';
 import { type UILinkComponent } from '../components/Provider.js';
-/** Where an open hover card sits, and the handlers that keep it open. */
-export interface HoverCardPlacement {
-    x: number;
-    y: number;
-    onKeepOpen: () => void;
-    onLeave: () => void;
-}
-/** Opens `card` after a short hover or on focus of `children`. */
-export declare function HoverCardTrigger({ className, children, card, }: {
-    className?: string | undefined;
-    children: ReactNode;
-    card: (placement: HoverCardPlacement) => ReactNode;
-}): import("react").JSX.Element;
-export interface UserHoverCardProps extends HoverCardPlacement {
+/** A person's card, for `HoverCard`'s `card`. */
+export interface UserHoverCardProps {
     username: string;
     /** Display name; falls back to the username. */
     name?: string | null | undefined;
@@ -26,12 +14,10 @@ export interface UserHoverCardProps extends HoverCardPlacement {
     linkComponent?: UILinkComponent | undefined;
     /** Shows placeholder detail lines while the profile loads. */
     loading?: boolean | undefined;
-    /** Re-measures the card's position when this changes. */
-    relayoutKey?: unknown;
     /** Detail lines, usually `HoverCardRow`s, below the header. */
     children?: ReactNode;
 }
-export declare function UserHoverCard({ x, y, onKeepOpen, onLeave, username, name, avatarSrc, badge, href, linkComponent, loading, relayoutKey, children, }: UserHoverCardProps): import("react").JSX.Element;
+export declare function UserHoverCard({ username, name, avatarSrc, badge, href, linkComponent, loading, children, }: UserHoverCardProps): import("react").JSX.Element;
 /** One detail line of a hover card: a leading icon and its content. With
  * `onClick` the line is a button. */
 export declare function HoverCardRow({ icon, children, title, align, truncate, onClick, }: {