@olenbetong/appframe-ds 1.5.0 → 1.6.1

package/src/AfLookup/LookupEdit.tsx

@@ -1,130 +1,130 @@
-import "./Lookup.css";
-
-import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
-import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
-import type { DistributiveOmit } from "@olenbetong/appframe-react";
-
-import clsx from "clsx";
-import type React from "react";
-
-import type { LookupComboboxProps } from "./LookupCombobox.js";
-import { useLookup } from "./Lookup.js";
-import { getLocalizedString } from "../i18n.js";
-
-export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
-	LookupComboboxProps<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 function AfLookupEdit<T extends Record<string, unknown>>({
-	fullWidth = false,
-	label,
-	onChange,
-	slotProps,
-	nullable,
-	lookupField,
-	value,
-	...props
-}: AfLookupEditProps<T>) {
-	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>({
-		...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: T | null) {
-		let input = document.getElementById(inputId) as HTMLInputElement;
-		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: React.KeyboardEvent<HTMLElement>) {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			event.stopPropagation();
-			openDialog();
-		} else {
-			onKeyDown(event);
-		}
-	}
-
-	let hasClear = !!(nullable && value && onChange);
-
-	return (
-		<div style={{ anchorName } as React.CSSProperties}>
-			<div
-				className="ObLookup-inputWrap"
-				style={
-					{
-						display: fullWidth ? "block" : "inline-block",
-						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
-					} as React.CSSProperties
-				}
-			>
-				<Textfield
-					id={inputId}
-					value={value ?? ""}
-					label={label}
-					onChange={onChange}
-					onKeyDown={handleKeyDown}
-					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
-					{...(slotProps?.textField as any)}
-					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
-				/>
-				<div className="ObLookup-buttons">
-					{hasClear && (
-						<Button
-							icon
-							variant="tertiary"
-							data-size="sm"
-							aria-label={getLocalizedString("Clear")}
-							onKeyDown={(evt) => evt.stopPropagation()}
-							onClick={(evt) => {
-								evt.stopPropagation();
-								applyValue(null);
-								document.getElementById(inputId)?.focus();
-							}}
-						>
-							<XMarkIcon />
-						</Button>
-					)}
-					<Button
-						icon
-						variant="tertiary"
-						data-size="sm"
-						aria-label={getLocalizedString("Search")}
-						onClick={(evt) => {
-							evt.stopPropagation();
-							openDialog();
-						}}
-					>
-						<MagnifyingGlassIcon />
-					</Button>
-				</div>
-			</div>
-			{dialog}
-		</div>
-	);
-}
+import "./Lookup.css";
+
+import { Button, Textfield, type TextfieldProps } from "@digdir/designsystemet-react";
+import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
+import type { DistributiveOmit } from "@olenbetong/appframe-react";
+
+import clsx from "clsx";
+import type React from "react";
+
+import type { LookupComboboxProps } from "./LookupCombobox.js";
+import { useLookup } from "./Lookup.js";
+import { getLocalizedString } from "../i18n.js";
+
+export type AfLookupEditProps<T extends Record<string, unknown>> = DistributiveOmit<
+	LookupComboboxProps<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 function AfLookupEdit<T extends Record<string, unknown>>({
+	fullWidth = false,
+	label,
+	onChange,
+	slotProps,
+	nullable,
+	lookupField,
+	value,
+	...props
+}: AfLookupEditProps<T>) {
+	let { inputId, dialog, anchorName, openDialog, onKeyDown } = useLookup<T>({
+		...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: T | null) {
+		let input = document.getElementById(inputId) as HTMLInputElement;
+		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: React.KeyboardEvent<HTMLElement>) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			event.stopPropagation();
+			openDialog();
+		} else {
+			onKeyDown(event);
+		}
+	}
+
+	let hasClear = !!(nullable && value && onChange);
+
+	return (
+		<div style={{ anchorName } as React.CSSProperties}>
+			<div
+				className="ObLookup-inputWrap"
+				style={
+					{
+						display: fullWidth ? "block" : "inline-block",
+						"--ObLookup-buttons-width": hasClear ? "5.5rem" : "3rem",
+					} as React.CSSProperties
+				}
+			>
+				<Textfield
+					id={inputId}
+					value={value ?? ""}
+					label={label}
+					onChange={onChange}
+					onKeyDown={handleKeyDown}
+					className={clsx(slotProps?.textField?.className, "ObLookup-input")}
+					{...(slotProps?.textField as any)}
+					style={{ width: fullWidth ? "100%" : undefined, ...slotProps?.textField?.style }}
+				/>
+				<div className="ObLookup-buttons">
+					{hasClear && (
+						<Button
+							icon
+							variant="tertiary"
+							data-size="sm"
+							aria-label={getLocalizedString("Clear")}
+							onKeyDown={(evt) => evt.stopPropagation()}
+							onClick={(evt) => {
+								evt.stopPropagation();
+								applyValue(null);
+								document.getElementById(inputId)?.focus();
+							}}
+						>
+							<XMarkIcon />
+						</Button>
+					)}
+					<Button
+						icon
+						variant="tertiary"
+						data-size="sm"
+						aria-label={getLocalizedString("Search")}
+						onClick={(evt) => {
+							evt.stopPropagation();
+							openDialog();
+						}}
+					>
+						<MagnifyingGlassIcon />
+					</Button>
+				</div>
+			</div>
+			{dialog}
+		</div>
+	);
+}

package/src/AfLookup/LookupGrid.css

@@ -1,52 +1,145 @@
-.ObLookupGrid-root {
-	height: 100%;
-	overflow: hidden;
-	overscroll-behavior: contain;
-	border: 1px solid var(--ds-color-neutral-border-subtle);
-}
-
-.ObLookupGrid-header {
-	display: grid;
-	height: 40px;
-	align-items: center;
-	border-bottom: 1px solid var(--ds-color-neutral-border-default);
-	background-color: var(--ds-color-neutral-background-tinted);
-	font-weight: 600;
-}
-
-.ObLookupGrid-headerCell {
-	padding: 0 8px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.ObLookupGrid-row {
-	display: grid;
-	align-items: center;
-	cursor: pointer;
-	border-bottom: 1px solid var(--ds-color-neutral-border-subtle);
-
-	&.active {
-		background-color: var(--ds-color-neutral-surface-active);
-	}
-
-	&:hover {
-		background-color: var(--ds-color-neutral-surface-hover);
-	}
-}
-
-.ObLookupGrid-cell {
-	padding: 0 8px;
-	height: 100%;
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	&.active {
-		outline: 2px solid var(--ds-color-neutral-border-strong);
-		outline-offset: -2px;
-	}
-}
+.ObLookupGrid-root {
+	height: 100%;
+	overflow: hidden;
+	overscroll-behavior: contain;
+	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 {
+	height: 40px;
+	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);
+
+	&.active {
+		background-color: var(--ds-color-neutral-surface-active);
+	}
+
+	&:hover {
+		background-color: var(--ds-color-neutral-surface-hover);
+	}
+}
+
+.ObLookupGrid-cell {
+	padding: 0 8px;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	overflow: hidden;
+	white-space: nowrap;
+
+	&.active {
+		outline: 2px solid var(--ds-color-neutral-border-strong);
+		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)");
+	});
+});