@olenbetong/appframe-ds 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @olenbetong/appframe-ds
 
+## 0.4.1
+
+### Patch Changes
+
+- f7f6cea: AfLookup now supports typeahead from the input field: typing opens the lookup popup and forwards the typed character to the combobox search field.
+
+## 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

package/es/AfLookup/BoundLookup.d.ts

@@ -1,9 +1,10 @@
 import type { CurrentRow, DataObject } from "@olenbetong/appframe-data";
+import { type DistributiveOmit } from "@olenbetong/appframe-react";
 import { type AfLookupProps } from "./Lookup.js";
-export interface BoundLookupProps<TBoundData extends Record<string, unknown>, TLookupData extends Record<string, unknown>> extends Omit<AfLookupProps<TLookupData>, "onChange"> {
+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-runtime").JSX.Element;
+};
+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/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/es/AfLookup/Combobox.d.ts

@@ -1,15 +1,32 @@
 import "./Combobox.css";
 import type { DataObject } from "@olenbetong/appframe-data";
-export interface ComboboxProps<T extends Record<string, unknown>> {
+import { type LookupColumn } from "@olenbetong/appframe-react";
+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 declare function Combobox<T extends Record<string, unknown>>({ nullable, dataObject, isItemSelected, uniqueIdField, renderItem: Component, onChange, onClose, }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+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

@@ -2,12 +2,16 @@ 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 { useDataWithFilter, useDebounce, useLoading } from "@olenbetong/appframe-react";
+import { 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 function Combobox({ nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", renderItem: Component, onChange, onClose, }) {
-    let id = useId();
+import { LookupGrid } from "./LookupGrid.js";
+export function Combobox(props) {
+    let { nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", initialSearchValue, 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)");
@@ -15,22 +19,12 @@ export function Combobox({ nullable, dataObject, isItemSelected, uniqueIdField =
         mq.addEventListener("change", handler);
         return () => mq.removeEventListener("change", handler);
     }, []);
-    let [currentIndex, setCurrentIndex] = useState(0);
-    let listRef = useRef(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 { id, data, loading, inputValue, setInputValue, currentIndex, currentColumn, getItemId, handleSelectItem, handleKeyDown, } = useComboboxData({
+        dataObject,
+        uniqueIdField,
+        columnCount: columns?.length ?? 1,
+        onChange,
     });
-    let query = useDebounce(inputValue, 300);
-    let loading = useLoading(dataObject);
-    let data = useDataWithFilter(dataObject, query
-        .split(/\s+/g)
-        .map((word) => `[SearchColumn] LIKE '%${word}%'`)
-        .join(" AND "));
     let wrapperRef = useRef(null);
     let [height, setHeight] = useState(0);
     useLayoutEffect(() => {
@@ -44,64 +38,15 @@ export function Combobox({ nullable, dataObject, isItemSelected, uniqueIdField =
         resizeObserver.observe(wrapperRef.current);
         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) => {
-        if (!item) {
-            return;
-        }
-        let itemId = item[uniqueIdField];
-        return `${id}-${itemId}`;
-    }, [id, uniqueIdField]);
-    function handleSelectItem(item) {
-        onChange?.(item);
-        setInputValue("");
-    }
-    function handleKeyDown(event) {
-        let newIndex = 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());
     let getItemSize = (index) => sizeMap.current.get(index) ?? 56;
-    let setSize = (index, size) => {
+    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));
         }
-    };
-    // biome-ignore lint: nested component defined for performance reasons inside render
+    }, []);
     let Row = ({ index, style: { height, ...style } }) => {
         let rowRef = useRef(null);
         useLayoutEffect(() => {
@@ -112,13 +57,20 @@ export function Combobox({ nullable, dataObject, isItemSelected, uniqueIdField =
         let item = data[index];
         let itemId = getItemId(item);
         let active = index === currentIndex;
-        return (_jsx(Component, { className: clsx("ObCombobox-listItem", active && "active", isItemSelected?.(item) && "selected"), "aria-selected": active, onClick: () => handleSelectItem(item), item: item, style: {
+        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]);
+    useEffect(() => {
+        if (initialSearchValue !== undefined) {
+            setInputValue(initialSearchValue);
+        }
+    }, [initialSearchValue, setInputValue]);
     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", label: 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 && (_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 }) }))] })] }));
+                        }, 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

@@ -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;
 

package/es/AfLookup/Lookup.d.ts

@@ -1,7 +1,8 @@
 import "./Lookup.css";
 import { type TextfieldProps } from "@digdir/designsystemet-react";
+import { type DistributiveOmit } from "@olenbetong/appframe-react";
 import { 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.
      */
@@ -14,16 +15,16 @@ 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 declare function useLookup<T extends Record<string, unknown>>({ getAnchorElement, slotProps, ...props }: LookupProps<T>): {
     open: boolean;
-    openDialog: () => void;
+    openDialog: (searchValue?: string) => void;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onChange: (item: T | null) => void;
     dialogRef: import("react").RefObject<HTMLDialogElement | null>;
@@ -31,4 +32,4 @@ export declare function useLookup<T extends Record<string, unknown>>({ getAnchor
     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-runtime").JSX.Element;
+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

@@ -4,158 +4,56 @@ 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 { useCallback, useEffect, useId, useRef, useState } from "react";
-import { createPortal, flushSync } from "react-dom";
+import { useRef } from "react";
+import { createPortal } from "react-dom";
 import { Combobox } from "./Combobox.js";
 export function useLookup({ getAnchorElement, slotProps, ...props }) {
-    let [open, setOpen] = useState(false);
-    let anchorName = `--anchor-${CSS.escape(useId())}`;
-    let dialogRef = useRef(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('input[type="search"]')?.focus();
-        }
-    }
-    function handleKeyDown(event) {
-        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]",
+    });
+    let initialSearchValueRef = useRef(undefined);
     function handleChange(item) {
         props.onChange?.(item);
         dialogRef.current?.close();
     }
-    useEffect(() => {
-        if (!open) {
-            resetManualAnchor();
-            return;
-        }
-        let frame = requestAnimationFrame(() => {
-            updateManualAnchor();
-        });
-        updateManualAnchor();
-        let cleanupTargets = [];
-        let listener = () => updateManualAnchor();
-        cleanupTargets.push([window, "resize", listener, undefined]);
-        cleanupTargets.push([window, "scroll", listener, true]);
-        let anchorElement = getAnchorElement?.() ?? null;
-        let scrollParent = anchorElement?.closest("[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]);
+    function handleOpenDialog(searchValue) {
+        initialSearchValueRef.current = searchValue;
+        openDialog();
+    }
     return {
         open,
-        openDialog: handleOpen,
-        onKeyDown: handleKeyDown,
+        openDialog: handleOpenDialog,
+        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),
+        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, initialSearchValue: initialSearchValueRef.current, 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);
-    return (_jsxs("div", { style: { anchorName }, children: [_jsxs("div", { style: { position: "relative", display: fullWidth ? "block" : "inline-block" }, 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", { style: {
-                            position: "absolute",
-                            right: 0,
-                            top: "50%",
-                            transform: "translateY(-50%)",
-                            display: "flex",
-                            alignItems: "center",
-                        }, children: [props.nullable && value && props.onChange && (_jsx(Button, { icon: true, variant: "tertiary", "data-size": "sm", "aria-label": getLocalizedString("Clear"), onKeyDown: (evt) => evt.stopPropagation(), onClick: (evt) => {
+    let hasClear = !!(props.nullable && value && props.onChange);
+    function handleInputKeyDown(event) {
+        let hasModifier = event.ctrlKey || event.altKey || event.metaKey;
+        let isTypeaheadKey = event.key.length === 1 && !hasModifier && !event.nativeEvent.isComposing;
+        if (isTypeaheadKey) {
+            event.preventDefault();
+            event.stopPropagation();
+            openDialog(event.key);
+            return;
+        }
+        onKeyDown(event);
+    }
+    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, onClick: () => openDialog(), onKeyDown: handleInputKeyDown, 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] }));
+                                }, 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;