@olenbetong/appframe-ds 1.9.2 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @olenbetong/appframe-ds
 
+## 1.10.0
+
+### Minor Changes
+
+- 3aea329: The filter can compare a field with another column of the same type, offers the dates Now, Day after tomorrow and Two weeks away, and lets each end of a range be typed or picked from the list. The data API cannot read such a filter object, so data handlers convert it through `api/filter/convert` and send it as a filter string (`needsFilterString`).
+- 05f69f0: Date fields in the filter get the whole-period checks of the Windows filter editor, such as Is last week, Is today and Is earlier this month. They take no value, so the value field is hidden, and a filter using one is sent as a filter string.
+
+### Patch Changes
+
+- a0fc1ea: AppMenuItem: a long label wraps onto a second line instead of being cut off with an ellipsis.
+- b1cd401: The filter editor groups the relative week, month and year values under a "First day of" heading, as the Windows date chooser does, so "Last week" is not read as the whole week. The toggle next to the value shows a list icon while a relative value is selected.
+- Updated dependencies [3aea329]
+- Updated dependencies [05f69f0]
+  - @olenbetong/appframe-core@2.16.0
+  - @olenbetong/appframe-data@1.9.0
+
+## 1.9.3
+
+### Patch Changes
+
+- aae787f: AfLookup: `slotProps.dialog` reaches the lookup dialog. It was accepted but dropped, so a dialog `className` or `style` (such as a wider `--default-width` for a grid lookup) had no effect.
+
 ## 1.9.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,8 +63,8 @@
     "@atlaskit/pragmatic-drag-and-drop": "4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
-    "@olenbetong/appframe-core": "^2.15.2",
-    "@olenbetong/appframe-data": "^1.8.6",
+    "@olenbetong/appframe-core": "^2.16.0",
+    "@olenbetong/appframe-data": "^1.9.0",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
     "dockview-react": "8.6.1",

package/src/AfLookup/Lookup.tsx

@@ -144,7 +144,17 @@ export function AfLookup<T extends Record<string, unknown>>({
 	value,
 	...props
 }: AfLookupProps<T>) {
-	let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>(props);
+	let {
+		inputId,
+		open: _open,
+		dialog,
+		anchorName,
+		openDialog,
+		onKeyDown,
+	} = useLookup<T>({
+		...props,
+		slotProps: { dialog: slotProps?.dialog },
+	});
 
 	let hasClear = !!(props.nullable && value && props.onChange);
 

package/src/filter/FilterEditor.css

@@ -136,6 +136,14 @@
 	min-width: 8rem;
 }
 
+/*
+ * An operator without a value, such as "Is last week", takes the value's place,
+ * so the field keeps the width it has in the other rows.
+ */
+.ObFilterEditor-row:not(:has(.ObFilterEditor-valueCell)) .ObFilterEditor-operator {
+	flex: 2 1 calc(26rem + var(--ds-size-2));
+}
+
 .ObFilterEditor-valueCell {
 	display: flex;
 	align-items: center;
@@ -157,6 +165,12 @@
 	min-width: 0;
 }
 
+/* Each end of a range carries its own list toggle. */
+.ObFilterEditor-pair > .ObFilterEditor-valueCell {
+	flex: 1 1 0;
+	min-width: 0;
+}
+
 .ObFilterEditor-pairSeparator {
 	flex: 0 0 auto;
 	color: var(--ds-color-neutral-text-subtle);

package/src/filter/FilterEditor.test.tsx

@@ -126,11 +126,29 @@ describe("FilterEditor", () => {
 			<FilterEditor fields={FIELDS} value={filterWith("Created", "equals", "", "datetime")} onChange={onChange} />,
 		);
 
-		await user.click(screen.getByRole("button", { name: "Use a relative value" }));
+		await user.click(screen.getByRole("button", { name: "Choose from a list" }));
 
 		expect(firstExpression(onChange)).toMatchObject({ value: "Yesterday", valueType: "special" });
 	});
 
