@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/filter/FilterBuilder.tsx

@@ -1,435 +1,435 @@
-import "./FilterBuilder.css";
-
-import { Button, Checkbox, Dialog, Heading } from "@digdir/designsystemet-react";
-import { XMarkIcon } from "@navikt/aksel-icons";
-import {
-	canEditSavedFilter,
-	canSetCrossDomain,
-	canShareSavedFilter,
-	createEmptyFilter,
-	findSavedFilter,
-	type FilterTree,
-	getLocalizedString,
-	isEmptyFilter,
-	pruneFilter,
-	type SavedFilter,
-} from "@olenbetong/appframe-core";
-import { type NamedFilterType, setNamedFilter, useFilterConversion, useSavedFilters } from "@olenbetong/appframe-react";
-import type { SaveFilterInput } from "@olenbetong/appframe-react";
-import type { DataObject } from "@olenbetong/appframe-data";
-import clsx from "clsx";
-import { type ReactNode, useCallback, useEffect, useState } from "react";
-
-import { FilterEditor } from "./FilterEditor.js";
-import { FilterNameDialog } from "./FilterNameDialog.js";
-import { FilterShareDialog } from "./FilterShareDialog.js";
-import { SavedFilterTree } from "./SavedFilterTree.js";
-import type { FilterEditorSize, GetFieldOptions } from "./types.js";
-import type { FieldMetadata } from "@olenbetong/appframe-core";
-
-export type FilterBuilderProps = {
-	/** The fields the user can filter on. Fields with `excludeFromFilter` are hidden. */
-	fields: FieldMetadata[];
-	/**
-	 * The view the filter applies to. Used both for conversion and, unless
-	 * `dbObjectId` is set, as the key saved filters are stored under.
-	 */
-	viewName?: string;
-	/** Overrides `viewName` as the key saved filters are stored under. */
-	dbObjectId?: string;
-	/** Loads the filters saved for a report instead of for a view. */
-	reportId?: string;
-	getFieldOptions?: GetFieldOptions;
-	/**
-	 * `"dialog"` wraps the builder in a modal, `"inline"` renders it in place.
-	 * @default "dialog"
-	 */
-	variant?: "dialog" | "inline";
-	/** Whether the dialog is open. Ignored when `variant` is `"inline"`. */
-	open?: boolean;
-	/** Called when the dialog is dismissed, and after the filter is applied. */
-	onClose?: () => void;
-	/** The filter tree. Use together with `onChange` for a controlled component. */
-	value?: FilterTree | null;
-	/** The initial filter tree when uncontrolled. */
-	defaultValue?: FilterTree | null;
-	/** Called on every edit. */
-	onChange?: (filter: FilterTree) => void;
-	/**
-	 * Called when the user applies the filter. The tree is pruned, so incomplete
-	 * conditions are dropped and an empty filter is reported as `null`.
-	 */
-	onApply?: (filter: FilterTree | null, filterString: string) => void;
-	/**
-	 * Applies the filter to a data object when the user confirms. The filter is
-	 * written to a named slot, so it composes with other filter providers on the
-	 * same data object instead of overwriting them.
-	 */
-	dataObject?: DataObject<any>;
-	/**
-	 * Parameter the filter is applied to.
-	 * @default "filterObject"
-	 */
-	filterType?: NamedFilterType;
-	/**
-	 * Name of the slot the filter is applied to.
-	 * @default "filterBuilder"
-	 */
-	slotName?: string;
-	/**
-	 * Shows the filter string below the tree.
-	 * @default true
-	 */
-	showFilterString?: boolean;
-	/** Called whenever the filter string is reconverted. */
-	onFilterStringChange?: (filterString: string) => void;
-	/** Called when a saved filter is selected, and with `null` for "New Filter". */
-	onSelect?: (filter: SavedFilter | null) => void;
-	/**
-	 * Extra columns written along with the filter when it is saved. The report
-	 * launcher stores its header text, its hide-criteria flag and its parameter
-	 * values here.
-	 */
-	saveValues?: SavedFilterValues;
-	/**
-	 * Hides the OK/Cancel row, for callers that supply their own actions. The
-	 * saved-filter toolbar stays.
-	 */
-	hideActions?: boolean;
-	/**
-	 * Replaces the OK/Cancel buttons, so a caller's own actions share the row
-	 * with the buttons acting on the selected saved filter.
-	 */
-	actions?: ReactNode;
-	/**
-	 * Wraps the criteria editor, for callers that put it beside content of their
-	 * own — the report launcher puts it in a tab next to the report parameters.
-	 * Whatever is returned fills the column next to the saved-filter list.
-	 */
-	renderMain?: (editor: ReactNode) => ReactNode;
-	/** Hides the saved-filter list, leaving just the criteria editor. */
-	hideSavedFilters?: boolean;
-	className?: string;
-	"data-size"?: FilterEditorSize;
-};
-
-/** The parts of a saved filter the builder writes on behalf of a caller. */
-export type SavedFilterValues = Pick<SaveFilterInput, "headerText" | "hideCriteria" | "parameters">;
-
-/**
- * The web port of the Windows filter builder: the saved-filter list, the
- * criteria editor and the save/share toolbar.
- *
- * Saved filters are stored as criteria strings, so selecting one round-trips
- * through the conversion endpoint to rebuild the tree, and saving converts the
- * tree back.
- *
- * @example
- * ```jsx
- * <FilterBuilder
- *   open={open}
- *   fields={dsPersons.getFields()}
- *   viewName="aviw_Personnel_Persons"
- *   dataObject={dsPersons}
- *   onClose={() => setOpen(false)}
- * />
- * ```
- */
-export function FilterBuilder({
-	fields,
-	viewName,
-	dbObjectId,
-	reportId,
-	getFieldOptions,
-	variant = "dialog",
-	open = true,
-	onClose,
-	value,
-	defaultValue,
-	onChange,
-	onApply,
-	dataObject,
-	filterType = "filterObject",
-	slotName = "filterBuilder",
-	showFilterString = true,
-	onFilterStringChange,
-	onSelect,
-	saveValues,
-	hideActions,
-	actions,
-	renderMain,
-	hideSavedFilters,
-	className,
-	"data-size": size = "sm",
-}: FilterBuilderProps) {
-	let resolvedId = dbObjectId ?? viewName;
-	let { mine, shared, filters, loading, save, rename, remove, setCrossDomain } = useSavedFilters({
-		dbObjectId: reportId ? undefined : resolvedId,
-		reportId,
-	});
-
-	let [uncontrolled, setUncontrolled] = useState<FilterTree>(() => defaultValue ?? createEmptyFilter());
-	let isControlled = value !== undefined;
-	let filter = isControlled ? (value ?? createEmptyFilter()) : uncontrolled;
-
-	let [selectedId, setSelectedId] = useState<number | null>(null);
-	let [dirty, setDirty] = useState(false);
-	let [saving, setSaving] = useState(false);
-	let [sharing, setSharing] = useState(false);
-	let [error, setError] = useState<string | null>(null);
-
-	let { filterString, isConverting, parseFilterString } = useFilterConversion(filter, { viewName });
-	let selected = findSavedFilter(filters, selectedId);
-
-	useEffect(() => {
-		onFilterStringChange?.(filterString);
-	}, [filterString, onFilterStringChange]);
-
-	let update = useCallback(
-		(next: FilterTree) => {
-			if (!isControlled) setUncontrolled(next);
-			onChange?.(next);
-			setDirty(true);
-		},
-		[isControlled, onChange],
-	);
-
-	function applyFilter(next: FilterTree, markClean: boolean) {
-		if (!isControlled) setUncontrolled(next);
-		onChange?.(next);
-		if (markClean) setDirty(false);
-	}
-
-	async function handleSelect(filterId: number | null) {
-		setSelectedId(filterId);
-		setError(null);
-
-		if (filterId === null) {
-			applyFilter(createEmptyFilter(), true);
-			onSelect?.(null);
-
-			return;
-		}
-
-		let savedFilter = findSavedFilter(filters, filterId);
-		if (!savedFilter) return;
-
-		onSelect?.(savedFilter);
-
-		// Filters are stored as criteria strings, so the tree has to be rebuilt.
-		let parsed = await parseFilterString(savedFilter.criteria);
-		applyFilter(parsed ?? createEmptyFilter(), true);
-	}
-
-	async function handleSave(name: string) {
-		setSaving(false);
-		setError(null);
-
-		try {
-			// Saving under an existing name of the user's own replaces that
-			// filter rather than creating a duplicate.
-			let existing = mine.find((candidate) => candidate.name === name);
-			let saved = await save({
-				...saveValues,
-				filterId: existing?.filterId ?? null,
-				name,
-				criteria: filterString,
-				crossDomain: existing?.crossDomain ?? undefined,
-			});
-
-			if (saved) setSelectedId(saved.filterId);
-			setDirty(false);
-		} catch (cause) {
-			setError(String((cause as Error)?.message ?? cause));
-		}
-	}
-
-	async function handleOverwrite() {
-		if (!selected) return;
-
-		setError(null);
-
-		try {
-			await save({ ...saveValues, filterId: selected.filterId, name: selected.name, criteria: filterString });
-			setDirty(false);
-		} catch (cause) {
-			setError(String((cause as Error)?.message ?? cause));
-		}
-	}
-
-	function handleRename(savedFilter: SavedFilter) {
-		let name = globalThis.prompt?.(getLocalizedString("Filter name"), savedFilter.name);
-		if (name?.trim()) void rename(savedFilter.filterId, name.trim());
-	}
-
-	function handleDelete(savedFilter: SavedFilter) {
-		let message = getLocalizedString("Delete the filter {0}?").replace("{0}", savedFilter.name);
-		if (!globalThis.confirm?.(message)) return;
-
-		void remove(savedFilter.filterId).then(() => {
-			if (savedFilter.filterId === selectedId) void handleSelect(null);
-		});
-	}
-
-	function handleApply() {
-		let pruned = pruneFilter(filter);
-
-		if (dataObject) {
-			setNamedFilter(dataObject, slotName, pruned, { type: filterType });
-		}
-
-		onApply?.(pruned, filterString);
-		onClose?.();
-	}
-
-	let isEmpty = isEmptyFilter(filter);
-	let canOverwrite = Boolean(selected) && canEditSavedFilter(selected as SavedFilter) && dirty && !isEmpty;
-
-	let editor = (
-		<FilterEditor
-			fields={fields}
-			value={filter}
-			viewName={viewName}
-			getFieldOptions={getFieldOptions}
-			showFilterString={showFilterString}
-			data-size={size}
-			onChange={update}
-		/>
-	);
-
-	let content = (
-		<div
-			className={clsx("ObFilterBuilder-root", hideSavedFilters && "ObFilterBuilder-root--noSavedFilters", className)}
-			data-size={size}
-		>
-			{!hideSavedFilters && (
-				<div className="ObFilterBuilder-sidebar">
-					<SavedFilterTree
-						mine={mine}
-						shared={shared}
-						value={selectedId}
-						dirty={dirty}
-						loading={loading}
-						data-size={size}
-						onChange={(filterId) => void handleSelect(filterId)}
-						onRename={handleRename}
-						onDelete={handleDelete}
-					/>
-				</div>
-			)}
-			<div className="ObFilterBuilder-main">{renderMain ? renderMain(editor) : editor}</div>
-			{error && (
-				<p className="ObFilterBuilder-error" role="alert">
-					{error}
-				</p>
-			)}
-			<div className="ObFilterBuilder-footer">
-				{!hideSavedFilters && (
-					<div className="ObFilterBuilder-toolbar">
-						<Button
-							type="button"
-							variant="secondary"
-							data-size={size}
-							disabled={!selected || !canShareSavedFilter(selected)}
-							onClick={() => setSharing(true)}
-						>
-							{getLocalizedString("Sharing...")}
-						</Button>
-						<Button
-							type="button"
-							variant="secondary"
-							data-size={size}
-							disabled={isEmpty || isConverting}
-							onClick={() => setSaving(true)}
-						>
-							{getLocalizedString("Save as")}
-						</Button>
-						<Button
-							type="button"
-							variant="secondary"
-							data-size={size}
-							disabled={!canOverwrite || isConverting}
-							onClick={() => void handleOverwrite()}
-						>
-							{getLocalizedString("Save")}
-						</Button>
-						<Checkbox
-							data-size={size}
-							label={getLocalizedString("All Domains")}
-							checked={selected?.crossDomain ?? false}
-							disabled={!selected || !canSetCrossDomain(selected)}
-							onChange={(event) => {
-								if (selected) void setCrossDomain(selected.filterId, event.currentTarget.checked);
-							}}
-						/>
-					</div>
-				)}
-				{!hideActions && (
-					<div className="ObFilterBuilder-actions">
-						{actions ?? (
-							<>
-								<Button type="button" data-size={size} onClick={handleApply}>
-									{getLocalizedString("OK")}
-								</Button>
-								<Button type="button" variant="secondary" data-size={size} onClick={onClose}>
-									{getLocalizedString("Cancel")}
-								</Button>
-							</>
-						)}
-					</div>
-				)}
-			</div>
-			<FilterNameDialog
-				open={saving}
-				defaultName={selected?.name ?? ""}
-				existingNames={mine.map((candidate) => candidate.name)}
-				data-size={size}
-				onCancel={() => setSaving(false)}
-				onSubmit={(name) => void handleSave(name)}
-			/>
-			<FilterShareDialog
-				open={sharing}
-				filterId={selectedId}
-				filterName={selected?.name}
-				data-size={size}
-				onClose={() => setSharing(false)}
-			/>
-		</div>
-	);
-
-	if (variant === "inline") return content;
-
-	return (
-		<Dialog
-			open={open}
-			closedby="closerequest"
-			closeButton={false}
-			data-size={size}
-			className="ObFilterBuilder-dialog"
-			onClose={onClose}
-		>
-			{/*
-			 * `Dialog`'s own close button is a floated first child of the dialog,
-			 * which a flex layout takes out of its float and stacks above the
-			 * heading. Rendering it in the header instead keeps it aligned.
-			 */}
-			<Dialog.Block className="ObFilterBuilder-dialogHeader">
-				<Heading level={2} data-size="xs">
-					{getLocalizedString("Edit filter")}
-				</Heading>
-				<Button
-					type="button"
-					variant="tertiary"
-					data-color="neutral"
-					data-size={size}
-					icon
-					aria-label={getLocalizedString("Close")}
-					onClick={onClose}
-				>
-					<XMarkIcon aria-hidden />
-				</Button>
-			</Dialog.Block>
-			<Dialog.Block className="ObFilterBuilder-dialogBody">{content}</Dialog.Block>
-		</Dialog>
-	);
-}
+import "./FilterBuilder.css";
+
+import { Button, Checkbox, Dialog, Heading } from "@digdir/designsystemet-react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import {
+	canEditSavedFilter,
+	canSetCrossDomain,
+	canShareSavedFilter,
+	createEmptyFilter,
+	findSavedFilter,
+	type FilterTree,
+	isEmptyFilter,
+	pruneFilter,
+	type SavedFilter,
+} from "@olenbetong/appframe-core";
+import { type NamedFilterType, setNamedFilter, useFilterConversion, useSavedFilters } from "@olenbetong/appframe-react";
+import type { SaveFilterInput } from "@olenbetong/appframe-react";
+import type { DataObject } from "@olenbetong/appframe-data";
+import clsx from "clsx";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+
+import { FilterEditor } from "./FilterEditor.js";
+import { FilterNameDialog } from "./FilterNameDialog.js";
+import { FilterShareDialog } from "./FilterShareDialog.js";
+import { SavedFilterTree } from "./SavedFilterTree.js";
+import type { FilterEditorSize, GetFieldOptions } from "./types.js";
+import type { FieldMetadata } from "@olenbetong/appframe-core";
+import { getLocalizedString } from "../i18n.js";
+
+export type FilterBuilderProps = {
+	/** The fields the user can filter on. Fields with `excludeFromFilter` are hidden. */
+	fields: FieldMetadata[];
+	/**
+	 * The view the filter applies to. Used both for conversion and, unless
+	 * `dbObjectId` is set, as the key saved filters are stored under.
+	 */
+	viewName?: string;
+	/** Overrides `viewName` as the key saved filters are stored under. */
+	dbObjectId?: string;
+	/** Loads the filters saved for a report instead of for a view. */
+	reportId?: string;
+	getFieldOptions?: GetFieldOptions;
+	/**
+	 * `"dialog"` wraps the builder in a modal, `"inline"` renders it in place.
+	 * @default "dialog"
+	 */
+	variant?: "dialog" | "inline";
+	/** Whether the dialog is open. Ignored when `variant` is `"inline"`. */
+	open?: boolean;
+	/** Called when the dialog is dismissed, and after the filter is applied. */
+	onClose?: () => void;
+	/** The filter tree. Use together with `onChange` for a controlled component. */
+	value?: FilterTree | null;
+	/** The initial filter tree when uncontrolled. */
+	defaultValue?: FilterTree | null;
+	/** Called on every edit. */
+	onChange?: (filter: FilterTree) => void;
+	/**
+	 * Called when the user applies the filter. The tree is pruned, so incomplete
+	 * conditions are dropped and an empty filter is reported as `null`.
+	 */
+	onApply?: (filter: FilterTree | null, filterString: string) => void;
+	/**
+	 * Applies the filter to a data object when the user confirms. The filter is
+	 * written to a named slot, so it composes with other filter providers on the
+	 * same data object instead of overwriting them.
+	 */
+	dataObject?: DataObject<any>;
+	/**
+	 * Parameter the filter is applied to.
+	 * @default "filterObject"
+	 */
+	filterType?: NamedFilterType;
+	/**
+	 * Name of the slot the filter is applied to.
+	 * @default "filterBuilder"
+	 */
+	slotName?: string;
+	/**
+	 * Shows the filter string below the tree.
+	 * @default true
+	 */
+	showFilterString?: boolean;
+	/** Called whenever the filter string is reconverted. */
+	onFilterStringChange?: (filterString: string) => void;
+	/** Called when a saved filter is selected, and with `null` for "New Filter". */
+	onSelect?: (filter: SavedFilter | null) => void;
+	/**
+	 * Extra columns written along with the filter when it is saved. The report
+	 * launcher stores its header text, its hide-criteria flag and its parameter
+	 * values here.
+	 */
+	saveValues?: SavedFilterValues;
+	/**
+	 * Hides the OK/Cancel row, for callers that supply their own actions. The
+	 * saved-filter toolbar stays.
+	 */
+	hideActions?: boolean;
+	/**
+	 * Replaces the OK/Cancel buttons, so a caller's own actions share the row
+	 * with the buttons acting on the selected saved filter.
+	 */
+	actions?: ReactNode;
+	/**
+	 * Wraps the criteria editor, for callers that put it beside content of their
+	 * own — the report launcher puts it in a tab next to the report parameters.
+	 * Whatever is returned fills the column next to the saved-filter list.
+	 */
+	renderMain?: (editor: ReactNode) => ReactNode;
+	/** Hides the saved-filter list, leaving just the criteria editor. */
+	hideSavedFilters?: boolean;
+	className?: string;
+	"data-size"?: FilterEditorSize;
+};
+
+/** The parts of a saved filter the builder writes on behalf of a caller. */
+export type SavedFilterValues = Pick<SaveFilterInput, "headerText" | "hideCriteria" | "parameters">;
+
+/**
+ * The web port of the Windows filter builder: the saved-filter list, the
+ * criteria editor and the save/share toolbar.
+ *
+ * Saved filters are stored as criteria strings, so selecting one round-trips
+ * through the conversion endpoint to rebuild the tree, and saving converts the
+ * tree back.
+ *
+ * @example
+ * ```jsx
+ * <FilterBuilder
+ *   open={open}
+ *   fields={dsPersons.getFields()}
+ *   viewName="aviw_Personnel_Persons"
+ *   dataObject={dsPersons}
+ *   onClose={() => setOpen(false)}
+ * />
+ * ```
+ */
+export function FilterBuilder({
+	fields,
+	viewName,
+	dbObjectId,
+	reportId,
+	getFieldOptions,
+	variant = "dialog",
+	open = true,
+	onClose,
+	value,
+	defaultValue,
+	onChange,
+	onApply,
+	dataObject,
+	filterType = "filterObject",
+	slotName = "filterBuilder",
+	showFilterString = true,
+	onFilterStringChange,
+	onSelect,
+	saveValues,
+	hideActions,
+	actions,
+	renderMain,
+	hideSavedFilters,
+	className,
+	"data-size": size = "sm",
+}: FilterBuilderProps) {
+	let resolvedId = dbObjectId ?? viewName;
+	let { mine, shared, filters, loading, save, rename, remove, setCrossDomain } = useSavedFilters({
+		dbObjectId: reportId ? undefined : resolvedId,
+		reportId,
+	});
+
+	let [uncontrolled, setUncontrolled] = useState<FilterTree>(() => defaultValue ?? createEmptyFilter());
+	let isControlled = value !== undefined;
+	let filter = isControlled ? (value ?? createEmptyFilter()) : uncontrolled;
+
+	let [selectedId, setSelectedId] = useState<number | null>(null);
+	let [dirty, setDirty] = useState(false);
+	let [saving, setSaving] = useState(false);
+	let [sharing, setSharing] = useState(false);
+	let [error, setError] = useState<string | null>(null);
+
+	let { filterString, isConverting, parseFilterString } = useFilterConversion(filter, { viewName });
+	let selected = findSavedFilter(filters, selectedId);
+
+	useEffect(() => {
+		onFilterStringChange?.(filterString);
+	}, [filterString, onFilterStringChange]);
+
+	let update = useCallback(
+		(next: FilterTree) => {
+			if (!isControlled) setUncontrolled(next);
+			onChange?.(next);
+			setDirty(true);
+		},
+		[isControlled, onChange],
+	);
+
+	function applyFilter(next: FilterTree, markClean: boolean) {
+		if (!isControlled) setUncontrolled(next);
+		onChange?.(next);
+		if (markClean) setDirty(false);
+	}
+
+	async function handleSelect(filterId: number | null) {
+		setSelectedId(filterId);
+		setError(null);
+
+		if (filterId === null) {
+			applyFilter(createEmptyFilter(), true);
+			onSelect?.(null);
+
+			return;
+		}
+
+		let savedFilter = findSavedFilter(filters, filterId);
+		if (!savedFilter) return;
+
+		onSelect?.(savedFilter);
+
+		// Filters are stored as criteria strings, so the tree has to be rebuilt.
+		let parsed = await parseFilterString(savedFilter.criteria);
+		applyFilter(parsed ?? createEmptyFilter(), true);
+	}
+
+	async function handleSave(name: string) {
+		setSaving(false);
+		setError(null);
+
+		try {
+			// Saving under an existing name of the user's own replaces that
+			// filter rather than creating a duplicate.
+			let existing = mine.find((candidate) => candidate.name === name);
+			let saved = await save({
+				...saveValues,
+				filterId: existing?.filterId ?? null,
+				name,
+				criteria: filterString,
+				crossDomain: existing?.crossDomain ?? undefined,
+			});
+
+			if (saved) setSelectedId(saved.filterId);
+			setDirty(false);
+		} catch (cause) {
+			setError(String((cause as Error)?.message ?? cause));
+		}
+	}
+
+	async function handleOverwrite() {
+		if (!selected) return;
+
+		setError(null);
+
+		try {
+			await save({ ...saveValues, filterId: selected.filterId, name: selected.name, criteria: filterString });
+			setDirty(false);
+		} catch (cause) {
+			setError(String((cause as Error)?.message ?? cause));
+		}
+	}
+
+	function handleRename(savedFilter: SavedFilter) {
+		let name = globalThis.prompt?.(getLocalizedString("Filter name"), savedFilter.name);
+		if (name?.trim()) void rename(savedFilter.filterId, name.trim());
+	}
+
+	function handleDelete(savedFilter: SavedFilter) {
+		let message = getLocalizedString("Delete the filter {0}?").replace("{0}", savedFilter.name);
+		if (!globalThis.confirm?.(message)) return;
+
+		void remove(savedFilter.filterId).then(() => {
+			if (savedFilter.filterId === selectedId) void handleSelect(null);
+		});
+	}
+
+	function handleApply() {
+		let pruned = pruneFilter(filter);
+
+		if (dataObject) {
+			setNamedFilter(dataObject, slotName, pruned, { type: filterType });
+		}
+
+		onApply?.(pruned, filterString);
+		onClose?.();
+	}
+
+	let isEmpty = isEmptyFilter(filter);
+	let canOverwrite = Boolean(selected) && canEditSavedFilter(selected as SavedFilter) && dirty && !isEmpty;
+
+	let editor = (
+		<FilterEditor
+			fields={fields}
+			value={filter}
+			viewName={viewName}
+			getFieldOptions={getFieldOptions}
+			showFilterString={showFilterString}
+			data-size={size}
+			onChange={update}
+		/>
+	);
+
+	let content = (
+		<div
+			className={clsx("ObFilterBuilder-root", hideSavedFilters && "ObFilterBuilder-root--noSavedFilters", className)}
+			data-size={size}
+		>
+			{!hideSavedFilters && (
+				<div className="ObFilterBuilder-sidebar">
+					<SavedFilterTree
+						mine={mine}
+						shared={shared}
+						value={selectedId}
+						dirty={dirty}
+						loading={loading}
+						data-size={size}
+						onChange={(filterId) => void handleSelect(filterId)}
+						onRename={handleRename}
+						onDelete={handleDelete}
+					/>
+				</div>
+			)}
+			<div className="ObFilterBuilder-main">{renderMain ? renderMain(editor) : editor}</div>
+			{error && (
+				<p className="ObFilterBuilder-error" role="alert">
+					{error}
+				</p>
+			)}
+			<div className="ObFilterBuilder-footer">
+				{!hideSavedFilters && (
+					<div className="ObFilterBuilder-toolbar">
+						<Button
+							type="button"
+							variant="secondary"
+							data-size={size}
+							disabled={!selected || !canShareSavedFilter(selected)}
+							onClick={() => setSharing(true)}
+						>
+							{getLocalizedString("Sharing...")}
+						</Button>
+						<Button
+							type="button"
+							variant="secondary"
+							data-size={size}
+							disabled={isEmpty || isConverting}
+							onClick={() => setSaving(true)}
+						>
+							{getLocalizedString("Save as")}
+						</Button>
+						<Button
+							type="button"
+							variant="secondary"
+							data-size={size}
+							disabled={!canOverwrite || isConverting}
+							onClick={() => void handleOverwrite()}
+						>
+							{getLocalizedString("Save")}
+						</Button>
+						<Checkbox
+							data-size={size}
+							label={getLocalizedString("All Domains")}
+							checked={selected?.crossDomain ?? false}
+							disabled={!selected || !canSetCrossDomain(selected)}
+							onChange={(event) => {
+								if (selected) void setCrossDomain(selected.filterId, event.currentTarget.checked);
+							}}
+						/>
+					</div>
+				)}
+				{!hideActions && (
+					<div className="ObFilterBuilder-actions">
+						{actions ?? (
+							<>
+								<Button type="button" data-size={size} onClick={handleApply}>
+									{getLocalizedString("OK")}
+								</Button>
+								<Button type="button" variant="secondary" data-size={size} onClick={onClose}>
+									{getLocalizedString("Cancel")}
+								</Button>
+							</>
+						)}
+					</div>
+				)}
+			</div>
+			<FilterNameDialog
+				open={saving}
+				defaultName={selected?.name ?? ""}
+				existingNames={mine.map((candidate) => candidate.name)}
+				data-size={size}
+				onCancel={() => setSaving(false)}
+				onSubmit={(name) => void handleSave(name)}
+			/>
+			<FilterShareDialog
+				open={sharing}
+				filterId={selectedId}
+				filterName={selected?.name}
+				data-size={size}
+				onClose={() => setSharing(false)}
+			/>
+		</div>
+	);
+
+	if (variant === "inline") return content;
+
+	return (
+		<Dialog
+			open={open}
+			closedby="closerequest"
+			closeButton={false}
+			data-size={size}
+			className="ObFilterBuilder-dialog"
+			onClose={onClose}
+		>
+			{/*
+			 * `Dialog`'s own close button is a floated first child of the dialog,
+			 * which a flex layout takes out of its float and stacks above the
+			 * heading. Rendering it in the header instead keeps it aligned.
+			 */}
+			<Dialog.Block className="ObFilterBuilder-dialogHeader">
+				<Heading level={2} data-size="xs">
+					{getLocalizedString("Edit filter")}
+				</Heading>
+				<Button
+					type="button"
+					variant="tertiary"
+					data-color="neutral"
+					data-size={size}
+					icon
+					aria-label={getLocalizedString("Close")}
+					onClick={onClose}
+				>
+					<XMarkIcon aria-hidden />
+				</Button>
+			</Dialog.Block>
+			<Dialog.Block className="ObFilterBuilder-dialogBody">{content}</Dialog.Block>
+		</Dialog>
+	);
+}