@olenbetong/appframe-ds 0.9.1 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # @olenbetong/appframe-ds
 
+## 1.0.0
+
+### Major Changes
+
+- 3c78efe: Migrate the grid from MUI X Pro to MUI X Premium.
+
+  **Breaking:** the `@mui/x-data-grid-pro` peer dependency is replaced by
+  `@mui/x-data-grid-premium`, and the MUI X license key must be a Premium key
+  (`S=premium`). A Pro key makes every grid fail with "license key plan mismatch".
+
+  `AfGrid` still renders and behaves as before — `DataGridPremium` is a superset of
+  `DataGridPro` — but the re-exported namespaces now come from the Premium package:
+  - `@olenbetong/appframe-ds/grid` → `MuiDataGrid`
+  - `@olenbetong/appframe-mui` → `DataGrid`
+
+  Consumers importing `DataGridPro`, `DataGridProProps` or `GridApiPro` through those
+  namespaces must rename them to `DataGridPremium`, `DataGridPremiumProps` and
+  `GridApiPremium`.
+
+  Row grouping and aggregation are now wired up:
+  - The column menu gains "Group by …" and "Aggregation", from the Premium package.
+  - Both models are persisted with the rest of the grid layout, and restored on
+    reload. Turn either off with `persistenceModel.rowGrouping` /
+    `persistenceModel.aggregation`.
+  - While a grouping is active the grid falls back to client side sorting, since
+    grouped rows are built and ordered on the client. `disableServerSorting` no
+    longer has to be set by hand for a grouped grid.
+  - The new `useAfRowGrouping` hook is exported for grids that compose the grid
+    props themselves.
+
+  Note that grouping and aggregation are computed over the rows the grid holds. For
+  a dynamically loading data object that is the current page only, so a grouped grid
+  wants `maxRecords` large enough to cover the result set.
+
+### Minor Changes
+
+- c6ee375: `AfGrid` can resolve the grand total on the server. MUI aggregates over the rows it has been given,
+  which on a dynamically loading data object is the current page — a sum that looks like a total and
+  is not one. The grid now runs a second retrieve under the same filters asking only for the
+  aggregates, and substitutes that into the footer. On by default when the data object loads
+  dynamically; `serverAggregation={false}` opts out. `sum`, `avg`, `min` and `max` are resolved server
+  side, group subtotals stay on the client, and a view that cannot be aggregated falls back to the
+  client total rather than failing.
+
+  Aggregation rows also no longer run a column's `renderCell`. A total row has no record behind it, so
+  a `renderCell` reading `params.row` rendered nothing there — turning on a sum produced a pinned row
+  of empty cells, and unaggregated columns rendered whatever their `renderCell` made of an empty
+  record. The grid renders the aggregated value instead, formatted by the column's `valueFormatter`.
+
+  Links inside a grid cell now take the brand colour and an underline instead of inheriting the cell's
+  text colour, which left them indistinguishable from ordinary text until hovered.
+
+- 61afab0: Add `AppMenuDrawer` and `useAppMenuDrawer`, so an app can have an app menu without an appbar.
+
+  Apps on the `ob.2026.application` template get a toolbar from the template. Until now the app menu
+  was only reachable through `Page.Header`'s `appbar` variant, which draws a bar of its own — so
+  adding navigation meant a second, stacked toolbar. The drawer is now a component in its own right:
+  docked beside the content on desktop, an overlay on smaller screens, exactly as before.
+
+  `Page.Header` is refactored onto the same component and hook, so there is one implementation and
+  its behaviour is unchanged.
+
+  The drawer is now positioned against the page rather than the viewport (`absolute` inside
+  `Page`, which becomes `position: relative`), so it stays clear of any site chrome rendered above
+  the app. Raising its `z-index` would instead put the menu over that chrome and hide it — and
+  `#root` frequently creates its own stacking context, so it would not reliably work anyway. A
+  drawer therefore has to be inside `Page`, and `layout="app"` so the page has a height.
+
+  `Page` with `layout="app"` is now `height: 100%` rather than `100vh`. It fills the element the app
+  is mounted in; `100vh` was taller than the space available whenever a template rendered chrome
+  above `#root`, cutting off the bottom of the page.
+
+- d64c1b1: Add the `Mdi` multi-document workspace under the new `@olenbetong/appframe-ds/mdi` subpath: tiled groups of tabbed documents on dockview, with a document-type registry (type → React component + params), open-or-activate by key, unclosable panes, a dirty-close prompt, popout windows, and per-user layout persistence in IndexedDB including the open documents. Adds the `dockview-react` dependency; it is only bundled by apps that import the subpath.
+- 2e2ef82: Add a DevExpress-style new item row to `AfGrid`: a single non-data row pinned above or below the data (`newItemRow="top" | "bottom" | "none"`, default `bottom`) that reads "Click here to add a new row" until edited. Editing it moves the data object's current index to -1, the framework's new record, so bound forms and child data objects follow; committing it saves the record through `endEdit()`, and Escape discards it. The toolbar Add button and Alt+N start it, and `apiRef.current.startNewItemRow()` starts it from code. When `newItemRow` is not given, the position follows the data object's `newRecordPosition` option, so the row sits where the saved record will land; older data packages without the option get the row at the bottom. The previous approach of injecting an unsaved row into the grid is only used when the new item row is turned off.
+
+  Row ids are now read through the `uid` symbol exported by `@olenbetong/appframe-data` instead of the global `af.data.uid`. They are the same object in applications; the change matters where the data package is bundled separately, such as Storybook.
+
+- e022401: `Page.Block` takes an `align` prop. `start` keeps a width-constrained block against the leading edge
+  instead of centring it in whatever space is left — what the old `PageContainer` did, and what an app
+  with a docked navigation drawer usually wants, since centring leaves the content floating away from
+  the menu it belongs to. Defaults to `center`, so nothing changes for existing blocks.
+
+### Patch Changes
+
+- 6fa571f: `Combobox` and `Autocomplete` lay a custom option out as a row. `renderOption` content sat in a
+  bare inline `span`, so an option built from an avatar or icon beside a block of text — which is
+  what most of them are — dropped the text onto its own line and stacked the two. The wrapper is now
+  a flex row with the popup's own gap, and carries a class (`ObAutocomplete-itemContent`) so it can
+  be styled.
+- 22cd5f4: `BoundTextField` now accepts the textarea-only props. `TextfieldProps` is a union of the input and
+  the textarea variant, and the non-distributive `Omit` over it kept only what both branches share —
+  so `multiline` type-checked but `rows` and `cols` did not.
+- 22cd5f4: `Combobox` now reports the selected option's label through `onInputChange` with the reason
+  `"reset"`. It already wrote that label into its own input, but the write is a no-op when the caller
+  controls `inputValue`, so a controlled input stayed empty next to a value that was set from the
+  outside.
+- 21c1977: Fix the distinct value list overlapping the Apply and Clear buttons in the grid's header filter panel.
+
+  The distinct section was free to shrink to nothing while the list inside it held a minimum height, so once the panel was shorter than its content the list spilled out — the section's overflow is visible — and painted over the buttons and the truncation hint below it. It now has an explicit floor covering the search toolbar, the hint and the list's own minimum, so a panel too short for that scrolls instead of overlapping. The floor cannot be `auto`: that resolves to min-content, and the list is the scroll container, so its min-content height is the entire unscrolled list.
+
+  The header filter panel's default height also goes from `26rem` to `30rem`, which is what the criteria, the list at its minimum and the hint actually need. The panel is still resizable and still capped at `80vh`.
+
+- 96600c7: Stop the data grid from logging `Designsystemet: Missing tabindex="0" attribute on:` for every column header.
+
+  Designsystemet's tooltip labels its host element and warns when that host is not tabbable. Inside the grid it never is — the column header owns the tab stop and moves focus with the arrow keys, so MUI gives the column menu button `tabindex="-1"` and hangs the sort tooltip on a bare `<span>`. The tooltips work regardless, because Designsystemet resolves the host with `closest()` on hover and focus, so the warning was a false positive — and it is not gated on `NODE_ENV`, so it reached production builds too.
+
+  The `baseTooltip` slot now applies the accessible name itself, using the same rule Designsystemet does (`aria-description` when the host has text content, `aria-label` when it does not), which makes Designsystemet skip the branch that warns. Markup and behaviour are unchanged, and `window.dsWarnings` stays on for the rest of the app.
+
+- Updated dependencies [690f764]
+- Updated dependencies [2e2ef82]
+  - @olenbetong/appframe-react@2.1.3
+  - @olenbetong/appframe-data@1.7.0
+
 ## 0.9.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.9.1",