+	it("groups the week, month and year values under First day of", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("Created", "equals", "LastWeek", "special")} />);
+
+		let group = screen.getByRole("group", { name: "First day of" });
+		let grouped = Array.from(group.querySelectorAll("option"), (option) => option.value);
+
+		expect(grouped).toContain("special:LastWeek");
+		expect(grouped).toContain("special:ThisMonth");
+		expect(grouped).not.toContain("special:Today");
+		expect(screen.getByRole("option", { name: "Today" }).parentElement).not.toBe(group);
+	});
+
+	it("does not group the current user value", () => {
+		render(<FilterEditor fields={FIELDS} value={filterWith("PersonID", "equals", "CurrentUser", "special")} />);
+
+		expect(screen.queryByRole("group", { name: "First day of" })).not.toBeInTheDocument();
+	});
+
 	it("adds the seconds a datetime input leaves out", () => {
 		let onChange = vi.fn();
 		render(
@@ -160,7 +178,7 @@ describe("FilterEditor", () => {
 	it("does not offer relative values for numbers", () => {
 		render(<FilterEditor fields={FIELDS} value={filterWith("Age", "equals", "1", "number")} />);
 
-		expect(screen.queryByRole("button", { name: "Use a relative value" })).not.toBeInTheDocument();
+		expect(screen.queryByRole("button", { name: "Choose from a list" })).not.toBeInTheDocument();
 	});
 
 	it("removes a condition", async () => {
@@ -283,3 +301,133 @@ describe("FilterEditor", () => {
 		expect(screen.getByLabelText("Value")).toHaveValue("gold");
 	});
 });
+
+describe("FilterEditor value list", () => {
+	const DATE_FIELDS: FieldMetadata[] = [
+		{ name: "DeliveryDate", caption: "Delivery date", type: "datetime" },
+		{ name: "Date", caption: "Date", type: "date" },
+		{ name: "Amount", caption: "Amount", type: "number" },
+		{ name: "Quantity", caption: "Quantity", type: "number" },
+	];
+
+	it("offers the other columns of the same type", () => {
+		render(<FilterEditor fields={DATE_FIELDS} value={filterWith("DeliveryDate", "greaterthan", "Date", "column")} />);
+
+		let group = screen.getByRole("group", { name: "Columns" });
+		let columns = Array.from(group.querySelectorAll("option"), (option) => option.textContent);
+
+		expect(columns).toEqual(["Date"]);
+		expect(screen.getByLabelText("Value")).toHaveValue("column:Date");
+	});
+
+	it("offers the dates only the Windows editor had", () => {
+		render(<FilterEditor fields={DATE_FIELDS} value={filterWith("DeliveryDate", "equals", "Now", "special")} />);
+
+		expect(screen.getByRole("option", { name: "Now" })).toBeInTheDocument();
+		expect(screen.getByRole("option", { name: "Day after tomorrow" })).toBeInTheDocument();
+		expect(screen.getByRole("option", { name: "Two weeks away" })).toBeInTheDocument();
+	});
+
+	it("picks a column as the value", () => {
+		let onChange = vi.fn();
+		render(
+			<FilterEditor
+				fields={DATE_FIELDS}
+				value={filterWith("DeliveryDate", "greaterthan", "Today", "special")}
+				onChange={onChange}
+			/>,
+		);
+
+		fireEvent.change(screen.getByLabelText("Value"), { target: { value: "column:Date" } });
+
+		expect(firstExpression(onChange)).toMatchObject({ value: "Date", valueType: "column" });
+	});
+
+	it("lets a number field pick another number column", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(
+			<FilterEditor fields={DATE_FIELDS} value={filterWith("Amount", "lessthan", "", "number")} onChange={onChange} />,
+		);
+
+		await user.click(screen.getByRole("button", { name: "Choose from a list" }));
+
+		expect(firstExpression(onChange)).toMatchObject({ value: "Quantity", valueType: "column" });
+	});
+
+	it("switches one end of a range to the list", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(
+			<FilterEditor
+				fields={DATE_FIELDS}
+				value={filterWith("DeliveryDate", "between", ["", "2026-11-30T00:00:00"], "datetime")}
+				onChange={onChange}
+			/>,
+		);
+
+		let [fromToggle] = screen.getAllByRole("button", { name: "Choose from a list" });
+		await user.click(fromToggle!);
+
+		expect(firstExpression(onChange)).toMatchObject({
+			value: [{ valueType: "special", value: "Yesterday" }, "2026-11-30T00:00:00"],
+			valueType: "datetime",
+		});
+	});
+
+	it("shows a list choice at each end of a range", () => {
+		render(
+			<FilterEditor
+				fields={DATE_FIELDS}
+				value={filterWith(
+					"DeliveryDate",
+					"between",
+					[
+						{ valueType: "special", value: "Tomorrow" },
+						{ valueType: "column", value: "Date" },
+					],
+					"datetime",
+				)}
+			/>,
+		);
+
+		expect(screen.getByLabelText("From")).toHaveValue("special:Tomorrow");
+		expect(screen.getByLabelText("To")).toHaveValue("column:Date");
+	});
+
+	it("hides the value for a whole-period check", async () => {
+		let user = userEvent.setup();
+		let onChange = vi.fn();
+		render(
+			<FilterEditor
+				fields={DATE_FIELDS}
+				value={filterWith("DeliveryDate", "equals", "", "datetime")}
+				onChange={onChange}
+			/>,
+		);
+
+		await user.selectOptions(screen.getByLabelText("Operator"), "islastweek");
+
+		expect(firstExpression(onChange)).toMatchObject({ operator: "islastweek", value: null, valueType: "null" });
+	});
+
+	it("shows no value field for a whole-period check", () => {
+		render(<FilterEditor fields={DATE_FIELDS} value={filterWith("DeliveryDate", "islastweek", null, "null")} />);
+
+		expect(screen.getByLabelText("Operator")).toHaveValue("islastweek");
+		expect(screen.queryByLabelText("Value")).not.toBeInTheDocument();
+	});
+
+	it("does not offer columns for text checks", () => {
+		render(
+			<FilterEditor
+				fields={[...DATE_FIELDS, { name: "Name", type: "string" }, { name: "Other", type: "string" }]}
+				value={filterWith("Name", "contains", "a")}
+			/>,
+		);
+
+		expect(screen.queryByRole("group", { name: "Columns" })).not.toBeInTheDocument();
+		// The current user can still be picked.
+		expect(screen.getByRole("button", { name: "Choose from a list" })).toBeInTheDocument();
+	});
+});

package/src/filter/FilterRow.tsx

@@ -8,6 +8,7 @@ import {
 	type FilterOperator,
 	getOperatorLabel,
 	getOperatorsForField,
+	isRangeEnd,
 	normalizeOperator,
 } from "@olenbetong/appframe-core";
 import { Combobox } from "../autocomplete/index.js";
@@ -16,6 +17,14 @@ import { FilterValueEditor } from "./FilterValueEditor.js";
 import type { FilterEditorSize, GetFieldOptions } from "./types.js";
 import { getLocalizedString } from "../i18n.js";
 
+function holdsColumn(expression: FilterExpression): boolean {
+	if (expression.valueType === "column") return true;
+
+	return (
+		Array.isArray(expression.value) && expression.value.some((item) => isRangeEnd(item) && item.valueType === "column")
+	);
+}
+
 export function getFieldLabel(field: FieldMetadata) {
 	return field.caption || field.name;
 }
@@ -60,7 +69,10 @@ export function FilterRow({
 		let keep = operators.includes(operator) ? operator : undefined;
 		let created = createExpression(next, keep);
 
-		onChange(keep ? { ...created, value: expression.value, valueType: expression.valueType } : created);
+		// A column picked for the old field may not suit the new one.
+		let keepValue = keep && !holdsColumn(expression);
+
+		onChange(keepValue ? { ...created, value: expression.value, valueType: expression.valueType } : created);
 	}
 
 	return (
@@ -96,6 +108,7 @@ export function FilterRow({
 			<FilterValueEditor
 				expression={expression}
 				field={effectiveField}
+				fields={fields}
 				options={field ? getFieldOptions?.(field) : undefined}
 				onChange={onChange}
 				readOnly={readOnly}

package/src/filter/FilterValueEditor.tsx

@@ -1,15 +1,19 @@
 import { Select, Textfield } from "@digdir/designsystemet-react";
-import { PencilIcon } from "@navikt/aksel-icons";
+import { PencilIcon, TasklistIcon } from "@navikt/aksel-icons";
 import {
 	type DynamicValue,
 	type FieldMetadata,
 	type FilterExpression,
 	type FilterOperator,
+	type FilterRangeEnd,
+	getColumnsForField,
 	getDynamicValueLabel,
 	getDynamicValuesForField,
 	getOperatorArity,
 	getValueType,
+	isRangeEnd,
 	normalizeOperator,
+	supportsColumnValue,
 } from "@olenbetong/appframe-core";
 import { Combobox } from "../autocomplete/index.js";
 
@@ -20,6 +24,8 @@ import { getLocalizedString } from "../i18n.js";
 export type FilterValueEditorProps = {
 	expression: FilterExpression;
 	field?: FieldMetadata;
+	/** All fields of the view, offered as values to compare with. */
+	fields?: FieldMetadata[];
 	options?: FilterValueOption[];
 	onChange: (expression: FilterExpression) => void;
 	readOnly?: boolean;
@@ -40,7 +46,7 @@ function getInputType(field: FieldMetadata | undefined): "text" | "number" | "da
 	}
 }
 
-function toStringValue(value: FilterExpression["value"]): string {
+function toStringValue(value: unknown): string {
 	if (value === null || value === undefined) return "";
 	if (value instanceof Date) return value.toISOString();
 
@@ -66,22 +72,151 @@ function toFilterValue(value: FilterExpression["value"], inputType: string): Fil
 	return value;
 }
 
-function toArrayValue(value: FilterExpression["value"], length?: number): string[] {
-	let array = Array.isArray(value) ? value.map(toStringValue) : [];
-	if (length === undefined) return array;
+/** Relative dates that stand for a single day or moment. */
+const DAY_VALUES = new Set<string>([
+	"Yesterday",
+	"Today",
+	"Now",
+	"Tomorrow",
+	"DayAfterTomorrow",
+	"TwoWeeksAway",
+	"UserYesterday",
+	"UserToday",
+	"UserTomorrow",
+]);
+
+/**
+ * Splits a date field's relative values into single days and the rest, which
+ * resolve to the first day of a week, month or year. Those are grouped under a
+ * "First day of" heading, as in the Windows date chooser, so "Last week" is
+ * not read as the whole week.
+ */
+function groupDynamicValues(values: string[], field: FieldMetadata | undefined) {
+	let isDate = field?.type === "date" || field?.type === "datetime";
+	if (!isDate) return { ungrouped: values, periodStarts: [] };
+
+	return {
+		ungrouped: values.filter((value) => DAY_VALUES.has(value)),
+		periodStarts: values.filter((value) => !DAY_VALUES.has(value)),
+	};
+}
+
+function toArrayValue(value: FilterExpression["value"]): string[] {
+	return Array.isArray(value) ? value.map(toStringValue) : [];
+}
+
+/** A range end as the editor works with it: a typed value or a list choice. */
+type RangeEndValue = string | FilterRangeEnd;
+
+function toRangeEnds(value: FilterExpression["value"]): [RangeEndValue, RangeEndValue] {
+	let array: unknown[] = Array.isArray(value) ? value : [];
+	let toEnd = (item: unknown): RangeEndValue => (isRangeEnd(item) ? item : toStringValue(item));
 
 	// Pair editors always render two inputs, even before both are filled in.
-	return Array.from({ length }, (_, index) => array[index] ?? "");
+	return [toEnd(array[0]), toEnd(array[1])];
+}
+
+/** Encodes a list choice as a single `<option>` value. */
+function toOptionValue(end: FilterRangeEnd): string {
+	return `${end.valueType}:${end.value ?? ""}`;
+}
+
+function fromOptionValue(optionValue: string): FilterRangeEnd {
+	let separator = optionValue.indexOf(":");
+
+	return {
+		valueType: optionValue.slice(0, separator) as FilterRangeEnd["valueType"],
+		value: optionValue.slice(separator + 1),
+	};
+}
+
+type ListChoicesProps = {
+	"aria-label": string;
+	columns: FieldMetadata[];
+	dynamicValues: string[];
+	field?: FieldMetadata;
+	readOnly?: boolean;
+	size?: FilterEditorSize;
+	value: FilterRangeEnd;
+	onChange: (value: FilterRangeEnd) => void;
+};
+
+/**
+ * The list a value can be picked from instead of typed: the other columns of
+ * the same type and the relative values, in the order of the Windows editor.
+ */
+function ListChoices({
+	"aria-label": ariaLabel,
+	columns,
+	dynamicValues,
+	field,
+	readOnly,
+	size,
+	value,
+	onChange,
+}: ListChoicesProps) {
+	let { ungrouped, periodStarts } = groupDynamicValues(dynamicValues, field);
+	let renderDynamic = (dynamicValue: string) => (
+		<Select.Option key={dynamicValue} value={toOptionValue({ valueType: "special", value: dynamicValue })}>
+			{getDynamicValueLabel(dynamicValue as DynamicValue)}
+		</Select.Option>
+	);
+
+	return (
+		<Select
+			className="ObFilterEditor-value"
+			aria-label={ariaLabel}
+			data-size={size}
+			disabled={readOnly}
+			value={toOptionValue(value)}
+			onChange={(event) => onChange(fromOptionValue(event.target.value))}
+		>
+			{columns.length > 0 && (
+				<Select.Optgroup label={getLocalizedString("Columns")}>
+					{columns.map((column) => (
+						<Select.Option key={column.name} value={toOptionValue({ valueType: "column", value: column.name })}>
+							{column.caption || column.name}
+						</Select.Option>
+					))}
+				</Select.Optgroup>
+			)}
+			{ungrouped.map(renderDynamic)}
+			{periodStarts.length > 0 && (
+				<Select.Optgroup label={getLocalizedString("First day of")}>{periodStarts.map(renderDynamic)}</Select.Optgroup>
+			)}
+		</Select>
+	);
+}
+
+/** Switches a value between typing it and picking it from the list. */
+function ListToggle({ isList, onToggle }: { isList: boolean; onToggle: () => void }) {
+	let label = getLocalizedString("Choose from a list");
+
+	return (
+		<button
+			type="button"
+			className="ObFilterEditor-iconButton"
+			aria-pressed={isList}
+			title={label}
+			aria-label={label}
+			onClick={onToggle}
+		>
+			{/* Shows the current mode, like the Windows editor's toggle. */}
+			{isList ? <TasklistIcon aria-hidden /> : <PencilIcon aria-hidden />}
+		</button>
+	);
 }
 
 /**
  * The value part of a filter row. Which editor is rendered depends on the
- * operator's arity, the field's type, and whether the value is a dynamic
- * ("special") value such as `Today` or `CurrentUser`.
+ * operator's arity, the field's type, and whether the value is picked from the
+ * list of other columns and relative ("special") values such as `Today` or
+ * `CurrentUser`. Each end of a range can be typed or picked on its own.
  */
 export function FilterValueEditor({
 	expression,
 	field,
+	fields,
 	options,
 	onChange,
 	readOnly,
@@ -89,46 +224,111 @@ export function FilterValueEditor({
 }: FilterValueEditorProps) {
 	let operator = normalizeOperator(expression.operator);
 	let arity = getOperatorArity(operator);
-	let isDynamic = expression.valueType === "special";
+	let isList = expression.valueType === "special" || expression.valueType === "column";
 	let dynamicValues = field ? getDynamicValuesForField(field) : [];
+	let columns = field && fields && supportsColumnValue(operator) ? getColumnsForField(field, fields) : [];
 	let inputType = getInputType(field);
+	let typedValueType = field ? getValueType(field, operator as FilterOperator) : "string";
+	let canPickFromList = !readOnly && (dynamicValues.length > 0 || columns.length > 0);
+
+	/** The first entry of the list, used when switching a value to it. */
+	let firstChoice: FilterRangeEnd =
+		columns.length > 0 && dynamicValues.length === 0
+			? { valueType: "column", value: columns[0]!.name }
+			: { valueType: "special", value: dynamicValues[0] ?? null };
 
 	function setValue(value: FilterExpression["value"]) {
-		onChange({ ...expression, value: isDynamic ? value : toFilterValue(value, inputType) });
+		onChange({ ...expression, value: isList ? value : toFilterValue(value, inputType) });
 	}
 
-	function setDynamic(enabled: boolean) {
-		if (enabled) {
-			onChange({ ...expression, value: dynamicValues[0] ?? null, valueType: "special" });
+	function setChoice(choice: FilterRangeEnd) {
+		onChange({ ...expression, value: choice.value, valueType: choice.valueType });
+	}
+
+	function toggleList() {
+		if (isList) {
+			onChange({ ...expression, value: "", valueType: typedValueType });
 		} else {
-			onChange({
-				...expression,
-				value: arity === "pair" ? ["", ""] : arity === "list" ? [] : "",
-				valueType: field ? getValueType(field, operator as FilterOperator) : "string",
-			});
+			setChoice(firstChoice);
 		}
 	}
 
 	if (arity === "none") return null;
 
+	if (arity === "pair") {
+		let ends = toRangeEnds(expression.value);
+
+		function setEnd(index: 0 | 1, end: RangeEndValue) {
+			let next = [...ends];
+			next[index] = typeof end === "string" && inputType === "datetime-local" ? withSeconds(end) : end;
+
+			// Plain ends on both sides are sent the way the framework reads them.
+			let value = next.some(isRangeEnd) ? next : next.map((item) => toStringValue(item));
+			onChange({ ...expression, value, valueType: typedValueType });
+		}
+
+		let renderEnd = (index: 0 | 1, label: string) => {
+			let end = ends[index];
+
+			return (
+				<div className="ObFilterEditor-valueCell">
+					{isRangeEnd(end) ? (
+						<ListChoices
+							aria-label={label}
+							columns={columns}
+							dynamicValues={dynamicValues}
+							field={field}
+							readOnly={readOnly}
+							size={size}
+							value={end}
+							onChange={(choice) => setEnd(index, choice)}
+						/>
+					) : (
+						<Textfield
+							className="ObFilterEditor-value"
+							aria-label={label}
+							data-size={size}
+							readOnly={readOnly}
+							type={inputType}
+							value={end}
+							onChange={(event) => setEnd(index, event.target.value)}
+						/>
+					)}
+					{canPickFromList && (
+						<ListToggle isList={isRangeEnd(end)} onToggle={() => setEnd(index, isRangeEnd(end) ? "" : firstChoice)} />
+					)}
+				</div>
+			);
+		};
+
+		return (
+			<div className="ObFilterEditor-valueCell">
+				<div className="ObFilterEditor-pair">
+					{renderEnd(0, getLocalizedString("From"))}
+					<span className="ObFilterEditor-pairSeparator">{getLocalizedString("and")}</span>
+					{renderEnd(1, getLocalizedString("To"))}
+				</div>
+			</div>
+		);
+	}
+
 	let editor: React.ReactNode;
 
-	if (isDynamic) {
+	if (isList) {
 		editor = (
-			<Select
-				className="ObFilterEditor-value"
+			<ListChoices
 				aria-label={getLocalizedString("Value")}
-				data-size={size}
-				disabled={readOnly}
-				value={toStringValue(expression.value)}
-				onChange={(event) => setValue(event.target.value)}
-			>
-				{dynamicValues.map((dynamicValue) => (
-					<Select.Option key={dynamicValue} value={dynamicValue}>
-						{getDynamicValueLabel(dynamicValue as DynamicValue)}
-					</Select.Option>
-				))}
-			</Select>
+				columns={columns}
+				dynamicValues={dynamicValues}
+				field={field}
+				readOnly={readOnly}
+				size={size}
+				value={{
+					valueType: expression.valueType as FilterRangeEnd["valueType"],
+					value: toStringValue(expression.value),
+				}}
+				onChange={setChoice}
+			/>
 		);
 	} else if (arity === "list") {
 		editor = options ? (
@@ -157,32 +357,6 @@ export function FilterValueEditor({
 				onChange={setValue}
 			/>
 		);
-	} else if (arity === "pair") {
-		let [from, to] = toArrayValue(expression.value, 2);
-
-		editor = (
-			<div className="ObFilterEditor-pair">
-				<Textfield
-					className="ObFilterEditor-value"
-					aria-label={getLocalizedString("From")}
-					data-size={size}
-					readOnly={readOnly}
-					type={inputType}
-					value={from}
-					onChange={(event) => setValue([event.target.value, to])}
-				/>
-				<span className="ObFilterEditor-pairSeparator">{getLocalizedString("and")}</span>
-				<Textfield
-					className="ObFilterEditor-value"
-					aria-label={getLocalizedString("To")}
-					data-size={size}
-					readOnly={readOnly}
-					type={inputType}
-					value={to}
-					onChange={(event) => setValue([from, event.target.value])}
-				/>
-			</div>
-		);
 	} else if (options) {
 		let current = toStringValue(expression.value);
 
@@ -214,26 +388,13 @@ export function FilterValueEditor({
 		);
 	}
 
-	// Dynamic values are resolved server side, so they can only replace the whole
-	// value. Pairs would need one toggle per side, which the Windows editor does
-	// not offer either.
-	let canToggleDynamic = !readOnly && dynamicValues.length > 0 && arity === "single";
+	// A list of values is matched as a whole, so it has nothing to pick from.
+	let canToggle = canPickFromList && arity === "single";
 
 	return (
 		<div className="ObFilterEditor-valueCell">
 			{editor}
-			{canToggleDynamic && (
-				<button
-					type="button"
-					className="ObFilterEditor-iconButton"
-					aria-pressed={isDynamic}
-					title={getLocalizedString("Use a relative value")}
-					aria-label={getLocalizedString("Use a relative value")}
-					onClick={() => setDynamic(!isDynamic)}
-				>
-					<PencilIcon aria-hidden />
-				</button>
-			)}
+			{canToggle && <ListToggle isList={isList} onToggle={toggleList} />}
 		</div>
 	);
 }

package/src/layout/AppMenuItem.css

@@ -37,9 +37,9 @@
 	font-weight: 500;
 	color: var(--ds-color-neutral-text-default, rgba(0, 0, 0, 0.87));
 	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	/* Long labels wrap onto a second line, evened out, instead of being cut off */
+	overflow-wrap: anywhere;
+	text-wrap: balance;
 }
 
 .AppMenuItem-info {