@olenbetong/appframe-ds 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @olenbetong/appframe-ds
 
+## 0.4.0
+
+### Minor Changes
+
+- 46177d7: Add grid variant support to AfLookup and extract shared lookup logic.
+  - `@olenbetong/appframe-react`: new `useLookupState` and `useComboboxData` hooks containing the shared non-UI lookup logic (dialog state, anchor positioning, search filtering, keyboard navigation), plus the `LookupColumn` and `DistributiveOmit` types.
+  - `@olenbetong/appframe-mui` / `@olenbetong/appframe-ds`: the lookup popup now supports `variant="grid"` with a `columns` definition (`field`, `headerName`, `width`, `renderCell`). Grid keyboard navigation is cell-by-cell (tracks current row and column) and works while focus is in the search field.
+  - `@olenbetong/appframe-ds`: new `AfLookupEdit` component — an editable lookup input where the popup selects a single value (the item's `lookupField`) instead of an entire row, so typing and selecting behave the same. The existing `AfLookupEdit` in `@olenbetong/appframe-mui` now shares the same lookup state logic and supports the grid variant.
+
+  Fixes:
+  - The lookup dialog no longer scrolls its own content (`overflow: hidden` on `.ObLookup-dialog`), and the popup list/grid now grows and shrinks vertically when the dialog is resized (the list wrapper previously had a fixed height).
+  - The search field in the `appframe-ds` lookup no longer renders a label above the input; it uses an accessible label and placeholder instead.
+
+## 0.3.0
+
+### Minor Changes
+
+- 8487660: Add `AppLayout`, `AppMenu`, `AppMenuItem`, `AppMenuItemExternalLink`, `AppMenuItemButton`, `AppMenuSubheader` layout components — ported from `appframe-mui` with all MUI dependencies removed and replaced with plain HTML + Designsystemet CSS tokens.
+
 ## 0.2.0
 
 ### Minor Changes

package/es/AfLookup/BoundLookup.d.ts

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

package/es/AfLookup/BoundLookup.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
+import { AfLookup } from "./Lookup.js";
+export function BoundLookup({ dataObject, displayField, getChanges, getDisplayValue, ...props }) {
+    let boundDataObject = useDataObject();
+    let row = useCurrentRow(boundDataObject);
+    function handleChange(item) {
+        let changes = getChanges(item);
+        for (let key in changes) {
+            let newValue = changes[key];
+            boundDataObject.currentRow(key, newValue);
+        }
+    }
+    let displayValue = getDisplayValue ? getDisplayValue(row) : displayField ? String(row[displayField] ?? "") : "";
+    return _jsx(AfLookup, { dataObject: dataObject, value: displayValue, onChange: handleChange, ...props });
+}

package/es/AfLookup/Combobox.css

@@ -0,0 +1,78 @@
+.ObCombobox-root {
+	height: 100%;
+	display: grid;
+	grid-template-rows: min-content auto 1fr;
+	gap: 0.5rem;
+
+	overscroll-behavior: contain;
+}
+
+.ObCombobox-actions {
+	display: flex;
+	justify-content: space-between;
+}
+
+.ObCombobox-listWrap {
+	overflow: hidden;
+	min-height: 0;
+	border: 1px solid rgb(0 0 0 / 0.12);
+	border-radius: 0.25rem;
+	background-color: white;
+}
+
+.ObCombobox-list {
+	border: 1px solid rgb(0 0 0 / 0.06);
+	height: 100%;
+	overflow-y: hidden;
+	overscroll-behavior: contain;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ObCombobox-input {
+	background-color: white;
+}
+
+.ObCombobox-listItem {
+	--active-color: oklch(from var(--brand-secondary, #999) l c h / 50%);
+	cursor: pointer;
+
+	&.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);
+	}
+}
+
+.ObCombobox-progress {
+	position: relative;
+	height: 4px;
+	overflow: hidden;
+	background-color: rgb(0 0 0 / 0.08);
+}
+
+.ObCombobox-progress-bar {
+	position: absolute;
+	top: 0;
+	left: -100%;
+	height: 100%;
+	width: 50%;
+	background-color: var(--ds-color-accent-base-default, #0062ba);
+	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
+}
+
+@keyframes ObCombobox-progress-anim {
+	0% {
+		left: -100%;
+	}
+	100% {
+		left: 200%;
+	}
+}

package/es/AfLookup/Combobox.d.ts

@@ -0,0 +1,31 @@
+import "./Combobox.css";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { type LookupColumn } from "@olenbetong/appframe-react";
+export interface ComboboxBaseProps<T extends Record<string, unknown>> {
+    nullable?: boolean;
+    dataObject: DataObject<T>;
+    uniqueIdField?: string;
+    isItemSelected?: (item: T) => boolean;
+    onChange?: (item: T | null) => void;
+    value?: T;
+    onClose?: () => void;
+}
+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 declare function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>): import("react").JSX.Element;

package/es/AfLookup/Combobox.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Combobox.css";
+import { Button, Textfield } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useComboboxData } from "@olenbetong/appframe-react";
+import clsx from "clsx";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { VariableSizeList as VirtualList } from "react-window";
+import { LookupGrid } from "./LookupGrid.js";
+export function Combobox(props) {
+    let { nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", onChange, onClose } = props;
+    let isGrid = props.variant === "grid";
+    let columns = isGrid ? props.columns : undefined;
+    let listRef = useRef(null);
+    let [isDesktop, setIsDesktop] = useState(() => typeof window !== "undefined" && window.matchMedia("(width >= 768px) and (pointer: fine)").matches);
+    useEffect(() => {
+        let mq = window.matchMedia("(width >= 768px) and (pointer: fine)");
+        let handler = (e) => setIsDesktop(e.matches);
+        mq.addEventListener("change", handler);
+        return () => mq.removeEventListener("change", handler);
+    }, []);
+    let { id, data, loading, inputValue, setInputValue, currentIndex, currentColumn, getItemId, handleSelectItem, handleKeyDown, } = useComboboxData({
+        dataObject,
+        uniqueIdField,
+        columnCount: columns?.length ?? 1,
+        onChange,
+    });
+    let wrapperRef = useRef(null);
+    let [height, setHeight] = useState(0);
+    useLayoutEffect(() => {
+        if (!wrapperRef.current)
+            return;
+        let resizeObserver = new ResizeObserver(() => {
+            let newHeight = wrapperRef.current.offsetHeight;
+            if (newHeight > 0)
+                setHeight(newHeight);
+        });
+        resizeObserver.observe(wrapperRef.current);
+        return () => resizeObserver.disconnect();
+    }, []);
+    let sizeMap = useRef(new Map());
+    let getItemSize = (index) => sizeMap.current.get(index) ?? 56;
+    let setSize = useCallback((index, size) => {
+        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));
+        }
+    }, []);
+    let Row = ({ index, style: { height, ...style } }) => {
+        let rowRef = useRef(null);
+        useLayoutEffect(() => {
+            if (!rowRef.current)
+                return;
+            setSize(index, rowRef.current.offsetHeight);
+        }, [index]);
+        let item = data[index];
+        let itemId = getItemId(item);
+        let active = index === currentIndex;
+        let ItemComponent = props.renderItem;
+        return (_jsx(ItemComponent, { className: clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected"), "aria-selected": active, onClick: () => handleSelectItem(item), item: item, style: {
+                ...style,
+                padding: isDesktop ? "0 8px" : "8px",
+            }, ref: rowRef, id: itemId }, itemId));
+    };
+    useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
+    return (_jsxs("div", { className: "ObCombobox-root", id: id, onClick: (evt) => evt.stopPropagation(), children: [_jsxs("div", { className: "ObCombobox-actions", children: [nullable && (_jsx(Button, { className: "ObCombobox-clear", "data-size": isDesktop ? "sm" : "md", variant: "tertiary", onClick: () => {
+                            onChange?.(null);
+                        }, children: getLocalizedString("Clear") })), onClose && (_jsx(Button, { "data-size": isDesktop ? "sm" : "md", variant: "tertiary", className: "ObCombobox-close", onClick: onClose, children: getLocalizedString("Close") }))] }), _jsx(Textfield, { type: "search", className: "ObCombobox-input", "aria-label": getLocalizedString("Search"), placeholder: getLocalizedString("Search"), onKeyDown: handleKeyDown, "aria-activedescendant": getItemId(data[currentIndex]) ?? "", value: inputValue, onChange: (event) => setInputValue(event.target.value) }), _jsxs("div", { className: "ObCombobox-listWrap", ref: wrapperRef, children: [loading && (_jsx("div", { className: "ObCombobox-progress", children: _jsx("div", { className: "ObCombobox-progress-bar" }) })), height > 0 &&
+                        (columns ? (_jsx(LookupGrid, { columns: columns, data: data, height: height, currentIndex: currentIndex, currentColumn: currentColumn, getItemId: getItemId, isItemSelected: isItemSelected, onSelectItem: handleSelectItem })) : (_jsx("div", { className: "ObCombobox-list", role: "listbox", children: _jsx(VirtualList, { ref: listRef, height: height, width: "100%", itemCount: data.length, itemSize: getItemSize, overscanCount: 5, children: Row }) })))] })] }));
+}

