@olenbetong/appframe-ds 0.7.0 → 0.9.0

package/src/grid/AfGridContext.tsx

@@ -0,0 +1,51 @@
+import type { GridApi } from "@mui/x-data-grid-pro";
+import type { FieldMetadata, FilterExpression, FilterTree } from "@olenbetong/appframe-core";
+import { createContext, useContext } from "react";
+
+export type AfGridContextValue = {
+	/** The grid's `id` prop. Used to key the named filter slot. */
+	id: string;
+	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;
+	/**
+	 * 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.
+	 */
+	filter: FilterTree;
+	/** Replaces the whole filter tree. */
+	setFilter: (filter: FilterTree) => void;
+	/** The criteria a header filter owns for a field. See `getFieldExpressions`. */
+	getFieldCriteria: (field: string) => FilterExpression[];
+	/** Replaces the criteria a header filter owns for a field. */
+	setFieldCriteria: (field: string, expressions: FilterExpression[]) => void;
+	/** Number of criteria in the filter, shown on the toolbar button. */
+	filterCount: number;
+	/** Opens the column panel. */
+	openColumnsPanel: () => void;
+};
+
+const AfGridContext = createContext<AfGridContextValue | null>(null);
+
+export const AfGridContextProvider = AfGridContext.Provider;
+
+/**
+ * The grid state shared with the toolbar, the header filters and the panels.
+ * Only available inside an `AfGrid`.
+ */
+export function useAfGridContext() {
+	let context = useContext(AfGridContext);
+
+	if (!context) {
+		throw new Error("useAfGridContext must be used inside an AfGrid");
+	}
+
+	return context;
+}
+
+/** Like `useAfGridContext`, but returns null outside an `AfGrid`. */
+export function useOptionalAfGridContext() {
+	return useContext(AfGridContext);
+}

package/src/grid/AfGridError.tsx

@@ -0,0 +1,46 @@
+import { Alert, Button } from "@digdir/designsystemet-react";
+import type { GridApi } from "@mui/x-data-grid-pro";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useError } from "@olenbetong/appframe-react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+type AfGridErrorProps = {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<any>;
+};
+
+export function AfGridError({ apiRef, dataObject }: AfGridErrorProps) {
+	let rawLoadError = useError(dataObject);
+	let [errorDismissed, setErrorDismissed] = useState(false);
+	let [gridRootEl, setGridRootEl] = useState<Element | null>(null);
+	let prevRawLoadErrorRef = useRef(rawLoadError);
+
+	if (prevRawLoadErrorRef.current !== rawLoadError) {
+		prevRawLoadErrorRef.current = rawLoadError;
+		if (rawLoadError) setErrorDismissed(false);
+	}
+
+	let loadError = errorDismissed ? null : rawLoadError;
+
+	// Capture the DataGrid root element after mount so we can portal into it.
+	// This lets us use --DataGrid-topContainerHeight to position below the headers.
+	useEffect(() => {
+		setGridRootEl(apiRef.current?.rootElementRef?.current ?? null);
+	}, [apiRef]);
+
+	if (!loadError || !gridRootEl) return null;
+
+	return createPortal(
+		<div className="AfGrid-errorOverlay">
+			<Alert data-color="danger" data-size="sm" className="AfGrid-errorAlert">
+				<span>{loadError}</span>
+				<Button variant="tertiary" data-size="sm" data-color="danger" onClick={() => setErrorDismissed(true)}>
+					{getLocalizedString("Dismiss")}
+				</Button>
+			</Alert>
+		</div>,
+		gridRootEl,
+	);
+}

package/src/grid/AfHeaderFilterCell.tsx

