@olenbetong/appframe-ds 0.2.0 → 0.4.0

package/es/layout/ErrorBoundary.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ErrorBoundary.css";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useError } from "@olenbetong/appframe-react";
+import { Component, useEffect } from "react";
+import { useAsyncError, useRouteError } from "react-router";
+import { PageContainer } from "./PageContainer.js";
+function parseError(error) {
+    let message = "Unspecified error";
+    let stackTrace = null;
+    let title = getLocalizedString("Unexpected application error");
+    if (typeof error === "string") {
+        message = error;
+    }
+    else if (error && typeof error === "object") {
+        const err = error;
+        if (err.status) {
+            title = `${err.status} ${err.statusText}`;
+            message = err.message ?? "";
+        }
+        else if (err.message) {
+            message = err.message;
+            if (err.type) {
+                message = `${err.type}: ${message}`;
+            }
+        }
+        else {
+            message = String(error);
+        }
+        if (err.stack || err.stackTrace) {
+            stackTrace = err.stack ?? err.stackTrace;
+        }
+    }
+    return { message, stackTrace, title };
+}
+export class AppErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            const { imgSrc, message, image } = this.props;
+            const { message: errorMessage } = parseError(this.state.error);
+            const customMessage = typeof message === "function" ? message(this.state.error) : message;
+            return (_jsx("div", { className: "AppErrorBoundary-root", children: _jsxs("div", { className: "AppErrorBoundary-inner", children: [image ?? (_jsx("img", { alt: "", src: imgSrc ?? "/file/site/graphic/error-broken-robot.svg", className: "AppErrorBoundary-image" })), _jsx("h1", { className: "AppErrorBoundary-title", children: getLocalizedString("Something went terribly wrong!") }), _jsx("div", { className: "AppErrorBoundary-alert", children: errorMessage }), _jsx("p", { className: "AppErrorBoundary-message", children: customMessage ??
+                                getLocalizedString("Sometimes it is enough to simply refresh the page. If the error persists, contact the IT department.") }), _jsx("button", { type: "button", className: "AppErrorBoundary-reload", onClick: () => window.location.reload(), children: getLocalizedString("Refresh page") })] }) }));
+        }
+        return this.props.children;
+    }
+}
+export function ErrorAlertFallback({ error, className }) {
+    const message = error instanceof Error ? error.message : String(error);
+    return (_jsxs("div", { className: `ErrorAlertFallback-root${className ? ` ${className}` : ""}`, children: [_jsxs("div", { className: "ErrorAlertFallback-content", children: [_jsx("p", { className: "ErrorAlertFallback-title", children: getLocalizedString("An error occured. Try refreshing the page") }), _jsx("p", { children: message })] }), _jsx("button", { type: "button", className: "ErrorAlertFallback-reload", onClick: () => window.location.reload(), children: getLocalizedString("Reload page") })] }));
+}
+// ── RouteErrorPage ────────────────────────────────────────────────────────────
+export function RouteErrorPage() {
+    const error = useRouteError();
+    const { message, stackTrace, title } = parseError(error);
+    useEffect(() => {
+        globalThis.af?.common?.logError?.(error);
+    }, [error]);
+    return (_jsxs(PageContainer, { className: "flow", children: [_jsx("h1", { children: title }), message && _jsx("p", { children: message }), stackTrace && _jsx("pre", { className: "RouteErrorPage-stack", children: stackTrace })] }));
+}
+// ── AsyncErrorAlert ───────────────────────────────────────────────────────────
+export function AsyncErrorAlert() {
+    const error = useAsyncError();
+    const message = typeof error === "string" ? error : error?.message;
+    return _jsx("div", { className: "ErrorAlertFallback-root", children: message });
+}
+// ── DataObjectErrorAlert ──────────────────────────────────────────────────────
+export function DataObjectErrorAlert({ dataObject }) {
+    const error = useError(dataObject);
+    return error ? _jsx("div", { className: "ErrorAlertFallback-root", children: error }) : null;
+}

package/es/layout/PageContainer.css

