@parallelworks/ui 0.77.0 → 0.79.0

package/dist/list/listView.js

@@ -1,5 +1,6 @@
 import { usePersistedState, useStrings } from "../components/Provider.js";
 import { actionsColumnWidth } from "./ListTable.js";
+import { useListFilters } from "./useListFilters.js";
 import { useCallback, useMemo } from "react";
 //#region src/list/listView.tsx
 var PRIORITY_SHOW_CLASS = {
@@ -14,11 +15,16 @@ function columnResponsiveClass(col, i) {
 	if (stacks(col, i)) return PRIORITY_SHOW_CLASS.medium;
 	return col.priority ? PRIORITY_SHOW_CLASS[col.priority] : "";
 }
+/** A column's classes for its header and every cell: when it shows, and how it aligns. */
+function columnClass(col, i) {
+	const show = columnResponsiveClass(col, i);
+	return col.align === "end" ? show ? `${show} text-right` : "text-right" : show;
+}
 var DEFAULT_ORDER = "__default";
 var FAVORITE_ORDER = "__favorite";
 /** Persisted grouping + column-visibility + field-filter state for a list page,
 * driving the shared Display/Filter menus. */
-function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], actions = [], actionCount, defaultShowColumnHeaders = true, defaultShowActions = true, isFavorite, isOn, createdAt }) {
+function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], defaultGroupBy, orderBys = [], defaultOrderBy, facets = [], filterFields, defaultFilters, filterStore, rememberFilters = true, actions = [], actionCount, defaultShowColumnHeaders = true, defaultShowActions = true, isFavorite, isOn, createdAt }) {
 	const t = useStrings().list;
 	const tiebreak = orderBys[0]?.compare;
 	const effectiveOrderBys = useMemo(() => {
@@ -59,23 +65,20 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const [alwaysShowActions, setAlwaysShowActions] = usePersistedState(`${storageKey}:alwaysShowActions`, false);
 	const [orderBy, setOrderBy] = usePersistedState(`${storageKey}:orderBy`, defaultOrderByValue);
 	const [orderDir, setOrderDir] = usePersistedState(`${storageKey}:orderDir`, "asc");
-	const [localFilters, setLocalFilters] = usePersistedState(`${storageKey}:filters`, {});
-	const [sharedFilters, setSharedFilters] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, {});
-	const sharedKeys = useMemo(() => new Set(facets.filter((f) => f.shared).map((f) => f.key)), [facets]);
+	const fields = useMemo(() => [...facets.map(facetField), ...filterFields ?? []], [facets, filterFields]);
+	const filterState = useListFilters({
+		storageKey,
+		sharedFiltersKey,
+		fields,
+		defaultFilters,
+		store: filterStore,
+		remember: rememberFilters
+	});
 	const filters = useMemo(() => {
-		if (sharedKeys.size === 0) return localFilters;
-		const merged = {};
-		for (const [key, values] of Object.entries(localFilters)) if (!sharedKeys.has(key)) merged[key] = values;
-		for (const key of sharedKeys) {
-			const values = sharedFilters[key];
-			if (values?.length) merged[key] = values;
-		}
-		return merged;
-	}, [
-		localFilters,
-		sharedFilters,
-		sharedKeys
-	]);
+		const out = {};
+		for (const f of filterState.active) if (f.op === "is") out[f.field] = [...f.values];
+		return out;
+	}, [filterState.active]);
 	const pinnedCount = actionCount ?? pinnedKeys.filter((key) => actions.some((action) => action.key === key)).length;
 	const effectiveShowActions = showActions || alwaysShowActions;
 	const actionsWidth = effectiveShowActions ? actionsColumnWidth(pinnedCount) : 0;
@@ -84,35 +87,24 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		return Boolean(col?.alwaysVisible) || !hiddenKeys.includes(key);
 	}, [columns, hiddenKeys]);
 	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (c.alwaysVisible || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
-	const columnClasses = useMemo(() => visibleColumns.map(columnResponsiveClass), [visibleColumns]);
+	const columnClasses = useMemo(() => visibleColumns.map(columnClass), [visibleColumns]);
 	const columnStacks = useMemo(() => visibleColumns.map(stacks), [visibleColumns]);
 	const toggleColumn = useCallback((key) => setHiddenKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setHiddenKeys]);