package/es/AfLookup/Lookup.css

@@ -0,0 +1,125 @@
+.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;
+
+	transition:
+		display 0.2s allow-discrete,
+		transform 0.2s ease-out,
+		scale 0.2s ease-out,
+		opacity 0.2s ease-out;
+
+	&::backdrop {
+		opacity: 0;
+		background: rgb(0 0 0 / 0.2);
+		transition:
+			display 0.2s allow-discrete,
+			opacity 0.2s ease-out;
+	}
+
+	&[open]::backdrop {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@media (width < 768px) {
+		inset: 10vh 0.5rem 0;
+
+		border-radius: 1rem 1rem 0 0;
+		height: 90vh;
+		width: calc(100vw - 1rem);
+		max-width: 100vw;
+		transform: translateY(100%);
+		z-index: 1500;
+
+		opacity: 0;
+
+		&[open] {
+			transform: translateY(0);
+			opacity: 1;
+
+			@starting-style {
+				transform: translateY(100%);
+				opacity: 0;
+			}
+		}
+	}
+
+	@media (width >= 768px) {
+		inset-block-start: 50%;
+		inset-inline-start: 50%;
+		translate: -50% -50%;
+		scale: 1 0;
+		opacity: 0;
+
+		border-radius: 0.25rem;
+
+		height: clamp(300px, 80vh, 500px);
+		min-width: 320px;
+		width: var(--default-width, 400px);
+
+		&[open] {
+			scale: 1;
+			opacity: 1;
+
+			@starting-style {
+				scale: 1 0;
+				opacity: 0;
+			}
+		}
+	}
+
+	@supports (inset-block-start: anchor(bottom)) {
+		@media (width < 768px) or (pointer: coarse) {
+			anchor-name: unset !important;
+		}
+
+		@media screen and (width >= 768px) and (pointer: fine) {
+			inset-block-start: anchor(bottom);
+			inset-block-end: unset;
+
+			inset-inline-start: anchor(left);
+			inset-inline-end: unset;
+
+			translate: unset;
+			transform-origin: top left;
+
+			resize: both;
+		}
+	}
+
+	&[data-anchor="manual"] {
+		inset: unset;
+		position: fixed;
+		inset-inline-start: var(--lookup-anchor-inline-start, 50%);
+		inset-block-start: var(--lookup-anchor-block-start, 50%);
+		translate: unset;
+		transform: none;
+	}
+}

