@olenbetong/appframe-ds 1.9.3 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @olenbetong/appframe-ds
 
+## 1.11.0
+
+### Minor Changes
+
+- aeeb072: The grid's new item row is pinned at the top by default, instead of following the data object's `newRecordPosition`. At the bottom it sat at the foot of the viewport, far below the data on a short grid. Pass `newItemRow="bottom"` to keep it there.
+
+### Patch Changes
+
+- 4c6a4e7: `endEdit` takes `{ newRecordPosition }` to place a record created from the new record first or last for that save only, overriding the data object's option. The grid uses it so a record saved from the new item row at the top is inserted first, where it was entered, instead of jumping to the end of the data.
+- f4a37c0: The grid's column menu opens the grid's own panels instead of MUI's: Filter opens the filter builder with a new criterion for the column, its value focused (MUI's filter panel edited a filter the grid ignores), and Manage columns opens the grid's columns panel. `FilterBuilder` takes `autoFocusPath` to focus the value of a criterion when it opens.
+- Updated dependencies [c7750da]
+- Updated dependencies [4c6a4e7]
+  - @olenbetong/appframe-data@1.10.0
+
+## 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.9.3",
+  "version": "1.11.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -63,16 +63,16 @@
     "@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.10.0",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
-    "dockview-react": "8.6.1",
+    "dockview-react": "8.8.3",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "react-window": "2.5.0",
+    "react-window": "2.5.3",
     "temporal-polyfill": "1.0.6"
   },
   "devDependencies": {
@@ -82,7 +82,7 @@
     "@mui/material": "9.5.0",
     "@mui/x-data-grid-premium": "8.29.5",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.20.0",
+    "@navikt/aksel-icons": "8.21.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
@@ -91,7 +91,7 @@
     "@types/react-dom": "19.3.0",
     "happy-dom": "21.0.4",
     "react-error-boundary": "6.1.6",
-    "react-router": "8.5.0",
+    "react-router": "8.5.1",
     "typescript": "7.0.2",
     "vitest": "5.0.5"
   },

package/src/filter/FilterBuilder.test.tsx

@@ -122,6 +122,24 @@ describe("FilterBuilder", () => {
 		);
 	});
 
