@olenbetong/appframe-ds 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# @olenbetong/appframe-ds
+
+## 0.2.0
+
+### Minor Changes
+
+- 6b58d71: Initial release of `@olenbetong/appframe-ds`
+
+  New package providing [Designsystemet](https://github.com/digdir/designsystemet) equivalents of the components in `@olenbetong/appframe-mui`. Enables gradual per-app migration from MUI to `@digdir/designsystemet-react`.
+
+  **Binding components** (`import { … } from "@olenbetong/appframe-ds"`):
+  - `BoundTextField` — `<Textfield>` bound to an Appframe field via `useField`; handles date/datetime-local formatting
+  - `BoundInput` — bare `<Input>` binding, use inside a DS `<Field>` wrapper
+  - `BoundNumericTextField` — `<Textfield>` with optional `precision`/`scale` numeric validation and blur-normalisation
+  - `BoundCheckbox` — `<Checkbox>` bound to a boolean field
+  - `BoundSelect` — `<Select>` (native) bound to a field
+  - `BoundSwitch` — `<Switch>` bound to a boolean field
+  - `BoundDatePicker` — `<Textfield type="date">` bound to a date field
+  - `BoundDateTimePicker` — `<Textfield type="datetime-local">` bound to a datetime field
+  - `SaveButton` / `SaveIconButton` — wraps `useSaveButton`
+  - `CancelButton` / `CancelIconButton` — wraps `useCancelButton`
+  - `DeleteButton` / `DeleteIconButton` — wraps `useDeleteButton`, renders with `data-color="danger"`
+  - `RefreshButton` / `RefreshIconButton` — wraps `useRefreshButton` / `dataObject.refreshDataSource()`
+  - `RefreshRowIconButton` — wraps `useRefreshRowButton`
+  - `DataEditToolbar` — flex toolbar with save/cancel/refresh-row icon buttons and optional index navigator
+  - `DataObjectSelect` / `BoundDataObjectSelect` — DS `<Select>` populated from a data object's data handler
+
+  **Lookup components** (`import { … } from "@olenbetong/appframe-ds"`):
+  - `Combobox` — virtualised search-and-select list using `react-window`; no MUI dependency
+  - `AfLookup` / `useLookup` — full lookup field with DS `<Textfield>` + native `<dialog>` popup
+  - `BoundLookup` — `AfLookup` bound to a data object via `useCurrentRow`

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@olenbetong/appframe-ds",
+  "version": "0.2.0",
+  "description": "Components that bind Designsystemet components to Appframe data objects",
+  "type": "module",
+  "types": "./es/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./es/index.js"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "author": "Bjørnar Vister Hansen <bvh@olenbetong.no>",
+  "license": "MIT",
+  "peerDependencies": {
+    "@digdir/designsystemet-react": ">=1.0.0",
+    "@mui/icons-material": ">=7.0.0",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
+  "dependencies": {
+    "@olenbetong/appframe-core": "2.11.10",
+    "@olenbetong/appframe-data": "1.5.0",
+    "@olenbetong/appframe-react": "1.21.25",
+    "react-window": "^1.8.11",
+    "react-virtualized-auto-sizer": "^1.0.26",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@digdir/designsystemet-react": "1.13.3",
+    "@mui/icons-material": "9.0.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@types/react-window": "^1.8.8",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "typescript": "6.0.3"
+  },
+  "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"
+  }
+}

package/src/AfLookup/BoundLookup.tsx

