@olenbetong/appframe-ds 0.3.0 → 0.4.0

package/src/AfLookup/Lookup.tsx

@@ -4,14 +4,14 @@ import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-r
 import ClearIcon from "@mui/icons-material/Close";
 import SearchIcon from "@mui/icons-material/Search";
 import { getLocalizedString } from "@olenbetong/appframe-core";
+import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useCallback, useEffect, useId, useRef, useState } from "react";
-import { createPortal, flushSync } from "react-dom";
+import { createPortal } from "react-dom";
 
 import { Combobox, type ComboboxProps } from "./Combobox.js";
 
-export interface AfLookupProps<T extends Record<string, unknown>> extends Omit<ComboboxProps<T>, "value"> {
+export type AfLookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
 	/**
 	 * Allows the user to enter a value manually that might not be in the list.
 	 */
@@ -24,167 +24,34 @@ export interface AfLookupProps<T extends Record<string, unknown>> extends Omit<C
 		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
 		textField?: Partial<TextfieldProps>;
 	};
-}
+};
 
-export interface LookupProps<T extends Record<string, unknown>> extends Omit<ComboboxProps<T>, "value"> {
+export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
 	slotProps?: {
 		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
 	};
 	getAnchorElement?: () => Element | null;
-}
+};
 
 export function useLookup<T extends Record<string, unknown>>({
 	getAnchorElement,
 	slotProps,
 	...props
 }: LookupProps<T>) {
-	let [open, setOpen] = useState(false);
-	let anchorName = `--anchor-${CSS.escape(useId())}`;
-	let dialogRef = useRef<HTMLDialogElement>(null);
-	let inputId = useId();
-	let resetManualAnchor = useCallback(() => {
-		let $dialog = dialogRef.current;
-		if ($dialog) {
-			$dialog.style.removeProperty("--lookup-anchor-inline-start");
-			$dialog.style.removeProperty("--lookup-anchor-block-start");
-			delete $dialog.dataset.anchor;
-		}
-	}, []);
-	let updateManualAnchor = useCallback(() => {
-		if (typeof window === "undefined") {
-			return;
-		}
-		if (!window.matchMedia?.("(pointer: fine)").matches) {
-			resetManualAnchor();
-			return;
-		}
-		let anchorElement = getAnchorElement?.() ?? null;
-		let $dialog = dialogRef.current;
-		if (!$dialog || !anchorElement) {
-			resetManualAnchor();
-			return;
-		}
-		let rect = anchorElement.getBoundingClientRect();
-		let dialogHeight = $dialog.offsetHeight || 0;
-		let dialogWidth = $dialog.offsetWidth || 0;
-		let top = rect.bottom + 8;
-		let availableBelow = window.innerHeight - rect.bottom - 16;
-		if (availableBelow < dialogHeight) {
-			top = Math.max(16, rect.top - dialogHeight - 8);
-		}
-		let left = rect.left;
-		let minInline = 16;
-		let maxInline = window.innerWidth - dialogWidth - 16;
-		if (Number.isFinite(maxInline)) {
-			left = Math.min(Math.max(left, minInline), Math.max(minInline, maxInline));
-		}
-		$dialog.style.setProperty("--lookup-anchor-inline-start", `${Math.round(left)}px`);
-		$dialog.style.setProperty("--lookup-anchor-block-start", `${Math.round(top)}px`);
-		$dialog.dataset.anchor = "manual";
-	}, [getAnchorElement, resetManualAnchor]);
-
-	function handleOpen() {
-		let $dialog = dialogRef.current;
-
-		if ($dialog) {
-			flushSync(() => {
-				$dialog.showModal();
-				setOpen(true);
-			});
-
-			$dialog.querySelector<HTMLInputElement>('input[type="search"]')?.focus();
-		}
-	}
-
-	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-		if (event.key === "ArrowDown" || event.key === "F4") {
-			event.preventDefault();
-			event.stopPropagation();
-			handleOpen();
-		}
-	}
-
-	let handleClose = useCallback(() => {
-		setOpen(false);
-		document.getElementById(inputId)?.focus();
-	}, [inputId]);
+	let { open, openDialog, onKeyDown, dialogRef, anchorName, inputId } = useLookupState({
+		getAnchorElement,
+		scrollParentSelector: "[data-virtualized-scroller]",
+	});
 
 	function handleChange(item: T | null) {
 		props.onChange?.(item);
 		dialogRef.current?.close();
 	}
 
