@olenbetong/appframe-ds 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @olenbetong/appframe-ds
 
+## 1.6.0
+
+### Minor Changes
+
+- 3cd79b7: New `NumberInput` and `BoundNumberInput`: a number edited as text and shown in the user's culture (`culture` prop, defaulting to `af.userSession.culture` and to `nb-NO` outside a session), with stepper buttons and arrow keys that round to `decimalDigits`, `min`/`max` clamping, and the whole value selected on focus. Typed text is parsed the same way whatever the culture: both `,` and `.` are the decimal separator and whitespace the only thousands separator, so a Norwegian user typing `1.5` gets 1,5. It is built on `InputAdornments` inside a Designsystemet `Field`, so `label`, `description` and `error` work as on `Textfield`. `BoundNumberInput` binds it to a number field through `useField`. The `formatNumber`, `parseNumber` and `getDefaultCulture` helpers behind it are exported too.
+
+### Patch Changes
+
+- dc1945b: `LinearProgress` indeterminate animation is Material Design's again: two bars chase each other across the track in a 2.1 s cycle, the first growing from 35% to 90% of the track, the second starting 1.15 s later with a sharper easing and shrinking to a sliver, both holding off-screen from 60% of the cycle. The previous single bar never paused and barely changed width, so it read as a bar moving at varying speed. The bars are still moved with transforms, so the animation stays on the compositor. The lookup popup's loading bar now uses this component as an overlay instead of a bar of its own.
+- 96f6bb3: The lookup popup (`AfLookup`, `AfLookupEdit`) is laid out the conventional way: the search field on top, where the focus is, the list filling the middle, and Clear and Close as a footer. On desktop the popup renders at `data-size="sm"`, so the search field, the rows and the buttons are compact next to the field; the mobile bottom sheet keeps `md` for touch. List rows now get a subtle divider plus the hover and active states from the component, so a `renderItem` only lays out its content. The dialog padding is tightened, and on mobile the bottom sheet really sits on the bottom edge of the viewport: the user agent's modal max-height and auto margins had left a gap under it, and the height now follows the browser chrome (`dvh`).
+
+  The grid variant's header now follows the rows when the columns are wider than the popup and the list scrolls sideways; before, only the rows moved. Columns can be resized by dragging the handle at the end of a header cell (double click restores the configured width), and the header row is given the list's inner width so `1fr` columns line up with the rows whether or not there is a vertical scrollbar. Clicking a header sorts by that column (again to flip the direction) through the data object's sort order, so the server sorts and every page follows; a column sets `sortable: false` to opt out. Truncated cell text now ends in an ellipsis; the cell is a flex container, which never applied one to its own text. The loading bar is laid over the top edge of the list instead of being inserted above it, so the rows no longer jump by its height while a search runs.
+
+- 3cd79b7: `InputAdornments` and `Autocomplete` drop their `data-size="xs"` rules. Designsystemet components come in `sm`, `md` and `lg` only (`xs` and `xl` are typography sizes), so the rules never matched a working size and `xs` rendered as `md`.
+- 56fb84d: The lookup dialog flips above or to the left of its input when there is no room below or to the right, instead of opening outside the viewport.
+
 ## 1.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -62,37 +62,38 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "4.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
-    "@base-ui/react": "1.8.0",
+    "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.15.2",
-    "@olenbetong/appframe-data": "^1.8.2",
-    "@olenbetong/appframe-react": "^2.2.7",
+    "@olenbetong/appframe-data": "^1.8.3",
+    "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
-    "dockview-react": "8.3.1",
+    "dockview-react": "8.6.1",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
-    "react-window": "2.3.3",
-    "temporal-polyfill": "1.0.5"
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "react-window": "2.5.0",
+    "temporal-polyfill": "1.0.6"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.23.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@mui/material": "9.4.0",
-    "@mui/x-data-grid-premium": "8.29.3",
+    "@mui/material": "9.5.0",
+    "@mui/x-data-grid-premium": "8.29.5",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.17.2",
+    "@navikt/aksel-icons": "8.19.2",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
-    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "happy-dom": "20.14.5",
+    "happy-dom": "21.0.4",
     "react-error-boundary": "6.1.6",