@@ -0,0 +1,151 @@
+import { Button, Popover } from "@digdir/designsystemet-react";
+import type { GridRenderHeaderFilterProps } from "@mui/x-data-grid-pro";
+import { FunnelFillIcon, FunnelIcon, XMarkIcon } from "@navikt/aksel-icons";
+import {
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	getLocalizedString,
+} from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useState } from "react";
+
+import { InputAdornments, InputSlot } from "../input/index.js";
+import { useAfGridContext } from "./AfGridContext.js";
+import { AfHeaderFilterPanel } from "./AfHeaderFilterPanel.js";
+import { getSimpleValue, isSimpleFieldFilter, summarizeFieldFilter } from "../filter/fieldFilter.js";
+import { findFilterField } from "./useAfFilter.js";
+import type { AfGridColDef } from "./useAfColumns.js";
+
+export type AfHeaderFilterCellProps = GridRenderHeaderFilterProps & {
+	dataObject: DataObject<any>;
+};
+
+/**
+ * The contents of a header filter cell: an unlabelled input with a filter
+ * button that opens the per-field filter panel.
+ *
+ * MUI keeps ownership of the cell itself (width, pinning, borders, roles and
+ * keyboard navigation) — this only replaces what goes inside it.
+ *
+ * Note that the input deliberately does *not* drive MUI's header filter edit
+ * mode from `onFocus`/`onBlur` the way MUI's own inputs do. The cell refocuses
+ * itself in a layout effect whenever `hasFocus` or `isEditing` change, so
+ * toggling edit mode on every blur means any mousedown that leaves the input
+ * synchronously pulls focus back into it. That made it impossible to focus the
+ * filter panel, and it cancelled column drags started from a header while the
+ * input had focus (a `focus()` call during drag start aborts the drag).
+ *
+ * Nothing is lost by staying out of edit mode: MUI focuses the cell's
+ * `tabindex="0"` element — this input — whenever the cell gains focus, so
+ * typing and keyboard navigation still work.
+ *
+ * A single criterion taking one literal value is edited straight from the
+ * input. Anything else (no criteria, a list, several criteria, a parameterless
+ * operator) is shown as a read-only summary and edited in the panel.
+ */
+export function AfHeaderFilterCell({ colDef, hasFocus, inputRef, dataObject }: AfHeaderFilterCellProps) {
+	let { apiRef, filter, filterFields, getFieldCriteria, setFieldCriteria } = useAfGridContext();
+	let [isPanelOpen, setPanelOpen] = useState(false);
+
+	let fieldName = (colDef as AfGridColDef).filterColumn ?? colDef.field;
+	let field = findFilterField(filterFields, fieldName);
+
+	if (!field || colDef.filterable === false || colDef.type === "actions") {
+		return <span className="AfGrid-headerFilterEmpty" />;
+	}
+
+	let expressions = getFieldCriteria(fieldName);
+	let isSimple = isSimpleFieldFilter(expressions);
+	let hasFilter = expressions.length > 0;
+	let caption = colDef.headerName ?? colDef.field;
+
+	function apply(next: FilterExpression[]) {
+		setFieldCriteria(fieldName, next);
+	}
+
+	/**
+	 * MUI suppresses its refocus effect while its own header filter menu is
+	 * open, so the panel claims that flag for as long as it is open.
+	 */
+	function handleOpen() {
+		setPanelOpen(true);
+		apiRef.current?.showHeaderFilterMenu(colDef.field);
+	}
+
+	function handleClose() {
+		setPanelOpen(false);
+		apiRef.current?.hideHeaderFilterMenu();
+	}
+
+	function handleChange(value: string) {
+		if (!field) return;
+
+		if (value === "") {
+			apply([]);
+
+			return;
+		}
+
+		// Typing into an empty cell starts a criterion with the field's default
+		// operator, the same one the panel would offer.
+		let expression = isSimple ? (expressions[0] as FilterExpression) : createExpression(field);
+
+		apply([{ ...expression, value }]);
+	}
+
+	return (
+		<Popover.TriggerContext>
+			<InputAdornments
+				className="AfGrid-headerFilterInput"
+				data-size="sm"
+				aria-label={getLocalizedString("Filter by {0}").replace("{0}", caption)}
+				ref={inputRef as React.Ref<HTMLInputElement>}
+				tabIndex={hasFocus ? 0 : -1}
+				readOnly={hasFilter && !isSimple}
+				value={isSimple || !hasFilter ? getSimpleValue(expressions) : summarizeFieldFilter(expressions, field)}
+				onChange={(event) => handleChange(event.currentTarget.value)}
+			>
+				<InputSlot />
+				{hasFilter && (
+					<Button
+						type="button"
+						icon
+						variant="tertiary"
+						data-size="sm"
+						tabIndex={-1}
+						aria-label={getLocalizedString("Clear filter")}
+						title={getLocalizedString("Clear filter")}
+						onClick={() => apply([])}
+					>
+						<XMarkIcon aria-hidden />
+					</Button>
+				)}
+				<Popover.Trigger
+					type="button"
+					icon
+					variant="tertiary"
+					data-size="sm"
+					tabIndex={-1}
+					className="AfGrid-headerFilterButton"
+					data-active={hasFilter || undefined}
+					aria-label={getLocalizedString("Filter options")}
+					title={getLocalizedString("Filter options")}
+				>
+					{hasFilter ? <FunnelFillIcon aria-hidden /> : <FunnelIcon aria-hidden />}
+				</Popover.Trigger>
+			</InputAdornments>
+			<AfHeaderFilterPanel
+				open={isPanelOpen}
+				onOpen={handleOpen}
+				onClose={handleClose}
+				caption={caption}
+				field={field as FieldMetadata}
+				dataObject={dataObject}
+				filter={filter}
+				expressions={expressions}
+				onApply={apply}
+			/>
+		</Popover.TriggerContext>
+	);
+}