-	useEffect(() => {
-		if (!open) {
-			resetManualAnchor();
-			return;
-		}
-		let frame = requestAnimationFrame(() => {
-			updateManualAnchor();
-		});
-		updateManualAnchor();
-		let cleanupTargets: Array<
-			[EventTarget, string, EventListenerOrEventListenerObject, AddEventListenerOptions | boolean | undefined]
-		> = [];
-		let listener = () => updateManualAnchor();
-		cleanupTargets.push([window, "resize", listener, undefined]);
-		cleanupTargets.push([window, "scroll", listener, true]);
-		let anchorElement = getAnchorElement?.() ?? null;
-		let scrollParent = anchorElement?.closest<HTMLElement>("[data-virtualized-scroller]") ?? null;
-		if (scrollParent) {
-			cleanupTargets.push([scrollParent, "scroll", listener, { passive: true }]);
-		}
-		for (let [target, type, handler, options] of cleanupTargets) {
-			target.addEventListener(type, handler, options);
-		}
-		return () => {
-			cancelAnimationFrame(frame);
-			for (let [target, type, handler, options] of cleanupTargets) {
-				target.removeEventListener(type, handler, options);
-			}
-		};
-	}, [getAnchorElement, open, resetManualAnchor, updateManualAnchor]);
-
-	useEffect(() => {
-		let $dialog = dialogRef.current;
-		if ($dialog) {
-			let controller = new AbortController();
-			let signal = controller.signal;
-			let closeEvent = () => {
-				// Wait for transition to finish before closing
-				setTimeout(() => {
-					handleClose();
-				}, 150);
-			};
-
-			$dialog.addEventListener("close", closeEvent, { signal });
-			$dialog.addEventListener("cancel", closeEvent, { signal });
-			$dialog.addEventListener(
-				"click",
-				(event) => {
-					let rect = $dialog.getBoundingClientRect();
-					if (
-						rect.left > event.clientX ||
-						rect.right < event.clientX ||
-						rect.top > event.clientY ||
-						rect.bottom < event.clientY
-					) {
-						$dialog.close();
-					}
-				},
-				{ signal },
-			);
-
-			return () => {
-				controller.abort();
-			};
-		}
-	}, [handleClose]);
-
 	return {
 		open,
-		openDialog: handleOpen,
-		onKeyDown: handleKeyDown,
+		openDialog,
+		onKeyDown,
 		onChange: handleChange,
 		dialogRef,
 		anchorName,
@@ -213,9 +80,19 @@ export function AfLookup<T extends Record<string, unknown>>({
 }: AfLookupProps<T>) {
 	let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>(props);
 
+	let hasClear = !!(props.nullable && value && props.onChange);
+
 	return (
 		<div style={{ anchorName } as React.CSSProperties}>
-			<div style={{ position: "relative", display: fullWidth ? "block" : "inline-block" }}>
+			<div
+				className="ObLookup-inputWrap"
+				style={
+					{
+						display: fullWidth ? "block" : "inline-block",
+						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+					} as React.CSSProperties
+				}
+			>
 				<Textfield
 					id={inputId}
 					value={value ?? ""}
@@ -227,17 +104,8 @@ export function AfLookup<T extends Record<string, unknown>>({
 					{...(slotProps?.textField as any)}
 					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
 				/>
-				<div
-					style={{
-						position: "absolute",
-						right: 0,
-						top: "50%",
-						transform: "translateY(-50%)",
-						display: "flex",
-						alignItems: "center",
-					}}
-				>
-					{props.nullable && value && props.onChange && (
+				<div className="ObLookup-buttons">
+					{hasClear && (
 						<Button
 							icon
 							variant="tertiary"

package/src/AfLookup/LookupEdit.tsx

@@ -0,0 +1,131 @@
+import "./Lookup.css";
+
+import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import ClearIcon from "@mui/icons-material/Close";
+import SearchIcon from "@mui/icons-material/Search";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DistributiveOmit } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import type React from "react";
+
+import type { ComboboxProps } from "./Combobox.js";
+import { useLookup } from "./Lookup.js";
+
+export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
+	ComboboxProps<T>,
+	"value" | "onChange"
+> & {
+	/**
+	 * Allows the user to enter a value manually that might not be in the list.
+	 */
+	editable?: boolean;
+	fullWidth?: boolean;
+	label?: string;
+	value?: string | null;
+	lookupField: keyof T;
+	onChange?: (evt: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	slotProps?: {
+		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+		textField?: Partial<TextfieldProps>;
+	};
+};
+
+export function AfLookupEdit<T extends Record<string, unknown>>({
+	fullWidth = false,
+	label,
+	onChange,
+	slotProps,
+	nullable,
+	lookupField,
+	value,
+	...props
+}: AfLookupEditProps<T>) {
+	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>({
+		...props,
+		nullable,
+		slotProps: { dialog: slotProps?.dialog },
+		onChange: (item) => applyValue(item),
+	});
+
+	// The popup selects a single value from the dataset: the item's lookupField
+	// is written to the input through the native value setter so the same
+	// change event fires whether the user types or picks from the list/grid.
+	function applyValue(item: T | null) {
+		let input = document.getElementById(inputId) as HTMLInputElement;
+		let nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+
+		if (input && nativeInputValueSetter) {
+			nativeInputValueSetter.call(input, item ? String(item[lookupField]) : "");
+			input.dispatchEvent(new Event("input", { bubbles: true }));
+		}
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			event.stopPropagation();
+			openDialog();
+		} else {
+			onKeyDown(event);
+		}
+	}
+
+	let hasClear = !!(nullable && value && onChange);
+
+	return (
+		<div style={{ anchorName } as React.CSSProperties}>
+			<div
+				className="ObLookup-inputWrap"
+				style={
+					{
+						display: fullWidth ? "block" : "inline-block",
+						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+					} as React.CSSProperties
+				}
+			>
+				<Textfield
+					id={inputId}
+					value={value ?? ""}
+					label={label}
+					onChange={onChange}
+					onKeyDown={handleKeyDown}
+					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
+					{...(slotProps?.textField as any)}
+					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
+				/>
+				<div className="ObLookup-buttons">
+					{hasClear && (
+						<Button
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-label={getLocalizedString("Clear")}
+							onKeyDown={(evt) => evt.stopPropagation()}
+							onClick={(evt) => {
+								evt.stopPropagation();
+								applyValue(null);
+								document.getElementById(inputId)?.focus();
+							}}
+						>
+							<ClearIcon />
+						</Button>
+					)}
+					<Button
+						icon
+						variant="tertiary"
+						data-size="sm"
+						aria-label={getLocalizedString("Search")}
+						onClick={(evt) => {
+							evt.stopPropagation();
+							openDialog();
+						}}
+					>
+						<SearchIcon />
+					</Button>
+				</div>
+			</div>
+			{dialog}
+		</div>
+	);
+}

package/src/AfLookup/LookupGrid.css

@@ -0,0 +1,57 @@
+.ObLookupGrid-root {
+	height: 100%;
+	overflow: hidden;
+	overscroll-behavior: contain;
+	border: 1px solid rgb(0 0 0 / 0.06);
+}
+
+.ObLookupGrid-header {
+	display: grid;
+	height: 40px;
+	align-items: center;
+	border-bottom: 1px solid rgb(0 0 0 / 0.12);
+	background-color: rgb(0 0 0 / 0.03);
+	font-weight: 600;
+}
+
+.ObLookupGrid-headerCell {
+	padding: 0 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ObLookupGrid-row {
+	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
+	display: grid;
+	align-items: center;
+	cursor: pointer;
+	border-bottom: 1px solid rgb(0 0 0 / 0.06);
+
+	&.active {
+		background-color: var(--active-color);
+	}
+
+	&:hover {
+		background-color: rgb(0 0 0 / 0.06);
+	}
+
+	&.active:hover {
+		background-color: oklch(from var(--active-color) calc(l + 0.1) calc(c - 0.04) h);
+	}
+}
+
+.ObLookupGrid-cell {
+	padding: 0 8px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	&.active {
+		outline: 2px solid oklch(from var(--brand-secondary, #666) calc(l - 0.2) c h);
+		outline-offset: -2px;
+	}
+}

package/src/AfLookup/LookupGrid.tsx

@@ -0,0 +1,98 @@
+import "./LookupGrid.css";
+
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { LookupColumn } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import { useEffect, useMemo, useRef } from "react";
+import { FixedSizeList as VirtualList } from "react-window";
+
+const ROW_HEIGHT = 40;
+const HEADER_HEIGHT = 40;
+
+export interface LookupGridProps<T extends Record<string, unknown>> {
+	columns: LookupColumn<T>[];
+	data: T[];
+	height: number;
+	currentIndex: number;
+	currentColumn: number;
+	getItemId: (item: T | undefined) => string | undefined;
+	isItemSelected?: (item: T) => boolean;
+	onSelectItem: (item: T) => void;
+}
+
+function getColumnWidth<T extends Record<string, unknown>>(column: LookupColumn<T>) {
+	if (typeof column.width === "number") {
+		return `${column.width}px`;
+	}
+
+	return column.width ?? "minmax(80px, 1fr)";
+}
+
+export function LookupGrid<T extends Record<string, unknown>>({
+	columns,
+	data,
+	height,
+	currentIndex,
+	currentColumn,
+	getItemId,
+	isItemSelected,
+	onSelectItem,
+}: LookupGridProps<T>) {
+	let listRef = useRef<VirtualList>(null);
+	let gridTemplateColumns = useMemo(() => columns.map(getColumnWidth).join(" "), [columns]);
+
+	useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
+
+	// oxlint-disable-next-line react/no-nested-component-definitions -- react-window row renderer
+	let Row = ({ index, style }: { index: number; style: React.CSSProperties }) => {
+		let item = data[index];
+		let itemId = getItemId(item);
+		let active = index === currentIndex;
+
+		return (
+			<div
+				role="row"
+				aria-selected={active}
+				className={clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected")}
+				style={{ ...style, gridTemplateColumns }}
+				onClick={() => onSelectItem(item)}
+				key={itemId}
+				id={itemId}
+			>
+				{columns.map((column, columnIndex) => (
+					<div
+						role="gridcell"
+						className={clsx("ObLookupGrid-cell", active && columnIndex === currentColumn && "active")}
+						key={column.field}
+						title={String(item[column.field] ?? "")}
+					>
+						{column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "")}
+					</div>
+				))}
+			</div>
+		);
+	};
+
+	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>
+			<VirtualList
+				ref={listRef}
+				height={Math.max(0, height - HEADER_HEIGHT)}
+				width="100%"
+				itemCount={data.length}
+				itemSize={ROW_HEIGHT}
+				overscanCount={5}
+			>
+				{Row}
+			</VirtualList>
+		</div>
+	);
+}

package/src/AfLookup/index.ts

@@ -1,3 +1,5 @@
 export * from "./BoundLookup.js";
 export * from "./Combobox.js";
 export * from "./Lookup.js";
+export * from "./LookupEdit.js";
+export * from "./LookupGrid.js";

package/src/binding/DataObjectSelect.tsx

@@ -67,7 +67,7 @@ export function DataObjectSelect<T extends Record<string, unknown>>({
 	let id = idProp ?? fallbackId;
 	let inputRef = useRef<HTMLSelectElement>(null);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: default value should only affect the initial value
+	// oxlint-disable-next-line react-hooks/exhaustive-deps -- default value should only affect the initial value
 	useEffect(() => {
 		let defaultExists = data.find((r) => String(getOptionValue?.(r) ?? r[valueField]) === defaultValue);
 		if (inputRef.current && defaultExists) {

package/src/layout/AppLayoutMobile.tsx

@@ -19,7 +19,7 @@ export function AppLayoutMobile({ AppMenuProps, children, menu, partner }: AppLa
 	let [drawerOpen, setDrawerOpen] = useState(false);
 	let location = useLocation();
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: close drawer on navigation
+	// oxlint-disable-next-line react-hooks/exhaustive-deps -- close drawer on navigation
 	useEffect(() => {
 		setDrawerOpen(false);
 	}, [location]);