-    "react-router": "8.4.0",
-    "typescript": "7.0.2"
+    "react-router": "8.5.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.5"
   },
   "scripts": {
     "build": "pnpm run build:tsc && pnpm test && pnpm run build:css",

package/src/AfLookup/Lookup.css

@@ -25,7 +25,8 @@
 .ObLookup-dialog {
 	border: 0;
 	margin-block-start: 0;
-	padding: 1rem;
+	/* Tight: the search field sits at the top edge and the footer buttons carry their own padding */
+	padding: var(--ds-size-3, 0.75rem) var(--ds-size-2, 0.5rem) var(--ds-size-1, 0.25rem);
 	overflow: hidden;
 
 	background-color: var(--ds-color-neutral-background-tinted);
@@ -54,11 +55,19 @@
 	}
 
 	@media (width < 768px) {
-		inset: 10vh 0.5rem 0;
+		/*
+		 * A bottom sheet. The UA stylesheet caps a modal dialog at calc(100% - 6px - 2em) and
+		 * centres it with auto margins, which left a gap under the sheet; drop both so the box
+		 * really sits on the bottom edge. dvh follows the mobile browser chrome.
+		 */
+		inset: auto 0.5rem 0;
+		margin: 0;
+		max-height: none;
 
 		border-radius: 1rem 1rem 0 0;
 		height: 90vh;
-		width: calc(100vw - 1rem);
+		height: 90dvh;
+		width: auto;
 		max-width: 100vw;
 		transform: translateY(100%);
 		z-index: 1500;
@@ -112,6 +121,14 @@
 			inset-inline-start: anchor(left);
 			inset-inline-end: unset;
 
+			/* Below and to the right of the input when there is room; otherwise above it, or
+			   aligned to its right edge, so an input near the bottom or the right edge of the
+			   viewport still gets a visible dialog. */
+			position-try-fallbacks:
+				flip-block,
+				flip-inline,
+				flip-block flip-inline;
+
 			translate: unset;
 			transform-origin: top left;
 

package/src/AfLookup/LookupCombobox.css

@@ -1,8 +1,9 @@
+/* Search on top (it has the focus), the list filling the middle, Clear and Close as a footer */
 .ObCombobox-root {
 	height: 100%;
 	display: grid;
-	grid-template-rows: min-content auto 1fr;
-	gap: 0.5rem;
+	grid-template-rows: auto 1fr min-content;
+	gap: var(--ds-size-2, 0.5rem);
 
 	overscroll-behavior: contain;
 }
@@ -12,7 +13,13 @@
 	justify-content: space-between;
 }
 
+/* Close stays at the end when there is no Clear */
+.ObCombobox-close {
+	margin-inline-start: auto;
+}
+
 .ObCombobox-listWrap {
+	position: relative;
 	overflow: hidden;
 	min-height: 0;
 	border: 1px solid var(--ds-color-neutral-border-subtle);
@@ -33,8 +40,15 @@
 	background-color: var(--ds-color-neutral-background-default);
 }
 
+/*
+ * The rows are rendered by the consumer; the divider and the hover and active
+ * states come from here, so a row only has to lay out its content.
+ */
 .ObCombobox-listItem {
 	cursor: pointer;
+	box-sizing: border-box;
+	list-style: none;
+	border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
 
 	&.active {
 		background-color: var(--ds-color-neutral-surface-active);
@@ -45,28 +59,11 @@
 	}
 }
 
-.ObCombobox-progress {
-	position: relative;
-	height: 4px;
-	overflow: hidden;
-	background-color: var(--ds-color-neutral-surface-tinted);
-}
-
-.ObCombobox-progress-bar {
-	position: absolute;
-	top: 0;
-	left: -100%;
-	height: 100%;
-	width: 50%;
-	background-color: var(--ds-color-brand-base-default);
-	animation: ObCombobox-progress-anim 1.5s ease-in-out infinite;
-}
-
-@keyframes ObCombobox-progress-anim {
-	0% {
-		left: -100%;
-	}
-	100% {
-		left: 200%;
-	}
+/*
+ * The loading bar is a `LinearProgress overlay`: a zero-height wrapper at the
+ * top of the list wrap, with the bar laid over the first rows, so nothing moves
+ * when it appears. The track is square here so it hugs the list border.
+ */
+.ObCombobox-progress .ObLinearProgress-root {
+	border-radius: 0;
 }

package/src/AfLookup/LookupCombobox.tsx

@@ -1,15 +1,16 @@
 import "./LookupCombobox.css";
 
 import { Button, Textfield } from "@digdir/designsystemet-react";
-import type { DataObject } from "@olenbetong/appframe-data";
+import { type DataObject, SortOrder } from "@olenbetong/appframe-data";
 import { type LookupColumn, useComboboxData } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { List, type RowComponentProps, useDynamicRowHeight, useListRef } from "react-window";
 
-import { LookupGrid } from "./LookupGrid.js";
+import { LookupGrid, type LookupGridSort } from "./LookupGrid.js";
 import { getLocalizedString } from "../i18n.js";
+import { LinearProgress } from "../progress/LinearProgress.js";
 
 export interface LookupComboboxBaseProps<T extends Record<string, unknown>> {
 	nullable?: boolean;
@@ -126,6 +127,27 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 		onChange,
 	});
 
+	// Sorting goes through the data object, so it is done by the server and covers every page.
+	// Like the search filter, it stays on the data object after the popup closes.
+	let [sortOrder, setSortOrder] = useState<Record<string, SortOrder>[]>(
+		() => (dataObject.getParameter("sortOrder") as Record<string, SortOrder>[] | undefined) ?? [],
+	);
+	let sort = useMemo<LookupGridSort | undefined>(() => {
+		let [first] = sortOrder;
+		let entry = first && Object.entries(first)[0];
+		if (!entry) return undefined;
+		let [field, direction] = entry;
+		return { field, direction: String(direction).startsWith("desc") ? "desc" : "asc" };
+	}, [sortOrder]);
+
+	function handleSort(field: string) {
+		let direction = sort?.field === field && sort.direction === "asc" ? SortOrder.Desc : SortOrder.Asc;
+		let next = [{ [field]: direction }];
+		setSortOrder(next);
+		dataObject.setParameter("sortOrder", next as never);
+		dataObject.refreshDataSource();
+	}
+
 	let wrapperRef = useRef<HTMLDivElement>(null);
 	let [height, setHeight] = useState<number>(0);
 
@@ -161,26 +183,15 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 	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
-		<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>
+		// Compact on desktop, where the popup is a small dialog next to the field; the mobile
+		// bottom sheet keeps the default size for touch. The size cascades to the search field,
+		// the rows and the buttons.
+		<div
+			className="ObCombobox-root"
+			id={id}
+			data-size={isDesktop ? "sm" : "md"}
+			onClick={(evt) => evt.stopPropagation()}
+		>
 			<Textfield
 				type="search"
 				className="ObCombobox-input"
@@ -193,9 +204,12 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 			/>
 			<div className="ObCombobox-listWrap" ref={wrapperRef}>
 				{loading && (
-					<div className="ObCombobox-progress">
-						<div className="ObCombobox-progress-bar" />
-					</div>
+					<LinearProgress
+						overlay
+						className="ObCombobox-progress"
+						data-size="xs"
+						aria-label={getLocalizedString("Loading")}
+					/>
 				)}
 				{height > 0 &&
 					(columns ? (
@@ -208,6 +222,8 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 							getItemId={getItemId}
 							isItemSelected={isItemSelected}
 							onSelectItem={handleSelectItem}
+							sort={sort}
+							onSort={handleSort}
 						/>
 					) : (
 						<div className="ObCombobox-list" role="listbox">
@@ -232,6 +248,26 @@ export function LookupCombobox<T extends Record<string, unknown>>(props: LookupC
 						</div>
 					))}
 			</div>
+			{(nullable || onClose) && (
+				<div className="ObCombobox-actions">
+					{nullable && (
+						<Button
+							className="ObCombobox-clear"
+							variant="tertiary"
+							onClick={() => {
+								onChange?.(null);
+							}}
+						>
+							{getLocalizedString("Clear")}
+						</Button>
+					)}
+					{onClose && (
+						<Button variant="tertiary" className="ObCombobox-close" onClick={onClose}>
+							{getLocalizedString("Close")}
+						</Button>
+					)}
+				</div>
+			)}
 		</div>
 	);
 }