+	const { add, update, remove } = filterState;
 	const setFacetValues = useCallback((key, values) => {
-		const update = (prev) => {
-			const next = { ...prev };
-			if (values.length) next[key] = values;
-			else delete next[key];
-			return next;
-		};
-		if (sharedKeys.has(key)) setSharedFilters(update);
-		else setLocalFilters(update);
-	}, [
-		setLocalFilters,
-		setSharedFilters,
-		sharedKeys
-	]);
-	const clearFilters = useCallback(() => {
-		setLocalFilters({});
-		if (sharedKeys.size > 0) setSharedFilters((prev) => {
-			const next = { ...prev };
-			for (const key of sharedKeys) delete next[key];
-			return next;
+		if (values.length === 0) remove(key);
+		else if (filterState.active.some((f) => f.field === key)) update(key, {
+			op: "is",
+			values
 		});
+		else add(key, "is", values);
 	}, [
-		setLocalFilters,
-		setSharedFilters,
-		sharedKeys
+		add,
+		update,
+		remove,
+		filterState.active
 	]);
+	const clearFilters = filterState.clear;
 	const isPinned = useCallback((key) => pinnedKeys.includes(key), [pinnedKeys]);
 	const togglePinned = useCallback((key) => setPinnedKeys((prev) => prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]), [setPinnedKeys]);
 	const toggleColumnHeaders = useCallback(() => setShowColumnHeaders((prev) => !prev), [setShowColumnHeaders]);
@@ -206,14 +198,12 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		sortBy,
 		applyOrder,
 		facets,
+		filterState,
 		filters,
 		setFacetValues,
 		clearFilters,
-		activeFilterCount: useMemo(() => Object.values(filters).filter((v) => v && v.length > 0).length, [filters]),
-		applyFilters: useCallback((rows) => rows.filter((row) => facets.every((f) => {
-			const selected = filters[f.key];
-			return !selected || selected.length === 0 ? true : f.matches(row, selected);
-		})), [facets, filters]),
+		activeFilterCount: filterState.count,
+		applyFilters: useCallback((rows) => filterState.apply(rows), [filterState.apply]),
 		actions,
 		isPinned,
 		togglePinned,
@@ -227,5 +217,17 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		resetDisplay
 	};
 }
+/** A facet as the field it is shorthand for. */
+function facetField(facet) {
+	return {
+		key: facet.key,
+		label: facet.label,
+		kind: "enum",
+		options: facet.options,
+		searchable: facet.searchable,
+		shared: facet.shared,
+		matches: (row, filter) => filter.op === "isNot" ? !facet.matches(row, [...filter.values]) : facet.matches(row, [...filter.values])
+	};
+}
 //#endregion
 export { DEFAULT_ORDER, FAVORITE_ORDER, useListView };

package/dist/list/rowMenu.d.ts