package/es/AfLookup/Lookup.d.ts

@@ -0,0 +1,35 @@
+import "./Lookup.css";
+import { type TextfieldProps } from "@digdir/designsystemet-react";
+import { type DistributiveOmit } from "@olenbetong/appframe-react";
+import { type ComboboxProps } from "./Combobox.js";
+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.
+     */
+    editable?: boolean;
+    fullWidth?: boolean;
+    label?: string;
+    value?: string | null;
+    onChange?: (item: T | null) => void;
+    slotProps?: {
+        dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+        textField?: Partial<TextfieldProps>;
+    };
+};
+export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<ComboboxProps<T>, "value"> & {
+    slotProps?: {
+        dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+    };
+    getAnchorElement?: () => Element | null;
+};
+export declare function useLookup<T extends Record<string, unknown>>({ getAnchorElement, slotProps, ...props }: LookupProps<T>): {
+    open: boolean;
+    openDialog: () => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    onChange: (item: T | null) => void;
+    dialogRef: import("react").RefObject<HTMLDialogElement | null>;
+    anchorName: string;
+    inputId: string;
+    dialog: import("react").ReactPortal;
+};
+export declare function AfLookup<T extends Record<string, unknown>>({ fullWidth, label, slotProps, value, ...props }: AfLookupProps<T>): import("react").JSX.Element;