@@ -0,0 +1,35 @@
+import type { CurrentRow, DataObject } from "@olenbetong/appframe-data";
+import { useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
+
+import { AfLookup, type AfLookupProps } from "./Lookup.js";
+
+export interface BoundLookupProps<
+	TBoundData extends Record<string, unknown>,
+	TLookupData extends Record<string, unknown>,
+> extends Omit<AfLookupProps<TLookupData>, "onChange"> {
+	dataObject: DataObject<TLookupData>;
+	displayField?: keyof TBoundData;
+	getChanges: (selectedItem: TLookupData | null) => Partial<TBoundData>;
+	getDisplayValue?: (currentRow: CurrentRow<TBoundData>) => string;
+}
+
+export function BoundLookup<
+	TBoundData extends Record<string, unknown>,
+	TLookupData extends Record<string, unknown> = any,
+>({ dataObject, displayField, getChanges, getDisplayValue, ...props }: BoundLookupProps<TBoundData, TLookupData>) {
+	let boundDataObject = useDataObject<TBoundData>();
+	let row = useCurrentRow(boundDataObject);
+
+	function handleChange(item: TLookupData | null) {
+		let changes = getChanges(item);
+
+		for (let key in changes) {
+			let newValue = changes[key] as TBoundData[keyof TBoundData];
+			boundDataObject.currentRow(key, newValue);
+		}
+	}
+
+	let displayValue = getDisplayValue ? getDisplayValue(row) : displayField ? String(row[displayField] ?? "") : "";
+
+	return <AfLookup<TLookupData> dataObject={dataObject} value={displayValue} onChange={handleChange} {...props} />;
+}

package/src/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;
+	height: 372px;
+	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/src/AfLookup/Combobox.tsx

@@ -0,0 +1,233 @@
+import "./Combobox.css";
+
+import { Button, Textfield } from "@digdir/designsystemet-react";
+import { getLocalizedString } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { useDataWithFilter, useDebounce, useLoading } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { VariableSizeList as VirtualList } from "react-window";
+
+export interface ComboboxProps<T extends Record<string, unknown>> {
+	nullable?: boolean;
+	dataObject: DataObject<T>;
+	uniqueIdField?: string;
+	isItemSelected?: (item: T) => boolean;
+	renderItem: (props: React.ComponentPropsWithRef<"li"> & { item: T }) => React.ReactNode;
+	onChange?: (item: T | null) => void;
+	value?: T;
+	onClose?: () => void;
+}
+
+export function Combobox<T extends Record<string, unknown>>({
+	nullable,
+	dataObject,
+	isItemSelected,
+	uniqueIdField = "PrimKey",
+	renderItem: Component,
+	onChange,
+	onClose,
+}: ComboboxProps<T>) {
+	let id = useId();
+	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: MediaQueryListEvent) => setIsDesktop(e.matches);
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, []);
+
+	let [currentIndex, setCurrentIndex] = useState<number>(0);
+	let listRef = useRef<VirtualList>(null);
+	let [inputValue, setInputValue] = useState(() => {
+		// Preserve filter even if the lookup is unmounted
+		let currentFilter = dataObject.getParameter("filterString") ?? "";
+		let filters = currentFilter.split(/\s+AND\s+/g);
+		let wordFilters = filters.filter((filter) => filter.includes("[SearchColumn]"));
+		let words = wordFilters.map((filter) => filter.match(/'%([^']*)%'/)?.[1] ?? "").filter(Boolean);
+
+		return words.join(" ");
+	});
+
+	let query = useDebounce(inputValue, 300);
+	let loading = useLoading(dataObject);
+	let data = useDataWithFilter(
+		dataObject,
+		query
+			.split(/\s+/g)
+			.map((word) => `[SearchColumn] LIKE '%${word}%'`)
+			.join(" AND "),
+	);
+
+	let wrapperRef = useRef<HTMLDivElement>(null);
+	let [height, setHeight] = useState<number>(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();
+	}, []);
+
+	// Reset current index when new data is loaded
+	// biome-ignore lint/correctness/useExhaustiveDependencies: isn't it obvious?
+	useEffect(() => {
+		setCurrentIndex(0);
+	}, [data]);
+
+	let getItemId = useCallback(
+		(item: T | undefined) => {
+			if (!item) {
+				return;
+			}
+
+			let itemId = item[uniqueIdField];
+
+			return `${id}-${itemId}`;
+		},
+		[id, uniqueIdField],
+	);
+
+	function handleSelectItem(item: T) {
+		onChange?.(item);
+		setInputValue("");
+	}
+
+	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+		let newIndex: number | null = null;
+
+		if (event.key === "ArrowDown") {
+			newIndex = currentIndex + 1;
+		} else if (event.key === "ArrowUp") {
+			newIndex = currentIndex - 1;
+		} else if (event.key === "Home" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+			newIndex = 0;
+		} else if (event.key === "End" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
+			newIndex = data.length - 1;
+		} else if (event.key === "Enter") {
+			event.stopPropagation();
+			event.preventDefault();
+			handleSelectItem(data[currentIndex]);
+			return;
+		}
+
+		if (newIndex !== null) {
+			event.stopPropagation();
+			event.preventDefault();
+			if (newIndex < 0) {
+				newIndex = data.length - 1;
+			} else if (newIndex >= data.length) {
+				newIndex = 0;
+			}
+			setCurrentIndex(newIndex);
+		}
+	}
+
+	let sizeMap = useRef(new Map<number, number>());
+	let getItemSize = (index: number) => sizeMap.current.get(index) ?? 56;
+	let setSize = (index: number, size: number) => {
+		if (sizeMap.current.get(index) !== size) {
+			sizeMap.current.set(index, size);
+			// listRef will not be set on the initial render, so delay resetting
+			setTimeout(() => listRef.current?.resetAfterIndex(index, true));
+		}
+	};
+
+	// biome-ignore lint: nested component defined for performance reasons inside render
+	let Row = ({ index, style: { height, ...style } }: { index: number; style: React.CSSProperties }) => {
+		let rowRef = useRef<HTMLLIElement>(null);
+
+		useLayoutEffect(() => {
+			if (!rowRef.current) return;
+			setSize(index, rowRef.current.offsetHeight);
+		}, [index]);
+
+		let item = data[index];
+		let itemId = getItemId(item);
+		let active = index === currentIndex;
+
+		return (
+			<Component
+				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}
+				key={itemId}
+				id={itemId}
+			/>
+		);
+	};
+
+	useEffect(() => listRef.current?.scrollToItem(currentIndex, "smart"), [currentIndex]);
+
+	return (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: element is not interactive, click is used to prevent dialog close
+		// biome-ignore lint/a11y/noStaticElementInteractions: element is not interactive, click is used to prevent dialog close
+		<div className="ObCombobox-root" id={id} onClick={(evt) => evt.stopPropagation()}>
+			<div className="ObCombobox-actions">
+				{nullable && (
+					<Button
+						className="ObCombobox-clear"
+						data-size={isDesktop ? "sm" : "md"}
+						variant="tertiary"
+						onClick={() => {
+							onChange?.(null);
+						}}
+					>
+						{getLocalizedString("Clear")}
+					</Button>
+				)}
+				{onClose && (
+					<Button data-size={isDesktop ? "sm" : "md"} variant="tertiary" className="ObCombobox-close" onClick={onClose}>
+						{getLocalizedString("Close")}
+					</Button>
+				)}
+			</div>
+			<Textfield
+				type="search"
+				className="ObCombobox-input"
+				label={getLocalizedString("Search")}
+				onKeyDown={handleKeyDown}
+				aria-activedescendant={getItemId(data[currentIndex]) ?? ""}
+				value={inputValue}
+				onChange={(event) => setInputValue((event.target as HTMLInputElement).value)}
+			/>
+			<div className="ObCombobox-listWrap" ref={wrapperRef}>
+				{loading && (
+					<div className="ObCombobox-progress">
+						<div className="ObCombobox-progress-bar" />
+					</div>
+				)}
+				{height > 0 && (
+					<div className="ObCombobox-list" role="listbox">
+						<VirtualList
+							ref={listRef}
+							height={height}
+							width="100%"
+							itemCount={data.length}
+							itemSize={getItemSize}
+							overscanCount={5}
+						>
+							{Row}
+						</VirtualList>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}

package/src/AfLookup/Lookup.css

@@ -0,0 +1,104 @@
+.ObLookup-dialog {
+	border: 0;
+	margin-block-start: 0;
+	padding: 1rem;
+
+	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;
+	}
+}