+  "version": "1.0.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -13,6 +13,10 @@
       "types": "./es/grid/index.d.ts",
       "import": "./es/grid/index.js"
     },
+    "./mdi": {
+      "types": "./es/mdi/index.d.ts",
+      "import": "./es/mdi/index.js"
+    },
     "./report-downloader": {
       "types": "./es/report-downloader/index.d.ts",
       "import": "./es/report-downloader/index.js"
@@ -28,7 +32,7 @@
     "@emotion/react": ">=11.14.0",
     "@emotion/styled": ">=11.14.1",
     "@mui/material": ">=9.0.0",
-    "@mui/x-data-grid-pro": ">=8.0.0 <9.0.0",
+    "@mui/x-data-grid-premium": ">=8.0.0 <9.0.0",
     "@mui/x-license": ">=8.0.0 <9.0.0",
     "@navikt/aksel-icons": ">=8.16.1",
     "react": ">=19.2.8",
@@ -46,7 +50,7 @@
     "@mui/material": {
       "optional": true
     },
-    "@mui/x-data-grid-pro": {
+    "@mui/x-data-grid-premium": {
       "optional": true
     },
     "@mui/x-license": {
@@ -55,37 +59,38 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "2.0.2",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "2.2.0",
     "@base-ui/react": "1.7.0",
     "clsx": "^2.1.1",
+    "dockview-react": "8.2.0",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "react-virtualized-auto-sizer": "^1.0.26",
     "react-window": "^1.8.11",
     "@olenbetong/appframe-core": "2.13.1",
-    "@olenbetong/appframe-data": "1.6.2",
-    "@olenbetong/appframe-react": "2.1.2"
+    "@olenbetong/appframe-data": "1.7.0",
+    "@olenbetong/appframe-react": "2.1.3"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.18.0",
+    "@digdir/designsystemet-react": "1.21.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/material": "9.3.1",
-    "@mui/x-data-grid-pro": "8.29.2",
-    "@mui/x-license": "8.29.2",
+    "@mui/material": "9.4.0",
+    "@mui/x-data-grid-premium": "8.29.3",
+    "@mui/x-license": "8.29.3",
     "@navikt/aksel-icons": "8.16.1",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.1",
-    "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "^14.6.3",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "^14.6.6",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
+    "@types/react-dom": "19.2.5",
     "@types/react-window": "^1.8.8",
-    "happy-dom": "^20.11.1",
+    "happy-dom": "^20.12.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "react-error-boundary": "6.1.2",
-    "react-router": "8.3.0",
+    "react-error-boundary": "6.1.4",
+    "react-router": "8.3.1",
     "typescript": "7.0.2"
   },
   "scripts": {

package/scripts/copyAssets.mjs

@@ -5,6 +5,7 @@ const files = [
 	["src/AfLookup/LookupGrid.css", "es/AfLookup/LookupGrid.css"],
 	["src/AfLookup/LookupCombobox.css", "es/AfLookup/LookupCombobox.css"],
 	["src/layout/AppMenu.css", "es/layout/AppMenu.css"],
+	["src/layout/AppMenuDrawer.css", "es/layout/AppMenuDrawer.css"],
 	["src/layout/AppMenuItem.css", "es/layout/AppMenuItem.css"],
 	["src/layout/AppMenuSubheader.css", "es/layout/AppMenuSubheader.css"],
 	["src/layout/AppLayoutDesktop.css", "es/layout/AppLayoutDesktop.css"],
@@ -30,6 +31,7 @@ const files = [
 	["src/filter/SavedFilterTree.css", "es/filter/SavedFilterTree.css"],
 	["src/grid/index.css", "es/grid/index.css"],
 	["src/grid/slots/slots.css", "es/grid/slots/slots.css"],
+	["src/mdi/Mdi.css", "es/mdi/Mdi.css"],
 	["src/report-downloader/ReportDownloader.css", "es/report-downloader/ReportDownloader.css"],
 ];
 
@@ -44,6 +46,7 @@ mkdirSync("es/autocomplete", { recursive: true });
 mkdirSync("es/filter", { recursive: true });
 mkdirSync("es/grid", { recursive: true });
 mkdirSync("es/grid/slots", { recursive: true });
+mkdirSync("es/mdi", { recursive: true });
 mkdirSync("es/report-downloader", { recursive: true });
 
 for (let [src, dest] of files) {

package/src/autocomplete/Autocomplete.css

@@ -223,6 +223,19 @@
 	opacity: var(--ds-opacity-disabled);
 }
 
+/*
+ * The option's content. It is a flex row rather than the inline box it looks like, because
+ * `renderOption` is normally an icon or an avatar beside a block of text — and a block child in an
+ * inline parent drops onto its own line, stacking the two instead of setting them side by side.
+ */
+.ObAutocomplete-itemContent {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-2);
+	flex: 1;
+	min-inline-size: 0;
+}
+
 .ObAutocomplete-itemIndicator {
 	display: inline-flex;
 	flex: none;

package/src/autocomplete/Autocomplete.tsx

@@ -228,7 +228,9 @@ export function Autocomplete<
 				data-selected={selected || undefined}
 				onClick={(event) => handleSelectOption(option, event.nativeEvent)}
 			>
-				<span>{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}</span>
+				<span className="ObAutocomplete-itemContent">
+					{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}
+				</span>
 			</BaseAutocomplete.Item>
 		);
 	}

package/src/autocomplete/Combobox.tsx

@@ -121,14 +121,25 @@ export function Combobox<Option, Multiple extends boolean | undefined = false>(p
 	// the user interacts, but not when the selection is set from the outside.
 	let selectedLabel = multiple || value == null ? "" : getOptionLabel(value as Option);
 	let [inputValue, setInputValue] = useControlled(inputValueProp, selectedLabel);
-	let previousLabel = useRef(selectedLabel);
+	// `null` until the first sync, so a value that is already set on mount is synced too.
+	let previousLabel = useRef<string | null>(null);
 
 	useEffect(() => {
 		if (previousLabel.current === selectedLabel) return;
 
+		let firstSync = previousLabel.current === null;
 		previousLabel.current = selectedLabel;
+
+		// Nothing to correct on mount when no option is selected, and blanking the input would
+		// throw away an initial `inputValue` the caller set deliberately.
+		if (firstSync && selectedLabel === "") return;
+
 		setInputValue(selectedLabel);
-	}, [selectedLabel, setInputValue]);
+		// `setInputValue` is a no-op when the caller controls `inputValue`, so the label has to
+		// be reported instead — otherwise a controlled input stays empty next to a selected
+		// value. Mirrors MUI, which reports the same thing with the reason `"reset"`.
+		onInputChange?.(undefined, selectedLabel, "reset");
+	}, [selectedLabel, setInputValue, onInputChange]);
 
 	let filteredOptions = useMemo(() => {
 		let filter = (filterOptions ?? defaultFilterOptions) as (
@@ -190,7 +201,9 @@ export function Combobox<Option, Multiple extends boolean | undefined = false>(p
 				{multiple && (
 					<BaseCombobox.ItemIndicator className="ObAutocomplete-itemIndicator">✓</BaseCombobox.ItemIndicator>
 				)}
-				<span>{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}</span>
+				<span className="ObAutocomplete-itemContent">
+					{renderOption?.(option, { index, inputValue, selected }) ?? getOptionLabel(option)}
+				</span>
 			</BaseCombobox.Item>
 		);
 	}

package/src/binding/BoundTextField.tsx

@@ -2,7 +2,15 @@ import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
 import { useField } from "@olenbetong/appframe-react";
 import { forwardRef } from "react";
 
-export type BoundTextFieldProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown"> & {
+/*
+ * `TextfieldProps` is a union of the input and the textarea variant. A plain `Omit` over it keeps
+ * only the props both branches share, which silently drops the textarea-only ones (`rows`,
+ * `cols`) — so `multiline` was accepted but `rows` was not. Distributing the `Omit` over the union
+ * keeps each branch intact.
+ */
+type OmitBoundProps<T> = T extends unknown ? Omit<T, "value" | "onChange" | "onKeyDown"> : never;
+
+export type BoundTextFieldProps = OmitBoundProps<TextfieldProps> & {
 	field: string;
 };
 

package/src/filter/FieldFilterPanel.css

@@ -41,13 +41,36 @@
 }
 
 .ObFieldFilterPanel-distinct {
+	/*
+	 * The parts the section cannot usefully shrink past, named so the floor below
+	 * and the list's own minimum cannot drift apart.
+	 */
+	--obFieldFilterPanel-list-min-size: 8rem;
+	--obFieldFilterPanel-toolbar-size: 2.75rem; /* a `sm` search field */
+	--obFieldFilterPanel-hint-size: 1.25rem; /* one line of truncation hint */
+
 	display: flex;
 	flex-direction: column;
 	flex: 1 1 auto;
 	gap: var(--ds-size-2, 0.5rem);
-	min-block-size: 0;
 	padding-block-start: var(--ds-size-2, 0.5rem);
 	border-block-start: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
+
+	/*
+	 * The section follows the panel's height, but only down to the toolbar, the
+	 * hint and the list's own minimum. Without a floor it kept shrinking while
+	 * the list held its minimum, and since the overflow here is visible the list
+	 * spilled out and painted over the buttons the panel puts after it.
+	 *
+	 * The floor has to be an explicit length. `auto` resolves to min-content, and
+	 * the list is the scroll container, so its min-content height is the whole
+	 * unscrolled list — that would stretch the section to fit every distinct
+	 * value. Once the panel is too short for this, it scrolls instead.
+	 */
+	min-block-size: calc(
+		var(--obFieldFilterPanel-list-min-size) + var(--obFieldFilterPanel-toolbar-size) +
+			var(--obFieldFilterPanel-hint-size) + 2 * var(--ds-size-2, 0.5rem)
+	);
 }
 
 .ObFieldFilterPanel-distinctToolbar {
@@ -80,7 +103,7 @@
  */
 .ObFieldFilterPanel-valuesBox {
 	flex: 1 1 auto;
-	min-block-size: 8rem;
+	min-block-size: var(--obFieldFilterPanel-list-min-size, 8rem);
 	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #e7e7e7);
 	border-radius: var(--ds-border-radius-md, 0.25rem);
 	background: var(--ds-color-neutral-surface-tinted, rgb(0 0 0 / 2%));

package/src/grid/AfGridColumnsPanel.tsx

@@ -4,7 +4,7 @@ import {
 	gridColumnDefinitionsSelector,
 	gridColumnVisibilityModelSelector,
 	useGridSelector,
-} from "@mui/x-data-grid-pro";
+} from "@mui/x-data-grid-premium";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 
 import { useState } from "react";

package/src/grid/AfGridContext.tsx

@@ -1,4 +1,4 @@
-import type { GridApi } from "@mui/x-data-grid-pro";
+import type { GridApi } from "@mui/x-data-grid-premium";
 import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
 import { createContext, useContext } from "react";
 

package/src/grid/AfGridError.tsx

@@ -1,5 +1,5 @@
 import { Alert, Button } from "@digdir/designsystemet-react";
-import type { GridApi } from "@mui/x-data-grid-pro";
+import type { GridApi } from "@mui/x-data-grid-premium";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
 import { useError } from "@olenbetong/appframe-react";

package/src/grid/AfHeaderFilterCell.tsx

@@ -1,5 +1,5 @@
 import { Button, Popover } from "@digdir/designsystemet-react";
-import type { GridRenderHeaderFilterProps } from "@mui/x-data-grid-pro";
+import type { GridRenderHeaderFilterProps } from "@mui/x-data-grid-premium";
 import { FunnelFillIcon, FunnelIcon, XMarkIcon } from "@navikt/aksel-icons";
 import {
 	createExpression,

package/src/grid/Toolbar.tsx

@@ -4,7 +4,7 @@ import {
 	type GridExportMenuItemProps,
 	gridVisibleColumnDefinitionsSelector,
 	useGridApiContext,
-} from "@mui/x-data-grid-pro";
+} from "@mui/x-data-grid-premium";
 import {
 	ArrowsCirclepathIcon,
 	Density1Icon,

package/src/grid/editing.ts

@@ -1,9 +1,15 @@
-import { type GridApi, gridFocusCellSelector, gridVisibleColumnDefinitionsSelector } from "@mui/x-data-grid-pro";
+import { type GridApi, gridFocusCellSelector, gridVisibleColumnDefinitionsSelector } from "@mui/x-data-grid-premium";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import type { DataObject } from "@olenbetong/appframe-data";
+import { type DataObject, uid } from "@olenbetong/appframe-data";
 
 import type React from "react";
 
+import type { AfGridApi } from "./useAfGridApi.js";
+
+/**
+ * Starts a new row. With a new item row on the grid that row is focused and put
+ * in edit mode; otherwise an unsaved row is appended to the data and edited there.
+ */
 export function addRow<T extends { PrimKey: string }>({
 	apiRef,
 	dataObject,
@@ -11,9 +17,13 @@ export function addRow<T extends { PrimKey: string }>({
 	apiRef: React.RefObject<GridApi | null>;
 	dataObject: DataObject<T>;
 }) {
+	if ((apiRef.current as AfGridApi | null)?.startNewItemRow?.()) {
+		return;
+	}
+
 	let newRow = dataObject.newRow();
-	let id = (newRow as any)[(af as any).data.uid];
-	apiRef.current?.updateRows([{ [(af as any).data.uid]: id, id, isNew: true } as any]);
+	let id = (newRow as any)[uid];
+	apiRef.current?.updateRows([{ [uid]: id, id, isNew: true } as any]);
 	apiRef.current?.startRowEditMode({ id });
 
 	// Wait for the grid to render with the new row
@@ -48,7 +58,7 @@ export async function deleteRow<T extends { PrimKey: string }>({
 		}
 
 		let focusBefore = gridFocusCellSelector(apiRef);
-		let index = dataObject.findIndex((r) => (r as any)[idField] === id || (r as any)[(af as any).data.uid] === id);
+		let index = dataObject.findIndex((r) => (r as any)[idField] === id || (r as any)[uid] === id);
 
 		if (index < 0) {
 			alert(getLocalizedString("Row not found"));
@@ -60,12 +70,12 @@ export async function deleteRow<T extends { PrimKey: string }>({
 		let focusAfter = gridFocusCellSelector(apiRef);
 
 		// Need to run this operation to prevent MUI errors
-		apiRef.current?.updateRows([{ [af.data.uid]: id, id, _action: "delete" }]);
+		apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" }]);
 
 		if (!focusAfter || focusAfter.id === id) {
 			if (dataObject.getDataLength() > 0) {
 				let newIndex = Math.max(0, Math.min(dataObject.getDataLength() - 1, index - 1));
-				let newId = (dataObject.getData(newIndex) as any)[(af as any).data.uid];
+				let newId = (dataObject.getData(newIndex) as any)[uid];
 				let newField = focusBefore?.field ?? gridVisibleColumnDefinitionsSelector(apiRef)[0]?.field;
 
 				if (newId && newField) {

package/src/grid/filter.ts

@@ -10,7 +10,7 @@ import {
 	getGridNumericOperators,
 	getGridSingleSelectOperators,
 	getGridStringOperators,
-} from "@mui/x-data-grid-pro";
+} from "@mui/x-data-grid-premium";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 
 const stringOperators = getGridStringOperators();

package/src/grid/index.css

@@ -162,8 +162,14 @@
 
 	inline-size: 22rem;
 	max-inline-size: 90vw;
-	block-size: 26rem;
 	max-block-size: 80vh;
+
+	/*
+	 * Tall enough for the criteria, the distinct list at its minimum and the
+	 * truncation hint, without the panel having to scroll. At 26rem the hint and
+	 * the buttons below it did not fit.
+	 */
+	block-size: 30rem;
 }
 
 /*
@@ -185,3 +191,55 @@
 	flex: 1 1 auto;
 	min-block-size: 0;
 }
+
+/* New item row */
+
+/*
+ * The new item row is a pinned row that shows an overlay text until it is
+ * edited. The text comes from the `--AfGrid-newItemRowText` custom property the
+ * grid root sets, so it is localized without an extra DOM node. In view mode the
+ * cell contents are hidden rather than removed, so keyboard focus still lands
+ * on a cell and a double-click or keypress starts editing as on any row.
+ */
+.MuiDataGrid-row.AfGrid-newItemRow {
+	position: relative;
+}
+
+.MuiDataGrid-row.AfGrid-newItemRow:not(.MuiDataGrid-row--editing) .MuiDataGrid-cell > * {
+	visibility: hidden;
+}
+
+.MuiDataGrid-row.AfGrid-newItemRow:not(.MuiDataGrid-row--editing)::after {
+	content: var(--AfGrid-newItemRowText, "");
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	padding-inline: var(--ds-size-2, 0.5rem);
+	color: var(--ds-color-neutral-text-subtle, #68707c);
+	font-style: italic;
+	pointer-events: none;
+}
+
+/*
+ * Links in a cell.
+ *
+ * The grid sets its own text colour on the cell, and an anchor inherits it, so a link to another
+ * record renders as ordinary text and is only discoverable by hovering it. These give it the
+ * brand colour and an underline the way a link anywhere else on the site has, without the app
+ * having to style every cell that holds one.
+ */
+.AfGrid-root .MuiDataGrid-cell a {
+	color: var(--ds-color-brand-text-default, #0062ba);
+	text-decoration: underline;
+	text-underline-offset: 0.15em;
+}
+
+.AfGrid-root .MuiDataGrid-cell a:hover {
+	color: var(--ds-color-brand-text-subtle, #00417d);
+}
+
+/* Action buttons render as anchors when a column links a row somewhere; they style themselves. */
+.AfGrid-root .MuiDataGrid-cell a.ds-button {
+	text-decoration: none;
+}