@olenbetong/appframe-ds 1.4.1 → 1.6.0

package/src/AfLookup/LookupGrid.tsx

@@ -1,14 +1,22 @@
 import "./LookupGrid.css";
 
+import { ArrowDownIcon, ArrowUpIcon } from "@navikt/aksel-icons";
 import type { LookupColumn } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { List, type RowComponentProps, useListRef } from "react-window";
 import { getLocalizedString } from "../i18n.js";
 
 const ROW_HEIGHT = 40;
 const HEADER_HEIGHT = 40;
+/** Narrowest a column can be made, and what a flexible column counts for in the minimum width */
+const MIN_COLUMN_WIDTH = 80;
+
+export type LookupGridSort = {
+	field: string;
+	direction: "asc" | "desc";
+};
 
 export interface LookupGridProps<T extends Record<string, unknown>> {
 	columns: LookupColumn<T>[];
@@ -19,18 +27,49 @@ export interface LookupGridProps<T extends Record<string, unknown>> {
 	getItemId: (item: T | undefined) => string | undefined;
 	isItemSelected?: (item: T) => boolean;
 	onSelectItem: (item: T) => void;
+	/**
+	 * The column the rows are sorted by, shown with an arrow in its header
+	 */
+	sort?: LookupGridSort;
+	/**
+	 * Called with the field of a header the user clicked. When left out the headers are plain text.
+	 */
+	onSort?: (field: string) => void;
 }
 
-function getColumnWidth<T extends Record<string, unknown>>(column: LookupColumn<T>) {
+/** The track for one column in `grid-template-columns`; a width the user dragged wins over the configured one */
+function getColumnTrack<T extends Record<string, unknown>>(column: LookupColumn<T>, resizedWidth: number | undefined) {
+	if (resizedWidth !== undefined) {
+		return `${resizedWidth}px`;
+	}
 	if (typeof column.width === "number") {
 		return `${column.width}px`;
 	}
 
-	return column.width ?? "minmax(80px, 1fr)";
+	return column.width ?? `minmax(${MIN_COLUMN_WIDTH}px, 1fr)`;
+}
+
+/** What a column contributes to the narrowest width the grid can be laid out in */
+function getColumnMinWidth<T extends Record<string, unknown>>(
+	column: LookupColumn<T>,
+	resizedWidth: number | undefined,
+) {
+	if (resizedWidth !== undefined) {
+		return resizedWidth;
+	}
+	if (typeof column.width === "number") {
+		return column.width;
+	}
+	if (typeof column.width === "string" && /^\d+(\.\d+)?px$/.test(column.width)) {
+		return Number.parseFloat(column.width);
+	}
+
+	return MIN_COLUMN_WIDTH;
 }
 
-type LookupGridRowProps<T extends Record<string, unknown>> = Omit<LookupGridProps<T>, "height"> & {
+type LookupGridRowProps<T extends Record<string, unknown>> = Omit<LookupGridProps<T>, "height" | "sort" | "onSort"> & {
 	gridTemplateColumns: string;
+	minWidth: number;
 };
 
 function LookupGridRow<T extends Record<string, unknown>>({
@@ -41,6 +80,7 @@ function LookupGridRow<T extends Record<string, unknown>>({
 	currentIndex,
 	currentColumn,
 	gridTemplateColumns,
+	minWidth,
 	getItemId,
 	isItemSelected,
 	onSelectItem,
@@ -54,7 +94,7 @@ function LookupGridRow<T extends Record<string, unknown>>({
 			role="row"
 			aria-selected={active}
 			className={clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected")}
-			style={{ ...style, gridTemplateColumns }}
+			style={{ ...style, gridTemplateColumns, minWidth }}
 			onClick={() => onSelectItem(item)}
 			id={itemId}
 		>
@@ -65,13 +105,77 @@ function LookupGridRow<T extends Record<string, unknown>>({
 					key={column.field}
 					title={String(item[column.field] ?? "")}
 				>
-					{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
+					{/* The cell is a flex container, so the ellipsis has to be on an element inside it */}
+					<span className="ObLookupGrid-cellText">
+						{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
+					</span>
 				</div>
 			))}
 		</div>
 	);
 }
 
+type ColumnResizerProps = {
+	onResize: (delta: number) => void;
+	/** Called with the handle, whose parent is the header cell being resized */
+	onResizeStart: (handle: HTMLElement) => void;
+	onResizeEnd: () => void;
+	onReset: () => void;
+};
+
+/**
+ * The drag handle at the end of a header cell. Pointer capture keeps the drag alive when the
+ * pointer leaves the handle; a double click puts the column back to its configured width.
+ */
+function ColumnResizer({ onResize, onResizeStart, onResizeEnd, onReset }: ColumnResizerProps) {
+	let startX = useRef(0);
+
+	return (
+		// oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- a drag handle; the grid is keyboard navigable by cell
+		<div
+			role="separator"
+			aria-orientation="vertical"
+			aria-label={getLocalizedString("Resize column")}
+			className="ObLookupGrid-resizer"
+			onClick={(event) => event.stopPropagation()}
+			onDoubleClick={(event) => {
+				event.stopPropagation();
+				onReset();
+			}}
+			onPointerDown={(event) => {
+				if (event.button !== 0) return;
+				event.preventDefault();
+				event.stopPropagation();
+				event.currentTarget.setPointerCapture(event.pointerId);
+				startX.current = event.clientX;
+				onResizeStart(event.currentTarget);
+			}}
+			onPointerMove={(event) => {
+				if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+				onResize(event.clientX - startX.current);
+			}}
+			onPointerUp={(event) => {
+				if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+				event.currentTarget.releasePointerCapture(event.pointerId);
+				onResizeEnd();
+			}}
+			onPointerCancel={onResizeEnd}
+		/>
+	);
+}
+
+/**
+ * The grid variant of the lookup popup: a header row and a virtualised list of rows, laid out
+ * with the same `grid-template-columns`.
+ *
+ * Only the list scrolls. It scrolls both ways when the columns are wider than the popup, and
+ * the header follows it sideways with a transform, so the header never needs a scrollbar of
+ * its own. The list reserves its vertical scrollbar gutter, and the header row is given the
+ * list's inner width, so flexible (`1fr`) columns line up between the two.
+ *
+ * Columns can be resized by dragging the handle at the end of a header cell. The widths live
+ * in the grid, so they last for as long as the popup is open.
+ */
 export function LookupGrid<T extends Record<string, unknown>>({
 	columns,
 	data,
@@ -81,9 +185,23 @@ export function LookupGrid<T extends Record<string, unknown>>({
 	getItemId,
 	isItemSelected,
 	onSelectItem,
+	sort,
+	onSort,
 }: LookupGridProps<T>) {
 	let listRef = useListRef(null);
-	let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
+	let headerRowRef = useRef<HTMLDivElement>(null);
+	let [resizedWidths, setResizedWidths] = useState<Partial<Record<string, number>>>({});
+	let [resizing, setResizing] = useState<{ field: string; startWidth: number } | null>(null);
+	let [listInnerWidth, setListInnerWidth] = useState<number>();
+
+	let gridTemplateColumns = useMemo(
+		() => columns.map((column) => getColumnTrack(column, resizedWidths[column.field])).join(" "),
+		[columns, resizedWidths],
+	);
+	let minWidth = useMemo(
+		() => columns.reduce((sum, column) => sum + getColumnMinWidth(column, resizedWidths[column.field]), 0),
+		[columns, resizedWidths],
+	);
 
 	useEffect(() => {
 		if (currentIndex >= 0 && currentIndex < data.length) {
@@ -91,22 +209,103 @@ export function LookupGrid<T extends Record<string, unknown>>({
 		}
 	}, [currentIndex, data.length, listRef]);
 
+	// The header row is as wide as the list's inner (client) width, so 1fr columns match the rows
+	useEffect(() => {
+		let element = listRef.current?.element;
+		if (!element) return;
+
+		let measure = () => setListInnerWidth(element.clientWidth);
+		measure();
+
+		let observer = new ResizeObserver(measure);
+		observer.observe(element);
+
+		return () => observer.disconnect();
+	}, [listRef, height]);
+
+	let handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+		if (headerRowRef.current) {
+			headerRowRef.current.style.transform = `translateX(${-event.currentTarget.scrollLeft}px)`;
+		}
+	}, []);
+
+	function startResize(field: string, cell: HTMLElement) {
+		setResizing({ field, startWidth: cell.getBoundingClientRect().width });
+	}
+
+	function resizeBy(delta: number) {
+		if (!resizing) return;
+		let { field, startWidth } = resizing;
+		let width = Math.max(MIN_COLUMN_WIDTH, Math.round(startWidth + delta));
+		setResizedWidths((widths) => (widths[field] === width ? widths : { ...widths, [field]: width }));
+	}
+
+	function resetWidth(field: string) {
+		setResizedWidths(({ [field]: _removed, ...rest }) => rest);
+	}
+
 	return (
-		<div role="grid" aria-label={getLocalizedString("Search results")} className="ObLookupGrid-root">
-			<div role="row" className="ObLookupGrid-header" style={{ gridTemplateColumns }}>
-				{columns.map((column) => (
-					<div role="columnheader" className="ObLookupGrid-headerCell" key={column.field}>
-						{column.headerName ?? column.field}
-					</div>
-				))}
+		<div
+			role="grid"
+			aria-label={getLocalizedString("Search results")}
+			className="ObLookupGrid-root"
+			data-resizing={resizing ? "" : undefined}
+		>
+			<div className="ObLookupGrid-header">
+				<div
+					role="row"
+					ref={headerRowRef}
+					className="ObLookupGrid-headerRow"
+					style={{ gridTemplateColumns, minWidth, width: listInnerWidth }}
+				>
+					{columns.map((column) => {
+						let sortable = !!onSort && column.sortable !== false;
+						let sorted = sort?.field === column.field ? sort.direction : undefined;
+						let label = column.headerName ?? column.field;
+						let SortIcon = sorted === "desc" ? ArrowDownIcon : ArrowUpIcon;
+
+						return (
+							<div
+								role="columnheader"
+								className="ObLookupGrid-headerCell"
+								key={column.field}
+								aria-sort={sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined}
+							>
+								{sortable ? (
+									<button
+										type="button"
+										className={clsx("ObLookupGrid-sortButton", sorted && "sorted")}
+										// Keeps the focus in the search field, so typing carries on after a click
+										onMouseDown={(event) => event.preventDefault()}
+										onClick={() => onSort?.(column.field)}
+										tabIndex={-1}
+									>
+										<span className="ObLookupGrid-headerText">{label}</span>
+										<SortIcon className="ObLookupGrid-sortIcon" aria-hidden />
+									</button>
+								) : (
+									<span className="ObLookupGrid-headerText">{label}</span>
+								)}
+								<ColumnResizer
+									onResizeStart={(handle) => startResize(column.field, handle.parentElement as HTMLElement)}
+									onResize={resizeBy}
+									onResizeEnd={() => setResizing(null)}
+									onReset={() => resetWidth(column.field)}
+								/>
+							</div>
+						);
+					})}
+				</div>
 			</div>
 			<List<LookupGridRowProps<T>>
 				role="rowgroup"
 				listRef={listRef}
+				className="ObLookupGrid-list"
 				style={{ height: Math.max(0, height - HEADER_HEIGHT) }}
 				rowCount={data.length}
 				rowHeight={ROW_HEIGHT}
 				overscanCount={5}
+				onScroll={handleScroll}
 				rowComponent={LookupGridRow}
 				rowProps={{
 					columns,
@@ -114,6 +313,7 @@ export function LookupGrid<T extends Record<string, unknown>>({
 					currentIndex,
 					currentColumn,
 					gridTemplateColumns,
+					minWidth,
 					getItemId,
 					isItemSelected,
 					onSelectItem,

package/src/autocomplete/Autocomplete.css

@@ -27,12 +27,9 @@
  * Font size is deliberately never set: `ds-input` inherits its font size when a
  * `data-size` attribute is present, so referencing `--ds-font-size-*` here — which
  * `data-size` rescales — would render the text smaller than a `Textfield` or
- * `Select` of the same size. Only the padding varies per size.
+ * `Select` of the same size. Only the padding varies per size, and only for the
+ * sizes Designsystemet components come in (sm, md, lg; xs and xl are typography-only).
  */
-.ObAutocomplete-root[data-size="xs"] {
-	--obAutocomplete-padding: 0.125rem;
-}
-
 .ObAutocomplete-root[data-size="sm"] {
 	--obAutocomplete-padding: 0.25rem;
 }

package/src/binding/BoundNumberInput.tsx

@@ -0,0 +1,42 @@
+import { useField } from "@olenbetong/appframe-react";
+
+import { NumberInput, type NumberInputProps } from "../input/NumberInput.js";
+
+export type BoundNumberInputProps = Omit<NumberInputProps, "value" | "onChange" | "onKeyDown"> & {
+	/**
+	 * Name of the number field in the data object from context
+	 */
+	field: string;
+	/**
+	 * Called with the new value before it is written to the data object
+	 */
+	onChange?: (value: number | null) => void;
+};
+
+/**
+ * A `NumberInput` bound to a number field of the data object from `DataObjectProvider`
+ * via `useField`. Escape resets the field, and a conversion error from the data object is
+ * shown below the input unless an `error` is passed.
+ *
+ * @example
+ * ```jsx
+ * <BoundNumberInput field="TotHrs" label="Total hours" step={0.25} min={0} max={24} />
+ * ```
+ */
+export function BoundNumberInput({ field, onChange: onChangeProp, error: errorProp, ...props }: BoundNumberInputProps) {
+	let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+	return (
+		<NumberInput
+			name={field}
+			{...props}
+			error={errorProp ?? error ?? undefined}
+			value={typeof value === "number" ? value : null}
+			onChange={(next) => {
+				onChangeProp?.(next);
+				onChange({ target: { value: next } });
+			}}
+			onKeyDown={(event) => onKeyDown(event)}
+		/>
+	);
+}

package/src/binding/index.ts

@@ -2,6 +2,7 @@ export * from "./BoundCheckbox.js";
 export * from "./BoundDatePicker.js";
 export * from "./BoundDateTimePicker.js";
 export * from "./BoundInput.js";
+export * from "./BoundNumberInput.js";
 export * from "./BoundNumericTextField.js";
 export * from "./BoundSelect.js";
 export * from "./BoundSwitch.js";

package/src/grid/index.tsx

@@ -10,6 +10,7 @@ import {
 	type GridApi,
 	type GridFilterModel,
 	type GridGroupNode,
+	type GridRowParams,
 	useGridApiRef,
 } from "@mui/x-data-grid-premium";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
@@ -41,7 +42,7 @@ import {
 	GridToolbarResetLayoutButton,
 } from "./Toolbar.js";
 import type { AfGridColumn } from "./useAfColumns.js";
-import { type AfGridColDef, useAfColumns } from "./useAfColumns.js";
+import { type AfGridColDef, type AfGridRowAction, useAfColumns } from "./useAfColumns.js";
 import { useAfCurrentIndex } from "./useAfCurrentIndex.js";
 import { useAfData } from "./useAfData.js";
 import { useAfFilterFields } from "./useAfFilterFields.js";
@@ -56,6 +57,7 @@ import {
 	settingsLoaded,
 	useAfPersistedState,
 } from "./useAfPersistedState.js";
+import { useAfKeepFocusAfterEdit } from "./useAfKeepFocusAfterEdit.js";
 import { useAfRowEditModel } from "./useAfRowEditModel.js";
 import { useAfRowGrouping } from "./useAfRowGrouping.js";
 import { useAfServerAggregation } from "./useAfServerAggregation.js";
@@ -103,6 +105,7 @@ export type {
 	AfGridColumn,
 	AfGridExcelExportOptions,
 	AfGridNewItemRowPosition,
+	AfGridRowAction,
 };
 export type { AfGridGrouping, AfGridGroupingProps } from "./useAfRowGrouping.js";
 
@@ -156,6 +159,14 @@ export type AfGridProps = {
 	bindIndex?: boolean;
 	columns: AfGridColumn[];
 	dataObject: DataObject<any>;
+	/**
+	 * Extra buttons for each row in the grid's own actions column, after edit and delete. They
+	 * show while the row is not being edited, and the column is added for them even when the data
+	 * object allows neither updates nor deletes. An actions column of your own replaces that
+	 * column, built-in actions included, and loses their keyboard navigation; use this instead.
+	 * Keep the function stable (`useCallback`): a new one rebuilds the columns.
+	 */
+	getRowActions?: (params: GridRowParams) => AfGridRowAction[];
 	/**
 	 * The layout version of the grid. Persisted grid state will only be restored
 	 * if the version matches.
@@ -282,6 +293,7 @@ function AfGrid_(props: AfGridProps) {
 		apiRef: apiRefProp,
 		bindIndex,
 		columns: columnsProp,
+		getRowActions,
 		disableServerSorting,
 		disableInsert,
 		disableDelete,
@@ -336,6 +348,7 @@ function AfGrid_(props: AfGridProps) {
 	let [isFilterBuilderOpen, setFilterBuilderOpen] = useState(false);
 	let [isColumnsPanelOpen, setColumnsPanelOpen] = useState(false);
 	let editProps = useAfRowEditModel({ dataObject, disableEdit, idField, apiRef, newItemRow });
+	useAfKeepFocusAfterEdit(apiRef);
 	let data = useAfData(dataObject, { getData });
 	useAfCurrentIndex({
 		apiRef,
@@ -351,6 +364,7 @@ function AfGrid_(props: AfGridProps) {
 		disableDelete,
 		columnsProp,
 		idField,
+		getRowActions,
 	});
 	let filterFields = useAfFilterFields(dataObject, columnsProp);
 

package/src/grid/slots/index.tsx

@@ -100,8 +100,15 @@ function BaseButton(props: GridSlotProps["baseButton"]) {
 function BaseIconButton(props: GridSlotProps["baseIconButton"]) {
 	let { children, size, label, color: _color, edge: _edge, touchRippleRef: _touchRippleRef, ...other } = props;
 
+	// `GridActionsCellItem` names its button through `aria-label`, not `label`; keep it
 	return (
-		<Button {...(other as any)} icon variant="tertiary" data-size={dsSize(size)} aria-label={label}>
+		<Button
+			{...(other as any)}
+			icon
+			variant="tertiary"
+			data-size={dsSize(size)}
+			aria-label={label ?? (other as any)["aria-label"]}
+		>
 			{children}
 		</Button>
 	);

package/src/grid/slots/slots.test.tsx

@@ -4,6 +4,21 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { dsBaseSlots } from "./index.js";
 
 const BaseSkeleton = dsBaseSlots.baseSkeleton as React.ComponentType<Record<string, unknown>>;
+const BaseIconButton = dsBaseSlots.baseIconButton as React.ComponentType<Record<string, unknown>>;
+
+describe("baseIconButton", () => {
+	it("keeps the aria-label GridActionsCellItem names its button with", () => {
+		let { getByRole } = render(<BaseIconButton aria-label="Edit">x</BaseIconButton>);
+
+		expect(getByRole("button")).toHaveAttribute("aria-label", "Edit");
+	});
+
+	it("prefers the label prop", () => {
+		let { getByRole } = render(<BaseIconButton label="Save">x</BaseIconButton>);
+
+		expect(getByRole("button")).toHaveAttribute("aria-label", "Save");
+	});
+});
 
 describe("baseSkeleton", () => {
 	afterEach(() => {

package/src/grid/useAfColumns.tsx

@@ -15,6 +15,7 @@ import {
 	type GridRowParams,
 	getAggregationFooterRowIdFromGroupId,
 	gridEditRowsStateSelector,
+	gridVisibleColumnDefinitionsSelector,
 	useGridApiContext,
 	useGridSelector,
 } from "@mui/x-data-grid-premium";
@@ -244,6 +245,21 @@ const GridActionItem = React.forwardRef<
 });
 
 export type AfGridColumn = string | AfGridColDef;
+
+/**
+ * An extra button in the grid's actions column, next to edit and delete. Shown only while the row
+ * is not being edited, and reached with the arrow keys like the built-in actions.
+ */
+export type AfGridRowAction = {
+	key: string;
+	icon: React.ReactElement;
+	/** The button's accessible name and tooltip, and its text in the overflow menu. */
+	label: string;
+	onClick: () => void;
+	disabled?: boolean;
+	/** Puts the action in the column's overflow menu instead of showing it as a button. */
+	showInMenu?: boolean;
+};
 const muiColumnTypes = ["string", "number", "date", "dateTime", "boolean", "singleSelect", "actions"];
 
 export type useAfColumnsOptions = {
@@ -253,6 +269,7 @@ export type useAfColumnsOptions = {
 	dataObject: DataObject<any>;
 	columnsProp: AfGridColumn[];
 	idField: string;
+	getRowActions?: (params: GridRowParams) => AfGridRowAction[];
 };
 
 export function useAfColumns({
@@ -262,6 +279,7 @@ export function useAfColumns({
 	disableDelete,
 	columnsProp,
 	idField,
+	getRowActions,
 }: useAfColumnsOptions): GridColDef[] {
 	let { allowUpdate, allowDelete } = usePermissions(dataObject);
 
@@ -277,13 +295,26 @@ export function useAfColumns({
 			idField,
 		});
 
+		// The edit, save and cancel buttons disappear as the row changes mode, taking the focus with
+		// them. Editing starts in the first editable column, and leaving edit mode puts the grid's
+		// focus on the row's actions cell, which `useAfKeepFocusAfterEdit` then restores.
 		const handleEditClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
 			event.stopPropagation();
-			apiRef.current?.startRowEditMode({ id });
+			let api = apiRef.current;
+			if (!api) return;
+
+			let fieldToFocus = gridVisibleColumnDefinitionsSelector(apiRef).find(
+				(column) => column.editable && column.type !== "actions",
+			)?.field;
+			if (fieldToFocus) {
+				api.setCellFocus(id, fieldToFocus);
+			}
+			api.startRowEditMode({ id, fieldToFocus });
 		};
 
 		const handleSaveClick = (id: GridRowId) => async (event: React.MouseEvent<any>) => {
 			event.stopPropagation();
+			apiRef.current?.setCellFocus(id, "actions");
 			apiRef.current?.stopRowEditMode({ id });
 		};
 
@@ -294,6 +325,7 @@ export function useAfColumns({
 
 		const handleCancelClick = (id: GridRowId) => (event: React.MouseEvent<any>) => {
 			event.stopPropagation();
+			apiRef.current?.setCellFocus(id, "actions");
 			apiRef.current?.stopRowEditMode({ id, ignoreModifications: true });
 
 			const row = apiRef.current?.getRow(id);
@@ -302,12 +334,13 @@ export function useAfColumns({
 			}
 		};
 
-		if (!columns.find((c) => c.type === "actions") && (allowDelete || allowUpdate)) {
+		if (!columns.find((c) => c.type === "actions") && (allowDelete || allowUpdate || getRowActions)) {
 			columns.push({
 				field: "actions",
 				type: "actions",
 				headerName: getLocalizedString("Actions"),
-				getActions: ({ id }: GridRowParams) => {
+				getActions: (params: GridRowParams) => {
+					let { id } = params;
 					// 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.
@@ -339,6 +372,33 @@ export function useAfColumns({
 						return actions;
 					}
 
+					let rowActions = (getRowActions?.(params) ?? []).map(({ key, icon, label, onClick, disabled, showInMenu }) =>
+						showInMenu ? (
+							<GridActionItem
+								key={key}
+								icon={icon}
+								label={label}
+								onClick={onClick}
+								disabled={disabled}
+								showInMenu
+								mode={GridRowModes.View}
+								dataObject={dataObject}
+								rowId={id}
+							/>
+						) : (
+							<GridActionItem
+								key={key}
+								icon={icon}
+								label={label}
+								onClick={onClick}
+								disabled={disabled}
+								mode={GridRowModes.View}
+								dataObject={dataObject}
+								rowId={id}
+							/>
+						),
+					);
+
 					return [
 						<GridActionItem
 							key="edit"
@@ -360,6 +420,7 @@ export function useAfColumns({
 							rowId={id}
 							requireDelete
 						/>,
+						...rowActions,
 						...actions,
 					];
 				},
@@ -367,5 +428,5 @@ export function useAfColumns({
 		}
 
 		return columns;
-	}, [columnsProp, disableDelete, disableEdit, allowUpdate, allowDelete, idField, dataObject, apiRef]);
+	}, [columnsProp, disableDelete, disableEdit, allowUpdate, allowDelete, idField, dataObject, apiRef, getRowActions]);
 }