@@ -0,0 +1,29 @@
+@media screen {
+	.ObPageContainer-root {
+		max-height: 100%;
+		overflow: auto;
+		height: auto;
+	}
+
+	.ObPageContainer-root.ObPageContainer-fullHeight {
+		height: 100%;
+	}
+
+	.ObPageContainer-inner {
+		margin-left: 0;
+		height: auto;
+		padding: 1rem;
+		box-sizing: border-box;
+		max-width: 100%;
+	}
+
+	.ObPageContainer-fullHeight .ObPageContainer-inner {
+		height: 100%;
+	}
+}
+
+@media screen and (min-width: 600px) {
+	.ObPageContainer-inner {
+		padding: 1rem 1.5rem;
+	}
+}

package/es/layout/PageContainer.d.ts

@@ -0,0 +1,7 @@
+import "./PageContainer.css";
+import type React from "react";
+export type PageContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    fullHeight?: boolean;
+    maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false;
+};
+export declare function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps): React.JSX.Element;

package/es/layout/PageContainer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./PageContainer.css";
+import clsx from "clsx";
+export function PageContainer({ children, className, fullHeight, maxWidth, ...props }) {
+    return (_jsx("div", { className: clsx("ObPageContainer-root", fullHeight && "ObPageContainer-fullHeight"), children: _jsx("div", { className: clsx("ObPageContainer-inner", className), ...props, children: children }) }));
+}

package/es/layout/PartnerToggle.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+export declare function PartnerToggle({ onClick, open, }: {
+    open: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}): React.ReactNode;

package/es/layout/PartnerToggle.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+let toggleRoot = document.createElement("div");
+let brand = document.querySelector(".partner-nav__brand");
+toggleRoot.id = "toggle-root";
+document.querySelector(".partner-nav")?.insertBefore(toggleRoot, brand);
+export function PartnerToggle({ onClick, open, }) {
+    return createPortal(_jsx("button", { type: "button", className: "LayoutSmall-toggle", onClick: onClick, children: open ? "◀" : "☰" }), toggleRoot);
+}

package/es/layout/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
+export declare const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/es/layout/constants.js

@@ -0,0 +1,2 @@
+export const AF_MUI_PAGE_TITLE_ID = "PageTitleSmallLayout";
+export const AF_MUI_APPBAR_TOOLS_ID = "AppBarTools";

package/es/layout/index.css

@@ -0,0 +1,65 @@
+.app-view {
+	height: 100%;
+	overflow-y: hidden;
+}
+
+.scroll-view {
+	height: 100%;
+	max-height: 100%;
+	overflow-y: auto;
+}
+
+.flow > * + * {
+	margin-top: var(--flow-spacing, 1rem) !important;
+}
+
+.flow-xs > * {
+	--flow-spacing: 0.25rem;
+}
+
+.flow-sm > * {
+	--flow-spacing: 0.5rem;
+}
+
+.flow-lg > * {
+	--flow-spacing: 1.5rem;
+}
+
+.flow-xl > * {
+	--flow-spacing: 2rem;
+}
+
+.flow-xxl > * {
+	--flow-spacing: 3rem;
+}
+
+.app-grid {
+	height: 100%;
+	overflow-y: hidden;
+	display: grid;
+	gap: 1rem;
+}
+
+.rows-af {
+	grid-template-rows: auto 1fr;
+}
+
+.rows-aaf {
+	grid-template-rows: auto auto 1fr;
+}
+
+.rows-afaf {
+	grid-template-rows: auto 1fr auto 1fr;
+}
+
+.rows-aff {
+	grid-template-rows: auto 1fr 1fr;
+}
+
+.rows-f {
+	grid-template-rows: 1fr;
+}
+
+.rows-ff {
+	grid-template-rows: 1fr 1fr;
+}

package/es/layout/index.d.ts

