@olenbetong/appframe-ds 0.2.0

package/src/AfLookup/Lookup.tsx

@@ -0,0 +1,264 @@
+import "./Lookup.css";
+
+import { Button, Textfield, type TextfieldProps } 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 { useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal, flushSync } from "react-dom";
+
+import { Combobox, type ComboboxProps } from "./Combobox.js";
+
+export interface AfLookupProps<T extends Record<string, unknown>> extends Omit<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 interface LookupProps<T extends Record<string, unknown>> extends Omit<ComboboxProps<T>, "value"> {
+	slotProps?: {
+		dialog?: Partial<React.HTMLProps<HTMLDialogElement>>;
+	};
+	getAnchorElement?: () => Element | null;
+}
+
+export function useLookup<T extends Record<string, unknown>>({
+	getAnchorElement,
+	slotProps,
+	...props
+}: LookupProps<T>) {
+	let [open, setOpen] = useState(false);
+	let anchorName = `--anchor-${CSS.escape(useId())}`;
+	let dialogRef = useRef<HTMLDialogElement>(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<HTMLInputElement>('input[type="search"]')?.focus();
+		}
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+		if (event.key === "ArrowDown" || event.key === "F4") {
+			event.preventDefault();
+			event.stopPropagation();
+			handleOpen();
+		}
+	}
+
+	let handleClose = useCallback(() => {
+		setOpen(false);
+		document.getElementById(inputId)?.focus();
+	}, [inputId]);
+
+	function handleChange(item: T | null) {
+		props.onChange?.(item);
+		dialogRef.current?.close();
+	}
+
+	useEffect(() => {
+		if (!open) {
+			resetManualAnchor();
+			return;
+		}
+		let frame = requestAnimationFrame(() => {
+			updateManualAnchor();
+		});
+		updateManualAnchor();
+		let cleanupTargets: Array<
+			[EventTarget, string, EventListenerOrEventListenerObject, AddEventListenerOptions | boolean | undefined]
+		> = [];
+		let listener = () => updateManualAnchor();
+		cleanupTargets.push([window, "resize", listener, undefined]);
+		cleanupTargets.push([window, "scroll", listener, true]);
+		let anchorElement = getAnchorElement?.() ?? null;
+		let scrollParent = anchorElement?.closest<HTMLElement>("[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]);
+
+	return {
+		open,
+		openDialog: handleOpen,
+		onKeyDown: handleKeyDown,
+		onChange: handleChange,
+		dialogRef,
+		anchorName,
+		inputId,
+		dialog: createPortal(
+			<dialog
+				ref={dialogRef}
+				className={clsx("ObLookup-dialog", slotProps?.dialog?.className)}
+				onKeyDown={(evt) => evt.stopPropagation()}
+				style={{ positionAnchor: anchorName, ...slotProps?.dialog?.style } as React.CSSProperties}
+			>
+				{open && <Combobox {...props} onClose={() => dialogRef.current?.close()} onChange={handleChange} />}
+			</dialog>,
+			document.body,
+			inputId,
+		),
+	};
+}
+
+export function AfLookup<T extends Record<string, unknown>>({
+	fullWidth = false,
+	label,
+	slotProps,
+	value,
+	...props
+}: AfLookupProps<T>) {
+	let { inputId, open: _open, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>(props);
+
+	return (
+		<div style={{ anchorName } as React.CSSProperties}>
+			<div style={{ position: "relative", display: fullWidth ? "block" : "inline-block" }}>
+				<Textfield
+					id={inputId}
+					value={value ?? ""}
+					label={label}
+					readOnly
+					onClick={openDialog}
+					onKeyDown={onKeyDown}
+					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
+					{...(slotProps?.textField as any)}
+					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
+				/>
+				<div
+					style={{
+						position: "absolute",
+						right: 0,
+						top: "50%",
+						transform: "translateY(-50%)",
+						display: "flex",
+						alignItems: "center",
+					}}
+				>
+					{props.nullable && value && props.onChange && (
+						<Button
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-label={getLocalizedString("Clear")}
+							onKeyDown={(evt) => evt.stopPropagation()}
+							onClick={(evt) => {
+								evt.stopPropagation();
+								props.onChange?.(null);
+								document.getElementById(inputId)?.focus();
+							}}
+						>
+							<ClearIcon />
+						</Button>
+					)}
+					<Button icon variant="tertiary" data-size="sm" aria-label={getLocalizedString("Search")} onClick={openDialog}>
+						<SearchIcon />
+					</Button>
+				</div>
+			</div>
+			{dialog}
+		</div>
+	);
+}

package/src/AfLookup/index.ts

@@ -0,0 +1,3 @@
+export * from "./BoundLookup.js";
+export * from "./Combobox.js";
+export * from "./Lookup.js";

package/src/binding/BoundCheckbox.tsx

@@ -0,0 +1,31 @@
+import { Checkbox, type CheckboxProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type BoundCheckboxProps = Omit<CheckboxProps, "onChange" | "onKeyDown"> & {
+	field: string;
+	onChange?: (evt: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const BoundCheckbox = forwardRef<HTMLInputElement, BoundCheckboxProps>(function BoundCheckbox(
+	{ field, onChange: onChangeProp, checked: _checked, ...props },
+	ref,
+) {
+	let { value, setValue, onKeyDown } = useField<any, any>(field);
+
+	return (
+		<Checkbox
+			checked={value ?? false}
+			onChange={(evt) => {
+				onChangeProp?.(evt);
+				if (!evt.defaultPrevented) {
+					setValue(evt.target.checked);
+				}
+			}}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+			ref={ref}
+			name={field}
+			{...(props as any)}
+		/>
+	);
+});

package/src/binding/BoundDatePicker.tsx

@@ -0,0 +1,32 @@
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type BoundDatePickerProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown" | "type"> & {
+	field: string;
+};
+
+export const BoundDatePicker = forwardRef<HTMLInputElement, BoundDatePickerProps>(function BoundDatePicker(
+	{ field, ...props },
+	ref,
+) {
+	let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+	let inputValue = value;
+	if (value instanceof Date) {
+		inputValue = value.toISOString().split("T")[0];
+	}
+
+	return (
+		<Textfield
+			type="date"
+			name={field}
+			error={error ?? undefined}
+			{...(props as any)}
+			value={inputValue ?? ""}
+			onChange={(evt) => onChange(evt as any)}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+			ref={ref}
+		/>
+	);
+});

package/src/binding/BoundDateTimePicker.tsx

@@ -0,0 +1,37 @@
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type BoundDateTimePickerProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown" | "type"> & {
+	field: string;
+};
+
+export const BoundDateTimePicker = forwardRef<HTMLInputElement, BoundDateTimePickerProps>(function BoundDateTimePicker(
+	{ field, ...props },
+	ref,
+) {
+	let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+	let inputValue = value;
+	if (value instanceof Date) {
+		inputValue = value.toISOString().replace("Z", "");
+	}
+
+	return (
+		<Textfield
+			type="datetime-local"
+			name={field}
+			error={error ?? undefined}
+			{...(props as any)}
+			value={inputValue ?? ""}
+			onChange={(evt) => {
+				onChange(
+					evt as any,
+					(evt.target as HTMLInputElement).value ? `${(evt.target as HTMLInputElement).value}Z` : null,
+				);
+			}}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+			ref={ref}
+		/>
+	);
+});

package/src/binding/BoundInput.tsx

@@ -0,0 +1,26 @@
+import { Input, type InputProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+
+export type BoundInputProps = Omit<InputProps, "onChange" | "onKeyDown" | "onBlur"> & {
+	field: string;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export function BoundInput({ field, onChange: onChangeProp, ...props }: BoundInputProps) {
+	let { value, onChange, onKeyDown } = useField<any, any>(field);
+
+	return (
+		<Input
+			name={field}
+			{...props}
+			value={value ?? ""}
+			onChange={(event) => {
+				onChangeProp?.(event as any);
+				if (!event.defaultPrevented) {
+					onChange(event as any);
+				}
+			}}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+		/>
+	);
+}

package/src/binding/BoundNumericTextField.tsx

@@ -0,0 +1,102 @@
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { getLocalizedString, localize } from "@olenbetong/appframe-core";
+import { useField } from "@olenbetong/appframe-react";
+import { useEffect, useState } from "react";
+
+/**
+ * A Designsystemet `Textfield` bound to an Appframe data source field via `useField`.
+ *
+ * Adds client-side numeric validation: rejects non-numeric characters and enforces
+ * optional `precision` (total digits) and `scale` (decimal places) constraints.
+ * Validation errors are reported to the parent via the `onError` callback so the
+ * parent can track whether any field is in an error state (e.g., to disable Save).
+ *
+ * On blur the displayed value is normalized to a JS `Number` (comma decimal separators
+ * are converted to dots) so the data source always stores a proper numeric value.
+ */
+export type BoundNumericTextFieldProps = Omit<TextfieldProps, "onChange" | "onKeyDown" | "onError"> & {
+	field: string;
+	precision?: number;
+	scale?: number;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	onError?: (error: string | null) => void;
+};
+
+export function BoundNumericTextField({
+	field,
+	precision,
+	scale,
+	onChange: onChangeProp,
+	onError,
+	...props
+}: BoundNumericTextFieldProps) {
+	let { value, setValue, onChange, onKeyDown } = useField<any, any>(field);
+
+	let [error, setError] = useState<string | null>(null);
+
+	function checkNumber(value: string, precision: number, scale: number) {
+		if (value[0] === "0") {
+			value = value[0].replace("0", "");
+		}
+
+		let [integer, decimal] = value.split(",");
+		if (value.includes(".")) {
+			[integer, decimal] = value.split(".");
+		}
+
+		integer = integer.replace("-", "");
+
+		if (integer.length > precision - scale) {
+			setError(localize`The amount of whole numbers is too high. Allowed limit is ${precision - scale}`);
+			return;
+		}
+
+		if (decimal && decimal.length > scale) {
+			setError(localize`The amount of decimal places is too high. Allowed limit is ${scale}`);
+			return;
+		}
+
+		setError(null);
+	}
+
+	function checkError(value: string, precision: number | undefined, scale: number | undefined) {
+		let regExp = /[a-zA-Z `!@#$%^&*()_+=[\]{};':"\\|<>/?~]/;
+
+		if (regExp.test(value)) {
+			setError(getLocalizedString("Please enter a valid number"));
+		} else if (value.substring(1).includes("-")) {
+			setError(getLocalizedString("Please enter a valid number"));
+		} else if (precision !== undefined && scale !== undefined) {
+			checkNumber(value, precision, scale);
+		} else {
+			setError(null);
+		}
+	}
+
+	useEffect(() => {
+		onError?.(error);
+	}, [error, onError]);
+
+	return (
+		<Textfield
+			name={field}
+			error={error ?? undefined}
+			{...(props as any)}
+			value={value ?? ""}
+			onChange={(event) => {
+				onChangeProp?.(event as any);
+				if (!event.defaultPrevented) {
+					checkError((event.target as HTMLInputElement).value, precision, scale);
+					onChange(event as any);
+				}
+			}}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+			onBlur={(evt) => {
+				const raw = (evt.target as HTMLInputElement).value;
+				if (raw !== "") {
+					setValue(Number(raw.replaceAll(",", ".")));
+				}
+			}}
+		/>
+	);
+}

package/src/binding/BoundSelect.tsx

@@ -0,0 +1,31 @@
+import { Select, type SelectProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type BoundSelectProps = Omit<SelectProps, "onChange" | "value"> & {
+	field: string;
+	onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+};
+
+export const BoundSelect = forwardRef<HTMLSelectElement, BoundSelectProps>(function BoundSelect(
+	{ field, onChange: onChangeProp, ...props },
+	ref,
+) {
+	let { value, onChange, onKeyDown } = useField<any, any>(field);
+
+	return (
+		<Select
+			name={field}
+			value={value ?? ""}
+			onChange={(evt) => {
+				onChangeProp?.(evt);
+				if (!evt.defaultPrevented) {
+					onChange(evt as any);
+				}
+			}}
+			onKeyDown={(evt) => onKeyDown(evt as any)}
+			{...props}
+			ref={ref}
+		/>
+	);
+});

package/src/binding/BoundSwitch.tsx

@@ -0,0 +1,30 @@
+import { Switch, type SwitchProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type BoundSwitchProps = Omit<SwitchProps, "onChange" | "checked"> & {
+	field: string;
+	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const BoundSwitch = forwardRef<HTMLInputElement, BoundSwitchProps>(function BoundSwitch(
+	{ field, onChange: onChangeProp, ...props },
+	ref,
+) {
+	let { value, setValue } = useField<any, any>(field);
+
+	return (
+		<Switch
+			name={field}
+			{...(props as any)}
+			checked={value ?? false}
+			onChange={(evt) => {
+				onChangeProp?.(evt);
+				if (!evt.defaultPrevented) {
+					setValue(evt.target.checked);
+				}
+			}}
+			ref={ref}
+		/>
+	);
+});

package/src/binding/BoundTextField.tsx

@@ -0,0 +1,41 @@
+import { Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { useField } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export type BoundTextFieldProps = Omit<TextfieldProps, "value" | "onChange" | "onKeyDown"> & {
+	field: string;
+};
+
+export const BoundTextField = forwardRef<HTMLInputElement & HTMLTextAreaElement, BoundTextFieldProps>(
+	function BoundTextField({ field, ...props }, ref) {
+		let { error, value, onChange, onKeyDown } = useField<any, any>(field);
+
+		let inputValue = value;
+		if (props.type === "date" && value instanceof Date) {
+			inputValue = value.toISOString().split("T")[0];
+		} else if (["datetime", "datetime-local"].includes(props.type ?? "") && value instanceof Date) {
+			inputValue = value.toISOString().replace("Z", "");
+		}
+
+		return (
+			<Textfield
+				name={field}
+				error={error ?? undefined}
+				{...(props as any)}
+				value={inputValue ?? ""}
+				onChange={(evt) => {
+					if (["datetime", "datetime-local"].includes(props.type ?? "")) {
+						onChange(
+							evt as any,
+							(evt.target as HTMLInputElement).value ? `${(evt.target as HTMLInputElement).value}Z` : null,
+						);
+					} else {
+						onChange(evt as any);
+					}
+				}}
+				onKeyDown={(evt) => onKeyDown(evt as any)}
+				ref={ref}
+			/>
+		);
+	},
+);

package/src/binding/CancelButton.tsx

@@ -0,0 +1,27 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useCancelButton } from "@olenbetong/appframe-react";
+import { type ForwardRefExoticComponent, forwardRef, type RefAttributes } from "react";
+
+export const CancelButton: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<
+	HTMLButtonElement,
+	ButtonProps
+>(function CancelButton({ onClick, children, ...props }, ref) {
+	let { cancelEdit } = useCancelButton();
+
+	return (
+		<Button
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					cancelEdit();
+				}
+			}}
+			variant="secondary"
+			{...props}
+			ref={ref}
+		>
+			{children ?? getLocalizedString("Cancel")}
+		</Button>
+	);
+});

package/src/binding/CancelIconButton.tsx

@@ -0,0 +1,30 @@
+import { Button, type ButtonProps } from "@digdir/designsystemet-react";
+import UndoIcon from "@mui/icons-material/Undo";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import { useCancelButton } from "@olenbetong/appframe-react";
+import { forwardRef } from "react";
+
+export const CancelIconButton = forwardRef<HTMLButtonElement, Omit<ButtonProps, "icon">>(function CancelIconButton(
+	{ onClick, children, ...props },
+	ref,
+) {
+	let { cancelEdit } = useCancelButton();
+
+	return (
+		<Button
+			icon
+			aria-label={getLocalizedString("Revert unsaved changes")}
+			variant="tertiary"
+			onClick={(evt) => {
+				onClick?.(evt);
+				if (!evt.defaultPrevented) {
+					cancelEdit();
+				}
+			}}
+			{...props}
+			ref={ref}
+		>
+			{children ?? <UndoIcon />}
+		</Button>
+	);
+});