@olenbetong/appframe-ds 1.10.0 → 1.11.0

package/CHANGELOG.md

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -64,15 +64,15 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.16.0",
-    "@olenbetong/appframe-data": "^1.9.0",
+    "@olenbetong/appframe-data": "^1.10.0",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
-    "dockview-react": "8.6.1",
+    "dockview-react": "8.8.3",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "react-window": "2.5.0",
+    "react-window": "2.5.3",
     "temporal-polyfill": "1.0.6"
   },
   "devDependencies": {
@@ -82,7 +82,7 @@
     "@mui/material": "9.5.0",
     "@mui/x-data-grid-premium": "8.29.5",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.20.0",
+    "@navikt/aksel-icons": "8.21.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
@@ -91,7 +91,7 @@
     "@types/react-dom": "19.3.0",
     "happy-dom": "21.0.4",
     "react-error-boundary": "6.1.6",
-    "react-router": "8.5.0",
+    "react-router": "8.5.1",
     "typescript": "7.0.2",
     "vitest": "5.0.5"
   },

package/src/filter/FilterBuilder.test.tsx

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

package/src/filter/FilterBuilder.tsx

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

package/src/filter/FilterGroupEditor.tsx

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

package/src/filter/FilterRow.tsx

@@ -6,6 +6,7 @@ import {
 	type FieldMetadata,
 	type FilterExpression,
 	type FilterOperator,
+	type FilterPath,
 	getOperatorLabel,
 	getOperatorsForField,
 	isRangeEnd,
@@ -34,6 +35,8 @@ export type FilterRowProps = {
 	fields: FieldMetadata[];
 	onChange: (expression: FilterExpression) => void;
 	onRemove: () => void;
+	/** Where the expression sits in the tree, written to `data-path` so a row can be found to focus it. */
+	path?: FilterPath;
 	getFieldOptions?: GetFieldOptions;
 	readOnly?: boolean;
 	"data-size"?: FilterEditorSize;
@@ -45,6 +48,7 @@ export function FilterRow({
 	fields,
 	onChange,
 	onRemove,
+	path,
 	getFieldOptions,
 	readOnly,
 	"data-size": size,
@@ -76,7 +80,7 @@ export function FilterRow({
 	}
 
 	return (
-		<div className="ObFilterEditor-row">
+		<div className="ObFilterEditor-row" data-path={path?.join(".")}>
 			<Combobox
 				className="ObFilterEditor-field"
 				data-size={size}

package/src/grid/AfColumnMenuColumnsItem.tsx

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

package/src/grid/AfColumnMenuFilterItem.tsx

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

package/src/grid/AfGridContext.tsx

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

package/src/grid/Toolbar.tsx

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

package/src/grid/index.tsx

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

package/src/grid/useAfNewItemRow.ts

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