package/src/grid/AfHeaderFilterPanel.tsx

@@ -0,0 +1,111 @@
+import { Button, Popover } from "@digdir/designsystemet-react";
+import {
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterTree,
+	getLocalizedString,
+	isCompleteExpression,
+} from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useEffect, useState } from "react";
+
+import { FieldFilterPanel } from "../filter/FieldFilterPanel.js";
+
+export type AfHeaderFilterPanelProps = {
+	open: boolean;
+	/** Called when the popover trigger is activated while the panel is closed. */
+	onOpen: () => void;
+	onClose: () => void;
+	/** The column caption, used as the panel heading. */
+	caption: string;
+	field: FieldMetadata;
+	dataObject: DataObject<any>;
+	/** The whole grid filter, used to scope the distinct value list. */
+	filter: FilterTree;
+	/** The field's current top level criteria. */
+	expressions: FilterExpression[];
+	/** Called with the field's new criteria when the user applies the panel. */
+	onApply: (expressions: FilterExpression[]) => void;
+};
+
+/**
+ * A `FieldFilterPanel` in a popover, opened from a header filter cell. Must be
+ * rendered inside a `Popover.TriggerContext` together with the button that
+ * opens it.
+ *
+ * This adds the open/close lifecycle the standalone panel deliberately leaves
+ * out: edits are staged while the popover is open and only committed on apply,
+ * so dismissing it leaves the grid's filter untouched.
+ */
+export function AfHeaderFilterPanel({
+	open,
+	onOpen,
+	onClose,
+	caption,
+	field,
+	dataObject,
+	filter,
+	expressions,
+	onApply,
+}: AfHeaderFilterPanelProps) {
+	let [draft, setDraft] = useState<FilterExpression[]>(expressions);
+
+	// Opening the panel discards anything left over from the last time it was
+	// dismissed without applying, and picks up criteria edited in the header
+	// input in the meantime. An empty field gets one blank criterion so there
+	// is always something to type into.
+	useEffect(() => {
+		if (!open) return;
+
+		setDraft(expressions.length > 0 ? expressions : [createExpression(field)]);
+		// Only reset when the panel opens — reacting to `expressions` as well
+		// would throw away the user's edits on every keystroke.
+		// oxlint-disable-next-line react-hooks/exhaustive-deps -- see above
+	}, [open]);
+
+	return (
+		<Popover
+			open={open}
+			placement="bottom-start"
+			className="AfGrid-headerFilterPanel"
+			data-size="sm"
+			onOpen={onOpen}
+			onClose={onClose}
+		>
+			{/*
+			 * Mounting only while open keeps the distinct value query from running
+			 * for every column in the grid at once.
+			 */}
+			{open && (
+				<FieldFilterPanel
+					field={field}
+					dataObject={dataObject}
+					filter={filter}
+					heading={caption}
+					value={draft}
+					onChange={setDraft}
+				>
+					<div className="ObFieldFilterPanel-actions">
+						<Button type="button" variant="tertiary" data-size="sm" onClick={() => setDraft([createExpression(field)])}>
+							{getLocalizedString("Clear")}
+						</Button>
+						<Button
+							type="button"
+							data-size="sm"
+							onClick={() => {
+								// A criterion the user never finished typing would be
+								// dropped by `pruneFilter` anyway, and keeping it would
+								// make the column look filtered when it is not.
+								onApply(draft.filter(isCompleteExpression));
+								onClose();
+							}}
+						>
+							{getLocalizedString("Apply")}
+						</Button>
+					</div>
+				</FieldFilterPanel>
+			)}
+		</Popover>
+	);
+}

package/src/grid/Toolbar.tsx

