@olenbetong/appframe-ds 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

package/es/AfLookup/Combobox.d.ts

@@ -5,6 +5,7 @@ export interface ComboboxBaseProps<T extends Record<string, unknown>> {
     nullable?: boolean;
     dataObject: DataObject<T>;
     uniqueIdField?: string;
+    initialSearchValue?: string;
     isItemSelected?: (item: T) => boolean;
     onChange?: (item: T | null) => void;
     value?: T;

package/es/AfLookup/Combobox.js

@@ -8,7 +8,7 @@ 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 { nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", initialSearchValue, onChange, onClose, } = props;
     let isGrid = props.variant === "grid";
     let columns = isGrid ? props.columns : undefined;
     let listRef = useRef(null);
@@ -64,6 +64,11 @@ export function Combobox(props) {
             }, 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", "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 &&

package/es/AfLookup/Lookup.d.ts

@@ -24,7 +24,7 @@ export type LookupProps<T extends Record<string, unknown>> = DistributiveOmit<Co
 };
 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>;

package/es/AfLookup/Lookup.js

@@ -6,6 +6,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import { getLocalizedString } from "@olenbetong/appframe-core";
 import { useLookupState } from "@olenbetong/appframe-react";
 import clsx from "clsx";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
 import { Combobox } from "./Combobox.js";
 export function useLookup({ getAnchorElement, slotProps, ...props }) {
@@ -13,30 +14,46 @@ export function useLookup({ getAnchorElement, slotProps, ...props }) {
         getAnchorElement,
         scrollParentSelector: "[data-virtualized-scroller]",
     });
+    let initialSearchValueRef = useRef(undefined);
     function handleChange(item) {
         props.onChange?.(item);
         dialogRef.current?.close();
     }
+    function handleOpenDialog(searchValue) {
+        initialSearchValueRef.current = searchValue;
+        openDialog();
+    }
     return {
         open,
-        openDialog,
+        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);
     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, 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) => {
+                }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -17,15 +17,15 @@
   "peerDependencies": {
     "@digdir/designsystemet-react": ">=1.18.0",
     "@mui/icons-material": ">=7.0.0",
-    "react": ">=19.2.7",
-    "react-dom": ">=19.2.7",
-    "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.22.0",
+    "@olenbetong/appframe-react": "1.23.0",
     "react-window": "^1.8.11",
     "react-virtualized-auto-sizer": "^1.0.26",
     "clsx": "^2.1.1"
@@ -36,16 +36,16 @@
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@types/react-window": "^1.8.8",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-error-boundary": "6.1.2",
-    "react-router": "7.17.0",
+    "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 && cp src/AfLookup/LookupGrid.css es/AfLookup/LookupGrid.css && mkdir -p es/layout && cp src/layout/AppMenu.css es/layout/AppMenu.css && cp src/layout/AppMenuItem.css es/layout/AppMenuItem.css && cp src/layout/AppMenuSubheader.css es/layout/AppMenuSubheader.css && cp src/layout/AppLayoutDesktop.css es/layout/AppLayoutDesktop.css && cp src/layout/AppLayoutMobile.css es/layout/AppLayoutMobile.css && cp src/layout/index.css es/layout/index.css && cp src/layout/ErrorBoundary.css es/layout/ErrorBoundary.css && cp src/layout/PageContainer.css es/layout/PageContainer.css"
+    "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/Combobox.tsx

@@ -15,6 +15,7 @@ export interface ComboboxBaseProps<T extends Record<string, unknown>> {
 	nullable?: boolean;
 	dataObject: DataObject<T>;
 	uniqueIdField?: string;
+	initialSearchValue?: string;
 	isItemSelected?: (item: T) => boolean;
 	onChange?: (item: T | null) => void;
 	value?: T;
@@ -41,7 +42,15 @@ export interface ComboboxGridProps<T extends Record<string, unknown>> extends Co
 export type ComboboxProps<T extends Record<string, unknown>> = ComboboxListProps<T> | ComboboxGridProps<T>;
 
 export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps<T>) {
-	let { nullable, dataObject, isItemSelected, uniqueIdField = "PrimKey", onChange, onClose } = props;
+	let {
+		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);
@@ -133,6 +142,12 @@ export function Combobox<T extends Record<string, unknown>>(props: ComboboxProps
 
 	useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
 
+	useEffect(() => {
+		if (initialSearchValue !== undefined) {
+			setInputValue(initialSearchValue);
+		}
+	}, [initialSearchValue, setInputValue]);
+
 	return (
 		// 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

package/src/AfLookup/Lookup.tsx

@@ -7,6 +7,7 @@ import { getLocalizedString } from "@olenbetong/appframe-core";
 import { type DistributiveOmit, useLookupState } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
+import { useRef } from "react";
 import { createPortal } from "react-dom";
 
 import { Combobox, type ComboboxProps } from "./Combobox.js";
@@ -42,15 +43,21 @@ export function useLookup<T extends Record<string, unknown>>({
 		getAnchorElement,
 		scrollParentSelector: "[data-virtualized-scroller]",
 	});
+	let initialSearchValueRef = useRef<string | undefined>(undefined);
 
 	function handleChange(item: T | null) {
 		props.onChange?.(item);
 		dialogRef.current?.close();
 	}
 
+	function handleOpenDialog(searchValue?: string) {
+		initialSearchValueRef.current = searchValue;
+		openDialog();
+	}
+
 	return {
 		open,
-		openDialog,
+		openDialog: handleOpenDialog,
 		onKeyDown,
 		onChange: handleChange,
 		dialogRef,
@@ -63,7 +70,14 @@ export function useLookup<T extends Record<string, unknown>>({
 				onKeyDown={(evt) => evt.stopPropagation()}
 				style={{ positionAnchor: anchorName, ...slotProps?.dialog?.style } as React.CSSProperties}
 			>
-				{open && <Combobox {...props} onClose={() => dialogRef.current?.close()} onChange={handleChange} />}
+				{open && (
+					<Combobox
+						{...props}
+						initialSearchValue={initialSearchValueRef.current}
+						onClose={() => dialogRef.current?.close()}
+						onChange={handleChange}
+					/>
+				)}
 			</dialog>,
 			document.body,
 			inputId,
@@ -82,6 +96,18 @@ export function AfLookup<T extends Record<string, unknown>>({
 
 	let hasClear = !!(props.nullable && value && props.onChange);
 
+	function handleInputKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		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 (
 		<div style={{ anchorName } as React.CSSProperties}>
 			<div
@@ -97,9 +123,8 @@ export function AfLookup<T extends Record<string, unknown>>({
 					id={inputId}
 					value={value ?? ""}
 					label={label}
-					readOnly
-					onClick={openDialog}
-					onKeyDown={onKeyDown}
+					onClick={() => openDialog()}
+					onKeyDown={handleInputKeyDown}
 					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
 					{...(slotProps?.textField as any)}
 					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
@@ -121,7 +146,13 @@ export function AfLookup<T extends Record<string, unknown>>({
 							<ClearIcon />
 						</Button>
 					)}
-					<Button icon variant="tertiary" data-size="sm" aria-label={getLocalizedString("Search")} onClick={openDialog}>
+					<Button
+						icon
+						variant="tertiary"
+						data-size="sm"
+						aria-label={getLocalizedString("Search")}
+						onClick={() => openDialog()}
+					>
 						<SearchIcon />
 					</Button>
 				</div>