package/src/AfLookup/LookupGrid.css

@@ -5,25 +5,111 @@
 	border: 1px solid var(--ds-color-neutral-border-subtle);
 }
 
+/* No text selection while a column is being dragged */
+.ObLookupGrid-root[data-resizing] {
+	user-select: none;
+	cursor: col-resize;
+}
+
+/*
+ * The header does not scroll itself: the list is the only scroll container, and the header
+ * row inside is moved sideways with a transform to follow it.
+ */
 .ObLookupGrid-header {
-	display: grid;
 	height: 40px;
-	align-items: center;
+	overflow: hidden;
 	border-bottom: 1px solid var(--ds-color-neutral-border-default);
 	background-color: var(--ds-color-neutral-background-tinted);
 	font-weight: 600;
 }
 
+.ObLookupGrid-headerRow {
+	display: grid;
+	align-items: center;
+	height: 100%;
+	box-sizing: border-box;
+}
+
 .ObLookupGrid-headerCell {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: 100%;
 	padding: 0 8px;
 	overflow: hidden;
+}
+
+.ObLookupGrid-headerText {
+	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
+/* A sortable header: the whole cell text is the button, the arrow shows on hover and when sorted */
+.ObLookupGrid-sortButton {
+	display: flex;
+	align-items: center;
+	gap: var(--ds-size-1, 0.25rem);
+	min-width: 0;
+	max-width: 100%;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+	text-align: start;
+
+	.ObLookupGrid-sortIcon {
+		flex-shrink: 0;
+		font-size: 1.125em;
+		opacity: 0;
+		transition: opacity 0.15s ease-out;
+	}
+
+	&:hover .ObLookupGrid-sortIcon {
+		opacity: 0.5;
+	}
+
+	&.sorted .ObLookupGrid-sortIcon {
+		opacity: 1;
+	}
+}
+
+/* The drag handle: a wide hit area at the end of the cell with a thin line drawn in it */
+.ObLookupGrid-resizer {
+	position: absolute;
+	inset-block: 0;
+	inset-inline-end: 0;
+	width: 9px;
+	cursor: col-resize;
+	touch-action: none;
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset-block: 25%;
+		inset-inline-end: 4px;
+		width: 1px;
+		background-color: var(--ds-color-neutral-border-default);
+	}
+
+	&:hover::after {
+		inset-block: 15%;
+		width: 2px;
+		background-color: var(--ds-color-neutral-border-strong);
+	}
+}
+
+/* Keeps the client width stable whether or not there are enough rows for a scrollbar */
+.ObLookupGrid-list {
+	scrollbar-gutter: stable;
+}
+
 .ObLookupGrid-row {
 	display: grid;
 	align-items: center;
+	box-sizing: border-box;
 	cursor: pointer;
 	border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
 
@@ -42,7 +128,6 @@
 	display: flex;
 	align-items: center;
 	overflow: hidden;
-	text-overflow: ellipsis;
 	white-space: nowrap;
 
 	&.active {
@@ -50,3 +135,11 @@
 		outline-offset: -2px;
 	}
 }
