@olenbetong/appframe-ds 0.9.0 → 1.0.0

package/src/grid/index.tsx

@@ -2,14 +2,17 @@ import "./index.css";
 
 import { Alert } from "@digdir/designsystemet-react";
 import {
-	DataGridPro as DataGrid,
-	type DataGridProProps as DataGridProps,
+	DataGridPremium as DataGrid,
+	type DataGridPremiumProps as DataGridProps,
+	GRID_AGGREGATION_FUNCTIONS,
+	GRID_ROOT_GROUP_ID,
+	type GridAggregationFunction,
 	type GridApi,
 	type GridFilterModel,
 	useGridApiRef,
-} from "@mui/x-data-grid-pro";
+} 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 { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
@@ -45,6 +48,7 @@ import { useAfFilterFields } from "./useAfFilterFields.js";
 import { 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";
 import { useAfPagination } from "./useAfPagination.js";
 import {
 	isPersistedStateLoaded,
@@ -53,10 +57,12 @@ import {
 	useAfPersistedState,
 } from "./useAfPersistedState.js";
 import { useAfRowEditModel } from "./useAfRowEditModel.js";
+import { useAfRowGrouping } from "./useAfRowGrouping.js";
+import { useAfServerAggregation } from "./useAfServerAggregation.js";
 import { useAfSortModel } from "./useAfSortModel.js";
 
 export * from "./formatters.js";
-export * as MuiDataGrid from "@mui/x-data-grid-pro";
+export * as MuiDataGrid from "@mui/x-data-grid-premium";
 
 registerLicense();
 
@@ -84,10 +90,21 @@ export const systemColumns = {
 	UpdatedBy: privSysColumns[4],
 };
 
-export type { AfExcelExportOptions, AfGridApi, AfGridColDef, AfGridColumn, AfGridExcelExportOptions };
+export type {
+	AfExcelExportOptions,
+	AfGridApi,
+	AfGridColDef,
+	AfGridColumn,
+	AfGridExcelExportOptions,
+	AfGridNewItemRowPosition,
+};
+export type { AfGridGrouping, AfGridGroupingProps } from "./useAfRowGrouping.js";
 
 export {
 	AF_GRID_LOCALE_TEXT,
+	NEW_ITEM_ROW_ID,
+	isNewItemRow,
+	useAfNewItemRow,
 	AfGridColumnsPanel,
 	AfGridExcelExportMenuItem,
 	AfGridThemeProvider,
@@ -109,6 +126,8 @@ export {
 	useAfPagination,
 	useAfPersistedState,
 	useAfRowEditModel,
+	useAfRowGrouping,
+	useAfServerAggregation,
 	useAfSortModel,
 };
 
@@ -162,6 +181,15 @@ export type AfGridProps = {
 	 * saved filters are unavailable.
 	 */
 	filterViewName?: string;
+	/**
+	 * Where to show the new item row: a non-data row pinned above or below the data
+	 * that reads "Click here to add a new row" until the user starts editing it.
+	 * 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`.
+	 */
+	newItemRow?: AfGridNewItemRowPosition;
 	/**
 	 * A unique ID used to persist the grid state. It is better to use the layoutVersion
 	 * property if you would like to ignore any previously persisted state, as changing
@@ -174,6 +202,23 @@ export type AfGridProps = {
 	 * is used to configure which properties should be persisted.
 	 */
 	persistenceModel?: StatePersistenceConfig;
+	/**
+	 * Ask the server for the grand total instead of adding up the rows the grid is holding.
+	 *
+	 * MUI aggregates over the loaded rows, which on a dynamically loading data object is the
+	 * current page — a sum that looks like a total and is not one. With this on, the grid runs a
+	 * second retrieve under the same filters that returns only the aggregates, so the footer shows
+	 * the total over the whole result. Subtotals on grouped rows stay client side, since a group
+	 * only exists over the rows the grid has.
+	 *
+	 * `sum`, `avg`, `min` and `max` are resolved server side; `size` and any custom aggregation
+	 * function stay on the client. If the view cannot be aggregated the grid falls back to the
+	 * client total rather than failing.
+	 *
+	 * Defaults to true when the data object loads dynamically, since that is exactly the case
+	 * where the client total is wrong.
+	 */
+	serverAggregation?: boolean;
 } & Omit<
 	DataGridProps,
 	| "apiRef"
@@ -186,6 +231,10 @@ export type AfGridProps = {
 	| "sortingMode"
 	| "sortModel"
 	| "onSortModelChange"
+	| "rowGroupingModel"
+	| "onRowGroupingModelChange"
+	| "aggregationModel"
+	| "onAggregationModelChange"
 	| "editRowsModel"
 	| "editMode"
 	| "onRowEditCommit"
@@ -232,31 +281,57 @@ 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",
 		persistenceModel,
 		initialState,
+		pinnedRows,
+		getRowClassName,
+		serverAggregation = dataObject.options?.dynamicLoading === true,
 		...other
 	} = props;
 	let apiRefPriv = useGridApiRef();
 	let apiRef = apiRefProp ?? apiRefPriv;
 	useAfGridApi(props, apiRef);
+	let newItemRow = useAfNewItemRow({
+		apiRef,
+		dataObject,
+		position: newItemRowPosition,
+		disableInsert,
+		pinnedRows,
+		getRowClassName,
+	});
+	let initialState_ = useAfPersistedState({
+		apiRef,
+		columns: columnsProp,
+		id,
+		layoutVersion,
+		persistenceModel,
+		initialState,
+	});
+	// Seeded from the restored layout, so a persisted grouping survives a reload.
+	let grouping = useAfRowGrouping(initialState_);
 	let loading = useLoading(dataObject);
 	let paging = useAfPagination(dataObject);
 	let sortModel = useAfSortModel({
 		dataObject,
 		columns: columnsProp,
 		disableServerSorting,
+		isGrouping: grouping.isGrouping,
 	});
 	let gridFilter = useAfFilter({ autoLoad, dataObject, id });
 	let [snackbar, setSnackbar] = useState<string | null>(null);
 	let [isFilterBuilderOpen, setFilterBuilderOpen] = useState(false);
 	let [isColumnsPanelOpen, setColumnsPanelOpen] = useState(false);
-	let editProps = useAfRowEditModel({ dataObject, disableEdit, idField, apiRef });
+	let editProps = useAfRowEditModel({ dataObject, disableEdit, idField, apiRef, newItemRow });
 	let data = useAfData(dataObject, { getData });
 	useAfCurrentIndex({
 		apiRef,
 		dataObject,
 		idField,
 		enabled: !!bindIndex,
+		newItemRowId: newItemRow.enabled ? NEW_ITEM_ROW_ID : null,
 	});
 	let columns = useAfColumns({
 		apiRef,
@@ -268,15 +343,6 @@ function AfGrid_(props: AfGridProps) {
 	});
 	let filterFields = useAfFilterFields(dataObject, columnsProp);
 
-	let initialState_ = useAfPersistedState({
-		apiRef,
-		columns: columnsProp,
-		id,
-		layoutVersion,
-		persistenceModel,
-		initialState,
-	});
-
 	let keyEvents = useAfKeyBindings({ apiRef, dataObject });
 
 	useEffect(() => {
@@ -287,6 +353,39 @@ function AfGrid_(props: AfGridProps) {
 		return () => clearTimeout(timeout);
 	}, [snackbar]);
 
+	let serverAggregates = useAfServerAggregation(
+		dataObject,
+		grouping.gridProps.aggregationModel,
+		serverAggregation && !grouping.isGrouping,
+	);
+
+	/*
+	 * The grand total row asks for `groupId === GRID_ROOT_GROUP_ID`; every other call is a group
+	 * subtotal, which only means anything over the rows the grid actually has. So the server value
+	 * is substituted for the root and the built-in function is left to do the rest.
+	 */
+	let aggregationFunctions = useMemo(() => {
+		if (!serverAggregation) return undefined;
+
+		let base = other.aggregationFunctions ?? GRID_AGGREGATION_FUNCTIONS;
+		let wrapped: Record<string, GridAggregationFunction> = {};
+
+		for (let [name, fn] of Object.entries(base) as Array<[string, GridAggregationFunction]>) {
+			wrapped[name] = {
+				...fn,
+				apply: (params, api) => {
+					if (params.groupId === GRID_ROOT_GROUP_ID && params.field in serverAggregates.values) {
+						return serverAggregates.values[params.field];
+					}
+
+					return fn.apply(params, api);
+				},
+			};
+		}
+
+		return wrapped;
+	}, [serverAggregation, other.aggregationFunctions, serverAggregates.values]);
+
 	let gridContext = useMemo<AfGridContextValue>(
 		() => ({
 			id,
@@ -302,14 +401,15 @@ function AfGrid_(props: AfGridProps) {
 	return (
 		<DataObjectProvider dataObject={dataObject}>
 			<AfGridContextProvider value={gridContext}>
-				<div className="AfGrid-root" {...keyEvents} tabIndex={-1}>
+				<div className="AfGrid-root" style={newItemRow.rootStyle} {...keyEvents} tabIndex={-1}>
 					<DataGrid
 						apiRef={apiRef}
 						rows={data}
 						columns={columns}
 						loading={loading}
-						getRowId={(row) => row[af.data.uid] ?? row[idField]}
+						getRowId={(row) => row[uid] ?? row[idField]}
 						{...editProps}
+						{...newItemRow.gridProps}
 						/*
 						 * Our own filter tree drives the data object, so MUI never
 						 * sees a filter model. The header filter cells are replaced
@@ -322,6 +422,14 @@ function AfGrid_(props: AfGridProps) {
 						{...paging}
 						showToolbar
 						{...other}
+						{...grouping.gridProps}
+						/*
+						 * Spread rather than passed, because the grid merges props over its defaults with
+						 * `Object.assign`: an explicit `undefined` here would wipe out the built-in
+						 * aggregation functions rather than fall back to them, and the grid then throws on
+						 * the first render.
+						 */
+						{...(aggregationFunctions ? { aggregationFunctions } : {})}
 						localeText={{ ...other.localeText, ...AF_GRID_LOCALE_TEXT }}
 						slots={{
 							...dsBaseSlots,

package/src/grid/localization.ts

@@ -1,4 +1,4 @@
-import type { GridLocaleText } from "@mui/x-data-grid-pro";
+import type { GridLocaleText } from "@mui/x-data-grid-premium";
 import { getLocalizedString, localize } from "@olenbetong/appframe-core";
 
 export type AfGridLocaleTextExt = GridLocaleText & {

package/src/grid/slots/index.tsx

@@ -13,7 +13,7 @@ import {
 	Textfield,
 	Tooltip,
 } from "@digdir/designsystemet-react";
-import type { GridSlotProps, GridSlotsComponent } from "@mui/x-data-grid-pro";
+import type { GridSlotProps, GridSlotsComponent } from "@mui/x-data-grid-premium";
 
 import clsx from "clsx";
 import { type Ref, useCallback } from "react";
@@ -112,12 +112,37 @@ function BaseTooltip(props: GridSlotProps["baseTooltip"]) {
 	let { children, title, enterDelay: _enterDelay, disableInteractive: _disableInteractive, ...other } = props;
 	let content = tooltipContent(title);
 
+	// Designsystemet labels the tooltip host itself, and logs `Missing
+	// tabindex="0" attribute on:` whenever that host is not tabbable. In the grid
+	// it never is — the column header is the tab stop and moves focus with the
+	// arrow keys, so MUI gives the menu button `tabindex="-1"` and hangs the sort
+	// tooltip on a bare `<span>`. The tooltips still open, because Designsystemet
+	// resolves the host with `closest()` on focus and hover, so the warning is a
+	// false positive — and it is not gated on `NODE_ENV`, so it reaches
+	// production too.
+	//
+	// Setting the label ourselves is exactly what Designsystemet does a moment
+	// later (`aria-description` when the host has text, `aria-label` when it does
+	// not), and it makes Designsystemet skip that whole branch — silencing the
+	// warning without turning off `window.dsWarnings` for the entire app.
+	let ref = useCallback(
+		(element: HTMLElement | null) => {
+			if (!element || !content) {
+				return;
+			}
+
+			let hasText = element.getAttribute("role") !== "img" && !!element.textContent?.trim();
+			element.setAttribute(hasText ? "aria-description" : "aria-label", content);
+		},
+		[content],
+	);
+
 	if (!content) {
 		return children;
 	}
 
 	return (
-		<Tooltip {...(other as any)} content={content}>
+		<Tooltip {...(other as any)} ref={ref} content={content}>
 			{children}
 		</Tooltip>
 	);

package/src/grid/theme.tsx

@@ -2,57 +2,10 @@ import { StyledEngineProvider, type Theme, ThemeProvider } from "@mui/material";
 import { createTheme as muiCreateTheme } from "@mui/material/styles";
 import { createContext, type ReactNode, use, useEffect, useState } from "react";
 
-function getColorScheme(element?: Element | null): "light" | "dark" {
-	let scoped = element?.closest<HTMLElement>("[data-color-scheme]");
-	let scheme =
-		scoped?.dataset.colorScheme ??
-		document.body?.dataset.colorScheme ??
-		document.documentElement?.dataset.colorScheme ??
-		"light";
-
-	if (scheme === "auto") {
-		return globalThis.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-	}
-
-	return scheme === "dark" ? "dark" : "light";
-}
-
-/**
- * Tracks the color scheme Designsystemet is rendering with. The article template
- * sets `data-color-scheme` on `<body>`, but it may also be scoped to a subtree,
- * so resolve it from `element` upwards when one is given. The OS preference is
- * watched too, since it decides the result when the scheme is `auto`.
- */
-export function useDsColorScheme(element?: Element | null) {
-	let [scheme, setScheme] = useState<"light" | "dark">(() => getColorScheme(element));
+import { useDsColorScheme } from "../theme/useDsColorScheme.js";
 
-	useEffect(() => {
-		function update() {
-			setScheme(getColorScheme(element));
-		}
-
-		update();
-
-		// `data-color-scheme` may sit on any ancestor, so watch the whole document
-		// for that one attribute rather than just `<html>` and `<body>`.
-		let observer = new MutationObserver(update);
-		observer.observe(document.documentElement, {
-			attributes: true,
-			attributeFilter: ["data-color-scheme"],
-			subtree: true,
-		});
-
-		let media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
-		media?.addEventListener("change", update);
-
-		return () => {
-			observer.disconnect();
-			media?.removeEventListener("change", update);
-		};
-	}, [element]);
-
-	return scheme;
-}
+// Lives in `../theme/` so MUI-free areas (the `mdi` subpath) can share it.
+export { useDsColorScheme };
 
 function buildTheme(mode: "light" | "dark", element?: Element | null) {
 	let styles = getComputedStyle(element ?? document.body);

package/src/grid/useAfColumns.tsx

@@ -1,4 +1,5 @@
 import {
+	GRID_AGGREGATION_ROOT_FOOTER_ROW_ID,
 	GRID_CHECKBOX_SELECTION_FIELD,
 	GRID_DETAIL_PANEL_TOGGLE_FIELD,
 	GRID_TREE_DATA_GROUPING_FIELD,
@@ -12,13 +13,14 @@ import {
 	type GridRowId,
 	GridRowModes,
 	type GridRowParams,
+	getAggregationFooterRowIdFromGroupId,
 	gridEditRowsStateSelector,
 	useGridApiContext,
 	useGridSelector,
-} from "@mui/x-data-grid-pro";
+} from "@mui/x-data-grid-premium";
 import { FloppydiskIcon, PencilIcon, TrashIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { getLocalizedString } from "@olenbetong/appframe-core";
-import type { DataObject } from "@olenbetong/appframe-data";
+import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { usePermissions } from "@olenbetong/appframe-react";
 
 import React, { useMemo } from "react";
@@ -27,6 +29,10 @@ import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
 import { deleteRow } from "./editing.js";
 import { operators } from "./filter.js";
 import { dateTimeValueFormatter, dateValueFormatter } from "./formatters.js";
+import { isNewItemRow } from "./useAfNewItemRow.js";
+
+/** `auto-generated-group-footer-`, without spelling it out: every group's total row shares it. */
+const AGGREGATION_FOOTER_ID_PREFIX = String(getAggregationFooterRowIdFromGroupId(""));
 
 export type AfGridColDef = GridColDef & {
 	sortColumn?: string;
@@ -43,6 +49,22 @@ export type AfGridColDef = GridColDef & {
 	calculated?: boolean;
 };
 
+/**
+ * Whether the cell belongs to a row the grid generated to hold totals rather than to a record.
+ *
+ * The row type is not enough on its own: the grand total is pinned to the bottom, so it arrives as
+ * a `pinnedRow` — the same type as the grid's own new-item row, whose `renderCell` must still run.
+ * Its id is the reliable marker, and MUI exports the constants for it.
+ */
+function isAggregationRow(params: { id: GridRowId; rowNode?: { type?: string } }) {
+	if (params.rowNode?.type === "group") return true;
+
+	return (
+		typeof params.id === "string" &&
+		(params.id === GRID_AGGREGATION_ROOT_FOOTER_ROW_ID || params.id.startsWith(AGGREGATION_FOOTER_ID_PREFIX))
+	);
+}
+
 export function getColumnVisibilityModel(columns: AfGridColumn[]): GridColumnVisibilityModel {
 	let visibility: GridColumnVisibilityModel = {};
 	for (let column of columns) {
@@ -155,6 +177,28 @@ export function afColumnsToMuiColumn({
 				col.filterOperators = (operators as any)[type];
 			}
 
+			/*
+			 * A total or group row has no record behind it — the grid generates it — so a
+			 * `renderCell` that reads its value off `params.row`, which most do, has nothing to
+			 * read. Left alone that reads as a broken feature in two ways: turning on a sum shows
+			 * a pinned row of empty cells, and every unaggregated column renders whatever its
+			 * `renderCell` makes of an empty record (a status chip saying "Open", say).
+			 *
+			 * So the aggregated value is rendered where there is one, nothing where there is not,
+			 * and `renderCell` is left to the data rows it was written for. A column that wants to
+			 * shape its total formats it with `valueFormatter`, which the grid applies to
+			 * aggregation cells too.
+			 */
+			if (col.renderCell) {
+				let renderDataCell = col.renderCell;
+				col.renderCell = (params) => {
+					if (params.aggregation) return params.formattedValue ?? params.value ?? "";
+					if (isAggregationRow(params)) return "";
+
+					return renderDataCell(params);
+				};
+			}
+
 			// The header filter cell is fully replaced by our own, which edits the
 			// shared filter tree instead of MUI's filter model.
 			if (col.filterable !== false && col.type !== "actions") {
@@ -254,7 +298,7 @@ export function useAfColumns({
 
 			const row = apiRef.current?.getRow(id);
 			if (row?.isNew) {
-				apiRef.current?.updateRows([{ [(af as any).data.uid]: id, id, _action: "delete" } as any]);
+				apiRef.current?.updateRows([{ [uid]: id, id, _action: "delete" } as any]);
 			}
 		};
 
@@ -263,48 +307,62 @@ export function useAfColumns({
 				field: "actions",
 				type: "actions",
 				headerName: getLocalizedString("Actions"),
-				getActions: ({ id }: GridRowParams) => [
-					<GridActionItem
-						key="edit"
-						icon={<PencilIcon aria-hidden />}
-						label={getLocalizedString("Edit")}
-						onClick={handleEditClick(id)}
-						mode={GridRowModes.View}
-						dataObject={dataObject}
-						rowId={id}
-						requireUpdate
-					/>,
-					<GridActionItem
-						key="delete"
-						icon={<TrashIcon aria-hidden />}
-						label={getLocalizedString("Delete")}
-						onClick={handleDeleteClick(id)}
-						mode={GridRowModes.View}
-						dataObject={dataObject}
-						rowId={id}
-						requireDelete
-					/>,
-					<GridActionItem
-						key="save"
-						icon={<FloppydiskIcon aria-hidden />}
-						label={getLocalizedString("Save")}
-						onClick={handleSaveClick(id)}
-						mode={GridRowModes.Edit}
-						dataObject={dataObject}
-						rowId={id}
-						requireUpdate
-					/>,
-					<GridActionItem
-						key="revert"
-						icon={<XMarkIcon aria-hidden />}
-						label={getLocalizedString("Cancel")}
-						onClick={handleCancelClick(id)}
-						mode={GridRowModes.Edit}
-						dataObject={dataObject}
-						rowId={id}
-						requireUpdate
-					/>,
-				],
+				getActions: ({ id }: GridRowParams) => {
+					// The new item row only exists while inserting is allowed, so its save and
+					// cancel actions do not depend on the update permission, and it has nothing
+					// to edit or delete in view mode.
+					let isNewItem = isNewItemRow(id);
+					let actions = [
+						<GridActionItem
+							key="save"
+							icon={<FloppydiskIcon aria-hidden />}
+							label={getLocalizedString("Save")}
+							onClick={handleSaveClick(id)}
+							mode={GridRowModes.Edit}
+							dataObject={dataObject}
+							rowId={id}
+							requireUpdate={!isNewItem}
+						/>,
+						<GridActionItem
+							key="revert"
+							icon={<XMarkIcon aria-hidden />}
+							label={getLocalizedString("Cancel")}
+							onClick={handleCancelClick(id)}
+							mode={GridRowModes.Edit}
+							dataObject={dataObject}
+							rowId={id}
+							requireUpdate={!isNewItem}
+						/>,
+					];
+
+					if (isNewItem) {
+						return actions;
+					}
+
+					return [
+						<GridActionItem
+							key="edit"
+							icon={<PencilIcon aria-hidden />}
+							label={getLocalizedString("Edit")}
+							onClick={handleEditClick(id)}
+							mode={GridRowModes.View}
+							dataObject={dataObject}
+							rowId={id}
+							requireUpdate
+						/>,
+						<GridActionItem
+							key="delete"
+							icon={<TrashIcon aria-hidden />}
+							label={getLocalizedString("Delete")}
+							onClick={handleDeleteClick(id)}
+							mode={GridRowModes.View}
+							dataObject={dataObject}
+							rowId={id}
+							requireDelete
+						/>,
+						...actions,
+					];
+				},
 			});
 		}
 

package/src/grid/useAfCurrentIndex.ts

@@ -1,5 +1,5 @@
-import type { GridApi, GridCellParams } from "@mui/x-data-grid-pro";
-import type { DataObject } from "@olenbetong/appframe-data";
+import type { GridApi, GridCellParams, GridRowId } from "@mui/x-data-grid-premium";
+import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { useEvent } from "@olenbetong/appframe-react";
 
 import { useEffect, useRef } from "react";
@@ -9,14 +9,19 @@ export type useAfCurrentIndexOptions = {
 	dataObject: DataObject<any>;
 	enabled: boolean;
 	idField: string;
+	/**
+	 * Id of the grid's new item row, if it has one. A current index of -1 then
+	 * focuses that row, since the framework's new record has no row in the data.
+	 */
+	newItemRowId?: GridRowId | null;
 };
 
 function getRowId(row: any, idField: string) {
 	if (!row) return row;
-	return row[af.data.uid] ?? row[idField];
+	return row[uid] ?? row[idField];
 }
 
-export function useAfCurrentIndex({ apiRef, dataObject, idField, enabled }: useAfCurrentIndexOptions) {
+export function useAfCurrentIndex({ apiRef, dataObject, idField, enabled, newItemRowId }: useAfCurrentIndexOptions) {
 	let triggeredByFocusEvent = useRef(false);
 	let focusColumn = useRef<string>(null);
 
@@ -46,7 +51,10 @@ export function useAfCurrentIndex({ apiRef, dataObject, idField, enabled }: useA
 	useEvent(dataObject, "onCurrentIndexChanged", (event) => {
 		if (enabled && triggeredByFocusEvent.current === false) {
 			if (focusColumn.current && document.activeElement?.closest(".MuiDataGrid-cell")) {
-				apiRef.current?.setCellFocus(getRowId(dataObject.getData(event.detail), idField), focusColumn.current);
+				let rowId = event.detail === -1 ? newItemRowId : getRowId(dataObject.getData(event.detail), idField);
+				if (rowId != null) {
+					apiRef.current?.setCellFocus(rowId, focusColumn.current);
+				}
 			}
 		} else {
 			triggeredByFocusEvent.current = false;

package/src/grid/useAfGridApi.ts

@@ -1,4 +1,4 @@
-import type { GridApi } from "@mui/x-data-grid-pro";
+import type { GridApi } from "@mui/x-data-grid-premium";
 import type { DataObject } from "@olenbetong/appframe-data";
 
 import type React from "react";
@@ -11,6 +11,11 @@ import { afSortOrderToMuiSortModel } from "./useAfSortModel.js";
 export interface AfGridApi extends GridApi {
 	getDataObject: () => DataObject<any> | undefined;
 	resetLayout: () => void;
+	/**
+	 * Focuses the new item row and starts editing it. Returns false when the grid
+	 * has no new item row, because it is turned off or inserting is not allowed.
+	 */
+	startNewItemRow?: () => boolean;
 }
 
 export function useAfGridApi(props: Partial<AfGridProps>, apiRef: React.RefObject<GridApi | null>) {

package/src/grid/useAfKeyBindings.ts

@@ -1,4 +1,4 @@
-import type { GridApi } from "@mui/x-data-grid-pro";
+import type { GridApi } from "@mui/x-data-grid-premium";
 import type { DataObject } from "@olenbetong/appframe-data";
 
 import type React from "react";