@olenbetong/appframe-ds 0.3.0 → 0.4.1

package/es/AfLookup/LookupGrid.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./LookupGrid.css";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+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;
+function getColumnWidth(column) {
+    if (typeof column.width === "number") {
+        return `${column.width}px`;
+    }
+    return column.width ?? "minmax(80px, 1fr)";
+}
+export function LookupGrid({ columns, data, height, currentIndex, currentColumn, getItemId, isItemSelected, onSelectItem, }) {
+    let listRef = useRef(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 }) => {
+        let item = data[index];
+        let itemId = getItemId(item);
+        let active = index === currentIndex;
+        return (_jsx("div", { role: "row", "aria-selected": active, className: clsx("ObLookupGrid-row", active && "active", isItemSelected?.(item) && "selected"), style: { ...style, gridTemplateColumns }, onClick: () => onSelectItem(item), id: itemId, children: columns.map((column, columnIndex) => (_jsx("div", { role: "gridcell", className: clsx("ObLookupGrid-cell", active && columnIndex === currentColumn && "active"), title: String(item[column.field] ?? ""), children: column.renderCell ? column.renderCell(item[column.field], item) : String(item[column.field] ?? "") }, column.field))) }, itemId));
+    };
+    return (_jsxs("div", { role: "grid", "aria-label": getLocalizedString("Search results"), className: "ObLookupGrid-root", children: [_jsx("div", { role: "row", className: "ObLookupGrid-header", style: { gridTemplateColumns }, children: columns.map((column) => (_jsx("div", { role: "columnheader", className: "ObLookupGrid-headerCell", children: column.headerName ?? column.field }, column.field))) }), _jsx(VirtualList, { ref: listRef, height: Math.max(0, height - HEADER_HEIGHT), width: "100%", itemCount: data.length, itemSize: ROW_HEIGHT, overscanCount: 5, children: Row })] }));
+}

package/es/AfLookup/index.d.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/es/AfLookup/index.js

@@ -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/es/binding/BoundDatePicker.d.ts

@@ -2,6 +2,6 @@ import { type TextfieldProps } from "@digdir/designsystemet-react";
 export type BoundDatePickerProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown" | "type"> & {
     field: string;
 };