@@ -1,5 +1,5 @@
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import type { OpenMenu } from '../components/ContextMenu.js';
+import { type OpenMenu } from '../components/ContextMenu.js';
 import type { MenuAction, MenuEntry, MenuSubmenu } from '../components/MenuEntries.js';
 /** An action on a row, which its menu lists and its pinned buttons show, named by `key`. */
 export type RowAction = MenuAction & {
@@ -29,8 +29,8 @@ export declare function useRowMenuActive(openMenu: OpenMenu): {
     active: boolean;
     openMenu: OpenMenu;
 };
-/** Opens the row's menu on a right-click. Pass a function to build a large
- *  list's menus only when one opens, not on every render. */
+/** Opens the row's menu on a right-click; Shift+right-click keeps the browser's own. Pass a
+ *  function to build a large list's menus only when one opens, not on every render. */
 export declare function rowContextMenuProps(openMenu: OpenMenu, entries: MenuEntry[] | (() => MenuEntry[])): {
     onContextMenu: (e: ReactMouseEvent) => void;
 };
@@ -56,8 +56,13 @@ export declare function useCopySubmenu(): CopySubmenu;
  *  stays while its menu is `open`, though the pointer has left the row. A touch
  *  screen has no hover, so there it always shows: the row's menu is otherwise
  *  out of reach. */
-export declare function MoreButton({ onOpen, open, visible, label, className, }: {
-    onOpen: (button: HTMLElement) => void;
+export declare function MoreButton({ onOpen, items, open: openProp, visible: visibleProp, label, className, }: {
+    /** Opens a menu of the host's own under the button. */
+    onOpen?: ((button: HTMLElement) => void) | undefined;
+    /** The menu's rows, opened in the shared menu, which a second press closes. A function
+     *  builds them only when it opens. Use this or `onOpen`. */
+    items?: MenuEntry[] | (() => MenuEntry[]) | undefined;
+    /** Whether its menu is open; with `items` the shared menu tells it. */
     open?: boolean;
     /** Shows at rest too. */
     visible?: boolean;

package/dist/list/rowMenu.js

@@ -1,9 +1,10 @@
 import { cx } from "../cx.js";
 import { CopyIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
+import { useMenuOpenedBy, useOpenMenu } from "../components/ContextMenu.js";
 import { useStrings } from "../components/Provider.js";
 import { IconButton } from "../components/IconButton.js";
+import { useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
 //#region src/list/rowMenu.tsx
 /** Assembles a row's context menu in the shared order: leading link(s) → middle
 * actions → extra items → Copy submenu → trailing (destructive) actions last. */
@@ -31,21 +32,23 @@ function useRowMenuActive(openMenu) {
 	return {
 		active,
 		openMenu: useCallback((at, items, options) => {
-			setActive(true);
-			openMenu(at, items, {
+			const opened = openMenu(at, items, {
 				...options,
 				onClose: () => {
 					setActive(false);
 					options?.onClose?.();
 				}
 			});
+			if (opened !== false) setActive(true);
+			return opened;
 		}, [openMenu])
 	};
 }
-/** Opens the row's menu on a right-click. Pass a function to build a large
-*  list's menus only when one opens, not on every render. */
+/** Opens the row's menu on a right-click; Shift+right-click keeps the browser's own. Pass a
+*  function to build a large list's menus only when one opens, not on every render. */
 function rowContextMenuProps(openMenu, entries) {
 	return { onContextMenu: (e) => {
+		if (e.shiftKey) return;
 		const items = typeof entries === "function" ? entries() : entries;
 		e.preventDefault();
 		if (items.length > 0) e.stopPropagation();
@@ -111,9 +114,15 @@ function useCopySubmenu() {
 *  stays while its menu is `open`, though the pointer has left the row. A touch
 *  screen has no hover, so there it always shows: the row's menu is otherwise
 *  out of reach. */
-function MoreButton({ onOpen, open = false, visible = open, label, className }) {
+function MoreButton({ onOpen, items, open: openProp, visible: visibleProp, label, className }) {
 	const { list: t } = useStrings();
+	const openMenu = useOpenMenu();
+	const openedBy = useMenuOpenedBy();
+	const button = useRef(null);
+	const open = openProp ?? (items !== void 0 && openedBy !== null && openedBy === button.current);
+	const visible = visibleProp ?? open;
 	return /* @__PURE__ */ jsx(IconButton, {
+		ref: button,
 		label: label ?? t.moreActions,
 		icon: /* @__PURE__ */ jsx(MoreIcon, {}),
 		"aria-haspopup": "menu",
@@ -121,7 +130,8 @@ function MoreButton({ onOpen, open = false, visible = open, label, className })
 		"data-popup-open": open || void 0,
 		onClick: (e) => {
 			e.stopPropagation();
-			onOpen(e.currentTarget);
+			if (items !== void 0) openMenu(e.currentTarget, typeof items === "function" ? items() : items);
+			else onOpen?.(e.currentTarget);
 		},
 		className: cx("focus-visible:opacity-100", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100", className)
 	});

package/dist/list/useListFilters.d.ts

@@ -0,0 +1,68 @@
+import { type ActiveFilter, type FilterField, type FilterOperator } from './filterModel.js';
+/** Where filters live besides what the list remembers, such as the page's URL. */
+export interface FilterStore {
+    /** The filters it holds, or `null` when it holds none, such as a URL with no filter params,
+     *  so the remembered filters apply. */
+    value: readonly ActiveFilter[] | null;
+    onChange: (next: ActiveFilter[]) => void;
+}
+export interface ListFiltersConfig<T> {
+    /** Remembers the filters under `${storageKey}:filters`, through the host's persisted state
+     *  (the browser's storage unless the host binds its own, such as an account preference). */
+    storageKey: string;
+    /** Fields marked `shared` keep one value under `${sharedFiltersKey}:sharedFilters`. */
+    sharedFiltersKey?: string | undefined;
+    fields: readonly FilterField<T>[];
+    /** What the page shows before the reader changes anything, and what Reset returns to. */
+    defaultFilters?: readonly ActiveFilter[] | undefined;
+    /** Filters held outside the list, such as the URL. Its filters win while it has any, and
+     *  every change goes to it and to what the list remembers. */
+    store?: FilterStore | undefined;
+    /** False leaves remembering to the store alone. */
+    remember?: boolean | undefined;
+}
+/** A request for a chip to open one of its pickers, which the chip clears once it has. */
+export interface FilterEditRequest {
+    field: string;
+    part: 'value' | 'field' | 'operator';
+    id: number;
+}
+/** A list's filters, the state behind the chip row and the Filter menu. */
+export interface ListFilters {
+    fields: readonly FilterField<any>[];
+    /** The filters in effect, in the order they were added. */
+    active: readonly ActiveFilter[];
+    /** The chips to show: the filters in effect, then one being added that has no value yet. */
+    chips: readonly ActiveFilter[];
+    /** The field of a chip just added and still waiting for its value. */
+    draft: string | null;
+    /** Starts a filter: a chip for the field appears and its value picker opens. A field
+     *  already in use opens its chip's picker instead. */
+    begin: (field: string) => void;
+    add: (field: string, op?: FilterOperator, values?: readonly string[]) => void;
+    update: (field: string, patch: Partial<Omit<ActiveFilter, 'field'>>) => void;
+    /** Swaps a chip's field for another, keeping its values when the kinds match. */
+    replaceField: (field: string, next: string) => void;
+    remove: (field: string) => void;
+    /** Drops the chip being added, if it never got a value. */
+    discardDraft: () => void;
+    /** Empties every filter but the required ones. */
+    clear: () => void;
+    /** Returns to the page's default filters. */
+    reset: () => void;
+    hasDefaults: boolean;
+    isDefault: boolean;
+    /** How many filters narrow the list. */
+    count: number;
+    apply: <R>(rows: readonly R[]) => R[];
+    editRequest: FilterEditRequest | null;
+    requestEdit: (field: string, part?: FilterEditRequest['part']) => void;
+    clearEditRequest: (id: number) => void;
+    /** Set by a mounted chip row, so the Filter menu knows a new chip has somewhere to show. */
+    barMounted: boolean;
+    registerBar: () => () => void;
+}
+/** A list's active filters: which, in what order, where they are remembered and how rows
+ *  match them. `useListView` builds one from its facets and fields; a page not on it, or
+ *  filtering on the server, can call this alone. */
+export declare function useListFilters<T>({ storageKey, sharedFiltersKey, fields, defaultFilters, store, remember, }: ListFiltersConfig<T>): ListFilters;

package/dist/list/useListFilters.js

@@ -0,0 +1,252 @@
+import { usePersistedState } from "../components/Provider.js";
+import { applyFilterList, fieldOperators, fromStored, isComplete, sameFilters, toStored } from "./filterModel.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+//#region src/list/useListFilters.ts
+var NONE = [];
+/** A list's active filters: which, in what order, where they are remembered and how rows
+*  match them. `useListView` builds one from its facets and fields; a page not on it, or
+*  filtering on the server, can call this alone. */
+function useListFilters({ storageKey, sharedFiltersKey, fields, defaultFilters = NONE, store, remember = true }) {
+	const sharedKeys = useMemo(() => new Set(fields.filter((f) => f.shared).map((f) => f.key)), [fields]);
+	const defaults = useMemo(() => defaultFilters.filter((f) => !sharedKeys.has(f.field)), [defaultFilters, sharedKeys]);
+	const sharedDefaults = useMemo(() => defaultFilters.filter((f) => sharedKeys.has(f.field)), [defaultFilters, sharedKeys]);
+	const [localStored, setLocalStored] = usePersistedState(`${storageKey}:filters`, toStored(defaults));
+	const [sharedStored, setSharedStored] = usePersistedState(`${sharedFiltersKey ?? storageKey}:sharedFilters`, toStored(sharedDefaults));
+	const known = useMemo(() => new Set(fields.map((f) => f.key)), [fields]);
+	const remembered = useMemo(() => {
+		const local = fromStored(localStored).filter((f) => !sharedKeys.has(f.field));
+		const shared = fromStored(sharedStored).filter((f) => sharedKeys.has(f.field));
+		return [...local, ...shared];
+	}, [
+		localStored,
+		sharedStored,
+		sharedKeys
+	]);
+	const source = store?.value ?? (remember ? remembered : defaultFilters);
+	const active = useMemo(() => source.filter((f) => known.has(f.field) && isComplete(f)), [source, known]);
+	const latest = useRef(active);
+	latest.current = active;
+	const write = useCallback((next) => {
+		latest.current = next;
+		if (remember) {
+			setLocalStored(toStored(next.filter((f) => !sharedKeys.has(f.field))));
+			if (sharedKeys.size > 0) setSharedStored((prev) => {
+				const kept = {};
+				for (const [key, value] of Object.entries(prev ?? {})) if (!sharedKeys.has(key)) kept[key] = value;
+				return {
+					...kept,
+					...toStored(next.filter((f) => sharedKeys.has(f.field)))
+				};
+			});
+		}
+		store?.onChange(next);
+	}, [
+		remember,
+		setLocalStored,
+		setSharedStored,
+		sharedKeys,
+		store
+	]);
+	const [draftState, setDraftStateRaw] = useState(null);
+	const draftRef = useRef(draftState);
+	const setDraft = useCallback((filter, index) => {
+		const next = filter ? {
+			filter,
+			index: index ?? Number.POSITIVE_INFINITY
+		} : null;
+		draftRef.current = next;
+		setDraftStateRaw(next);
+	}, []);
+	const draft = draftState && !active.some((f) => f.field === draftState.filter.field) ? draftState : null;
+	const [editRequest, setEditRequest] = useState(null);
+	const nextId = useRef(0);
+	const requestEdit = useCallback((field, part = "value") => {
+		nextId.current += 1;
+		setEditRequest({
+			field,
+			part,
+			id: nextId.current
+		});
+	}, []);
+	const clearEditRequest = useCallback((id) => setEditRequest((prev) => prev?.id === id ? null : prev), []);
+	const fieldOf = useCallback((key) => fields.find((f) => f.key === key), [fields]);
+	const add = useCallback((key, op, values = []) => {
+		const field = fieldOf(key);
+		if (!field) return;
+		const filter = {
+			field: key,
+			op: op ?? fieldOperators(field)[0] ?? "is",
+			values: field.kind === "boolean" && values.length === 0 ? ["true"] : values
+		};
+		const rest = latest.current.filter((f) => f.field !== key);
+		if (!isComplete(filter)) {
+			if (rest.length !== latest.current.length) write(rest);
+			setDraft(filter);
+			return;
+		}
+		if (draftRef.current?.filter.field === key) setDraft(null);
+		write([...rest, filter]);
+	}, [
+		fieldOf,
+		write,
+		setDraft
+	]);
+	const update = useCallback((key, patch) => {
+		const index = latest.current.findIndex((f) => f.field === key);
+		const current = latest.current[index];
+		if (!current) {
+			const held = draftRef.current;
+			if (held?.filter.field !== key) {
+				const field = fieldOf(key);
+				const next = {
+					field: key,
+					op: patch.op ?? (field ? fieldOperators(field)[0] : void 0) ?? "is",
+					values: patch.values ?? []
+				};
+				if (field && isComplete(next)) write([...latest.current, next]);
+				return;
+			}
+			const next = {
+				...held.filter,
+				...patch
+			};
+			if (isComplete(next)) {
+				setDraft(null);
+				const at = Math.min(held.index, latest.current.length);
+				write([
+					...latest.current.slice(0, at),
+					next,
+					...latest.current.slice(at)
+				]);
+			} else setDraft(next, held.index);
+			return;
+		}
+		const next = {
+			...current,
+			...patch
+		};
+		if (isComplete(next)) {
+			write(latest.current.map((f) => f.field === key ? next : f));
+			return;
+		}
+		const field = fieldOf(key);
+		if (!field?.required && !field?.pinned) setDraft(next, index);
+		write(latest.current.filter((f) => f.field !== key));
+	}, [
+		fieldOf,
+		write,
+		setDraft
+	]);
+	const remove = useCallback((key) => {
+		if (draftRef.current?.filter.field === key) setDraft(null);
+		if (latest.current.some((f) => f.field === key)) write(latest.current.filter((f) => f.field !== key));
+	}, [write, setDraft]);
+	const replaceField = useCallback((key, nextKey) => {
+		const from = fieldOf(key);
+		const to = fieldOf(nextKey);
+		const index = latest.current.findIndex((f) => f.field === key);
+		const held = draftRef.current?.filter.field === key ? draftRef.current : void 0;
+		const current = latest.current[index] ?? held?.filter;
+		if (!from || !to || !current || key === nextKey) return;
+		const ops = fieldOperators(to);
+		const op = ops.includes(current.op) ? current.op : ops[0] ?? "is";
+		const listed = from.kind === "enum" || from.kind === "people";
+		const carries = from.kind === to.kind && (!listed || current.values.every((v) => to.options?.some((o) => o.value === v) ?? false));
+		const next = {
+			field: nextKey,
+			op,
+			values: to.kind === "boolean" ? ["true"] : carries ? current.values : []
+		};
+		const rest = latest.current.filter((f) => f.field !== nextKey);
+		const at = index >= 0 ? rest.findIndex((f) => f.field === key) : held?.index ?? rest.length;
+		const without = rest.filter((f) => f.field !== key);
+		if (isComplete(next)) {
+			setDraft(null);
+			const pos = Math.min(Math.max(at, 0), without.length);
+			write([
+				...without.slice(0, pos),
+				next,
+				...without.slice(pos)
+			]);
+		} else {
+			if (without.length !== latest.current.length) write(without);
+			setDraft(next, at);
+			requestEdit(nextKey);
+		}
+	}, [
+		fieldOf,
+		write,
+		setDraft,
+		requestEdit
+	]);
+	const begin = useCallback((key) => {
+		const field = fieldOf(key);
+		if (!field) return;
+		if (latest.current.some((f) => f.field === key) || field.required || field.pinned) {
+			requestEdit(key);
+			return;
+		}
+		add(key);
+		if (field.kind !== "boolean") requestEdit(key);
+	}, [
+		fieldOf,
+		add,
+		requestEdit
+	]);
+	const discardDraft = useCallback(() => setDraft(null), [setDraft]);
+	const clear = useCallback(() => {
+		setDraft(null);
+		write(latest.current.filter((f) => fieldOf(f.field)?.required));
+	}, [
+		fieldOf,
+		write,
+		setDraft
+	]);
+	const reset = useCallback(() => {
+		setDraft(null);
+		write([...defaultFilters]);
+	}, [
+		defaultFilters,
+		write,
+		setDraft
+	]);
+	const [bars, setBars] = useState(0);
+	const registerBar = useCallback(() => {
+		setBars((n) => n + 1);
+		return () => setBars((n) => n - 1);
+	}, []);
+	const apply = useCallback((rows) => applyFilterList(rows, active, fields), [active, fields]);
+	return {
+		fields,
+		active,
+		chips: useMemo(() => {
+			if (!draft) return active;
+			const at = Math.min(draft.index, active.length);
+			return [
+				...active.slice(0, at),
+				draft.filter,
+				...active.slice(at)
+			];
+		}, [active, draft]),
+		draft: draft?.filter.field ?? null,
+		begin,
+		add,
+		update,
+		replaceField,
+		remove,
+		discardDraft,
+		clear,
+		reset,
+		hasDefaults: defaultFilters.length > 0,
+		isDefault: sameFilters(active, defaultFilters),
+		count: active.length,
+		apply,
+		editRequest,
+		requestEdit,
+		clearEditRequest,
+		barMounted: bars > 0,
+		registerBar
+	};
+}
+//#endregion
+export { useListFilters };

package/dist/logviewer/LogViewer.js

@@ -11,8 +11,8 @@ import { InfoTip } from "../components/InfoTip.js";
 import { DatePicker } from "../components/DatePicker.js";
 import { SearchInput } from "../components/SearchInput.js";
 import { highlightSegments, parseAnsiSegments, plainSegments } from "./segments.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DateTime } from "luxon";
 //#region src/logviewer/LogViewer.tsx
@@ -24,7 +24,7 @@ function LogSegments({ segments }) {
 	}, i) : segment.className ? /* @__PURE__ */ jsx("span", {
 		className: segment.className,
 		children: segment.content
-	}, i) : /* @__PURE__ */ jsx(Fragment$1, { children: segment.content }, i));
+	}, i) : /* @__PURE__ */ jsx(Fragment, { children: segment.content }, i));
 }
 var ANNOTATION_TONES = {
 	error: {
@@ -419,7 +419,7 @@ function LogViewer({ log, height = "unset", width, downloadName = "log.txt", rou
 						/* @__PURE__ */ jsxs("div", {
 							className: "flex flex-auto flex-wrap gap-2",
 							children: [
-								!inline && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+								!inline && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 									variant: "secondary",
 									size: "sm",
 									icon: /* @__PURE__ */ jsx(ArrowUpIcon, {}),