@olenbetong/appframe-ds 1.0.3 → 1.2.0

package/src/grid/AfHeaderFilterCell.tsx

@@ -1,151 +1,147 @@
-import { Button, Popover } from "@digdir/designsystemet-react";
-import type { GridRenderHeaderFilterProps } from "@mui/x-data-grid-premium";
-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>
-	);
-}
+import { Button, Popover } from "@digdir/designsystemet-react";
+import type { GridRenderHeaderFilterProps } from "@mui/x-data-grid-premium";
+import { FunnelFillIcon, FunnelIcon, XMarkIcon } from "@navikt/aksel-icons";
+import { createExpression, type FieldMetadata, type FilterExpression } 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";
+import { getLocalizedString } from "../i18n.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

@@ -1,111 +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>
-	);
-}
+import { Button, Popover } from "@digdir/designsystemet-react";
+import {
+	createExpression,
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterTree,
+	isCompleteExpression,
+} from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useEffect, useState } from "react";
+
+import { FieldFilterPanel } from "../filter/FieldFilterPanel.js";
+import { getLocalizedString } from "../i18n.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/GridEditLookup.css

@@ -0,0 +1,12 @@
+@layer ds {
+	.ObGridEditLookup-root {
+		display: flex;
+		width: 100%;
+		height: 100%;
+	}
+
+	.ObGridEditLookup-actions {
+		display: inline-flex;
+		align-items: center;
+	}
+}

package/src/grid/GridEditLookup.tsx

@@ -0,0 +1,121 @@
+import "./GridEditLookup.css";
+
+import { Button } from "@digdir/designsystemet-react";
+import { GridEditInputCell, type GridRenderEditCellParams } from "@mui/x-data-grid-premium";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import type { DataObject } from "@olenbetong/appframe-data";
+import type { DistributiveOmit } from "@olenbetong/appframe-react";
+import { useCallback, useEffect, useRef } from "react";
+
+import { type AfLookupProps, useLookup } from "../AfLookup/Lookup.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type GridEditLookupProps<
+	TBoundData extends Record<string, unknown>,
+	TLookupData extends Record<string, unknown>,
+> = DistributiveOmit<AfLookupProps<TLookupData>, "value" | "onChange"> & {
+	dataObject: DataObject<TLookupData>;
+	/** The fields of the edited row that a picked item sets; non-editable columns are updated directly. */
+	getChanges: (selectedItem: TLookupData | null) => Partial<TBoundData>;
+	params: GridRenderEditCellParams;
+};
+
+/**
+ * A lookup as a grid cell editor: a read-only input with a search button that opens the
+ * lookup dialog anchored to the cell, and a clear button when the field is nullable. Give it
+ * to a column's `renderEditCell`. Equivalent of `GridEditLookup` in `@olenbetong/appframe-mui`.
+ */
+export function GridEditLookup<
+	TBoundData extends Record<string, unknown>,
+	TLookupData extends Record<string, unknown>,
+>({ dataObject, getChanges, params, ...props }: GridEditLookupProps<TBoundData, TLookupData>) {
+	let getChangesRef = useRef(getChanges);
+	useEffect(() => {
+		getChangesRef.current = getChanges;
+	});
+
+	let handleChange = useCallback(
+		(item: TLookupData | null) => {
+			let changes = getChangesRef.current(item);
+			let { id, api } = params;
+			let nonEditableFields: Record<string, unknown> = {};
+
+			for (let key of Object.keys(changes)) {
+				let column = api.getColumn(key);
+				if (column) {
+					if (column.editable) {
+						api.setEditCellValue({ id, field: key, value: changes[key] });
+					} else {
+						nonEditableFields[key] = changes[key];
+					}
+				}
+			}
+
+			if (Object.keys(nonEditableFields).length > 0) {
+				api.updateRows([{ [af.data.uid]: id, id, ...nonEditableFields }]);
+			}
+		},
+		[params],
+	);
+
+	let getAnchorElement = useCallback(
+		() => params.api.getCellElement(params.id, params.field) ?? null,
+		[params.api, params.field, params.id],
+	);
+
+	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<TLookupData>({
+		dataObject,
+		onChange: handleChange,
+		getAnchorElement,
+		...props,
+	});
+
+	return (
+		<div className="ObGridEditLookup-root" style={{ anchorName } as React.CSSProperties}>
+			<GridEditInputCell
+				fullWidth
+				slotProps={{
+					root: {
+						// @ts-expect-error: typed as HTMLElement, but it is the input
+						readOnly: true,
+					},
+				}}
+				onKeyDown={onKeyDown}
+				className="MuiDataGrid-editInputCell"
+				endAdornment={
+					<span className="ObGridEditLookup-actions">
+						{props.nullable && params.value && (
+							<Button
+								type="button"
+								variant="tertiary"
+								data-size="sm"
+								icon
+								title={getLocalizedString("Clear")}
+								onKeyDown={(evt) => evt.stopPropagation()}
+								onClick={(evt) => {
+									evt.stopPropagation();
+									handleChange(null);
+									document.getElementById(inputId)?.focus();
+								}}
+							>
+								<XMarkIcon aria-hidden />
+							</Button>
+						)}
+						<Button
+							type="button"
+							variant="tertiary"
+							data-size="sm"
+							icon
+							title={getLocalizedString("Search")}
+							onClick={() => openDialog()}
+						>
+							<MagnifyingGlassIcon aria-hidden />
+						</Button>
+					</span>
+				}
+				{...params}
+			/>
+			{dialog}
+		</div>
+	);
+}