package/es/AfLookup/Lookup.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Lookup.css";
+import { Button, Textfield } 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 { useLookupState } from "@olenbetong/appframe-react";
+import clsx from "clsx";
+import { createPortal } from "react-dom";
+import { Combobox } from "./Combobox.js";
+export function useLookup({ getAnchorElement, slotProps, ...props }) {
+    let { open, openDialog, onKeyDown, dialogRef, anchorName, inputId } = useLookupState({
+        getAnchorElement,
+        scrollParentSelector: "[data-virtualized-scroller]",
+    });
+    function handleChange(item) {
+        props.onChange?.(item);
+        dialogRef.current?.close();
+    }
+    return {
+        open,
+        openDialog,
+        onKeyDown,
+        onChange: handleChange,
+        dialogRef,
+        anchorName,
+        inputId,
+        dialog: createPortal(_jsx("dialog", { ref: dialogRef, className: clsx("ObLookup-dialog", slotProps?.dialog?.className), onKeyDown: (evt) => evt.stopPropagation(), style: { positionAnchor: anchorName, ...slotProps?.dialog?.style }, children: open && _jsx(Combobox, { ...props, onClose: () => dialogRef.current?.close(), onChange: handleChange }) }), document.body, inputId),
+    };
+}
+export function AfLookup({ fullWidth = false, label, slotProps, value, ...props }) {
+    let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup(props);
+    let hasClear = !!(props.nullable && value && props.onChange);
+    return (_jsxs("div", { style: { anchorName }, children: [_jsxs("div", { className: "ObLookup-inputWrap", style: {
+                    display: fullWidth ? "block" : "inline-block",
+                    "--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+                }, children: [_jsx(Textfield, { id: inputId, value: value ?? "", label: label, readOnly: true, onClick: openDialog, onKeyDown: onKeyDown, className: clsx(slotProps?.textField?.className, "ObLookup-input"), ...slotProps?.textField, style: { width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style } }), _jsxs("div", { className: "ObLookup-buttons", children: [hasClear && (_jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Clear"), onKeyDown: (evt) => evt.stopPropagation(), onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    props.onChange?.(null);
+                                    document.getElementById(inputId)?.focus();
+                                }, children: _jsx(ClearIcon, {}) })), _jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Search"), onClick: openDialog, children: _jsx(SearchIcon, {}) })] })] }), dialog] }));
+}

package/es/AfLookup/LookupEdit.d.ts

@@ -0,0 +1,21 @@
+import "./Lookup.css";
+import { type TextfieldProps } from "@digdir/designsystemet-react";
+import type { DistributiveOmit } from "@olenbetong/appframe-react";
+import type React from "react";
+import type { ComboboxProps } from "./Combobox.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 declare function AfLookupEdit<T extends Record<string, unknown>>({ fullWidth, label, onChange, slotProps, nullable, lookupField, value, ...props }: AfLookupEditProps<T>): React.JSX.Element;

package/es/AfLookup/LookupEdit.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./Lookup.css";
+import { Button, Textfield } 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 clsx from "clsx";
+import { useLookup } from "./Lookup.js";
+export function AfLookupEdit({ fullWidth = false, label, onChange, slotProps, nullable, lookupField, value, ...props }) {
+    let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup({
+        ...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) {
+        let input = document.getElementById(inputId);
+        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) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+            openDialog();
+        }
+        else {
+            onKeyDown(event);
+        }
+    }
+    let hasClear = !!(nullable && value && onChange);
+    return (_jsxs("div", { style: { anchorName }, children: [_jsxs("div", { className: "ObLookup-inputWrap", style: {
+                    display: fullWidth ? "block" : "inline-block",
+                    "--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+                }, children: [_jsx(Textfield, { id: inputId, value: value ?? "", label: label, onChange: onChange, onKeyDown: handleKeyDown, className: clsx(slotProps?.textField?.className, "ObLookup-input"), ...slotProps?.textField, style: { width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style } }), _jsxs("div", { className: "ObLookup-buttons", children: [hasClear && (_jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Clear"), onKeyDown: (evt) => evt.stopPropagation(), onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    applyValue(null);
+                                    document.getElementById(inputId)?.focus();
+                                }, children: _jsx(ClearIcon, {}) })), _jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Search"), onClick: (evt) => {
+                                    evt.stopPropagation();
+                                    openDialog();
+                                }, children: _jsx(SearchIcon, {}) })] })] }), dialog] }));
+}

package/es/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/es/AfLookup/LookupGrid.d.ts

@@ -0,0 +1,13 @@
+import "./LookupGrid.css";
+import type { LookupColumn } from "@olenbetong/appframe-react";
+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;
+}
+export declare function LookupGrid<T extends Record<string, unknown>>({ columns, data, height, currentIndex, currentColumn, getItemId, isItemSelected, onSelectItem, }: LookupGridProps<T>): import("react").JSX.Element;

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

@@ -0,0 +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

@@ -0,0 +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/BoundCheckbox.d.ts

@@ -0,0 +1,9 @@
+import { type CheckboxProps } from "@digdir/designsystemet-react";
+export type BoundCheckboxProps = Omit<CheckboxProps, "onChange" | "onKeyDown"> & {
+    field: string;
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export declare const BoundCheckbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "onChange" | "onKeyDown"> & {
+    field: string;
+    onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/es/binding/BoundCheckbox.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+export const BoundCheckbox = forwardRef(function BoundCheckbox({ field, onChange: onChangeProp, checked: _checked, ...props }, ref) {
+    let { value, setValue, onKeyDown } = useField(field);
+    return (_jsx(Checkbox, { checked: value ?? false, onChange: (evt) => {
+            onChangeProp?.(evt);
+            if (!evt.defaultPrevented) {
+                setValue(evt.target.checked);
+            }
+        }, onKeyDown: (evt) => onKeyDown(evt), ref: ref, name: field, ...props }));
+});

package/es/binding/BoundDatePicker.d.ts

@@ -0,0 +1,7 @@
+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" | "onKeyDown" | "type" | "value"> & {
+    field: string;
+} & import("react").RefAttributes<HTMLInputElement>>;