@@ -0,0 +1,233 @@
+import { Button, Dropdown } from "@digdir/designsystemet-react";
+import {
+	type GridApi,
+	type GridExportMenuItemProps,
+	gridVisibleColumnDefinitionsSelector,
+	useGridApiContext,
+} from "@mui/x-data-grid-pro";
+import {
+	ArrowsCirclepathIcon,
+	Density1Icon,
+	Density2Icon,
+	Density3Icon,
+	FileCsvIcon,
+	FileExcelIcon,
+	FilterIcon,
+	MenuElipsisVerticalIcon,
+	PlusIcon,
+	TableIcon,
+} from "@navikt/aksel-icons";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
+import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
+
+import { openDataObjectReportWithProgress } from "../report-downloader/index.js";
+import { useAfGridContext } from "./AfGridContext.js";
+import { addRow } from "./editing.js";
+import type { AfGridApi } from "./useAfGridApi.js";
+
+export function GridToolbarAddButton({ onClick }: { onClick: () => void }) {
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={onClick}>
+			<PlusIcon aria-hidden />
+			{getLocalizedString("Add")}
+		</Button>
+	);
+}
+
+export function GridToolbarAddIfAllowedButton({ disableInsert }: { disableInsert?: boolean }) {
+	let dataObject = useDataObject();
+	let apiRef = useGridApiContext();
+	let permissions = usePermissions(dataObject);
+
+	return permissions.allowInsert && !disableInsert ? (
+		<GridToolbarAddButton onClick={() => addRow({ apiRef, dataObject })} />
+	) : null;
+}
+
+export function GridToolbarRefreshButton() {
+	let dataObject = useDataObject();
+	let isLoading = useLoading(dataObject);
+
+	return (
+		<Button variant="tertiary" data-size="sm" loading={isLoading} onClick={() => dataObject.refreshDataSource()}>
+			{/* Designsystemet prepends the spinner rather than replacing the children, so
+			    the icon is hidden while loading to keep the button from changing width */}
+			{!isLoading && <ArrowsCirclepathIcon aria-hidden />}
+			{getLocalizedString("Refresh")}
+		</Button>
+	);
+}
+
+export function GridToolbarColumnsButton() {
+	let { openColumnsPanel } = useAfGridContext();
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={openColumnsPanel}>
+			<TableIcon aria-hidden />
+			{getLocalizedString("Columns")}
+		</Button>
+	);
+}
+
+/**
+ * Opens the filter builder instead of the grid's own filter panel. The count
+ * reflects the conditions in the builder's filter, not the header filters.
+ */
+export function GridToolbarFilterButton() {
+	let { openFilterBuilder, filterCount } = useAfGridContext();
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
+			<FilterIcon aria-hidden />
+			{getLocalizedString("Filter")}
+			{filterCount > 0 ? ` (${filterCount})` : ""}
+		</Button>
+	);
+}
+
+export function GridToolbarResetLayoutButton() {
+	let apiRef = useGridApiContext();
+
+	function handleReset() {
+		(apiRef.current as AfGridApi).resetLayout?.();
+	}
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={handleReset}>
+			<ArrowsCirclepathIcon aria-hidden />
+			{getLocalizedString("Reset layout")}
+		</Button>
+	);
+}
+
+function handleExportToExcel(
+	apiRef: React.RefObject<GridApi>,
+	dataObject: DataObject<any>,
+	fileName?: string,
+	title?: string,
+) {
+	let visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+	openDataObjectReportWithProgress({
+		dataObject: dataObject.getDataSourceId(),
+		exportUrl: dataObject.getExportURL("xlsx"),
+		fileName: fileName ?? dataObject.getDataSourceId(),
+		format: "xlsx",
+		options: exportOptionsFromDataObject(dataObject, {
+			columns: visibleColumns
+				.filter((c) => !!dataObject.getFieldDefinition(c.field))
+				.map((column) => ({
+					name: column.field,
+					caption: column.headerName ?? column.field,
+				})),
+			maxRecords: -1,
+		}),
+		title,
+	});
+}
+
+export type AfExcelExportOptions = { fileName?: string; title?: string };
+export type AfGridExcelExportOptions = GridExportMenuItemProps<AfExcelExportOptions>;
+
+export function AfGridExcelExportMenuItem({ options = {}, hideMenu }: AfGridExcelExportOptions) {
+	let apiRef = useGridApiContext();
+	let dataObject = useDataObject();
+
+	return (
+		<Dropdown.Item>
+			<Dropdown.Button
+				onClick={() => {
+					handleExportToExcel(apiRef, dataObject, options.fileName, options.title);
+					hideMenu?.();
+				}}
+			>
+				<FileExcelIcon aria-hidden />
+				{getLocalizedString("Download as Excel")}
+			</Dropdown.Button>
+		</Dropdown.Item>
+	);
+}
+
+export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?: string; title?: string }) {
+	let apiRef = useGridApiContext();
+	let dataObject = useDataObject();
+
+	return (
+		<Button variant="tertiary" data-size="sm" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
+			<FileExcelIcon aria-hidden />
+			{getLocalizedString("Export")}
+		</Button>
+	);
+}
+
+export function GridToolbarMoreOptionsButton() {
+	let apiRef = useGridApiContext();
+
+	return (
+		<Dropdown.TriggerContext>
+			<Dropdown.Trigger variant="tertiary" icon data-size="sm" aria-label={getLocalizedString("More options")}>
+				<MenuElipsisVerticalIcon aria-hidden />
+			</Dropdown.Trigger>
+			<Dropdown placement="bottom-end" data-size="sm">
+				<Dropdown.List>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.exportDataAsCsv()}>
+							<FileCsvIcon aria-hidden />
+							{getLocalizedString("Export as CSV")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<AfGridExcelExportMenuItem />
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.setDensity("compact")}>
+							<Density1Icon aria-hidden />
+							{getLocalizedString("Compact")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.setDensity("standard")}>
+							<Density2Icon aria-hidden />
+							{getLocalizedString("Standard")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => apiRef.current.setDensity("comfortable")}>
+							<Density3Icon aria-hidden />
+							{getLocalizedString("Comfortable")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+					<Dropdown.Item>
+						<Dropdown.Button onClick={() => (apiRef.current as AfGridApi).resetLayout?.()}>
+							<ArrowsCirclepathIcon aria-hidden />
+							{getLocalizedString("Reset layout")}
+						</Dropdown.Button>
+					</Dropdown.Item>
+				</Dropdown.List>
+			</Dropdown>
+		</Dropdown.TriggerContext>
+	);
+}
+
+export function AfGridToolbar({ children, disableInsert }: React.PropsWithChildren<{ disableInsert?: boolean }>) {
+	return (
+		<GridToolbarContainer>
+			<GridToolbarAddIfAllowedButton disableInsert={disableInsert} />
+			<GridToolbarColumnsButton />
+			<GridToolbarFilterButton />
+			<GridToolbarRefreshButton />
+			<GridToolbarMoreOptionsButton />
+			{children}
+		</GridToolbarContainer>
+	);
+}
+
+/**
+ * The toolbar surface itself, for grids that compose their own set of buttons.
+ * Replaces MUI's `DataGrid.Toolbar`.
+ */
+export function GridToolbarContainer({ children, className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div {...props} className={className ? `AfGrid-toolbar ${className}` : "AfGrid-toolbar"}>
+			{children}
+		</div>
+	);
+}