@@ -0,0 +1,33 @@
+import "./index.css";
+import type React from "react";
+import type { AppMenuProps } from "./AppMenu.js";
+export type AppLayoutProps = {
+    AppMenuProps?: AppMenuProps;
+    children: React.ReactNode | React.ReactNode[];
+    menu?: React.ReactNode | React.ReactNode[];
+    /**
+     * @deprecated The toolbar is now server-rendered. This prop has no effect.
+     */
+    toolbar?: React.ReactNode | React.ReactNode[];
+    /**
+     * @deprecated The title is now rendered in the server-rendered toolbar. This prop has no effect.
+     */
+    title?: React.ReactNode;
+    /**
+     * @deprecated The toolbar is now server-rendered. This prop has no effect.
+     */
+    enableMenuToggle?: boolean;
+    /**
+     * Enable partner mode (for partner.olenbetong.no applications).
+     * Adds a toggle button to the existing partner header instead of the app bar.
+     */
+    partner?: boolean;
+};
+export * from "./AppMenu.js";
+export * from "./AppMenuItem.js";
+export * from "./AppMenuSubheader.js";
+export * from "./constants.js";
+export * from "./ErrorBoundary.js";
+export * from "./PageContainer.js";
+export * from "./PartnerToggle.js";
+export declare function AppLayout(props: AppLayoutProps): React.JSX.Element;

package/es/layout/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./index.css";
+import { useEffect, useState } from "react";
+import { AppLayoutDesktop } from "./AppLayoutDesktop.js";
+import { AppLayoutMobile } from "./AppLayoutMobile.js";
+function useIsMobile() {
+    let [isMobile, setIsMobile] = useState(() => {
+        if (typeof window === "undefined")
+            return false;
+        return window.matchMedia("(max-width: 1199px)").matches;
+    });
+    useEffect(() => {
+        let mq = window.matchMedia("(max-width: 1199px)");
+        let handler = (e) => setIsMobile(e.matches);
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+    }, []);
+    return isMobile;
+}
+export * from "./AppMenu.js";
+export * from "./AppMenuItem.js";
+export * from "./AppMenuSubheader.js";
+export * from "./constants.js";
+export * from "./ErrorBoundary.js";
+export * from "./PageContainer.js";
+export * from "./PartnerToggle.js";
+export function AppLayout(props) {
+    let isSmall = useIsMobile();
+    let Component = isSmall ? AppLayoutMobile : AppLayoutDesktop;
+    return _jsx(Component, { ...props });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -15,32 +15,37 @@
   "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
   "license": "MIT",
   "peerDependencies": {
-    "@digdir/designsystemet-react": ">=1.0.0",
+    "@digdir/designsystemet-react": ">=1.18.0",
     "@mui/icons-material": ">=7.0.0",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0"
+    "react": ">=19.2.7",
+    "react-dom": ">=19.2.7",
+    "react-error-boundary": ">=5.0.0",
+    "react-router": ">=7.0.0"
   },
   "dependencies": {
     "@olenbetong/appframe-core": "2.11.10",
     "@olenbetong/appframe-data": "1.5.0",
-    "@olenbetong/appframe-react": "1.21.25",
+    "@olenbetong/appframe-react": "1.22.0",
     "react-window": "^1.8.11",
     "react-virtualized-auto-sizer": "^1.0.26",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.13.3",
-    "@mui/icons-material": "9.0.0",
-    "@types/react": "19.2.14",
+    "@digdir/designsystemet-react": "1.18.0",
+    "@mui/icons-material": "9.2.0",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/react-window": "^1.8.8",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
-    "typescript": "6.0.3"
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-error-boundary": "6.1.2",
+    "react-router": "7.17.0",
+    "typescript": "7.0.2"
   },
+  "optionalDependencies": {},
   "scripts": {
     "build": "pnpm run build:tsc && pnpm run build:css",
     "build:tsc": "node --no-warnings ../../scripts/clean.ts ./es tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
-    "build:css": "cp src/AfLookup/Lookup.css es/AfLookup/Lookup.css && cp src/AfLookup/Combobox.css es/AfLookup/Combobox.css"
+    "build:css": "cp src/AfLookup/Lookup.css es/AfLookup/Lookup.css && cp src/AfLookup/Combobox.css es/AfLookup/Combobox.css && cp src/AfLookup/LookupGrid.css es/AfLookup/LookupGrid.css && mkdir -p es/layout && cp src/layout/AppMenu.css es/layout/AppMenu.css && cp src/layout/AppMenuItem.css es/layout/AppMenuItem.css && cp src/layout/AppMenuSubheader.css es/layout/AppMenuSubheader.css && cp src/layout/AppLayoutDesktop.css es/layout/AppLayoutDesktop.css && cp src/layout/AppLayoutMobile.css es/layout/AppLayoutMobile.css && cp src/layout/index.css es/layout/index.css && cp src/layout/ErrorBoundary.css es/layout/ErrorBoundary.css && cp src/layout/PageContainer.css es/layout/PageContainer.css"
   }
 }

