@parallelworks/ui 0.77.0 → 0.78.0

package/dist/list/ListFilterBar.js

@@ -0,0 +1,789 @@
+import { cx } from "../cx.js";
+import { buttonClasses } from "../components/buttonClasses.js";
+import { AddIcon, CheckIcon, CloseIcon } from "../icons.js";
+import { MenuCheckboxItem, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioItem, MenuSeparator } from "../components/Menu.js";
+import { useLocale, useStrings } from "../components/Provider.js";
+import { useQueryMatch } from "../components/search.js";
+import { Popover } from "../components/Popover.js";
+import { Input } from "../components/Input.js";
+import { Combobox } from "../components/Combobox.js";
+import { Calendar } from "../components/DatePicker.js";
+import { Drawer } from "../components/Drawer.js";
+import { DATE_PRESETS, fieldOperators, isDatePreset, isMultiple, parseDay, toDay } from "./filterModel.js";
+import { Menu } from "@base-ui/react/menu";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/list/ListFilterBar.tsx
+/** Below this width the row stops at two lines and the rest open in a sheet. */
+var NARROW_PX = 640;
+var partClassName = "relative flex min-w-0 shrink-0 cursor-pointer items-center gap-1.5 px-2 outline-none transition-colors before:absolute before:inset-x-0 before:-inset-y-0.5 before:content-[''] hover:bg-(--theme-hover) focus-visible:z-[1] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus) data-popup-open:bg-(--theme-hover)";
+function Divider() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "w-px shrink-0 self-stretch bg-(--theme-border)"
+	});
+}
+/** The labels a filter's values show, and their icons. */
+function valueParts(field, filter, t, labels, locale) {
+	const labelOf = (v) => labels.get(v)?.label ?? field.options?.find((o) => o.value === v)?.label ?? field.valueLabel?.(v) ?? v;
+	const iconOf = (v) => labels.get(v)?.icon ?? field.options?.find((o) => o.value === v)?.icon;
+	const dayText = (v) => {
+		if (!v) return "";
+		if (isDatePreset(v)) return t.datePreset(v);
+		const day = parseDay(v);
+		return day ? t.formatDate(day, locale) : v;
+	};
+	switch (field.kind) {
+		case "date": return {
+			all: [filter.op === "between" ? t.between(dayText(filter.values[0]), dayText(filter.values[1])) : dayText(filter.values[0])],
+			icons: []
+		};
+		case "boolean": return {
+			all: [filter.values[0] === "false" ? t.no : t.yes],
+			icons: []
+		};
+		case "text": return {
+			all: [filter.values[0] ?? ""],
+			icons: []
+		};
+		default: return {
+			all: filter.values.map(labelOf),
+			icons: filter.values.slice(0, field.kind === "people" ? 3 : 1).map(iconOf).filter(Boolean)
+		};
+	}
+}
+/** One filter as a sentence: its field, its condition and its values, each opening its own
+*  picker, and a button that removes it. */
+function FilterChip({ filters, filter, field, stretch = false, answers, onRemoved }) {
+	const t = useStrings().filters;
+	const [seen] = useState(() => /* @__PURE__ */ new Map());
+	const [open, setOpen] = useState(null);
+	const requested = useRef(false);
+	const valueButton = useRef(null);
+	const request = answers && filters.editRequest?.field === filter.field ? filters.editRequest : null;
+	const { clearEditRequest } = filters;
+	useEffect(() => {
+		if (!request) return;
+		const frame = requestAnimationFrame(() => {
+			requested.current = true;
+			setOpen(request.part);
+			clearEditRequest(request.id);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [request, clearEditRequest]);
+	const unset = filter.values.length === 0 && filter.op !== "isSet" && filter.op !== "isNotSet";
+	const fixed = Boolean(field.required || field.pinned);
+	const showsAny = unset && fixed;
+	const isDraft = filters.draft === filter.field;
+	const removable = !field.required && !(field.pinned && unset);
+	const operators = fieldOperators(field);
+	const { all, icons } = valueParts(field, filter, t, seen, useLocale());
+	const shown = all.slice(0, 2);
+	const hidden = all.length - shown.length;
+	const valueText = unset ? showsAny ? t.any : t.pending : t.list(shown);
+	const operatorText = t.operator(filter.op, filter.values.length);
+	const noValuePart = filter.op === "isSet" || filter.op === "isNotSet" || field.kind === "boolean" && filter.values[0] !== "false";
+	const noOperatorPart = showsAny || field.kind === "boolean" && filter.values[0] !== "false";
+	const readAll = unset ? valueText : t.list(all);
+	const remove = () => {
+		if (field.pinned && !field.required) filters.update(filter.field, { values: [] });
+		else filters.remove(filter.field);
+	};
+	const onKeyDown = (e) => {
+		if ((e.key === "Backspace" || e.key === "Delete") && removable && open === null) {
+			e.preventDefault();
+			remove();
+			onRemoved?.();
+		}
+	};
+	const setPart = (part) => (next) => setOpen((current) => next ? part : current === part ? null : current);
+	const onValueClose = () => {
+		const wasRequested = requested.current;
+		requested.current = false;
+		if (isDraft && filter.values.length === 0) {
+			filters.discardDraft();
+			return;
+		}
+		if (wasRequested) setTimeout(() => valueButton.current?.focus(), 0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": t.chip(field.label, noOperatorPart ? "" : operatorText, noValuePart ? "" : readAll),
+		"data-filter-chip": filter.field,
+		onKeyDown,
+		className: cx("flex h-7 max-w-full items-stretch overflow-hidden rounded-md border border-(--theme-border) bg-(--theme-panel-bg) text-[12px] text-(--theme-app)", stretch ? "w-full" : "w-fit"),
+		children: [
+			/* @__PURE__ */ jsx(FieldMenu, {
+				filters,
+				field,
+				open: open === "field",
+				onOpenChange: setPart("field")
+			}),
+			!noOperatorPart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), operators.length > 1 ? /* @__PURE__ */ jsx(OperatorMenu, {
+				filters,
+				filter,
+				operators,
+				open: open === "operator",
+				onOpenChange: setPart("operator")
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0 items-center px-2 text-(--theme-muted-text-color)",
+				children: operatorText
+			})] }),
+			!noValuePart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(ValuePicker, {
+				filters,
+				filter,
+				field,
+				seen,
+				open: open === "value",
+				onOpenChange: (next) => {
+					setPart("value")(next);
+					if (!next) onValueClose();
+				},
+				trigger: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					ref: valueButton,
+					"aria-label": t.changeValue(readAll || field.label),
+					className: cx(partClassName, "shrink", stretch && "flex-1"),
+					children: [
+						icons.length > 0 && /* @__PURE__ */ jsx("span", {
+							className: "flex shrink-0 items-center -space-x-1 [&_svg]:size-3",
+							children: icons.map((icon, i) => /* @__PURE__ */ jsx("span", {
+								className: "flex",
+								children: icon
+							}, i))
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: cx("min-w-0 truncate", !stretch && "max-w-40", unset && "text-(--theme-muted-text-color)"),
+							children: valueText
+						}),
+						hidden > 0 && /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-(--theme-muted-text-color)",
+							children: t.more(hidden)
+						})
+					]
+				})
+			})] }),
+			removable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t.remove(field.label),
+				onClick: remove,
+				className: cx(partClassName, "px-1.5 text-(--theme-muted-text-color) hover:text-(--theme-app)", stretch && "ml-auto"),
+				children: /* @__PURE__ */ jsx(CloseIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})
+			})] })
+		]
+	});
+}
+function FieldMenu({ filters, field, open, onOpenChange }) {
+	const t = useStrings().filters;
+	const used = new Set(filters.chips.map((f) => f.field));
+	const others = filters.fields.filter((f) => f.key === field.key || !used.has(f.key) && !f.required && !f.pinned);
+	const fixed = field.required || field.pinned;
+	const label = /* @__PURE__ */ jsxs(Fragment$1, { children: [field.icon && /* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 text-(--theme-muted-text-color) [&_svg]:size-3.5",
+		children: field.icon
+	}), /* @__PURE__ */ jsx("span", {
+		className: "whitespace-nowrap",
+		children: field.label
+	})] });
+	if (fixed || others.length < 2) return /* @__PURE__ */ jsx("span", {
+		className: "flex shrink-0 items-center gap-1.5 px-2",
+		children: label
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t.changeField(field.label),
+				className: partClassName
+			}),
+			children: label
+		}), /* @__PURE__ */ jsx(MenuPopup, {
+			className: "max-w-[min(20rem,var(--available-width))]",
+			children: /* @__PURE__ */ jsx(Menu.RadioGroup, {
+				value: field.key,
+				onValueChange: (next) => filters.replaceField(field.key, next),
+				children: others.map((f) => /* @__PURE__ */ jsxs(MenuRadioItem, {
+					value: f.key,
+					children: [f.icon && /* @__PURE__ */ jsx("span", {
+						className: "flex [&_svg]:size-3.5",
+						children: f.icon
+					}), f.label]
+				}, f.key))
+			})
+		})]
+	});
+}
+function OperatorMenu({ filters, filter, operators, open, onOpenChange }) {
+	const t = useStrings().filters;
+	const count = filter.values.length;
+	const text = t.operator(filter.op, count);
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": t.changeOperator(text),
+				className: cx(partClassName, "text-(--theme-muted-text-color)")
+			}),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "whitespace-nowrap",
+				children: text
+			})
+		}), /* @__PURE__ */ jsx(MenuPopup, { children: /* @__PURE__ */ jsx(Menu.RadioGroup, {
+			value: filter.op,
+			onValueChange: (op) => {
+				const values = op === "between" || filter.op === "between" || op === "isSet" || op === "isNotSet" ? op === "isSet" || op === "isNotSet" ? [] : filter.values.filter((v) => !isDatePreset(v)).slice(0, op === "between" ? 2 : 1) : filter.op === "is" && (op === "after" || op === "before") ? filter.values.filter((v) => !isDatePreset(v)) : filter.values;
+				filters.update(filter.field, {
+					op,
+					values
+				});
+			},
+			children: operators.map((op) => /* @__PURE__ */ jsx(MenuRadioItem, {
+				value: op,
+				children: t.operator(op, Math.max(count, 1))
+			}, op))
+		}) })]
+	});
+}
+function ValuePicker(props) {
+	switch (props.field.kind) {
+		case "date": return /* @__PURE__ */ jsx(DateValuePicker, { ...props });
+		case "text": return /* @__PURE__ */ jsx(TextValuePicker, { ...props });
+		case "boolean": return /* @__PURE__ */ jsx(BooleanValuePicker, { ...props });
+		default: return /* @__PURE__ */ jsx(OptionValuePicker, { ...props });
+	}
+}
+/** Options from the server for what is typed, while the picker is open. */
+function useLoadedOptions(field, query, open) {
+	const [state, setState] = useState({
+		options: field.options ?? [],
+		loading: false
+	});
+	const { loadOptions } = field;
+	useEffect(() => {
+		if (!loadOptions || !open) return;
+		const controller = new AbortController();
+		setState((s) => ({
+			...s,
+			loading: true
+		}));
+		loadOptions(query, controller.signal).then((options) => {
+			if (!controller.signal.aborted) setState({
+				options,
+				loading: false
+			});
+		}, () => {
+			if (!controller.signal.aborted) setState((s) => ({
+				...s,
+				loading: false
+			}));
+		});
+		return () => controller.abort();
+	}, [
+		loadOptions,
+		query,
+		open
+	]);
+	return loadOptions ? state : {
+		options: field.options ?? [],
+		loading: false
+	};
+}
+function OptionValuePicker({ filters, filter, field, seen, open, onOpenChange, trigger }) {
+	const strings = useStrings();
+	const matches = useQueryMatch();
+	const [query, setQuery] = useState("");
+	const multiple = isMultiple(field);
+	const loaded = useLoadedOptions(field, query.trim(), open);
+	for (const option of loaded.options) seen.set(option.value, option);
+	const searchable = field.searchable ?? (Boolean(field.loadOptions) || (field.options?.length ?? 0) > 8);
+	const needle = query.trim();
+	const selected = filter.values;
+	const all = [...selected.filter((v) => !loaded.options.some((o) => o.value === v)).map((v) => seen.get(v) ?? {
+		value: v,
+		label: field.valueLabel?.(v) ?? v
+	}), ...loaded.options];
+	const options = needle && !field.loadOptions ? all.filter((o) => selected.includes(o.value) || matches(needle, o.label, o.description, o.group)) : all;
+	const set = (values) => filters.update(filter.field, { values });
+	const content = (option) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		option.icon && /* @__PURE__ */ jsx("span", {
+			className: "flex shrink-0 [&_svg]:size-3.5",
+			children: option.icon
+		}),
+		/* @__PURE__ */ jsxs("span", {
+			className: "flex min-w-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: option.label
+			}), option.description && /* @__PURE__ */ jsx("span", {
+				className: "truncate text-[11px] text-(--theme-muted-text-color)",
+				children: option.description
+			})]
+		}),
+		option.count !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "shrink-0 text-[11px] tabular-nums text-(--theme-muted-text-color)",
+			children: COUNT.format(option.count)
+		})
+	] });
+	const row = (option) => {
+		const checked = selected.includes(option.value);
+		return multiple ? /* @__PURE__ */ jsx(MenuCheckboxItem, {
+			checked,
+			closeOnClick: false,
+			onCheckedChange: () => set(checked ? selected.filter((v) => v !== option.value) : [...selected, option.value]),
+			children: content(option)
+		}, option.value) : /* @__PURE__ */ jsx(MenuRadioItem, {
+			value: option.value,
+			children: content(option)
+		}, option.value);
+	};
+	const groups = [];
+	for (const option of options) {
+		const last = groups.find((g) => g.label === option.group);
+		if (last) last.options.push(option);
+		else groups.push({
+			label: option.group,
+			options: [option]
+		});
+	}
+	const rows = groups.map((g) => g.label ? /* @__PURE__ */ jsxs(Menu.Group, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: g.label }), g.options.map(row)] }, g.label) : g.options.map(row));
+	const list = multiple ? rows : /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		value: selected[0] ?? null,
+		onValueChange: (v) => set([v]),
+		children: rows
+	});
+	if (searchable) return /* @__PURE__ */ jsx(SearchablePicker, {
+		options,
+		selected,
+		multiple,
+		loading: loaded.loading,
+		open,
+		onOpenChange: (next) => {
+			onOpenChange(next);
+			if (!next) setQuery("");
+		},
+		onQueryChange: setQuery,
+		onValuesChange: set,
+		trigger
+	});
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(MenuPopup, {
+			className: "w-max min-w-56 max-w-[min(28rem,var(--available-width))]",
+			children: [list, !loaded.loading && options.length === 0 && /* @__PURE__ */ jsx("div", {
+				className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
+				children: strings.dropdown.noOptionsFound
+			})]
+		})]
+	});
+}
+/** A long list's picker, such as of people: typing narrows it and Enter takes the first match,
+*  and only the rows in view are drawn. */
+function SearchablePicker({ options, selected, multiple, loading, open, onOpenChange, onQueryChange, onValuesChange, trigger }) {
+	const strings = useStrings();
+	const items = [];
+	const groups = /* @__PURE__ */ new Map();
+	for (const option of options) {
+		const item = {
+			value: option.value,
+			label: option.label,
+			description: option.description,
+			icon: option.icon && /* @__PURE__ */ jsx("span", {
+				className: "flex [&_svg]:size-3.5",
+				children: option.icon
+			}),
+			hint: option.count === void 0 ? void 0 : COUNT.format(option.count)
+		};
+		if (!option.group) {
+			items.push(item);
+			continue;
+		}
+		let group = groups.get(option.group);
+		if (!group) {
+			group = [];
+			groups.set(option.group, group);
+			items.push({
+				label: option.group,
+				items: group
+			});
+		}
+		group.push(item);
+	}
+	const shared = {
+		items,
+		placeholder: strings.list.searchOptions,
+		open,
+		onOpenChange,
+		onQueryChange,
+		loading: loading && options.length === 0,
+		trigger
+	};
+	return multiple ? /* @__PURE__ */ jsx(Combobox, {
+		...shared,
+		multiple: true,
+		value: selected,
+		onValueChange: onValuesChange
+	}) : /* @__PURE__ */ jsx(Combobox, {
+		...shared,
+		value: selected[0] ?? null,
+		onValueChange: (value) => {
+			if (value !== null) onValuesChange([value]);
+		}
+	});
+}
+var COUNT = new Intl.NumberFormat();
+function BooleanValuePicker({ filters, filter, open, onOpenChange, trigger }) {
+	const t = useStrings().filters;
+	return /* @__PURE__ */ jsxs(Menu.Root, {
+		open,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: trigger }), /* @__PURE__ */ jsx(MenuPopup, { children: /* @__PURE__ */ jsxs(Menu.RadioGroup, {
+			value: filter.values[0] ?? "true",
+			onValueChange: (v) => filters.update(filter.field, { values: [v] }),
+			children: [/* @__PURE__ */ jsx(MenuRadioItem, {
+				value: "true",
+				children: t.yes
+			}), /* @__PURE__ */ jsx(MenuRadioItem, {
+				value: "false",
+				children: t.no
+			})]
+		}) })]
+	});
+}
+function DateValuePicker({ filters, filter, open, onOpenChange, trigger }) {
+	const t = useStrings().filters;
+	const [custom, setCustom] = useState(false);
+	const [first, second] = filter.values;
+	const choosePreset = (preset) => {
+		filters.update(filter.field, {
+			op: "is",
+			values: [preset]
+		});
+		onOpenChange(false);
+	};
+	const showCalendar = custom || filter.op !== "is" || first !== void 0 && !isDatePreset(first);
+	const range = filter.op === "between" || custom && filter.op === "is";
+	return /* @__PURE__ */ jsxs(Popover, {
+		"aria-label": t.changeValue(""),
+		trigger,
+		open,
+		onOpenChange: (next) => {
+			onOpenChange(next);
+			if (!next) setCustom(false);
+		},
+		align: "start",
+		initialFocus: "first-control",
+		className: "p-0",
+		children: [filter.op === "is" && /* @__PURE__ */ jsxs("div", {
+			className: cx("flex flex-col p-1", showCalendar && "border-b border-(--theme-border)"),
+			children: [DATE_PRESETS.map((preset) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-pressed": first === preset,
+				onClick: () => choosePreset(preset),
+				className: "flex h-7 cursor-pointer items-center justify-between gap-4 rounded px-2 text-left text-[13px] outline-none hover:bg-(--theme-hover) focus-visible:bg-(--theme-hover)",
+				children: [t.datePreset(preset), first === preset && /* @__PURE__ */ jsx(CheckIcon, {
+					"aria-hidden": "true",
+					className: "size-3"
+				})]
+			}, preset)), !showCalendar && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setCustom(true),
+				className: "flex h-7 cursor-pointer items-center rounded px-2 text-left text-[13px] outline-none hover:bg-(--theme-hover) focus-visible:bg-(--theme-hover)",
+				children: t.customDate
+			})]
+		}), showCalendar && (range ? /* @__PURE__ */ jsx(Calendar, {
+			mode: "range",
+			autoFocus: custom,
+			selected: {
+				from: parseDay(first),
+				to: parseDay(second)
+			},
+			onSelect: (next) => {
+				if (!next?.from) return;
+				const from = toDay(next.from);
+				const to = next.to ? toDay(next.to) : "";
+				filters.update(filter.field, {
+					op: "between",
+					values: to ? [from, to] : [from]
+				});
+				if (to && from !== to) onOpenChange(false);
+			}
+		}) : /* @__PURE__ */ jsx(Calendar, {
+			mode: "single",
+			autoFocus: true,
+			selected: parseDay(first),
+			onSelect: (day) => {
+				if (day) {
+					filters.update(filter.field, { values: [toDay(day)] });
+					onOpenChange(false);
+				}
+			}
+		}))]
+	});
+}
+function TextValuePicker({ filters, filter, field, open, onOpenChange, trigger }) {
+	const t = useStrings().filters;
+	const [text, setText] = useState(filter.values[0] ?? "");
+	useEffect(() => {
+		if (open) setText(filter.values[0] ?? "");
+	}, [open, filter.values]);
+	return /* @__PURE__ */ jsx(Popover, {
+		"aria-label": field.label,
+		trigger,
+		open,
+		onOpenChange,
+		align: "start",
+		className: "w-64 p-2",
+		children: /* @__PURE__ */ jsx(Input, {
+			size: "sm",
+			"aria-label": field.label,
+			placeholder: t.textPlaceholder,
+			value: text,
+			onChange: (e) => setText(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					const value = text.trim();
+					filters.update(filter.field, { values: value ? [value] : [] });
+					onOpenChange(false);
+				}
+			}
+		})
+	});
+}
+/** The fields a filter can be added on. Picking one adds its chip and opens its value picker
+*  there; a field already in use opens its chip's picker. */
+function AddFilterMenu({ filters, trigger, align = "start" }) {
+	const strings = useStrings();
+	const t = strings.filters;
+	const matches = useQueryMatch();
+	const [query, setQuery] = useState("");
+	const picked = useRef(null);
+	const used = new Set(filters.active.map((f) => f.field));
+	const searchable = filters.fields.length > 8;
+	const needle = query.trim();
+	const fields = needle ? filters.fields.filter((f) => matches(needle, f.label)) : filters.fields;
+	const removable = filters.active.some((f) => !filters.fields.find((x) => x.key === f.field)?.required);
+	const resetting = filters.hasDefaults;
+	const showClear = resetting ? !filters.isDefault : removable;
+	const rows = fields.map((f) => /* @__PURE__ */ jsxs(MenuItem, {
+		onClick: () => {
+			picked.current = f.key;
+		},
+		children: [
+			f.icon && /* @__PURE__ */ jsx("span", {
+				className: "flex shrink-0 text-(--theme-muted-text-color) [&_svg]:size-3.5",
+				children: f.icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: f.label
+			}),
+			used.has(f.key) && /* @__PURE__ */ jsx(CheckIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5 shrink-0 opacity-80"
+			})
+		]
+	}, f.key));
+	const menu = /* @__PURE__ */ jsxs(Menu.Root, {
+		onOpenChange: (next) => {
+			if (!next) setQuery("");
+		},
+		onOpenChangeComplete: (next) => {
+			const key = picked.current;
+			picked.current = null;
+			if (!next && key) filters.begin(key);
+		},
+		children: [/* @__PURE__ */ jsx(Menu.Trigger, { render: trigger }), /* @__PURE__ */ jsxs(MenuPopup, {
+			align,
+			className: "w-56",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
+					children: t.addFilter
+				}),
+				searchable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+					className: "sticky top-0 z-[1] -mx-1 mb-1 border-y border-(--theme-border) bg-(--theme-app-bg) px-3 py-1.5",
+					children: /* @__PURE__ */ jsx(Menu.Input, {
+						placeholder: t.searchFields,
+						"aria-label": t.searchFields,
+						className: "w-full bg-transparent text-[13px] text-(--theme-app) outline-none placeholder:text-(--theme-placeholder)"
+					})
+				}), /* @__PURE__ */ jsx(Menu.List, { children: rows })] }) : rows,
+				fields.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
+					children: strings.dropdown.noOptionsFound
+				}),
+				showClear && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
+					onClick: resetting ? filters.reset : filters.clear,
+					children: resetting ? strings.common.reset : strings.common.clear
+				})] })
+			]
+		})]
+	});
+	return searchable ? /* @__PURE__ */ jsx(Menu.FilterProvider, {
+		filter: null,
+		value: query,
+		onValueChange: setQuery,
+		children: menu
+	}) : menu;
+}
+/** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
+*  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
+*  only while a filter is on or a field is required. At phone width it stops at two lines and
+*  a "+n filters" chip opens the rest in a sheet. */
+function ListFilterBar({ filters, trailing, label, className }) {
+	const strings = useStrings();
+	const t = strings.filters;
+	const registerBar = filters?.registerBar;
+	useEffect(() => registerBar?.(), [registerBar]);
+	const row = useRef(null);
+	const [narrow, setNarrow] = useState(false);
+	const [width, setWidth] = useState(0);
+	const [limit, setLimit] = useState(null);
+	const [sheet, setSheet] = useState(false);
+	const [focusAt, setFocusAt] = useState(null);
+	const chips = filters ? orderedChips(filters) : [];
+	const fieldOf = (key) => filters?.fields.find((f) => f.key === key);
+	const empty = chips.length === 0;
+	const chipKeys = chips.map((c) => c.filter.field).join("\0");
+	useLayoutEffect(() => {
+		const el = row.current;
+		if (!el) return;
+		const measure = () => {
+			const w = el.getBoundingClientRect().width;
+			setWidth(w);
+			setNarrow(w > 0 && w < NARROW_PX);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [empty]);
+	useLayoutEffect(() => setLimit(null), [
+		width,
+		chipKeys,
+		narrow
+	]);
+	useLayoutEffect(() => {
+		const el = row.current;
+		if (!el || !narrow) return;
+		const tops = /* @__PURE__ */ new Set();
+		for (const child of el.children) tops.add(Math.round(child.offsetTop));
+		const shown = limit ?? chips.length;
+		if (tops.size > 2 && shown > 1) setLimit(shown - 1);
+	});
+	useEffect(() => {
+		if (focusAt === null || !row.current) return;
+		(row.current.querySelectorAll("[data-filter-chip]")[focusAt]?.querySelector("button") ?? row.current.querySelector("[data-filter-add]"))?.focus();
+		setFocusAt(null);
+	}, [focusAt]);
+	const visible = narrow && limit !== null ? limit : chips.length;
+	const shownChips = chips.filter((c, i) => i < visible || c.filter.field === filters?.draft);
+	const overflow = chips.length - shownChips.length;
+	const request = filters?.editRequest;
+	const hiddenRequest = request && !shownChips.some((c) => c.filter.field === request.field) && chips.some((c) => c.filter.field === request.field);
+	useEffect(() => {
+		if (hiddenRequest) setSheet(true);
+	}, [hiddenRequest]);
+	if (!filters || empty) return null;
+	const removable = filters.active.some((f) => !fieldOf(f.field)?.required);
+	const resetting = filters.hasDefaults;
+	const clearButton = (resetting ? !filters.isDefault : removable) && /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: resetting ? filters.reset : filters.clear,
+		className: buttonClasses({
+			variant: "ghost",
+			size: "sm"
+		}),
+		children: resetting ? strings.common.reset : strings.common.clear
+	});
+	const addButton = /* @__PURE__ */ jsx(AddFilterMenu, {
+		filters,
+		trigger: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"data-filter-add": "",
+			className: buttonClasses({
+				variant: "ghost",
+				size: "sm"
+			}),
+			children: [/* @__PURE__ */ jsx(AddIcon, { "aria-hidden": "true" }), t.addFilter]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: row,
+		role: "group",
+		"aria-label": label ?? t.activeFilters,
+		className: cx("flex flex-wrap items-center gap-1.5 py-1.5", className),
+		children: [
+			shownChips.map(({ filter, field }, i) => /* @__PURE__ */ jsx(FilterChip, {
+				filters,
+				filter,
+				field,
+				answers: !sheet,
+				onRemoved: () => setFocusAt(i)
+			}, filter.field)),
+			overflow > 0 && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setSheet(true),
+				className: "flex h-7 cursor-pointer items-center rounded-md border border-dashed border-(--theme-border) px-2 text-[12px] text-(--theme-app) hover:bg-(--theme-hover) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus)",
+				children: t.overflow(overflow)
+			}),
+			addButton,
+			clearButton,
+			trailing && /* @__PURE__ */ jsx("div", {
+				className: "ml-auto flex items-center gap-1.5",
+				children: trailing
+			}),
+			/* @__PURE__ */ jsx(Drawer, {
+				open: sheet,
+				onClose: () => setSheet(false),
+				title: t.sheetTitle,
+				width: 400,
+				footer: /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center gap-1.5",
+					children: [addButton, clearButton]
+				}),
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: chips.map(({ filter, field }) => /* @__PURE__ */ jsx(FilterChip, {
+						filters,
+						filter,
+						field,
+						stretch: true,
+						answers: sheet
+					}, filter.field))
+				})
+			})
+		]
+	});
+}
+/** Required and pinned fields first, unset ones reading "Any", then filters in the order added. */
+function orderedChips(filters) {
+	const out = [];
+	for (const field of filters.fields) if (field.required || field.pinned) out.push({
+		field,
+		filter: filters.chips.find((c) => c.field === field.key) ?? {
+			field: field.key,
+			op: fieldOperators(field)[0] ?? "is",
+			values: []
+		}
+	});
+	for (const filter of filters.chips) {
+		const field = filters.fields.find((f) => f.key === filter.field);
+		if (field && !field.required && !field.pinned) out.push({
+			filter,
+			field
+		});
+	}
+	return out;
+}
+//#endregion
+export { AddFilterMenu, FilterChip, ListFilterBar };