package/src/grid/editing.ts

@@ -0,0 +1,90 @@
+import { type GridApi, gridFocusCellSelector, gridVisibleColumnDefinitionsSelector } from "@mui/x-data-grid-pro";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+
+import type React from "react";
+
+export function addRow<T extends { PrimKey: string }>({
+	apiRef,
+	dataObject,
+}: {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<T>;
+}) {
+	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]);
+	apiRef.current?.startRowEditMode({ id });
+
+	// Wait for the grid to render with the new row
+	setTimeout(() => {
+		apiRef.current?.scrollToIndexes({
+			rowIndex: apiRef.current?.getRowsCount() - 1,
+		});
+
+		let visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+		let firstEditable = visibleColumns.find((c) => c.editable === true);
+
+		if (firstEditable) {
+			apiRef.current?.setCellFocus(id, firstEditable.field);
+		}
+	});
+}
+
+export async function deleteRow<T extends { PrimKey: string }>({
+	apiRef,
+	dataObject,
+	id,
+	idField,
+}: {
+	apiRef: React.RefObject<GridApi | null>;
+	dataObject: DataObject<T>;
+	id: string | number;
+	idField: string;
+}) {
+	try {
+		if (!window.confirm(getLocalizedString("Are you sure you want to delete the selected row?"))) {
+			return;
+		}
+
+		let focusBefore = gridFocusCellSelector(apiRef);
+		let index = dataObject.findIndex((r) => (r as any)[idField] === id || (r as any)[(af as any).data.uid] === id);
+
+		if (index < 0) {
+			alert(getLocalizedString("Row not found"));
+			return;
+		}
+
+		await dataObject.deleteRow(index);
+
+		let focusAfter = gridFocusCellSelector(apiRef);
+
+		// Need to run this operation to prevent MUI errors
+		apiRef.current?.updateRows([{ [af.data.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 newField = focusBefore?.field ?? gridVisibleColumnDefinitionsSelector(apiRef)[0]?.field;
+
+				if (newId && newField) {
+					apiRef.current?.setCellFocus(newId, newField);
+				}
+			}
+		}
+	} catch (error) {
+		alert((error as Error).message ?? error);
+	}
+}
+
+export function cancelEdit<T extends { PrimKey: string }>({
+	apiRef,
+	id,
+}: {
+	apiRef: React.RefObject<GridApi>;
+	dataObject: DataObject<T>;
+	id: string | number;
+}) {
+	apiRef.current.stopRowEditMode({ id, ignoreModifications: true });
+}