@olenbetong/appframe-ds 1.3.3 → 1.3.5

package/src/grid/GridEditLookup.tsx

@@ -1,121 +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>
-	);
-}
+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>
+	);
+}