-export declare const BoundDatePicker: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "value" | "onKeyDown" | "type"> & {
+export declare const BoundDatePicker: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "onKeyDown" | "type" | "value"> & {
     field: string;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundDateTimePicker.d.ts

@@ -2,6 +2,6 @@ import { type TextfieldProps } from "@digdir/designsystemet-react";
 export type BoundDateTimePickerProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown" | "type"> & {
     field: string;
 };
-export declare const BoundDateTimePicker: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "value" | "onKeyDown" | "type"> & {
+export declare const BoundDateTimePicker: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "onKeyDown" | "type" | "value"> & {
     field: string;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundInput.d.ts

@@ -3,4 +3,4 @@ export type BoundInputProps = Omit<InputProps, "onChange" | "onKeyDown" | "onBlu
     field: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
-export declare function BoundInput({ field, onChange: onChangeProp, ...props }: BoundInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoundInput({ field, onChange: onChangeProp, ...props }: BoundInputProps): import("react").JSX.Element;

package/es/binding/BoundNumericTextField.d.ts

@@ -17,4 +17,4 @@ export type BoundNumericTextFieldProps = Omit<TextfieldProps, "onChange" | "onKe
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onError?: (error: string | null) => void;
 };
-export declare function BoundNumericTextField({ field, precision, scale, onChange: onChangeProp, onError, ...props }: BoundNumericTextFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function BoundNumericTextField({ field, precision, scale, onChange: onChangeProp, onError, ...props }: BoundNumericTextFieldProps): import("react").JSX.Element;

package/es/binding/BoundSwitch.d.ts

@@ -3,7 +3,7 @@ export type BoundSwitchProps = Omit<SwitchProps, "onChange" | "checked"> & {
     field: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
-export declare const BoundSwitch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "onChange" | "checked"> & {
+export declare const BoundSwitch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "checked" | "onChange"> & {
     field: string;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundTextField.d.ts

@@ -2,6 +2,6 @@ import { type TextfieldProps } from "@digdir/designsystemet-react";
 export type BoundTextFieldProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown"> & {
     field: string;
 };
-export declare const BoundTextField: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "value" | "onKeyDown"> & {
+export declare const BoundTextField: import("react").ForwardRefExoticComponent<Omit<TextfieldProps, "onChange" | "onKeyDown" | "value"> & {
     field: string;
 } & import("react").RefAttributes<HTMLInputElement & HTMLTextAreaElement>>;

package/es/binding/DataEditToolbar.d.ts

@@ -10,4 +10,4 @@ export type DataEditToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
      */
     showNavigation?: boolean;
 };
-export declare function DataEditToolbar({ children, navigationDataObject, showNavigation, style, ...props }: DataEditToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataEditToolbar({ children, navigationDataObject, showNavigation, style, ...props }: DataEditToolbarProps): import("react").JSX.Element;

package/es/binding/DataEditToolbar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Tooltip } from "@digdir/designsystemet-react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";

package/es/binding/DataObjectSelect.d.ts

@@ -41,10 +41,10 @@ export type DataObjectSelectProps<T extends Record<string, unknown>> = React.Sel
      */
     getOptionLabel?: (item: T) => string;
 };
-export declare function DataObjectSelect<T extends Record<string, unknown>>({ nullable, blankLabel, dataObject, filter, id: idProp, label, name, getOptionLabel, getOptionValue, valueField, labelField, value, defaultValue, ...props }: DataObjectSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataObjectSelect<T extends Record<string, unknown>>({ nullable, blankLabel, dataObject, filter, id: idProp, label, name, getOptionLabel, getOptionValue, valueField, labelField, value, defaultValue, ...props }: DataObjectSelectProps<T>): import("react").JSX.Element;
 export declare function BoundDataObjectSelect<T extends Record<string, unknown>>({ field, ...props }: DataObjectSelectProps<T> & {
     /**
      * Field to bind the value of the select component to.
      */
     field: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/es/binding/DataObjectSelect.js

@@ -1,4 +1,4 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Field, Label, Select } from "@digdir/designsystemet-react";
 import { useFetchData, useField } from "@olenbetong/appframe-react";
 import { useEffect, useId, useRef } from "react";
@@ -7,7 +7,7 @@ export function DataObjectSelect({ nullable = false, blankLabel = "", dataObject
     let fallbackId = useId();
     let id = idProp ?? fallbackId;
     let inputRef = useRef(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/es/layout/AppLayoutDesktop.d.ts

@@ -1,3 +1,3 @@
 import "./AppLayoutDesktop.css";
 import type { AppLayoutProps } from "./index.js";
-export declare function AppLayoutDesktop({ AppMenuProps, children, menu, partner, }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayoutDesktop({ AppMenuProps, children, menu, partner }: AppLayoutProps): import("react").JSX.Element;

package/es/layout/AppLayoutDesktop.js

@@ -13,7 +13,7 @@ function LoadingFallback() {
             animation: "progress-indeterminate 1.5s ease-in-out infinite",
         } }));
 }
-export function AppLayoutDesktop({ AppMenuProps, children, menu, partner, }) {
+export function AppLayoutDesktop({ AppMenuProps, children, menu, partner }) {
     let [open, setOpen] = useState(true);
     return (_jsxs("div", { className: clsx(partner ? "app-view" : "LayoutLarge-container"), children: [partner && menu && _jsx(PartnerToggle, { open: open, onClick: () => setOpen((o) => !o) }), _jsxs("div", { className: clsx("LayoutLarge-root", menu && "LayoutLarge-withMenu", open && "open"), children: [menu && (_jsx(AppMenu, { className: "LayoutLarge-menu AppMenu-drawer", ...AppMenuProps, children: menu })), _jsx("main", { className: "LayoutLarge-main", children: _jsx(Suspense, { fallback: _jsx(LoadingFallback, {}), children: _jsx(ErrorBoundary, { FallbackComponent: ErrorAlertFallback, children: children }) }) })] })] }));
 }

package/es/layout/AppLayoutMobile.d.ts

@@ -1,3 +1,3 @@
 import "./AppLayoutMobile.css";
 import type { AppLayoutProps } from "./index.js";
-export declare function AppLayoutMobile({ AppMenuProps, children, menu, partner }: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayoutMobile({ AppMenuProps, children, menu, partner }: AppLayoutProps): import("react").JSX.Element;

package/es/layout/AppLayoutMobile.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./AppLayoutMobile.css";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
@@ -10,9 +10,9 @@ function Toggle({ onToggle }) {
 export function AppLayoutMobile({ AppMenuProps, children, menu, partner }) {
     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]);
-    return (_jsxs("div", { className: "LayoutSmall-root", children: [partner && menu && (_jsx(PartnerToggle, { open: drawerOpen, onClick: () => setDrawerOpen((c) => !c) })), !partner && menu && (_jsx("div", { className: "LayoutSmall-menuBar", children: _jsx(Toggle, { onToggle: () => setDrawerOpen((c) => !c) }) })), menu && (_jsxs(_Fragment, { children: [_jsx("div", { className: `LayoutSmall-drawerOverlay${drawerOpen ? " open" : ""}`, onClick: () => setDrawerOpen(false), "aria-hidden": "true" }), _jsx("div", { className: `LayoutSmall-drawer AppMenu-drawer${drawerOpen ? " open" : ""}`, children: _jsx(AppMenu, { ...AppMenuProps, children: menu }) })] })), children] }));
+    return (_jsxs("div", { className: "LayoutSmall-root", children: [partner && menu && _jsx(PartnerToggle, { open: drawerOpen, onClick: () => setDrawerOpen((c) => !c) }), !partner && menu && (_jsx("div", { className: "LayoutSmall-menuBar", children: _jsx(Toggle, { onToggle: () => setDrawerOpen((c) => !c) }) })), menu && (_jsxs(_Fragment, { children: [_jsx("div", { className: `LayoutSmall-drawerOverlay${drawerOpen ? " open" : ""}`, onClick: () => setDrawerOpen(false), "aria-hidden": "true" }), _jsx("div", { className: `LayoutSmall-drawer AppMenu-drawer${drawerOpen ? " open" : ""}`, children: _jsx(AppMenu, { ...AppMenuProps, children: menu }) })] })), children] }));
 }

package/es/layout/AppMenu.d.ts

@@ -5,4 +5,4 @@ export type AppMenuProps = Pick<React.HTMLProps<HTMLElement>, "aria-label" | "ar
     headerPrimary?: string;
     headerSecondary?: string;
 };
-export declare function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }: AppMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppMenu({ children, className, headerPrimary, headerSecondary, ...props }: AppMenuProps): React.JSX.Element;

package/es/layout/AppMenu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./AppMenu.css";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import clsx from "clsx";

package/es/layout/AppMenuSubheader.d.ts

@@ -1,4 +1,4 @@
 import "./AppMenuSubheader.css";
 import type React from "react";
 export type AppMenuSubheaderProps = React.HTMLAttributes<HTMLDivElement>;
-export declare function AppMenuSubheader({ children, className, ...props }: AppMenuSubheaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppMenuSubheader({ children, className, ...props }: AppMenuSubheaderProps): React.JSX.Element;

package/es/layout/ErrorBoundary.d.ts

@@ -21,10 +21,10 @@ export type ErrorAlertFallbackProps = {
     error: unknown;
     className?: string;
 };
-export declare function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps): import("react/jsx-runtime").JSX.Element;
-export declare function RouteErrorPage(): import("react/jsx-runtime").JSX.Element;
-export declare function AsyncErrorAlert(): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorAlertFallback({ error, className }: ErrorAlertFallbackProps): import("react").JSX.Element;
+export declare function RouteErrorPage(): import("react").JSX.Element;
+export declare function AsyncErrorAlert(): import("react").JSX.Element;
 export declare function DataObjectErrorAlert({ dataObject }: {
     dataObject: DataObject<any>;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): import("react").JSX.Element | null;
 export {};

package/es/layout/PageContainer.d.ts

@@ -4,4 +4,4 @@ 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): import("react/jsx-runtime").JSX.Element;
+export declare function PageContainer({ children, className, fullHeight, maxWidth, ...props }: PageContainerProps): React.JSX.Element;

package/es/layout/index.d.ts

@@ -30,4 +30,4 @@ export * from "./constants.js";
 export * from "./ErrorBoundary.js";
 export * from "./PageContainer.js";
 export * from "./PartnerToggle.js";
-export declare function AppLayout(props: AppLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayout(props: AppLayoutProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -15,37 +15,37 @@
   "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
   "license": "MIT",
   "peerDependencies": {
-    "@digdir/designsystemet-react": ">=1.15.0",
+    "@digdir/designsystemet-react": ">=1.18.0",
     "@mui/icons-material": ">=7.0.0",
-    "react": ">=18.2.0",
-    "react-dom": ">=18.2.0",
-    "react-error-boundary": ">=5.0.0",
-    "react-router": ">=7.0.0"
+    "react": ">=19.2.8",
+    "react-dom": ">=19.2.8",
+    "react-error-boundary": ">=6.1.2",
+    "react-router": ">=8.3.0"
   },
   "dependencies": {
     "@olenbetong/appframe-core": "2.11.10",
     "@olenbetong/appframe-data": "1.5.0",
-    "@olenbetong/appframe-react": "1.21.25",
+    "@olenbetong/appframe-react": "1.23.0",
     "react-window": "^1.8.11",
     "react-virtualized-auto-sizer": "^1.0.26",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@digdir/designsystemet-react": "1.15.0",
-    "@mui/icons-material": "9.0.1",
-    "@types/react": "19.2.15",
+    "@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.6",
-    "react-dom": "19.2.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-error-boundary": "6.1.2",
-    "react-router": "7.16.0",
-    "typescript": "6.0.3"
+    "react-router": "8.3.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 && 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"
+    "build:css": "node scripts/copyAssets.mjs"
   }
 }

package/scripts/copyAssets.mjs

@@ -0,0 +1,22 @@
+import { cpSync, mkdirSync } from "node:fs";
+
+const files = [
+	["src/AfLookup/Lookup.css", "es/AfLookup/Lookup.css"],
+	["src/AfLookup/LookupGrid.css", "es/AfLookup/LookupGrid.css"],
+	["src/AfLookup/Combobox.css", "es/AfLookup/Combobox.css"],
+	["src/layout/AppMenu.css", "es/layout/AppMenu.css"],
+	["src/layout/AppMenuItem.css", "es/layout/AppMenuItem.css"],
+	["src/layout/AppMenuSubheader.css", "es/layout/AppMenuSubheader.css"],
+	["src/layout/AppLayoutDesktop.css", "es/layout/AppLayoutDesktop.css"],
+	["src/layout/AppLayoutMobile.css", "es/layout/AppLayoutMobile.css"],
+	["src/layout/index.css", "es/layout/index.css"],
+	["src/layout/ErrorBoundary.css", "es/layout/ErrorBoundary.css"],
+	["src/layout/PageContainer.css", "es/layout/PageContainer.css"],
+];
+
+mkdirSync("es/layout", { recursive: true });
+
+for (let [src, dest] of files) {
+	cpSync(src, dest);
+	console.log(`Copied ${src} → ${dest}`);
+}

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,58 @@ 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;
+	initialSearchValue?: 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",
+		initialSearchValue,
+		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 +66,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 +100,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 +121,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)}
@@ -175,9 +142,15 @@ export function Combobox<T extends Record<string, unknown>>({
 
 	useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
 
+	useEffect(() => {
+		if (initialSearchValue !== undefined) {
+			setInputValue(initialSearchValue);
+		}
+	}, [initialSearchValue, setInputValue]);
+
 	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 +174,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 +187,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>
 	);