package/src/AfLookup/BoundLookup.tsx

@@ -1,17 +1,17 @@
 import type { CurrentRow, DataObject } from "@olenbetong/appframe-data";
-import { useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
+import { type DistributiveOmit, useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
 
 import { AfLookup, type AfLookupProps } from "./Lookup.js";
 
-export interface BoundLookupProps<
+export type BoundLookupProps<
 	TBoundData extends Record<string, unknown>,
 	TLookupData extends Record<string, unknown>,
-> extends Omit<AfLookupProps<TLookupData>, "onChange"> {
+> = DistributiveOmit<AfLookupProps<TLookupData>, "onChange"> & {
 	dataObject: DataObject<TLookupData>;
 	displayField?: keyof TBoundData;
 	getChanges: (selectedItem: TLookupData | null) => Partial<TBoundData>;
 	getDisplayValue?: (currentRow: CurrentRow<TBoundData>) => string;
-}
+};
 
 export function BoundLookup<
 	TBoundData extends Record<string, unknown>,

package/src/AfLookup/Combobox.css

@@ -14,7 +14,7 @@
 
 .ObCombobox-listWrap {
 	overflow: hidden;
-	height: 372px;
+	min-height: 0;
 	border: 1px solid rgb(0 0 0 / 0.12);
 	border-radius: 0.25rem;
 	background-color: white;

package/src/AfLookup/Combobox.tsx

@@ -3,33 +3,49 @@ import "./Combobox.css";
 import { Button, Textfield } from "@digdir/designsystemet-react";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import type { DataObject } from "@olenbetong/appframe-data";
-import { useDataWithFilter, useDebounce, useLoading } from "@olenbetong/appframe-react";
+import { type LookupColumn, useComboboxData } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { VariableSizeList as VirtualList } from "react-window";
 
-export interface ComboboxProps<T extends Record<string, unknown>> {
+import { LookupGrid } from "./LookupGrid.js";
+
+export interface ComboboxBaseProps<T extends Record<string, unknown>> {
 	nullable?: boolean;
 	dataObject: DataObject<T>;
 	uniqueIdField?: string;
 	isItemSelected?: (item: T) => boolean;
-	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
 	onChange?: (item: T | null) => void;
 	value?: T;
 	onClose?: () => void;
 }
 
-export function Combobox<T extends Record<string, unknown>>({
-	nullable,
-	dataObject,
-	isItemSelected,
-	uniqueIdField = "PrimKey",
-	renderItem: Component,
-	onChange,
-	onClose,
-}: ComboboxProps<T>) {
-	let id = useId();
+export interface ComboboxListProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
+	/**
+	 * Renders the popup content as a list (default).
+	 */
+	variant?: "list";
+	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
+}
+
+export interface ComboboxGridProps<T extends Record<string, unknown>> extends ComboboxBaseProps<T> {
+	/**
+	 * Renders the popup content as a grid with a header row and one column per
+	 * entry in `columns`.
+	 */
+	variant: "grid";
+	columns: LookupColumn<T>[];
+}
+
+export type ComboboxProps<T extends Record<string, unknown>> = ComboboxListProps<T> | ComboboxGridProps<T>;
+
+export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>) {
+	let { nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", onChange, onClose } = props;
+	let isGrid = props.variant === "grid";
+	let columns = isGrid ? (props as ComboboxGridProps<T>).columns : undefined;
+	let listRef = useRef<VirtualList>(null);
+
 	let [isDesktop, setIsDesktop] = useState(
 		() => typeof window !== "undefined" && window.matchMedia("(width >= 768px) and (pointer: fine)").matches,
 	);
@@ -41,27 +57,23 @@ export function Combobox<T extends Record<string, unknown>>({
 		return () => mq.removeEventListener("change", handler);
 	}, []);
 
-	let [currentIndex, setCurrentIndex] = useState<number>(0);
-	let listRef = useRef<VirtualList>(null);
-	let [inputValue, setInputValue] = useState(() => {
-		// Preserve filter even if the lookup is unmounted
-		let currentFilter = dataObject.getParameter("filterString") ?? "";
-		let filters = currentFilter.split(/\s+AND\s+/g);
-		let wordFilters = filters.filter((filter) => filter.includes("[SearchColumn]"));
-		let words = wordFilters.map((filter) => filter.match(/'%([^']*)%'/)?.[1] ?? "").filter(Boolean);
-
-		return words.join(" ");
-	});
-
-	let query = useDebounce(inputValue, 300);
-	let loading = useLoading(dataObject);
-	let data = useDataWithFilter(
+	let {
+		id,
+		data,
+		loading,
+		inputValue,
+		setInputValue,
+		currentIndex,
+		currentColumn,
+		getItemId,
+		handleSelectItem,
+		handleKeyDown,
+	} = useComboboxData<T>({
 		dataObject,
-		query
-			.split(/\s+/g)
-			.map((word) => `[SearchColumn] LIKE '%${word}%'`)
-			.join(" AND "),
-	);
+		uniqueIdField,
+		columnCount: columns?.length ?? 1,
+		onChange,
+	});
 
 	let wrapperRef = useRef<HTMLDivElement>(null);
 	let [height, setHeight] = useState<number>(0);
@@ -79,71 +91,16 @@ export function Combobox<T extends Record<string, unknown>>({
 		return () => resizeObserver.disconnect();
 	}, []);
 
-	// Reset current index when new data is loaded
-	// biome-ignore lint/correctness/useExhaustiveDependencies: isn't it obvious?
-	useEffect(() => {
-		setCurrentIndex(0);
-	}, [data]);
-
-	let getItemId = useCallback(
-		(item: T | undefined) => {
-			if (!item) {
-				return;
-			}
-
-			let itemId = item[uniqueIdField];
-
-			return `${id}-${itemId}`;
-		},
-		[id, uniqueIdField],
-	);
-
-	function handleSelectItem(item: T) {
-		onChange?.(item);
-		setInputValue("");
-	}
-
-	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
-		let newIndex: number | null = null;
-
-		if (event.key === "ArrowDown") {
-			newIndex = currentIndex + 1;
-		} else if (event.key === "ArrowUp") {
-			newIndex = currentIndex - 1;
-		} else if (event.key === "Home" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
-			newIndex = 0;
-		} else if (event.key === "End" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
-			newIndex = data.length - 1;
-		} else if (event.key === "Enter") {
-			event.stopPropagation();
-			event.preventDefault();
-			handleSelectItem(data[currentIndex]);
-			return;
-		}
-
-		if (newIndex !== null) {
-			event.stopPropagation();
-			event.preventDefault();
-			if (newIndex < 0) {
-				newIndex = data.length - 1;
-			} else if (newIndex >= data.length) {
-				newIndex = 0;
-			}
-			setCurrentIndex(newIndex);
-		}
-	}
-
 	let sizeMap = useRef(new Map<number, number>());
 	let getItemSize = (index: number) => sizeMap.current.get(index) ?? 56;
-	let setSize = (index: number, size: number) => {
+	let setSize = useCallback((index: number, size: number) => {
 		if (sizeMap.current.get(index) !== size) {
 			sizeMap.current.set(index, size);
 			// listRef will not be set on the initial render, so delay resetting
 			setTimeout(() => listRef.current?.resetAfterIndex(index, true));
 		}
-	};
+	}, []);
 
-	// biome-ignore lint: nested component defined for performance reasons inside render
 	let Row = ({ index, style: { height, ...style } }: { index: number; style: React.CSSProperties }) => {
 		let rowRef = useRef<HTMLLIElement>(null);
 
@@ -155,9 +112,10 @@ export function Combobox<T extends Record<string, unknown>>({
 		let item = data[index];
 		let itemId = getItemId(item);
 		let active = index === currentIndex;
+		let ItemComponent = (props as ComboboxListProps<T>).renderItem;
 
 		return (
-			<Component
+			<ItemComponent
 				className={clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected")}
 				aria-selected={active}
 				onClick={() => handleSelectItem(item)}
@@ -176,8 +134,8 @@ export function Combobox<T extends Record<string, unknown>>({
 	useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
 
 	return (
-		// biome-ignore lint/a11y/useKeyWithClickEvents: element is not interactive, click is used to prevent dialog close
-		// biome-ignore lint/a11y/noStaticElementInteractions: element is not interactive, click is used to prevent dialog close
+		// oxlint-disable-next-line jsx-a11y/click-events-have-key-events -- element is not interactive, click is used to prevent dialog close
+		// oxlint-disable-next-line jsx-a11y/no-static-element-interactions -- element is not interactive, click is used to prevent dialog close
 		<div className="ObCombobox-root" id={id} onClick={(evt) => evt.stopPropagation()}>
 			<div className="ObCombobox-actions">
 				{nullable && (
@@ -201,7 +159,8 @@ export function Combobox<T extends Record<string, unknown>>({
 			<Textfield
 				type="search"
 				className="ObCombobox-input"
-				label={getLocalizedString("Search")}
+				aria-label={getLocalizedString("Search")}
+				placeholder={getLocalizedString("Search")}
 				onKeyDown={handleKeyDown}
 				aria-activedescendant={getItemId(data[currentIndex]) ?? ""}
 				value={inputValue}
@@ -213,20 +172,32 @@ export function Combobox<T extends Record<string, unknown>>({
 						<div className="ObCombobox-progress-bar" />
 					</div>
 				)}
-				{height > 0 && (
-					<div className="ObCombobox-list" role="listbox">
-						<VirtualList
-							ref={listRef}
+				{height > 0 &&
+					(columns ? (
+						<LookupGrid<T>
+							columns={columns}
+							data={data}
 							height={height}
-							width="100%"
-							itemCount={data.length}
-							itemSize={getItemSize}
-							overscanCount={5}
-						>
-							{Row}
-						</VirtualList>
-					</div>
-				)}
+							currentIndex={currentIndex}
+							currentColumn={currentColumn}
+							getItemId={getItemId}
+							isItemSelected={isItemSelected}
+							onSelectItem={handleSelectItem}
+						/>
+					) : (
+						<div className="ObCombobox-list" role="listbox">
+							<VirtualList
+								ref={listRef}
+								height={height}
+								width="100%"
+								itemCount={data.length}
+								itemSize={getItemSize}
+								overscanCount={5}
+							>
+								{Row}
+							</VirtualList>
+						</div>
+					))}
 			</div>
 		</div>
 	);

package/src/AfLookup/Lookup.css

@@ -1,7 +1,28 @@
+.ObLookup-inputWrap {
+	position: relative;
+
+	.ds-input {
+		padding-inline-end: var(--ObLookup-buttons-width, 3rem);
+	}
+}
+
+.ObLookup-buttons {
+	position: absolute;
+	inset-inline-end: 0;
+	inset-block-end: 0;
+	/* Match the .ds-input height so the buttons center on the input row,
+	   also when a label or description is rendered above the input */
+	height: var(--ds-size-12, 3rem);
+	display: flex;
+	align-items: center;
+	padding-inline-end: var(--ds-size-1, 0.25rem);
+}
+
 .ObLookup-dialog {
 	border: 0;
 	margin-block-start: 0;
 	padding: 1rem;
+	overflow: hidden;
 
 	background-color: whitesmoke;