+	it("focuses the value of the criterion at autoFocusPath", () => {
+		renderBuilder({
+			autoFocusPath: [1],
+			defaultValue: {
+				type: "group",
+				mode: "and",
+				items: [
+					{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" },
+					{ type: "expression", column: "Age", operator: "equals", value: "", valueType: "number" },
+				],
+			},
+		});
+
+		let values = screen.getAllByLabelText("Value");
+
+		expect(document.activeElement).toBe(values[1]);
+	});
+
 	it("reports an empty filter as null", async () => {
 		let onApply = vi.fn();
 		renderBuilder({ onApply });

package/src/filter/FilterBuilder.tsx

@@ -8,6 +8,7 @@ import {
 	canShareSavedFilter,
 	createEmptyFilter,
 	findSavedFilter,
+	type FilterPath,
 	type FilterTree,
 	isEmptyFilter,
 	pruneFilter,
@@ -17,7 +18,7 @@ import { type NamedFilterType, setNamedFilter, useFilterConversion, useSavedFilt
 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 { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 import { FilterEditor } from "./FilterEditor.js";
 import { FilterNameDialog } from "./FilterNameDialog.js";
@@ -109,6 +110,11 @@ export type FilterBuilderProps = {
 	renderMain?: (editor: ReactNode) => ReactNode;
 	/** Hides the saved-filter list, leaving just the criteria editor. */
 	hideSavedFilters?: boolean;
+	/**
+	 * Path of the criterion whose value gets focus when the builder opens, for a caller that has
+	 * just added it.
+	 */
+	autoFocusPath?: FilterPath | null;
 	className?: string;
 	"data-size"?: FilterEditorSize;
 };
@@ -159,9 +165,25 @@ export function FilterBuilder({
 	actions,
 	renderMain,
 	hideSavedFilters,
+	autoFocusPath,
 	className,
 	"data-size": size,
 }: FilterBuilderProps) {
+	let rootRef = useRef<HTMLDivElement>(null);
+	let autoFocusKey = autoFocusPath?.join(".");
+
+	/*
+	 * Runs after the dialog's own effect has opened it, which focuses its first control. The value
+	 * editor depends on the field and operator, so the first input in the row's value cell is used.
+	 */
+	useEffect(() => {
+		if (!open || autoFocusKey === undefined) return;
+
+		let row = rootRef.current?.querySelector(`.ObFilterEditor-row[data-path="${autoFocusKey}"]`);
+		let input = row?.querySelector<HTMLElement>(".ObFilterEditor-valueCell :is(input, select, textarea)");
+
+		input?.focus();
+	}, [open, autoFocusKey]);
 	let resolvedId = dbObjectId ?? viewName;
 	let { mine, shared, filters, loading, save, rename, remove, setCrossDomain } = useSavedFilters({
 		dbObjectId: reportId ? undefined : resolvedId,
@@ -299,6 +321,7 @@ export function FilterBuilder({
 
 	let content = (
 		<div
+			ref={rootRef}
 			className={clsx("ObFilterBuilder-root", hideSavedFilters && "ObFilterBuilder-root--noSavedFilters", className)}
 			data-size={size}
 		>

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/FilterGroupEditor.tsx

@@ -111,6 +111,7 @@ export function FilterGroupEditor({
 							// oxlint-disable-next-line no-array-index-key -- see above
 							key={index}
 							expression={item}
+							path={[...path, index]}
 							fields={fields}
 							getFieldOptions={getFieldOptions}
 							readOnly={readOnly}

package/src/filter/FilterRow.tsx

@@ -6,8 +6,10 @@ import {
 	type FieldMetadata,
 	type FilterExpression,
 	type FilterOperator,
+	type FilterPath,
 	getOperatorLabel,
 	getOperatorsForField,
+	isRangeEnd,
 	normalizeOperator,
 } from "@olenbetong/appframe-core";
 import { Combobox } from "../autocomplete/index.js";
@@ -16,6 +18,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;
 }
@@ -25,6 +35,8 @@ export type FilterRowProps = {
 	fields: FieldMetadata[];
 	onChange: (expression: FilterExpression) => void;
 	onRemove: () => void;
+	/** Where the expression sits in the tree, written to `data-path` so a row can be found to focus it. */
+	path?: FilterPath;
 	getFieldOptions?: GetFieldOptions;
 	readOnly?: boolean;
 	"data-size"?: FilterEditorSize;
@@ -36,6 +48,7 @@ export function FilterRow({
 	fields,
 	onChange,
 	onRemove,
+	path,
 	getFieldOptions,
 	readOnly,
 	"data-size": size,
@@ -60,11 +73,14 @@ 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 (
-		<div className="ObFilterEditor-row">
+		<div className="ObFilterEditor-row" data-path={path?.join(".")}>
 			<Combobox
 				className="ObFilterEditor-field"
 				data-size={size}
@@ -96,6 +112,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/grid/AfColumnMenuColumnsItem.tsx

@@ -0,0 +1,30 @@
+import { type GridColumnMenuItemProps, GridColumnMenuHideItem, useGridRootProps } from "@mui/x-data-grid-premium";
+
+import { useOptionalAfGridContext } from "./AfGridContext.js";
+import { getLocalizedString } from "../i18n.js";
+
+/**
+ * The column menu's Hide and Manage columns items. MUI's Manage columns opens its own columns panel;
+ * this opens the grid's columns panel, the same one as the toolbar's Columns button.
+ */
+export function AfColumnMenuColumnsItem(props: GridColumnMenuItemProps) {
+	let rootProps = useGridRootProps();
+	let context = useOptionalAfGridContext();
+
+	return (
+		<>
+			<GridColumnMenuHideItem {...props} />
+			{context && !rootProps.disableColumnSelector && (
+				<rootProps.slots.baseMenuItem
+					onClick={(event: React.MouseEvent<HTMLElement>) => {
+						props.onClick(event);
+						context.openColumnsPanel();
+					}}
+					iconStart={<rootProps.slots.columnMenuManageColumnsIcon fontSize="small" />}
+				>
+					{getLocalizedString("Manage columns")}
+				</rootProps.slots.baseMenuItem>
+			)}
+		</>
+	);
+}

package/src/grid/AfColumnMenuFilterItem.tsx

@@ -0,0 +1,36 @@
+import { type GridColumnMenuItemProps, useGridRootProps } from "@mui/x-data-grid-premium";
+
+import { useOptionalAfGridContext } from "./AfGridContext.js";
+import { findFilterField } from "./useAfFilter.js";
+import type { AfGridColDef } from "./useAfColumns.js";
+import { getLocalizedString } from "../i18n.js";
+
+/**
+ * The column menu's Filter item. MUI's opens its own filter panel, which edits a filter model the
+ * grid never reads; this opens the filter builder with a new criterion for the column instead.
+ */
+export function AfColumnMenuFilterItem({ colDef, onClick }: GridColumnMenuItemProps) {
+	let rootProps = useGridRootProps();
+	let context = useOptionalAfGridContext();
+	let fieldName = (colDef as AfGridColDef).filterColumn ?? colDef.field;
+
+	if (!context || rootProps.disableColumnFilter || colDef.filterable === false || colDef.type === "actions") {
+		return null;
+	}
+
+	if (!findFilterField(context.filterFields, fieldName)) return null;
+
+	let { openFilterBuilder } = context;
+
+	return (
+		<rootProps.slots.baseMenuItem
+			onClick={(event: React.MouseEvent<HTMLElement>) => {
+				onClick(event);
+				openFilterBuilder(fieldName);
+			}}
+			iconStart={<rootProps.slots.columnMenuFilterIcon fontSize="small" />}
+		>
+			{getLocalizedString("Filter")}
+		</rootProps.slots.baseMenuItem>
+	);
+}

package/src/grid/AfGridContext.tsx

@@ -8,8 +8,11 @@ export type AfGridContextValue = {
 	apiRef: React.RefObject<GridApi | null>;
 	/** Fields the filter builder can filter on, derived from the data object and the columns. */
 	filterFields: FieldMetadata[];
-	/** Opens the filter builder dialog. */
-	openFilterBuilder: () => void;
+	/**
+	 * Opens the filter builder dialog. Given a field, it adds an empty criterion for it first, unless
+	 * the filter already has an unfinished one for that field.
+	 */
+	openFilterBuilder: (field?: string) => void;
 	/**
 	 * The grid's filter tree. The header filters and the filter builder edit the
 	 * same tree, so a criterion added in one shows up in the other.

package/src/grid/Toolbar.tsx

@@ -95,7 +95,7 @@ export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps =
 		return (
 			<BadgePosition placement="top-right" overlap="circle">
 				{filterCount > 0 && <Badge data-color="brand" count={filterCount} aria-hidden="true" />}
-				<Button variant="tertiary" icon aria-label={name} title={name} onClick={openFilterBuilder}>
+				<Button variant="tertiary" icon aria-label={name} title={name} onClick={() => openFilterBuilder()}>
 					<FilterIcon aria-hidden />
 				</Button>
 			</BadgePosition>
@@ -103,7 +103,7 @@ export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps =
 	}
 
 	return (
-		<Button variant="tertiary" onClick={openFilterBuilder}>
+		<Button variant="tertiary" onClick={() => openFilterBuilder()}>
 			<FilterIcon aria-hidden />
 			{label}
 			{filterCount > 0 ? ` (${filterCount})` : ""}

package/src/grid/index.tsx

@@ -16,12 +16,15 @@ import {
 	type GridRowParams,
 	useGridApiRef,
 } from "@mui/x-data-grid-premium";
+import { createExpression, type FilterPath, isCompleteExpression, isExpression } from "@olenbetong/appframe-core";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FilterBuilder } from "../filter/index.js";
+import { AfColumnMenuColumnsItem } from "./AfColumnMenuColumnsItem.js";
+import { AfColumnMenuFilterItem } from "./AfColumnMenuFilterItem.js";
 import { AfGridColumnsPanel } from "./AfGridColumnsPanel.js";
 import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
 import { type AfGridContextValue, AfGridContextProvider } from "./AfGridContext.js";
@@ -52,7 +55,7 @@ import { type AfGridColDef, type AfGridRowAction, useAfColumns } from "./useAfCo
 import { useAfCurrentIndex } from "./useAfCurrentIndex.js";
 import { useAfData } from "./useAfData.js";
 import { useAfFilterFields } from "./useAfFilterFields.js";
-import { useAfFilter } from "./useAfFilter.js";
+import { findFilterField, useAfFilter } from "./useAfFilter.js";
 import { type AfGridApi, useAfGridApi } from "./useAfGridApi.js";
 import { useAfKeyBindings } from "./useAfKeyBindings.js";
 import { type AfGridNewItemRowPosition, NEW_ITEM_ROW_ID, isNewItemRow, useAfNewItemRow } from "./useAfNewItemRow.js";
@@ -270,7 +273,7 @@ export type AfGridProps = {
 	 * Editing it moves the data object to the new record at index -1, and committing
 	 * it saves the record. Only shown when the data object allows insert and
 	 * `disableInsert` is not set. `none` turns it off, in which case the Add button
-	 * appends an unsaved row to the data instead. Defaults to `bottom`.
+	 * appends an unsaved row to the data instead. Defaults to `top`.
 	 */
 	newItemRow?: AfGridNewItemRowPosition;
 	/**
@@ -371,9 +374,8 @@ function AfGrid_(props: AfGridProps) {
 		getData,
 		idField = "PrimKey",
 		id,
-		// Follows the data object's `newRecordPosition` when it has one (older data
-		// packages have none and append), so the row sits where the record will land
-		newItemRow: newItemRowPosition = dataObject.options?.newRecordPosition === "start" ? "top" : "bottom",
+		// At the bottom the row is pinned to the foot of the viewport, far below the data on a short grid
+		newItemRow: newItemRowPosition = "top",
 		persistenceModel,
 		initialState,
 		pinnedRows,
@@ -420,6 +422,8 @@ function AfGrid_(props: AfGridProps) {
 	let gridFilter = useAfFilter({ autoLoad, dataObject, id });
 	let [snackbar, setSnackbar] = useState<string | null>(null);
 	let [isFilterBuilderOpen, setFilterBuilderOpen] = useState(false);
+	// The criterion added from a column menu, so its value has focus when the builder opens.
+	let [filterBuilderFocus, setFilterBuilderFocus] = useState<FilterPath | null>(null);
 	let [isColumnsPanelOpen, setColumnsPanelOpen] = useState(false);
 	let editProps = useAfRowEditModel({ dataObject, disableEdit, idField, apiRef, newItemRow });
 	useAfKeepFocusAfterEdit(apiRef);
@@ -493,7 +497,21 @@ function AfGrid_(props: AfGridProps) {
 			apiRef,
 			filterFields,
 			...gridFilter,
-			openFilterBuilder: () => setFilterBuilderOpen(true),
+			openFilterBuilder: (fieldName?: string) => {
+				let field = fieldName ? findFilterField(filterFields, fieldName) : undefined;
+				let { filter, setFilter } = gridFilter;
+				let draftIndex = filter.items.findIndex(
+					(item) => isExpression(item) && item.column === field?.name && !isCompleteExpression(item),
+				);
+
+				if (field && draftIndex === -1) {
+					draftIndex = filter.items.length;
+					setFilter({ ...filter, items: [...filter.items, createExpression(field)] });
+				}
+
+				setFilterBuilderFocus(field ? [draftIndex] : null);
+				setFilterBuilderOpen(true);
+			},
 			openColumnsPanel: () => setColumnsPanelOpen(true),
 		}),
 		[id, apiRef, filterFields, gridFilter],
@@ -555,6 +573,14 @@ function AfGrid_(props: AfGridProps) {
 						initialState={initialState_}
 						slotProps={{
 							...other.slotProps,
+							columnMenu: {
+								...other.slotProps?.columnMenu,
+								slots: {
+									columnMenuColumnsItem: AfColumnMenuColumnsItem,
+									columnMenuFilterItem: AfColumnMenuFilterItem,
+									...other.slotProps?.columnMenu?.slots,
+								},
+							},
 							headerFilterCell: {
 								...other.slotProps?.headerFilterCell,
 								headerClassName: clsx(other.slotProps?.headerFilterCell?.headerClassName, "AfGrid-headerCell"),
@@ -573,6 +599,7 @@ function AfGrid_(props: AfGridProps) {
 				<FilterBuilder
 					variant="dialog"
 					open={isFilterBuilderOpen}
+					autoFocusPath={filterBuilderFocus}
 					onClose={() => setFilterBuilderOpen(false)}
 					fields={filterFields}
 					viewName={filterViewName}

package/src/grid/useAfNewItemRow.ts

@@ -152,7 +152,9 @@ export function useAfNewItemRow({
 			let focusBefore = gridFocusCellSelector(apiRef);
 
 			try {
-				await dataObject.endEdit();
+				// A record saved from a row above the data is inserted first, so it stays where it was
+				// entered; at the bottom the data object's own `newRecordPosition` decides.
+				await dataObject.endEdit(position === "top" ? { newRecordPosition: "start" } : undefined);
 			} catch (error) {
 				// The framework keeps a failed new record in storage as an unsaved row.
 				// The grid keeps the draft in the new item row instead, so the unsaved
@@ -185,7 +187,7 @@ export function useAfNewItemRow({
 
 			return blankRow;
 		},
-		[apiRef, dataObject, beginNewRecord, cancelNewRecord],
+		[apiRef, dataObject, position, beginNewRecord, cancelNewRecord],
 	);
 
 	useEffect(() => {

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 {