+
+/* text-overflow does not apply to text directly inside a flex container, so it sits on this span */
+.ObLookupGrid-cellText {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/src/AfLookup/LookupGrid.test.tsx

@@ -0,0 +1,142 @@
+import type { LookupColumn } from "@olenbetong/appframe-react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+
+import { LookupGrid } from "./LookupGrid.js";
+
+type Row = { PrimKey: string; Name: string; Code: string };
+
+const COLUMNS: LookupColumn<Row>[] = [
+	{ field: "Code", headerName: "Code", width: 100 },
+	{ field: "Name", headerName: "Name" },
+];
+
+const DATA: Row[] = [
+	{ PrimKey: "1", Code: "A", Name: "Alpha" },
+	{ PrimKey: "2", Code: "B", Name: "Beta" },
+];
+
+function renderGrid(props: Partial<React.ComponentProps<typeof LookupGrid<Row>>> = {}) {
+	return render(
+		<LookupGrid<Row>
+			columns={COLUMNS}
+			data={DATA}
+			height={300}
+			currentIndex={0}
+			currentColumn={0}
+			getItemId={(item) => item?.PrimKey}
+			onSelectItem={() => undefined}
+			{...props}
+		/>,
+	);
+}
+
+function headerRow() {
+	return screen.getByRole("grid").querySelector(".ObLookupGrid-headerRow") as HTMLElement;
+}
+
+beforeAll(() => {
+	// happy-dom has no pointer capture; the handle only checks that it holds it during a drag
+	let captured = new WeakMap<Element, number>();
+	Element.prototype.setPointerCapture = function (id: number) {
+		captured.set(this, id);
+	};
+	Element.prototype.hasPointerCapture = function (id: number) {
+		return captured.get(this) === id;
+	};
+	Element.prototype.releasePointerCapture = function () {
+		captured.delete(this);
+	};
+	if (typeof ResizeObserver === "undefined") {
+		globalThis.ResizeObserver = class {
+			observe() {}
+			unobserve() {}
+			disconnect() {}
+		} as never;
+	}
+});
+
+describe("LookupGrid", () => {
+	it("lays the header out with the configured column tracks", () => {
+		renderGrid();
+
+		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
+		expect(headerRow().style.minWidth).toBe("180px");
+	});
+
+	it("moves the header sideways with the list", () => {
+		renderGrid();
+
+		let list = screen.getByRole("rowgroup");
+		list.scrollLeft = 37;
+		fireEvent.scroll(list);
+
+		expect(headerRow().style.transform).toBe("translateX(-37px)");
+	});
+
+	it("resizes a column by dragging its handle, and resets it on double click", () => {
+		renderGrid();
+
+		let [handle] = screen.getAllByRole("separator", { name: "Resize column" });
+		let cell = handle.parentElement as HTMLElement;
+		vi.spyOn(cell, "getBoundingClientRect").mockReturnValue({ width: 100 } as DOMRect);
+
+		fireEvent.pointerDown(handle, { button: 0, pointerId: 1, clientX: 200 });
+		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 250 });
+		expect(headerRow().style.gridTemplateColumns).toBe("150px minmax(80px, 1fr)");
+		expect(headerRow().style.minWidth).toBe("230px");
+
+		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 0 });
+		expect(headerRow().style.gridTemplateColumns).toBe("80px minmax(80px, 1fr)");
+
+		fireEvent.pointerUp(handle, { pointerId: 1, clientX: 0 });
+		expect(screen.getByRole("grid")).not.toHaveAttribute("data-resizing");
+
+		fireEvent.doubleClick(handle);
+		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
+	});
+
+	it("renders plain headers when there is no sort handler", () => {
+		renderGrid();
+
+		expect(screen.queryByRole("button", { name: "Code" })).toBeNull();
+		expect(screen.getByRole("columnheader", { name: /^Code/ })).not.toHaveAttribute("aria-sort");
+	});
+
+	it("sorts on a header click, marks the sorted column and keeps the focus where it is", () => {
+		let onSort = vi.fn();
+		renderGrid({ onSort, sort: { field: "Name", direction: "desc" } });
+
+		expect(screen.getByRole("columnheader", { name: /^Name/ })).toHaveAttribute("aria-sort", "descending");
+		expect(screen.getByRole("columnheader", { name: /^Code/ })).not.toHaveAttribute("aria-sort");
+
+		let button = screen.getByRole("button", { name: "Code" });
+		let mouseDown = fireEvent.mouseDown(button);
+		expect(mouseDown).toBe(false);
+
+		fireEvent.click(button);
+		expect(onSort).toHaveBeenCalledWith("Code");
+	});
+
+	it("leaves a column marked sortable: false as plain text", () => {
+		renderGrid({
+			onSort: vi.fn(),
+			columns: [
+				{ field: "Code", headerName: "Code", sortable: false },
+				{ field: "Name", headerName: "Name" },
+			],
+		});
+
+		expect(screen.queryByRole("button", { name: "Code" })).toBeNull();
+		expect(screen.getByRole("button", { name: "Name" })).toBeInTheDocument();
+	});
+
+	it("ignores moves that are not part of a drag", () => {
+		renderGrid();
+
+		let [handle] = screen.getAllByRole("separator", { name: "Resize column" });
+		fireEvent.pointerMove(handle, { pointerId: 1, clientX: 250 });
+
+		expect(headerRow().style.gridTemplateColumns).toBe("100px minmax(80px, 1fr)");
+	});
+});